/* ==========================================
   ここからアニメーションのCSS
========================================== */
/* アニメーションの初期状態（下方に配置、透明） */
.fade-in-target {
  opacity: 0;
  transform: translateY(60px);

  /* イージングを cubic-bezier(0.15, 1.4, 0.4, 1) に変更。
     最初の数値を小さくすることで、動き出しの「初速」を大幅に上げています。
  */
  transition: 
    opacity 2.0s cubic-bezier(0.15, 1.4, 0.4, 1), 
    transform 2.0s cubic-bezier(0.15, 1.4, 0.4, 1);
}

/* 画面内に入った時の状態（元の位置に戻る） */
.fade-in-target.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================
   ここから：順番に出すための時間差（ディレイ）設定
========================================== */
.fade-in-target.delay-1 {
  transition-delay: 0s;     /* 1つ目はすぐ開始 */
}

.fade-in-target.delay-2 {
  transition-delay: 0.2s;   /* 2つ目は0.2秒待ってから開始 */
}

.fade-in-target.delay-3 {
  transition-delay: 0.4s;   /* 3つ目は0.4秒待ってから開始 */
}