/* ===========================================================
   12-services-head — サービス一覧ページの見出し帯（パンくず / H1 / リード）

   Figma `top_pc`（サービス一覧・1366 × 1965）で実測が取れているのは
   **ミッション文（リード）の 1点だけ**（design/SUBPAGES.md「0. 共通の骨格」）:

     ミッション文  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）
     − H1 高さ 53.2    （38px × 1.4 = --fs-h2 × --lh-tight・PROVISIONAL）
     − パンくず→H1 32  （PROVISIONAL）
     − パンくず高さ 18 （12px × 1.5・PROVISIONAL）
     = 145            → .sec-services-head の padding-top

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

   下余白は 0。リード下端（272 + 42 = 314）から先の間隔は
   13-services-list 側の padding-top として持たせる。

   ※ 会社概要ページの 10-company-head と同じ骨格だが、あちらは別エージェントが
     並行実装しているため意図的に独立させてある（クラス名も分けてある）。
     見出し帯を1つに統合するなら、両ページの実装が固まってからにすること。
   =========================================================== */

.sec-services-head {
  padding-block: 145px 0;             /* DERIVED（上のコメント参照） */
}

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

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

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

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


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

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

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

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

.sec-services-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-services-head {
    padding-block: 132px 0;
  }
}

@media (max-width: 767px) {
  .sec-services-head {
    padding-block: 128px 0;
  }

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

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

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