@charset "UTF-8";

/* --------------------------------------------
MV
--------------------------------------------- */
#gallery{
	display : grid;
}
#gallery > li{
	position : relative;
	overflow : clip;
}
#gallery > li::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : 1;
	display : block;
	width : 100%;
	height : 100%;
	content : "";
	background-image : linear-gradient( to bottom , transparent 0% , transparent 44% , color-mix( in sRGB , white 0% , transparent ) 44% , color-mix( in sRGB , white 100% , transparent ) 100% );
	outline : solid 1px white;
	outline-offset : -1px;
}
#gallery > li img{
	width : 100%;
	height : auto;

	/* animation: marquee var(--duration) linear infinite; */
}
#gallery > li:nth-child( -n+3 ){
	z-index : 1;
}
#gallery > li:nth-child( n+4 ){
	z-index : 2;
}
#gallery > li:nth-child( 1 ){
	grid-row : 3/6;
	grid-column : 1 / 3;
}
#gallery > li:nth-child( 1 ) img{
	--duration : calc( var( --height ) * .01s * ( 201 / 201 ) );
}
#gallery > li:nth-child( 2 ){
	grid-row : 1/7;
	grid-column : 4 / 7;
}
#gallery > li:nth-child( 2 ) img{
	--duration : calc( var( --height ) * .01s * ( 201 / 167 ) );
}
#gallery > li:nth-child( 3 ){
	grid-row : 2/8;
	grid-column : 8 / 10;
}
#gallery > li:nth-child( 3 ) img{
	--duration : calc( var( --height ) * .01s * ( 201 / 196 ) );
}
#gallery > li:nth-child( 4 ){
	grid-row : 4/8;
	grid-column : 2 / 5;
}
#gallery > li:nth-child( 4 ) img{
	--duration : calc( var( --height ) * .01s * ( 201 / 251 ) );
}
#gallery > li:nth-child( 5 ){
	grid-row : 5/-1;
	grid-column : 6 / 9;
}
#gallery > li:nth-child( 5 ) img{
	--duration : calc( var( --height ) * .01s * ( 201 / 251 ) );
}
@media screen and ( width <= 750px ){
	#gallery{
		grid-template-rows : calc( 8 var( --remBase ) ) calc( 4 var( --remBase ) ) calc( 99 var( --remBase ) ) calc( 60 var( --remBase ) ) calc( 94 var( --remBase ) ) calc( 14 var( --remBase ) ) calc( 53 var( --remBase ) ) calc( 47 var( --remBase ) );
		grid-template-columns : calc( 29 var( --percentBase ) ) calc( 75 var( --percentBase ) ) calc( 16 var( --percentBase ) ) calc( 39 var( --percentBase ) ) calc( 15 var( --percentBase ) ) calc( 32 var( --percentBase ) ) calc( 24 var( --percentBase ) ) calc( 75 var( --percentBase ) )
			calc( 27 var( --percentBase ) ) 1fr;
		grid-row : 1/3;
		grid-column : 1;
	}
}
@media print , screen and ( width > 750px ){
	#gallery{
		grid-template-rows : calc( 17 var( --remBase ) ) calc( 9 var( --remBase ) ) calc( 191 var( --remBase ) ) calc( 115 var( --remBase ) ) calc( 180 var( --remBase ) ) calc( 25 var( --remBase ) ) calc( 104 var( --remBase ) ) calc( 92 var( --remBase ) );
		grid-row : 1;
		grid-column : 2;
		height : calc( 754 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#gallery{
		grid-template-columns : calc( 56 * 100% / 642 ) calc( 145 * 100% / 642 ) calc( 32 * 100% / 642 ) calc( 74 * 100% / 642 ) calc( 29 * 100% / 642 ) calc( 64 * 100% / 642 ) calc( 46 * 100% / 642 ) calc( 141 * 100% / 642 ) 1fr;
	}
}
@media print , screen and ( width >= 1440px ){
	#gallery{
		grid-template-columns : 56px 145px 32px 74px 29px 64px 46px 141px 1fr;
	}
}
@keyframes marquee{
	0%{
		translate : 0 0;
	}
	100%{
		translate : 0 -100%;
	}
}
#mv{
	position : relative;
	display : grid;
}
#mv h2{
	display : grid;
	grid-template-rows : auto auto;
	align-items : end;
	justify-content : start;
	font-weight : 700;
	color : var( --navy );
}
#mv h2 ruby{
	display : contents;
	line-height : 1;
}
#mv h2 ruby span{
	grid-row : 1/-1;
	grid-column : 1;
	line-height : 1;
	white-space : nowrap;
}
#mv h2 ruby rt{
	grid-row : 1;
	grid-column : 2;
	line-height : 1;
	white-space : nowrap;
}
#mv h2 > span{
	grid-row : 2;
	grid-column : 2;
	line-height : 1;
	white-space : nowrap;
}
#mv .box > p{
	font-weight : 700;
}
#mv .box > ul{
	display : grid;
}
#mv .box > ul li{
	display : grid;
	place-items : center;
	font-weight : 700;
	color : var( --yellow );
	background-color : var( --navy );
}
#mv .contacts p{
	display : grid;
	align-items : center;
	color : var( --blue );
}
#mv .contacts p::before , #mv .contacts p::after{
	display : block;
	width : auto;
	aspect-ratio : 10/20;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 bottom;
	background-size : contain;
}
#mv .contacts p::before{
	grid-column : 1;
	background-image : url( "../images/home/mv/parts01.svg" );
}
#mv .contacts p::after{
	grid-column : 3;
	background-image : url( "../images/home/mv/parts02.svg" );
}
#mv > a{
	position : absolute;
	bottom : 0;
	display : grid;
	align-items : start;
	justify-items : center;
}
#mv > a > span{
	grid-column : 1;
	letter-spacing : .11em;
	writing-mode : vertical-rl;
}
#mv > a::before , #mv > a::after{
	display : block;
	font-size : 0;
	content : "";
}
#mv > a::before{
	grid-row : 3;
	width : 1px;
	height : 100%;
	background-color : var( --base );
	animation : elasticus 1.2s ease-in-out infinite;
}
#mv > a::after{
	grid-row : 5;
	width : 100%;
	aspect-ratio : 11/5;
	background : url( "../images/home/mv/down.svg" ) center / contain no-repeat;
}
@media screen and ( width <= 750px ){
	#mv{
		grid-template-rows : calc( 279 var( --remBase ) ) calc( 102 var( --remBase ) ) 1fr;
		grid-template-columns : 1fr;
		padding-top : calc( 7 var( --remBase ) );
	}
	#mv .box{
		grid-row : 2/-1;
		grid-column : 1;
	}
	#mv h2{
		column-gap : calc( 12 var( --percentBase ) );
	}
	#mv h2 ruby span{
		font-size : calc( 8rem * 1.05 );
	}
	#mv h2 ruby rt{
		font-size : calc( 2.2rem * 1.05 );
	}
	#mv h2 > span{
		font-size : calc( 4.8rem * 1.05 );
	}
	#mv .box{
		position : relative;
		z-index : 3;
		padding-bottom : calc( 76 var( --remBase ) );
	}
	#mv .box > ul{
		grid-template-columns : repeat( 2 , calc( 166 var( --percentBase ) ) );
		grid-auto-rows : calc( 32 var( --remBase ) );
		row-gap : calc( 6 var( --remBase ) );
		column-gap : calc( 3 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#mv .box > ul li{
		font-size : 1.4rem;
	}
	#mv .box > p{
		margin-top : calc( 13 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#mv .contacts{
		margin-top : calc( 10 var( --remBase ) );
	}
	#mv .contacts p{
		column-gap : calc( 9.5 var( --percentBase ) );
		justify-content : center;
		font-size : 1.6rem;
		line-height : 1.8;
	}
	#mv .contacts p::before , #mv .contacts p::after{
		height : calc( 18 var( --remBase ) );
	}
	#mv .contacts ul{
		margin-top : calc( 6 var( --remBase ) );
	}
	#mv .contacts li{
		width : 100%;
		height : calc( 60 var( --remBase ) );
	}
	#mv .contacts li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
	#mv .contacts a{
		--down : calc( 4 var( --remBase ) );
		font-size : 1.8rem;
	}
	#mv .contacts a::after{
		right : calc( 7 var( --percentBase ) );
	}
	#mv .contacts .link-contact span{
		column-gap : calc( 8 * 100% / 281 );
		padding-left : calc( 54 var( --percentBase ) );
	}
	#mv .contacts .link-apply span{
		column-gap : calc( 10 * 100% / 255 );
		padding-left : calc( 80 var( --percentBase ) );
	}
	#mv > a{
		left : calc( 4 var( --viewportBase ) );
		grid-template-rows : auto calc( 5 var( --remBase ) ) calc( 354 var( --remBase ) ) calc( 5 var( --remBase ) ) calc( 5 var( --remBase ) );
	}
	#mv > a span{
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	#mv{
		grid-template-columns : calc( 578 var( --percentBase ) ) calc( 642 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 19 var( --remBase ) );
		padding-bottom : calc( 74 var( --remBase ) );
	}
	#mv .box{
		grid-row : 1;
		grid-column : 1;
		padding-top : calc( ( 76 - 19 ) var( --remBase ) );
	}
	#mv h2{
		column-gap : calc( 11 * 100% / 578 );
	}
	#mv h2 ruby span{
		font-size : 17.4rem;
	}
	#mv h2 ruby rt{
		font-size : 3.8rem;
	}
	#mv h2 > span{
		font-size : 8.6rem;
	}
	#mv .box > ul{
		grid-template-columns : repeat( 2 , calc( 283 * 100% / 578 ) );
		grid-auto-rows : calc( 41 var( --remBase ) );
		row-gap : calc( 6 var( --remBase ) );
		column-gap : calc( 6 * 100% / 578 );
		margin-top : calc( 46 var( --remBase ) );
	}
	#mv .box > ul li{
		font-size : 1.6rem;
	}
	#mv .box > p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 1.8;
		white-space : nowrap;
	}
	#mv .contacts{
		margin-top : calc( 41 var( --remBase ) );
	}
	#mv .contacts p{
		column-gap : calc( 9.5 * 100% / 578 );
		justify-content : start;
		padding-left : calc( 77 * 100% / 578 );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	#mv .contacts p::before , #mv .contacts p::after{
		height : calc( 18 var( --remBase ) );
	}
	#mv .contacts ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 279 * 100% / 578 ) );
		grid-auto-rows : calc( 75 var( --remBase ) );
		column-gap : calc( 14 * 100% / 578 );
		margin-top : calc( 13 var( --remBase ) );
	}
	#mv .contacts a{
		--down : calc( 5 var( --remBase ) );
		font-size : 1.8rem;
	}
	#mv .contacts a::after{
		right : calc( 7 * 100% / 279 );
	}
	#mv .contacts .link-contact span{
		column-gap : calc( 8 * 100% / 253 );
		padding-left : calc( 26 * 100% / 279 );
	}
	#mv .contacts .link-apply span{
		column-gap : calc( 10 * 100% / 227 );
		padding-left : calc( 52 * 100% / 279 );
	}
	#mv > a{
		grid-template-rows : auto calc( 13 var( --remBase ) ) calc( 417 var( --remBase ) ) calc( 5 var( --remBase ) ) calc( 5 var( --remBase ) );
	}
	#mv > a span{
		font-size : 1.4rem;
	}
}
@media screen and ( 750px < width < 1440px ){
	#mv > a{
		left : calc( 41 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1440px ){
	#mv > a{
		left : calc( 50% - 679px );
	}
}
@keyframes elasticus{
	0%{
		clip-path : polygon( 0 0 , 100% 0 , 100% 0 , 0 0 );
	}
	50%{
		clip-path : polygon( 0 0 , 100% 0 , 100% 100% , 0 100% );
	}
	50.1%{
		clip-path : polygon( 0 0 , 100% 0 , 100% 100% , 0 100% );
	}
	100%{
		clip-path : polygon( 0 100% , 100% 100% , 100% 100% , 0 100% );
	}
}