/* =============================================
   animation.css
   @keyframes 定義とアニメーション用クラスのみ
============================================= */


/* =============================================
   FADE-UP（スクロールトリガー）
   JS側で .is-visible を付与することで発火
============================================= */
.fade-up {
  opacity: 0;
  transform: translateY(1.5rem); /* 24px */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =============================================
   HERO KEYFRAMES
============================================= */

/* ① 背景：フェードイン＋スケールダウン */
@keyframes hero-bg-reveal {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ② テキスト全体：ふわっと上へ */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(1.25rem); /* 20px */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ⑤ 見出し強調の下線：左から右へ伸びる */
@keyframes hero-underline-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}


/* =============================================
   ① 背景（.hero::before）
   既存の background-image / filter はそのまま維持し、
   animation プロパティのみ追加
============================================= */
.hero::before,.page-hero {
  animation: hero-bg-reveal 1.2s ease-out both;
}


/* =============================================
   ② テキスト全体（.hero__content）
   delay 0.3s でふわっと上がりながら表示
============================================= */
.hero__content {
  animation: hero-fade-up 0.8s ease-out 0.3s both;
}


/* =============================================
   ③ eyebrow（.hero__eyebrow）
   コンテンツより少し遅れて（0.4s）表示
   translateY のみ（左右スライドなし）
============================================= */
.hero__eyebrow {
  animation: hero-fade-up 0.7s ease-out 0.4s both;
}


/* =============================================
   ④ CTA グループ（.hero__cta-group）
   最後に表示（0.8s）して視線を誘導
============================================= */
.hero__cta-group {
  animation: hero-fade-up 0.7s ease-out 0.8s both;
}


/* =============================================
   ⑤ 見出し強調テキスト下線（.hero__headline span）
   下線を左から右へ伸ばすために ::after 疑似要素を使用
   ※ index.css 側の display:block / color はそのまま維持
============================================= */
.hero__headline span {
  position: relative;
  display: inline-block; /* ::after が正しく広がるよう block → inline-block に */
}

.hero__headline span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.1em;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  transform: scaleX(0);
  transform-origin: left center;
  animation: hero-underline-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.0s both;
}


/* =============================================
   モバイル：アニメーション軽量化
   reduced-motion 設定のユーザーへの配慮
============================================= */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero__content,
  .hero__eyebrow,
  .hero__cta-group,
  .hero__headline span::after {
    animation: none;
  }

  .hero::before    { opacity: 1; transform: scale(1); }
  .hero__content   { opacity: 1; transform: translateY(0); }
  .hero__eyebrow   { opacity: 1; transform: translateY(0); }
  .hero__cta-group { opacity: 1; transform: translateY(0); }
  .hero__headline span::after { transform: scaleX(1); }
}

/* =============================================
   カルーセルカード：フェードイン
============================================= */
@keyframes card-slide-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ハンバーガー開閉 */
@keyframes sp-nav-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ニュース行：ホバー時のアンダーライン */
.news__item {
  transition: background 0.18s;
}