/* アニメーションの初期状態（画面外・透明） */
.is-hidden {
  /* 透明 */
  opacity: 0;
  /* 下に少し移動 (translateY: Y軸方向に移動) */
  transform: translateY(20px);
  /* アニメーション中は表示されないようにする (任意) */
  visibility: hidden; 
}

/* アニメーション後の状態 (JavaScriptでこのクラスが付与される) */
.is-visible {
  /* アニメーションの定義 */
  animation: fade-up 0.8s ease-out forwards;
}

/* アニメーションのキーフレーム定義 */
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
    visibility: visible; /* アニメーション開始で表示 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

/* 遅延を付けるためのスタイル */
.delay-1 {
  animation-delay: 0.2s; /* 0.2秒遅延させて開始 */
}/* キーフレームアニメーションを定義 */
@keyframes fadeIn {
    from {
        opacity: 0; /* 開始: 透明 */
    }
    to {
        opacity: 1; /* 終了: 不透明 */
    }
}

.fade-in-box {
    /* アニメーションの適用 */
    animation: fadeIn 3s ease-in-out forwards; /* 'fadeIn'という名前のアニメーションを3秒かけて実行。ease-in-outは速度の変化、forwardsは終了状態を維持 */
}