@charset "UTF-8";

/* --------------------------------------------
JOB
--------------------------------------------- */
#job{
	.detail{
		padding-bottom : calc( 30 * var( --remBase ) );
		margin-top : calc( 30 * var( --remBase ) );
		overflow : hidden;
		font-family : "Zen Kaku Gothic New" , sans-serif;
		background-color : white;
		border-radius : calc( 20 * var( --remBase ) );
		h2{
			padding-block : calc( 10 * var( --remBase ) );
			padding-inline : calc( 20 * var( --contentBase ) );
			font-size : calc( 20 * var( --remBase ) );
			font-weight : 700;
			line-height : 1.6;
			color : white;
			background-color : var( --cyan01 );
		}
		:where( h3 , dl ){
			margin-inline : auto;
		}
		h3{
			padding-left : calc( 15 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			font-weight : 700;
			line-height : 1.6;
			color : var( --blue );
			border-left-color : currentColor;
			border-left-style : solid;
			border-left-width : calc( 5 * var( --remBase ) );
		}
		dl{
			border-bottom : solid 1px var( --cyan01 );
			> div{
				border-top : solid 1px var( --cyan01 );
			}
		}
		dt , dd{
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.6;
		}
		dt{
			font-weight : 700;
		}
		dd{
			font-weight : 500;
		}
	}
	.btn01{
		margin-top : calc( 30 * var( --remBase ) );
	}
	.note{
		padding-block : calc( 30 * var( --remBase ) );
		padding-inline : calc( 30 * var( --contentBase ) );
		margin-top : calc( 30 * var( --remBase ) );
		font-family : "Zen Kaku Gothic New" , sans-serif;
		background-color : white;
		border-radius : calc( 20 * var( --remBase ) );
		p{
			font-size : calc( 16 * var( --remBase ) );
			font-weight : 500;
			line-height : 1.6;
			a{
				color : var( --blue );
				-webkit-text-decoration : underline;
				text-decoration : underline;
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-bottom : calc( 30 * var( --remBase ) );
		.detail{
			:where( h3 , dl ){
				width : calc( 295 * var( --contentBase ) );
			}
			h3{
				margin-top : calc( 20 * var( --remBase ) );
			}
			dl{
				margin-top : calc( 20 * var( --remBase ) );
				> div{
					padding-block : calc( 10 * var( --remBase ) );
				}
				:where( dt , dd ){
					padding-inline : calc( 10 * 100% / 295 );
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-bottom : calc( 120 * var( --remBase ) );
		margin-top : calc( -10 * var( --remBase ) );
		.detail{
			padding-bottom : calc( 30 * var( --remBase ) );
			margin-top : calc( 30 * var( --remBase ) );
			overflow : hidden;
			border-radius : calc( 20 * var( --remBase ) );
			:where( h3 , dl ){
				width : calc( 850 * var( --contentBase ) );
			}
			h3{
				margin-top : calc( 30 * var( --remBase ) );
			}
			dl{
				margin-top : calc( 30 * var( --remBase ) );
				> div{
					display : grid;
					grid-template-columns : calc( 170 * 100% / 850 ) 1fr;
					padding-block : calc( 12 * var( --remBase ) );
				}
				dt{
					padding-inline : calc( 10 * 100% / 170 );
				}
				dd{
					padding-inline : calc( 10 * 100% / 680 );
				}
			}
			h3 + dl{
				margin-top : calc( 20 * var( --remBase ) );
			}
			&.other{
				dl{
					> div{
						grid-template-columns : calc( 190 * 100% / 850 ) 1fr;
					}
					dt{
						padding-inline : calc( 10 * 100% / 190 );
					}
				}
			}
		}
	}
}