@charset "utf-8";

/*=============================
　　　　loading
===============================*/
#loading {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	opacity: 1;
}
#loading.active {
	animation: loading_bg_fadeout 0.5s linear 2.5s forwards;
}
#loading.hidden {
	animation: none;
	display: none;
}
#loading img {
	height: auto;
	width: 240px;
	z-index: 999999;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	opacity: 0;
	animation: loading_logo_fadein-out 2.5s ease 0.5s forwards;
}

@media screen and (max-width: 540px) {
	#loading img {
		width: 180px;
	}
}
@keyframes loading_bg_fadeout {
	0% {
		display: block;
		opacity: 1;
		left: 0;
	}
	99% {
		display: block;
		left: 0;
		opacity: 0;
	}
	100% {
		display: none;
		left: -100%;
		opacity: 0;
	}
}
@keyframes loading_logo_fadein-out {
	0% {
		display: block;
		opacity: 0;
	}
	25% {
		display: block;
		opacity: 1;
	}
	75% {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	100% {
		opacity: 0;
		display: none;
	}
}

/* メニュー背景出現消失 */
@keyframes menu_bg_fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes menu_bg_fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes menu_bg_slidein {
	0% {
		transform: translateX(101%);
	}
	100% {
		transform: translateX(0%);
	}
}
@keyframes menu_bg_slideout {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(101%);
	}
}

/* ヘッダー出現 */
@keyframes header_fadein {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}


/*=============================
　　　　common
===============================*/

/* 通常の出現 */
@keyframes normal_fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* ボケから出現 */
@keyframes blur_fadein {
	0% {
		filter: blur(10px);
		opacity: 0;
	}
	100% {
		filter: blur(0);
		opacity: 1;
	}
}

/* 縮小しながら出現 */
@keyframes zoom_out_fadein {
	0% {
		transform: scale(1.05);
		opacity: 0;
	}
	100% {
		transform: scale(1.0);
		opacity: 1;
	}
}

/*=============================
　　　　colorsplace
===============================*/

/* ロゴ回転 */
@keyframes logo_rotation {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* ハンバーガーメニュー出現 */
@keyframes hbg_menu_fadein {
	0% {
		transform: translateY(2vw);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}