@charset "UTF-8";

/* ============================================
   スクロールアニメーション
   ============================================ */

/* スクロールアニメーション基本クラス */
.sa {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
	transform: translateZ(0);
	will-change: opacity, transform;
}

.sa.show {
	opacity: 1;
	transform: translateZ(0);
}

/* アニメーション方向 */
.sa--up {
	transform: translate3d(0, 50px, 0);
}

.sa--up.show {
	transform: translate3d(0, 0, 0);
}

.sa--down {
	transform: translate3d(0, -50px, 0);
}

.sa--down.show {
	transform: translate3d(0, 0, 0);
}

.sa--left {
	transform: translate3d(50px, 0, 0);
}

.sa--left.show {
	transform: translate3d(0, 0, 0);
}

.sa--right {
	transform: translate3d(-50px, 0, 0);
}

.sa--right.show {
	transform: translate3d(0, 0, 0);
}

.sa--scale {
	transform: scale(0.8) translateZ(0);
}

.sa--scale.show {
	transform: scale(1) translateZ(0);
}

/* フェードイン */
.sa--fade {
	opacity: 0;
}

.sa--fade.show {
	opacity: 1;
}

/* パフォーマンス最適化：画面外のアニメーション停止 */
.sa:not(.in-view) {
	animation-play-state: paused !important;
}