header{height: 860px; position: relative;}

#keyvisual, #keyvisual .slides{
	position: absolute; top: 0; left: 0; right: 0; margin: auto;
	width: 100%; height: 800px;
}
#keyvisual .slides div.slide_bg{
	position: absolute; top: 0; left: 0; right: 0; margin: auto;
	width: 100%; height: 770px;
}
#keyvisual .slides div.slide_bg img{
	position: absolute; top: 0; left: 0; width: 100%; height: auto !important;
	opacity: 0; -webkit-opacity:0; transition: all .8s ease-in;
}


.kv_container{display: block; width: 1200px; height: 800px; margin: 0 auto; z-index: 5; position: relative;}


.slide_catchcopy{
	position: absolute; top:45%; left: 38px;
	height: 80px; width: 560px;
}
.slide_catchcopy div{
	position: absolute; left: 0; top:0; opacity: 0; -webkit-opacity:0; transition: all .8s ease-in;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
.slide_catchcopy div span:nth-of-type(1){display: block; font-size: 24px; margin-bottom: 22px; line-height: 1em;}
.slide_catchcopy div span:nth-of-type(2){display: block; font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1em; opacity: .6; -webkit-opacity:.6;}
.slide_catchcopy div.selected{opacity: 1 !important; -webkit-opacity: 1 !important;}

.slide_img{
	position: absolute; bottom:0; right: 45px;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}


.slide_img .slide{
	float: left; width: 460px; height: 680px; overflow: hidden;
	/*transition: all 10s ease; opacity: 0; -webkit-opacity:0;
    transform: translate3d(-40px, 500px, 40px);*/
}
.slide_img .slide .slide{display: block; position: absolute; left:0; top: 0;}

.slide_img .slide svg image{
	y: 200px; opacity: 0; -webkit-opacity:0; transition: all .8s ease;
}

.slide_img .slide svg image.selected{
	position: relative; z-index: 5;
}


.slide_img .numbering{
	float: right; margin-left: 20px; opacity: 0; -webkit-opacity:0; transition: all .8s ease-in;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
.slide_img .numbering a{
	display: block; font-family: 'Cormorant Infant', serif; font-size: 12px; writing-mode: vertical-rl;
	opacity: 0; -webkit-opacity:0; transition: all .8s ease-in;
}
.slide_img .numbering img{display: block; width: 1px; height: 40px; margin: 10px auto;}




.slide_floatingtxt{
	display: block; width: 100%; overflow: hidden; position: absolute; bottom: 55px; left: 0; right: 0; margin: auto; height: 140px;
	opacity: 0; -webkit-opacity:0; transition: all .8s ease-in;
}
.slide_floatingtxt div{
	overflow: hidden; white-space: nowrap; position: absolute; left: 0; top: 0; bottom: 0; margin: auto;
}
.slide_floatingtxt div span{
	display: inline-block; font-family: 'Cormorant Infant', serif; font-size: 140px; line-height: 1em;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}

/*.slide_img .slide.anim{
	opacity: 1 !important; -webkit-opacity:1 !important;
    transform: translate3d(0, 0, 0) !important;
}*/
.slide_img .slide svg image.anim{
	y: 0; opacity: 1 !important; -webkit-opacity: 1 !important;
}

#keyvisual .slides div.slide_bg img.selected, .slide_floatingtxt.anim, .slide_img .numbering.anim, .slide_img .numbering a.selected{
	opacity: 1; -webkit-opacity:1; 
}



/*
.loading {
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 240vh;
	overflow: visible;
	background-color: #fdfdfd;
	transform: translateY(0);
	transition: all 10s ease;
	z-index: 20;
}

.animate{transform: translateY(-200%) !important;}

svg {
	height: 100vh;
	width: 100vw;
	position: absolute;
	bottom: -30%;
	left: 0;
	transform: rotate(180deg);
	background-color: transparent !important;
}
*/
.loading{z-index: 20; width: 200%; height: 200vh; position: fixed; left: 0; top: 0;}
.loading .circle{
	position: absolute; top: 0; left: 0; margin: auto; transform-origin: 0 50%;
	width: 150%; height: 250%; border-radius:50%; background-color: #f5f5f5;
	transform: rotate(0) translateX(0);
}
/*
.loading .circle img{
	display: block; position: absolute; width: 380px; height: 60px;
	opacity: 0; -webkit-opacity: 0; transition: all .8s ease-in;
}
.loading .circle img.load{opacity: 1 !important; -webkit-opacity: 1 !important;}
*/
.loading .circle.anim{animation: loading 2s linear forwards;}

@keyframes loading {
	15% {
		transform: rotate(-15deg) translateX(15%);
	}
	
	35% {
		transform: rotate(-35deg) translateX(15%);
		border-radius: 50% 50% 29% 71% / 46% 50% 50% 54%;
	}
	
	55% {
		transform: rotate(-55deg) translateX(15%);
	}
	
	75% {
		transform: rotate(-75deg) translateX(15%);
		border-radius: 50% 50% 2% 98% / 67% 50% 50% 33%;
	}
	
	95% {
		transform: rotate(-95deg) translateX(15%);
	}

	100% {
		transform: rotate(-130deg) translateX(15%);
	}
}



section.gray{background-color: #1f1b1b;}
section:nth-of-type(1){padding: 86px 0 200px !important;}
section:nth-of-type(2){padding: 195px 0 !important;}
section:nth-of-type(3){padding-bottom: 240px !important;}

h2{
	display: block; font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1em; margin: 0;
	width: 100%; padding: 200px 0 55px 0; text-align: left;
}

.catchcopy div span{
	display: inline-block; font-family: 'Cormorant Infant', serif; font-size: 80px; line-height: 1em;
	opacity:0; -webkit-opacity: 0; transform: translate3d(10%, 30%, 0px) rotate(10deg) scale(1, 0.01);
}

.catchcopy.anim{opacity:1 !important; -webkit-opacity: 1 !important;}
.catchcopy.anim div span{animation: catchcopy .8s linear forwards;}

@keyframes catchcopy{
	from {
		opacity:0; -webkit-opacity: 0;
		transform: translate3d(10%, 30%, 0px) rotate(10deg) scale(1, 0.01);
	}

	to {
		opacity:1; -webkit-opacity: 1;
		transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1, 1);
	}
}



section:nth-of-type(1) .catchcopy{float: left; text-align: left; margin-bottom: 120px;}
.catchtxt{display: block; width: 410px; float: right; clear: both; font-size: 16px; line-height: 28px; margin-right: 130px; margin-bottom: 65px;}
.catchsignature{display: block; float: right; clear: both; margin-right: 130px; font-size: 14px; opacity: .4; -webkit-opacity: .4;}




.top_images{
	display: block;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}

.top_image svg image{
	y: 400px; transition: all .8s ease; opacity: 0; -webkit-opacity:0;
}

.top_image.anim svg image{
	y: 0; opacity: 1 !important; -webkit-opacity: 1 !important;
}

.top_images:nth-of-type(1) img, .top_images:nth-of-type(2) img{width: 550px; height: 720px;}
.top_images:nth-of-type(3) img{height: 550px; width: 720px;}

.top_images:nth-of-type(1){float: left;}
.top_images:nth-of-type(2){float: right; margin-top: 118px;}
.top_images:nth-of-type(3){float: left; margin-left: 80px; margin-top: 75px; clear: both;}

.top_images span{display: block; margin-top: 20px; font-size: 14px; opacity: .4; -webkit-opacity: .4;}

section:nth-of-type(2) .catchcopy{float: right; text-align: right; clear: both; margin-top: 100px;}






a.sns{
	display: block; width: 100%; height: 380px; background-repeat: no-repeat; background-position: center; position: relative;
	border-bottom: 1px #fff solid; opacity: 0; -webkit-opacity: 0; transform: translateY(100px); transition: all .3s ease-in; overflow: hidden;
}
a.sns:nth-of-type(1){border-top: 1px #fff solid;}

a.sns img.bg{
	width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
	transform: scale(1.4); transition: all .4s ease-in; transition-delay: .2s;
}

a.sns div{
	position: absolute; width: 1200px; height: 115px; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
}

a.sns div img, a.sns div span{display: block; position: absolute; opacity: 0; -webkit-opacity: 0;}
a.sns div img:nth-of-type(1){
	width: 160px; height: 26px; left: 0; top: 0;
	opacity: 0; -webkit-opacity: 0; transform: translateY(40px); transition: all .8s ease-in;
}
a.sns div span{
	font-family: 'Cormorant Infant', serif; font-size: 80px; text-transform: uppercase; line-height: 1em; left: 0; bottom: 0;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	opacity: 0; -webkit-opacity: 0; transform: translateY(40px); transition: all .8s ease-in;
}
a.sns div img:nth-of-type(2){
	width: 120px; height: 120px; right: 60px; top: 0; bottom: 0; margin: auto;
	opacity: 0; -webkit-opacity: 0; transform: translateY(40px); transition: all .3s ease-in;
}

a.sns.anim, a.sns div span.anim, a.sns div img.anim{opacity: 1 !important; -webkit-opacity: 1 !important; transform: translateY(0) !important;}
a.sns.anim img.bg{transform: scale(1.0) !important;} 

a.sns.anim:hover img.bg{transform: scale(1.2) !important;} 
a.sns.anim:hover div img.anim:nth-of-type(2){transform: translateY(0) rotate(45deg) !important;}
/*a.sns.anim:hover img.bg{transform: scale(1.4) !important;}*/