@charset "utf-8";
.no_scroll {
		overflow: hidden;
		height: 100vh;
}
.loading_base {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 9999;
		background: #F2F2F2;
}
.loading_logo {
		width: 600px;
		margin: auto;
		position: absolute;
		top: calc(50% - 60px);
		left: calc(50% - 300px);
}
.loading_logo img {
		width: 100%;
		height: auto;
}
.loading_logo_left {
		width: 100%;
}
.loading_logo .loading_logo_right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
}
.loading_logo .loading_plus {
		width: 48px;
		height: 48px;
		position: absolute;
		top: 5px;
		left: 228px;
		opacity: 0;
		transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
		transform: rotate(-180deg);
}
.loading_plus .loading_plus_bar-1, .loading_plus .loading_plus_bar-2 {
		position: absolute;
		top: 22.5px;
		left: 0;
		width: 48px;
		height: 3px;
}
.loading_plus .loading_plus_bar-1 {
		transform: rotate(45deg)
}
.loading_plus .loading_plus_bar-2 {
		transform: rotate(-45deg)
}
.loading_plus .loading_plus_bar-1::before, .loading_plus .loading_plus_bar-2::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 48px;
		height: 3px;
		background: #53565a;
		transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.loading_plus .loading_plus_bar-1::before {
		transform-origin: center center;
		transition-delay: 0.2s;
}
.loading_plus .loading_plus_bar-2::before {
		transform-origin: center center;
}
.loading_logo_left {
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
		transform: translateY(30px);
		opacity: 0;
}
.loading_logo_right {
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
		transition-delay: 0.1s;
		transform: translateY(30px);
		opacity: 0;
}
.isStart .loading_logo_left, .isStart .loading_logo_right {
		transform: translateY(0px);
		opacity: 1;
}
.isStart .loading_plus {
		transform: rotate(0deg);
		opacity: 1
}
@media(max-width: 767px) {
		.loading_logo {
				transform: scale(0.4);
				top: calc(50% - 100px);
		}
}
/* =========== */
.kv_logo, .kv_lead {
		opacity: 0;
		transition: opacity 0.8s;
}
.kv_lead {
		transition-delay: 0.2s
}
.kvActive .kv_logo, .kvActive .kv_lead, .kvActive .kv_figure div {
		opacity: 1;
}
.kv_figure div {
		opacity: 0;
		transition: opacity 1s;
}
.kv_figure .kv-2, .kv_figure .kv-6 {
		transition-delay: 0.4s
}
.kv_figure .kv-3, .kv_figure .kv-4, .kv_figure .kv-5 {
		transition-delay: 0.8s
}
.kv_figure .kv-8 {
		transition-delay: 1.2s
}
@media(max-width: 767px) {
		.kv_figure .kv-1, .kv_figure .kv-5 {
				transition-delay: 0s
		}
		.kv_figure .kv-2, .kv_figure .kv-3, .kv_figure .kv-4 {
				transition-delay: 0.4s
		}
		.kv_figure .kv-6 {
				transition-delay: 0.8s;
		}
}
.product_grid_item {
		transition: opacity 0.6s;
		opacity: 0;
}
.product_grid_item.itemActive {
		opacity: 1;
}
.fadeInActive {
		opacity: 1;
}
.product_end_bg-1, .product_end_bg-3, .section-4_bg_item-1 .up, .introduction_figure_bg-2 {
		animation: cloud1 1.5s ease-in-out infinite alternate;
}
.product_end_bg-2, .product_end_bg-4, .section-4_bg_item-1 .bottom, .introduction_figure_bg-3 {
		animation: cloud2 1.5s ease-in-out infinite alternate;
}
.section-5_bg-2 {
		animation: cloud2 1.5s ease-in-out infinite alternate;
}
@keyframes cloud1 {
		0% {
				transform: translateY(0px)
		}
		100% {
				transform: translateY(20px)
		}
}
@keyframes cloud2 {
		0% {
				transform: translateY(20px)
		}
		100% {
				transform: translateY(0px)
		}
}
.moomin_header_logo {
		transition: opacity 0.4s;
		opacity: 0;
}
.moomin_header_logo.isActive {
		opacity: 1
}