/* CSS Document */
/* ************************/
/*		Now-Loading       */
/* ************************/
:root {
	--loading-size: 140px;
}
/* Now-Loading全体の背景 */
#dv_loading_bg {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background: #fff;
	z-index: 120;
}

/* Now-Loading全体のコンテナ */
#dv_loading_wrapper {
	position: relative;
	width: 100%;
	height: fit-content;
	margin-top: 150px;
}

/* Now-Loadingのテキスト */
#dv_loading_text {
	display: block;
	position: absolute;
	margin-left: 3px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #999;
	text-align: center;
	font-family: 'loading', sans-serif;
	font-size: 20px;
}

/* Now-Loadingのローディングアニメーション */
#dv_loading_content {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: var(--loading-size);
	height: var(--loading-size);
	margin: calc(var(--loading-size) * -0.5) 0 0 calc(var(--loading-size) * -0.5);
	border: 3px solid transparent;
	/* border-top-color: #cddefc;
	border-bottom-color: #cddefc; */
	border-top-color: #ababab;
	border-bottom-color: #ababab;
	border-radius: 50%;
	animation: loader 2s linear infinite;
}

/* ローディングアニメーション2 */
#dv_loading_content:before {
	content: "";
	position: absolute;
	left: 3px;
	right: 3px;
	top: 3px;
	bottom: 3px;
	border: 3px solid transparent;
	/* border-top-color: #ffdaa3;
	border-bottom-color: #ffdaa3; */
	border-top-color: #ccc;
	border-bottom-color: #ccc;
	border-radius: 50%;
	animation: loader 3s linear infinite;
}

/* ローディングアニメーション3 */
#dv_loading_content:after {
	content: "";
	position: absolute;
	left: 9px;
	right: 9px;
	top: 9px;
	bottom: 9px;
	border: 3px solid transparent;
	/* border-top-color: #fdb4ba;
	border-bottom-color: #fdb4ba; */
	border-top-color: #e3d7d8;
	border-bottom-color: #e3d7d8;
	border-radius: 50%;
	animation: loader 1.5s linear infinite;
}

/* FONT-FACE設定 LOADING  [Exan] */
@FONT-FACE {
	font-family: 'loading';
	src: url('../font/Exan.woff') format('woff');
}

/* ローディングアニメーション用keyframes */
@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}