@charset 'UTF-8';

/*----------------------------------------
	scroll effect CSS
-----------------------------------------*/

:root {
	--easing: cubic-bezier(0.33, 0.01, 0.02, 0.98);
	--easing2: cubic-bezier(.23,.21,.62,1.01);
}

/* scroll_up 下から上へ出現 */
.scroll_up {
	opacity: 0;
	transform: translateY(100px);
	transition: opacity 1s var(--easing), transform 1s var(--easing);
}

.scroll_up.active {
	opacity: 1.0;
	transform: translateY(0);
}

/* scroll_up 下から上へ出現 */
.scroll_up_slow {
	opacity: 0;
	transform: translateY(75px);
	transition: opacity 1.5s var(--easing2), transform 1.5s var(--easing2);
}

.scroll_up_slow.active {
	opacity: 1.0;
	transform: translateY(0);
}

/* scroll_right 右から出現 */
.scroll_right {
	opacity: 0;
	transform: translateX(100px);
	transition: opacity 2s var(--easing), transform 2s var(--easing);
}

.scroll_right.active {
	opacity: 1.0;
	transform: translateX(0);
}

/* scroll_left 左から出現 */
.scroll_left {
	opacity: 0;
	transform: translateX(-100px);
	transition: opacity 2s var(--easing), transform 2s var(--easing);
}

.scroll_left.active {
	opacity: 1.0;
	transform: translateX(0);
}

/* opacity */
.opacity {
	opacity: 0;
	transition: opacity 2s var(--easing);
}

.opacity.active {
	opacity: 1.0;
}

/* fade_in ぼかし */
.fade_in {
	filter: blur(10px);
	opacity: 0;
	transition: opacity 1s var(--easing), filter 1s var(--easing);
}

.fade_in.active {
	filter: blur(0);
	opacity: 1.0;
}

/* scale_down */
.scale_down {
	scale: 1.3;
	opacity: 0;
	transition: opacity 1s ease-in-out, scale 1s ease-in-out;
}

.scale_down.active {
	scale: 1.0;
	opacity: 1.0;
}

/* scroll_up 下から上へ出現 + fade_in ぼかし */
.fade_up {
	transform: translateY(100px);
	filter: blur(10px);
	opacity: 0;
	transition: opacity 1s var(--easing), filter 1s var(--easing), transform 1s var(--easing);
}

.fade_up.active {
	transform: translateY(0);
	filter: blur(0);
	opacity: 1.0;
}

/* scale_down + fade_in ぼかし */
.fade_scale {
	scale: 1.05;
	filter: blur(10px);
	opacity: 0;
	transition: opacity 1.5s var(--easing), filter 1.5s var(--easing), scale 1.5s var(--easing);
}

.fade_scale.active {
	scale: 1;
	filter: blur(0);
	opacity: 1.0;
}

/* 下から上へ出現 + 白黒からカラーへ変化 */
.effect_monochrome {
	opacity: 0.75;
	filter: grayscale(100%);
	transition: opacity 1s var(--easing), filter 2s var(--easing) 0.5s;
}

.effect_monochrome.active {
	opacity: 1.0;
	filter: grayscale(0%);
}

/* SP専用 */
@media (width <=800px) {
	.opacity_sp {
		opacity: 0;
		transition: opacity 2s var(--easing);
	}

	.opacity_sp.active {
		opacity: 1.0;
	}
}

/* 遅延 共通 */
.delay02s {
	transition-delay: 0.2s;
}

.delay03s {
	transition-delay: 0.3s;
}

.delay04s {
	transition-delay: 0.4s;
}

.delay06s {
	transition-delay: 0.6s;
}

.delay08s {
	transition-delay: 0.8s;
}

@media (width <=800px) {
	.sp-cancel {
		transition-delay: 0s !important;
	}
}