@charset "utf-8";
#loading{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	background: #baf4ff;
	z-index: 100000;
}
.logoh{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	max-width: 300px;
	transform: translate(-50%, -50%);
	z-index: 100010;
}
.loaderWrap {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg,#90b165 41%, transparent 41%);
	z-index: 100001;
}
.loaderWrap::after{
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 15%;
	background-image: url("../img/loading/bg_loading.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: 50% 0;
	content: '';
	display: block;
}
.loaderWrap::before{
	position: absolute;
	top: 2%;
	left: 2%;
	width: 180px;
	height: 180px;
	background-image: url("../img/loading/sun.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: 50% 0;
	content: '';
	display: block;
}
.loaderWrap .sky{
	position: absolute;
	top: 15%;
	left: 0;
	width: 100%;
	height: 50%;
	background-image: url("../img/loading/cloud.png");
	background-repeat: repeat-x;
	background-size: 120% auto;
	background-position: -20px 0;
}

.loaderWrap01 {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg,#121616 41%, #042c48 41%);
	z-index: 100002;
	opacity: 0;
}
.loaderWrap01.disp{animation: loading 2s ease-out 0s 1 normal forwards;}
@keyframes loading {
	0%{opacity: 0;}
	100% { opacity: 1;}
}
.loaderWrap01::after{
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 15%;
	background-image: url("../img/loading/bg_loading01.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: 50% 0;
	content: '';
	display: block;
}
.loaderWrap01::before{
	position: absolute;
	top: 6%;
	right: 2%;
	width: 180px;
	height: 180px;
	background-image: url("../img/loading/moon.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: 50% 0;
	content: '';
	display: block;
	opacity: 0;
}
.loaderWrap01.disp::before{animation: loading 1.5s ease-out 2s 1 normal forwards;}
.loaderWrap01 .sky{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background-image: url("../img/loading/star.png");
	background-repeat: repeat-x;
	background-size: 120% auto;
	background-position: 50% 0;
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	.loaderWrap {background: linear-gradient(0deg,#90b165 31%, transparent 31%);}
	.loaderWrap::after{
		top: 70%;
		height: 22%;
	}
	.loaderWrap::before{
		width: 256px;
		height: 256px;
	}
	.loaderWrap .sky{
		top: 0;
		height: 50%;
		background-size: auto 70%;
	}
	
	.loaderWrap01 {background: linear-gradient(0deg,#121616 31%, #042c48 31%);}
	.loaderWrap01::after{
		top: 70%;
		height: 22%;
	}
	.loaderWrap01::before{
		width: 256px;
		height: 256px;
	}
	.loaderWrap01 .sky{
		height: 50%;
		background-size: auto 80%;
	}

}