@charset "UTF-8";




.main-wrap {
	position: relative;
	overflow: hidden;
}

.skip-wrap {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 600;
}

.skip-wrap button {
	font-size: 1.5rem;
	font-family: 'Cinzel', serif;
	background: rgba(255,255,255,1);
	border: 1px solid #999;
	padding: 0 10px;
	transition: 0.2s;
}

.skip-wrap button:hover {
	background: rgba(220,220,220,1);
}


/* scene1 */
.scene1 {
	position: relative;
	z-index: 100;
}

.scene1 .main1_p {
	position: relative;
}

.scene1 .main1_c {
	position: absolute;
	top: 0;
	left: 0;
}

/* scene2 */
.scene2 {
	position: absolute;
	top:0;
	left: 0;
	z-index: 200;
}

.scene2 .main2_p {
	position: relative;
}

.scene2 .main2_c {
	position: absolute;
	top: 0;
	left: 0;
}

.scene2 .main2_train1 {
	position: absolute;
	top: 0;
	left: 0;
}

.scene2 .main2_train2 {
	position: absolute;
	top: 0;
	left: 0;
}

.scene2 .main2_genchi1 {
	position: absolute;
	top: 0;
	left: 0;
	mix-blend-mode: screen;
}

.scene2 .main2_genchi2 {
	position: absolute;
	top: 0;
	left: 0;
}

.scene2 .main2_prot {
	position: absolute;
	top: 20px;
	left: 0;
}

/* scene3 */
.scene3 {
	position: absolute;
	top:0;
	left: 0;
	z-index: 300;
}

.scene3 .main3_bg {
	position: relative;
	top: 0;
	left: 0;
}

.scene3 .main3_p1 {
	position: absolute;
	top: 3%;
	left: 26%;
	width: 15%;
	mix-blend-mode: multiply;
	transform: scale(50%);
}

.scene3 .main3_p1 .cap-cover {
	bottom: auto;
	top: 5px;
}

.scene3 .main3_p2 {
	position: absolute;
	top: 21%;
	left: 12%;
	width: 20%;
	mix-blend-mode: multiply;
	transform: scale(50%);
}

.scene3 .main3_p2 .cap-cover {
	right: auto;
	left: 5px;
}

.scene3 .main3_p3 {
	position: absolute;
	top: 46%;
	left: 20%;
	width: 33%;
	mix-blend-mode: multiply;
	transform: scale(50%);
}

.scene3 .main3_p3 .cap-cover {
	right: auto;
	left: 5px;
}

.scene3 .main3_p4 {
	position: absolute;
	top: 7%;
	left: 46%;
	width: 32%;
	mix-blend-mode: multiply;
	transform: scale(50%);
}

.scene3 .main3_p4 .cap-cover {
	bottom: auto;
	top: 5px;
}

.scene3 .main3_p5 {
	position: absolute;
	top: 62%;
	left: 48%;
	width: 15%;
	mix-blend-mode: multiply;
	transform: scale(50%);
}

.scene3 .main3_p6 {
	position: absolute;
	top: 53%;
	left: 68%;
	width: 20%;
	mix-blend-mode: multiply;
	transform: scale(50%);
}

.scene3 .main3_mc {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 47%;
	transform: translate(-50%,-50%);
}

.scene3 .main3_c1 {
	position: absolute;
	top: 16%;
	left: 14%;
	width: 10%;
}

.scene3 .main3_c2 {
	position: absolute;
	top: 91.5%;
	left: 22%;
	width: 25%;
}

.scene3 .main3_c3 {
	position: absolute;
	top: 45%;
	left: 79%;
	width: 8.5%;
}

/* scene4 */
.scene4 {
	position: absolute;
	top:0;
	left: 0;
	z-index: 400;
}

.scene4 .main4_p {
	position: relative;
}

.scene4 .main4_c {
	position: absolute;
	top: 0;
	left: 0;
}




@media only screen and (max-width: 767px){
	
.skip-wrap {
	top: 60px;
	left: 10px;
	bottom: auto;
}

.skip-wrap button {
	font-size: 1.3rem;
	background: rgba(255,255,255,0);
	border: 1px solid rgba(0,0,0,0.5);
	height: 32px;
	padding: 0 10px;
}
	
.skip-wrap button:hover {
	background: none;
}
	
.scene3 .main3_p1 {
	top: 25%;
	left: 21%;
	width: 22%;
}

.scene3 .main3_p2 {
	top: 38%;
	left: 0;
	width: 26%;
}

.scene3 .main3_p3 {
	top: 53%;
	left: 8%;
	width: 45%;
}

.scene3 .main3_p4 {
	top: 20%;
	left: 46%;
	width: 46%;
}

.scene3 .main3_p5 {
	top: 65%;
	left: 50%;
	width: 20%;
}

.scene3 .main3_p6 {
	top: 52%;
	left: 74%;
	width: 26%;
}

.scene3 .main3_mc {
	width: 70%;
}

.scene3 .main3_c1 {
	top: 32%;
	left: 3%;
	width: 17%;
}

.scene3 .main3_c2 {
	top: 80%;
	left: 5%;
	width: 41%;
}

.scene3 .main3_c3 {
	top: 69%;
	left: 75%;
	width: 14%;
}
	
}




/* ////////////////////////////////////////////////////////////////////////////////
	animation
//////////////////////////////////////////////////////////////////////////////// */
.scene1 .main1_p { opacity: 0;	transition: 1.0s;}
.scene1 .main1_p.animated { opacity: 1;}

.scene1 .main1_c { opacity: 0;	transition: 1.0s;}
.scene1 .main1_c.animated {	opacity: 1;}


.scene2 .main2_p { opacity: 0;	transition: 1.0s;}
.scene2 .main2_p.animated {	opacity: 1;}

.scene2 .main2_c { opacity: 0;	transition: 1.0s;}
.scene2 .main2_c.animated {	opacity: 1;}

.scene2 .main2_train1 { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);	transition: 1.5s;}
.scene2 .main2_train1.animated { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

.scene2 .main2_train2 { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);	transition: 1.5s;}
.scene2 .main2_train2.animated { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

.scene2 .main2_genchi1 { opacity: 0; transition: 1.0s;}
.scene2 .main2_genchi1.animated { opacity: 1;}

.scene2 .main2_genchi2 { clip-path: polygon( 0% 100%,  100% 100%, 0% 100%, 100% 100%); transition: 2.0s;}
.scene2 .main2_genchi2.animated { clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);}

.scene2 .main2_prot { opacity: 0; top: 20px; transition: 1.0s;}
.scene2 .main2_prot.animated { opacity: 1; top: 0;}


.scene3 .main3_bg { opacity: 0;	transition: 1.0s;}
.scene3 .main3_bg.animated { opacity: 1;}

.scene3 .main3_p1 { opacity: 0; transform: scale(50%);	transition: 1.5s;}
.scene3 .main3_p1.animated { opacity: 1; transform: scale(100%);}

.scene3 .main3_p2 { opacity: 0; transform: scale(50%);	transition: 1.5s;}
.scene3 .main3_p2.animated { opacity: 1; transform: scale(100%);}

.scene3 .main3_p3 { opacity: 0; transform: scale(50%);	transition: 1.5s;}
.scene3 .main3_p3.animated { opacity: 1; transform: scale(100%);}

.scene3 .main3_p4 { opacity: 0; transform: scale(50%);	transition: 1.5s;}
.scene3 .main3_p4.animated { opacity: 1; transform: scale(100%);}

.scene3 .main3_p5 { opacity: 0; transform: scale(50%);	transition: 1.5s;}
.scene3 .main3_p5.animated { opacity: 1; transform: scale(100%);}

.scene3 .main3_p6 { opacity: 0; transform: scale(50%);	transition: 1.5s;}
.scene3 .main3_p6.animated { opacity: 1; transform: scale(100%);}

.scene3 .main3_mc { opacity: 0;	transition: 1.0s;}
.scene3 .main3_mc.animated { opacity: 1;}

.scene3 .main3_c1 { opacity: 0;	transition: 1.0s;}
.scene3 .main3_c1.animated { opacity: 1;}

.scene3 .main3_c2 { opacity: 0;	transition: 1.0s;}
.scene3 .main3_c2.animated { opacity: 1;}

.scene3 .main3_c3 { opacity: 0;	transition: 1.0s;}
.scene3 .main3_c3.animated { opacity: 1;}


.scene4 .main4_p { opacity: 0;	transition: 2.0s;}
.scene4 .main4_p.animated { opacity: 1;}

.scene4 .main4_c { opacity: 0;	transition: 1.0s;}
.scene4 .main4_c.animated {	opacity: 1;}