/* ===========================================================
   10-company-head — 下層ページの見出し帯（パンくず / H1 / リード）

   Figma `top_pc`（会社概要）で実測が取れているのは
   **ミッション文（リード）の 1点だけ**:

     ミッション文  X=41 / Y=272 / W=570 / H=42（2行）
                   Zen Kaku Gothic New Regular 15px / 行間140% /
                   字間0 / #4A5057

   パンくずと H1 の座標・級数は未実測。そこでリードの Y=272 を唯一の
   アンカーにして、上に積む要素の高さから padding-top を逆算している。

     リード上端        272
     − H1→リード 24    （PROVISIONAL・base.css の .sec-head__lead と同値）
     − H1 高さ 53.2    （38px × 1.4 = --fs-h2 × --lh-tight・PROVISIONAL）
     − パンくず→H1 32  （PROVISIONAL）
     − パンくず高さ 18 （12px × 1.5・PROVISIONAL）
     = 145            → .sec-page-head の padding-top

   ヘッダーは fixed（実測の合計高 33 + 36 + 24 = 93px）なので、
   145px 取ればパンくずの上に 52px の逃げが残る。

   下余白は 0。Figma の Frame 148（テーブル）が Y=493 から始まるので、
   リード下端 314 との差 179px は 11-company-profile 側の padding-top
   として持たせている（帯を他の下層ページに使い回せるようにするため）。
   =========================================================== */

.sec-page-head {
  /* 下余白はページによって違う（次のセクションの地色が変わるため）。
     会社概要は白帯が Y=374 から始まり、リード下端314との差が60px。
     その60pxは**このセクション側**（地色 #EFF0EE）が持つ。 */
  padding-block: 145px 60px;
}

/* --- パンくず ------------------------------------------------ */

.sec-page-head__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-xs);            /* PROVISIONAL: 12px（未実測） */
  line-height: 1.5;                   /* PROVISIONAL */
  color: var(--text-muted);
}

.sec-page-head__sep {
  margin-inline: 8px;                 /* PROVISIONAL */
}

.sec-page-head__crumbs a {
  transition: opacity var(--dur) var(--ease);
}


.sec-page-head__crumbs [aria-current='page'] {
  color: var(--text);
}

/* --- 見出し -------------------------------------------------- */

/* PROVISIONAL: 級数未実測。サイト内で最大の見出しである
   .sec-head__ja（--fs-h2 38px / --lh-tight 1.4）に合わせてある。
   ヒーローの H1（42px）はトップ専用の字下げレイアウトなので使わない。 */
.sec-page-head__title {
  margin-top: 32px;                   /* PROVISIONAL */
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
}

/* --- リード（ミッション文） ---------------------------------- */

.sec-page-head__lead {
  margin-top: 24px;                   /* PROVISIONAL */
  font-size: 15px;                    /* 実測（本文14pxとは別サイズ） */
  line-height: 1.4;                   /* 実測 140% */
  letter-spacing: 0;                  /* 実測 */
  color: var(--text-muted);           /* 実測 #4A5057 */
}

/* ===========================================================
   TB / SP — カンプ未照合の変換設計。SPカンプ（375px幅・top_pc/about_sp/service_sp/menu_sp）は存在する。現在の実装はカンプ入手前の変換設計で、未照合。
   fixed ヘッダーの高さは TB/SP でも 33 + 44(ハンバーガー) + 24 = 101px
   なので、逃げが残る範囲まで padding-top を詰める。
   =========================================================== */

@media (max-width: 1099px) {
  .sec-page-head {
    /* 下余白は白帯（本文エリア）との境目。PCは実測60px。
       ⚠️ SP/TBのカンプ実測は未取得。**暫定でPCと同じ60px**を入れている。
          0だと本文がリードに密着して明らかに誤りだったため。
          SPカンプで白帯のY座標が測れたら差し替えること。 */
    padding-block: 132px 60px;
  }
}

@media (max-width: 767px) {
  .sec-page-head {
    /* 下余白＝白帯（本文エリア）との境目。
       PCは実測60px（リード下端314 → 帯374）。

       SPは contact_sp のスクリーンショットから逆算して 30px。
         画像の縮尺: H1 24px / リード 14px から約1.85倍
         リード下端から帯の終わりまで画像上 約57px → 実寸 約31px
       ⚠️ 座標の直接実測ではないので **±3px 程度の誤差**がある。
          Figmaで帯（Rectangle）のY座標が取れたら差し替えること。
          PCの60pxをそのまま使うと**倍近く開きすぎる**（一度その状態にした）。 */
    padding-block: 128px 30px;
  }

  .sec-page-head__title {
    margin-top: 24px;
    font-size: var(--sp-fs-h2);
  }

  .sec-page-head__lead {
    margin-top: 16px;
    font-size: var(--sp-fs-body);
  }

  /* PC は <br> でカンプどおりに2行で折るが、SP では幅が足りず
     不自然な位置で折り返すので改行指定を無効化して流し込む。 */
  .sec-page-head__lead br {
    display: none;
  }
}