/* ===========================================================
   01-hero — ヒーロー

   実測済み: H1 の左端はコンテナ左端(42)より内側の X≈192
             （ヒーローだけの意図的な字下げ。tokens.css の注記参照）
   PROVISIONAL: 見出しサイズ・行間・アーチの寸法と位置は未実測。
   =========================================================== */

.sec-hero {
  position: relative;
  overflow-x: clip;
  /* ヘッダーが fixed で流れから外れているので、ヒーローがページ最上部から
     始まる。見出しの位置は実測値で作る（Figma: H1 が Y=235）。
     ヘッダーはこの余白の中に重なって表示される。 */
  padding-block: 235px 0;
  /* 実測: Figma の Frame 2（ヒーロー単体フレーム）が 1366×732。 */
  min-height: 732px;
  /* 背景はここでは塗らない。
     以前は白（--surface）を敷いていたが、それだとヒーロー下端に硬い境界ができ、
     次のセクションと「別ブロック」に見えてしまう（カンプは繋がっている）。
     白 → 地色のグラデーションは .page 側（base.css）が Y1127〜1345 で持つ。
     ヒーロー（0〜732）はその白の側に完全に収まるので、
     アーチ画像の白地ともこれまで通り継ぎ目なく繋がる。 */
}

/* グラデーションアーチ。ヒーロー下端に接地させる。
   実測: カンプでは frame の y415〜728（=下端）に位置し、幅は frame 全幅。 */
/* アーチは画面に固定する。スクロールしても動かず、
   次のセクションのグラデーション（base.css の .page::before）が
   上に乗り上げてきて覆い隠していく、という見せ方。

   z-index: -2 にして .page の背景より手前・.page::before の幕（-1）より奥に置く。
   （負の値の子は親の背景の上、通常フローの中身の下に描かれる）
   幕を -1 に下げた分アーチも -2 へ下げてある。順序 アーチ(-2) < 幕(-1) を崩さないこと。

   top: 430 は静止時にカンプと同じ位置に来る値。
   アーチの表示高 = 1366/1558 × 345 ≒ 302 なので 430 + 302 = 732 = ヒーロー下端。 */
.sec-hero__arc {
  position: fixed;
  left: 0;
  top: 430px;
  width: 100%;
  height: auto;                       /* width/height 属性の打ち消し（必須） */
  max-width: none;
  z-index: -2;
  pointer-events: none;
  user-select: none;
}

.sec-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* ヒーローだけ左を深く取る。H1 実測 X=190、ガター 42 との差が 148。 */
.sec-hero__copy {
  padding-left: 148px;
}

.sec-hero__title {
  font-size: var(--fs-hero);          /* 実測 42px */
  font-weight: 700;
  line-height: var(--lh-hero);        /* 実測 130% */
  letter-spacing: var(--ls-hero);     /* 実測 0.62px */
}

.sec-hero__lead {
  margin-top: 28px;                   /* PROVISIONAL */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

/* 右肩の外部リンク3本。下線付きで縦に並ぶ。 */
.sec-hero__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 152px;                   /* PROVISIONAL */
  margin-top: 8px;                    /* PROVISIONAL */
  font-size: var(--fs-xs);
}

.sec-hero__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 8px;
  border-bottom: 1px solid var(--border-soft);
  transition: opacity var(--dur) var(--ease);
}


/* ===========================================================
   TB / SP — 右肩リンクは本文の下へ回す。
   アーチは縦積みでも背景として成立するよう位置を上げる。
   =========================================================== */

@media (max-width: 1099px) {
  .sec-hero__copy {
    padding-left: 0;
  }

  .sec-hero__inner {
    flex-direction: column;
  }

  .sec-hero__links {
    width: 100%;
  }
}

/* 縦線と黒いお問い合わせボタンは **SPカンプにしか無い**。
   PCカンプのヒーローは代わりにテキストリンク3本（法人研修↗ ほか）。
   既に検証済みのPCの見た目を動かさないよう、既定では出さない。 */
.sec-hero__scroll,
.sec-hero__cta {
  display: none;
}

@media (max-width: 767px) {
  /* ✅ SPカンプ実測（375px / node 1551:1973 の Group 364）。
     Group 364 は Auto Layout（X=20 / Y=182 / W=265 / H=132 / 間隔16）で、
     見出し(H=68) + 16 + リード(H=48) = 132。Y はフレーム絶対座標。

     旧実装は padding-top 96px・見出し32px・行間1.5・リード14px だったが、
     いずれもカンプ入手前の変換設計で、全部ズレていた。 */
  /* PCの min-height: 732px はPCカンプのヒーロー高。SPでは黒ボタン下端 624 で
     終わらせないと、次のステートメントの位置が合わなくなる。 */
  .sec-hero {
    min-height: 0;
    padding-block: 182px 0;         /* 実測 Y=182 */
  }

  /* PCは copy と links の間に 40px 必要だが、SPは各要素を実測値の
     margin で置くので、gap が乗ると全部ずれる。 */
  .sec-hero__inner {
    gap: 0;
  }

  .sec-hero__title {
    font-size: var(--sp-fs-hero);   /* 26px */
    line-height: 1.3;               /* 実測 130%（26×1.3×2行 = 67.6 ≒ H68） */
    letter-spacing: 0.62px;         /* 実測 */
  }

  .sec-hero__lead {
    margin-top: 16px;               /* 実測 Auto Layout の間隔 */
    font-size: var(--sp-fs-lead);   /* 16px。旧14pxは誤り */
    line-height: 1.5;               /* 実測 150%（16×1.5×2行 = 48 ＝ H48） */
    letter-spacing: 0.62px;         /* 実測 */
  }

  /* SPカンプにテキストリンク3本は無い。行き先はフッターに全て残っている。 */
  .sec-hero__links {
    display: none;
  }

  /* 縦線（Vector 103）。実測 X=29.5 / Y=359.5 / H=46 / 線1px #000。
     リード下端 314 → 359.5 なので上余白 45.5。
     コンテナ左端は 20px なので、左に 9.5 ずらして X=29.5 に合わせる。 */
  .sec-hero__scroll {
    display: block;
    width: 1px;
    height: 46px;
    margin-top: 45.9px;             /* コピー塊の実高 313.6 → 359.5 */
    margin-left: 9.5px;
    background: var(--text-base, #000);
  }

  /* 黒いお問い合わせボタン（Group 427）。
     実測 Rectangle 159: X=9 / Y=582 / 357×42 / #000000 / 角丸0 / Drop Shadow
     実測 テキスト: Medium 16px / #FFFFFF / 中央揃え / 字間0px

     縦線の下端 405.5 → 582 なので上余白 176.5。
     幅357をガター20pxの内側に収められないため、.container の外に出して
     margin-inline:auto で中央に置く（(375-357)/2 = 9 ＝ 実測X）。 */
  .sec-hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 357px;
    max-width: calc(100% - 18px);
    height: 42px;
    margin-top: 176.5px;
    margin-inline: auto;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 500;               /* 実測 Medium */
    line-height: 1.22;              /* 実測 19.5 / 16 */
    letter-spacing: 0;              /* 実測 */
    text-decoration: none;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.16);   /* PROVISIONAL: Drop Shadow の数値は未取得 */
  }

  /* PCと同じく画面に固定するが、位置は作り直す。
     SPは幅が狭くアーチが 155px と薄いので、220px のままだと右肩リンク
     （実測 y≈300〜380）の帯に重なって濁る。ヒーロー下端寄りに逃がす。

     top を px 固定にすると縦の短い端末（667px 等）で下半分が画面外に
     出たまま戻らない（fixed なのでスクロールしても直らない）。
     svh 基準にして画面高に追随させる。svh＝URLバー表示時の高さ＝
     スクロール中に変化しないので、dvh のような揺れが出ない。
       844px → top 574 / 底 729（ヒーロー下端 732 とほぼ一致）
       667px → top 454 / 底 609（コピー下端 ≈380 より下）

     幅は 180vw。左端揃えだと弧の頂点（中央）が画面外へ寄るので、
     PC（left:0 + width:100% で頂点が中央）と同じ見え方になるよう中央寄せする。 */
  .sec-hero__arc {
    left: 50%;
    top: 68svh;
    width: 180vw;
    transform: translateX(-50%);
  }
}