@charset "UTF-8";

/* --------------------------------------------
JOB
--------------------------------------------- */
#jobAbouts{
	h2{
		font-weight : 700;
	}
	p{
		letter-spacing : .03em;
	}
	.moreContents-sp{
		> ul{
			> li{
				counter-increment : no;
			}
		}
	}
	picture{
		overflow : hidden;
	}
	h3{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : start;
		font-weight : 700;
		&::before{
			display : grid;
			place-items : center;
			width : auto;
			aspect-ratio : 1;
			font-family : Jost;
			line-height : 1;
			content : counter( no );
			background-color : #d0f1ff;
			border-radius : 50%;
		}
	}
	h4{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : start;
		font-weight : 700;
		&::before{
			content : "・";
		}
	}
	@media screen and ( width <= 780px ){
		margin-top : calc( ( 60 - 12.1 ) var( --remBase ) );
		> section + section{
			margin-top : calc( ( 60 - 12.1 ) var( --remBase ) );
		}
		h2{
			font-size : 2.2rem;
			line-height : 2.1;
		}
		p{
			font-size : 1.5rem;
			line-height : calc( 28 / 15 );
		}
		section > p{
			margin-top : calc( ( 22 - 12.1 - 6.5 ) var( --remBase ) );
			&:has( ~ .moreContentsWrapper-sp[aria-hidden="true"] ){
				height : 4lh;
				overflow-y : hidden;
			}
		}
		.more01-sp{
			margin-top : calc( ( 22 - 6.5 ) var( --remBase ) );
		}
		picture{
			margin-top : calc( ( 22 - 6.5 ) var( --remBase ) );
			border-radius : calc( 3.4871 var( --remBase ) );
		}
		.moreContentsWrapper-sp{
			&[aria-hidden="false"]{
				margin-top : calc( ( 40 - 13 ) var( --remBase ) );
			}
			.moreContents-sp > ul{
				> li + li{
					margin-top : calc( ( 40 - 6.5 ) var( --remBase ) );
				}
			}
		}
		h3{
			column-gap : calc( 14 var( --percentBase ) );
			font-size : 1.8rem;
			line-height : 1.65;
			&::before{
				height : calc( 38.5 var( --remBase ) );
				font-size : 1.98rem;
			}
		}
		h4{
			font-size : 1.5rem;
			line-height : calc( 28 / 15 );
		}
		h3 + p{
			margin-top : calc( ( 24 - 6.5 ) var( --remBase ) );
		}
		ul ul , li li + li{
			margin-top : calc( ( 28 - 6.5 - 6.5 ) var( --remBase ) );
		}
	}
	@media print , screen and ( width > 780px ){
		padding-top : calc( 70 var( --remBase ) );
		padding-bottom : calc( ( 50 - 6.5 ) var( --remBase ) );
		margin-top : calc( 25 var( --remBase ) );
		border-top : solid 1px #e4e4e4;
		> section + section{
			margin-top : calc( ( 76.5 - 6.5 ) var( --remBase ) );
		}
		> section{
			display : grid;
			grid-template-rows : auto calc( ( 30 - 11.1 - 6.5) var( --remBase ) ) auto calc( ( 50 - 6.5 ) var( --remBase ) ) auto;
			grid-template-columns : calc( 380 * 100% / 780 ) calc( 352 * 100% / 780 );
			align-items : start;
			justify-content : space-between;
		}
		h2{
			grid-row : 1;
			grid-column : 1;
			margin-top : calc( -11.1 var( --remBase ) );
			font-size : 2.4rem;
			line-height : calc( 46.2 / 24 );
		}
		p , h4{
			font-size : 1.5rem;
			line-height : calc( 28 / 15 );
		}
		section > p{
			grid-row : 3;
			grid-column : 1;
		}
		picture{
			grid-row : 1/4;
			grid-column : 2;
			border-radius : calc( 5 var( --remBase ) );
		}
		.moreContentsWrapper-sp{
			grid-row : 5;
			grid-column : 1/-1;
		}
		.moreContents-sp{
			> ul{
				> li + li{
					margin-top : calc( ( 45 - 6.5 ) var( --remBase ) );
				}
			}
		}
		h3{
			column-gap : calc( 14 * 100% / 780 );
			font-size : 1.8rem;
			line-height : 1.65;
			&::before{
				height : calc( 38.5 var( --remBase ) );
				font-size : 1.98rem;
			}
		}
		h3 + p{
			margin-top : calc( ( 24 - 6.5 ) var( --remBase ) );
		}
		ul ul , li li + li{
			margin-top : calc( ( 28 - 6.5 - 6.5 ) var( --remBase ) );
		}
	}
}
#jobDescription{
	border-top : solid 1px #e4e4e4;
	h2{
		padding-block : calc( 1.9 var( --remBase ) );
		font-size : 2.4rem;
		font-weight : 700;
		line-height : calc( 46.2 / 24 );
		background-color : var( --color07 );
	}
	:where( dt, dd ){
		font-size : 1.5rem;
		line-height : calc( 28 / 15 );
		letter-spacing : .03em;
	}
	dt{
		position : relative;
		font-weight : 700;
		border-bottom : calc( 2 var( --remBase ) ) solid;
		border-image : linear-gradient( to right , var( --color03 ) , var( --color03 ) calc( 224 * 100% / 780 ) , var( --color07 ) calc( 224 * 100% / 780 ) , var( --color07 ) 100% );
		border-image-slice : 1;
	}
	dd{
		margin-top : calc( ( 20 - 6.5 ) var( --remBase ) );
	}
	@media screen and ( width <= 780px ){
		padding-top : calc( ( 60 - 11.1 ) var( --remBase ) );
		padding-bottom : calc( 60 var( --remBase ) );
		margin-top : calc( 60 var( --remBase ) );
		h2{
			border-image-source : linear-gradient( var( --color07 ) , var( --color07 ) );
			border-image-slice : 0 fill;
			border-image-outset : 0 100vw 0 100vw;
		}
		dl{
			margin-top : calc( ( 40 - 6.5 ) var( --remBase ) );
		}
		dt{
			padding-inline : 1em;
		}
		dd + dt{
			margin-top : calc( ( 40 - 6.5 ) var( --remBase ) );
		}
	}
	@media print , screen and ( width > 780px ){
		padding-top : calc( ( 50 - 11.1 ) var( --remBase ) );
		padding-bottom : calc( ( 100 - 6.5 ) var( --remBase ) );
		h2{
			padding-inline : calc( 20 * 100% / 780 );
		}
		dl{
			margin-top : calc( ( 50 - 6.5 ) var( --remBase ) );
		}
		:where( dt,dd ){
			padding-inline : calc( 30 * 100% / 780 );
		}
		dt{
			padding-bottom : calc( ( 20 - 6.5 ) var( --remBase ) );
		}
		dd + dt{
			margin-top : calc( ( 60 - 6.5 ) var( --remBase ) );
		}
	}
}
#jobOthers{
	border-image-source : linear-gradient( #fafafa , #fafafa );
	border-image-slice : 0 fill;
	border-image-outset : 0 100vw 0 100vw;
	>a{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : start;
		width : fit-content;
		font-weight : 700;
		&::after{
			display : block;
			width : auto;
			aspect-ratio : 10.4417/19.0937;
			font-size : 0;
			content : "";
			background-image : url( "../../images/recruit/ui/arrow/right01.svg" );
			filter : var( --filterBase );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	@media screen and ( width <= 780px ){
		padding-top : calc( ( 30 - 10 ) var( --remBase ) );
		padding-bottom : calc( ( 52 - 3.5 ) var( --remBase ) );
		>a{
			column-gap : calc( 10 var( --remBase ) );
			font-size : 2.2rem;
			line-height : calc( 42 / 22 );
			&::after{
				height : calc( 17.2458 var( --remBase ) );
			}
		}
		.splide__track{
			margin-top : calc( ( 24 - 10 ) var( --remBase ) );
		}
	}
	@media print , screen and ( width > 780px ){
		grid-row : 7;
		grid-column : 1/-1;
		padding-top : calc( ( 70 - 9 ) var( --remBase ) );
		padding-bottom : calc( ( 100 - 5 ) var( --remBase ) );
		>{
			padding-inline : calc( 30 var( --percentBase ) );
		}
		>a{
			column-gap : calc( 12 var( --remBase ) );
			font-size : 2.4rem;
			line-height : 1.75;
			&::after{
				height : calc( 19.0937 var( --remBase ) );
			}
		}
		.splide__arrows{
			margin-top : calc( ( 50 - 9 ) var( --remBase ) );
		}
	}
}
#main:has( #jobOthers ) #subLinks{
	@media print , screen and ( width > 780px ){
		position : relative;
		&::before{
			position : absolute;
			inset : 0;
			z-index : -1;
			font-size : 0;
			content : "";
			border-image-source : linear-gradient( #fafafa , #fafafa );
			border-image-slice : 0 fill;
			border-image-outset : 0 100vw 0 100vw;
		}
	}
}
#jobApply{
	@media print , screen and ( width > 780px ){
		position : relative;
		z-index : 1;
		display : grid;
		grid-row : 1;
		grid-column : 2;
		place-items : center;
		width : 100%;
		height : calc( 59 var( --remBase ) );
		margin-inline : auto;
		font-size : 2rem;
		font-weight : 700;
		line-height : calc( 32.34 / 20 );
		color : white;
		border-radius : 100vmax;
		&::before , &::after{
			position : absolute;
			z-index : -1;
			font-size : 0;
			content : "";
			border-radius : 100vmax;
		}
		&::before{
			inset : 0;
			background-image : var( --gradation01 );
			opacity : 1;
		}
		&::after{
			inset : 1px;
			background-color : white;
			opacity : 0;
		}
	}
}
@media ( hover : hover ){
	#jobApply:hover{
		@media print , screen and ( width > 780px ){
			color : var( --color03 );
			&::after{
				opacity : 1;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#jobApply{
		@media print , screen and ( width > 780px ){
			transition : color var( --transitionBase );
			&::after{
				transition : opacity var( --transitionBase );
			}
		}
	}
}
#jobCategory01{
	@media print , screen and ( width > 780px ){
		grid-row : 3;
		grid-column : 2;
		li{
			font-size : 1.6rem;
			line-height : 1.5;
		}
	}
}
#jobMe{
	dt{
		font-weight : 700;
	}
	:where( .address , .site ){
		display : grid;
		justify-content : start;
		font-size : 1.4rem;
		font-weight : 700;
		line-height : 1.5;
		&::before{
			display : block;
			width : auto;
			margin-inline : auto;
			font-size : 0;
			content : "";
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	.address{
		align-items : start;
		&::before{
			height : calc( 24.8139 var( --remBase ) );
			aspect-ratio : 17/22.5881;
			margin-top : calc( -1.90695 var( --remBase ) );
			background-image : url( "../../images/recruit/ui/icon/mappin.svg" );
		}
	}
	.site{
		align-items : center;
		&::before{
			aspect-ratio : 1;
			background-image : url( "../../images/recruit/ui/icon/web.svg" );
		}
	}
	.sns{
		ul{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
		}
	}
	.facebook{
		height : calc( 22 var( --remBase ) );
	}
	.instagram{
		height : calc( 21 var( --remBase ) );
	}
	.x{
		height : calc( 19 var( --remBase ) );
	}
	.youtube{
		height : calc( 20 var( --remBase ) );
	}
	.map{
		margin-top : calc( 30 var( --remBase ) );
	}
	.map{
		iframe{
			width : 100%;
			height : auto;
			aspect-ratio : 1;
		}
	}
	@media screen and ( width <= 780px ){
		padding-top : calc( ( 60 - 3.75 ) var( --remBase ) );
		dt{
			font-size : 1.5rem;
			line-height : 1.5;
		}
		:where( .address , .site ){
			grid-template-columns : calc( 20 var( --percentBase ) ) auto;
			column-gap : calc( 12 var( --percentBase ) );
		}
		.address{
			margin-top : calc( ( 30 - 3.75 ) var( --remBase ) );
		}
		.site{
			margin-top : calc( ( 30 - 3.5 - 3.5 ) var( --remBase ) );
			&::before{
				height : calc( 20 var( --remBase ) );
				margin-top : calc( .5 var( --remBase ) );
			}
		}
		.sns{
			margin-top : calc( ( 30 - 3.5 ) var( --remBase ) );
			ul{
				column-gap : calc( 30 var( --percentBase ) );
			}
		}
		.facebook{
			height : calc( 22 var( --remBase ) );
		}
		.instagram{
			height : calc( 21 var( --remBase ) );
		}
		.x{
			height : calc( 19 var( --remBase ) );
		}
		.youtube{
			height : calc( 20 var( --remBase ) );
		}
		.map{
			margin-top : calc( 50 var( --remBase ) );
		}
	}
	@media print , screen and ( width > 780px ){
		grid-row : 5;
		grid-column : 2;
		dt{
			font-size : 2rem;
			line-height : 1.5;
		}
		:where( .address , .site ){
			grid-template-columns : calc( 21 * 100% / 324 ) auto;
			column-gap : calc( 12 * 100% / 324 );
		}
		.address{
			margin-top : calc( ( 44 - 5 ) var( --remBase ) );
		}
		.site{
			margin-top : calc( ( 24 - 5 ) var( --remBase ) );
			&::before{
				height : calc( 21 var( --remBase ) );
			}
		}
		.sns{
			margin-top : calc( 30 var( --remBase ) );
			ul{
				column-gap : calc( 30 * 100% / 324 );
			}
		}
	}
}