/* p-fv — 下層ページFV（Figma 3191:32734 実測値・全てトークン参照） */

.p-fv {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26.25rem; /* 420px */
  overflow: clip;
}

/* 重なり順：背景写真 → 黒25%オーバーレイ → タイトル。
   ::before は要素の最初の子として生成されるため、後から来る絶対配置の <img> に
   塗り重ねられてしまう。z-index を明示して順序を確定させる。 */
.p-fv__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 黒25%オーバーレイ（Figma rgba(0,0,0,0.25)） */
.p-fv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-overlay-dark);
}

.p-fv__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-40);
}

.p-fv__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  text-align: center;
}

/* ==========================================================================
   TOP版（Figma 3191:23855 / 1440x560）
   写真は暗幕なし。右寄せの縦書きキャッチコピーに text-shadow で可読性を確保。
   ========================================================================== */
.p-fv--top {
  height: 35rem; /* 560px */
}

/* TOPは暗幕なし（Figmaにオーバーレイ要素が無い） */
.p-fv--top::before {
  content: none;
}

.p-fv--top .p-fv__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* .p-fv の高さは確定値（35rem/25rem）なので % が解決できる。
     縦書きの「行の長さ」＝インラインサイズはこの高さを基準に決まるため、
     高さを確定させないと height:auto の循環参照になり、エンジンによって
     0 になったり max-content で溢れたりする（iOS Safari で崩れる原因）。 */
  height: 100%;
}

/* 縦書きキャッチを stretch させず、内容サイズのまま上下中央に置く。
   stretch すると縦書きのインラインサイズ（＝height）が親いっぱいに伸びる。 */
.p-fv--top .p-fv__body {
  display: flex;
  align-items: center;
  height: 100%;
}

/* 縦書き（vertical-rl）では flex を使わない。
   writing-mode と flex を同じ要素に併用すると主軸の判定がエンジン間で揺れ、
   iOS Safari では行が右→左ではなく上→下に積まれて画面外まで溢れる。
   ブロックレイアウトなら子ブロックが素直に右→左へ積まれるので、
   行間は margin-block-start（縦書きでは水平方向）で作る。 */
.p-fv__catch {
  display: block;
  margin: 0;
  writing-mode: vertical-rl;
  max-height: 100%; /* 縦書きでは「1行の長さ」の上限。FVからはみ出させない */
  color: var(--color-white);
  font-size: var(--font-size-h1); /* 42.667px */
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight); /* Figma: 1.2 */
  /* filter: drop-shadow() は合成レイヤ／包含ブロックを作り、縦書きと組むと
     iOS Safari で位置がずれる。素のテキストなので text-shadow で同じ見た目にする。 */
  text-shadow: var(--shadow-text-fv);
}

.p-fv__catch-line {
  display: block;
}

/* vertical-rl のブロック開始方向は「右」。2行目以降の block-start（＝右側）に
   余白を入れると、行と行の間隔になる（旧 gap と同値）。 */
.p-fv__catch-line + .p-fv__catch-line {
  margin-block-start: var(--space-24);
}

/* タイプ表示（inview.css の [data-inview="type"]）の打鍵間隔。
   31文字あるので既定（0.06s）だと出し切るまで約1.9秒。
   タイプらしいリズムを保ちつつ少し詰めて、最後の文字が約1.5秒で出るようにする。 */
.p-fv__catch {
  --inview-stagger-char: 0.05s;
}

/* --- SP（767px以下・inferred: SPフレーム未提供のため暫定） --- */
@media (max-width: 767px) {
  .p-fv {
    height: 15rem; /* 240px */
  }

  .p-fv--top {
    height: 25rem; /* 400px */
  }

  .p-fv__inner {
    padding-inline: var(--space-24);
  }

  /* SPはタイプスケール1段下げ（42.667px → 32px） */
  .p-fv__title {
    font-size: var(--font-size-h2);
  }

  /* SPはタイプスケール1段下げ（42.667px → 32px）＋行間もひと詰め */
  .p-fv__catch {
    font-size: var(--font-size-h2);
  }

  .p-fv__catch-line + .p-fv__catch-line {
    margin-block-start: var(--space-16);
  }
}