/* top-mv.css — 全体TOPメインビジュアル（Figma: 2246:58638 上部）
   実値: 白背景 / イラスト 1258x828 右寄せ（ヘッダー分-96px）
         キャッチ 42.667px Black ls 0.15em + 白テキストシャドウ 0 0 24px
         リード 18.29px Bold / ボタンはMVと同じ200pxピル */

.top-mv {
  position: relative;
  height: 45.25rem; /* ⚠ Figma実値: 次セクション開始 y820 − ヘッダー96px */
  background: var(--color-white);
  overflow: hidden;
}

.top-mv__visual {
  position: absolute;
  top: -6rem;
  /* 1440基準フレームの右端に合わせる。1440px超は内側へ寄せ、
     1440px以下は 0 に落ちてビューポート右端まで従来どおりブリード。 */
  right: max(0rem, calc((100% - var(--layout-frame)) / 2));
  width: 78.625rem;
  height: 51.75rem;
  border-radius: 0 0 0 var(--radius-xl);
  overflow: hidden;
  pointer-events: none;
  /* ⚠ Figma実値: Rectangle 206 のアルファマスク（左上へ向かって不透明度0.15までフェード）。
     Figmaのグラデ線 (240.1,-120.5)→(1143.9,874.8) / stop 18%(α0.15)・47.6%(α1) を
     1258x801 のマスク領域におけるCSS角度・停止位置に換算した値 */
  mask-image: linear-gradient(137.75deg, rgb(0 0 0 / 0.15) 21.84%, rgb(0 0 0) 49.49%);
  -webkit-mask-image: linear-gradient(137.75deg, rgb(0 0 0 / 0.15) 21.84%, rgb(0 0 0) 49.49%);
  mask-size: 100% 50.0625rem;
  -webkit-mask-size: 100% 50.0625rem;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.top-mv__visual img {
  position: absolute;
  top: 16.69%;
  left: 12.88%;
  width: 92.29%;
  height: auto;
}

.top-mv__inner {
  position: absolute;
  top: 5.25rem;
  /* 中央寄せの max-width: var(--layout-max) コンテンツ列と左端を揃える */
  left: calc(50% - var(--layout-max) / 2);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  max-width: var(--layout-max);
}

.top-mv__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-ultra);
  text-shadow: 0 0 1.5rem var(--color-white), 0 0 1.5rem var(--color-white);
}

/* PCは従来の nl2br と同じく1文節=1行の強制改行 */
.top-mv__title-clause {
  display: block;
}

.top-mv__lead {
  margin: 0;
  width: 32rem; /* ⚠ Figma実値: この幅で自然折返し */
  color: var(--color-black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.top-mv__buttons {
  display: flex;
  gap: var(--space-16);
}

/* --- SP: オーバーレイをやめ、見出し→イラスト→テキスト→ボタンの縦積みフローに --- */
@media (max-width: 767px) {
  .top-mv {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    height: auto;
    padding-top: var(--space-32);
    padding-bottom: var(--space-48);
  }
  /* inner を透過させ、visual と見出し・テキストを同じ flex 列に並べて順序を指定 */
  .top-mv__inner {
    display: contents;
  }
  .top-mv__title {
    order: 1;
    position: relative;
    z-index: 1; /* イラストに重なる分、見出しを上のレイヤーに */
    padding: 0 var(--space-24);
    font-size: var(--font-size-h2);
    letter-spacing: var(--letter-spacing-widest);
  }
  /* SPは強制改行をやめ、画面幅に応じて文節のかたまり単位で折返す */
  .top-mv__title-clause {
    display: inline-block;
  }
  .top-mv__lead {
    order: 3;
    width: auto;
    padding: 0 var(--space-24);
  }
  .top-mv__buttons {
    order: 4;
    flex-wrap: wrap;
    padding: 0 var(--space-24);
  }
  /* テキストと重ならないためアルファマスク（フェード）は不要 */
  .top-mv__visual {
    order: 2;
    position: relative;
    top: 0;
    /* gap(24px) を打ち消したうえで 56px 見出しに食い込ませる */
    margin-top: calc(var(--space-80) * -1);
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio-16-9);
    mask-image: none;
    -webkit-mask-image: none;
  }
  .top-mv__visual img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}