@charset "utf-8";

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

  /* 標準的な心地よいフェードアウト（ease-out）に変更。時間は2.0秒だと少し長いため1.0秒に調整（お好みで） */
  transition: 
    opacity 1.0s ease-out, 
    transform 0.5s ease-out;
}

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

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

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

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