@charset "utf-8";


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

* LOADING - COMPONENT *

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

/* ローディンング終了のスタイル ================================================*/
body .loading-wrap {
	width: 100%;
	height: 100%;
	background: #fafafc;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 20000;
	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%;
}
.loading-wrap .inner > div {
	transform: translateY(-8rem);
}
/*================================================================================================

* PATTERN 01 *	回転するサークル

================================================================================================*/
.loading-wrap .img-container {
	width: 65px;
	height: 65px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 0.5rem;
}

.loading-wrap .img-container .img {
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
}
.loading-wrap .img-container .img.no01 {
	background: url(../../img/logo/loadnig01.svg)no-repeat center / contain;
	z-index: 5;
}
.loading-wrap .img-container .img.no02 {
	background: url(../../img/logo/loadnig02.svg)no-repeat center / contain;
	animation-duration: 5s;
	animation-name: pattern01;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	z-index: 3;
}

@keyframes pattern01 {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}


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

* PATTERN 03 *	テキストアニメーション

================================================================================================*/
.loading-wrap .text {
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 3px;
}
.loading-wrap .text span {
	color: #204A95;
	opacity: 0;
	animation-duration: 2s;
	animation-delay: 0s;
	animation-name: pattern03;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

		/* ディレイ設定 ================================================*/
		.loading-wrap .text span.no01 {
			animation-delay: 0s;
		}
		.loading-wrap .text span.no02 {
			animation-delay: 0.1s;
		}
		.loading-wrap .text span.no03 {
			animation-delay: 0.2s;
		}
		.loading-wrap .text span.no04 {
			animation-delay: 0.3s;
		}
		.loading-wrap .text span.no05 {
			animation-delay: 0.4s;
		}
		.loading-wrap .text span.no06 {
			animation-delay: 0.5s;
		}
		.loading-wrap .text span.no07 {
			animation-delay: 0.6s;
		}
		.loading-wrap .text span.no08 {
			animation-delay: 0.7s;
		}
		.loading-wrap .text span.no09 {
			animation-delay: 0.8s;
		}
		.loading-wrap .text span.no10 {
			animation-delay: 0.9s;
		}
		.loading-wrap .text span.no11 {
			animation-delay: 1s;
		}

@keyframes pattern03 {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}