@charset "UTF-8";

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	background-repeat : no-repeat;
	hgroup{
		p{
			font-family : "Zen Kaku Gothic New" , sans-serif;
			font-weight : 700;
			color : var( --blue );
			> span:first-of-type{
				position : relative;
				&::before{
					position : absolute;
					bottom : 0;
					left : 0;
					width : 100%;
					font-size : 0;
					content : "";
					background-color : color-mix( in sRGB , var( --cyan01 ) 30% , transparent );
				}
			}
		}
	}
	.count{
		width : auto;
		aspect-ratio : 1;
		font-family : "Zen Kaku Gothic New" , sans-serif;
		font-weight : 700;
		color : var( --blue );
		background-color : #fff;
		border-radius : 50%;
		> span{
			&:nth-of-type( 1 ){
				display : block;
				text-align : center;
			}
			&:nth-of-type( 2 ){
				position : relative;
				display : grid;
				grid-auto-flow : column;
				align-items : end;
				justify-content : center;
				&::before , &::after{
					display : block;
					width : auto;
					aspect-ratio : 22/39;
					font-size : 0;
					content : "";
					background-repeat : no-repeat;
					background-position : center;
					background-size : contain;
				}
				&::before{
					background-image : url( "../images/top/mv/parts01.svg" );
				}
				&::after{
					background-image : url( "../images/top/mv/parts02.svg" );
				}
				> span{
					position : relative;
					z-index : 0;
					display : grid;
					grid-auto-flow : column;
					align-items : baseline;
					justify-content : center;
					span{
						font-family : "Noto Sans JP" , sans-serif;
						font-weight : 800;
						font-feature-settings : "palt" on;
						letter-spacing : -.05em;
					}
					&::before{
						position : absolute;
						z-index : -1;
						display : block;
						font-size : 0;
						content : "";
						background-color : color-mix( in sRGB , white 30% , transparent );
					}
				}
			}
			&:nth-of-type( 3 ){
				display : block;
				text-align : center;
			}
		}
	}
	@supports (color: color-mix(in lch, red, blue)){
		.count{
			background-color : color-mix( in sRGB , var( --cyan01 ) 90% , transparent );
		}
	}
	ul button{
		display : grid;
		grid-template-columns : auto auto 1fr;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		font-family : "Zen Kaku Gothic New" , sans-serif;
		font-weight : 700;
		background-color : white;
		&::before , &::after{
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
		}
		&::before{
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
		&::after{
			justify-self : end;
			background : url( "../images/top/mv/arrow.svg" ) left top / contain no-repeat;
		}
		> span{
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 27 / 20 );
			span{
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 27 / 16 );
			}
		}
	}
	li:nth-child( 1 ){
		button{
			&::before{
				background-image : url( "../images/top/mv/bag.svg" );
			}
		}
	}
	li:nth-child( 2 ){
		button{
			&::before{
				background-image : url( "../images/top/mv/building.svg" );
			}
		}
	}
	li:nth-child( 3 ){
		button{
			&::before{
				background-image : url( "../images/top/mv/light.svg" );
			}
		}
	}
	form{
		label{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			font-weight : 700;
			color : white;
			&::after{
				display : block;
				width : auto;
				aspect-ratio : 10/8;
				font-size : 0;
				content : "";
				background : url( "../images/top/mv/down.svg" ) center / contain no-repeat;
			}
		}
		.inputBox{
			display : grid;
			grid-template-columns : 1fr auto;
			overflow : hidden;
			background-color : white;
			input{
				height : 100%;
				font-weight : 700;
				&::placeholder{
					color : #abb8c3;
				}
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 24 * var( --remBase ) );
		background-position : 0 0;
		background-size : 100% auto;
		hgroup{
			padding-left : calc( 16 * var( --viewportBase ) );
			p{
				font-size : calc( 26.72 * var( --remBase ) );
				line-height : calc( 39 / 26.72 );
				> span:nth-of-type( 1 ){
					&::before{
						height : calc( 9.62 * var( --remBase ) );
					}
				}
				> span:nth-of-type( 2 ){
					font-size : calc( 23.51 * var( --remBase ) );
					line-height : calc( 34 / 23.51 );
				}
			}
			h1{
				img{
					height : calc( 48.17 * var( --remBase ) );
				}
			}
		}
		.count{
			height : calc( 131 * var( --remBase ) );
			padding-top : calc( 29.48 * var( --remBase ) );
			margin-top : calc( 15.83 * var( --remBase ) );
			margin-left : calc( 21 * var( --viewportBase ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 9.82 * var( --remBase ) );
					line-height : 1.2;
				}
				&:nth-of-type( 2 ){
					&::before , &::after{
						height : calc( 24.95 * var( --remBase ) );
					}
					&::before{
						margin-right : calc( 8.89 * var( --remBase ) );
					}
					&::after{
						margin-left : calc( 5.57 * var( --remBase ) );
					}
					> span{
						font-size : calc( 16.72 * var( --remBase ) );
						&::before{
							bottom : 0;
							left : calc( -4.48 * var( --remBase ) );
							width : calc( 100% + ( 4.48 + 1.64 ) * var( --remBase ) );
							height : calc( 11.79 * var( --remBase ) );
						}
						span{
							font-size : calc( 29.72 * var( --remBase ) );
						}
					}
				}
				&:nth-of-type( 3 ){
					margin-top : calc( 7.33 * var( --remBase ) );
					font-size : calc( 9.17 * var( --remBase ) );
					line-height : 1.5;
				}
			}
		}
		.box{
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 20 * var( --viewportBase ) );
			margin-top : calc( 141 * var( --remBase ) );
			background-color : var( --cyan01 );
		}
		li + li{
			margin-top : calc( 10 * var( --remBase ) );
		}
		ul{
			button{
				column-gap : calc( 10 * var( --contentBase ) );
				width : 100%;
				height : calc( 43 * var( --remBase ) );
				padding-inline : calc( 20 * var( --contentBase ) );
				border-radius : calc( 5 * var( --remBase ) );
				&::before{
					height : calc( 24 * var( --remBase ) );
				}
				&::after{
					height : calc( 25 * var( --remBase ) );
				}
			}
		}
		form{
			margin-top : calc( 10 * var( --remBase ) );
			label{
				column-gap : calc( 8 * var( --contentBase ) );
				font-size : calc( 12 * var( --remBase ) );
				line-height : calc( 16 / 12 );
				&::after{
					height : calc( 5.58 * var( --remBase ) );
				}
			}
			.inputBox{
				height : calc( 35 * var( --remBase ) );
				margin-top : calc( 10 * var( --remBase ) );
				border-radius : calc( 5 * var( --remBase ) );
				input{
					padding-inline : calc( 20 * var( --remBase ) );
					font-size : calc( 14 * var( --remBase ) );
					line-height : calc( 19 / 14 );
				}
				button{
					margin-inline : calc( 20 * var( --remBase ) );
					img{
						height : calc( 18.1 * var( --remBase ) );
					}
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		height : calc( 540 * var( --remBase ) );
		padding-inline : calc( ( 100% - 1020px ) / 2 );
		padding-top : calc( 104 * var( --remBase ) );
		background-image : image-set( url( "../images/top/mv/bg_pc.avif" ) type( "image/avif" ) , url( "../images/top/mv/bg_pc.webp" ) type( "image/webp" ) );
		background-position : center;
		background-size : auto 100%;
		hgroup{
			padding-left : calc( 47 * 100% / 1020 );
			p{
				font-size : calc( 50 * var( --remBase ) );
				line-height : calc( 72 / 50 );
				> span:nth-of-type( 1 ){
					&::before{
						height : calc( 18 * var( --remBase ) );
					}
				}
				> span:nth-of-type( 2 ){
					font-size : calc( 44 * var( --remBase ) );
					line-height : calc( 64 / 44 );
				}
			}
			h1{
				img{
					height : calc( 90.14 * var( --remBase ) );
				}
			}
		}
		.count{
			position : absolute;
			top : calc( 39 * var( --remBase ) );
			left : calc( 50% + ( 365 * var( --viewportBase ) ) );
			height : calc( 200 * var( --remBase ) );
			padding-top : calc( 45 * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 15 * var( --remBase ) );
					line-height : 1.2;
				}
				&:nth-of-type( 2 ){
					&::before , &::after{
						height : calc( 38.09 * var( --remBase ) );
					}
					&::before{
						margin-right : calc( 13.57 * var( --remBase ) );
					}
					&::after{
						margin-left : calc( 9.17 * var( --remBase ) );
					}
					> span{
						font-size : calc( 25.52 * var( --remBase ) );
						&::before{
							bottom : 0;
							left : calc( -6.83 * var( --remBase ) );
							width : calc( 100% + ( 6.83 + 3.17 ) * var( --remBase ) );
							height : calc( 18 * var( --remBase ) );
						}
						span{
							font-size : calc( 45.37 * var( --remBase ) );
						}
					}
				}
				&:nth-of-type( 3 ){
					margin-top : calc( 12 * var( --remBase ) );
					font-size : calc( 14 * var( --remBase ) );
					line-height : 1.5;
				}
			}
		}
		.box{
			margin-top : calc( 83.86 * var( --remBase ) );
		}
		ul{
			display : grid;
			grid-template-columns : repeat( 3 , calc( 320 * 100% / 1000 ) );
			justify-content : space-between;
			width : 100%;
			padding-inline : calc( 10 * 100% / 1020 );
			padding-top : calc( 8 * var( --remBase ) );
			padding-bottom : calc( 7 * var( --remBase ) );
			background-color : color-mix( in sRGB , var( --cyan01 ) 70% , transparent );
			border-radius : calc( 13 * var( --remBase ) );
		}
		ul button{
			column-gap : calc( 10 * 100% / 276 );
			width : 100%;
			height : calc( 55 * var( --remBase ) );
			padding-left : calc( 20 * 100% / 320 );
			padding-right : calc( 24 * 100% / 320 );
			border-radius : calc( 7 * var( --remBase ) );
			&::before{
				height : calc( 30 * var( --remBase ) );
			}
			&::after{
				height : calc( 34 * var( --remBase ) );
			}
		}
		form{
			width : calc( 518 * 100% / 1020 );
			margin-inline : auto;
			margin-top : calc( 20.15 * var( --remBase ) );
			label{
				column-gap : calc( 16 * 100% / 157 );
				width : calc( 177 * 100% / 518 );
				height : calc( 30 * var( --remBase ) );
				padding-left : calc( 20 * 100% / 518 );
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 19 / 14 );
				background-color : var( --blue );
				border-radius : calc( 5 * var( --remBase ) );
				&::after{
					height : calc( 7.58 * var( --remBase ) );
				}
			}
			.inputBox{
				width : 100%;
				height : calc( 35 * var( --remBase ) );
				margin-top : calc( 4.85 * var( --remBase ) );
				border-radius : calc( 5 * var( --remBase ) );
				outline : solid calc( 2 * var( --remBase ) ) var( --blue );
				input{
					padding-inline : calc( 20 * var( --remBase ) );
					font-size : calc( 14 * var( --remBase ) );
					line-height : calc( 19 / 14 );
				}
				button{
					margin-inline : calc( 8 * var( --remBase ) );
					img{
						height : calc( 18.01 * var( --remBase ) );
					}
				}
			}
		}
	}
}
#mv{
	@media screen and ( width <= 750px ){
		background-image : image-set( url( "../images/top/mv/bg_sp.avif" ) type( "image/avif" ) , url( "../images/top/mv/bg_sp.webp" ) type( "image/webp" ) );
	}
	@media print , screen and ( width > 750px ){
		position : relative;
		z-index : 0;
		overflow-x : clip;
		&::before , &::after{
			position : absolute;
			z-index : -1;
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
		}
		&::before{
			top : 0;
			background-image : linear-gradient( 135deg , color-mix( in srgb , #a7f2ff 50% , transparent ) 0% , color-mix( in srgb , #a7f2ff 50% , transparent ) 50% , transparent 50% , transparent 100% );
		}
		&::after{
			bottom : 0;
			background-image : linear-gradient( -45deg , color-mix( in srgb , #a7f2ff 50% , transparent ) 0% , color-mix( in srgb , #a7f2ff 50% , transparent ) 50% , transparent 50% , transparent 100% );
		}
		&::before , &::after{
			height : 100vw;
		}
		&::before{
			right : calc( 50% + ( 346 * var( --viewportBase ) ) );
		}
		&::after{
			left : calc( 50% + ( 350 * var( --viewportBase ) ) );
		}
		.box{
			&::before , &::after{
				position : absolute;
				display : block;
				width : auto;
				aspect-ratio : 1;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-size : contain;
			}
			&::before{
				top : 0;
				left : 0;
				height : calc( 333 * 100vw / 1440 );
				background-image : url( "../images/top/mv/parts01_pc.svg" );
				background-position : 0 0;
			}
			&::after{
				bottom : 0;
				right : 0;
				height : calc( 322 * 100vw / 1440 );
				background-image : url( "../images/top/mv/parts02_pc.svg" );
				background-position : right bottom;
			}
		}
	}
}