@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */

canvas {
	display: block;
	position: fixed;
	z-index: 9999;
	animation: fubuki 0.8s linear 4.6s forwards;
	opacity: 0;
}
@keyframes fubuki {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

#opening {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: #fff;
	z-index: 9000;
}
#opening .curtain {
	background: url("curtain.png") no-repeat center bottom;
	background-size: cover;
	position: absolute;
	top: -15vh;
	left: 0;
	width: 100vw;
	height: 110vh;
	z-index: 9010;
}

#opening .curtain img {
	position: absolute;
	top: 54%;
	left: 50%;
    width: 80vw;
	transform: translate(-50%, -50%);
	opacity: 0.9;
}


#opening .chara01,
#opening .chara02 {
	position: absolute;
	bottom: 9vh;
	left: 50%;
	z-index: 9008;
	width: 12vw;
	height: auto;
	transform: translateX(-50%);
}
#opening .chara01 {
	z-index: 9008;
	/*animation: chara 0.8s ease 4s forwards;*/
}
#opening .chara02 {
	z-index: 9009;
}


#opening .blastWrap {
	position: absolute;
    top: 50%;
    left: 50%;
	width: 140vh;
	transform: translate(-50%, -50%);
	z-index: 9010;
}


#opening .blastCenter {
	opacity: 0;
}

#opening .blast {
	opacity: 0;
	position: absolute;
	animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
}

#opening .don {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 55%;
	width: 80vw;
	transform: translate(-50%, -50%);
}

#opening .line01,
#opening .line02,
#opening .line03,
#opening .line04 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9007;
	opacity: 0;
}

#opening .line01 {
	background: url(line01.png) no-repeat center center;
	background-size: cover;
}
#opening .line02 {
	background: url(line02.png) no-repeat center center;
	background-size: cover;
}

#opening .line03 {
	background: url(line03.png) no-repeat center center;
	background-size: cover;
}
#opening .line04 {
	background: url(line04.png) no-repeat center center;
	background-size: cover;
}

#opening .logo10th {
	position: absolute;
	width: 90vw;
	line-height: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 9008;
}



/* ////////////////////////////////////////////////////////////////////////////////

	Animation

//////////////////////////////////////////////////////////////////////////////// */

/* カーテン */
#opening .curtain {
	animation: curtain 0.8s cubic-bezier(0.86, 0, 0.07, 1) 2s forwards;
}
@keyframes curtain {
	0% { top: -15vh;}
	100% { top: -110vh;}
}



/* キャラクター */
#opening .chara02 {
	z-index: 9009;
	animation: chara 0.8s ease 2s forwards;
}
@keyframes chara {
	0% { opacity: 1;}
	100% { opacity: 0;}
}



/* 爆発 */

#opening .blastWrap {
	animation: blastWrap 0.5s linear 3.6s forwards;
	z-index: 9010;
}
@keyframes blastWrap {
	0% { opacity: 1; transform: translate(-50%, -50%) scale(1);}
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4);}
}
#opening .blastCenter {
	animation: blastC 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.2s forwards;
}
@keyframes blastC {
	0% { opacity: 0; transform: scale(0.1);}
	100% { opacity: 1; transform: scale(1);}
}
#opening .blastCenter img {
	animation: blastCimg 0.6s linear 2.2s forwards;
}
@keyframes blastCimg {
	0% { transform: scale(0.8);}
	60% { transform: scale(1);}
	75% { transform: scale(0.6);}
	90% { transform: scale(1);}
	100% { transform: scale(0.8);}
}

#opening .don {
	animation: don 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s forwards;
}
@keyframes don {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1);}
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1);}
}



#opening .line03 {
	animation: line 0.6s linear 2.5s infinite, lineOut 0.3s linear 3.5s forwards;
}
#opening .line04 {
	animation: line 0.6s linear 2.8s infinite, lineOut 0.3s linear 3.5s forwards;;
}

#opening .line01 {
	animation: line 0.6s linear 3.5s infinite;
}
#opening .line02 {
	animation: line 0.6s linear 3.8s infinite;
}

@keyframes line {
	0% { opacity: 0;}
	50% { opacity: 0.6;}
	100% { opacity: 0;}
}

@keyframes lineOut {
	0% { opacity: 1;}
	100% { opacity: 0;}
}


#opening .logo10th {
	animation: logo 3.6s cubic-bezier(0.075, 0.82, 0.165, 1) 4.5s forwards;
}
@keyframes logo {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2);}
	30% { opacity: 1;}
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1);}
}



@media screen and (max-width: 999px) {
	
	#opening {
		height: 100%;
	}
	
	#opening .curtain {
		background: url(curtain.png) no-repeat center bottom;
		background-size: 180% 100%;
		top: -15%;
		height: 110%;
	}
	#opening .curtain img {
    	top: 60%;
		width: 90vw;
	}
	
	#opening .chara01,
	#opening .chara02 {
		width: 32vw;
	}
	
	#opening .blastWrap {
		width: 180vw;
	}
	
	#opening .don {
		width: 95vw;
		left: 50%;
	}
	
	#opening .logo10th {
		width: 90vw;
	}
	
}