@charset "utf-8";
#loading{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	background: #3d0505;
	z-index: 100000;
	display: none;
}
.light{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/loading/light.png");
	background-repeat: no-repeat;
	background-size: min(100%, 640px) auto;
	background-position: 50% 0;
	content: '';
	display: block;
	mix-blend-mode:screen;
}
.loaderWrap {
	position: absolute;
	top:0;
	left: 0;
	width: 50%;
	height: 100%;
	background-image: url("../img/loading/maku.png");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: 100% 0;
}
.loaderWrap.disp{animation: loading 0.5s ease-out 0s 1 normal forwards;}
@keyframes loading {
	0%{left: 0;}
	100% { left: -60%;}
}

.loaderWrap01 {
	position: absolute;
	top:0;
	right: 0;
	width: 50%;
	height: 100%;
	background-image: url("../img/loading/maku.png");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: 0 0;
}
.loaderWrap01.disp{animation: loadingR 0.5s ease-out 0s 1 normal forwards;}
@keyframes loadingR {
	0%{right: 0;}
	100% { right: -60%;}
}

.loadingH{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/loading/tenmaku.png");
	background-repeat: repeat-x;
	background-size: min(100%, 895px) auto;
	background-position: 50% 0;
	content: '';
	display: block;
}

#loading .logo{
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 500px;
	height: 0;
	padding-top: 24%;
	background-image: url("../img/loading/logo.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 50% 50%;
}