@charset "utf-8";
.loading_base {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 5000;
		background: #fff;
}
.loading_logo {
		width: 150px;
		margin: auto;
		position: absolute;
		top: calc(50% - 75px);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
}
.loading_logo img {
		width: 100%;
		height: auto;
}
@media(max-width: 767px) {
		.loading_logo {
				width: 100px;
				margin: auto;
				top: calc(50% - 50px);
		}
}
.kv_bg div:not(.kv_line):not(.kv_knife1):not(.kv_knife2) {
		opacity: 0;
		transition: opacity 0.8s;
}
.kv_catch_gr div {
		opacity: 0;
		transition: opacity 0.95s;
}
.kv_bg div.kv_skebo {
		transition-delay: 0.2s !important
}
.kv_bg div.kv_tennis {
		transition-delay: 0.35s !important
}
.kv_bg div.kv_ingen {
		transition-delay: 0.38s !important
}
.kv_bg div.kv_bath {
		transition-delay: 0.4s !important
}
.kv_bg div.kv_cake {
		transition-delay: 0.6s !important
}
.kv_catch-1 {
		transition-delay: 1s !important
}
.kv_catch-2 {
		transition-delay: 1s !important
}
.kv_catch-3 {
		transition-delay: 1.5s !important
}
.isStart .kv_bg div, .isStart .kv_catch_gr div {
		opacity: 1 !important;
}
.lineSVG {
		fill: none;
		stroke: white;
		stroke-width: 70;
		/* stroke-linecap: round; */
		stroke-linejoin: round;
		stroke-miterlimit: 10;
}
.drawLine {
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000;
}
.isStart .drawLine {
		animation: drawAndErase 2s forwards;
}
@keyframes drawAndErase {
		0% {
				stroke-dashoffset: 1000;
		}
		100% {
				stroke-dashoffset: 0;
		}
}
.fadeInNml {
		opacity: 0;
		transition: opacity 0.4s;
}
.fadeInNmlActive {
		opacity: 1;
}
@media(max-width: 767px) {
		.lineSVG {
				fill: none;
				stroke: white;
				stroke-width: 20;
				/* stroke-linecap: round; */
				stroke-linejoin: round;
				stroke-miterlimit: 10;
		}
		.isStart .drawLine {
				animation: drawAndErase 0.45s linear forwards;
		}
		.main_inner.isStart .drawLine {
				animation: drawAndErase 0.35s linear forwards;
				animation-delay: 0.6s !important
		}
}