@charset "utf-8";
/*
Theme Name: fujinet
Version: 1.0
Template: arkhe
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');
@import url("https://use.typekit.net/opd4hcq.css");

:root {
	--ark-padding--container: min(24px, 3vw);
	--keycolor: #004093;
	--subcolor: #ffdc00;
	--font-default: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	--font-mincho: "游明朝体", "Yu Mincho", YuMincho, 'Hiragino Mincho Pro', serif;
}

html
{
	scroll-behavior: smooth;
}


body
{
	font-family: var(--font-default);
	line-height: 1.8;
	font-feature-settings: "palt";
	letter-spacing: 0.08em;
}

img
{
	pointer-events: none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	user-select:none;
}


.l-header
{
	background-color: rgb(255, 255, 255, 0.9);
    top: calc(var(--ark-adminbar_height, 0) + 10px);
    border-radius: 10px;
	width: calc(100% - (var(--ark-padding--container) * 2));
	margin: 0 var(--ark-padding--container);
	
	@media only screen and (min-width: 768px)
	{
		top: calc(var(--ark-adminbar_height, 0) + 20px);
		left: calc((100% - var(--ark-width--container)) / 2);
		width: var(--ark-width--container);
		padding: 8px 0;
	}
}
.l-container.l-container-tiny {
    max-width: 640px;
}
.l-container.l-container-small {
    max-width: 860px;
}
.l-container.l-container-middle {
    max-width: 1080px;
}

.l-content
{
    margin-top: calc(var(--ark-header_height) * -1);
	padding-bottom: 40px;
	
	/* トラック */
	&::before {
		content: "";
		position: absolute;
		bottom: 0%;
		left: 100%;
		width: 120px;
		height: 44px;
		background-image: url('assets/img/truck_illust_l.png');
		background-size: contain;
		background-repeat: no-repeat;
		animation: truck-drive 10s linear infinite;
		z-index: 10;
	}

	@media screen and (min-width: 768px) {
		&::before {
			width: 150px;
			height: 55px;
			animation: truck-drive-mobile 18s linear infinite;
		}
	}
}

/* トラックanimation */
@keyframes truck-drive
{
	0% {
		left: 100%;
	}
	100% {
		left: -120px;
	}
}
@keyframes truck-drive-mobile
{
	0% {
		left: 100%;
	}
	100% {
		left: -150px;
	}
}



.c-gnav__li
{
	& .c-gnav__a
	{
		font-weight: 600;
		padding: 8px 12px;
		
		&:hover
		{
			color: var(--keycolor);
		}
		
	}
	&.-current
	{
		& a
		{
			color: var(--keycolor);
		}
	}

}
.c-drawerNav__li
{
	& .c-drawerNav__a
	{	
		transition-duration: .3s;
		&:hover
		{
			background-color: var(--keycolor);
		}
	}
	
	&.current_page_item
	{
		& a
		{
			background-color: var(--keycolor);
		}
	}
	}
}
.c-iconBtn__icon
{
    height: 30px;
    width: 30px;
}


/* ==================================
  Footer
================================== */
.l-footer {
	position: relative;
	z-index: 1;
	
	& .l-container
	{
		justify-content: space-between;
		
		& .-widget1
		{
			flex-basis: auto !important;
			width: 100%;

			& .widget_media_image
			{
				width: 260px;
			}
			& .widget_text
			{
				margin-top: 15px;
			}
		}

		& .-widget2
		{
			margin-left: 0;
			
			& .fnav
			{
				& .-lvl01
				{
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 10px;
					list-style: none;
					padding: 0;
					
					& .-title
					{
						color: var(--subcolor);
					}

					& .-lvl02
					{
						list-style: disc;
						
						& a
						{
							text-decoration: none;
						}
					}
					
				}
			}
		}

		@media screen and (min-width: 768px)
		{
			& .-widget2
			{
				flex-basis: auto !important;
				width: 62%;

				& .fnav
				{
					& .-lvl01
					{
						grid-template-columns: repeat(4, 1fr);
						gap: 20px;
						
					}
					
				}
			}
		}
	}
	@media screen and (min-width: 768px)
	{
		& .l-container
		{
			& .-widget1
			{
				width: 28%;
			}
		}
	}
}



/* ==================================
  COMMON
================================== */
.sec
{
	& h2.-title
	{
		font-size: 1.7rem;
		margin-bottom: 1.6em;
		text-align: center;
	}
	@media screen and (min-width: 768px)
	{
		& h2.-title
		{
				font-size: 2.1rem;
				margin-bottom: 1.6em;
		}
	}
}





/* ==================================
  KV for HOME
================================== */
.-kv_gallery
{
    height: 650px;
    max-height: 70vh;
	position: relative;
	
	
	& .splide__track
	{
		height: 100%;
	
		& img
		{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	& .-catch
	{
		position: absolute;
		left: var(--ark-padding--container);
		top: 50%;
		transform: translateY(-50%);
		color: #ffffff;
		font-size: 2.1rem;
		font-weight: 400;
		
		& span
		{
			color: var(--subcolor);
			font-weight: 800;
		}
	}
	
	@media only screen and (min-width: 768px)
	{
		height: 100vh;
		max-height: 1000px;
	
		& .-catch
		{
			left: calc((100% - var(--ark-width--container)) / 2);
			font-size: 3rem;
		}
	}
}


/* ==================================
  NEWS for HOME
================================== */
.sec-news
{
	background-color: #eeeeee;
	padding: 25px 0;
	
	.-ticker
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 0.84em;
		background: #ffffff;
		overflow: hidden;
		border-radius: 99999px;
		
		margin: 0 var(--ark-padding--container);
		width: calc(100% - (var(--ark-padding--container) * 2));
		max-width: 800px;
		
		& > *
		{
			line-height: 42px;
		}

		& .-label
		{
			font-weight: 400;
			font-size: 0.84em;
			color: var(--subcolor);
			white-space: nowrap;
			background-color: var(--keycolor);
			text-align: center;
			flex-basis: auto;
			padding: 0 10px;
		}

		& .-body
		{
			position: relative;
			flex: 1;
            height: 42px;

			& .-item
			{
				position: absolute;
				top: 0;
				left: 10px;
				width: calc(100% - 10px);
				opacity: 0;
				transition: opacity 0.8s ease;

				& a
				{
					color: #2980b9;
					display: flex;
					text-decoration: none;
					font-weight: normal;
					
					& .-date
					{
						margin-right: 10px;
						color: #999;
						font-size: 0.9em;
					}

					& .-title
					{
						color: #2980b9;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				&.active {
					opacity: 1;
					z-index: 1;
				}
			}

		}
		
		& .-link
		{
			flex-basis: auto;
            text-align: center;
			
			& a
			{
				padding: 0 10px;
				border-left: 1px solid #ccc;
			}
		}
	}
	
	@media only screen and (min-width: 768px)
	{
		.-ticker
		{
			font-size: 1em;
			width: 100%;
			margin: 0 auto;
			
			& .-label
			{
				font-size: 1em;
				padding: 0 20px;
			}
			& .-body
			{
				& .-item
				{
					left: 15px;
					width: calc(100% - 15px);
				}
			}
			& .-link
			{
				& a
				{
					font-size: 1em;
					padding: 0 20px;
				}
			}
		}
	}
}


/* ==================================
  JOURNEY for HOME
================================== */
.sec-journey
{
	background-image: url("assets/img/bg_journey.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #ffffff;
	text-align: center;
	padding: 80px 0 150px;
	
	& .-title
	{
		font-family: var(--font-mincho);
		font-style: italic;
		font-size: 2.8rem;
		font-weight: 500;
		line-height: 1;
		margin-bottom: 1.5rem;
	}
	& .-subtitle
	{
		color: var(--subcolor);
		font-family: "futura-pt", sans-serif;
		font-weight: 400;
		font-size: 1.4rem;
		font-style: italic;
		line-height: 1;
		margin-bottom: 3rem;
	}
	& .-read
	{
		font-size: 1rem;
		margin-bottom: 3rem;
		line-height: 2;
	}
	& .-btn
	{
		text-align: center;
	}
	@media only screen and (min-width: 768px)
	{
		padding: 100px 0 180px;

		& .-title
		{
			font-size: 4.2rem;
			margin-bottom: 1.8rem;
		}
		& .-subtitle
		{
			font-size: 2rem;
			margin-bottom: 3rem;
		}
		& .-read
		{
			font-size: 1.1rem;
			margin-bottom: 3rem;
			line-height: 2.2;
		}
	}
}




/* ==================================
  ABOUT for HOME
================================== */
.sec-about
{
	background-color: #e4f4f7;

	& .-wrap2col
	{
		& > div
		{
			& .-imglink
			{
				display: block;
				margin-bottom: 15px;
				transition-duration: 0.3s;
				
				& img
				{
					border-radius: 14px;
				}
				
				&:hover
				{
					filter: brightness(114%) saturate(70%);
				}
			}
			
			& .-pagename
			{
				text-align: center;
				
				& a
				{
					color: #333333;
					font-size: 1.4rem;
					font-weight: 600;
					text-decoration: none;
				}
			}
			& .-explanation
			{
				text-align: center;
			}
		}
	}
	
	& .-campany
	{
		margin-bottom: 50px;
	}
	
	
	@media only screen and (min-width: 768px)
	{

		
		& .-wrap2col
		{
			display: flex;
			justify-content: space-between;

			& > div
			{
				width: 48%;

				& .-imglink
				{
					margin-bottom: 20px;
				}

				& .-pagename
				{
					& a
					{
						font-size: 1.7rem;
					}
				}
			}
		}
		& .-campany
		{
			margin-bottom: 0;
		}
	}
}


/* ==================================
  SNAP SHOT for HOME
================================== */
.sec-snapshot
{
	padding: 50px 0 90px;


	& .splide__track
	{
		margin-bottom: 10px;
	}
	& .splide__slide
	{
		
		& a
		{
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 1/1;

			& img
			{
				border-radius: 14px;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	
	& .-btn
	{
		text-align: center;
		margin-top: 40px;
	}
	
	@media only screen and (min-width: 768px)
	{
		padding: 60px 0 150px;
	}
}



/* ==================================
  RECRUIT for HOME
================================== */
.sec-recruit
{
	background-color: var(--subcolor);
	
	& .-img
	{
		& img
		{
			border-radius: 12px;
		}
	}
	
	& .-explanation p
	{
		margin-bottom: 20px;
	}
	
	@media only screen and (min-width: 768px)
	{
	}
}


/* ==================================
  BANNER for HOME
================================== */
.sec-bnr
{
	padding: 50px 0 60px;
	
	& .-list
	{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		list-style: none;
		margin: 0;
		padding: 0;
		
		& li
		{
			& a
			{
				display: block;
				
				& img
				{
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
		}
	}
	
	@media only screen and (min-width: 768px)
	{
		& .-list
		{
			grid-template-columns: repeat(4, 1fr);
			width: 80%;
			margin: 0 auto;
			
			& li
			{
			}
		}
	}
}



.bg_diagonal
{
	margin-top: -30px !important;
	clip-path:polygon(0 0, 100% 30px, 100% 100%, 0 calc(100% - 30px));
	padding: 90px 0 90px;
	
	@media only screen and (min-width: 768px)
	{
		margin-top: -80px !important;
		clip-path:polygon(0 0, 100% 80px, 100% 100%, 0 calc(100% - 80px));
		padding: 160px 0;
	}
}

.home
{
	& .-wrap_title
	{
		margin-bottom: 30px;
		
		& .-title
		{
			font-size: 2rem;
			font-weight: 600;
			line-height: 1;
		}

		& .-entitle
		{
			color: #00a199;
			font-family: "futura-pt", sans-serif;
			font-weight: 400;
			font-style: italic;
			font-size: 1.2rem;
		}
		
		@media only screen and (min-width: 768px)
		{
			display: flex;
			align-items: baseline;
			margin-bottom: 50px;

			& .-title
			{
				font-size: 2.4rem;
				margin-right: 24px;
			}

			& .-entitle
			{
				font-size: 1.6rem;
			}
		}
	}
}


/* ==================================
  Utility
================================== */
.-btn
{
	& a
	{
		background-color: var(--keycolor);
		border-radius: 14px;
		color: var(--subcolor);
		display: inline-block;
		font-size: 1.2rem;
		font-weight: 500;
		padding: 18px 28px;
		line-height: 1;
		text-decoration: none;
		width: 100%;
		max-width: 400px;
		text-align: center;
		transition-duration: .3s;
		
		&:hover
		{
			background-color: #02a199;
			color: #fff;
		}
	}
}

div.wpforms-container-full button[type=submit]
{
	background-color: var(--keycolor) !important;
	border: none !important;
	border-radius: 14px;
	color: var(--subcolor) !important;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 500;
	padding: 18px 28px;
	line-height: 1;
	text-decoration: none;
	width: 100%;
	max-width: 400px;
	height: auto;
	text-align: center;
	transition-duration: .3s;

	&:hover
	{
		background-color: #02a199 !important;
		color: #fff !important;
	}
}

.-wrap2col
{
	& > *
	{
	}
	
	@media only screen and (min-width: 768px)
	{
		display: flex;
		justify-content: space-between;
		align-items: center;

		& > *
		{
			width: 48%;
		}
	}
}


.sp-br
{
	display: block;
}
.pc-br
{
		display: none;
}
@media screen and (min-width: 768px)
{
	.sp-br
	{
		display: none;
	}
	.pc-br
	{
			display: block;
	}
}