@charset "UTF-8";

/* --------------------------------------------
MV
--------------------------------------------- */
#mv{
	display : grid;
	grid-template-columns : 100%;
	grid-auto-flow : row;
	@media screen and ( width < 768px ) and ( max-aspect-ratio : 1/2 ){
		grid-template-rows : auto 1fr;
		height : calc( 100dvh - var( --headerHeight ) );
	}
	@media print , screen and ( width >= 768px ) and ( height > 880px ){
		grid-template-rows : auto 1fr;
		height : calc( 100dvh - var( --headerHeight ) );
	}
}

/* --------------------------------------------
HERO
--------------------------------------------- */
#hero{
	display : flex;
	flex-direction : row-reverse;
	align-items : start;
	justify-content : center;
	h1 , p , button{
		> span{
			writing-mode : vertical-rl;
			text-orientation : upright;
		}
	}
	h1{
		font-weight : 500;
		line-height : 1.05;
		letter-spacing : .02em;
	}
	> p{
		align-items : start;
		> span{
			position : relative;
			line-height : 1.11;
			color : var( --orange );
			letter-spacing : .02em;
			&::before{
				position : absolute;
				top : 0;
				right : 0;
				display : block;
				height : 100%;
				content : "";
				background-repeat : no-repeat;
				background-position : 0 0;
				background-size : 100% auto;
			}
		}
	}
	p{
		display : flex;
		flex-direction : row-reverse;
	}
	.texts{
		p{
			align-items : stretch;
		}
		span{
			line-height : 1.08;
		}
	}
	button{
		display : grid;
		grid-auto-flow : row;
		justify-content : center;
		width : fit-content;
		height : fit-content;
		background-color : white;
		span{
			justify-self : center;
			color : var( --orange );
		}
		&::after{
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background : url( "../images/ui/icon/play01.svg" ) center / contain no-repeat;
		}
	}
	@media screen and ( width < 768px ){
		column-gap : calc( 24 * var( --contentBase ) );
		padding-block : calc( 80 * var( --remBase ) );
		h1{
			font-size : calc( 14 * var( --remBase ) );
		}
		.texts{
			display : flex;
			flex-direction : row-reverse;
			> p:not( :first-of-type ){
				display : none;
			}
		}
		> p{
			column-gap : calc( 14 * var( --remBase ) );
			> span{
				padding-right : calc( 8 * var( --remBase ) );
				font-size : calc( 26 * var( --remBase ) );
				&::before{
					width : calc( 2 * var( --remBase ) );
				}
				&:nth-of-type( 1 ){
					&::before{
						background-image : url( "../images/top/mv/border01_sp.svg" );
					}
				}
				&:nth-of-type( 2 ){
					&::before{
						background-image : url( "../images/top/mv/border02_sp.svg" );
					}
				}
			}
		}
		.texts{
			display : grid;
			p{
				grid-row : 1;
				grid-column : 1;
				column-gap : calc( 13 * var( --remBase ) );
			}
			span{
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		button{
			row-gap : calc( 8 * var( --remBase ) );
			padding-inline : calc( 6 * var( --remBase ) );
			padding-top : calc( 10 * var( --remBase ) );
			padding-bottom : calc( 6 * var( --remBase ) );
			border-radius : calc( 4 * var( --remBase ) );
			span{
				font-size : calc( 14 * var( --remBase ) );
			}
			&::after{
				height : calc( 24 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		column-gap : calc( 64 * var( --contentBase ) );
		padding-top : calc( 40 * var( --remBase ) );
		padding-bottom : calc( 28 * var( --remBase ) );
		> p{
			> span{
				&:nth-of-type( 1 ){
					&::before{
						background-image : url( "../images/top/mv/border01_pc.svg" );
					}
				}
				&:nth-of-type( 2 ){
					&::before{
						background-image : url( "../images/top/mv/border02_pc.svg" );
					}
				}
			}
		}
		.texts{
			display : flex;
			flex-direction : row-reverse;
			align-items : stretch;
		}
	}
	@media print , screen and ( width >= 768px ) and ( height <= 880px ){
		h1{
			font-size : calc( 18 * var( --remBase ) );
		}
		> p{
			column-gap : calc( 28 * var( --remBase ) );
			> span{
				padding-right : calc( 13 * var( --remBase ) );
				font-size : calc( 38 * var( --remBase ) );
				&::before{
					width : calc( 3 * var( --remBase ) );
				}
			}
		}
		.texts{
			column-gap : calc( 40 * var( --remBase ) );
			p{
				column-gap : calc( 20 * var( --remBase ) );
			}
			span{
				font-size : calc( 16 * var( --remBase ) );
			}
		}
		button{
			row-gap : calc( 9 * 100vw / 1352 );
			padding-inline : calc( 9.5 * var( --remBase ) );
			padding-top : calc( 11 * var( --remBase ) );
			padding-bottom : calc( 10 * var( --remBase ) );
			border-radius : calc( 4 * 100vw / 1352 );
			span{
				font-size : calc( 16 * var( --remBase ) );
			}
			&::after{
				height : calc( 28 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ) and ( height > 880px ){
		h1{
			font-size : calc( 18 * 100vw / 1352 );
		}
		> p{
			column-gap : calc( 28 * 100vw / 1352 );
			span{
				padding-right : calc( 13 * 100vw / 1352 );
				font-size : calc( 38 * 100vw / 1352 );
				&::before{
					width : calc( 3 * 100vw / 1352 );
				}
			}
		}
		.texts{
			column-gap : calc( 40 * 100vw / 1352 );
			p{
				column-gap : calc( 20 * 100vw / 1352 );
			}
			span{
				font-size : calc( 16 * 100vw / 1352 );
			}
		}
		button{
			row-gap : calc( 9 * var( --remBase ) );
			padding-inline : calc( 9.5 * 100vw / 1352 );
			padding-top : calc( 11 * 100vw / 1352 );
			padding-bottom : calc( 10 * 100vw / 1352 );
			border-radius : calc( 4 * var( --remBase ) );
			span{
				font-size : calc( 16 * 100vw / 1352 );
			}
			&::after{
				height : calc( 28 * 100vw / 1352 );
			}
		}
	}
}

/* --------------------------------------------
SLIDER01
--------------------------------------------- */
#slider01{
	font-size : 0;
	@media screen and ( width < 768px ) and ( min-aspect-ratio : 1/2 ){
		picture{
			img{
				height : calc( 350 * var( --remBase ) );
			}
		}
	}
	@media screen and ( width < 768px ) and ( max-aspect-ratio : 1/2 ){
		.splide__track , .splide__list , .splide__slid , picture{
			height : 100%;
		}
		picture{
			img{
				height : 100%;
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 8 * var( --remBase ) );
	}
	@media print , screen and ( width >= 768px ) and ( height <= 880px ){
		picture{
			img{
				height : calc( 400 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ) and ( height > 880px ){
		.splide__track , .splide__list , .splide__slid , picture{
			height : 100%;
		}
		picture{
			img{
				height : 100%;
			}
		}
	}
}
dialog{
	position : fixed;
	inset : 0;
	align-items : center;
	justify-content : center;
	width : 100%;
	height : 100dvh;
	padding : 0;
	margin : 0;
	margin : auto;
	border : 0;
	opacity : 0;
	transform : scaleY( 0 );
	transform-origin : center;
	animation : scale-down .75s cubic-bezier( .6 , 0 , 0 , 1 ) forwards;
	&::backdrop{
		background-color : black;
	}
	&[open]{
		display : grid;
		animation : scale-up .75s cubic-bezier( .6 , 0 , 0 , 1 ) forwards;
	}
	button{
		position : fixed;
		top : calc( 20 * var( --remBase ) );
		right : calc( 20 * var( --viewportBase ) );
		z-index : 1;
		font-family : Helvetica , Arial , sans-serif;
		font-size : calc( 16 * var( --remBase ) );
		color : white;
	}
	.videoWrapper{
		width : min( 100% , 1920px );
		max-height : 100dvh;
		aspect-ratio : 1920 / 1080;
	}
	video{
		width : 100%;
		height : 100%;
		object-fit : contain;
	}
}
dialog , dialog::backdrop{
	transition : display .75s allow-discrete , overlay .75s allow-discrete;
}

/* 表示された瞬間のアニメーション起点 */
@starting-style{
	dialog[open]{
		opacity : 0;
		transform : scaleY( 0 );
	}
}
@keyframes scale-up{
	from{
		opacity : 0;
		transform : scaleY( 0 );
	}
	to{
		opacity : 1;
		transform : scaleY( 1 );
	}
}
@keyframes scale-down{
	from{
		opacity : 1;
		transform : scaleY( 1 );
	}
	to{
		opacity : 0;
		transform : scaleY( 0 );
	}
}