@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	:root{
		--headerHeight : calc( 64 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	:root{
		--headerHeight : calc( 144 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	:root{
		font-size : 10px;
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
@media screen and ( max-width : 750px ){
	body{
		font-size : 2.4rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	body{
		padding-top : var( --headerHeight );
		font-size : 1.6rem;
	}
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.container{
		padding-inline : calc( 16 var( --viewportBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	.container{
		padding-inline : calc( 40 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	.container{
		max-width : 1400px;
		margin-inline : auto;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	.container-pc{
		padding-inline : calc( 40 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	.container-pc{
		max-width : 1400px;
		margin-inline : auto;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.wrap{
		padding-inline : calc( 16 var( --viewportBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	.wrap{
		padding-inline : calc( 40 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	.wrap{
		padding-inline : calc( ( 100% - 1400px ) / 2 );
	}
}
@media screen and ( max-width : 750px ){
	.wrap-sp{
		padding-inline : calc( 16 var( --viewportBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	.wrap-pc{
		padding-inline : calc( 40 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	.wrap-pc{
		padding-inline : calc( ( 100% - 1400px ) / 2 );
	}
}

/* --------------------------------------------
STATE
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( max-width : 750px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( min-width : 1480px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.is-sp{
		display : none;
	}
}

/* --------------------------------------------
COMMON
--------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
[data-both]::before{
	white-space : pre;
	content : attr( data-both );
}
[data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( max-width : 750px ){
	[data-sp-after]::after{
		white-space : pre;
		content : attr( data-sp-after );
	}
}
@media screen and ( max-width : 750px ){
	[data-sp-before]::before{
		white-space : pre;
		content : attr( data-sp-before );
	}
}
@media print , screen and ( min-width : 750.02px ){
	[data-pc-after]::after{
		white-space : pre;
		content : attr( data-pc-after );
	}
}
@media print , screen and ( min-width : 750.02px ){
	[data-pc-before]::before{
		white-space : pre;
		content : attr( data-pc-before );
	}
}

/* --------------------------------------------
BR TO SPCE
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	br.sp-space{
		content : "";
	}
	br.sp-space::after{
		content : " ";
	}
}
@media print , screen and ( min-width : 750.02px ){
	br.pc-space{
		content : "";
	}
	br.pc-space::after{
		content : " ";
	}
}

/* --------------------------------------------
LH NAGATIVE MARGIN
--------------------------------------------- */
.lh{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( max-width : 750px ){
	.lh-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.lh-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
FONT SIZE
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	:root{
		--fontCoef : * .1rem;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 999.98px ){
	:root{
		--fontCoef : * 100vw / 1480;
	}
}
@media screen and ( min-width : 1000px ){
	:root{
		--fontCoef : * 1px;
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	display : grid;
	height : var( --headerHeight );
	background-color : white;
}
#header .logo{
	display : block;
	grid-row : 1;
	width : fit-content;
}
@media screen and ( max-width : 750px ){
	#header{
		align-items : center;
		justify-content : start;
	}
	#header .logo img{
		height : calc( 44 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		width : 100%;
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#header .logo{
		grid-column : 2;
		align-self : start;
		padding-top : calc( 51 var( --remBase ) );
	}
	#header .logo img{
		height : calc( 69 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	#header{
		grid-template-columns : calc( 40 * 100% / 2000 ) auto 1fr auto calc( 40 * 100% / 2000 );
	}
}
@media print , screen and ( min-width : 1480px ){
	#header{
		grid-template-columns : 40px auto 1fr auto 40px;
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	body:has( #menuBtn.is-open ){
		overflow : hidden;
	}
}
@media screen and ( max-width : 750px ){
	#menuBtn{
		position : fixed;
		top : 0;
		right : 0;
		z-index : 12;
		width : calc( 64 var( --viewportBase ) );
		height : calc( 64 var( --remBase ) );
		padding-block : calc( 17 var( --remBase ) );
		padding-inline : calc( 14 var( --viewportBase ) );
		overflow : hidden;
		background-color : var( --AccentColor01 );
	}
	#menuBtn > span:nth-of-type( 1 ){
		position : relative;
		display : block;
		width : 100%;
		height : 100%;
		font-size : 0;
	}
	#menuBtn > span:nth-of-type( 1 ) span{
		position : absolute;
		left : 0;
		display : block;
		width : 100%;
		height : calc( 2 var( --remBase ) );
		background-color : var( --TextColor03 );
	}
	#menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
		top : 0;
	}
	#menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 2 ) , #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 3 ){
		top : calc( 14 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 4 ){
		bottom : 0;
	}
	#menuBtn.is-open{
		top : calc( 7 var( --remBase ) );
		right : calc( 7 var( --viewportBase ) );
		width : calc( 50 var( --viewportBase ) );
		height : calc( 52 var( --remBase ) );
		padding-block : calc( 6 var( --remBase ) );
		padding-block : calc( 11 var( --remBase ) );
		padding-inline : calc( 7 var( --viewportBase ) );
		background-color : var( --TextColor03 );
		border-radius : 50%;
	}
	#menuBtn.is-open > span:nth-of-type( 1 ) span{
		background-color : var( --AccentColor01 );
	}
	#menuBtn.is-open > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
		scale : 0;
		translate : calc( $( top ) var( --remBase ) ) 0;
	}
	#menuBtn.is-open > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
		rotate : -45deg;
	}
	#menuBtn.is-open > span:nth-of-type( 1 ) span:nth-of-type( 3 ){
		rotate : 45deg;
	}
	#menuBtn.is-open > span:nth-of-type( 1 ) span:nth-of-type( 4 ){
		scale : 0;
		translate : calc( -$( top ) var( --remBase ) ) 0;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( max-width : 750px ){
		#menuBtn > span:nth-of-type( 1 ) span{
			transition : all .4s;
		}
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#menuBtn.is-open + #nav{
		translate : -100% 0;
	}
	#nav{
		position : fixed;
		left : 100%;
		z-index : 11;
		max-height : 100vh;
		overflow-y : auto;
		translate : 0 0;
	}
	#nav .scroll{
		overflow-y : auto;
	}
	#nav{
		top : 0;
		width : calc( 368 var( --viewportBase ) );
		background-color : var( --AccentColor01 );
	}
	#nav .scroll{
		padding-inline : calc( 24 var( --percentBase ) );
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 270 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#nav{
		display : grid;
		grid-template-columns : auto auto auto;
		grid-row : 1;
		grid-column : 4;
		row-gap : calc( 10 var( --remBase ) );
		align-self : end;
	}
	#nav :where( .mypage01  , .mypage03 ){
		display : grid;
		grid-template-columns : auto auto;
		grid-row : 1;
		column-gap : calc( 7 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.7;
	}
	#nav :where( .mypage01  , .mypage03 )::before{
		content : "｜";
	}
	#nav .mypage01{
		grid-column : 2;
		padding-right : calc( 7 var( --remBase ) );
	}
	#nav .mypage03{
		grid-column : 3;
	}
	#nav .scroll{
		grid-row : 2;
		grid-column : 1/4;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( max-width : 750px ){
		#nav{
			transition : translate .5s ease-in;
		}
	}
}

/* --------------------------------------------
GLOBAL NAV
--------------------------------------------- */
#globalNav > li > div > span{
	display : grid;
	align-items : center;
}
#globalNav > li > div > span::before{
	display : block;
	font-size : 0;
	content : "";
	filter : var( --filterWhite );
	background-repeat : no-repeat;
	background-position : 0 center;
	background-size : contain;
}
#globalNav > li:nth-child( 1 ) > div > span::before{
	background-image : url( "../images/nav/association.svg" );
}
#globalNav > li:nth-child( 2 ) > div > span::before{
	background-image : url( "../images/nav/certification.svg" );
}
#globalNav > li:nth-child( 3 ) > div > span::before{
	background-image : url( "../images/nav/search.svg" );
}
#globalNav .links .apply::before{
	filter : invert( 72% ) sepia( 37% ) saturate( 807% ) hue-rotate( 356deg ) brightness( 95% ) contrast( 77% );
}
@media screen and ( max-width : 750px ){
	#globalNav li > a:not( .mypage ){
		display : grid;
		grid-template-columns : calc( 20 * 100% / 308 ) auto;
		column-gap : calc( 6 * 100% / 308 );
		align-items : center;
		justify-content : start;
		margin-left : calc( 12 * 100% / 320 );
		font-size : 1.8rem;
		line-height : 1.5;
		color : var( --TextColor03 );
	}
	#globalNav li > a:not( .mypage )::before{
		display : block;
		height : calc( 20 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/nav/arrow.svg" ) 0 center / contain no-repeat;
		filter : var( --filterWhite );
	}
	#globalNav li:has( > a:not( .mypage ) ) + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#globalNav > li:not( :has( > a:only-child ) ) + li{
		padding-top : calc( 20 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
		border-top : solid 1px var( --TextColor03 );
	}
	#globalNav > li > div > span{
		font-size : 2rem;
		color : var( --TextColor03 );
	}
	#globalNav > li:nth-child( 1 ) > div > span{
		grid-template-columns : calc( 42 * 100% / 320 ) auto;
		column-gap : calc( 4 * 100% / 320 );
	}
	#globalNav > li:nth-child( 1 ) > div > span::before{
		height : calc( 38 var( --remBase ) );
	}
	#globalNav > li:nth-child( 1 ) ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#globalNav > li:nth-child( 2 ) > div > span{
		grid-template-columns : calc( 38 * 100% / 320 ) auto;
		column-gap : calc( 5 * 100% / 320 );
	}
	#globalNav > li:nth-child( 2 ) > div > span::before{
		height : calc( 38 var( --remBase ) );
	}
	#globalNav > li:nth-child( 2 ) > div > ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#globalNav > li:nth-child( 2 ) > div > ul > li + li{
		padding-top : calc( 20 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
		border-top : solid 1px var( --TextColor03 );
	}
	#globalNav > li:nth-child( 2 ) > div > ul > li > span{
		margin-left : calc( 12 * 100% / 320 );
		font-size : 1.8rem;
		font-weight : 700;
		line-height : 1.5;
		color : var( --TextColor03 );
	}
	#globalNav > li:nth-child( 2 ) > div ul ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#globalNav > li:nth-child( 3 ) > div > span{
		grid-template-columns : calc( 38 * 100% / 320 ) auto;
		column-gap : calc( 6 * 100% / 320 );
	}
	#globalNav > li:nth-child( 3 ) > div > span::before{
		height : calc( 40 var( --remBase ) );
	}
	#globalNav > li:nth-child( 3 ) ul{
		margin-top : calc( 28 var( --remBase ) );
	}
	#globalNav .mypage{
		display : grid;
		align-items : center;
		justify-content : center;
		width : calc( 284 * 100% / 320 );
		height : calc( 60 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 1.3;
		color : var( --TextColor01 );
		background : var( --BackColor02 );
		border : calc( 2 var( --remBase ) ) solid var( --AccentColor01-3 );
		border-radius : calc( 6 var( --remBase ) );
	}
	#globalNav .mypage::before{
		display : block;
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-position : 0 center;
		background-size : contain;
	}
	#globalNav .mypage01{
		grid-template-columns : calc( 39 * 100% / 280 ) auto;
		column-gap : calc( 8 * 100% / 280 );
	}
	#globalNav .mypage01::before{
		height : calc( 30 var( --remBase ) );
		background-image : url( "../images/nav/manager.svg" );
	}
	#globalNav .mypage02{
		grid-template-columns : calc( 39 * 100% / 280 ) auto;
		column-gap : calc( 8 * 100% / 280 );
	}
	#globalNav .mypage02::before{
		height : calc( 32 var( --remBase ) );
		background-image : url( "../images/nav/company.svg" );
	}
	#globalNav .mypage03{
		grid-template-columns : calc( 29 * 100% / 280 ) auto;
		column-gap : calc( 8 * 100% / 280 );
	}
	#globalNav .mypage03::before{
		height : calc( 29 var( --remBase ) );
		background-image : url( "../images/nav/user.svg" );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#globalNav{
		display : grid;
		grid-template-columns : repeat( 3 , auto );
		border-top : solid 1px #d9d9d9;
	}
	#globalNav > li:has( > a ){
		display : none;
	}
	#globalNav > li > span{
		display : grid;
		grid-template-columns : auto auto auto;
		column-gap : calc( 6 var( --remBase ) );
		align-items : center;
		justify-content : start;
		height : calc( 68 var( --remBase ) );
		padding-left : calc( 16 var( --remBase ) );
		padding-right : calc( 28 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		cursor : pointer;
	}
	#globalNav > li > span::before , #globalNav > li > span::after{
		display : block;
		font-size : 0;
		content : "";
		filter : var( --filterTextColor );
		background-repeat : no-repeat;
		background-size : contain;
	}
	#globalNav > li > span::before{
		background-position : 0 center;
	}
	#globalNav > li > span::after{
		width : calc( 12 var( --remBase ) );
		height : calc( 8 var( --remBase ) );
		background-image : url( "../images/nav/down.svg" );
		background-position : 0 0;
	}
	#globalNav > li > div{
		position : absolute;
		top : calc( 100% - ( 16 var( --remBase ) ) );
		left : 0;
		display : grid;
		grid-template-rows : calc( 24 var( --remBase ) ) auto calc( 24 var( --remBase ) );
		grid-template-columns : calc( 340 var( --percentBase ) ) 1fr;
		column-gap : calc( 24 var( --percentBase ) );
		align-items : start;
		width : 100%;
		max-height : 0;
		overflow : hidden;
		color : var( --TextColor03 );
		background-color : rgba( var( --AccentColorRGB ) / .9 );
	}
	#globalNav > li > div > span{
		grid-row : 2;
		grid-column : 1;
		align-self : stretch;
		justify-content : end;
		padding-right : calc( 24 var( --remBase ) );
		font-size : calc( 20 var( --fontCoef ) );
		border-right : solid 1px currentColor;
	}
	#globalNav > li > div > span + *{
		grid-row : 2;
		grid-column : 2;
	}
	#globalNav .links a{
		display : grid;
		grid-template-columns : calc( 20 var( --fontCoef ) ) auto;
		column-gap : calc( 6 var( --remBase ) );
		align-items : start;
		justify-content : start;
		font-size : calc( 18 var( --fontCoef ) );
	}
	#globalNav .links a::before{
		display : block;
		height : calc( 20 var( --fontCoef ) );
		content : "";
		background : url( "../images/nav/arrow.svg" ) center / contain no-repeat;
		filter : var( --filterWhite );
	}
	#globalNav > li:where( :nth-child( 1 ) , :nth-child( 3 ) ) ul{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 24 * 100% / 1036 );
		align-items : start;
		justify-content : start;
	}
	#globalNav > li:nth-child( 2 ) > div > ul{
		display : grid;
		grid-template-columns : auto 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 16 * 100% / 1036 );
		align-items : start;
		align-self : center;
	}
	#globalNav > li:nth-child( 2 ) > div > ul > li{
		display : contents;
	}
	#globalNav > li:nth-child( 2 ) > div > ul span{
		padding-block : calc( 5 var( --remBase ) );
		padding-inline : calc( 2 var( --remBase ) );
		font-size : calc( 18 var( --fontCoef ) );
		font-weight : 700;
		color : var( --AccentColor01 );
		background-color : var( --TextColor03 );
	}
	#globalNav > li:nth-child( 2 ) ul ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 24 var( --remBase ) );
		align-self : center;
	}
	#globalNav > li:hover > span{
		color : var( --TextColor03 );
		background-color : rgba( var( --AccentColorRGB ) / .9 );
	}
	#globalNav > li:hover > span::before{
		filter : var( --filterWhite );
	}
	#globalNav > li:hover > span::after{
		filter : var( --filterWhite );
		rotate : 180deg;
	}
	#globalNav > li:hover > div{
		max-height : calc( 144 var( --fontCoef ) );
	}
	#globalNav > li:nth-child( 1 ) > span::before{
		width : calc( 41 var( --remBase ) );
		height : calc( 38 var( --remBase ) );
		background-image : url( "../images/nav/association.svg" );
	}
	#globalNav > li:nth-child( 1 ) > div{
		align-items : center;
	}
	#globalNav > li:nth-child( 1 ) > div > span{
		grid-template-columns : calc( 41 * 100% / 316 ) auto;
		column-gap : calc( 2 * 100% / 316 );
		padding-block : calc( 24 var( --remBase ) );
	}
	#globalNav > li:nth-child( 1 ) > div > span::before{
		height : calc( 38 var( --remBase ) );
	}
	#globalNav > li:nth-child( 2 ) > span::before{
		width : calc( 38 var( --remBase ) );
		height : calc( 38 var( --remBase ) );
		background-image : url( "../images/nav/certification.svg" );
	}
	#globalNav > li:nth-child( 2 ) > div{
		align-items : start;
	}
	#globalNav > li:nth-child( 2 ) > div > span{
		grid-template-columns : calc( 38 * 100% / 316 ) auto;
		column-gap : calc( 5 * 100% / 316 );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 52 var( --remBase ) );
	}
	#globalNav > li:nth-child( 2 ) > div > span::before{
		height : calc( 38 var( --remBase ) );
	}
	#globalNav > li:nth-child( 3 ) > span::before{
		width : calc( 38 var( --remBase ) );
		height : calc( 40 var( --remBase ) );
		background-image : url( "../images/nav/search.svg" );
	}
	#globalNav > li:nth-child( 3 ) > div{
		align-items : center;
	}
	#globalNav > li:nth-child( 3 ) > div > span{
		grid-template-columns : calc( 38 * 100% / 316 ) auto;
		column-gap : calc( 6 * 100% / 316 );
		padding-block : calc( 20 var( --remBase ) );
	}
	#globalNav > li:nth-child( 3 ) > div > span::before{
		height : calc( 40 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media print , screen and ( min-width : 750.02px ){
		#globalNav > li > span{
			transition : background var( --transitionBase ) , color var( --transitionBase );
		}
		#globalNav > li > span::before{
			transition : filter var( --transitionBase );
		}
		#globalNav > li > span::after{
			transition : filter var( --transitionBase ) , rotate var( --transitionBase );
		}
		#globalNav > li > div{
			transition : max-height var( --transitionBase );
		}
	}
}

/* --------------------------------------------
CLOSE MENU BUTTON
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#menuCloseBtn{
		display : block;
		width : calc( 27 * 100% / 320 );
		height : calc( 52 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 48 var( --remBase ) );
	}
	#menuCloseBtn img{
		width : 100%;
		height : auto;
	}
}

/* --------------------------------------------
TOP LINKS
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#topLinks{
		display : grid;
		grid-template-columns : calc( 138 var( --percentBase ) ) calc( 226 var( --percentBase ) );
		justify-content : space-between;
		padding-block : calc( 8 var( --remBase ) );
		background-color : #fff;
		background-color : var( --AccentColor01-2 );
	}
	#topLinks a{
		display : grid;
		align-items : center;
		justify-content : center;
		height : calc( 28 var( --remBase ) );
		font-size : 1.4rem;
		color : var( --AccentColor01 );
		background-color : var( --TextColor03 );
		border-radius : calc( 6 var( --remBase ) );
	}
	#topLinks a::before{
		display : block;
		content : "";
		background-repeat : no-repeat;
		background-position : 0 center;
		background-size : contain;
	}
	#topLinks li:nth-child( 1 ) a{
		grid-template-columns : calc( 14 * 100% / 138 ) auto;
		column-gap : calc( 4 * 100% / 138 );
	}
	#topLinks li:nth-child( 1 ) a::before{
		height : calc( 14 var( --remBase ) );
		background-image : url( "../images/home/links/certification.svg" );
	}
	#topLinks li:nth-child( 2 ) a{
		grid-template-columns : calc( 19 * 100% / 226 ) auto;
		column-gap : calc( 4 * 100% / 226 );
	}
	#topLinks li:nth-child( 2 ) a::before{
		height : calc( 21 var( --remBase ) );
		background-image : url( "../images/home/links/search.svg" );
	}
}

/* --------------------------------------------
MV
--------------------------------------------- */
#mv{
	font-size : 0;
}
#mv picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#mv .splide__pagination button{
	width : 100%;
}
#mv .splide__pagination button:not( .is-active ){
	background-color : var( --TextColor02 );
}
#mv .splide__pagination .is-active{
	background-color : var( --AccentColor02 );
}
@media screen and ( max-width : 750px ){
	#mv picture{
		height : calc( 649 var( --remBase ) );
	}
	#mv .splide__pagination{
		column-gap : calc( 8 var( --viewportBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#mv .splide__pagination li{
		width : calc( 80 var( --viewportBase ) );
	}
	#mv .splide__pagination button{
		height : calc( 4 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#mv picture{
		height : calc( 694 var( --remBase ) );
	}
	#mv .splide__pagination{
		position : absolute;
		bottom : calc( 12 var( --remBase ) );
		width : 100%;
	}
	#mv .splide__pagination button{
		height : calc( 4 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	#mv .splide__list{
		position : relative;
	}
	#mv .splide__slide{
		width : calc( 1400 var( --viewportBase ) );
	}
	#mv .splide__pagination{
		column-gap : calc( 8 var( --viewportBase ) );
	}
	#mv .splide__pagination li{
		width : calc( 80 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	#mv .splide__pagination{
		column-gap : 8px;
	}
	#mv .splide__pagination li{
		width : 80px;
	}
}