@charset "UTF-8";

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	font-size : 0;
	.splide__slide{
		a{
			display : block;
		}
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	.splide__arrow{
		position : absolute;
		top : 50%;
		z-index : 1;
		pointer-events : none;
		visibility : hidden;
		opacity : 0;
		translate : 0 -50%;
		svg{
			aspect-ratio : 1;
			fill : color-mix( in sRGB , white 50% , transparent );
			stroke : none;
		}
	}
	&:hover{
		.splide__arrow{
			pointer-events : auto;
			visibility : visible;
			opacity : 1;
		}
	}
	.splide__arrow--prev{
		rotate : 180deg;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 11 * var( --remBase ) );
		.splide__arrow--prev{
			left : calc( 5 * var( --contentBase ) );
		}
		.splide__arrow--next{
			right : calc( 5 * var( --contentBase ) );
		}
		svg{
			height : calc( 16 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 34 * var( --remBase ) );
		.splide__arrow--prev{
			left : calc( 20 * var( --contentBase ) );
		}
		.splide__arrow--next{
			right : calc( 20 * var( --contentBase ) );
		}
		svg{
			height : calc( 40 * var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#mv .splide__arrow{
		transition : opacity var( --transitionBase );
	}
}

/* --------------------------------------------
BANNER
--------------------------------------------- */
#banner01{
	display : block;
	width : fit-content;
	margin-inline : auto;
	@media screen and ( width <= 768px ){
		margin-top : calc( 40 * var( --remBase ) );
		img{
			height : calc( 72 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 31 * var( --remBase ) );
		img{
			height : calc( 154 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
REASON
--------------------------------------------- */
#reason{
	p{
		em{
			font-weight : 700;
			color : #ff4040;
		}
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 16 * var( --remBase ) );
		margin-top : calc( 10 * var( --remBase ) );
		h2{
			img{
				height : calc( 31 * var( --remBase ) );
			}
		}
		> ul{
			margin-top : calc( 8 * var( --remBase ) );
			> li + li{
				margin-top : calc( 19 * var( --remBase ) );
			}
		}
		p{
			font-size : calc( 9 * var( --remBase ) );
			line-height : calc( 14 / 9 );
			em{
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 45 * var( --remBase ) );
		margin-top : calc( 37 * var( --remBase ) );
		h2{
			img{
				height : calc( 67 * var( --remBase ) );
			}
		}
		> ul{
			margin-top : calc( 39 * var( --remBase ) );
			> li + li{
				margin-top : calc( 68 * var( --remBase ) );
			}
		}
		p{
			font-size : calc( 17 * var( --remBase ) );
			line-height : calc( 26 / 17 );
			em{
				font-size : calc( 23 * var( --remBase ) );
				line-height : calc( 35 / 23 );
			}
		}
	}
}
#reason01{
	@media screen and ( width <= 768px ){
		display : grid;
		grid-template-columns : auto 1fr;
		column-gap : calc( 5 * var( --contentBase ) );
		align-items : center;
		.texts{
			display : contents;
		}
		picture{
			grid-row : 1;
			grid-column : 1;
			img{
				height : calc( 66 * var( --remBase ) );
			}
		}
		.texts{
			> p:nth-of-type( 1 ){
				grid-row : 1;
				grid-column : 2;
			}
			> p + p{
				grid-column : 1/-1;
			}
			p:nth-of-type( 2 ){
				margin-top : calc( 20 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : auto 1fr;
		column-gap : calc( 40 * var( --contentBase ) );
		align-items : center;
		img{
			height : calc( 192 * var( --remBase ) );
		}
		p + p{
			margin-top : 1lh;
		}
	}
}