@charset "UTF-8";

/* ローディング */
#loadingLogo {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	z-index: 10000;
	display: block;
	pointer-events: none;
	overflow: hidden;
	animation: 0s z-index0 4s forwards;
}

@keyframes z-index0 {
	0% {
		z-index: 10000;
	}
	100% {
		z-index: 0;
	}
}

.loading-bg-top,
.loading-bg-bottom {
	display: none;
	width: 100vw;
	height: 50vh;
	position: absolute;
	left: 0;
	z-index: 1001;
	background: rgb(0,0,0);
	transform: scaleY(100%);
}

.loading-bg-top {
	top: 0;
	transform-origin: left top;
}
.loading-bg-bottom {
	bottom: 0;
	transform-origin: left bottom;
}

#loadingLogo.show > .loading-bg-top {
	display: block;
	animation: fadetop-keyframes 1s ease-in 2.5s 1 forwards;
	-webkit-animation: fadetop-keyframes 1s ease-in 2.5s 1 forwards;
}
#loadingLogo.show > .loading-bg-bottom {
	display: block;
	animation: fadebottom-keyframes 1s ease-in 2.5s 1 forwards;
	-webkit-animation: fadebottom-keyframes 1s ease-in 2.5s 1 forwards;
}


#loadingLogo .loading-anime-img {
	display: none;
	color: #fff;
	position: absolute;
	z-index: 1003;
	opacity: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	width: 20%;
	max-width: 200px;
	animation: fadeinout-keyframes 1.5s ease-in 0.5s 1 forwards;
	-webkit-animation: fadeinout-keyframes 1.5s ease-in 0.5s 1 forwards;
}

#loadingLogo.show .loading-anime-img {
	display: block;
}

@keyframes fadetop-keyframes {
	0% {
		opacity: 1;
		transform: translateY(0);
		pointer-events: none;
	}
	100% {
		opacity: 0;
		transform: translateY(-100%);
	}
}
@keyframes fadebottom-keyframes {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(100%);
		pointer-events: none;
	}
}
@keyframes fadein-keyframes {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeinout-keyframes {
	0% {
		opacity: 0;
	} 
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

#loadingLogo.show ~ header,
#loadingLogo.show ~ main,
#loadingLogo.show ~ footer {
	opacity: 0;
	animation: fadein-blur 1.5s 2.5s ease-out forwards;
}

@keyframes fadein-blur {
	0% {
		opacity: 0;
		filter: hue-rotate(180deg) blur(10px);
	}
	30% {
		filter: hue-rotate(30deg) grayscale(10) ;
	}
	90% {
		filter: hue-rotate(0deg) grayscale(5) blur(0);
	}
	100% {
		opacity: 1;
		filter: hue-rotate(0deg) grayscale(0);
	}
}

/* #loadingLogo.show ~ main > #head-image {
	opacity: 0;
	animation: fadein-keyframes 1.5s 3s ease-out forwards;
} */