@charset "UTF-8";
/* ローディング
--------------------------------------------------- */
#wrapper{
	display: none;
}
#wrapper.show{
	display: block;
}
body > #canvas{
	max-width: 100%;
}
#loading{
	display: none;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 99999;
	overflow: hidden;
}

#loading.show{
	display: block;
}

/* 背景 */
#loading::before{
	content: "";
	background: url(../img/top/loading_bg.jpg) no-repeat center/cover;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	/* animation: bg_scale 7s; */
	animation: bg_scale 4s;
	transition: all 1s;
}
@keyframes bg_scale {
	10% {
		transform: scale(1)
	}
	100% {
		transform: scale(1.1);
	}
}

#loading::after{
	content: "";
	background: #000;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	animation: loading_bg 3s;
}
@keyframes loading_bg {
	0% {
		opacity: 1;
	}
	30%{
		opacity: .5;
	}
	100% {
		opacity: .3;
	}
}

/* ロゴ */
#loading #svg .logo_img{
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	animation: change 4s ease-in-out;
}
.red_box{
	border: 1.5px solid red;
	background-color: #fff;
	padding: 20px;
}
@keyframes change {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}



/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {
	#loading #svg svg,
	#loading #svg .logo_img{
		width: 238px!important;
	}

	@keyframes bg_scale {
		10% {
			transform: scale(1)
		}
		100% {
			transform: scale(1.2);
		}
	}
}