@charset "UTF-8";

/* --------------------------------------------
COLUMN
	INFO
--------------------------------------------- */
#columnInfo{
	display : grid;
	grid-template-columns : calc( 918 * 100% / 1326 ) calc( 378 * 100% / 1326 );
	align-items : start;
	justify-content : space-between;
	padding-bottom : calc( 50 var( --remBase ) );
	margin-top : calc( 40 var( --remBase ) );
}

/* --------------------------------------------
SIDR BAR
--------------------------------------------- */
#sidebarInfo{
	position : sticky;
	top : calc( var( --headerHeight ) + ( 40 var( --remBase ) ) );
	padding-block : calc( 30 var( --remBase ) );
	background-color : #fff;
	filter : drop-shadow( 0 calc( 3 var( --remBase ) ) calc( 6 var( --remBase ) ) rgb( 0 0 0 / .16 ) );
	border-radius : calc( 5 var( --remBase ) );
}
#sidebarInfo :where( h3 , p ){
	padding-inline : calc( 33 * 100% / 378 );
}
#sidebarInfo h3{
	font-size : calc( 19 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 33 / 19 );
	letter-spacing : calc( .247 * var( --remBase ) );
}
#sidebarInfo p{
	margin-top : calc( 8 var( --remBase ) );
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 33 / 16 );
}
#sidebarInfo a:not( .link-entry ){
	display : grid;
	align-items : center;
	height : calc( 55 var( --remBase ) );
	padding-inline : calc( 33 * 100% / 378 );
	font-size : calc( 16 var( --remBase ) );
	line-height : 1.5;
	color : #284b66;
	border-bottom : dotted 1px #bfc6c9;
	transition : color var( --transitionBase );
}
#sidebarInfo a:not( .link-entry )::before , #sidebarInfo a:not( .link-entry )::after{
	display : block;
	font-size : calc( var( --remBase ) );
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
}
#sidebarInfo a:not( .link-entry )::before{
	filter : invert( 21% ) sepia( 80% ) saturate( 402% ) hue-rotate( 164deg ) brightness( 95% ) contrast( 86% );
	background-size : contain;
	transition : filter var( --transitionBase );
}
#sidebarInfo a:not( .link-entry )::after{
	aspect-ratio : 1;
	background-color : #284b66;
	background-image : url( "../images/ui/arrow/right03.svg" );
	border-radius : 50%;
	transition : background var( --transitionBase );
}
#sidebarInfo a:not( .link-entry ):hover , #sidebarInfo a:not( .link-entry ).is-current{
	color : var( --primary );
}
#sidebarInfo a:not( .link-entry ):hover::before , #sidebarInfo a:not( .link-entry ).is-current::before{
	filter : invert( 45% ) sepia( 94% ) saturate( 2318% ) hue-rotate( 155deg ) brightness( 103% ) contrast( 101% );
}
#sidebarInfo a:not( .link-entry ):hover::after , #sidebarInfo a:not( .link-entry ).is-current::after{
	background-color : var( --primary );
}
#sidebarInfo .link-infoDescription{
	grid-template-columns : calc( 16 * 100% / 312 ) 1fr calc( 24 * 100% / 312 );
	column-gap : calc( 9 * 100% / 312 );
}
#sidebarInfo .link-infoDescription::before{
	height : calc( 14 var( --remBase ) );
	background-image : url( "../images/ui/icon/black/bag.svg" );
}
#sidebarInfo .link-company{
	grid-template-columns : calc( 15 * 100% / 312 ) 1fr calc( 24 * 100% / 312 );
	column-gap : calc( 8 * 100% / 312 );
}
#sidebarInfo .link-company::before{
	height : calc( 16 var( --remBase ) );
	background-image : url( "../images/ui/icon/black/building.svg" );
}
#sidebarInfo .link-infoApply{
	grid-template-columns : calc( 20 * 100% / 312 ) 1fr calc( 24 * 100% / 312 );
	column-gap : calc( 8 * 100% / 312 );
}
#sidebarInfo .link-infoApply::before{
	height : calc( 20 var( --remBase ) );
	background-image : url( "../images/ui/icon/black/comment.svg" );
}
#sidebarInfo .link-entry{
	grid-template-columns : calc( 23 * 100% / 257 ) auto;
	column-gap : calc( 6 * 100% / 257 );
	width : calc( 312 * 100% / 378 );
	padding-left : calc( 55 * 100% / 378 );
	margin-inline : auto;
	margin-top : calc( 20 var( --remBase ) );
	font-size : 2.5rem;
}

/* --------------------------------------------
DESCRIPTION , APPLY
--------------------------------------------- */
:where( #infoDescription , #infoApply ){
	overflow : hidden;
	background-color : #fff;
	filter : drop-shadow( 0 0 calc( 10 var( --remBase ) ) rgb( 40 75 102 / .15 ) );
	border-radius : calc( 5 var( --remBase ) ) calc( 5 var( --remBase ) ) 0 0;
}
:where( #infoDescription , #infoApply ) > h2{
	display : grid;
	align-items : center;
	justify-content : start;
	height : calc( 40 var( --remBase ) );
	padding-left : calc( 50 * 100% / 918 );
	font-size : 2rem;
	font-weight : 700;
	color : #fff;
	letter-spacing : calc( .26 var( --remBase ) );
	background-color : var( --primary );
}
:where( #infoDescription , #infoApply ) > h2::before{
	display : block;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
:where( #infoDescription , #infoApply ) dl{
	display : grid;
	grid-template-columns : calc( 250 * 100% / 918 ) 1fr;
}
:where( #infoDescription , #infoApply ) dl > :where( dt , dd ){
	padding-block : calc( 20 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.8;
}
:where( #infoDescription , #infoApply ) dl > :where( dt , dd ):not( :first-of-type ){
	border-top : 1px dotted #bfc6c9;
}
:where( #infoDescription , #infoApply ) dt{
	padding-inline : calc( 50 * 100% / 250 );
	font-weight : 700;
	color : #284b66;
}
:where( #infoDescription , #infoApply ) dt{
	padding-right : calc( 48 * 100% / 668 );
}
#infoDescription h2{
	grid-template-columns : calc( 17 * 100% / 868 ) 1fr;
	column-gap : calc( 8 * 100% / 868 );
}
#infoDescription h2::before{
	height : calc( 15 var( --remBase ) );
	background-image : url( "../images/ui/icon/bag02.svg" );
}
#infoApply{
	margin-top : calc( 40 var( --remBase ) );
}
#infoApply h2{
	grid-template-columns : calc( 20 * 100% / 868 ) 1fr;
	column-gap : calc( 11 * 100% / 868 );
}
#infoApply h2::before{
	height : calc( 17 var( --remBase ) );
	background-image : url( "../images/ui/icon/bag02.svg" );
}

/* --------------------------------------------
INTERVIEW , OTHER
--------------------------------------------- */
:where( #infoInterview , #infoOther ){
	padding-top : calc( 30 var( --remBase ) );
	margin-top : calc( 40 var( --remBase ) );
	background-color : #fff;
	filter : drop-shadow( 0 0 calc( 10 var( --remBase ) ) rgb( 40 75 102 / .15 ) );
}
:where( #infoInterview , #infoOther ) h3 img{
	height : calc( 56 var( --remBase ) );
	margin-inline : auto;
}
#infoInterview{
	padding-inline : calc( 30 * 100% / 918 );
	padding-bottom : calc( 40 var( --remBase ) );
}
#infoInterview > ul{
	display : grid;
	grid-template-columns : repeat( 4 , calc( 198 * 100% / 858 ) );
	column-gap : calc( 22 * 100% / 858 );
	margin-top : calc( 20 var( --remBase ) );
}
#infoInterview > ul a{
	display : block;
}
#infoInterview > ul picture{
	width : 100%;
	height : calc( 148 var( --remBase ) );
}
#infoInterview > ul picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#infoInterview > ul p{
	display : grid;
	place-items : center;
	width : fit-content;
	height : calc( 27 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	margin-top : calc( 10 var( --remBase ) );
	font-size : 1.2rem;
	font-weight : 800;
	color : #fff;
	background-color : var( --primary );
	border-radius : calc( 5 var( --remBase ) );
}
#infoInterview > ul h4{
	margin-top : calc( 10 var( --remBase ) );
	line-height : 1.4;
}
#infoInterview > ul h4 span{
	display : block;
	font-size : 1.6rem;
}
#infoInterview > ul h4 span:nth-of-type( 1 ){
	line-height : 1.4;
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
#infoInterview > ul h4 span:nth-of-type( 2 ){
	line-height : calc( 24 / 16 );
}
#infoOther{
	padding-inline : calc( 54 * 100% / 918 );
}
#infoOther #carouselInfoOther{
	margin-top : calc( 20 var( --remBase ) );
}
#infoOther .splide__track{
	padding-bottom : calc( 40 var( --remBase ) );
}
#infoOther .splide__slide{
	width : calc( 250 * 100% / 810 );
	margin-right : calc( 30 * 100% / 810 );
	box-shadow : 0 0 calc( 10 var( --remBase ) ) 0 rgb( 0 0 0 / .1 );
}
#infoOther .splide__slide a{
	display : block;
	padding-bottom : calc( 20 var( --remBase ) );
}
#infoOther .splide__slide picture{
	width : 100%;
	height : calc( 140 var( --remBase ) );
}
#infoOther .splide__slide picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#infoOther .splide__slide :where( h4 , dl ){
	padding-inline : calc( 20 * 100% / 250 );
}
#infoOther .splide__slide h4{
	margin-top : calc( 17 var( --remBase ) );
	font-size : calc( 18 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 26 / 18 );
}
#infoOther .splide__slide dl{
	display : grid;
	grid-template-columns : calc( 25 * 100% / 210 ) 1fr;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 * 100% / 210 );
	margin-top : calc( 10 var( --remBase ) );
}
#infoOther .splide__slide dt{
	aspect-ratio : 1;
	margin-top : calc( 1 var( --remBase ) );
}
#infoOther .splide__slide dt img{
	width : 100%;
	height : auto;
}
#infoOther .splide__slide dd{
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 26 / 16 );
}
#infoOther .splide__slide span{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 8 * 100% / 208 );
	align-items : center;
	align-self : end;
	justify-content : center;
	width : calc( 210 * 100% / 250 );
	height : calc( 32 var( --remBase ) );
	margin-inline : auto;
	margin-top : calc( 20 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 700;
	color : var( --primary );
	background-color : #e9f5f7;
	border-color : currentColor;
	border-style : solid;
	border-width : 1px;
	border-radius : calc( 3 var( --remBase ) );
}
#infoOther .splide__slide span::after{
	display : block;
	height : calc( 16 var( --remBase ) );
	aspect-ratio : 1;
	content : "";
	background : url( "../images/ui/arrow/circle/right01.svg" ) center / contain no-repeat;
}
#infoOther .splide__arrow{
	top : calc( ( 100% - ( 40 var( --remBase ) ) ) / 2 );
	display : block;
	width : auto;
	height : auto;
	background-color : transparent;
	border-radius : 0;
	opacity : 1;
	transform : none;
}
#infoOther .splide__arrow img{
	height : calc( 40 var( --remBase ) );
	aspect-ratio : 1;
}
#infoOther .splide__arrow--prev{
	translate : -50% -50%;
	left : 0;
}
#infoOther .splide__arrow--next{
	translate : 50% -50%;
	right : 0;
}
#info + .wrap{
	padding-block : calc( 50 var( --remBase ) );
	padding-inline : calc( ( 100% / 1100px ) / 2 );
}