/* ==========================================================================
   service.css — サービストップ（/service/）専用
   --------------------------------------------------------------------------
   $extra_css で読む。共通部品（rows / steps / stats / page-hero）は head.php が読む。

   このファイルが持つのは 3 つだけ。
     0. .svc-index      … 導入の右のサービス一覧（10 領域・リンク付き）
     1. .svc-layout     … 支援領域の «左に図・右に一覧» のレイアウトと貼り付き
     2. .service-prism  … 円環図そのもの（クラス名は共通部品が出す）
     2-b. .svc-list     … 右側の一覧。スクロールで切り替わる
     3. .svc-extended   … 発展 4 領域の一覧
     4. .svc-flow-track … 支援の進め方（番号の丸を線でつなぎ、下に工程名と説明文の面）
     5. .svc-feature    … サービスの特徴（紺の節）
     5-b. .svc-org    … サービスの特徴の図解（社内の階層と外注）
     7. .svc-issues     … 解決できる経営課題（吹き出し）

   ★.svc-contracts（2 つの契約形態）は共通部品（rows--grid-2）だけで組んであり、
     このファイルに規則を持たない。
   ★«勝ち筋モデル»（旧 6 章 .svc-method）は 2026-09-25 に節ごと削除した（今林指示）。

   ★★1 の円環図は PHP だけが共通部品（includes/components/service-prism.php）で、
     CSS はページごとに書く。japan-dot-map.php と同じ扱い
     （デザインシステム 3-2-b）。トップページ側は assets/css/pages/home-service.css。
     ★.service-prism__* の値は b1-service.css からそのまま持ってきたもの。
       **片方だけ変えると 2 ページで図の見た目がずれる。** 変えるときは両方見ること。
       2 ページ目なので昇格の条件（3-2-c）は満たしているが、
       b1 は «デモ配下の CSS»、こちらは «本番ページの CSS» で消える時期が違うため
       いまは分けたままにしている。b1 が本番の index.php になったら components/ へ移す。
   ========================================================================== */

/* --------------------------------------------------------------------------
   節見出し — 節名を見出し級にする（2026-09-30 三嶋指示）
   --------------------------------------------------------------------------
   ★サービス詳細ページ（.nb-head）と同じ扱いに揃える。
     指示：「サービストップの h2 が共通のまま小さい。詳細ページと同じにして欲しい」。

   変更前  節名 15px / 500 / gray-600（section-head.css の既定）
   変更後  節名 32px / 700 / navy-800

   ★決めごとの出どころは docs/design-system.md 0-4 の 8「節名を大きく、h2 をその説明に」。
     このページの節見出しは **h2 が .sec-head__label 側**（主張の一文は <p>）なので、
     直すのはラベルだけでよい。.sec-head__title はこのページに 1 つも無い。

   ★★共通部品（section-head.css）には足さないこと。足すとトップページ（demo/b1）が動く。
     .svc-head はこのページの節見出しにだけ付くクラスで、他ページには効かない。
     これは .nb-head（assets/css/demo/service-newbiz.css）と同じ閉じ込め方。

   ★字送りは --ls-wide（0.12em）ではなく --ls-heading（0.01em）。
     --ls-wide は欧文の小文字ラベル用で、和文を 32px まで上げると間延びする。
   ★色は --color-text-strong。紺地（.on-inverse）では白に自動で振れるので上書きしない。
     コントラストは gray-600 の 5.68:1 から navy-800 の 17.90:1 へ上がる。
   -------------------------------------------------------------------------- */

.svc-head .sec-head__label {
  /* 下に続く本文が «節名の説明» になるので、離すと別の要素に見える。20px → 12px */
  margin-bottom: var(--space-3);
  color: var(--color-text-strong);
  font-size: var(--text-3xl); /* 26 → 32px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

/* 節名が 32px になると 32px の罫では «見出しに対して短い棒» に見える。40px に伸ばす */
.svc-head .sec-head__label::before {
  width: var(--space-10);
}

/* --------------------------------------------------------------------------
   1. 支援領域のレイアウト（左に図・右に一覧／スクロール連動）
   ★★2026-09-18：トップページと同じ «左の図が貼り付き、右の一覧がスクロールで
     切り替わる» 形に変えた。それまでは図を中央に 1 枚置くだけだった。
   ★★規則は assets/css/pages/home-service.css の .service__* を写したもの。
     クラス名だけ .svc-* に変えてあり、値は変えていない。
     **片方だけ触ると 2 ページで挙動がずれる。** 変えるときは両方見ること。
     （PHP は共通部品、CSS はページごと。デザインシステム 3-2-b）
   -------------------------------------------------------------------------- */
.svc-layout {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: start;
}

.svc-figure {
  width: 100%;
  min-width: 0;
}

@media (min-width: 900px) {
  .svc-layout {
    /* 左右 50:50（トップページと同じ。三嶋指示） */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
  }

  .svc-sticky {
    position: sticky;
    top: clamp(6.5rem, 12vh, 8.5rem);
    max-height: calc(100vh - 8rem);
  }

  .svc-sticky .service-prism {
    max-height: calc(100vh - 12rem);
  }
}

.svc-figure__title {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: var(--navy-700);
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.svc-figure__title::before,
.svc-figure__title::after {
  width: clamp(1.75rem, 4vw, 3.5rem);
  height: 1px;
  content: "";
  background: var(--navy-300);
}

/* いま何番目を読んでいるかのメーター。SP では出さない（連動が伝わらないため） */
.svc-meter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  width: min(82%, 27rem);
  margin: var(--space-3) auto 0;
  color: var(--navy-700);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
}

.svc-meter-track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: var(--color-border);
}

.svc-meter-track i {
  position: absolute;
  inset: 0;
  background: var(--navy-700);
  transform: scaleX(var(--service-progress, 0.1667));
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. 円環図そのもの
   ★.service-prism__* は includes/components/service-prism.php が出すクラス名。
     値は b1-service.css と同じ。片方だけ変えないこと。
   -------------------------------------------------------------------------- */
.service-prism {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/*
  弁。'scroll' で出しているので <g role="button">。
  ★★既定の outline を消している（b1 と同じ）。消してよいのは、
    :focus-visible のときに弁そのものが紺で塗られ、**それ自体が焦点の目印**に
    なっているため。塗りの規則を外すときは outline も一緒に戻すこと。
*/
.service-prism__item {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.service-prism__item:focus,
.service-prism__item:focus-visible {
  outline: none !important;
}

.service-prism__segment {
  fill: rgba(49, 43, 151, 0.075);
  stroke: rgba(49, 43, 151, 0.2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 480ms ease, stroke 480ms ease, filter 480ms ease;
}

.service-prism__item.is-current .service-prism__segment,
.service-prism__item:hover .service-prism__segment,
.service-prism__item:focus-visible .service-prism__segment {
  fill: var(--navy-800);
  stroke: var(--navy-800);
  filter: drop-shadow(0 18px 22px rgba(8, 6, 74, 0.18));
}

.service-prism__icon {
  fill: none;
  stroke: var(--navy-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 420ms ease;
}

/*
  ラベル。★18px は service-prism.php 側のラベル配置計算
  （1 文字 19・行高 26 + 22×(行数−1)）の前提になっている実測値。
  ここを変えたら向こうの計算も測り直すこと。
*/
.service-prism__label {
  fill: var(--navy-700);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  transition: fill 420ms ease;
}

.service-prism__item.is-current .service-prism__icon,
.service-prism__item:hover .service-prism__icon,
.service-prism__item:focus-visible .service-prism__icon {
  stroke: #fff;
}

.service-prism__item.is-current .service-prism__label,
.service-prism__item:hover .service-prism__label,
.service-prism__item:focus-visible .service-prism__label {
  fill: #fff;
}

.service-prism__core circle {
  fill: var(--color-bg);
  stroke: var(--navy-200);
  stroke-width: 2;
}

.service-prism__core text {
  fill: var(--navy-800);
  /*
    ★★--font-display は tokens.css に定義が無い（2026-09-18 に grep して確認）。
      b1-service.css も同じ書き方なので «GLOCAL» は両ページとも素の Noto Sans JP で出る。
      ここだけ --font-numeric（Oswald）に直すと **トップページと図の見た目がずれる**ので、
      b1 と同じまま置いている。直すならトップページ側と同時に、三嶋の判断を経ること。
  */
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.13em;
}

.service-prism__core .service-prism__core-ja {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   2-b. 右側の一覧（スクロールで切り替わる）
   ★★薄さは «透明度» ではなく «色» で作る（b1-service.css の実測コメントより）。
     項目全体の opacity を下げると本文が 3.59:1 まで落ちて基準を割る。
     非アクティブ／アクティブ の 2 状態とも、それぞれの基準を満たす色を当てている。
       領域名（32px 太字）  navy-400 3.21:1 → navy-800 17.90:1
       約束の一文（20px 太字）gray-600 5.68:1 → navy-800 17.90:1
       本文（16px）          gray-600 5.68:1 → gray-800 13.13:1
   -------------------------------------------------------------------------- */
.svc-feed {
  min-width: 0;
}

.svc-list {
  display: grid;
  gap: clamp(2.75rem, 5.5vw, 4.75rem);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.svc-item {
  position: relative;
  /* ヘッダーが sticky なので、弁から飛んだときに行の頭が隠れない位置で止める */
  scroll-margin-top: 6rem;
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-item::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  content: "";
  background: var(--navy-700);
  transition: width 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-item.is-current::before {
  width: 100%;
}

@media (min-width: 900px) {
  .svc-item.is-current {
    transform: translateX(0.75rem);
  }
}

/*
  ★★着地点（.svc-item__anchor）。#service-01〜06 はこの要素に付いている。
    2026-09-24：導入の «サービス一覧» から飛んだとき、図の点灯と押した項目を揃えるため。

    js/service-scroll.js は «画面の上下 44〜56% の帯» に入った項目を点灯させる。
    項目（li）に id を付けて 6rem で着地させると、項目が画面の上端に来て
    **次の項目が帯に入り «03 を押したのに 04 が点灯»** した（1425×950 で実測）。

    ★li の余白を 30vh に広げる手は試してやめた。一覧からは合うが、
      円環図の弁（scrollIntoView の block: center）で押したときに
      今度は «前の項目» が帯に入った。li の余白は弁の着地にも効くため、
      1 つの値で両方は合わせられない（項目の高さで成否が変わる）。
    → li の余白は 6rem のまま（弁の着地はトップページと同じ）にし、
      **一覧のリンクだけが使う着地点**を別に置いた。

    40vh にすると押した項目の頭が画面の 40% に来る。帯の上端（44%）より少し上なので
    必ず自分が帯にかかり、前の項目の底（40% − 項目間）と次の項目の頭
    （40% ＋ 項目の高さ ＋ 項目間）は帯の外に出る。項目の高さに依らない。
  ★900px 未満は図が連動しない（貼り付かない）ので、6rem で上端に着地させる。
*/
.svc-item__anchor {
  position: absolute;
  top: 0;
  left: 0;
  scroll-margin-top: 6rem;
}

@media (min-width: 900px) {
  .svc-item__anchor {
    scroll-margin-top: 40vh;
  }
}

.svc-item__head {
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
}

.svc-item__no,
.svc-item__name {
  color: var(--navy-400);
  transition: color 420ms ease;
}

.svc-item.is-current .svc-item__no,
.svc-item.is-current .svc-item__name {
  color: var(--color-text-strong);
}

.svc-item__no {
  /* 領域名と同じ大きさ。baseline 揃えなので、片方だけ大きいと組が崩れる */
  font-size: clamp(var(--text-2xl), 2.2vw, var(--text-3xl));
  font-weight: var(--fw-medium);
  line-height: 1;
}

.svc-item__name {
  font-size: clamp(var(--text-2xl), 2.2vw, var(--text-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: 0.02em;
}

.svc-item__title {
  max-width: 30rem;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  transition: color 420ms ease;
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-wrap: balance;
  word-break: auto-phrase;
  line-break: strict;
}

.svc-item.is-current .svc-item__title {
  color: var(--color-text-strong);
}

.svc-item__body {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  transition: color 420ms ease;
  font-size: 1rem;
  line-height: var(--lh-body);
  text-wrap: pretty;
  word-break: normal;
  line-break: strict;
}

.svc-item.is-current .svc-item__body {
  color: var(--color-text);
}

/*
  900px 未満。連動する «図の横» が無くなるので、b1 と同じく全項目を
  アクティブ側の色で出す。薄いままだと «読めないだけ» になる。
*/
@media (max-width: 899px) {
  .svc-meter {
    display: none;
  }

  .svc-item__no,
  .svc-item__name,
  .svc-item__title {
    color: var(--color-text-strong);
  }

  .svc-item__body {
    color: var(--color-text);
  }

  .svc-item::before {
    width: 100%;
    height: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-prism__segment,
  .service-prism__icon,
  .service-prism__label,
  .svc-meter-track i,
  .svc-item,
  .svc-item::before {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   3. 発展 4 領域
   ★★グルーピングの名前を付けない（2026-09-14 MTG 加藤さん）。
     見出しもラベルも無いので、**6 領域との違いは «上の余白» と «文字の大きさ» だけ**で作る。
   ★上に太めの罫を 1 本引いて «ここから先は別の並び» を示す。
     塗らない・囲まない（塗るとカードになり、才流と同じ見た目になる）。
   ★名前は --text-xl（20→22px）。6 領域の .rows__title は --text-2xl（22→26px）なので、
     1 段だけ小さい。
   ★2026-10-05 に約束の一文（クライアント原稿）を名前の下に足した（.svc-extended__title）。
     6 領域の約束の一文（.svc-item__title・--text-xl の太字）より小さい本文サイズ・標準の太さにして、
     6 領域との強弱を保っている。6 領域にある長い説明文は無い。
   -------------------------------------------------------------------------- */
.svc-extended {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: var(--border-width-thick) solid var(--color-border-accent);
}

@media (min-width: 480px) {
  .svc-extended {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-8);
  }
}

@media (min-width: 900px) {
  .svc-extended {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 導入の «サービス一覧» から飛んできたとき、sticky ヘッダーの下に潜らない位置で止める */
.svc-extended__item {
  scroll-margin-top: 6rem;
  /* ★2026-10-05 今林。«サービスを見る» を 4 列で同じ高さに揃えるため、縦の flex にして
     約束の一文（.svc-extended__title）を伸ばす。一文は 2〜3 行と行数が違う（900px 以上）。
     子の <p> は base.css で margin 0 なので、flex にしても余白は変わらない。 */
  display: flex;
  flex-direction: column;
}

.svc-extended__no {
  margin-bottom: var(--space-3);
  /*
    ★★色は navy-400 ではなく **navy-500**（白地で 6.47:1・実測）。
      navy-400（3.21:1）が通るのは WCAG の «大きい文字» ＝ 18.66px 以上かつ bold のときだけ。
      --text-lg は 768px 未満で **18px** に下がるので «大きい文字» から外れ、
      4.5:1 が要求されて落ちる（375px で実測・4 件）。
      rows.css の .rows__no が navy-400 で通っているのは --text-2xl（SP でも 22px）だから。
      ここで同じ色を借りるとサイズの前提が違う。
  */
  color: var(--navy-500);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.svc-extended__name {
  color: var(--color-text-strong);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  /*
    ★最長は「広報・ブランディング」10 字（2026-10-05 に «…強化» 12 字から短くなった）。375px の使える幅は 320px、
      --text-xl は SP で 20px なので 240px。1 行に収まる。
      4 列（900px 以上）では 1425px で 1 行、1024px では 2 行になる（2026-10-05 実測）。balance で行を均す。
  */
  word-break: auto-phrase;
  text-wrap: balance;
}

/*
  約束の一文（2026-10-05・クライアント原稿）。
  ★--text-base（17px／SP 16px）・400。本文の色（--color-text）で、白地のまま基準を満たす。
  ★最長は «現場任せの人材育成を、社員が育ち仕事を任せられる仕組みに変える。» 32 字。
    4 列（900px 以上）では 1 列 258px ＝ 15 字前後なので 3 行になる。auto-phrase で語の途中で割らない。
*/
.svc-extended__title {
  flex-grow: 1;   /* .svc-extended__item の flex を参照 */
  margin-top: var(--space-3);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--lh-snug);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. 支援の進め方（.svc-flow-track）
   ★★2026-09-25 今林決定：«番号の丸を線でつなぎ、下に工程名と説明文の面»。
     3 案（上罫の横並び＝それまでの .steps--flow ／ 縦のタイムライン ／ これ）から採った。
     他の案の規則は削除済み。それまであった «.steps--flow の番号を navy-500 に上げる» 上書きも、
     このページで .steps--flow を使わなくなったので消した（部品側の問題は design-system 6 章に記録済み）。
   -------------------------------------------------------------------------- */
/*
  番号の丸を線でつなぎ、下に工程名と説明文の面を並べる（今林が示した参考画像がもと）。
  ★説明文は仮テキスト（service/_data.php の flow_detail）。
  ★768px 未満は縦 1 列（丸が左・面が右）で、線は縦に通す。
    768px 以上で 3 列、1240px 以上で 6 列（共通部品 .steps--flow と同じ切り替え幅）。
  ★線は各段の丸の中心から «次の段の丸の中心» まで引く（長さ ＝ 100% ＋ 列の間隔）。
    行の最後の段では引かない（3 列のとき 3 と 6、6 列のとき 6）。
  ★★丸と線は全体で 1 本のグラデーション（2026-09-25 今林指示）。
    01 の navy-950 から 06 の «navy-500 と 400 の半々»（#726cc0）へ、段ごとに 20% ずつ寄せる。
    線は «自分の丸の色 → 次の丸の色» で引くので、丸と線がつながって見える。
    ★★同日«もう少しグラデーションを» の指示で幅を広げた（最初は navy-800 → navy-500）。
      白い数字とのコントラストは 20.1:1 → 4.54:1（計算値）。
      明るい側はこれ以上上げないこと。navy-400 まで行くと 3.21:1 で、本文サイズの数字が AA（4.5:1）を割る。
  ★面の地は薄い面（--color-bg-subtle）。節が白なので塗り分けで区切る。高さは行ごとに揃う。
  ★番号の丸は参考画像どおり円にしている（steps.css の «四角の印» とは別の扱い。判断は三嶋）。
*/
.svc-flow-track {
  --flow-dot: 3rem;
  --flow-gap: var(--space-4);
  --flow-dir: to bottom;

  display: grid;
  gap: var(--flow-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-flow-track__item {
  --flow-now: 100%;
  --flow-next: 80%;
  --flow-c-end: color-mix(in srgb, var(--navy-500) 50%, var(--navy-400));
  --flow-c-now: color-mix(in srgb, var(--navy-950) var(--flow-now), var(--flow-c-end));
  --flow-c-next: color-mix(in srgb, var(--navy-950) var(--flow-next), var(--flow-c-end));

  position: relative;
  display: grid;
  grid-template-columns: var(--flow-dot) minmax(0, 1fr);
  gap: var(--space-4);
  /* 768px 未満：丸を面の縦中央に置く。線も段の中央（＝丸の中心）から次の段の中央へ引く */
  align-items: center;
}

.svc-flow-track__item:nth-child(2) { --flow-now: 80%; --flow-next: 60%; }
.svc-flow-track__item:nth-child(3) { --flow-now: 60%; --flow-next: 40%; }
.svc-flow-track__item:nth-child(4) { --flow-now: 40%; --flow-next: 20%; }
.svc-flow-track__item:nth-child(5) { --flow-now: 20%; --flow-next: 0%; }
.svc-flow-track__item:nth-child(6) { --flow-now: 0%; --flow-next: 0%; }

/*
  768px 未満の縦の線。各段が «自分の上端から次の段の上端まで» を引き、6 段で 1 本につなぐ。
  ★«丸の中心から 100% ＋ 間隔» で引くと、説明文の行数で段の高さが違うとき
    次の丸から外れる（375px で ±12px ずれた・実測）。段ごとに引けば高さに関係なく丸を通る。
    1 段目だけ丸の中心から、最終段は丸の中心まで。
  ★色は «自分の色 → 次の色»。前の段の終わりと次の段の始まりが同じ色なので、つなぎ目は出ない。
*/
.svc-flow-track__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--flow-dot) / 2 - 1px);
  width: var(--border-width-thick);
  height: calc(100% + var(--flow-gap));
  background-image: linear-gradient(var(--flow-dir), var(--flow-c-now), var(--flow-c-next));
}

.svc-flow-track__item:first-child::after {
  top: 50%;
  height: calc(50% + var(--flow-gap));
}

.svc-flow-track__item:last-child::after {
  height: 50%;
}

.svc-flow-track__no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--flow-dot);
  height: var(--flow-dot);
  margin: 0;
  border-radius: 50%;
  background-color: var(--flow-c-now);
  color: var(--color-action-text);
  font-size: var(--text-base);
  line-height: 1;
}

.svc-flow-track__body {
  padding: var(--space-5);
  background-color: var(--color-bg-subtle);
}

.svc-flow-track__name {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  word-break: auto-phrase;
}

.svc-flow-track__text {
  margin: var(--space-2) 0 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}

@media (min-width: 768px) {
  .svc-flow-track {
    --flow-gap: var(--space-6);
    --flow-dir: to right;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-10);
  }

  /*
    ★align-items を flex-start に戻す。768px 未満の «丸を縦中央に» の center が残ると、
      縦並びでは «丸が列の横中央» になり、線の始点（列の左から丸の半径ぶん）とずれる（実測で発生）。
  */
  .svc-flow-track__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* 面を伸ばして、行の中で高さを揃える */
  .svc-flow-track__body {
    flex: 1;
    align-self: stretch;
  }

  /*
    ★:nth-child(n) は «全部の段» と同じ意味。上の :first-child / :last-child と
      詳細度を揃えて、768px 未満の縦の線の位置を確実に上書きするために付けている。
  */
  .svc-flow-track__item:nth-child(n)::after {
    top: calc(var(--flow-dot) / 2 - 1px);
    left: calc(var(--flow-dot) / 2);
    width: calc(100% + var(--flow-gap));
    height: var(--border-width-thick);
  }

  .svc-flow-track__item:nth-child(3n)::after,
  .svc-flow-track__item:last-child::after {
    content: none;
  }
}

@media (min-width: 1240px) {
  .svc-flow-track {
    --flow-gap: var(--space-4);

    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .svc-flow-track__item:nth-child(3n)::after {
    content: "";
  }

  .svc-flow-track__item:last-child::after {
    content: none;
  }

  /*
    ★6 列では 1 列 186.7px（(1200 − 16×5) ÷ 6）。左右 16px・--text-base に詰めている。
      もとは 02 の工程名 «課題・ボトルネック特定» が 3 行に割れたため。
      2026-09-25 に 02 を «課題特定» に短縮したので、いまは 6 つとも 1 行に収まる。
  */
  .svc-flow-track__body {
    padding-inline: var(--space-4);
  }

  .svc-flow-track__name {
    font-size: var(--text-base);
  }
}

/* --------------------------------------------------------------------------
   5. サービスの特徴（紺の節）
   ★★主張の一文は <p>。h2 にすると 375px の 12 字上限に収まらない
     （「アウトソーシング（外注）で対応」は 15 字で、25.1px では 376px 必要）。
     文言は現行サイトの実文なので短くできない。
     /company/ の .company-philosophy__statement と同じ «見出し級の <p>» の扱い。
   ★面は .on-inverse。文字色・罫はトークン側が振るので、ここで色を書かない。
   -------------------------------------------------------------------------- */
/*
  ★★2026-09-18：本文の右に図解を置くため 2 カラムにした（三嶋指示）。
    実測で 1425px のとき本文の右に 566px 空いていた。
  ★1024px 未満は 1 カラム。図は本文の下に回る。
    900px ではなく 1024px で割っているのは、図の右半分（GLOCAL の箱と矢印）が
    26rem を切ると詰まって «外» の間が読めなくなるため。
*/
@media (min-width: 1024px) {
  .svc-feature__layout {
    display: grid;
    /*
      ★★2026-09-24 に 24rem → clamp(24rem, 36vw, 30rem) へ広げた（今林指示「もう少し幅をとって大きく」）。
        1425px で 384 → 480px。図の文字も 1.2 倍になる（ラベル 22.8px）。
        左の本文は 714 → 663px（1 行 39 字）。主張の一文 15 字（480px）は 1 行に収まる。
        1024px では 24rem（384px）に止まり、左は 519px 残る。
    */
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(24rem, 36vw, 30rem));
    /*
      ★★2026-09-30 三嶋指示「左右の隙間を少し大きくしたい」。
        clamp(2.5rem, 4vw, 4.5rem) → clamp(3rem, 5vw, 5.5rem)。1425px で 57 → 71px。
        ★広げたぶんは左の本文から引かれる（右の図は clamp で幅が決まっているため）。
          1425px：本文 663 → 649px（1 行 39 → 38 字）。
        ★★下限は «主張の一文が 1 行に収まるか» で決まる。
          一文は 15 字 × --text-3xl（32px）＝ 480px 必要。
          いちばん苦しいのは 1024px で、ここで本文に残るのは約 509px。
          **これ以上広げると 1024px 付近で一文が 2 行に割れる。**
    */
    gap: clamp(3rem, 5vw, 5.5rem);
    align-items: start;
  }
}

.svc-feature__statement {
  max-width: var(--measure);
  margin-bottom: var(--space-8);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  /*
    ★2 行の割り方は現行サイトどおり（<br class="u-br-pc">）。
      768px 未満では u-br-pc が効かないので、幅なりに折り返す。
      そのとき語中で割れないように auto-phrase を効かせる。
      375px・SP の --text-3xl は 26px ＝ 使える幅 320px で 12.3 字。
      最長の «アウトソーシング（外注）で対応» 15 字は 2 行に割れる。
  */
  word-break: auto-phrase;
  text-wrap: balance;
}

.svc-feature__body {
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   5-b. サービスの特徴の図解（.svc-org）
   «社内の 3 段のうち、役員・部長クラスが破線＝足りていない。そこを社外の
   グローカルが代行する» という絵。マークアップは service/index.php にある。

   ★角丸を使わない（rect に rx を付けない）。才流との差別化（CLAUDE.md）。
   ★色は紺のトーン展開のみ。第 2 色相を足さない。
   ★面は «薄い»（--color-bg-subtle）。箱の地は白で、面との差で段を見せる。
   ★★文字サイズは viewBox（幅 400）基準。図の実幅で割った倍率が掛かる。
     1425px … 図 480px ＝ 1.20 倍 → ラベル 22.8px（2026-09-24 に広げた）
     375px  … 図 335px ＝ 0.84 倍 → ラベル 15.9px
     ★viewBox を広げると SP で 13px（--text-caption）を割る。広げないこと。
   -------------------------------------------------------------------------- */
.svc-feature__figure {
  /* SP では本文の下。幅なりに置くが、大きくなりすぎないところで止める（PC の列幅と揃える） */
  max-width: 30rem;
  margin-top: var(--space-10);
}

@media (min-width: 1024px) {
  .svc-feature__figure {
    max-width: none;
    /* 右の列の頭を、左の «主張の一文» の頭に揃える */
    margin-top: var(--space-2);
  }
}

.svc-org {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/*
  ★2026-09-25：«社内 / 社外» のラベルと、その間の縦の破線（.svc-org__divider）を削除した（今林指示）。
    «外» は GLOCAL の箱が段の外に立っていることと、矢印の向きで伝える。
*/
.svc-org__link {
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
}

.svc-org__band {
  fill: var(--color-bg);
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
}

/*
  ★★図の主旨はここ。破線＝社内に足りていない層。
    実線の箱で埋めると «グローカルが社員になる» 絵になり、外注であることが消える。
*/
.svc-org__band--gap {
  fill: var(--color-bg-tint);
  stroke: var(--color-action);
  stroke-dasharray: 7 6;
}

.svc-org__label {
  fill: var(--color-text);
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: var(--fw-medium);
}

.svc-org__label--gap {
  fill: var(--color-text-strong);
  font-weight: var(--fw-bold);
}

.svc-org__glocal {
  fill: var(--color-action);
}

/*
  ★2026-09-25：«GLOCAL» の文字（Oswald）を白ロゴ（assets/img/glocal-logo-white.png）に差し替えた。
    <image> で置いているので色・大きさは service/index.php 側の width / height が決める。
*/

.svc-org__glocal-ja {
  fill: #fff;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.svc-org__arrow {
  stroke: var(--color-action);
  stroke-width: 2;
}

.svc-org__arrowhead {
  fill: var(--color-action);
}

/*
  ★★480px 未満だけ、図の中の小さい文字を上げる。
    SVG の文字は viewBox（幅 400）に対する値なので、図が縮むと一緒に縮む。
    375px では図の幅が 335px ＝ **0.84 倍**になり、実測で
      代行        17px → **14.2px**（ラベルの下限 15px を割る）
    となる。CLAUDE.md「注釈 13px とラベル 15px は SP でも据え置く。
    下げると 12px になり、スマホで読めない」に反するので、ここで戻す。
    19 にすると 375px で 15.9px になり、下限を満たす。
  ★本文ラベル（19px → 15.9px）は下限を割らないので触らない。
  ★480px を境にしているのは、これ以上は clamp と同じく標準のブレークポイントで揃えるため
    （design-system 2-5）。実際に図が 384px を切るのは 424px 未満で、
    425〜480px ではわずかに大きく出る。読みにくくなる側ではないので許容している。
*/
@media (max-width: 479px) {
  .svc-org__glocal-ja {
    font-size: 19px;
  }
}

/* --------------------------------------------------------------------------
   0. 導入の右のサービス一覧（.svc-index）
   ★★2026-09-24 追加。1425px で導入の右に約 400px の空きがあった。
   ★置き方は «ページ内目次»（page-toc.css・2026-09-14 三嶋決定 案 T-3）と同じ考え方：
     導入ブロックの右に置くだけ。**固定しない・背景を持たせない**（箱にするとカードになる）。
     見た目も page-toc に寄せ、区切りは罫線だけにしている（rows と同じ «罫線で区切った行»）。
   ★★1024px 未満では出さない。右に空きが無く、縦に積むと 2 節下の «支援領域» と
     同じ並びが続くだけになるため。
   ★導入の文章は 1 本の左端のまま。右の列が増えただけで、文章を右へ段にしていない
     （design-system 0-4 の 5）。リード（max 798px）は 1425px で 816px の列に収まり、行長は変わらない。
   -------------------------------------------------------------------------- */
/* 導入のリード（2026-10-05 今林指示で 3 段落に分けた）。語の途中で折り返さない（«課題の原／因» «事／業承継» を防ぐ）。
   ★このページだけ。共通部品 .page-intro__lead（page-hero.css）は触っていない。 */
.svc-intro__text .page-intro__lead {
  word-break: auto-phrase;
}

.svc-index {
  display: none;
}

@media (min-width: 1024px) {
  .svc-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }

  .svc-index {
    display: block;
    /* キャッチの 1 行目と頭を揃える（キャッチは行間ぶん上に余白を持つ） */
    padding-top: var(--space-3);
  }
}

.svc-index__title {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

.svc-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width) solid var(--color-border);
}

.svc-index__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.svc-index__link {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  color: var(--color-text-strong);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

/* 行末の «›»。押せることを示す。button.css の .link-arrow と同じ描き方 */
.svc-index__link::after {
  width: 0.45em;
  height: 0.45em;
  content: "";
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-0.1em) rotate(45deg);
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.svc-index__link:hover {
  color: var(--color-link-hover);
}

.svc-index__link:hover::after {
  opacity: 1;
  transform: translate(0.2em, -0.1em) rotate(45deg);
}

/*
  番号。★navy-500（白地 6.47:1）。navy-400（3.21:1）は 15px では基準を割る。
*/
.svc-index__no {
  color: var(--navy-500);
  font-size: var(--text-sm);
}

/* 01〜06。«支援領域» の節と同じく、こちらを強く出す */
.svc-index__name {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/*
  07〜10。★グルーピングの名前は付けない（2026-09-14 MTG 加藤さん）。
  強弱は «上の罫を太くして間を空ける» «文字を 1 段小さく・細く» の 2 つだけ。
  «支援領域» の節の .svc-extended と同じ作り方。
*/
/* .svc-index__item:not(.is-quiet) + .is-quiet {
  margin-top: var(--space-5);
  border-top: var(--border-width-thick) solid var(--color-border-accent);
} */

/* .svc-index__item.is-quiet .svc-index__link {
  padding-block: var(--space-2);
  color: var(--color-text);
}

.svc-index__item.is-quiet .svc-index__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.svc-index__item.is-quiet .svc-index__link:hover {
  color: var(--color-link-hover);
} */

/* --------------------------------------------------------------------------
   7. 解決できる経営課題（.svc-issues）
   ★★2026-09-25 今林決定：«吹き出し»。A〜F の 6 案から F 案を採った。他の案の規則は削除済み。
     それまでは共通部品 .checklist（行頭に縦罫）で組んでいた。
   -------------------------------------------------------------------------- */
/*
  吹き出し（今林が示した参考画像がもと）。
  ★★参考は角丸。**角丸だけ外した**（border-radius を足さないこと）。
    枠線で囲った箱ではあるので、«カード UI を使わない»（才流との差別化）にいちばん近い案。
  ★引用符は上辺の枠線を «切って» 乗せる。切れ目は節の面の色（--color-bg-subtle）で塗って作る。
    節の面を変えたらここも合わせること。
  ★しっぽは 45° 回した正方形。下半分が枠の外に出て三角に見え、上半分の白が下辺の枠線を消す。
  ★★高さを揃え、段ずらしはしない（2026-09-25 今林指示。それまでは段ずらし）。
    grid-auto-rows: 1fr で全段を «いちばん高い吹き出し» に合わせる。
    ボタンは margin-top: auto で底に寄せ、横に並んだ吹き出しでボタンの位置を揃える。
  ★行の間隔は «しっぽ（約 14px）＋ 引用符の上半分（約 16px）» より広く取る。
*/
.svc-issues__bubbles {
  display: grid;
  grid-auto-rows: 1fr;
  column-gap: var(--space-8);
  row-gap: var(--space-16);
  margin: 0;
  padding: var(--space-6) 0 var(--space-4);
  list-style: none;
}

@media (min-width: 600px) {
  .svc-issues__bubbles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
  ★3 列は 1024px から（e は 900px）。900px で 3 列にすると 1 列 223px になり、
    «マーケティングを見直したい。» が 3 行に割れて点線の高さが揃わない（実測 139px ／ 他は 100px）。
*/
@media (min-width: 1024px) {
  .svc-issues__bubbles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.svc-issues__bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-10) var(--space-8) var(--space-8);
  border: var(--border-width-thick) solid var(--color-action);
  background-color: var(--color-bg);
}

/*
  上辺の引用符。背景を節の面の色で塗り、枠線を切る。
  ★★Oswald 700 の «“» は字面が上に寄っていて、高さは 0.284em しかない（canvas の measureText で実測。
    ベースラインから 0.818em〜0.534em の範囲。フォントの ascent 1.1875em / descent 0.2875em）。
    行の高さのままだと地の四角が字面の下へ伸び、箱の内側まで節の色で塗ってしまう。
    そこで «行の高さ 0.736» で字面の上端を箱の上端に合わせ、«高さ 0.284em» で箱を字面ぴったりに切る。
      0.736 ＝ ascent + descent − 2 × (ascent − 0.818) ＝ 1.475 − 2 × 0.3695
  ★top: -1px は枠線（2px）の中心。そこへ translateY(-50%) で四角の中心を合わせる。
  ★フォントを変えたら測り直すこと。
*/
.svc-issues__bubble::before {
  content: "\201C";
  content: "\201C" / "";
  position: absolute;
  top: calc(var(--border-width-thick) / -2);
  left: var(--space-6);
  box-sizing: content-box;
  height: 0.284em;
  padding: 0.06em 0.1em;
  transform: translateY(-50%);
  background-color: var(--color-bg-subtle);
  color: var(--color-action);
  font-family: var(--font-numeric);
  font-size: 5rem;
  font-weight: var(--fw-bold);
  line-height: 0.736;
}

/* 下辺のしっぽ */
.svc-issues__bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--space-12);
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(calc(50% + 1px)) rotate(45deg);
  border-right: var(--border-width-thick) solid var(--color-action);
  border-bottom: var(--border-width-thick) solid var(--color-action);
  background-color: var(--color-bg);
}

.svc-issues__bubble .svc-issues__text {
  align-self: stretch;
  margin: 0;
  /* 課題の下の点線（参考画像どおり）。紺の中間のトーン */
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width-thick) dotted var(--navy-300);
  color: var(--color-text-strong);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  word-break: auto-phrase;
}

/*
  ★★点線の高さを揃える（2026-09-25 今林指示）。課題の文を «2 行ぶん» の高さに固定する。
    6 文のうち 2 行に割れるものがあり（«新規事業を / 立ち上げたい。» など）、
    1 行のものだけ点線が上がっていたため。
  ★2 列以上（600px 以上）だけ。1 列では横に並ぶ相手がいないので、1 行の文に空きを作らない。
  ★3 行に割れる幅があると揃わなくなる。600 / 700 / 768 / 899 / 900 / 1023 / 1024 / 1280 / 1425px で
    3 行になる文が無いことを実測済み（3 列を 1024px からにしたのはこのため）。
    課題の文か文字サイズを変えたら測り直すこと。
*/
@media (min-width: 600px) {
  .svc-issues__bubble .svc-issues__text {
    /* border-box なので «2 行 ＋ 下の余白 ＋ 点線の太さ» */
    min-height: calc(var(--lh-heading) * 2em + var(--space-5) + var(--border-width-thick));
  }
}

/* 対応する領域の «約束の一文»（glcl_domains() の 'title'）。本文サイズ */
.svc-issues__promise {
  margin: var(--space-5) 0 var(--space-6);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--lh-snug);
}

/*
  «サービスを見る»。枠の無い文字リンクで、吹き出しの右下に置く（2026-09-25 今林指示）。
  ★margin-top: auto で底へ、align-self: flex-end で右へ寄せる。横に並んだ吹き出しで位置が揃う。
  ★行末の «›» は .svc-index__link と同じ描き方。
  ★文字だけだと押せる範囲が狭いので、上下に余白を足して高さ 44px 以上を確保している。
*/
.svc-issues__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: auto;
  margin-bottom: calc(var(--space-2) * -1);
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

/* 支援領域の各行の «サービスを見る»（2026-09-29 今林）。吹き出しの .svc-issues__more と同じ見た目。
   こちらは吹き出し（flex の列）の中ではないので、auto の余白と右寄せは持たせない。本文の下に左揃えで置く。
   ★2026-10-05 今林。発展 4 領域（.svc-extended）の «サービスを見る» も同じ見た目にした。 */
.svc-item__more,
.svc-extended__more {
  display: inline-flex;
  align-self: flex-start;   /* .svc-extended__item（縦の flex）の中で横に伸ばさない。.svc-item では効かない */
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-3);
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.svc-item__more::after,
.svc-extended__more::after,
.svc-issues__more::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-top: var(--border-width-thick) solid currentColor;
  border-right: var(--border-width-thick) solid currentColor;
  transform: rotate(45deg);
}

.svc-item__more:hover,
.svc-extended__more:hover,
.svc-issues__more:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}