@charset "UTF-8";

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
.mv{
	position : relative;
	display : grid;
	grid-template-rows : calc( 25dvh - var( --headerHeight ) ) 1fr auto 1fr 25dvh;
	align-items : center;
	justify-content : center;
	height : calc( 100dvh - var( --headerHeight ) );
	h1{
		grid-row : 3;
	}
	.border{
		position : relative;
		display : block;
		grid-row : 5;
		align-self : end;
		justify-self : center;
		width : 1px;
		height : 100%;
		overflow : hidden;
		font-size : 0;
		content : "";
		&::before{
			position : absolute;
			top : -100%;
			left : 0;
			width : 100%;
			height : 0;
			height : 100%;
			max-height : calc( 220 * var( --remBase ) );
			content : "";
			background-color : black;
		}
	}
	@media screen and ( width <= 768px ){
		row-gap : calc( 20 * var( --remBase ) );
		img{
			height : calc( 40.91 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		row-gap : calc( 40 * var( --remBase ) );
		img{
			height : calc( 107.63 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
ANIMATION
--------------------------------------------- */
:root{
	--headerDuration : 1s;
	--headerDelay : 2s;
	--navDuration : 1s;
	--navDelay : 2.25s;
	--h1Duration : 3.75s;
	--h1Delay : 1.5s;
	--borderDuration : 2s;
	--borderDelay : 0s;
	--dripDuration : 4s;
/*-----修正前
	--headerDuration : 1s;
	--headerDelay : 3s;
	--navDuration : 1s;
	--navDelay : 2s;
	--h1Duration : 3.75s;
	--h1Delay : 1.5s;
	--borderDuration : 2s;
	--dripDuration : 4s;
----*/
}
@media ( prefers-reduced-motion : no-preference ){
	#header.has-scroll-anim{
		@media print , screen and ( width > 768px ){
			background-color : transparent;
			transition-delay : var( --headerDelay );
			transition-timing-function : linear;
			transition-duration : var( --headerDuration );
			transition-property : background-color;
			:where( .logo , #nav a ){
				opacity : 0;
				transition-delay : calc( var( --headerDelay ) + var( --headerDuration ) );
				transition-timing-function : linear;
				transition-duration : var( --navDuration );
				transition-property : opacity;
			}
			&.is-inview{
				background-color : black;
				:where( .logo , #nav a ){
					opacity : 1;
				}
			}
		}
	}
	h1.has-scroll-anim.scroll-fade-in{
		transition-delay : var( --h1Delay );
		transition-timing-function : linear;
		transition-duration : var( --h1Duration );
	}
	.mv{
		.border{
			opacity : 0;
			transition : opacity var( --borderDuration ) linear var( --borderDelay ) ;
		}
		&.is-inview .border{
			opacity : 1;
			&::before{
				animation : drip var( --dripDuration ) ease-in-out 3s infinite;
			}
		}
	}
	.gallery.has-scroll-anim{
		> li{
			opacity : 0;
			transition : transform 1s cubic-bezier( .25 , .8 , .25 , 1 ) , opacity 1s cubic-bezier( .25 , .8 , .25 , 1 );
			transform : translateY( 25% );
		}
		&.is-inview{
			> li{
				opacity : 1;
				transform : translateY( 0 );
			}
			@media screen and ( width <= 768px ){
				> li[data-sp-row="1"]{
					transition-delay : .5s;
				}
				> li[data-sp-row="2"]{
					transition-delay : 1s;
				}
				> li[data-sp-row="3"]{
					transition-delay : 1.5s;
				}
				> li[data-sp-row="4"]{
					transition-delay : 2s;
				}
				> li[data-sp-row="5"]{
					transition-delay : 2.5s;
				}
				> li[data-sp-row="6"]{
					transition-delay : 3s;
				}
				> li[data-sp-row="7"]{
					transition-delay : 3.5s;
				}
			}
			@media print , screen and ( width > 768px ){
				> li[data-pc-row="1"]{
					transition-delay : .5s;
				}
				> li[data-pc-row="2"]{
					transition-delay : 1s;
				}
				> li[data-pc-row="3"]{
					transition-delay : 1.5s;
				}
				> li[data-pc-row="4"]{
					transition-delay : 2s;
				}
				> li[data-pc-row="5"]{
					transition-delay : 2.5s;
				}
			}
		}
	}
}
@keyframes drip{
	0%{
		top : -100%;
		opacity : .5;
	}
	50%{
		opacity : 1;
	}
	100%{
		top : 100%;
		opacity : .5;
	}
}