@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
#breadcrumb + #titles01{
	@media screen and ( width <= 780px ){
		margin-top : calc( ( 30 - 5 - 11.05 ) var( --remBase ) );
	}
	@media print , screen and ( width > 780px ){
		margin-top : calc( ( 30 - 5 - 11.05 ) var( --remBase ) );
	}
}
#titles01{
	ul{
		font-size : 0;
	}
	li{
		display : inline;
		font-weight : 700;
		color : var( --color03 );
		a{
			color : var( --color03 );
		}
		&:not( :last-child )::after{
			display : inline-block;
			content : "|";
		}
	}
	dl{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
		color : var( --color06 );
		&::before{
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background-image : url( "../../images/recruit/ui/icon/time01.svg" );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	dd{
		padding-left : 1em;
	}
	h1{
		font-weight : 700;
	}
	@media screen and ( width <= 780px ){
		dl{
			&::before{
				height : calc( 13 var( --remBase ) );
				margin-right : calc( 4 var( --remBase ) );
			}
		}
		dt , dd{
			font-size : 1rem;
			line-height : calc( 27.28 / 10 );
		}
		ul{
			margin-top : calc( ( 22 - 8.14 - 6.075 ) var( --remBase ) );
		}
		li{
			font-size : 1.2rem;
			line-height : calc( 24.15 / 12 );
			&:not( :last-child )::after{
				margin-inline : calc( 20 var( --remBase ) );
				font-size : 1.2rem;
				line-height : calc( 24.15 / 12 );
			}
		}
		h1{
			margin-top : calc( ( 20 - 6.075 - 5.5 ) var( --remBase ) );
			font-size : 2.2rem;
			line-height : 1.5;
		}
		picture{
			margin-top : calc( ( 20 - 5.5 ) var( --remBase ) );
		}
	}
	@media print , screen and ( width > 780px ){
		display : grid;
		grid-template-rows : auto calc( ( 30 - 7.49 - 6 ) var( --remBase ) ) auto calc( ( 25 - 6 ) var( --remBase ) ) auto;
		grid-template-columns : auto 1fr auto;
		align-items : start;
		justify-content : space-between;
		ul{
			grid-row : 1;
			grid-column : 1;
			padding-top : calc( ( 7.49 ) var( --remBase ) );
		}
		li{
			font-size : 1.5rem;
			line-height : calc( 26.61 / 15 );
			&:not( :last-child )::after{
				margin-inline : calc( 20 var( --remBase ) );
				font-size : 1.5rem;
				line-height : calc( 26.61 / 15 );
			}
		}
		dl{
			grid-row : 1;
			grid-column : 3;
			&::before{
				height : calc( 17 var( --remBase ) );
				margin-right : calc( 10 var( --remBase ) );
			}
		}
		dt , dd{
			font-size : 1.2rem;
			line-height : calc( 34.1 / 12 );
		}
		h1{
			grid-row : 3;
			grid-column : 1/-1;
			font-size : 3.2rem;
			line-height : calc( 44 / 32 );
		}
		picture{
			grid-row : 5;
			grid-column : 1/-1;
		}
	}
}
#jobCategory01{
	font-weight : 700;
	li{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : start;
		&::before{
			content : "・";
		}
	}
	@media screen and ( width <= 780px ){
		margin-top : calc( ( 22 - 4 ) var( --remBase ) );
		li{
			font-size : 1.6rem;
			line-height : 1.5;
		}
	}
}
#jobColumns{
	@media print , screen and ( width > 780px ){
		display : grid;
		grid-template-rows : auto calc( ( 44 - 4 ) var( --remBase ) ) auto calc( ( 44 - 3.5 ) var( --remBase ) ) auto 1fr auto;
		grid-template-columns : calc( 780 var( --percentBase ) ) calc( 324 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 50 var( --remBase ) );
	}
}
#jobContent{
	@media screen and ( width <= 780px ){
		padding-top : calc( 35 var( --remBase ) );
		margin-top : calc( ( 20 - 4 ) var( --remBase ) );
		border-top : solid 1px #e4e4e4;
	}
	@media print , screen and ( width > 780px ){
		grid-row : 1/7;
		grid-column : 1;
		align-self : start;
	}
}
#jobCeo{
	h2{
		font-weight : 700;
	}
	.box{
		display : grid;
	}
	p{
		font-size : 1.4rem;
		line-height : calc( 24 / 14 );
	}
	.box > p{
		letter-spacing : .03em;
	}
	@media screen and ( width <= 780px ){
		.box{
			grid-template-columns : calc( 90 var( --percentBase ) ) 1fr;
			row-gap : calc( ( 20 - 5 ) var( --remBase ) );
			column-gap : calc( 30 var( --percentBase ) );
			align-items : center;
		}
		picture{
			grid-row : 1;
			grid-column : 1;
		}
		h2{
			grid-row : 1;
			grid-column : 2;
			font-size : 1.8rem;
			line-height : calc( 28 / 18 );
		}
		.box > p{
			grid-row : 2;
			grid-column : 1/-1;
		}
		&:has( #jobCeoContent[aria-hidden="true"] ){
			.box > p{
				height : 4lh;
				overflow-y : hidden;
			}
			> p{
				height : 0;
				overflow : hidden;
			}
		}
		.more01{
			margin-top : calc( ( 20 - 5 ) var( --remBase ) );
		}
	}
	@media print , screen and ( width > 780px ){
		.box{
			grid-template-rows : auto auto;
			grid-template-columns : calc( 50 * 100% / 780 ) calc( 220 * 100% / 780 ) calc( 70 * 100% / 780 ) calc( 440 * 100% / 780 );
			row-gap : calc( ( 48 - 6 - 5 ) var( --remBase ) );
			align-items : start;
		}
		picture{
			grid-row : 1/-1;
			grid-column : 2;
			padding-top : calc( 35 var( --remBase ) );
		}
		h2{
			grid-row : 1;
			grid-column : 4;
			margin-top : calc( -6 var( --remBase ) );
			font-size : 2.4rem;
			line-height : 1.5;
		}
		.box > p{
			grid-row : 2;
			grid-column : 4;
		}
		> p{
			margin-top : calc( ( 42 - 5 ) var( --remBase ) );
		}
		.more01{
			margin-top : calc( ( 20 - 5 ) var( --remBase ) );
		}
	}
}