@charset "utf-8";

/* loading */
#splash{
	width:100%; height:100%;
	background:var(--main-color);
	position:fixed;
	z-index:100000;
	text-align:center;
}
#splash-logo{
	width:300px;
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%, -50%);
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
	body.appear #splash{
		display:none;
	}
}

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime{
	from{
		opacity:0;
		transform:translateY(20px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}

body{
	background:var(--main-color);
}
body.appear{
	background:#FFF;
}
.splashbg01,
.splashbg02{
	display:none;
}
body.appear .splashbg01,
body.appear .splashbg02{
	display:block;
	animation-duration:0.6s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	width:100%; height:100vh;
	position:fixed;
	left:0;
	z-index:10000;
	transform:scaleY(1);
	background-color:var(--main-color);
}
body.appear .splashbg01{
	animation-name:pageAnime01;
	bottom:50%;
}
@keyframes pageAnime01{
	0%{
		transform-origin:top;
		transform:scaleY(1);
	}
	100%{
		transform-origin:top;
		transform:scaleY(0);
	}
}
body.appear .splashbg02{
	animation-name:pageAnime02;
	top:50%;
}
@keyframes pageAnime02{
	0%{
		transform-origin:bottom;
		transform:scaleY(1);
	}
	100%{
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
#toppage{
	opacity:0;
}
body.appear #toppage{
	animation-name:pageAnimeAppear;
	animation-duration:1.0s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes pageAnimeAppear{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}