@charset "utf-8";
/* CSS Document */

.fv_area .logoAnimeBox {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 400px;
	height: 400px;
	display: table-cell;
	transform: translateX(-50%) translateY(-50%);
	opacity: 1.0;
}

.loaded .fv_area .logoAnimeBox {
	animation-name: animeBoxDelete;
	animation-delay: 4.0s;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
}

@keyframes animeBoxDelete {
	from {
		opacity: 1.0;
	}
	to {
		opacity: 0.0;
	}
}

/* ==========================
   border01 / border02 / border03 / sun
========================== */
.fv_area .logoAnimeBox .border01,
.fv_area .logoAnimeBox .border02,
.fv_area .logoAnimeBox .border03,
.fv_area .logoAnimeBox .sun {
	position: absolute;
	width: 400px;
	height: 400px;
}

/* --------------------------
   border01 確認対象
-------------------------- */
.fv_area .logoAnimeBox .border01 {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
}

/* border02 は一旦停止 */
.fv_area .logoAnimeBox .border02 {
	left: 50%;
	top: 0;
	transform: translate(-50%, -14%);
	z-index: 1;
}

/* SVG */
.fv_area .logoAnimeBox .border01 svg,
.fv_area .logoAnimeBox .border02 svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* path / arc */
.fv_area .logoAnimeBox .arc {
	fill: none;
	stroke: #fff;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	stroke-linecap: butt;
}

/* 背景円（確認中は非表示） */
.loaded .fv_area .logoAnimeBox .border03 {
	left: 50%;
	top: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background-color: #3a3a3a;
	z-index: 2;
}

/* 太陽（確認中は非表示） */
.loaded .fv_area .logoAnimeBox .sun {
	left: 50%;
	top: 50%;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(0);
	animation-name: sunRotate;
	animation-duration: 2.0s;
	animation-delay: 1.5s;
	animation-timing-function: linear;
	z-index: 2;
}

.loaded .fv_area .logoAnimeBox .sunIn {
	display: table-cell;
	background-color: #d82700;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	animation-name: sunIn;
	animation-delay: 1.5s;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes sunRotate {
	from {
		transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	}
	to {
		transform: translateX(-50%) translateY(-50%) rotate(0);
	}
}

@keyframes sunIn {
	from {
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		opacity: 1.0;
	}
	to {
		left: 0;
		top: 0;
		transform: translateX(10%) translateY(-50%);
		opacity: 1.0;
	}
}

/* ロゴ */
.fv_area .logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	opacity: 0;
	width: 400px;
}

.loaded .fv_area .logo {
	animation-name: logoApper;
	animation-delay: 6.0s;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

.fv_area .logo img {
	width: 100%;
	height: auto;
}

@keyframes logoApper {
	from {
		opacity: 0.0;
	}
	to {
		opacity: 1.0;
	}
}