/* 初期状態（JavaScriptが動作しない場合のフォールバック） */
.scroll-fade {
  opacity: 1;
  /* フォールバック：最初から表示 */
}

/* JavaScript動作時の初期状態 */
.js-enabled .scroll-fade {
  opacity: 0;
}

.js-enabled .scroll-fade.delay-1.is-visible {
  animation-delay: 9.4s !important;
}

.js-enabled .scroll-fade.delay-2.is-visible {
  animation-delay: 9.6s !important;
}

.js-enabled .scroll-fade.delay-3.is-visible {
  animation-delay: 9.8s !important;
}

.js-enabled .scroll-fade.delay-4.is-visible {
  animation-delay: 10.7s !important;
}

.js-enabled .scroll-fade.delay-5.is-visible {
  animation-delay: 11.2s !important;
}

.js-enabled .scroll-fade.delay-6.is-visible {
  animation-delay: 11.7s !important;
}

/* アニメーション実行状態 */
.scroll-fade.is-visible {
  animation: simpleFadeIn 3s ease forwards;
}

/* キーフレーム */
@keyframes simpleFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 左からスライドインアニメーション */

/* 初期状態（JavaScriptが動作しない場合のフォールバック） */
.scroll-slide-left {
  opacity: 1;
  transform: translateX(0);
}

/* JavaScript動作時の初期状態 */
.js-enabled .scroll-slide-left {
  opacity: 0;
  transform: translateX(-60px);
}

/* アニメーション実行状態 */
.scroll-slide-left.is-visible {
  animation: slideInFromLeft 2.5s ease forwards;
}

/* キーフレーム */
@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 右からスライドインアニメーション */

/* 初期状態（JavaScriptが動作しない場合のフォールバック） */
.scroll-slide-right {
  opacity: 1;
  transform: translateX(0);
}

/* JavaScript動作時の初期状態 */
.js-enabled .scroll-slide-right {
  opacity: 0;
  transform: translateX(60px);
  overflow: hidden;
}

/* アニメーション実行状態 */
.scroll-slide-right.is-visible {
  animation: slideInFromRight 2.5s ease forwards;
}

/* キーフレーム */
@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 下からスライドインアニメーション */

/* 初期状態（JavaScriptが動作しない場合のフォールバック） */
.scroll-slide-up {
  opacity: 1;
  transform: translateY(0);
}

/* JavaScript動作時の初期状態 */
.js-enabled .scroll-slide-up {
  opacity: 0;
  transform: translateY(60px);
}

/* アニメーション実行状態 */
.scroll-slide-up.is-visible {
  animation: slideInFromBottom 2s ease forwards;
}

/* キーフレーム */
@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}