@charset "UTF-8";

.mv_anime {
  opacity: 0; /* 最初は透明 */
  animation: fadeIn 0.7s ease-in forwards; /* アニメーション適用 */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* 少し下から */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 元の位置へ */
  }
}

/* --- MVの段階的フェードイン（上→下）--- */
/* 既存の .mv_anime はそのまま利用。tel/btnにも同じアニメ適用 */
.mv2508-txt .mv2508-txt-tel,
.mv2508-txt .mv2508-txt-btn {
  opacity: 0;
  animation: fadeIn 0.7s ease-in forwards;
}

/* 順番にディレイを付与（テキスト→電話→ボタン） */
.mv2508-txt > .mv_anime { animation-delay: 0s; }        /* 見出し（既存） */
.mv2508-txt .mv2508-txt-tel { animation-delay: .3s; }   /* 電話 */
.mv2508-txt .mv2508-txt-btn { animation-delay: .6s; }   /* ボタン */

/* ユーザーの設定を尊重（低減モーション） */
@media (prefers-reduced-motion: reduce) {
  .mv2508-txt .mv2508-txt-tel,
  .mv2508-txt .mv2508-txt-btn,
  .mv2508-txt > .mv_anime {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* スクロールイン用の初期状態 */
.js-io {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

/* 可視化されたらアニメーション */
.js-io.is-inview {
  animation: fadeIn 0.7s ease-out forwards;
}

/* （重複OK）フェードインのキーフレーム */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* MVの3要素は「見えたら」段階表示（テキスト→電話→ボタン） */
.mv2508 .mv_anime.is-inview     { animation-delay: 0s; }
.mv2508 .mv2508-txt-tel.is-inview  { animation-delay: .3s; }
.mv2508 .mv2508-txt-btn.is-inview  { animation-delay: .6s; }

/* 低減モーション対応 */
@media (prefers-reduced-motion: reduce) {
  .js-io,
  .js-io.is-inview {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 方案B：.is-inview が付くまではアニメを止める（付いたら通常再生） */
.mv_anime.js-io:not(.is-inview) { animation: none !important; }