@charset "utf-8";

.svg-defs {
	display: none;
}

path,
circle {
	fill: #fff;
}

.loading_wrap {
	position: fixed;
	top: 48%; 
	left: 50%; 
	-webkit-transform: translate(-50%, -50%); 
	transform: translate(-50%, -50%);
	z-index: 10000;
	width: 96px;
	height: 140px;
	/* animation: wide 0.7s forwards ease-out 2.2s; */
}

.loading_wrap .relative {
	position: relative;
	width: 100%;
	height: 100%;
}

.loading_logo {
	position: absolute;
	left: 0;
	top: 0;
	width: 96px;
	height: 95px;
	background: #000;
	animation: slideIn2 1s forwards;
	animation-delay: 1s;
}

.loading_logo svg {
	width: 100%;
	height: auto;
}

.loading_logo > div {
	position: absolute;
	opacity: 0;
}

.loading_logo_parts1 {
	width: 27px;
	height: 70px;
	animation: parts1 0.5s forwards ease-out;
}

.loading_logo_parts2 {
	width: 49px;
	height: 35px;
	animation: parts2 0.5s forwards ease-out;
}

.loading_logo_parts3 {
	width: 64px;
	height: 40px;
	animation: parts3 0.5s forwards ease-out;
}

.loading_logo_parts4 {
	width: 27px;
	height: 69px;
	animation: parts4 0.5s forwards ease-out;
}

.loading_logo_parts5 {
	width: 59px;
	height: 39px;
	animation: parts5 0.5s forwards ease-out;
}

.loading_logo_parts6 {
	width: 74px;
	height: 47px;
	animation: parts6 0.5s forwards ease-out;
}

.loading_logo_parts7 {
	left: 38px;
	top: 36px;
	width: 8px;
	height: 8px;
	animation: parts7 0.6s forwards 0.3s;
}

.loading_logo_parts8 {
	right: 0;
	top: -6px;
	width: 6px;
	height: 6px;
	animation: parts8 0.6s forwards 0.6s;	
}

/* IE11 にのみ適用される */
@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop, .loading_logo_parts7 {
		top: 40px;
	}
	
	*::-ms-backdrop, .loading_logo_parts8 {
		top: 0;
	}
}

@-webkit-keyframes parts1 {
	0% { left: 0; top: -30px; opacity: 0; }
	100% { left: 27px; top: 0; opacity: 1; }
}

@keyframes parts1 {
	0% { left: 0; top: -30px; opacity: 0; }
	100% { left: 27px; top: 0; opacity: 1; }
}

@-webkit-keyframes parts2 {
	0% { left: -14px; top: 0; opacity: 0; }
	100% { left: 6px; top: 29px; opacity: 1; }
}

@keyframes parts2 {
	0% { left: -14px; top: 0; opacity: 0; }
	100% { left: 6px; top: 29px; opacity: 1; }
}

@-webkit-keyframes parts3 {
	0% { left: -20px; bottom: 0; opacity: 0; }
	100% { left: 0; bottom: 20px; opacity: 1; }
}

@keyframes parts3 {
	0% { left: -20px; bottom: 0; opacity: 0; }
	100% { left: 0; bottom: 20px; opacity: 1; }
}

@-webkit-keyframes parts4 {
	0% { left: 0; bottom: -20px; opacity: 0; }
	100% { left: 29px; bottom: 0; opacity: 1; }
}

@keyframes parts4 {
	0% { left: 0; bottom: -20px; opacity: 0; }
	100% { left: 29px; bottom: 0; opacity: 1; }
}

@-webkit-keyframes parts5 {
	0% { right: -27px; bottom: 0; opacity: 0; }
	100% { right: 7px; bottom: 24px; opacity: 1; }
}

@keyframes parts5 {
	0% { right: -27px; bottom: 0; opacity: 0; }
	100% { right: 7px; bottom: 24px; opacity: 1; }
}

@-webkit-keyframes parts6 {
	0% { right: -50px; top: 0; opacity: 0; }
	100% { right: 0; top: 12px; opacity: 1; }
}

@keyframes parts6 {
	0% { right: -50px; top: 0; opacity: 0; }
	100% { right: 0; top: 12px; opacity: 1; }
}

@-webkit-keyframes parts7 {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes parts7 {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@-webkit-keyframes parts8 {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes parts8 {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}


.loading_text {
	position: absolute;
	right: 0;
	top: 31px;
	height: 40px;
	margin: auto 0 auto 15px;

}

.loading_text .loading_text_wrap {
	width: 153px;
	height: 40px;
	animation: slideIn 1s forwards;
	animation-delay: 1s;
	opacity: 0;
}

.loading_wrap p.text {
	position: absolute;
	bottom: 0;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-size: 18px;
	width: 325px;
	left: -86px;
	opacity: 0;
	animation: fadeIn 1s forwards;
	animation-delay: 1s;
}

/*
.loading_text .loading_text_wrap svg {
	width: 153px;
	height: auto;
	opacity: 0;
	animation: fadeIn 0.5s forwards;
	animation-delay: 1s;
}
*/

@-webkit-keyframes wide {
	0% { width: 96px; }
	100% { width: 264px; }
}

@keyframes wide {
	0% { width: 96px; }
	100% { width: 264px; }
}

@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

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

@-webkit-keyframes slideIn {
	0% { transform: translateX(-10%); opacity: 0; }
	100% { transform: translateX(60%); opacity: 1; }
}

@keyframes slideIn {
	0% { transform: translateX(-10%); opacity: 0; }
	100% { transform: translateX(60%); opacity: 1; }
}

@-webkit-keyframes slideIn2 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-70%); }
}

@keyframes slideIn2 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-70%); }
}

/* ------------------------------------------------------------ mobile */

@media only screen and (max-width:640px){
	.loading_wrap {
		left: 48%;
	}
	.loading_text .loading_text_wrap {
		left: 48%;
	}
	.loading_wrap p.text {
		font-size: 16px;
		left: -80px;
	}
}