@charset "utf-8";


:root{
	interpolate-size:allow-keywords;
}

body{
	animation:zoom2 forwards 5s ease;
}

section#mv_logo{
	width:100vw;
	height:auto;
	position:relative;
	overflow:hidden;
	padding:0 0 90px;
	margin-top:160px;
}

@media screen and (max-width:1200px){
	section#mv_logo{
		margin-top:120px;
		padding:0 0 60px;
	}
}

@media screen and (max-width:800px){
	section#mv_logo{
		margin-top:32vw;
		padding:0 0 16vw;
	}
}

section#mv_logo div.logo_wrap{
	width:55%;
	aspect-ratio:1.561425;
	animation:logo_resize forwards 10s ease-in-out;
	margin:0 auto;
	position:relative;
}

@media screen and (max-width:800px){
	section#mv_logo div.logo_wrap{
		width:75%;
	}
}

section#mv_logo div.mv_wrap{
	width:100%;
	position:relative;
	transform-origin:top center;
}

section#mv_logo div.m_wrap{
	margin:0 auto;
	width:100%;
	aspect-ratio:2.1254;
	position:relative;
	overflow:hidden;
	transform-origin:top center;
	animation:zoom1 forwards 10s ease;
	background:#fff;
	z-index:10;
}

section#mv_logo div.m_wrap:after{
	content:"";
	display:block;
	height:100%;
	width:100%;
}

section#mv_logo div.m1,
section#mv_logo div.m2,
section#mv_logo div.m3{
	position:absolute;
	background-size:contain;
	left:12.982%;
	bottom:0;
}

section#mv_logo div.m1:before,
section#mv_logo div.m2:before,
section#mv_logo div.m3:before{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:0;
	background:#fff;
	width:100%;
	height:200%;
	transform-origin:top left;
	transform:rotate(30deg);
}


section#mv_logo div.m1{
	width:21.4398%;
	height:69.1472%;
	background:url(../images/logo_m1.svg) bottom no-repeat;
	z-index:15;
}

section#mv_logo div.m1:before{
	z-index:16;
	animation:mask_m1 forwards 10s linear;
}

section#mv_logo div.m2{
	width:42.9347%;
	height:84.7826%;
	background:url(../images/logo_m2.svg) bottom no-repeat;
	z-index:13;
}

section#mv_logo div.m2:before{
	z-index:14;
	animation:mask_m2 forwards 10s linear;
	height:200%;
}

section#mv_logo div.m3{
	width:87.018%;
	height:100%;
	background:url(../images/logo_m3.svg) bottom no-repeat;
	z-index:11;
}

section#mv_logo div.m3:before{
	z-index:12;
	animation:mask_m3 forwards 10s linear;
	transform-origin:bottom right;
	transform:rotate(45deg);
}

section#mv_logo div.logo_full{
	position:absolute;
	left:0;
	top:-26%;
	width:100%;
	aspect-ratio:1.561425;
	background:url(../images/logo_base.svg) no-repeat;
	background-size:contain;
	transform-origin:bottom left;
	animation:full_move forwards 10s ease;
	z-index:8;
}

section#mv_logo div.logo_full:before{
	content:"";
	display:block;
	height:100%;
	width:100%;
	background:#fff;
	z-index:9;
	position:absolute;
	animation:mask_full forwards 10s ease;
	left:0;
	top:-26%;
}

@keyframes mask_m1{
	0%{
		top:-25%;
		left:40%;
	}
	5%{
		top:-25%;
		left:40%;
	}
	15%{
		opacity:1;
		top:-250%;
		left:240%;
	}
	30%{
		opacity:0;
		top:-250%;
		left:240%;
	}
	100%{
		opacity:0;
	}
}

@keyframes mask_m2{
	0%{
		top:-45%;
		left:30%;
	}
	9%{
		top:-45%;
		left:30%;
	}
	19%{
		opacity:1;
		top:-300%;
		left:175%;
	}
	34%{
		opacity:0;
		top:-300%;
		left:175%;
	}
	100%{
		opacity:0;
	}
}

@keyframes mask_m3{
	0%{
		top:-45%;
		left:-50%;
	}
	14%{
		top:-45%;
		left:-50%;
	}
	34%{
		opacity:1;
		top:-200%;
		left:175%;
	}
	46%{
		opacity:0;
		top:-200%;
		left:175%;
	}
	100%{
		opacity:0;
	}
}

@keyframes full_move{
	0%{
		top:-26%;
		opacity:0;
	}
	35%{
		top:-26%;
		opacity:0;
	}
	45%{
		top:0%;
		opacity:1;
	}
	100%{
		top:0%;
		opacity:1;
	}
}

@keyframes mask_full{
	0%{
		opacity:1;
	}
	45%{
		opacity:1;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:0;
	}
}

@keyframes zoom1{
	0%{
		opacity:1;
		transform:translateY(26%);
		right:0.09%;
	}
	35%{
		opacity:1;
		transform:translateY(26%);
		right:0.09%;
	}
	45%{
		opacity:1;
		transform:translateY(0);
		right:0.09%;
	}
	50%{
		opacity:1;
		transform:translateY(0);
		right:0.09%;
	}
	55%{
		opacity:0;
		transform:translateY(0);
		right:0.09%;
	}
	100%{
		opacity:0;
		top:0;
	}
}

@media screen and (max-width:800px){
	@keyframes zoom1{
		0%{
			opacity:1;
			transform:translateY(36%);
			right:0.09%;
		}
		24%{
			opacity:1;
			transform:translateY(36%);
			right:0.09%;
		}
		35%{
			opacity:1;
			transform:translateY(26%);
			right:0.09%;
		}
		45%{
			opacity:1;
			transform:translateY(0);
			right:0.09%;
		}
		50%{
			opacity:1;
			transform:translateY(0);
			right:0.09%;
		}
		55%{
			opacity:0;
			transform:translateY(0);
			right:0.09%;
		}
		100%{
			opacity:0;
			top:0;
		}
	}
}

@keyframes zoom2{
	0%{
		height:100.1vh;
	}
	38%{
		height:100.1vh;
	}
	70%{
		height:calc-size(fit-content);
	}
	100%{
		height:calc-size(fit-content);
	}
}

body#mv_load header{
	animation:zoom3 forwards 10s ease;
}

body#mv_load{
	overflow:hidden;
}

body#mv_load main{
	position:relative;
	animation:zoom4 forwards 10s ease;
}

body#mv_load main section.related_links{
	position:relative;
	animation:zoom5 forwards 10s ease;
}

@keyframes zoom3{
	0%{
		top:-200px;
		transform:scale(1.5);
	}
	14%{
		top:-200px;
		transform:scale(1.5);
	}
	30%{
		top:0;
		transform:scale(1);
	}
	100%{
		top:0;
		transform:scale(1);
	}
}

@keyframes zoom4{
	0%{
		top:-310px;
	}
	14%{
		top:-310px;
	}
	30%{
		top:0;
	}
	100%{
		top:0;
	}
}

@keyframes zoom5{
	0%{
		margin-top:100vh;
	}
	14%{
		margin-top:100vh;
	}
	30%{
		margin-top:0;
	}
	100%{
		margin-top:0;
	}
}


@keyframes logo_resize{
	0%{
		transform:scale(calc(20/11));
		top:10vw;
	}
	14%{
		transform:scale(calc(20/11));
		top:10vw;
	}
	30%{
		transform:scale(1);
		top:0;
	}
	100%{
		transform:scale(1);
		top:0;
	}
}







section#mv_logo div.text_wrap{
	margin-top:70px;
}

section#mv_logo div.text_wrap p{
	font-weight:700;
	margin-top:0.5em;
	font-weight:400;
}

section#mv_logo div.text_wrap .text_mv{
	animation:text forwards 1s ease-in-out;
	position:relative;
	opacity:0;
}

section#mv_logo div.text_wrap p.text12,
section#mv_logo div.text_wrap p.text13,
section#mv_logo div.text_wrap p.text14{
	font-size:280%;
	font-weight:500;
	margin-top:0.1em;
}

section#mv_logo div.text_wrap p.text12{
	margin-top:1.3em;
}

@media screen and (max-width:1200px){
	section#mv_logo div.text_wrap{
		margin-top:45px;
	}
	section#mv_logo div.text_wrap p.text12,
	section#mv_logo div.text_wrap p.text13,
	section#mv_logo div.text_wrap p.text14{
		font-size:210%;
	}
}

@media screen and (max-width:800px){
	section#mv_logo div.text_wrap{
		margin-top:12vw;
		padding:0 calc(16vw / 3);
	}
	section#mv_logo div.text_wrap p{
		line-height:2.1;
		margin-top:0;
	}
	section#mv_logo div.text_wrap p.text12{
		margin-top:1.1em;
	}
	section#mv_logo div.text_wrap p.text12,
	section#mv_logo div.text_wrap p.text13,
	section#mv_logo div.text_wrap p.text14{
		font-size:5.6vw;
		line-height:1.7;
	}
}

/*
section#mv_logo div.text_wrap .text_mv.text1{animation-delay:7s;}
section#mv_logo div.text_wrap .text_mv.text2{animation-delay:8.5s;}
section#mv_logo div.text_wrap .text_mv.text3{animation-delay:10s;}
section#mv_logo div.text_wrap .text_mv.text4{animation-delay:12s;}
section#mv_logo div.text_wrap .text_mv.text5{animation-delay:14s;}
section#mv_logo div.text_wrap .text_mv.text6{animation-delay:16s;}
section#mv_logo div.text_wrap .text_mv.text7{animation-delay:18s;}
section#mv_logo div.text_wrap .text_mv.text8{animation-delay:20s;}
section#mv_logo div.text_wrap .text_mv.text9{animation-delay:22s;}
section#mv_logo div.text_wrap .text_mv.text10{animation-delay:24s;}
section#mv_logo div.text_wrap .text_mv.text11{animation-delay:26s;}
section#mv_logo div.text_wrap .text_mv.text12{animation-delay:29s;}
section#mv_logo div.text_wrap .text_mv.text13{animation-delay:32s;}
section#mv_logo div.text_wrap .text_mv.text14{animation-delay:35s;}
*/

@keyframes text{
	0%{
		top:1em;
		opacity:0;
	}
	100%{
		top:0;
		opacity:1;
	}
}


section#mv_lead{
	max-width:100%;
	padding:0;
}

section#mv_lead div.mv_lead_wrap{
	background:#f5f5f5;
	padding:90px 0;
	position:relative;
}

section#mv_lead div.mv_lead_wrap:after{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:#fff;
}

section#mv_lead p{
	font-size:240%;
}

section#mv_lead p:first-child{
	color:#d70c19;
	margin-top:0;
	font-weight:500;
}

section#mv_lead p strong{
	font-size:200%;
	position:relative;
	opacity:0;
	line-height:1.75;
}

section#mv_lead.loaded div.mv_lead_wrap:after{
	animation:lead_wrap forwards 1s linear;
}

section#mv_lead.loaded p strong{
	animation:lead_text forwards 1.5s ease;
	animation-delay:1.5s;
}

@media screen and (max-width:1200px){
	section#mv_lead div.mv_lead_wrap{
		padding:60px 0;
	}
	section#mv_lead p{
		font-size:180%;
	}
}

@media screen and (max-width:800px){
	section#mv_lead div.mv_lead_wrap{
		padding:16vw calc(16vw / 3);
	}
	section#mv_lead p{
		font-size:4.6vw;
	}
}

@keyframes lead_wrap{
	0%{
		left:0;
	}
	100%{
		left:100%;
	}
}

@keyframes lead_text{
	0%{
		top:1em;
		opacity:0;
	}
	100%{
		top:0;
		opacity:1;
	}
}