@keyframes scrollDown {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		transform: translateY(10px);
		opacity: 0;
	}
}

/* ===========================
   共通設定
=========================== */
/* JS 有効時のみ初期状態を非表示にする */
.sa-js .scroll-animation-fade {
  opacity: 0;
  will-change: opacity, transform;
}

/* アニメーションを好まないユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  .sa-js .scroll-animation-fade,
  .sa-js .scroll-animation-zoom {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===========================
   フェードイン（下からふわっと）
=========================== */
.sa-js .scroll-animation-fade {
  transform: translateY(12px);
  transition:
    opacity 0.8s cubic-bezier(.22,.61,.36,1) 180ms,   /* デフォルト遅延 180ms */
    transform 0.8s cubic-bezier(.22,.61,.36,1) 180ms;
}

.scroll-animation-fade.is-inview {
  opacity: 1;
  transform: translateY(0);
}