/* =================================================================
 * c-page-title — ページサブヘッダー見出し（h1 top title）
 * Figma: スタイルガイド 5288:84268（標準コンポーネント h1 / 下層h1 ほか）
 *
 * 構成（縦積み）:
 *   .c-page-title__subtitle  和文サブタイトル（Noto Sans JP Bold）
 *   .c-page-title__main      タイトル行（タイトル＋任意の「関係者向け」バッジ）
 *     .c-page-title__title   大タイトル（英=Roboto Condensed 56/38px ／ 和=46/30px）
 *     .c-page-title__badge   「関係者向け」バッジ（任意）
 *   .c-page-title__line      アクセント下線（60×2px）
 *
 * Figma 変種 → モディファイア対応:
 *   下層h1                 … 基本形（左寄せ・key 色・英文 56/38px）
 *   下層h1 関係者向け      … --secondary（色）＋ badge
 *   下層h1 和文            … --ja（和文タイトル 46/30px）
 *   default / default_white … --center（SP のみ中央寄せ）／ --white（白）
 *   ※ Figma "default" は SP で 12/34px に圧縮されるが、実ページで使う下層h1の
 *     14/38px に統一している（圧縮が必要になったら別途モディファイアを追加）。
 *
 * 使い方: front.components.page-title（Blade）経由
 * =================================================================*/

.c-page-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;            /* 既定: 左寄せ（下層h1） */
  gap: 0;                             /* PC: 行間は line-height で確保（symbol 高さ 110px に一致） */
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  letter-spacing: var(--letter-spacing-heading);
}

.c-page-title__subtitle {
  font-size: var(--fs-body);          /* 16px */
  line-height: var(--lh-snug);        /* 1.5 */
  color: var(--color-key);
}

.c-page-title__main {
  display: flex;
  align-items: center;
  gap: 24rem;                          /* タイトル ↔ バッジ（PC） */
}

.c-page-title__title {
  margin: 0;
  font-family: var(--font-en-condensed);  /* 英文: Roboto Condensed */
  font-size: var(--fs-h1-pc);         /* 56px */
  line-height: var(--lh-snug);        /* 1.5 */
  color: var(--color-text-default);
}

.c-page-title__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 12rem;
  border-radius: var(--radius-sm);    /* 4px */
  background: var(--color-neutral-01);
  font-family: var(--font-jp);
  font-size: var(--fs-h5-pc);         /* 20px */
  line-height: var(--lh-snug);
  color: var(--color-white);
  white-space: nowrap;
}

.c-page-title__line {
  width: 60rem;
  height: 2rem;
  background: var(--color-key);
}

/* ---------- 和文タイトル（--ja） ---------- */
.c-page-title--ja .c-page-title__title {
  font-family: var(--font-jp);
  font-size: var(--fs-page-title-ja-pc);   /* 46px */
}

/* ---------- 関係者向け色（--secondary） ---------- */
.c-page-title--secondary .c-page-title__subtitle { color: var(--color-secondary); }
.c-page-title--secondary .c-page-title__line     { background: var(--color-secondary); }

/* ---------- 白（--white：濃色背景用） ---------- */
.c-page-title--white .c-page-title__subtitle { color: var(--color-white); }
.c-page-title--white .c-page-title__title    { color: var(--color-white); }
.c-page-title--white .c-page-title__line     { background: var(--color-white); }

/* ---------- SP（1023.98px 以下） ---------- */
@media (max-width: 1023.98px) {
  .c-page-title           { gap: 8rem; }
  .c-page-title__subtitle { font-size: var(--fs-body-sm); line-height: var(--lh-none); }  /* 14px / 1.0 */
  .c-page-title__main     { gap: 16rem; }
  .c-page-title__title    { font-size: var(--fs-h1-sp);  line-height: var(--lh-none); }   /* 38px / 1.0 */
  .c-page-title__badge    { font-size: var(--fs-body-sm); }                               /* 14px */
  .c-page-title--ja .c-page-title__title { font-size: var(--fs-page-title-ja-sp); }       /* 30px */

  /* default / default_white: SP のみ中央寄せ（PC は左寄せのまま＝Figma 準拠） */
  .c-page-title--center   { align-items: center; text-align: center; gap: 6rem; }
}

/* ---------- 下層キービジュアルのフェードイン ----------
 * Figma 5693:91011 指示: ロード時に h1（サブタイトル＋タイトル＋下線）を
 * 「下から上に全て同時に」ぬるりとフェードインさせる。
 * 適用範囲: renewal-subpage-hero の中の c-page-title のみ（page-hero partial 経由で
 * works/contact/products/news 全下層ヒーローに自動適用）。
 * prefers-reduced-motion: reduce 時は base.css のグローバル設定で自動的に無効化される。
 */
@keyframes c-page-title-rise {
  from { opacity: 0; transform: translateY(24rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.renewal-subpage-hero__inner > .c-page-title__subtitle,
.renewal-subpage-hero__inner > .c-page-title__main,
.renewal-subpage-hero__inner > .c-page-title__line {
  animation: c-page-title-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  will-change: opacity, transform;
}