@charset "UTF-8";

/* --------------------------------------------
JOBS
--------------------------------------------- */
#jobs{
	> ul{
		> li:not( :last-child ){
			border-bottom : solid 1px #e4e4e4;
		}
	}
	a{
		display : block;
	}
	picture{
		overflow : hidden;
	}
	ul ul{
		font-size : 0;
		color : var( --color03 );
		li{
			display : inline;
			font-weight : 700;
		}
		li:not( :last-child )::after{
			display : inline-block;
			content : "|";
		}
	}
	h2{
		font-weight : 700;
	}
	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;
		font-family : Arial , "Helvetica Neue" , Helvetica , sans-serif;
	}
	@media screen and ( width <= 780px ){
		padding-top : calc( ( 45 - 5.7 - 5  ) var( --remBase ) );
		padding-bottom : calc( ( 60 - 7.79 ) var( --remBase ) );
		> p{
			font-size : 1.4rem;
			line-height : calc( 24 / 14 );
		}
		> ul{
			margin-top : calc( ( 60 - 5 ) var( --remBase ) );
			> li + li{
				margin-top : calc( 30 var( --remBase ) );
			}
		}
		li:not( :last-child ) a{
			padding-bottom : calc( ( 30 - 7.79 ) var( --remBase ) );
		}
		picture{
			border-radius : calc( 2.2442 var( --remBase ) );
		}
		ul ul{
			margin-top : calc( ( 20 - 6.075 ) var( --remBase ) );
		}
		li li{
			font-size : 1.2rem;
			line-height : calc( 24.15 / 12 );
			&:not( :last-child )::after{
				margin-inline : calc( 18 var( --remBase ) );
				font-size : 1.2rem;
				line-height : calc( 24.15 / 12 );
			}
		}
		h2{
			margin-top : calc( ( 20 - 6.075 - 5 ) var( --remBase ) );
			font-size : 1.8rem;
			line-height : calc( 28 / 18 );
		}
		dl{
			margin-top : calc( ( 20 - 5 - 7.79 ) var( --remBase ) );
			&::before{
				height : calc( 12 var( --remBase ) );
				margin-right : calc( 8 var( --remBase ) );
			}
		}
		dt , dd{
			font-size : 1rem;
			line-height : calc( 25.58 / 10 );
		}
	}
	@media print , screen and ( width > 780px ){
		padding-top : calc( ( 70 - 9 - 4.5  ) var( --remBase ) );
		padding-bottom : calc( ( 100 - 11.05 ) var( --remBase ) );
		> :where( p , ul ){
			width : calc( 780 var( --percentBase ) );
			margin-inline : auto;
		}
		> p{
			font-size : 1.8rem;
			line-height : 1.5;
			text-align : center;
			text-indent : .03em;
			letter-spacing : .03em;
		}
		> ul{
			margin-top : calc( ( 100 - 4.5 ) var( --remBase ) );
			> li + li{
				margin-top : calc( 90 var( --remBase ) );
			}
		}
		li:not( :last-child ) a{
			padding-bottom : calc( ( 20 - 11.05 ) var( --remBase ) );
		}
		picture{
			border-radius : calc( 5 var( --remBase ) );
		}
		ul ul{
			margin-top : calc( ( 20 - 6.805 ) var( --remBase ) );
		}
		li li{
			font-size : 1.3rem;
			line-height : calc( 26.61 / 13 );
			&:not( :last-child )::after{
				margin-inline : calc( 20 var( --remBase ) );
				font-size : 1.3rem;
				line-height : calc( 26.61 / 13 );
			}
		}
		h2{
			margin-top : calc( ( 20 - 6.805 - 5.55 ) var( --remBase ) );
			font-size : 2.3rem;
			line-height : calc( 34.1 / 23 );
		}
		dl{
			margin-top : calc( ( 40 - 5.55 - 11.05 ) var( --remBase ) );
			&::before{
				height : calc( 18 var( --remBase ) );
				margin-right : calc( 8 var( --remBase ) );
			}
		}
		dt , dd{
			font-size : 1.2rem;
			line-height : calc( 34.1 / 12 );
		}
	}
}