/* ==========================================================================
   section-head.css — セクション見出し（3 案共通の骨格）
   --------------------------------------------------------------------------
   ★中央揃えにしない。すべて左揃え。
     才流をはじめ同カテゴリのサイトは見出しを中央揃えにしている（実測 36px / center）。
     左揃えを貫くことが、色とフォント以外での差別化になる。
   ★カード（角丸＋枠線の箱）を使わない。区切りは罫線と面で作る。
   ========================================================================== */

.sec-head {
  margin-bottom: var(--section-gap);
}

.sec-head__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

/* ラベル横の短い罫。装飾ではなく、見出しの開始位置を示す目印 */
.sec-head__label::before {
  content: "";
  width: var(--space-8);
  height: var(--border-width-thick);
  background-color: var(--navy-800);
}

/*
  ★--text-4xl をそのまま使わず、SP 側だけ下げた専用の clamp にしている（三嶋指示）。
    ★理由：430px で «課題は似ている。／ただ原因も、解き方も違う。» が 3 行に割れる。
      2 行目の «ただ原因も、解き方も違う。» は 13 字。
      --text-4xl は 430px で 31.9px になり、13 字 × 31.9 × 1.01 = 419px。
      使える幅は 390px なので入らず、«う。» だけが 3 行目に落ちていた。
      **1 行より長い語句は、どの折り返し方式でも割れる。サイズで解くしかない。**
      closing-cta の見出しでも同じ結論になっている。

    ★曲線の決め方（2 点を通す）
        375px → 25.1px  … 13 字 = 330px。使える幅 335px にぎりぎり収まる
        768px → 40.0px  … --text-4xl の上限と同じ。ここから上は変わらない
      768px 以上は 2.5rem で頭打ちなので、**PC の見え方は変わっていない**。

    ★支援実績の見出しは別の clamp を持っているので、ここの影響を受けない
      （b1-case-results.css の .support-results .sec-head__title）。
*/
.sec-head__title {
  font-size: clamp(1.5rem, 3.8vw + 0.68rem, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  /*
    ★文節の切れ目で折る。SP で語末の «す。» だけが次の行に落ちるのを防ぐ。
      実測（375px・追加前 → 追加後）：
        サービス       330 / 74px  → 254 / 150px
        グローカルとは 305 / 48px  → 152 / 201px
      他の 5 本は折り位置が変わらない。行数もどれも変わらない。
    ★対応していないブラウザでは既定の折り返しに戻るだけ（付けても壊れない）。
      支援実績の見出しと closing-cta の見出しでは既に使っている手。
  */
  word-break: auto-phrase;
  /*
    ★2026-09-14：ここに text-wrap: balance を足すことを検討したが **やめた**。
      サービス詳細ページの h2 が 34 字の一文になり 768px で 2 字落ちたための検討だったが、
      入れて実測したところ **トップページ（demo/b1）の 375px で 2 本の折り位置が動いた**
      （「中小企業の経営課題を解決しま…」254/150 → 127/277 など。行数は不変）。
      1425px は差分 0 だったが、SP の見え方が変わるのは «トップは変えない» に反する。
      → サービス詳細ページ側だけに効かせる形にした（service-newbiz.css の .nb-head）。
  */
}

.sec-head__lead {
  max-width: var(--measure);
  margin-top: var(--space-6);
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: var(--lh-body);
}

/* ==========================================================================
   見出しの右に何かを添える（いまは moovy studio の動画）
   --------------------------------------------------------------------------
   ★.sec-head そのものは触らない。外側に 2 列のグリッドを足すだけ。
     .sec-head は全ページ共通の部品なので、特定の節の都合で中身を変えない。
   ★下の余白（--section-gap）はこの箱が持ち、.sec-head 側は 0 にする。
     グリッドの子が下余白を持つと行の高さがずれるため。

   ★★2 列に割る下限は 1240px。900 でも 1024 でもない。
     課題の節のリード文には手で入れた改行があり、その 2 行目は 775px 必要（実測）。
     左の列がこれを下回ると、手で決めた «どこで折るか» が崩れる。

       1024px … 左 632px → リードが 2 行 → 4 行に割れる    ✕
       1200px … 左 793px → 2 行（余裕 18px）              △
       1240px … 左 830px → 2 行（余裕 55px）              ○ ← 採用
       1440px … 左 835px → 2 行（余裕 60px）              ○

   ★右の列は vw 連動。画面が狭くなると **右（添えもの）が先に痩せる**。
     左（文章）を優先し、右に譲らせる、という優先順位。
   ========================================================================== */

.sec-head-row {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  margin-bottom: var(--section-gap);
}

.sec-head-row .sec-head {
  margin-bottom: 0;
}

/*
  ★高さを決めていない。moovy の埋め込みが自分で高さを持つため、
    こちらで aspect-ratio や height を与えると二重に効いて崩れる。
  ★1 列に積まれるときは 28rem で止める。コンテナ全幅（1000px 超）まで
    伸ばさない。見出しに «添える» 扱いなので、この幅で足りる。
*/
.sec-head-row__aside {
  min-width: 0;
  max-width: 28rem;
}

@media (min-width: 1240px) {
  .sec-head-row {
    grid-template-columns: minmax(0, 1fr) clamp(16rem, 22vw, 20rem);
    align-items: start;
  }

  .sec-head-row__aside {
    max-width: none;
    /*
      ★右側の添えものを見出し位置へ揃える。1 列表示には適用しない。
      ★値はベタ書きせず、ラベルが占める高さを式で持つ。
          ラベルの行の高さ  var(--text-sm) × var(--lh-body) = 15 × 1.8 = 27px
          ラベルの下の余白  var(--space-5)                  = 20px
        合わせて 47px。**ラベルの字送りや下余白を変えたら自動で追従する。**
      ★+7px は 2026-09-09 に三嶋が見た目を見て足したぶん。47px では
        動画の上端がわずかに高く見えたため。«なぜ 54 なのか» が分かるよう、
        47px の式に足す形で残している（2026-09-11 の合流時にベタ書きから戻した）。
    */
    margin-top: calc(var(--text-sm) * var(--lh-body) + var(--space-5) + 7px);
  }
}

/* --------------------------------------------------------------------------
   反転面での既定
   --------------------------------------------------------------------------
   ★ラベル横の短い罫は navy-800 のベタなので、紺地では見えなかった。
     これまでは各節が個別に上書きして回っていた（HANDOFF 5 章の落とし穴）。
     ここで «反転面なら --color-border-accent（.on-inverse で白）» を既定にする。
   ★トップページ（b1）の 2 か所の上書き（.method → navy-300、.support-results → 白）は
     そのまま残る。同じ特異度で、b1 の CSS は $extra_css として **後から** 読まれるため。
     2026-09-10 の追加。追加前後で b1 の全要素を比較し、差分が無いことを確認済み。
   -------------------------------------------------------------------------- */
.on-inverse .sec-head__label::before {
  background-color: var(--color-border-accent);
}