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

#keyvisual, #keyvisual .slides{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 720px;
}

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

.kv_container{
	display: block;
    width: 94%;
    height: 540px;
    z-index: 5;
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    margin: auto;
}


.slide_catchcopy{
	position: absolute; width: 100%; height: 100px;
    top: 60px; left: 0; right: 0; margin: auto;
}
.slide_catchcopy div{
	position: absolute; top: 0; left: 0; right: 0; margin: auto; 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.selected{opacity: 1 !important; -webkit-opacity: 1 !important;}

.slide_catchcopy div span:nth-of-type(1){
	display: block;
    font-size: 24px;
    margin-bottom: 14px;
    line-height: 1.4em;
}
.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_img{
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	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: 230px; height: 340px; overflow: hidden;
	/*transition: all 2s ease; opacity: 0; -webkit-opacity:0;
    transform: translate3d(-10px, 100px, 20px);*/
}
.slide_img .slide svg image{
	y: 100px; opacity: 0; -webkit-opacity:0; transition: all .8s ease;
}

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

/*.slide_img .slide svg, .slide_img .slide svg image{width: 230px !important; height: 340px !important;}*/
.slide_img .slide .slide{display: block; position: absolute; left:0; top: 0;}

.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; opacity: 0; -webkit-opacity:0; transition: all .8s ease-in;
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	height: 55px;
}
.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: 60px;
    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; 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: 190px; height: 30px;
	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(-120deg) translateX(15%);
	}
}



section.gray{background-color: #1f1b1b;}
section:nth-of-type(1){padding: 40px 0 !important;}
section:nth-of-type(2){padding: 20px 0 !important;}
section:nth-of-type(3){padding-bottom: 100px !important;}

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

.catchcopy{
    padding: 5%;
    margin-bottom: 10px;
}

.catchcopy div {margin-bottom: 5px;}
.catchcopy div span{
	display: inline-block; font-family: 'Cormorant Infant', serif; font-size: 26px; 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);
	}
}



.catchtxt{
	display: block;
    width: 90%;
    float: left;
    font-size: 14px;
    line-height: 20px;
    margin: 0 5% 35px 5%;
}
.catchsignature{display: block; width: 90%; float: right; clear: both; margin: 0 5% 25px 5%; font-size: 12px; opacity: .4; -webkit-opacity: .4; text-align: right;}




.top_images{
	display: block; margin: 0 auto;
	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: 200px; transition: all .8s ease; opacity: 0; -webkit-opacity:0;
}

.top_image.anim svg image{
	y: 0; opacity: 1 !important; -webkit-opacity: 1 !important;
}
/*.top_image.anim svg, .top_image.anim svg image{width: 100% !important; height: auto !important;}*/


.top_images:nth-of-type(n+2) {margin-top: 40px;}

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

section:nth-of-type(2) .catchcopy{margin-top: 40px;}





a.sns{
	display: block; width: 100%; height: 240px; 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: 100%; height: 90px; 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: 10%; 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: 40px; text-transform: uppercase; line-height: 1em; left: 10%; 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: 100px; height: 100px; right: 10%; 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;}