@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;
}

/* 遅延 共通 */
.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 screen and (max-width: 768px) {
	.sp-cancel {
		transition-delay: 0s !important;
	}
}