@charset "UTF-8";
#main{
	--base : #333;
	background-color : #fbfbfc;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


@media screen and ( width <= 768px ){
	#main{
		--gutter : 40;
		--wrapperSize : 670;
		--percentBase : * 100% / var( --wrapperSize )
;
	}
}
@media print , screen and ( width > 768px ){
	#main{
		overflow-x : clip;
	}
}

/* --------------------------------------------
ME
--------------------------------------------- */
#me .box{
	background-color : white;
	filter : drop-shadow( 0 0 calc( 30 var( --remBase ) ) color-mix( in sRGB , black 10% , transparent ) );
	border-bottom-color : #01426b;
	border-bottom-style : solid;
}
#me h3{
	display : grid;
	align-content : center;
	align-items : start;
	justify-content : center;
	color : white;
	text-align : center;
	background-image : linear-gradient( -45deg , rgb( 31 94 129 ) 0% , rgb( 1 38 81 / .99608 ) 100% );
}
#me h3 span{
	display : block;
	font-family : "Bebas Neue" , sans-serif;
}
#me li p{
	font-weight : 700;
	letter-spacing : .04em;
}
#me .box > p strong{
	font-weight : 700;
}
#me .box > a{
	display : block;
}
#me .box > a img{
	width : 100%;
	height : auto;
}
@media screen and ( width <= 768px ){
	#me{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 132 var( --remBase ) );
	}
	#me .box{
		padding-inline : calc( 40 var( --percentBase ) );
		padding-top : calc( ( 40 - 6 ) var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
		border-bottom-width : calc( 8 var( --remBase ) );
	}
	#me .box > p{
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
		letter-spacing : .06em;
	}
	#me ul{
		margin-top : calc( ( 20 - 6 ) var( --remBase ) );
	}
	#me li{
		display : grid;
		grid-template-columns : calc( 90 * 100% / 590 ) 1fr;
		column-gap : calc( 30 * 100% / 590 );
		align-items : center;
		justify-content : start;
		padding-bottom : calc( 20 var( --remBase ) );
		border-bottom : solid calc( 2 var( --remBase ) ) #b3b3b3;
	}
	#me li + li{
		margin-top : calc( 17 var( --remBase ) );
	}
	#me h3{
		height : calc( 90 var( --remBase ) );
	}
	#me li:nth-child( 1 ) h3 > span:nth-of-type( 1 ){
		margin-bottom : calc( ( 1cap - 1em ) * 1 / 2 );
		font-size : 2.7rem;
	}
	#me li:nth-child( 1 ) h3 > span:nth-of-type( 2 ){
		font-size : 3rem;
	}
	#me li:nth-child( 2 ) h3 > span:nth-of-type( 1 ){
		margin-bottom : calc( ( 1cap - 1em ) * 1 / 2 );
		font-size : 5.25rem;
	}
	#me li:nth-child( 2 ) h3 > span:nth-of-type( 2 ){
		font-size : 1.5rem;
	}
	#me li:nth-child( 3 ) h3 > span:nth-of-type( 1 ){
		margin-bottom : calc( ( 1cap - 1em ) * 1 / 2 );
		font-size : 5.25rem;
	}
	#me li:nth-child( 3 ) h3 > span:nth-of-type( 2 ){
		font-size : 1.5rem;
		text-align : center;
		text-indent : .12em;
		letter-spacing : .12em;
	}
	#me li p{
		font-size : 2.8rem;
		line-height : calc( 36 / 28 );
	}
	#me .box > a{
		margin-top : calc( 18 var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	#me{
		position : relative;
		z-index : 2;
		padding-top : calc( 44 var( --remBase ) );
		padding-bottom : calc( 55 var( --remBase ) );
	}
	#me .box{
		position : relative;
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : 1fr calc( 244 * 100% / 1000 );
		row-gap : calc( 14 var( --remBase ) );
		column-gap : calc( 60 * 100% / 1000 );
		align-items : start;
		width : calc( 1100 var( --percentBase ) );
		height : calc( 200 var( --remBase ) );
		padding-inline : calc( 50 var( --percentBase ) );
		padding-top : calc( 50 var( --remBase ) );
		margin-inline : auto;
		border-bottom-width : calc( 4 var( --remBase ) );
	}
	#me .box::before{
		position : absolute;
		top : calc( 50 var( --remBase ) );
		left : calc( 774 * 100% / 1100 );
		display : block;
		width : calc( 2 * 100% / 1100 );
		height : calc( 100 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : #b3b3b3;
	}
	#me .box ul{
		display : grid;
		grid-template-columns : calc( 60 * 100% / 696 ) calc( 12 * 100% / 696 ) auto 1fr calc( 60 * 100% / 696 ) calc( 13 * 100% / 696 ) auto 1fr calc( 60 * 100% / 696 ) calc( 13 * 100% / 700 ) auto;
		grid-row : 1;
		grid-column : 1;
		align-items : center;
		justify-content : space-between;
	}
	#me .box li{
		position : relative;
		display : contents;
	}
	#me .box li:nth-child( 1 ) h3{
		grid-column : 1;
	}
	#me .box li:nth-child( 1 ) h3 > span:nth-of-type( 1 ){
		margin-bottom : calc( ( 1cap - 1em ) * 1 / 2 );
		font-size : 1.8rem;
	}
	#me .box li:nth-child( 1 ) h3 > span:nth-of-type( 2 ){
		font-size : 2rem;
	}
	#me .box li:nth-child( 1 ) p{
		grid-column : 3;
	}
	#me .box li:nth-child( 2 ) h3{
		grid-column : 5;
	}
	#me .box li:nth-child( 2 ) h3 > span:nth-of-type( 1 ){
		margin-bottom : calc( ( 1cap - 1em ) * 1 / 2 );
		font-size : 3.354rem;
	}
	#me .box li:nth-child( 2 ) h3 > span:nth-of-type( 2 ){
		font-size : .958rem;
	}
	#me .box li:nth-child( 2 ) p{
		grid-column : 7;
	}
	#me .box li:nth-child( 3 ) h3{
		grid-column : 9;
	}
	#me .box li:nth-child( 3 ) h3 > span:nth-of-type( 1 ){
		margin-bottom : calc( ( 1cap - 1em ) * 1 / 2 );
		font-size : 3.5rem;
	}
	#me .box li:nth-child( 3 ) h3 > span:nth-of-type( 2 ){
		font-size : 1rem;
		text-align : center;
		text-indent : .12em;
		letter-spacing : .12em;
	}
	#me .box li:nth-child( 3 ) p{
		grid-column : 11;
	}
	#me .box li + li h3::before{
		position : absolute;
		left : calc( -32 * 100% / 60 );
		display : block;
		width : calc( 2 * 100% / 60 );
		height : 100%;
		content : "";
		background-color : #b3b3b3;
	}
	#me .box h3{
		position : relative;
		height : calc( 60 var( --remBase ) );
	}
	#me .box li p{
		font-size : 1.8rem;
		line-height : calc( 24 / 18 );
	}
	#me .box > p{
		grid-row : 2;
		grid-column : 1;
		font-size : 2.4rem;
		font-weight : 700;
		text-align-last : justify;
		letter-spacing : .06em;
	}
	#me .box > a{
		grid-row : 1/3;
		grid-column : 2;
	}
}
@media ( hover : hover ){
	#me a:hover{
		opacity : .75;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#me a{
		transition : opacity var( --transitionBase );
	}
}

/* --------------------------------------------
FEATURES
--------------------------------------------- */
#features li{
	position : relative;
	counter-increment : no;
}
#features h3{
	font-weight : 700;
	color : #01426b;
	letter-spacing : .04em;
}
#features h3::before{
	position : absolute;
	font-family : "Bebas Neue" , sans-serif;
	font-weight : 400;
	letter-spacing : .04em;
	content : counter( no , decimal-leading-zero );
}
#features p{
	letter-spacing : .04em;
}
#features p em{
	font-weight : 900;
}
@media screen and ( width <= 768px ){
	#features{
		padding-bottom : calc( 116 var( --remBase ) );
	}
	#features ul{
		margin-top : calc( 64 var( --remBase ) );
	}
	#features li{
		padding-left : calc( 63 var( --percentBase ) );
	}
	#features li + li{
		padding-top : calc( 40 var( --remBase ) );
		margin-top : calc( ( 39 - 6 ) var( --remBase ) );
		border-top : solid calc( 2 var( --remBase ) ) #01426b;
	}
	#features h3{
		font-size : 3rem;
	}
	#features h3::before{
		top : calc( ( ( 1ch - 1em * 1 / 3 ) ) var( --remBase ) );
		left : 0;
		font-size : 4rem;
	}
	#features p{
		margin-top : calc( ( 21 - 6 ) var( --remBase ) );
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
	#features .link01{
		--beforeWidth : 21;
		--Link01Width : 291;
		--columnGapWidth : 16;
		width : calc( var( --Link01Width ) var( --percentBase ) );
		height : calc( 75 var( --remBase ) );
		margin-top : calc( ( 39 - 6 ) var( --remBase ) );
		font-size : 2.7rem;
	}
}
@media print , screen and ( width > 768px ){
	#features{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#features ul{
		position : relative;
		display : grid;
		grid-template-columns : repeat( 2 , calc( 580 var( --percentBase ) ) );
		row-gap : calc( ( 69 - 6 ) var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 40 var( --remBase ) );
	}
	#features ul::before , #features ul::after{
		position : absolute;
		top : 0;
		display : block;
		width : 1px;
		height : calc( 100% - ( 6 var( --remBase ) ) );
		font-size : 0;
		content : "";
		background-color : #01426b;
	}
	#features ul::before{
		left : 0;
	}
	#features ul::after{
		right : 0;
	}
	#features li{
		padding-left : calc( 64 * 100% / 580 );
		padding-right : calc( 20 * 100% / 580 );
	}
	#features li:nth-child( n + 3 )::after{
		position : absolute;
		top : calc( -33 var( --remBase ) );
		display : block;
		width : calc( 560 * 100% / 580 );
		height : 1px;
		font-size : 0;
		content : "";
		background-color : #01426b;
	}
	#features li:nth-child( n + 3 ):nth-of-type( odd )::after{
		left : calc( 20 * 100% / 580 );
	}
	#features li:nth-child( n + 3 ):nth-of-type( even )::after{
		left : 0;
	}
	#features li:nth-child( even )::before{
		position : absolute;
		left : calc( -20 * 100% / 580 );
		display : block;
		width : 1px;
		height : 100%;
		font-size : 0;
		content : "";
		background-color : #01426b;
	}
	#features li:nth-child( even ):not( :las-child )::before{
		top : 0;
	}
	#features li:nth-child( even ):last-child::before{
		top : calc( -6 var( --remBase ) );
	}
	#features h3{
		font-size : 2.2rem;
	}
	#features h3::before{
		top : calc( ( ( 1ch - 1em * 1 / 3 ) ) var( --remBase ) );
		left : calc( 24 * 100% / 496 );
		font-size : 3rem;
	}
	#features p{
		margin-top : calc( ( 22 - 6 ) var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.75;
	}
	#features .link01{
		--Link01Width : 194;
		--columnGapWidth : 11;
		width : calc( var( --Link01Width ) var( --percentBase ) );
		height : calc( 50 var( --remBase ) );
		margin-top : calc( ( 45 - 6 ) var( --remBase ) );
		font-size : 1.8rem;
	}
}

/* --------------------------------------------
FIELDS
--------------------------------------------- */
#fields li a{
	display : grid;
	background-color : #eef3f7;
}
#fields li a:link{
	color : var( --base );
}
#fields h3{
	grid-row : 1;
	grid-column : 1 / 6;
	font-weight : 700;
	color : #01426b;
	letter-spacing : .06em;
}
#fields picture{
	grid-row : 2;
	grid-column : 1;
}
#fields picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#fields p{
	grid-column : 3 / -1;
	letter-spacing : .06em;
}
#fields dl{
	display : grid;
	grid-row : 3;
	grid-column : 1/4;
}
#fields dt , #fields dd{
	display : grid;
	place-items : center;
	height : 100%;
	font-weight : 700;
	text-align : center;
	text-indent : .04em;
	letter-spacing : .04em;
}
#fields dt{
	color : white;
	background-color : #777;
}
#fields dd{
	background-color : white;
	border-right-color : #777;
	border-right-style : solid;
	border-block-style : solid;
	border-block-color : #777;
}
#fields .link01{
	grid-row : 3;
	grid-column : 5;
}
@media screen and ( width <= 768px ){
	#fields{
		padding-block : calc( 42 var( --remBase ) );
	}
	#fields ul{
		margin-top : calc( 65 var( --remBase ) );
	}
	#fields li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#fields li a{
		grid-template-columns : calc( 130 * 100% / 590 ) calc( 30 * 100% / 590 ) calc( 180 * 100% / 590 ) calc( 34 * 100% / 590 ) calc( 216 * 100% / 590 );
		padding-block : calc( 39 var( --remBase ) );
		padding-inline : calc( 40 var( --percentBase ) );
		padding-top : calc( 42 var( --remBase ) );
	}
	#fields h3{
		margin-bottom : calc( ( 35 - 6 ) var( --remBase ) );
		font-size : 2.8rem;
	}
	#fields picture{
		height : calc( 100 var( --remBase ) );
		margin-top : calc( 6 var( --remBase ) );
	}
	#fields p{
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
	#fields dl , #fields .link01{
		height : calc( 64 var( --remBase ) );
		margin-top : calc( ( 32 - 6 ) var( --remBase ) );
	}
	#fields dl{
		grid-template-columns : calc( 138 * 100% / 340 ) 1fr;
	}
	#fields dt , #fields dd{
		font-size : 2.4rem;
		line-height : calc( 35.37 / 24 );
	}
	#fields dd{
		border-right-width : calc( 2 var( --remBase ) );
		border-block-width : calc( 2 var( --remBase ) );
	}
	#fields .link01{
		--beforeWidth : 24;
		--Link01Width : 216;
		--columnGapWidth : 18;
		width : 100%;
		font-size : 2.6rem;
	}
}
@media print , screen and ( width > 768px ){
	#fields{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#fields ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 392 var( --percentBase ) ) );
		row-gap : calc( 12 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 41 var( --remBase ) );
	}
	#fields li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : 0;
	}
	#fields li a{
		grid-template-rows : subgrid;
		grid-template-columns : calc( 130 * 100% / 352 ) calc( 10 * 100% / 352 ) calc( 62 * 100% / 352 ) calc( 20 * 100% / 352 ) calc( 130 * 100% / 352 );
		grid-row : span 3;
		padding-inline : calc( 20 * 100% / 392 );
		padding-top : calc( ( 22 - .5 ) var( --remBase ) );
		padding-bottom : calc( 20 var( --remBase ) );
		pointer-events : none;
	}
	#fields h3{
		margin-bottom : calc( ( 19 - .5 - 3.5 ) var( --remBase ) );
		font-size : 2rem;
		line-height : 1.05;
	}
	#fields picture{
		height : calc( 100 var( --remBase ) );
		margin-top : calc( 3.5 var( --remBase ) );
	}
	#fields p{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#fields dl{
		grid-template-columns : calc( 82 * 100% / 202 ) 1fr;
		height : calc( 38 var( --remBase ) );
		margin-top : calc( ( 21 - 3.5 ) var( --remBase ) );
	}
	#fields dt , #fields dd{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#fields dd{
		border-right-width : 1px;
		border-block-width : 1px;
	}
	#fields .link01{
		--Link01Width : 130;
		--columnGapWidth : 10;
		width : 100%;
		height : calc( 40 var( --remBase ) );
		margin-top : calc( ( 20 - 3.5 ) var( --remBase ) );
		font-size : 1.6rem;
		pointer-events : auto;
	}
}

/* --------------------------------------------
TRANSLATORS
--------------------------------------------- */
#translators{
	background-image : linear-gradient( -45deg , rgb( 31 94 129 ) 0% , rgb( 1 38 81 / .99608 ) 100% );
}
#translators h2{
	font-weight : 700;
	color : white;
	letter-spacing : .06em;
}
#translators > p{
	font-weight : 500;
	color : white;
	letter-spacing : .06em;
}
#translators li a{
	display : grid;
	color : var( --base );
	background-color : white;
	border-radius : calc( 10 var( --remBase ) );
}
#translators picture{
	grid-row : 1;
	grid-column : 1;
	width : 100%;
	height : 100%;
}
#translators img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#translators hgroup{
	display : grid;
	grid-auto-flow : row;
	align-content : space-between;
	justify-content : start;
}
#translators hgroup p{
	margin-top : calc( ( 1em - 1lh ) / 2 );
	font-weight : 500;
	letter-spacing : .06em;
}
#translators hgroup h3{
	font-family : "Noto Serif JP" , serif;
	letter-spacing : .066em;
}
#translators hgroup h3[data-en]::after{
	display : block;
	margin-bottom : calc( ( 1em - 1lh ) / 2 );
	letter-spacing : .06em;
	content : attr( data-en );
}
#translators a > p{
	grid-row : 3;
	grid-column : 1 / 3;
}
#translators a > p em{
	font-weight : 700;
}
#translators li .link01{
	grid-row : 5;
	grid-column : 1/3;
	height : 100%;
}
@media screen and ( width <= 768px ){
	#translators{
		padding-top : calc( 81 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#translators h2{
		font-size : 4rem;
	}
	#translators > p{
		margin-top : calc( ( 38 ) var( --remBase ) );
		font-size : 2.8rem;
	}
	#translators ul{
		margin-top : calc( 40 var( --remBase ) );
	}
	#translators ul li + li{
		margin-top : calc( 39 var( --remBase ) );
	}
	#translators li a{
		grid-template-rows : calc( 106 var( --remBase ) ) calc( ( 31 - 6 ) var( --remBase ) ) auto calc( ( 28 - 6 ) var( --remBase ) ) calc( 70 var( --remBase ) );
		grid-template-columns : calc( 106 * 100% / 590 ) 1fr;
		column-gap : calc( 30 * 100% / 590 );
		padding-block : calc( 40 var( --remBase ) );
		padding-inline : calc( 40 var( --percentBase ) );
	}
	#translators hgroup p{
		font-size : 2.4rem;
		line-height : calc( 26 / 24 );
	}
	#translators hgroup h3{
		font-size : 4rem;
	}
	#translators hgroup h3[data-en]::after{
		/* margin-top: calc( ( 7 - 7 ) var(--remBase) ); */
		font-size : 1.2rem;
		line-height : calc( 26 / 12 );
	}
	#translators a > p{
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
	#translators li .link01{
		--beforeWidth : 22;
		--Link01Width : 355.5;
		--columnGapWidth : 12;
		justify-self : center;
		width : calc( var( --Link01Width ) * 100% / 590 );
		font-size : 2.6rem;
	}
	#translators > a{
		--beforeWidth : 21;
		--Link01Width : 293;
		--columnGapWidth : 15;
		width : calc( var( --Link01Width ) var( --percentBase ) );
		height : calc( 75 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 41 var( --remBase ) );
		font-size : 2.6rem;
	}
}
@media print , screen and ( width > 768px ){
	#translators{
		display : grid;
		grid-template-rows : auto calc( ( 40 - 5 ) var( --remBase ) ) auto 1fr auto;
		grid-template-columns : calc( 270 var( --percentBase ) ) 1fr;
		padding-block : calc( 80 var( --remBase ) );
	}
	#translators h2{
		grid-row : 1;
		grid-column : 1;
		font-size : 3.6rem;
	}
	#translators > p{
		grid-row : 3;
		grid-column : 1;
		width : calc( 218 * 100% / 270 );
		font-size : 1.6rem;
		line-height : calc( 26 / 16 );
	}
	#translators ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 450 * 100% / 930 ) );
		grid-row : 1/-1;
		grid-column : 2;
		justify-content : space-between;
	}
	#translators li a{
		grid-template-rows : calc( 106 var( --remBase ) ) calc( ( 31 - 5 ) var( --remBase ) ) auto calc( ( 20 - 5 ) var( --remBase ) ) calc( 40 var( --remBase ) );
		grid-template-columns : calc( 106 * 100% / 390 ) 1fr;
		column-gap : calc( 30 * 100% / 390 );
		padding-block : calc( 30 var( --remBase ) );
		padding-inline : calc( 30 * 100% / 450 );
		pointer-events : none;
	}
	#translators hgroup p{
		font-size : 1.6rem;
		line-height : calc( 26 / 16 );
	}
	#translators hgroup h3{
		font-size : 3rem;
	}
	#translators hgroup h3[data-en]::after{
		margin-top : calc( ( 10 - 6.5 ) var( --remBase ) );
		font-size : 1rem;
		line-height : 2.6;
	}
	#translators a > p{
		font-size : 1.6rem;
		line-height : calc( 26 / 16 );
	}
	#translators li .link01{
		--Link01Width : 212;
		--columnGapWidth : 11;
		justify-self : end;
		width : calc( var( --Link01Width ) * 100% / 390 );
		font-size : 1.6rem;
		pointer-events : auto;
	}
	#translators > a{
		--Link01Width : 195;
		--columnGapWidth : 10;
		grid-row : 5;
		grid-column : 1;
		width : calc( var( --Link01Width ) * 100% / 270 );
		height : calc( 50 var( --remBase ) );
		font-size : 1.8rem;
	}
}

/* --------------------------------------------
VOICES
--------------------------------------------- */
#voices{
	background-color : #e4eef4;
}
#voices .splide__slide a{
	display : flex;
	flex-direction : column;
	background-image : linear-gradient( 90deg , rgb( 255 255 255 ) 0% , rgb( 245 245 245 / .99608 ) 100% );
}
#voices .splide__slide a:any-link{
	color : var( --base );
	text-decoration: none;
}
#voices .splide__slide a::before{
	position : absolute;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	content : "";
	mix-blend-mode : multiply;
}
#voices .splide__slide h3 picture{
	display : grid;
	place-items : center;
	width : 100%;
	background-color : white;
}
#voices .splide__slide h3 picture img{
	width : auto;
}
#voices .splide__slide h3:not( :has( picture ) ) > span:nth-of-type( 1 ){
	display : grid;
	place-items : center;
	width : 100%;
	font-weight : 700;
	text-align : center;
	text-indent : .04em;
	letter-spacing : .04em;
	background-color : white;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#voices .splide__slide h3:not( :has( picture ) ) > span:nth-of-type( 1 ).bg01{
	background-image : image-set( url( "../img/bg01.avif" ) type( "image/avif" ) , url( "../img/bg01.webp" ) type( "image/webp" ) );
}
#voices .splide__slide h3:not( :has( picture ) ) > span:nth-of-type( 1 ).bg02{
	background-image : image-set( url( "../img/bg02.avif" ) type( "image/avif" ) , url( "../img/bg02.webp" ) type( "image/webp" ) );
}
#voices .splide__slide h3:not( :has( picture ) ) > span:nth-of-type( 1 ).bg03{
	background-image : image-set( url( "../img/bg03.avif" ) type( "image/avif" ) , url( "../img/bg03.webp" ) type( "image/webp" ) );
}
#voices .splide__slide h3:not( :has( picture ) ) > span:nth-of-type( 1 ).bg04{
	background-image : image-set( url( "../img/bg04.avif" ) type( "image/avif" ) , url( "../img/bg04.webp" ) type( "image/webp" ) );
}
#voices .splide__slide h3 picture + span , #voices .splide__slide h3 span + span{
	display : block;
	font-weight : 700;
	color : #666;
	letter-spacing : .06em;
}
#voices .splide__slide h4{
	display : -webkit-box;
	overflow : hidden;
	font-weight : 700;
	text-overflow : ellipsis;
	-webkit-box-orient : vertical;
}
#voices .splide__slide p{
	display : -webkit-box;
	overflow : hidden;
	text-overflow : ellipsis;
	-webkit-box-orient : vertical;
}
#voices .splide__slide .link01{
	margin-top : auto;
}
#voices .splide__arrows{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
}
#voices .splide__arrows img{
	filter : invert( 34% ) sepia( 72% ) saturate( 1433% ) hue-rotate( 176deg ) brightness( 104% ) contrast( 101% );
}
#voices .splide__pagination{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
}
#voices .splide__pagination__page{
	width : 100%;
	aspect-ratio : 1/1;
	border-radius : 50%;
}
#voices .splide__pagination__page:not( .is-active ){
	background-color : #e6e6e6;
	border: none;
	cursor: pointer;
}
#voices .splide__pagination__page.is-active{
	background-color : #666;
	border: none;
	cursor: pointer;
}
@media screen and ( width <= 768px ){
	#voices{
		padding-top : calc( 77 var( --remBase ) );
		padding-bottom : calc( 82 var( --remBase ) );
	}
	#voices .splide__track{
		padding-block : calc( 40 var( --remBase ) );
		/* margin-top : calc( ( 45 - 40 ) var( --remBase ) ); */
		margin-top: 4rem;
		margin-left : calc( 40 var( --viewportBase ) ) ! important;
	}
	#voices .splide__list{
		margin-left : calc( 40 * 100% / 710 ) ! important;
	}
	#voices .splide__slide a{
		height : 100%;
		padding-bottom : calc( 41 var( --remBase ) );
	}
	#voices .splide__slide a::before{
		box-shadow : 0 0 calc( 20 var( --remBase ) ) color-mix( in srgb , #000 40% , transparent );
	}
	#voices .splide__slide :where( h3 :where( picture + span , span + span ) , h4 , p ){
		padding-inline : calc( 44 * 100% / 590 );
	}
	#voices .splide__slide h3 picture{
		height : calc( 240 var( --remBase ) );
	}
	#voices .splide__slide h3 picture img{
		height : calc( var( --height ) * 240 / 160 var( --remBase ) );
	}
	#voices .splide__slide h3:not( :has( picture ) ) span:nth-of-type( 1 ){
		height : calc( 240 var( --remBase ) );
		font-size : calc( 20 * 240 / 160 var( --remBase ) );
		line-height : calc( 21 / 20 );
	}
	#voices .splide__slide h3 picture + span , #voices .splide__slide h3 span + span{
		margin-top : calc( ( 46 - 2.755 ) var( --remBase ) );
		font-size : 2.6rem;
		line-height : calc( 31.51 / 26 );
	}
	#voices .splide__slide h4{
		margin-top : calc( ( 33 - 2.755 - 8.51 ) var( --remBase ) );
		font-size : 2.8rem;
		line-height : calc( 45.02 / 28 );
		-webkit-line-clamp : 2;
	}
	#voices .splide__slide p{
		margin-top : calc( ( 31 - 8.51 - 8.51 ) var( --remBase ) );
		margin-bottom : calc( ( 39 - 8.51 ) var( --remBase ) );
		font-size : 2.8rem;
		line-height : calc( 45.02 / 28 );
		-webkit-line-clamp : 5;
	}
	#voices .splide__slide .link01{
		--beforeWidth : 22;
		--Link01Width : 244;
		--columnGapWidth : 12;
		justify-self : center;
		width : calc( var( --Link01Width ) * 100% / 590 );
		height : calc( 70 var( --remBase ) );
		margin-left : auto;
		margin-right : calc( 42 * 100% / 590 );
		font-size : 2.6rem;
	}
	#voices .splide__arrows{
		column-gap : calc( 67 var( --viewportBase ) );
		margin-top : calc( ( 80 - 40 ) var( --remBase ) );
		margin-bottom: 5rem;
	}
	#voices .splide__arrow img{
		height : calc( 63 var( --remBase ) );
	}
	#voices .splide__pagination{
		column-gap : calc( 25 var( --remBase ) );
	}
	#voices .splide__pagination__page{
		height : calc( 25 var( --remBase ) );
	}
	
}
@media print , screen and ( width > 768px ){
	#voices{
		padding-top : calc( 75 var( --remBase ) );
		padding-bottom : calc( 75 var( --remBase ) );
	}
	#voices .splide__track{
		padding-block : calc( 20 var( --remBase ) );
		margin-inline : calc( -20 var( --percentBase ) ) ! important;
		margin-top : calc( ( 61 - 20 ) var( --remBase ) );
	}
	#voices .splide__list{
		padding-inline : calc( 20 * 100% / 1240 ) ! important;
	}
	#voices .splide__slide a{
		height : 100%;
		padding-bottom : calc( 31 var( --remBase ) );
		pointer-events : none;
	}
	#voices .splide__slide a::before{
		box-shadow : 0 0 calc( 20 var( --remBase ) ) color-mix( in srgb , #000 20% , transparent );
	}
	#voices .splide__slide :where( h3 :where( picture + span , span + span ) , h4 , p ){
		padding-inline : calc( 29 * 100% / 380 );
	}
	#voices .splide__slide h3 picture{
		height : calc( 160 var( --remBase ) );
	}
	#voices .splide__slide h3 picture img{
		height : calc( var( --height ) var( --remBase ) );
	}
	#voices .splide__slide h3:not( :has( picture ) ) span:nth-of-type( 1 ){
		height : calc( 160 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.05;
	}
	#voices .splide__slide h3 picture + span , #voices .splide__slide h3 span + span{
		margin-top : calc( ( 34 - 3.5 ) var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#voices .splide__slide h4{
		margin-top : calc( ( 23 - 3.5 - 6 ) var( --remBase ) );
		font-size : 1.8rem;
		line-height : calc( 30 / 18 );
		-webkit-line-clamp : 2;
		font-family: "Noto Sans JP", sans-serif;
	}
	#voices .splide__slide p{
		margin-top : calc( ( 22 - 3.5 - 7 ) var( --remBase ) );
		margin-bottom : calc( ( 19 - 7 ) var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 30 / 16 );
		-webkit-line-clamp : 4;
		font-family: "Noto Sans JP", sans-serif;
	}
	#voices .splide__slide .link01{
		--Link01Width : 153;
		--columnGapWidth : 9;
		width : calc( var( --Link01Width ) * 100% / 380 );
		height : calc( 40 var( --remBase ) );
		margin-left : auto;
		margin-right : calc( 29 * 100% / 380 );
		font-size : 1.6rem;
		pointer-events : auto;
		font-family: "Noto Sans JP", sans-serif;
	}
	#voices .splide__arrows{
		column-gap : calc( 54 var( --percentBase ) );
		margin-top : calc( ( 43 - 20 ) var( --remBase ) );
		margin-bottom: 6rem;
	

	}
	#voices .splide__arrow img{
		height : calc( 50 var( --remBase ) );
	}
	#voices .splide__pagination{
		column-gap : calc( 20 var( --remBase ) );
	}
	#voices .splide__pagination__page{
		height : calc( 20 var( --remBase ) );
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow li{
	position : relative;
	counter-increment : no;
}
#flow h3{
	font-weight : 700;
	color : #01426b;
	letter-spacing : .06em;
}
#flow h3::before{
	position : absolute;
	left : 0;
	line-height : 1;
	letter-spacing : .04em;
	content : "STEP"counter( no , decimal-leading-zero );
}
#flow p{
	letter-spacing : .06em;
}
#flow p a:any-link{
	color : #008cdc;
}
@media screen and ( width <= 768px ){
	#flow{
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( ( 117 - 6 ) var( --remBase ) );
	}
	#flow ol{
		padding-left : calc( 160 var( --percentBase ) );
		margin-top : calc( ( 77 - 3 ) var( --remBase ) );
	}
	#flow li:not( :last-child ){
		padding-bottom : calc( ( 39 - 5 ) var( --remBase ) );
		margin-bottom : calc( ( 42 - 3 ) var( --remBase ) );
		border-bottom : solid calc( 2 var( --remBase ) ) #c3c3c3;
	}
	#flow li:not( :last-child )::after{
		position : absolute;
		top : calc( ( 36 + 31 + 6 ) var( --remBase ) );
		left : calc( -110  * 100% / 510 );
		display : block;
		width : calc( 2 * 100% / 510 );
		height : calc( 100% - ( 36 + 31 + 3 + 1 ) var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : #01426b;
	}
	#flow h3{
		font-size : 3.6rem;
		line-height : calc( 42 / 36 );
	}
	#flow h3::before{
		left : calc( -160 * 100% / 510 );
		padding-top : calc( 7 var( --remBase ) );
		font-size : 2.8rem;
	}
	#flow p{
		margin-top : calc( ( 31 - 3 - 6 ) var( --remBase ) );
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
}
@media print , screen and ( width > 768px ){
	#flow{
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( ( 78 - 5 ) var( --remBase ) );
	}
	#flow ol{
		padding-left : calc( 106 var( --percentBase ) );
		margin-top : calc( 47 var( --remBase ) );
	}
	#flow li:not( :last-child ){
		padding-bottom : calc( ( 39 - 5 ) var( --remBase ) );
		margin-bottom : calc( 42 var( --remBase ) );
		border-bottom : solid 1px #c3c3c3;
	}
	#flow li:not( :last-child )::after{
		position : absolute;
		top : calc( ( 24 + 21 ) var( --remBase ) );
		left : calc( -68  * 100% / 1094 );
		display : block;
		width : 1px;
		height : calc( 100% - ( 24 + 21 - 26 ) var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : #01426b;
	}
	#flow h3{
		font-size : 2.4rem;
	}
	#flow h3::before{
		left : calc( -106 * 100% / 1094 );
		padding-top : calc( 2 var( --remBase ) );
		font-size : 2rem;
	}
	#flow p{
		margin-top : calc( ( 21 - 5 ) var( --remBase ) );
		font-size : 1.8rem;
		line-height : calc( 28 / 18 );
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faq details{
	background-color : white;
}
#faq summary{
	display : block;
	cursor: pointer;
	list-style : none;
}
#faq summary::-webkit-details-marker{
	display : none;
}
#faq summary{
	position : relative;
}
#faq summary::before , #faq summary::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
}
#faq summary span{
	display : grid;
	align-items : start;
	justify-content : space-between;
	font-weight : 500;
}
#faq summary span::after{
	display : block;
	font-size : 0;
	content : "";
}
#faq .answer{
	display : grid;
	grid-template-columns : 1fr;
}
#faq .answer > div{
	overflow : hidden;
}
#faq details:not( .is-open ) summary{
	color : #01426b;
	background-color : white;
}
#faq details:not( .is-open ) summary::before , #faq details:not( .is-open ) summary::after{
	background-color : white;
}
#faq details:not( .is-open ) summary::after{
	rotate : 90deg;
}
#faq details:not( .is-open ) summary span::after{
	background-color : #008cdc;
}
#faq details:not( .is-open ) .answer{
	grid-template-rows : 0fr;
}
#faq details.is-open summary{
	color : white;
	background-color : #008cdc;
}
#faq details.is-open summary::before , #faq details.is-open summary::after{
	background-color : #008cdc;
}
#faq details.is-open summary::after{
	rotate : 0deg;
}
#faq details.is-open summary span::after{
	background-color : white;
}
#faq details.is-open .answer{
	grid-template-rows : 1fr;
}
@media screen and ( width <= 768px ){
	#faq{
		padding-bottom : calc( 47 var( --remBase ) );
		padding-top: 7.9rem;
	}
	#faq .faqList{
		margin-top : calc( 41 var( --remBase ) );
	}
	#faq .faqList > div + div , #faq .faqList details + details{
		margin-top : calc( 30 var( --remBase ) );
	}
	#faq details{
		filter : drop-shadow( 0 0 calc( 20 var( --remBase ) ) color-mix( in sRGB , black 20% , transparent ) );
	}
	#faq summary{
		padding-block : calc( 24 var( --remBase ) );
		padding-left : calc( 28 var( --percentBase ) );
		padding-right : calc( 22 var( --percentBase ) );
	}
	#faq summary::before , #faq summary::after{
		top : calc( 43 var( --remBase ) );
		right : calc( 34.5 var( --percentBase ) );
		width : calc( 15 var( --percentBase ) );
		height : calc( 2 var( --remBase ) );
	}
	#faq summary span{
		grid-template-columns : 1fr calc( 40 * 100% / 620 );
		column-gap : calc( 40 * 100% / 620 );
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
	#faq summary span::after{
		height : calc( 40 var( --remBase ) );
	}
	#faq .answer div{
		padding-inline : calc( 28 var( --percentBase ) );
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
	#faq details.is-open .answer > div{
		padding-top : calc( ( 30 - 6 ) var( --remBase ) );
		padding-bottom : calc( ( 32 - 6 ) var( --remBase ) );
	}
	#faq .link01{
		--beforeWidth : 21;
		--Link01Width : 446;
		text-decoration: none;
		--columnGapWidth : 11;
		width : calc( var( --Link01Width ) var( --percentBase ) );
		height : calc( 75 var( --remBase ) );
		margin-top : calc( 41 var( --remBase ) );
		font-size : 2.7rem;
	}
}
@media print , screen and ( width > 768px ){
	#faq{
		/* padding-bottom : calc( 80 var( --remBase ) ); */
		padding-bottom: 6rem;
		padding-top: 8rem;
	}
	#faq .faqList{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 570 var( --percentBase ) ) );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 42 var( --remBase ) );
	}
	#faq details{
		filter : drop-shadow( 0 0 calc( 20 var( --remBase ) ) color-mix( in sRGB , black 20% , transparent ) );
	}
	#faq details + details{
		margin-top : calc( 30 var( --remBase ) );
	}
	#faq summary{
		padding-block : calc( 16 var( --remBase ) );
		padding-left : calc( 20 * 100% / 570 );
		padding-right : calc( 16 * 100% / 570 );
	}
	#faq summary::before , #faq summary::after{
		top : calc( 29 var( --remBase ) );
		right : calc( 20 * 100% / 570 );
		width : calc( 20 * 100% / 570 );
		height : calc( 2 var( --remBase ) );
	}
	#faq summary span{
		grid-template-columns : 1fr calc( 28 * 100% / 534 );
		column-gap : calc( 28 * 100% / 534 );
		padding-top : calc( 3.5 var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 21 / 16 );
	}
	#faq summary span::after{
		height : calc( 28 var( --remBase ) );
		margin-top : calc( -3.5 var( --remBase ) );
	}
	#faq .answer div{
		padding-left : calc( 20 * 100% / 570 );
		padding-right : calc( 24 * 100% / 570 );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#faq details.is-open .answer > div{
		padding-block : calc( ( 21 - 4 ) var( --remBase ) );
		font-family: "Noto Sans JP", sans-serif;
	}
	#faq .link01{
		--Link01Width : 304;
		--columnGapWidth : 10;
		width : calc( var( --Link01Width ) var( --percentBase ) );
		height : calc( 50 var( --remBase ) );
		margin-top : calc( 43 var( --remBase ) );
		font-size : 1.8rem;
		text-decoration: none;
		font-family: "Noto Sans JP", sans-serif;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faq summary{
		transition : background var( --transitionBase );
	}
	#faq summary::before{
		transition : background var( --transitionBase );
	}
	#faq summary::after{
		transition : background var( --transitionBase ) , rotate var( --transitionBase );
	}
	#faq summary span{
		transition : color var( --transitionBase );
		/* font-size: 1.6rem; */
		/* font-weight: 700; */
		font-family: "Noto Sans JP", sans-serif;
	}
	#faq summary span::after{
		transition : background var( --transitionBase );
	}
	#faq .answer{
		transition : grid-template-rows var( --transitionBase );
	}
	#faq .answer > div{
		transition : padding var( --transitionBase );
	}
}

/* --------------------------------------------
CAMPAIGN
--------------------------------------------- */
#campaign{
	background-color : #d5e8f4;
}
#campaign > div{
	position : relative;
}
#campaign > div::before{
	position : absolute;
	top : 0;
	left : calc( var( --percentBase ) );
	left : 0;
	display : block;
	height : 100%;
	content : "";
	background-color : #01426b;
}
#campaign h2{
	font-weight : 700;
	letter-spacing : .1em;
}
#campaign p:nth-of-type( 1 ){
	font-weight : 700;
	color : #1a4b8d;
	letter-spacing : .1em;
}
#campaign p:nth-of-type( 1 ) strong{
	font-weight : 700;
}
#campaign p:nth-of-type( 1 ) .color{
	color : #008cdc;
}
#campaign p:nth-of-type( 1 ) span{
	letter-spacing : .1em;
}
#campaign p:nth-of-type( 2 ){
	color : color-mix( in srgb , #2b2b2b 70% , transparent );
	letter-spacing : .1em;
}
#campaign a{
	display : block;
	background-color : #fff;
	border : solid 1px #c9c9c9;
}
#campaign a span{
	position : relative;
	z-index : 0;
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	font-weight : 700;
	color : white;
	text-align : center;
	text-indent : .1em;
	text-shadow : 0 0 calc( 10 var( --remBase ) ) color-mix( in sRGB , black 20% , transparent );
	letter-spacing : .1em;
	background-image : linear-gradient( -87deg , rgb( 255 144 13 ) 99% , rgb( 251 136 7 ) 99% , rgb( 246 127 0 ) 100% );
}
#campaign a span::before{
	position : absolute;
	inset : 0;
	z-index : -1;
	display : block;
	font-size : 0;
	content : "";
	background-image : linear-gradient( -87deg , rgb( 246 127 0 ) 100% , rgb( 251 136 7 ) 99% , rgb( 255 144 13 ) 99% );
	opacity : 0;
}
@media screen and ( width <= 768px ){
	#campaign{
		padding-top : calc( ( 41 - 9.5 ) var( --remBase ) );
		padding-bottom : calc( 39 var( --remBase ) );
	}
	#campaign > div{
		padding-left : calc( 31 var( --percentBase ) );
	}
	#campaign > div::before{
		top : calc( ( 9.5 + 1 ) var( --remBase ) );
		width : calc( 8 var( --percentBase ) );
		height : calc( 122 var( --remBase ) );
	}
	#campaign > div h2{
		font-size : 3rem;
		line-height : calc( 49 / 30 );
	}
	#campaign p:nth-of-type( 1 ){
		margin-top : calc( ( 17 - 9.5 - 2.5 - 5 ) var( --remBase ) );
		font-size : 4rem;
		line-height : calc( 49 / 40 );
	}
	#campaign p:nth-of-type( 1 ) .number{
		font-size : 4.4rem;
		line-height : calc( 49 / 44 );
	}
	#campaign p:nth-of-type( 2 ){
		margin-top : calc( ( 18 - 2.5 - 12.5 - 5 ) var( --remBase ) );
		font-size : 2.4rem;
		line-height : calc( 49 / 24 );
	}
	#campaign a{
		height : calc( 112 var( --remBase ) );
		padding-block : calc( 11 var( --remBase ) );
		padding-inline : calc( 11 var( --percentBase ) );
		margin-top : calc( ( 29 - 12.5 ) var( --remBase ) );
	}
	#campaign a span{
		font-size : 3rem;
		line-height : calc( 46.86 / 30 );
	}
}
@media print , screen and ( width > 768px ){
	#campaign{
		display : grid;
		grid-template-columns : repeat( 2 , 1fr );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 37 var( --remBase ) );
		padding-bottom : calc( 38 var( --remBase ) );
	}
	#campaign > div{
		height : calc( 100 var( --remBase ) );
		padding-left : calc( 21 * 100% / 600 );
	}
	#campaign > div::before{
		width : calc( 4 var( --remBase ) );
	}
	#campaign > div h2{
		margin-top : calc( ( 10 - 14.5 ) var( --remBase ) );
		font-size : 2rem;
		line-height : 2.45;
	}
	#campaign p:nth-of-type( 1 ){
		margin-top : calc( ( 10 - 14.5 - 9.265 ) var( --remBase ) );
		font-size : 3.0469999999999997rem;
		line-height : calc( 49 / 30.47 );
	}
	#campaign p:nth-of-type( 1 ) nth .number{
		font-size : 3.4rem;
		line-height : calc( 49 / 34 );
	}
	#campaign p:nth-of-type( 2 ){
		margin-top : calc( ( 9 - 9.265 - 18.5 ) var( --remBase ) );
		font-size : 1.2rem;
		line-height : calc( 49 / 12 );
	}
	#campaign a{
		height : calc( 100 var( --remBase ) );
		padding-block : calc( 9 var( --remBase ) );
		padding-inline : calc( 9 * 100% / 600 );
	}
	#campaign a span{
		font-size : 2.6rem;
		line-height : calc( 41.81 / 26 );
	}
}
@media ( hover : hover ){
	#campaign a:hover span::before{
		opacity : 1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#campaign a span::before{
		transition : opacity var( --transitionBase );
	}
}

/* --------------------------------------------
LINKS
--------------------------------------------- */
#links{
	display : grid;
	background-color : #a8c9df;
}
#links a{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	overflow : hidden;
}
#links a span{
	position : relative;
	z-index : 3;
	display : block;
	font-weight : 700;
}
#links a::before{
	position : absolute;
	inset : 0;
	z-index : 1;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	scale : 1;
}
#links a::after{
	position : absolute;
	inset : 0;
	z-index : 3;
	display : block;
	margin : auto;
	font-size : 0;
	content : "";
	border : solid 1px color-mix( in sRGB , white 30% , transparent );
}
#links a:not( .auto_quo ) span{
	text-shadow : 0 0 calc( 10 var( --remBase ) ) color-mix( in sRGB , black 10% , transparent );
}
#links a.auto_quo span + span{
	text-shadow : 0 0 calc( 10 var( --remBase ) ) color-mix( in sRGB , black 10% , transparent );
}
#links .kibinsei span:nth-of-type( 1 ){
	color : #d6bdae;
	letter-spacing : .1em;
}
#links .kibinsei span:nth-of-type( 2 ){
	color : white;
	letter-spacing : .08em;
}
#links .kibinsei::before{
	background-image : image-set( url( "../images/home/links/bg01.avif" ) type( "image/avif" ) , url( "../images/home/links/bg01.webp" ) type( "image/webp" ) );
}
#links .contract span{
	letter-spacing : .08em;
}
#links .contract span:nth-of-type( 1 ){
	color : #d6bdae;
}
#links .contract span:nth-of-type( 2 ){
	color : white;
}
#links .contract::before{
	background-image : image-set( url( "../images/home/links/bg02.avif" ) type( "image/avif" ) , url( "../images/home/links/bg02.webp" ) type( "image/webp" ) );
}
#links .manual span{
	letter-spacing : .08em;
}
#links .manual span:nth-of-type( 1 ){
	color : #d6bdae;
}
#links .manual span:nth-of-type( 2 ){
	color : white;
}
#links .manual::before{
	background-image : image-set( url( "../images/home/links/bg03.avif" ) type( "image/avif" ) , url( "../images/home/links/bg03.webp" ) type( "image/webp" ) );
}
#links .auto_quo span{
	text-align : right;
	letter-spacing : .08em;
}
#links .auto_quo span:nth-of-type( 1 ){
	color : #aecad6;
}
#links .auto_quo span:nth-of-type( 2 ){
	color : white;
}
#links .auto_quo span:nth-of-type( 3 ){
	color : #d6bdae;
}
#links .auto_quo::before{
	background-image : image-set( url( "../images/home/links/bg04.avif" ) type( "image/avif" ) , url( "../images/home/links/bg04.webp" ) type( "image/webp" ) );
}
@media screen and ( width <= 768px ){
	#links{
		grid-template-columns : repeat( 2 , calc( 326 var( --percentBase ) ) );
		grid-auto-rows : calc( 182 var( --remBase ) );
		row-gap : calc( 21 var( --remBase ) );
		justify-content : space-between;
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 41 var( --remBase ) );
	}
	#links a::after{
		width : calc( 306 * 100% / 326 );
		height : calc( 162 var( --remBase ) );
	}
	#links .kibinsei{
		padding-top : calc( ( 60 - 9.985 ) var( --remBase ) );
		padding-left : calc( 142 * 100% / 326 );
	}
	#links .kibinsei span:nth-of-type( 1 ){
		font-size : 3.6rem;
		line-height : calc( 55.97 / 36 );
	}
	#links .kibinsei span:nth-of-type( 2 ){
		margin-top : calc( ( 10 - 9.985 - 16.485 - 2 ) var( --remBase ) );
		font-size : 2.3rem;
		line-height : calc( 55.97 / 23 );
	}
	#links .contract{
		padding-top : calc( ( 59 - 4 ) var( --remBase ) );
		padding-left : calc( 144 * 100% / 326 );
	}
	#links .contract span:nth-of-type( 1 ){
		font-size : 2.056rem;
		line-height : calc( 28.56 / 20.56 );
	}
	#links .contract span:nth-of-type( 2 ){
		font-size : 3.655rem;
	}
	#links .manual{
		padding-top : calc( ( 61 - 4 ) var( --remBase ) );
		padding-left : calc( 144 * 100% / 326 );
	}
	#links .manual span:nth-of-type( 1 ){
		font-size : 2.056rem;
		line-height : calc( 28.56 / 20.56 );
	}
	#links .manual span:nth-of-type( 2 ){
		font-size : 3.655rem;
	}
	#links .auto_quo{
		padding-top : calc( ( 47 - 11.42 ) var( --remBase ) );
	}
	#links .auto_quo span{
		padding-right : calc( 32 * 100% / 326 );
		margin-right : -.08em;
	}
	#links .auto_quo span:nth-of-type( 1 ){
		font-size : 1.828rem;
		line-height : calc( 41.12 / 18.28 );
	}
	#links .auto_quo span:nth-of-type( 2 ){
		margin-top : calc( ( 8 - 11.42 - 3.43 ) var( --remBase ) );
		font-size : 3.655rem;
		line-height : calc( 43.41 / 36.55 );
	}
	#links .auto_quo span:nth-of-type( 3 ){
		font-size : 2.056rem;
		line-height : calc( 31.98 / 20.56 );
	}
}
@media print , screen and ( width > 768px ){
	#links{
		grid-template-rows : calc( 160 var( --remBase ) );
		grid-template-columns : repeat( 4 , calc( 285 var( --percentBase ) ) );
		justify-content : space-between;
		padding-block : calc( 70 var( --remBase ) );
	}
	#links a::after{
		width : calc( 265 * 100% / 285 );
		height : calc( 140 var( --remBase ) );
	}
	#links .kibinsei{
		padding-top : calc( ( 52 - 8.5 ) var( --remBase ) );
		padding-left : calc( 124 * 100% / 285 );
	}
	#links .kibinsei span:nth-of-type( 1 ){
		font-size : 3.2rem;
		line-height : calc( 49 / 32 );
	}
	#links .kibinsei span:nth-of-type( 2 ){
		margin-top : calc( ( 10 - 8.5 - 14.5 - 5 ) var( --remBase ) );
		font-size : 2rem;
		line-height : 2.45;
	}
	#links .contract{
		padding-top : calc( ( 52 - 3.5 ) var( --remBase ) );
		padding-left : calc( 126 * 100% / 285 );
	}
	#links .contract span:nth-of-type( 1 ){
		font-size : 1.8rem;
		line-height : calc( 25 / 18 );
	}
	#links .contract span:nth-of-type( 2 ){
		font-size : 3.2rem;
	}
	#links .manual{
		padding-top : calc( ( 54 - 3.5 ) var( --remBase ) );
		padding-left : calc( 126 * 100% / 285 );
	}
	#links .manual span:nth-of-type( 1 ){
		font-size : 1.8rem;
		line-height : calc( 25 / 18 );
	}
	#links .manual span:nth-of-type( 2 ){
		font-size : 3.2rem;
	}
	#links .auto_quo{
		padding-top : calc( ( 41 - 10 ) var( --remBase ) );
	}
	#links .auto_quo span{
		padding-right : calc( 26 * 100% / 285 );
		margin-right : -.08em;
	}
	#links .auto_quo span:nth-of-type( 1 ){
		font-size : 1.6rem;
		line-height : 2.25;
	}
	#links .auto_quo span:nth-of-type( 2 ){
		margin-top : calc( ( 7 - 10 - 3 ) var( --remBase ) );
		font-size : 3.2rem;
		line-height : calc( 38 / 32 );
	}
	#links .auto_quo span:nth-of-type( 3 ){
		font-size : 1.8rem;
		line-height : calc( 28 / 18 );
	}
}
@media ( hover : hover ){
	#links a:hover::before{
		scale : 1.1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#links a::before{
		transition : scale var( --transitionBase );
	}
}