@charset "utf-8";
.page_container {
		opacity: 0;
}
body {
		background: #003d72;
}
body.endLoad {
		background: rgb(228, 232, 235);
		background: radial-gradient(circle, rgba(228, 232, 235, 1) 0%, rgba(211, 219, 227, 1) 79%, rgba(171, 190, 207, 1) 100%);
}
.endLoad .page_container {
		opacity: 1;
}
.loading_base {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 5000;
		background: #003d72;
		display: flex;
		align-items: center;
		justify-content: center;
}
.loading_base .header_logo {
		opacity: 0.2;
}
.loading_run_wrap {
		width: 100%;
}
.loading_wait {
		color: rgba(255,255,255,0.5);
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
		font-size: 14px;
		letter-spacing: 4px;
		text-align: center;
		width: 100%;
		position: absolute;
		left: 0;
		top: 50%;	
		transition: opacity 0.2s;
}
.endLoad .loading_wait {
		opacity: 0;
}
.loading_run_chara {
		width: 300px;
		margin: 0 auto;
		position: relative;
		transform: translateY(-80px);
}
.loading_run_chara div {
		position: absolute;
		top: 0;
		left: 0;
		width: 300px;
}
.loading_run_chara div img {
		width: 100%;
		height: auto;
}
.loading_run_illust, .loading_run_illust_txt {
		transform: translateX(50px);
		opacity: 0;
}
.endLoad .loading_run_illust {
		animation: loadingAnime 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.2s;
}
.endLoad .loading_run_illust_txt {
		animation: loadingAnime 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.124s;
}
@keyframes loadingAnime {
		0% {
				transform: translateX(-200px);
				opacity: 0;
		}
		70% {
				opacity: 1;
		}
		100% {
				transform: translateX(0px);
				opacity: 1;
		}
}
@media(max-width: 767px) {
		.loading_wait {
				font-size: 14px;
				letter-spacing: 2px;
		}
		.loading_run_chara, .loading_run_chara div {
				width: 200px;
		}
		.loading_run_chara {
				transform: translateY(-30px);
		}
}