@charset "utf-8";


/* ローディング中一瞬ページが見えてしまう対策 ================================================*/
.root-wrap.nowloading {
	opacity: 0;
}
.root-wrap  {
	opacity: 1;
}
/*================================================================================================

* LOADING - COMPONENT *

================================================================================================*/

/* ローディンング終了のスタイル ================================================*/
body .loading-wrap {
	width: 100%;
	height: 100%;
	background: #F6F6EE;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 9999;
	padding: 2rem;
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s ease;
}

/* ローディンング中のスタイル ================================================*/
body.trans .loading-wrap {
	opacity: 1;
	pointer-events: auto;
	transition: all 0.5s ease;
}

.loading-wrap .inner {
	width: 100%;
	height: 100%;
}

/* iOS用ローディング強制解除 ================================================*/
html.ios body .loading-wrap {
	background: none;
	padding: 0rem;
	pointer-events: none;
}
body .loading-ios-wrap {
	width: 100%;
	height: 100%;
	padding: 0rem;
	pointer-events: none;
}
html.ios body .loading-ios-wrap {
	width: 100%;
	height: 100%;
	background: #F6F6EE;/*背景色合わせる*/
	padding: 2rem;
	pointer-events: none;
}

html.ios body .loading-ios-wrap {
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-name: loadinginios;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

html.ios body.trans .loading-ios-wrap {
	animation-duration: 2.5s;
	animation-delay: 0s;
	animation-name: loadingoutios;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes loadingoutios {
	0%{
		pointer-events: auto;
		opacity: 1;
	}
	80%{
		pointer-events: auto;
		opacity: 1;
	}
	81%{
		pointer-events: auto;
		opacity: 1;
	}
	99%{
		pointer-events: auto;
	}
	100%{
		pointer-events: none;
		opacity: 0;
	}
}
@keyframes loadininios {
	0%{
		pointer-events: auto;
		opacity: 0;
	}
	80%{
		pointer-events: auto;
		opacity: 0;
	}
	81%{
		pointer-events: auto;
		opacity: 0;
	}
	99%{
		pointer-events: auto;
	}
	100%{
		pointer-events: none;
		opacity: 1;
	}
}

/*================================================================================================

* LOADING CURTAIN - COMPONENT *

================================================================================================*/
body .loading-curtain-wrap {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 99999;
	pointer-events: none;
}

/*================================================================================================

* LOADING CURTAIN - PATTERN 03 *	上に閉まる

================================================================================================*/

body .loading-curtain-wrap.pattern03 > div {
	width: 100%;
	height: 100%;
	background: #F6F6EE;
	position: absolute;margin: auto;top: 0;right: auto;bottom: 0;left: 0;
	transform: translateY(-110%);
	transition: all 2s ease;
	pointer-events: none;
}
		body.trans .loading-curtain-wrap.pattern03 > div {
			transform: translateY(0%);
			transition: all 2s ease;
			pointer-events: none;
		}

body.trans .loading-wrap .pattern00 {
	width: 100%;
	margin: auto;
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	transform: translateY(-50%);
}
body .loading-wrap .pattern00 .logo {
	width: 150px;
	height: 100%;
	margin: 0 auto;
	animation-duration: 2s;
	animation-delay: 0s;
	animation-name: loadinglogo;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes loadinglogo {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}