/* ============================================================
   service-figure.css
   事業内容ページの「説明を図で見せる」ためのコンポーネント。
   散文のカード列を置き換える用途。style.css は変更しない。
   トンマナ：角丸3px／円は使わない／青系のみ／見出しはセリフ。
   ============================================================ */

/* ---- 分岐図（fork）------------------------------------------
   同じ出発点から2つの道筋に分かれる構造を見せる。
   左＝現状、右＝AとBの2経路。Bを推奨としてアクセント。
   ------------------------------------------------------------ */
.nf-fork{
  display:grid;
  grid-template-columns:minmax(220px,300px) 48px 1fr;
  align-items:center;
  gap:0;
  margin-top:52px;
}

/* 出発点：中身の高さに合わせ、縦中央に置く（間延びを防ぐ） */
.nf-start{
  align-self:center;
  border:1px solid var(--glass-border);
  background:var(--glass);
  border-radius:3px;
  padding:34px 30px;
  display:flex;
  flex-direction:column;
}
.nf-start-label{
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  color:var(--white);
  margin:0 0 16px;
  line-height:1.45;
}
.nf-start ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.nf-start li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--txt);
}
.nf-start li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:1px;
  background:var(--ajisai);
}

/* 分岐の枝（左の1本から上下2本へ）
   --nf-line は枝線の色。border より一段濃くしないと白地で消える。 */
.nf-fork{--nf-line:rgba(110,128,182,.42);}
.nf-split{
  position:relative;
  align-self:stretch;
}
.nf-split::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:17px;
  height:1px;
  background:var(--nf-line);
}
.nf-split::after{
  content:"";
  position:absolute;
  left:17px;
  top:26%;
  bottom:26%;
  width:1px;
  background:var(--nf-line);
}
.nf-paths{position:relative;display:flex;flex-direction:column;gap:24px;}
.nf-paths::before,
.nf-paths::after{
  content:"";
  position:absolute;
  left:-17px;
  width:17px;
  height:1px;
  background:var(--nf-line);
}
.nf-paths::before{top:26%;}
.nf-paths::after{bottom:26%;}

/* 各経路 */
.nf-path{
  border:1px solid var(--glass-border);
  background:var(--glass);
  border-radius:3px;
  padding:32px 34px 30px;
}
.nf-path-good{
  border-color:rgba(110,128,182,.5);
  background:rgba(110,128,182,.1);
}
.nf-path-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  color:var(--white);
  line-height:1.45;
}
.nf-path-head span{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:1px solid var(--ajisai);
  border-radius:3px;
  font-family:var(--serif);
  font-size:13px;
  color:var(--ajisai-dark);
}
.nf-path-good .nf-path-head span{
  background:var(--ajisai);
  border-color:var(--ajisai);
  color:#fff;
}
.nf-path-head em{
  font-style:normal;
  margin-left:auto;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ajisai-dark);
  font-family:var(--sans);
  font-weight:500;
  border:1px solid rgba(110,128,182,.5);
  border-radius:3px;
  padding:3px 8px;
}

/* 経路の中の連鎖（□ → □ → □） */
.nf-chain{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:12px;
}
.nf-node{
  flex:1 1 0;
  min-width:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.72);
  border-radius:3px;
  padding:20px 14px;
  font-size:14px;
  line-height:1.6;
  color:var(--txt);
}
.nf-node-end{
  border-color:rgba(24,27,57,.22);
  color:var(--white);
  font-weight:600;
}
.nf-path-good .nf-node-end{
  border-color:var(--ajisai);
  background:var(--ajisai);
  color:#fff;
}
.nf-arrow{
  flex:0 0 16px;
  align-self:center;
  text-align:center;
  color:var(--ajisai-dark);
  font-size:15px;
  line-height:1;
}
.nf-path-note{
  margin:18px 0 0;
  max-width:74ch;
  font-size:13.5px;
  line-height:1.9;
  color:var(--txt);
}

/* タブレット以下：縦積みにして枝線を消す */
@media (max-width:900px){
  .nf-fork{grid-template-columns:1fr;gap:14px;}
  .nf-split{display:none;}
  .nf-paths::before,.nf-paths::after{display:none;}
  .nf-start{padding:20px 18px;}
}
@media (max-width:560px){
  .nf-chain{flex-direction:column;}
  .nf-node{min-width:0;}
  .nf-arrow{flex:0 0 auto;transform:rotate(90deg);}
  .nf-path-head{flex-wrap:wrap;}
  .nf-path-head em{margin-left:0;}
}


/* ---- 納品物の一行（03の末尾）--------------------------------
   カード1枚にするほどの情報量ではない列挙。罫線1本で区切る。
   ------------------------------------------------------------ */
.nf-deliver{
  margin:40px 0 0;
  padding-top:30px;
  border-top:1px solid rgba(24,27,57,.14);
  font-size:14px;
  line-height:2;
  color:var(--txt);
}
.nf-deliver b{
  display:inline-block;
  min-width:112px;
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  color:var(--white);
  letter-spacing:.04em;
}
.nf-deliver i{font-style:normal;color:rgba(110,128,182,.75);margin:0 .55em;}
.nf-deliver em{
  display:block;
  margin-top:6px;
  padding-left:112px;
  font-style:normal;
  font-size:12.5px;
  color:var(--txt-dim);
}
@media (max-width:700px){
  .nf-deliver b{display:block;min-width:0;margin-bottom:4px;}
  .nf-deliver em{padding-left:0;}
}

/* ---- 事例のストーリー（05）----------------------------------
   課題→取り組み→成果は1本の流れ。カード3枚に切らず、
   ラベルを左に振った段組みで順に読ませる。成果だけ強調。
   ------------------------------------------------------------ */
.nf-story{margin:44px 0 0;padding:0;}
.nf-story > div{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:0 28px;
  padding:34px 0;
  border-top:1px solid rgba(24,27,57,.14);
}
.nf-story > div:last-child{border-bottom:1px solid rgba(24,27,57,.14);}
.nf-story dt{
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  color:var(--white);
  letter-spacing:.05em;
  line-height:1.8;
}
.nf-story dd{
  margin:0;
  font-size:14px;
  line-height:2;
  color:var(--txt);
}
.nf-story .is-result{
  border-top-color:var(--ajisai);
  background:rgba(110,128,182,.08);
  padding-left:22px;
  padding-right:22px;
  margin-left:-22px;
  margin-right:-22px;
}
.nf-story .is-result dt{color:var(--kachi);}
@media (max-width:700px){
  .nf-story > div{grid-template-columns:1fr;gap:8px;padding:22px 0;}
  .nf-story .is-result{padding-left:16px;padding-right:16px;margin-left:-16px;margin-right:-16px;}
}

/* ---- 進め方のタイムライン（06）------------------------------
   縦1本の線に沿って段階を並べる。右端に期間の目安を置き、
   「いつ・何が起きるか」を一目で読ませる。
   ------------------------------------------------------------ */
.nf-timeline{
  list-style:none;
  margin:44px 0 0;
  padding:0;
  position:relative;
}
.nf-timeline::before{
  content:"";
  position:absolute;
  left:19px;
  top:12px;
  bottom:12px;
  width:1px;
  background:rgba(110,128,182,.42);
}
.nf-timeline li{
  position:relative;
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:start;
  gap:0 28px;
  padding:0 0 44px;
}
.nf-timeline li:last-child{padding-bottom:0;}
.nf-tl-no{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--ajisai);
  border-radius:3px;
  background:#fff;
  font-family:var(--serif);
  font-size:14px;
  font-weight:600;
  color:var(--kachi);
  letter-spacing:.04em;
}
.nf-timeline h3{
  margin:0 0 7px;
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  color:var(--white);
  line-height:1.5;
  letter-spacing:.03em;
}
.nf-timeline p{
  margin:0;
  max-width:68ch;
  font-size:13.5px;
  line-height:1.95;
  color:var(--txt);
}
.nf-tl-meta{
  display:inline-block;
  margin-left:14px;
  padding:3px 10px;
  border:1px solid rgba(110,128,182,.5);
  border-radius:3px;
  vertical-align:2px;
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--ajisai-dark);
  white-space:nowrap;
}
@media (max-width:700px){
  .nf-timeline li{grid-template-columns:34px 1fr;gap:0 16px;}
  .nf-timeline::before{left:16px;}
  .nf-tl-no{width:34px;height:34px;font-size:13px;}
  .nf-tl-meta{margin-left:0;margin-top:8px;}
  .nf-timeline h3{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;}
}

/* ---- FAQ アコーディオン（07）--------------------------------
   Q&Aはカードでなく開閉。JS不要の <details>。
   ------------------------------------------------------------ */
.nf-faq{margin-top:44px;border-top:1px solid rgba(24,27,57,.14);}
.nf-faq details{border-bottom:1px solid rgba(24,27,57,.14);}
.nf-faq summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:29px 52px 29px 4px;
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  color:var(--white);
  line-height:1.65;
  letter-spacing:.02em;
}
.nf-faq summary::-webkit-details-marker{display:none;}
.nf-faq summary::after{
  content:"＋";
  position:absolute;
  right:12px;
  top:29px;
  font-family:var(--sans);
  font-weight:400;
  font-size:15px;
  color:var(--ajisai-dark);
}
.nf-faq details[open] summary::after{content:"−";}
.nf-faq summary:hover{color:var(--ajisai-dark);}
.nf-faq details p{
  margin:0;
  padding:0 52px 30px 4px;
  max-width:76ch;
  font-size:13.5px;
  line-height:2;
  color:var(--txt);
}

/* ---- 部門ごとの変化（02）------------------------------------
   「いまの状態 → 変わったあと」だけを短句で並べる。
   説明は落とし、読み手が自社を当てはめられることだけを狙う。
   ------------------------------------------------------------ */
.nf-shift{margin-top:48px;border-top:1px solid rgba(24,27,57,.14);}
.nf-shift-row{
  display:grid;
  grid-template-columns:190px 1fr 40px 1fr;
  align-items:center;
  gap:0 20px;
  padding:34px 0;
  border-bottom:1px solid rgba(24,27,57,.14);
}
.nf-shift-who{
  margin:0;
  font-family:var(--serif);
  font-size:14px;
  font-weight:600;
  color:var(--ajisai-dark);
  letter-spacing:.06em;
}
.nf-shift-from{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:var(--txt-dim);
}
.nf-shift-arrow{
  text-align:center;
  color:var(--ajisai);
  font-size:16px;
}
.nf-shift-to{
  margin:0;
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  line-height:1.6;
  color:var(--kachi);
  letter-spacing:.03em;
}
@media (max-width:860px){
  .nf-shift-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:22px 0;
  }
  .nf-shift-arrow{
    text-align:left;
    transform:rotate(90deg);
    display:inline-block;
    width:1em;
  }
  .nf-shift-from{font-size:14.5px;}
  .nf-shift-to{font-size:17px;}
}

/* ---- 本文中の小さな連鎖（05）--------------------------------
   文章で「〈A → B → C〉」と書いていた分解を、本文から抜き出して
   その場で図として見せる。段落の中に埋もれさせない。
   ------------------------------------------------------------ */
.nf-mini-chain{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.nf-mini-chain span{
  border:1px solid rgba(110,128,182,.5);
  border-radius:3px;
  padding:8px 16px;
  font-family:var(--serif);
  font-size:14px;
  font-weight:600;
  color:var(--kachi);
  letter-spacing:.04em;
  background:rgba(255,255,255,.6);
}
.nf-mini-chain i{
  font-style:normal;
  color:var(--ajisai);
  font-size:14px;
}

/* ---- 料金カードのバッジ（04）--------------------------------
   .glass{overflow:hidden} に切られて「まずはここから」が
   見えなくなっていた。カードの内側・右上に収める。
   ------------------------------------------------------------ */
.svc-page .plan .plan-badge{
  top:14px;
  left:auto;
  right:14px;
  box-shadow:none;
}
@media (max-width:760px){
  .svc-page .plan .plan-badge{top:12px;right:12px;}
}

/* ============================================================
   (a) 余白の再配分とセクション面の切り替え
   (b) 数値は確定値のまま、大きく見せる
   このファイルは service/standardization.html のみが読み込む。
   ============================================================ */

/* ── (a-1) セクション余白を約65%へ ──
   セクション間が 110+110=220px あり、スクロールしても何も起きない
   区間が繰り返し挟まっていた。余白は「間」として効く量まで戻す。 */
.svc-page main > section{padding:72px 0;}
.svc-page .sec-head{margin-bottom:24px;}
.svc-page .sec-lead{margin-bottom:38px;}
.svc-page .figure{margin-top:32px;}
.svc-page .nf-shift,
.svc-page .nf-faq,
.svc-page .nf-story,
.svc-page .nf-timeline{margin-top:34px;}
.svc-page main > section > .container > *:last-child{margin-bottom:0;}

/* ── (a-2) セクションの面を交互に切り替える ──
   全ページが同じ淡い青グレーの上に載っていて境界が消えていた。
   白 → 淡面 を交互にし、境界を1本の線で示す。 */
.svc-page main > section.surface{
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(242,245,251,.58));
  border-top:1px solid rgba(24,27,57,.09);
  border-bottom:1px solid rgba(24,27,57,.09);
}

/* ── (a-3) 中盤のステートメント帯は「山」として余白を保つ ──
   上の一括指定で潰れないよう明示的に戻す。 */
.svc-page main > section.statement-band{padding:104px 0;}

/* ── (a-4)＋(b) 数値帯を濃紺の全幅バンドへ ──
   淡いカードの中に埋もれていた3つの数字を、ページ後半の
   2つ目の山として立てる。文字は幅から逆算した最大サイズ。 */
.svc-page .stat-band{
  margin:56px calc(50% - 50vw) 0;
  width:100vw;
  padding:clamp(46px,6.4vw,84px) max(24px,calc(50vw - 570px));
  background:linear-gradient(135deg,#0C0F2C 0%,#181B39 58%,#222A56 100%);
  border:0;
  border-radius:0;
}
.svc-page .stat-band .sbn{padding:0 28px;}
.svc-page .stat-band .sbn + .sbn{border-left:1px solid rgba(255,255,255,.16);}
.svc-page .stat-band .sbn .kk{color:rgba(201,213,238,.66);margin-bottom:18px;}
.svc-page .stat-band .sbn .v{
  color:#fff;
  font-size:clamp(52px,7.4vw,112px);
  line-height:1;
  letter-spacing:-.01em;
}
/* 単位（万円・%・ヶ月）。--hanada は白地用の濃い藍のため、濃紺の帯の上では
   3.13:1 と WCAG AA を割っていた。同系で一段明るい紫陽花に変更（4.51:1）。 */
.svc-page .stat-band .sbn .v small{font-size:.28em;color:var(--ajisai);margin-left:8px;letter-spacing:.02em;}
.svc-page .stat-band .sbn .k{margin-top:20px;color:rgba(255,255,255,.74);font-size:13.5px;}
.svc-page .stat-band + .note{margin-top:26px;}

@media (max-width:980px){
  .svc-page main > section{padding:56px 0;}
  .svc-page main > section.statement-band{padding:80px 0;}
  .svc-page .sec-lead{margin-bottom:30px;}
}
@media (max-width:620px){
  .svc-page main > section{padding:46px 0;}
  .svc-page main > section.statement-band{padding:64px 0;}
  .svc-page .stat-band{margin-top:40px;padding:36px 24px;}
  .svc-page .stat-band .sbn{padding:26px 0;}
  .svc-page .stat-band .sbn + .sbn{border-left:0;border-top:1px solid rgba(255,255,255,.16);}
  .svc-page .stat-band .sbn .v{font-size:clamp(46px,13vw,64px);}
}

/* ============================================================
   矢印の整理
   1ページに15本の「→」が乗り、01=分岐 / 02=変化 / 03=順序 / 05=分解
   と、同じ記号が4つの違う意味を担っていた。記号では区別がつかない。
   図解の矢印はすべて罫線・列見出し・番号に置き換え、
   「→」はリンクのUI記号としてのみ残す。
   ============================================================ */

/* ── 01 分岐図：連鎖の矢印を、ノードをつなぐ罫線に ── */
.svc-page .nf-chain .nf-arrow{
  flex:0 0 14px;
  font-size:0;              /* 「→」の字面を消す（span は aria-hidden 済み） */
  position:relative;
}
.svc-page .nf-chain .nf-arrow::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:rgba(110,128,182,.55);
}

/* ── 05 分解：同上 ── */
.svc-page .nf-mini-chain i{
  display:inline-block;
  width:14px;
  font-size:0;
  position:relative;
  vertical-align:middle;
}
.svc-page .nf-mini-chain i::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:rgba(110,128,182,.5);
}

/* ── 03 STEP：矢印を外し、4枚を1本の帯として連結する ──
   順序は STEP 01〜04 の番号が担うので、矢印は要らない。 */
.svc-page .flow{
  gap:0;
  border:1px solid var(--glass-border);
  border-radius:3px;
  overflow:hidden;
  background:rgba(255,255,255,.5);
}
.svc-page .flow .fnode{
  border:0;
  border-left:1px solid var(--glass-border);
  border-radius:0;
  background:transparent;
}
.svc-page .flow .fnode:first-child{border-left:0;}
.svc-page .flow.accent .fnode:last-child{background:rgba(110,128,182,.10);}

/* ── 02 Use cases：行ごとの矢印をやめ、列見出しで一度だけ説明する ── */
.svc-page .nf-shift-head,
.svc-page .nf-shift-row{
  display:grid;
  grid-template-columns:190px minmax(0,1fr) minmax(0,1fr);
  gap:0 32px;
  align-items:center;
}
.svc-page .nf-shift-head{
  padding:0 0 12px;
  border-bottom:1px solid rgba(24,27,57,.14);
}
.svc-page .nf-shift-head .nf-shift-from,
.svc-page .nf-shift-head .nf-shift-to{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  color:var(--ajisai-dark);
}
/* 右列は「変わったあと」。縦罫1本で左右を分ける */
.svc-page .nf-shift-head .nf-shift-to,
.svc-page .nf-shift-row .nf-shift-to{
  padding-left:32px;
  border-left:1px solid rgba(24,27,57,.14);
}
.svc-page .nf-shift-row{padding:28px 0;}

@media (max-width:860px){
  /* 縦積み。回転した矢印が4本の単独行になっていたので、
     見出しを畳んでセルごとの小ラベルに切り替える */
  .svc-page .nf-shift-head{display:none;}
  .svc-page .nf-shift-row{
    grid-template-columns:1fr;
    gap:10px;
    padding:22px 0;
  }
  .svc-page .nf-shift-head .nf-shift-to,
  .svc-page .nf-shift-row .nf-shift-to{
    padding-left:14px;
    border-left:2px solid var(--ajisai);
  }
  .svc-page .nf-shift-row .nf-shift-from{padding-left:14px;border-left:1px solid rgba(24,27,57,.16);}
  .svc-page .nf-shift-row .nf-shift-from::before,
  .svc-page .nf-shift-row .nf-shift-to::before{
    content:attr(data-label);
    display:block;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.14em;
    color:var(--ajisai-dark);
    margin-bottom:5px;
  }
}

/* 縦積み時、01の連鎖の罫線も縦に倒す */
@media (max-width:600px){
  .svc-page .nf-chain{flex-direction:column;}
  .svc-page .nf-chain .nf-arrow{flex:0 0 14px;width:100%;}
  .svc-page .nf-chain .nf-arrow::before{
    left:50%;right:auto;top:0;bottom:0;
    width:1px;height:auto;
  }
}
@media (max-width:760px){
  .svc-page .flow{flex-direction:column;}
  .svc-page .flow .fnode{border-left:0;border-top:1px solid var(--glass-border);}
  .svc-page .flow .fnode:first-child{border-top:0;}
}

/* ============================================================
   ビジネス寄りの3ブロック（サービス切替 / 導入企業 / 導入メリット）
   と、納品物の線画。文字組みだけで持たせる前提で、
   装飾ではなく罫線・番号・余白で見せる。
   ============================================================ */

/* ── サービス4領域の切替。矢羽根は使わず、番号＋角丸3pxの箱 ── */
.svc-page .svc-switch-section{padding:34px 0 0;}
.svc-page .svc-switch{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(24,27,57,.14);
  border-radius:3px;
  overflow:hidden;
  background:rgba(255,255,255,.62);
}
.svc-page .svc-switch a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:20px 22px;
  border-left:1px solid rgba(24,27,57,.12);
  text-decoration:none;
  transition:background .25s,color .25s;
}
.svc-page .svc-switch a:first-child{border-left:0;}
.svc-page .svc-switch a:hover{background:rgba(110,128,182,.10);}
.svc-page .svc-switch .ss-no{
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  font-style:italic;
  color:transparent;
  -webkit-text-stroke:1px rgba(84,103,159,.55);
  line-height:1;
}
.svc-page .svc-switch .ss-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.svc-page .svc-switch strong{
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  color:var(--kachi);
  letter-spacing:.03em;
  line-height:1.5;
}
.svc-page .svc-switch small{font-size:11px;letter-spacing:.08em;color:var(--dim);}
/* 現在地 */
.svc-page .svc-switch a.is-current{background:var(--kachi);}
.svc-page .svc-switch a.is-current .ss-no{-webkit-text-stroke-color:rgba(201,213,238,.7);}
.svc-page .svc-switch a.is-current strong{color:#fff;}
.svc-page .svc-switch a.is-current small{color:rgba(201,213,238,.72);}
@media (max-width:860px){
  .svc-page .svc-switch{grid-template-columns:repeat(2,1fr);}
  .svc-page .svc-switch a{padding:16px 16px;gap:10px;}
  .svc-page .svc-switch a:nth-child(3){border-left:0;}
  .svc-page .svc-switch a:nth-child(n+3){border-top:1px solid rgba(24,27,57,.12);}
  .svc-page .svc-switch strong{font-size:13.5px;}
}
@media (max-width:460px){
  .svc-page .svc-switch{grid-template-columns:1fr;}
  .svc-page .svc-switch a{border-left:0;border-top:1px solid rgba(24,27,57,.12);}
  .svc-page .svc-switch a:first-child{border-top:0;}
}

/* ── 導入企業ロゴ帯 ── */
.svc-page .clients{padding:44px 0;}
.svc-page .clients-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ajisai-dark);
  margin-bottom:24px;
}
.svc-page .clients-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:rgba(24,27,57,.10);
  border:1px solid rgba(24,27,57,.10);
  border-radius:3px;
  overflow:hidden;
}
.svc-page .clients-grid li{
  background:rgba(255,255,255,.72);
  min-height:76px;
  display:flex;align-items:center;justify-content:center;
  padding:14px;
}
.svc-page .clients-grid img{max-height:34px;width:auto;object-fit:contain;}
/* 差し替え前だと一目で分かる見え方にしておく */
.svc-page .clients-grid.is-placeholder li{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(24,27,57,.28);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.75) 0 9px,rgba(236,240,250,.75) 9px 18px);
}
.svc-page .clients-note{margin-top:14px;font-size:11.5px;color:var(--dim);letter-spacing:.02em;}
@media (max-width:860px){.svc-page .clients-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:460px){.svc-page .clients-grid{grid-template-columns:repeat(2,1fr);}}

/* ── 導入メリット：番号を大きく抜いて、文字だけで間を持たせる ── */
.svc-page .bene{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid rgba(24,27,57,.14);}
.svc-page .bene li{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:0 34px;
  align-items:start;
  padding:32px 0;
  border-bottom:1px solid rgba(24,27,57,.14);
}
.svc-page .bene .b-no{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:clamp(46px,5.2vw,72px);
  line-height:.9;
  color:transparent;
  -webkit-text-stroke:1px rgba(84,103,159,.42);
}
.svc-page .bene h3{
  font-family:var(--serif);
  font-size:clamp(19px,2.1vw,25px);
  font-weight:600;
  color:var(--kachi);
  letter-spacing:.03em;
  line-height:1.55;
  margin:0 0 10px;
}
.svc-page .bene p{margin:0;font-size:14.5px;line-height:1.95;color:var(--txt);max-width:62ch;}
@media (max-width:700px){
  .svc-page .bene li{grid-template-columns:1fr;gap:10px;padding:24px 0;}
  .svc-page .bene .b-no{font-size:38px;}
}

/* ── 納品物：1行のテキスト列を、線画つきの5点に ── */
.svc-page .deliver{margin-top:38px;padding-top:30px;border-top:1px solid rgba(24,27,57,.14);}
.svc-page .deliver-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin:0 0 26px;}
.svc-page .deliver-head b{
  font-family:var(--serif);font-size:16px;font-weight:600;color:var(--kachi);letter-spacing:.06em;
}
.svc-page .deliver-head em{font-style:normal;font-size:13px;color:var(--dim);letter-spacing:.02em;}
.svc-page .deliver-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
.svc-page .deliver-grid li{
  display:flex;flex-direction:column;gap:10px;
  padding:22px 18px 20px;
  border:1px solid rgba(24,27,57,.13);
  border-radius:3px;
  background:rgba(255,255,255,.6);
}
.svc-page .deliver-grid svg{
  width:38px;height:38px;
  fill:none;stroke:var(--ajisai-dark);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.svc-page .deliver-grid strong{
  font-family:var(--serif);font-size:14.5px;font-weight:600;color:var(--kachi);letter-spacing:.03em;line-height:1.5;
}
.svc-page .deliver-grid small{font-size:11.5px;line-height:1.75;color:var(--dim);}
@media (max-width:900px){.svc-page .deliver-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){
  .svc-page .deliver-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .svc-page .deliver-grid li{padding:16px 14px;}
  .svc-page .deliver-grid svg{width:30px;height:30px;}
}

/* 本文が1文字だけ折り返していたので、ch指定をやめて実寸で止める */
.svc-page .bene p{max-width:640px;}
/* 和文の見出しは balance/auto に任せると語中で割れる（判/断）。
   改行位置は HTML 側の <br> で指定する。 */

/* ============================================================
   研ぎ澄ます：面と効果を減らし、罫線とタイポで構成する
   ふわっと見えていた原因は、全面にかかった淡いグラデと
   半透明パネル（ぼかし＋影）。白を白として使い、境界は線で引く。
   ============================================================ */

/* ── 背景：淡いグラデ・浮遊ブロブ・点描ネットを止めて白地に ── */
.svc-page .liquid-bg{background:#fff;}
.svc-page .liquid-bg .blob,
.svc-page .liquid-bg .bg-net{display:none;}

/* ── 面は「白」と「極薄グレー」の2値だけ ── */
.svc-page main > section.surface{
  background:#F6F8FC;
  border-top:1px solid rgba(24,27,57,.10);
  border-bottom:1px solid rgba(24,27,57,.10);
}

/* ── main 内のガラス表現（ぼかし・影・ハイライト）を落とす ── */
.svc-page main .glass{
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  border:1px solid rgba(24,27,57,.14);
}
.svc-page main .glass::before{display:none;}
.svc-page main .card.glass:hover,
.svc-page main .plan:hover{transform:none;}

/* ── 半透明だった小さな面も、白ベタへ ── */
.svc-page .svc-switch,
.svc-page .clients-grid li,
.svc-page .deliver-grid li,
.svc-page .nf-node,
.svc-page .nf-mini-chain span{background:#fff;}
.svc-page .clients-grid{background:rgba(24,27,57,.12);}

/* ── タイポの階層を3段に絞る ── */
.svc-page main h2{
  font-size:clamp(26px,3.1vw,38px);
  line-height:1.5;
  letter-spacing:.04em;
  margin-bottom:0;
}
.svc-page .sec-lead{
  font-size:15px;
  line-height:1.9;
  margin:16px 0 0;
  max-width:640px;
}
.svc-page .sec-head + h2{margin-top:0;}
.svc-page .figure{margin-top:44px;}

/* ── Benefits：担当部門を見出しの脇に添える（旧 02 Use cases の統合先） ── */
.svc-page .bene h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px;}
.svc-page .bene .b-who{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--ajisai-dark);
  border:1px solid rgba(110,128,182,.42);
  border-radius:3px;
  padding:3px 9px;
  white-space:nowrap;
}

/* ── 事例：3段組をやめ、1枚に圧縮 ── */
.svc-page .case-brief{
  margin-top:46px;
  padding:30px 0 0;
  border-top:1px solid rgba(24,27,57,.14);
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:0 34px;
  align-items:start;
}
.svc-page .case-brief .cb-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ajisai-dark);
  margin:6px 0 0;
}
.svc-page .case-brief h3{
  font-family:var(--serif);
  font-size:clamp(18px,2vw,23px);
  font-weight:600;
  color:var(--kachi);
  letter-spacing:.03em;
  line-height:1.55;
  margin:0 0 12px;
}
.svc-page .case-brief > div,
.svc-page .case-brief p:not(.cb-label){margin:0;max-width:640px;}
.svc-page .case-brief > p:not(.cb-label){grid-column:2;font-size:14.5px;line-height:1.95;color:var(--txt);}
.svc-page .case-brief h3{grid-column:2;}
.svc-page .case-brief .cb-link{
  grid-column:2;
  justify-self:start;
  margin-top:16px;
  font-size:13.5px;
  letter-spacing:.04em;
  color:var(--ajisai-dark);
  border-bottom:1px solid rgba(110,128,182,.45);
  padding-bottom:2px;
  text-decoration:none;
}
.svc-page .case-brief .cb-link:hover{color:var(--kachi);border-color:var(--kachi);}
.svc-page .case-brief .note{grid-column:2;margin-top:18px;}
@media (max-width:700px){
  .svc-page .case-brief{grid-template-columns:1fr;gap:10px;}
  .svc-page .case-brief h3,
  .svc-page .case-brief > p:not(.cb-label),
  .svc-page .case-brief .cb-link,
  .svc-page .case-brief .note{grid-column:1;}
}

/* site.js が .liquid-bg 内に生成するシェーダー背景も止める
   （淡い青が動き続けるのが「ふわっと」の主因だった） */
.svc-page .liquid-bg .shader-bg{display:none;}

/* 面の白ベタ化で、分岐図Bの終端ノードが白地に白文字になっていた */
.svc-page .nf-path-good .nf-node-end{background:var(--ajisai);color:#fff;}
.svc-page .nf-node-end{color:var(--kachi);}

/* ════════════════════════════════════════════════════════════
   方向A（ドキュメント型）＋ Cのグリッド操作・差し色
   ・箱を全廃し、水平罫線と余白で構成する
   ・左に固定目次（既存の .sec-rail を作り替え。JSは触っていない）
   ・差し色は #2F5BD7 を1色だけ、現在地と強調に使う

   ※ 当初は「見出しをゴシックへ」も含む試行だったが、書体は明朝で統一する
     判断となったため取り下げた（CLAUDE.md の規定どおりセリフに戻している）。
     罫線ベースの構成と差し色はそのまま採用。
   ════════════════════════════════════════════════════════════ */
.svc-page{
  /* 見出しをゴシックにする試行を当てていたが、サービス詳細4ページだけが
     他ページと別書体になり「別サイトに見える」状態だった。ロールモデルに合わせ
     見出しは明朝で統一する方針が決まったため、--serif の上書きは行わない。 */
  --disp:'Noto Serif JP',serif;                              /* 数字の装飾用（見出しと同じ明朝） */
  --accent:#2F5BD7;
  --rule:rgba(24,27,57,.14);
  --rule-soft:rgba(24,27,57,.08);
}
/* 数字まわりだけ明朝に戻す（大きく組むと明朝が効く箇所） */
.svc-page .bene .b-no,
.svc-page .stat-band .sbn .v,
.svc-page .svc-switch .ss-no{font-family:var(--disp);}

/* ── 判型：行長を詰め、左に目次の場所を空ける ── */
.svc-page main .container{max-width:1000px;}

/* ── 見出し：字送りと行間を詰め、大きさの差で階層を作る ──
   もとは h1・h2 を 700 にしてウェイトでも差をつけていたが、これはゴシック(Inter)
   前提の指定。明朝は 500/600 のみ読み込んでいるため 700 のままだと合成ボールドに
   なり、他ページの見出しより太く滲む。階層は文字サイズの差で確保する。 */
.svc-page main h1{font-weight:600;letter-spacing:.005em;line-height:1.34;}
.svc-page main h2{font-weight:600;letter-spacing:.005em;line-height:1.5;
  font-size:clamp(23px,2.7vw,34px);}
.svc-page main h3{font-weight:600;letter-spacing:.01em;}
.svc-page .hero-lead-w,
.svc-page .sec-lead{font-weight:400;}

/* ── セクション見出し行：英語ラベルは小さく、罫線は1本 ── */
.svc-page .sec-head{gap:14px;margin-bottom:22px;}
/* 章番号(01…)は34px/40pxで大きく組んでいたが、他ページの .sec-head .idx は
   19pxで、サービス4ページだけ見出しの調子が違って見えていた。
   サイト共通の指定をそのまま使う（ここでは上書きしない）。 */
.svc-page .sec-head .en{font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--dim);}
.svc-page .sec-head .ln{background:var(--rule);}

/* ══ 左の固定目次（.sec-rail を右のドットから左の目次へ） ══ */
@media (min-width:1240px){
  .svc-page .sec-rail{
    left:38px;right:auto;top:50%;
    display:flex;flex-direction:column;gap:0;
    border-left:1px solid var(--rule);
    max-width:170px;
  }
  .svc-page .sec-rail .sr-it{
    justify-content:flex-start;align-items:baseline;gap:11px;
    padding:9px 0 9px 15px;margin-left:-1px;
    border-left:2px solid transparent;
    transition:border-color .3s;
  }
  .svc-page .sec-rail .sr-no{
    order:-1;opacity:1;transform:none;
    font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim);
  }
  .svc-page .sec-rail .sr-label{
    position:static;opacity:1;transform:none;pointer-events:auto;
    border:0;background:none;box-shadow:none;padding:0;
    font-size:12px;font-weight:500;color:var(--body);white-space:normal;
  }
  .svc-page .sec-rail .sr-bar{display:none;}
  .svc-page .sec-rail .sr-it.on{border-left-color:var(--accent);}
  .svc-page .sec-rail .sr-it.on .sr-label{color:var(--kachi);font-weight:600;}
  .svc-page .sec-rail .sr-it.on .sr-no{color:var(--accent);}
}
@media (max-width:1239px){.svc-page .sec-rail{display:none;}}

/* ══ 箱の全廃：枠・地色をやめ、水平罫線に置き換える ══ */

/* サービス切替：4枚の箱 → 罫線で区切った4列 */
.svc-page .svc-switch{border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:none;}
.svc-page .svc-switch a{border-left:1px solid var(--rule-soft);padding:18px 20px;}
.svc-page .svc-switch a.is-current{background:none;border-bottom:2px solid var(--accent);}
.svc-page .svc-switch a.is-current strong{color:var(--kachi);}
.svc-page .svc-switch a.is-current small{color:var(--dim);}
.svc-page .svc-switch a.is-current .ss-no{-webkit-text-stroke-color:var(--accent);}
.svc-page .svc-switch a:hover{background:rgba(47,91,215,.05);}

/* 導入企業：グリッドの枠を消し、細い罫線だけ残す */
.svc-page .clients-grid{background:none;border:0;border-top:1px solid var(--rule);gap:0;}
.svc-page .clients-grid li{border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft);}
.svc-page .clients-grid li:nth-child(6n){border-right:0;}

/* 分岐図：ノードの箱をやめ、経路を1行のテキストとして読ませる */
.svc-page .nf-fork{grid-template-columns:1fr;gap:0;}
.svc-page .nf-start{border:0;border-top:1px solid var(--rule);background:none;padding:20px 0;}
.svc-page .nf-split{display:none;}
.svc-page .nf-paths::before,.svc-page .nf-paths::after{display:none;}
.svc-page .nf-path{border:0;background:none;padding:22px 0;border-top:1px solid var(--rule);}
.svc-page .nf-path-good{background:none;}
.svc-page .nf-chain{gap:0;flex-wrap:wrap;align-items:center;}
.svc-page .nf-node{
  flex:0 0 auto;border:0;background:none;padding:0;min-width:0;
  font-size:14.5px;color:var(--body);
}
.svc-page .nf-node-end{font-weight:600;color:var(--kachi);}
.svc-page .nf-path-good .nf-node-end{background:none;color:var(--accent);}
.svc-page .nf-chain .nf-arrow{flex:0 0 auto;width:26px;}
.svc-page .nf-chain .nf-arrow::before{left:8px;right:8px;background:var(--rule);}

/* 納品物：カード5枚 → 罫線で仕切った5列 */
.svc-page .deliver-grid{gap:0;border-top:1px solid var(--rule);}
.svc-page .deliver-grid li{
  border:0;border-right:1px solid var(--rule-soft);border-radius:0;background:none;
  padding:24px 20px 22px;
}
.svc-page .deliver-grid li:last-child{border-right:0;}
.svc-page .deliver-grid svg{stroke:var(--accent);}

/* 料金：カード3枚 → 罫線で仕切った3列。上端に1本 */
.svc-page main .plan.glass{
  border:0;border-top:1px solid var(--rule);border-right:1px solid var(--rule-soft);
  border-radius:0;padding:26px 24px 30px;background:none;
}
.svc-page .grid3{gap:0;}
.svc-page .grid3 .plan:last-child{border-right:0;}
.svc-page .plan .plan-badge{background:var(--accent);border-color:var(--accent);color:#fff;}
.svc-page .plan .price{font-family:var(--disp);}

/* 相談CTA：パネルをやめ、罫線で挟んだ帯に */
.svc-page main .cta-inner.glass,
.svc-page main .next-axis.glass{
  border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  border-radius:0;padding:44px 0;background:none;
}

/* ══ Cのグリッド操作：幅を変えて強調を作る ══ */
/* 導入メリット：番号列を細く、本文を広く（1:4） */
.svc-page .bene li{grid-template-columns:96px minmax(0,1fr);gap:0 30px;}
.svc-page .bene .b-no{font-size:clamp(38px,4vw,56px);-webkit-text-stroke-color:rgba(47,91,215,.42);}
.svc-page .bene .b-who{border-color:rgba(47,91,215,.4);color:var(--accent);}
/* 進め方：番号を左の細い列に固定（2:1の逆） */
.svc-page .nf-timeline .nf-tl-no{border-color:var(--rule);color:var(--accent);}
/* 差し色は1点だけ。リンクとバッジに限定する */
.svc-page .case-brief .cb-link{color:var(--accent);border-color:rgba(47,91,215,.45);}
.svc-page .nf-tl-meta{border-color:rgba(47,91,215,.35);color:var(--accent);}

@media (max-width:900px){
  .svc-page .deliver-grid li{border-right:0;border-bottom:1px solid var(--rule-soft);}
  .svc-page main .plan.glass{border-right:0;}
  .svc-page .clients-grid li:nth-child(6n){border-right:1px solid var(--rule-soft);}
}

/* 箱を外して余白を組み直した結果、絶対配置のバッジが見出し行に重なった。
   浮かせるのをやめ、行として上に置く */
.svc-page .plan .plan-badge{
  position:static;
  display:inline-block;
  margin:0 0 12px;
  padding:4px 10px;
  font-size:11px;
  letter-spacing:.06em;
}
.svc-page .plan .for{margin-top:0;}
/* 納品物の説明が1文字だけ折り返していた */
.svc-page .deliver-grid li{padding:24px 16px 22px;}
.svc-page .deliver-grid small{font-size:11px;line-height:1.7;}
/* カードがflex列のためバッジが横いっぱいに伸びていた */
.svc-page .plan .plan-badge{align-self:flex-start;width:auto;}

/* ════════════════════════════════════════════════════════════
   ガイドブック版（写真なし・表紙＋目次＋大見出し）
   .gb 配下。写真ヒーローを廃し、紙のガイドラインに寄せる。
   ════════════════════════════════════════════════════════════ */

/* ── 表紙 ── */
.svc-page .gb-cover{padding:clamp(96px,13vh,150px) 0 clamp(56px,7vh,84px);border-bottom:1px solid var(--rule);}
.svc-page .gb-en{font-family:var(--disp);font-size:clamp(15px,1.7vw,19px);letter-spacing:.14em;
  color:var(--dim);margin-bottom:18px;}
.svc-page .gb-cover h1{
  /* 700はゴシック前提の指定。明朝は500・600のみ読み込んでいるため合成ボールドになる */
  font-size:clamp(34px,6.4vw,76px);font-weight:600;line-height:1.28;letter-spacing:-.005em;
  color:var(--kachi);margin:0;
}
.svc-page .gb-lead{margin-top:30px;font-size:clamp(15px,1.7vw,17px);line-height:2;color:var(--body);max-width:640px;}
/* 発行情報。ガイドブックらしさはこの一行が担う */
.svc-page .gb-meta{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.svc-page .gb-meta > div{display:flex;align-items:baseline;gap:12px;padding:14px 28px 14px 0;
  border-right:1px solid var(--rule-soft);margin-right:28px;}
.svc-page .gb-meta > div:last-child{border-right:0;margin-right:0;}
.svc-page .gb-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);}
.svc-page .gb-meta dd{margin:0;font-size:13.5px;font-weight:500;color:var(--kachi);}

/* ── ボタン：塗り1つ＋罫線1つ。角丸3px ── */
.svc-page .gb-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px;}
.svc-page .gb-btn{
  display:inline-flex;align-items:center;padding:15px 30px;border-radius:var(--r-pill);
  border:1px solid var(--rule);font-size:14px;font-weight:500;letter-spacing:.04em;
  color:var(--kachi);text-decoration:none;transition:.25s;
}
.svc-page .gb-btn:hover{border-color:var(--kachi);}
.svc-page .gb-btn.is-primary{background:var(--kachi);border-color:var(--kachi);color:#fff;}
.svc-page .gb-btn.is-primary:hover{background:var(--accent);border-color:var(--accent);}

/* ── 目次 ── */
.svc-page .gb-contents{padding:clamp(56px,7vh,84px) 0;}
.svc-page .gb-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--dim);margin-bottom:22px;}
.svc-page .gb-toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.svc-page .gb-toc a{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.15fr);gap:0 24px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;transition:.22s;
}
.svc-page .gb-toc a:hover{padding-left:10px;}
.svc-page .gb-toc .n{font-family:var(--disp);font-style:italic;font-size:20px;color:var(--dim);}
.svc-page .gb-toc .t{font-size:clamp(17px,1.9vw,21px);font-weight:600;color:var(--kachi);letter-spacing:.01em;}
.svc-page .gb-toc .d{font-size:13.5px;line-height:1.8;color:var(--body);}
.svc-page .gb-toc a:hover .n{color:var(--accent);}

/* ── シリーズ内の位置づけ（旧サービス切替） ── */
.svc-page .gb-series-nav{margin-top:52px;}
.svc-page .gb-series-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);}
.svc-page .gb-series-nav li{border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft);}
.svc-page .gb-series-nav li:last-child{border-right:0;}
.svc-page .gb-series-nav li > *,
.svc-page .gb-series-nav li{display:block;}
.svc-page .gb-series-nav a,
.svc-page .gb-series-nav li.is-current{display:block;padding:18px 20px;text-decoration:none;transition:.22s;}
.svc-page .gb-series-nav a:hover{background:rgba(47,91,215,.05);}
.svc-page .gb-series-nav span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);margin-bottom:8px;}
.svc-page .gb-series-nav strong{display:block;font-size:14px;font-weight:600;color:var(--kachi);line-height:1.5;}
.svc-page .gb-series-nav small{display:block;margin-top:4px;font-size:11.5px;color:var(--dim);}
.svc-page .gb-series-nav li.is-current{background:rgba(47,91,215,.06);box-shadow:inset 3px 0 0 var(--accent);}
.svc-page .gb-series-nav li.is-current span{color:var(--accent);}

/* ── 本編の見出しを大きく ── */
.svc-page .gb main h2,
.svc-page main h2{font-size:clamp(28px,4.4vw,54px);line-height:1.32;letter-spacing:-.005em;}
.svc-page main section > .container > .sec-lead{margin-top:22px;font-size:15.5px;max-width:660px;}
.svc-page main > section{padding:clamp(60px,8vh,96px) 0;}

/* ── 01 の図 ── */
.svc-page .gb-fig{margin:46px 0 0;}
.svc-page .gb-fig svg{width:100%;height:auto;display:block;}
.svc-page .gb-fig figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--dim);letter-spacing:.02em;}
.svc-page .gb-fig .gb-box{fill:none;stroke:var(--kachi);stroke-width:1.2;}
.svc-page .gb-fig .gb-ground{fill:rgba(24,27,57,.05);stroke:rgba(24,27,57,.28);}
.svc-page .gb-fig .gb-void{stroke:rgba(24,27,57,.3);stroke-dasharray:5 6;}
.svc-page .gb-fig .gb-key{fill:rgba(47,91,215,.10);stroke:var(--accent);stroke-width:1.6;}
.svc-page .gb-fig text{font-family:var(--sans);}
.svc-page .gb-fig .gb-fig-h{font-family:var(--disp);font-style:italic;font-size:19px;fill:var(--dim);}
.svc-page .gb-fig .gb-fig-t{font-size:15px;font-weight:600;fill:var(--kachi);}
.svc-page .gb-fig .gb-fig-l{font-size:15px;font-weight:500;fill:var(--kachi);}
.svc-page .gb-fig .gb-fig-v{font-size:13px;fill:rgba(24,27,57,.45);}
.svc-page .gb-fig .gb-fig-c{font-size:13px;fill:var(--body);}
.svc-page .gb-fig .gb-on{fill:var(--accent);}
.svc-page .gb-fig .gb-rule-v{stroke:var(--rule);stroke-width:1;}
.svc-page .gb-fig .gb-lift{stroke:var(--accent);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ── 補足ブロック（枠でなく、左の罫線1本） ── */
.svc-page .gb-note{margin-top:44px;padding-left:22px;border-left:2px solid var(--rule);}
.svc-page .gb-note-h{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--kachi);margin-bottom:12px;}
.svc-page .gb-note ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.svc-page .gb-note li{font-size:14px;line-height:1.85;color:var(--body);}

/* ── 巻末の次巻案内 ── */
.svc-page .gb-next{display:block;margin-top:52px;padding:26px 0;text-decoration:none;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:.22s;}
.svc-page .gb-next:hover{padding-left:10px;}
.svc-page .gb-next .l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--accent);margin-bottom:10px;}
.svc-page .gb-next strong{display:block;font-size:clamp(18px,2.2vw,24px);font-weight:600;color:var(--kachi);}
.svc-page .gb-next small{display:block;margin-top:8px;font-size:13px;color:var(--body);}

@media (max-width:820px){
  .svc-page .gb-toc a{grid-template-columns:44px minmax(0,1fr);gap:0 16px;}
  .svc-page .gb-toc .d{grid-column:2;margin-top:5px;}
  .svc-page .gb-series-nav ul{grid-template-columns:1fr 1fr;}
  .svc-page .gb-series-nav li:nth-child(2n){border-right:0;}
  .svc-page .gb-meta > div{padding-right:18px;margin-right:18px;}
}
@media (max-width:560px){
  .svc-page .gb-series-nav ul{grid-template-columns:1fr;}
  .svc-page .gb-series-nav li{border-right:0;}
  .svc-page .gb-cta{flex-direction:column;align-items:stretch;}
  .svc-page .gb-btn{justify-content:center;}
}

/* ════════════════════════════════════════════════════════════
   1項目＝1画面（見開き送り）
   各章をビューポート高に合わせ、中身を上下中央に置く。
   スクロールは proximity スナップ。mandatory にすると、
   画面より背の高い章で操作を奪われるため使わない。
   ════════════════════════════════════════════════════════════ */
@media (min-width:900px) and (min-height:640px){
  html{scroll-snap-type:y proximity;}
  .svc-page main > section{
    min-height:100svh;
    display:flex;
    align-items:center;
    padding:104px 0 76px;      /* 上は固定ヘッダー分を空ける */
    scroll-snap-align:start;
  }
  .svc-page main > section > .container{width:100%;}

  /* 1画面に収めるため、章内の間隔を詰める */
  .svc-page main section > .container > .sec-lead{margin-top:18px;margin-bottom:0;}
  .svc-page .gb-fig{margin-top:34px;}
  .svc-page .gb-fig figcaption{margin-top:14px;padding-top:12px;}
  .svc-page .deliver{margin-top:30px;padding-top:24px;}
  .svc-page .deliver-head{margin-bottom:20px;}
  .svc-page .bene{margin-top:26px;}
  .svc-page .bene li{padding:22px 0;}
  .svc-page .grid3{margin-top:30px;}
  .svc-page .stat-band{margin-top:34px;}
  .svc-page .stat-band .sbn .v{font-size:clamp(44px,5.4vw,78px);}
  .svc-page .nf-timeline{margin-top:26px;}
  .svc-page .case-brief{margin-top:30px;}
  .svc-page .nf-faq{margin-top:26px;}
  .svc-page .gb-cta{margin-top:30px;}
  .svc-page .gb-next{margin-top:34px;}
  .svc-page .gb-contents .gb-toc a{padding:16px 0;}
  .svc-page .gb-series-nav{margin-top:34px;}

  /* 章の変わり目が分かるよう、下端に1本 */
  .svc-page main > section + section{border-top:1px solid var(--rule-soft);}
}
/* 画面が低いときはスナップを切り、通常のスクロールに戻す */
@media (max-height:639px){
  html{scroll-snap-type:none;}
}

@media (min-width:900px) and (min-height:640px){
  /* 中身が画面より高い章で、上端が切れて読めなくなるのを防ぐ。
     safe center は溢れたとき start 寄せに倒れる */
  .svc-page main > section{align-items:flex-start;}
  .svc-page main > section > .container{margin-top:auto;margin-bottom:auto;}

  /* 04 は要素が多く1画面に収まらなかったので、この章だけ詰める */
  .svc-page #plans h2{font-size:clamp(26px,3.4vw,42px);}
  .svc-page #plans .grid3{margin-top:24px;}
  .svc-page #plans main .plan.glass,
  .svc-page #plans .plan.glass{padding:20px 22px 24px;}
  .svc-page #plans .plan p{font-size:13.5px;line-height:1.85;}
  .svc-page #plans .plan .btn{margin-top:16px;}
  .svc-page #plans .stat-band{margin-top:26px;padding:30px max(24px,calc(50vw - 570px));}
  .svc-page #plans .stat-band .sbn .v{font-size:clamp(38px,4.4vw,62px);}
  .svc-page #plans .stat-band .sbn .kk{margin-bottom:12px;}
  .svc-page #plans .stat-band .sbn .k{margin-top:12px;font-size:12.5px;}
  .svc-page #plans .note{margin-top:16px;}
}

/* ════════════════════════════════════════════════════════════
   図版の追加分と、体裁の詰め
   ════════════════════════════════════════════════════════════ */

/* ── 図の追加パーツ ── */
.svc-page .gb-fig .gb-line{stroke:rgba(24,27,57,.3);stroke-width:2;stroke-linecap:round;}
.svc-page .gb-fig .gb-on-s{stroke:var(--accent);}
.svc-page .gb-fig .gb-gap{stroke:rgba(24,27,57,.22);stroke-width:1;stroke-dasharray:3 5;}
.svc-page .gb-fig.is-compact{margin-top:28px;}
.svc-page .gb-fig.is-compact figcaption{margin-top:12px;padding-top:10px;}

/* ── 数値帯の全幅計算を判型（1000px）に合わせる ──
   1140px 時代の数値が残っていて、左端が本文と揃っていなかった */
.svc-page .stat-band{padding-left:max(24px,calc(50vw - 476px));padding-right:max(24px,calc(50vw - 476px));}
@media (min-width:900px) and (min-height:640px){
  .svc-page #plans .stat-band{padding:30px max(24px,calc(50vw - 476px));}
}

/* ── ホバーで幅が動くと行がガタつくので、変位は transform で ── */
.svc-page .gb-toc a:hover{padding-left:0;transform:translateX(8px);}
.svc-page .gb-toc a{transition:transform .22s;}
.svc-page .gb-next:hover{padding-left:0;transform:translateX(8px);}
.svc-page .gb-next{transition:transform .22s;}

/* ── 章の境界線が、面付きの章と重なって二重に見えるのを防ぐ ── */
@media (min-width:900px) and (min-height:640px){
  .svc-page main > section.surface + section,
  .svc-page main > section + section.surface{border-top:0;}
}

/* ── 読み進み位置のバーを差し色に ── */
.svc-page .scroll-progress{background:var(--accent);}

/* ── 巻末付録（導入企業）に位置づけの見出しを与える ── */
.svc-page .clients-label{font-size:12px;letter-spacing:.18em;color:var(--dim);}
.svc-page .clients-appendix{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  color:var(--accent);margin-bottom:14px;}

/* 1画面に収めるため、図の高さに上限を置く（幅は比率で追従） */
@media (min-width:900px) and (min-height:640px){
  .svc-page #why .gb-fig svg{max-height:44svh;width:auto;margin:0 auto;}
  .svc-page #deliver .gb-fig svg{max-height:22svh;width:auto;margin:0 auto;}
  .svc-page #case .gb-fig svg{max-height:24svh;width:auto;margin:0 auto;}
}

/* 章の上下余白をもう一段詰め、図の上限も下げる。
   1画面に収まるかは画面高に依存するため、余裕を持たせておく */
@media (min-width:900px) and (min-height:640px){
  .svc-page main > section{padding:88px 0 56px;}
  .svc-page #why .gb-fig svg{max-height:40svh;}
  .svc-page #why .gb-fig{margin-top:26px;}
  .svc-page main h2{line-height:1.28;}
}

/* 03・05 の図で使う棒と基線 */
.svc-page .gb-fig .gb-base{stroke:rgba(24,27,57,.28);stroke-width:1;}
.svc-page .gb-fig .gb-bar{fill:rgba(24,27,57,.14);}
.svc-page .gb-fig .gb-bar-on{fill:var(--accent);}
.svc-page .gb-fig .gb-bar-q{fill:rgba(24,27,57,.10);}
.svc-page .gb-fig .gb-bar-d{fill:none;stroke:rgba(24,27,57,.3);stroke-width:1.2;stroke-dasharray:5 5;}
.svc-page .gb-fig .gb-fig-s{font-size:14px;font-weight:600;fill:var(--kachi);}
.svc-page .gb-fig .gb-w{fill:#fff;}

/* 図が増えた分、この2章も高さの上限を置いて1画面に収める */
@media (min-width:900px) and (min-height:640px){
  .svc-page #benefits .gb-fig svg{max-height:17svh;width:auto;margin:0 auto;}
  .svc-page #process .gb-fig svg{max-height:15svh;width:auto;margin:0 auto;}
  .svc-page #benefits .gb-fig,
  .svc-page #process .gb-fig{margin-top:22px;}
  .svc-page #benefits .bene{margin-top:20px;}
  .svc-page #benefits .bene li{padding:16px 0;}
  .svc-page #process .nf-timeline{margin-top:20px;}
}
/* 実測であふれた2章をさらに詰める（03 +52px / 05 +12px） */
@media (min-width:900px) and (min-height:640px){
  .svc-page #benefits .gb-fig svg{max-height:13svh;}
  .svc-page #benefits .gb-fig{margin-top:18px;}
  .svc-page #benefits .bene li{padding:13px 0;}
  .svc-page #benefits .bene p{margin-top:6px;}
  .svc-page #process .gb-fig svg{max-height:12svh;}
  .svc-page #process .nf-timeline li{padding-bottom:14px;}
}

/* ════════════════════════════════════════════════════════════
   03 / 04 / 05 の作り直し
   ════════════════════════════════════════════════════════════ */

/* ── 03：項目番号を廃止。章番号（01〜08）と紛れていたため。
       左列は担当部門にして、誰の話かを先に見せる ── */
.svc-page .bene li{grid-template-columns:136px minmax(0,1fr);gap:0 28px;align-items:start;}
.svc-page .bene .b-who{
  display:inline-block;
  margin-top:4px;
  padding:0;
  border:0;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--accent);
  white-space:normal;
  line-height:1.6;
}
.svc-page .bene h3{display:block;gap:0;}

/* ── 04：単位の「約」を「ヶ月」と同じ大きさに揃える ── */
.svc-page .stat-band .sbn .v small.pre{margin-left:0;margin-right:6px;}

/* ── 05：番号つきの縦タイムラインをやめ、罫線区切りの2列に ── */
.svc-page .gb-steps{margin:26px 0 0;border-top:1px solid var(--rule);}
.svc-page .gb-steps > div{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  gap:0 28px;
  align-items:baseline;
  padding:15px 0;
  border-bottom:1px solid var(--rule-soft);
}
.svc-page .gb-steps dt{font-size:15.5px;font-weight:600;color:var(--kachi);letter-spacing:.02em;}
.svc-page .gb-steps dd{margin:0;font-size:14px;line-height:1.8;color:var(--body);}

@media (max-width:700px){
  .svc-page .bene li{grid-template-columns:1fr;gap:6px;}
  .svc-page .gb-steps > div{grid-template-columns:1fr;gap:4px;padding:14px 0;}
}

/* ── 05 の図を大きく。リストが軽くなった分を図に回す ── */
@media (min-width:900px) and (min-height:640px){
  .svc-page #process .gb-fig svg{max-height:24svh;}
  .svc-page #process .gb-fig{margin-top:26px;}
  .svc-page #process .gb-steps{margin-top:22px;}
}
/* 03 はリードを足した分あふれたので、図と行間で吸収する */
@media (min-width:900px) and (min-height:640px){
  .svc-page #benefits .gb-fig svg{max-height:11svh;}
  .svc-page #benefits .gb-fig{margin-top:14px;}
  .svc-page #benefits .gb-fig figcaption{margin-top:10px;padding-top:8px;}
  .svc-page #benefits .bene{margin-top:16px;}
}
/* 余裕0はフォント読込のタイミングで溢れうるので、わずかに逃がす */
@media (min-width:900px) and (min-height:640px){
  .svc-page #benefits .bene li{padding:11px 0;}
}

/* ════════════════════════════════════════════════════════════
   指摘の反映：キャプションの位置／見出しサイズの統一／
   金額の拡大／05の流れ表示／左レールに表紙・目次
   ════════════════════════════════════════════════════════════ */

/* ── 図の説明文は図に密着させる。罫線で切ると別ブロックに見えていた ── */
.svc-page .gb-fig figcaption{
  margin-top:12px;
  padding-top:0;
  border-top:0;
  font-size:12.5px;
  line-height:1.75;
  color:var(--dim);
}
/* 03：リードと図が近すぎたので離す */
@media (min-width:900px) and (min-height:640px){
  .svc-page #benefits .gb-fig{margin-top:30px;}
}

/* ── 見出しの大きさを全章で統一（04だけ小さくしていたのをやめる） ── */
@media (min-width:900px) and (min-height:640px){
  .svc-page #plans h2{font-size:clamp(28px,4.4vw,54px);}
}

/* ── 04：金額を大きく。ここが一番読まれる数字 ── */
.svc-page .plan .price{font-size:clamp(30px,3.4vw,42px);line-height:1.2;margin-top:14px;}
.svc-page .plan .price small{font-size:.4em;margin-left:3px;letter-spacing:.02em;}

/* ── 05：帯の各区間の真下に説明を置き、左から右への流れを見せる ── */
.svc-page .gb-flowfig{margin-top:26px;}
.svc-page .gb-flowfig svg{width:100%;max-height:none;}
.svc-page .gb-flow{
  list-style:none;margin:6px 0 0;padding:0;
  display:grid;
  grid-template-columns:131fr 196fr 327fr 282fr;   /* 帯の区間比とそろえる */
  column-gap:.84%;
  border-top:1px solid var(--rule);
}
.svc-page .gb-flow li{padding:16px 18px 0 0;position:relative;}
/* 区間の始まりを示す短い縦の目盛 */
.svc-page .gb-flow li::before{content:"";position:absolute;left:0;top:-1px;width:2px;height:13px;background:var(--accent);}
.svc-page .gb-flow strong{display:block;font-size:14.5px;font-weight:600;color:var(--kachi);line-height:1.55;margin-bottom:8px;}
.svc-page .gb-flow p{margin:0;font-size:12.5px;line-height:1.8;color:var(--body);}
.svc-page .gb-fignote{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--dim);}

@media (max-width:820px){
  .svc-page .gb-flow{grid-template-columns:1fr 1fr;column-gap:20px;}
  .svc-page .gb-flow li{padding:14px 0 12px 12px;}
  .svc-page .gb-flow li::before{width:2px;height:100%;top:0;}
}

/* ── 左レール：表紙・目次は番号を持たないので、番号欄を詰める ── */
@media (min-width:1240px){
  .svc-page .sec-rail .sr-it:has(.sr-no:empty) .sr-no{min-width:14px;}
}
/* 金額の拡大と見出し統一で 03・04 の余裕が消えたので、行間と余白で逃がす */
@media (min-width:900px) and (min-height:640px){
  .svc-page #benefits .gb-fig svg{max-height:10svh;}
  .svc-page #benefits .gb-fig{margin-top:26px;}
  .svc-page #benefits .bene li{padding:10px 0;}
  .svc-page #plans .grid3{margin-top:18px;}
  .svc-page #plans .stat-band{margin-top:20px;padding:24px max(24px,calc(50vw - 476px));}
}
/* 表紙・目次は章番号を持たないので、ダッシュを薄く */
@media (min-width:1240px){
  .svc-page .sec-rail .sr-it:nth-child(-n+2) .sr-no{color:rgba(24,27,57,.3);}
}
/* 金額の指定が #plans .plan p（IDつき）に負けて小さいままだった */
.svc-page #plans .plan .price{font-size:clamp(30px,3.4vw,42px);line-height:1.2;margin-top:14px;font-family:var(--disp);}
.svc-page #plans .plan .price small{font-size:.38em;margin-left:4px;letter-spacing:.02em;}
@media (min-width:900px) and (min-height:640px){
  .svc-page #plans .plan .for{font-size:12.5px;}
  .svc-page #plans .plan .period{margin-top:8px;}
}
/* 金額拡大で 04 が +8px 溢れたので数値帯の余白で吸収 */
@media (min-width:900px) and (min-height:640px){
  .svc-page #plans .stat-band{padding:20px max(24px,calc(50vw - 476px));}
}
@media (min-width:900px) and (min-height:640px){
  .svc-page #plans .stat-band{margin-top:14px;}
}

/* ── 05：列幅の差が大きく、行数と改行位置がばらついていた。
       段階名は帯のラベルと名前で対応するので、列は等幅にして読みやすさを取る ── */
.svc-page .gb-flow{grid-template-columns:repeat(4,1fr);column-gap:20px;}
.svc-page .gb-flow li{padding:16px 0 0 14px;}
.svc-page .gb-flow li::before{left:0;}
.svc-page .gb-flow strong{font-size:14px;line-height:1.5;margin-bottom:9px;}
.svc-page .gb-flow p{font-size:12.5px;line-height:1.85;}

/* ── 03：図を大きく。4項目の文字を落として場所をつくる ── */
@media (min-width:900px) and (min-height:640px){
  .svc-page #benefits .gb-fig svg{max-height:20svh;}
  .svc-page #benefits .bene h3{font-size:clamp(16px,1.7vw,20px);margin-bottom:7px;}
  .svc-page #benefits .bene p{font-size:13px;line-height:1.8;}
  .svc-page #benefits .bene .b-who{font-size:12px;}
  .svc-page #benefits .bene li{padding:9px 0;grid-template-columns:124px minmax(0,1fr);gap:0 24px;}
}
/* 「管理・バックオフィス」だけ折り返していたので左列を広げる */
@media (min-width:900px) and (min-height:640px){
  .svc-page #benefits .bene li{grid-template-columns:138px minmax(0,1fr);}
}

/* ════════════════════════════════════════════════════════════
   モバイル（〜820px）
   デスクトップの寸法がそのまま降りてきていて、ガイドブックの
   佇まいが出ていなかった。章の切り替わりを強くし、目次を畳み、
   図は文字が潰れないよう横スクロールで実寸を確保する。
   ════════════════════════════════════════════════════════════ */
@media (max-width:820px){

  /* ── 章の頭：番号を大きく出して「何章目か」を見せる ── */
  .svc-page main > section{padding:52px 0;}
  /* 固定ヘッダー（高さ57px）分の逃げは、これまでPC幅(900px以上)の指定にしか
     入っておらず、スマホでは1章目がヘッダーの下に潜り込んでいた（実測 -1px）。
     1章目だけヘッダー高さ＋余白を確保する。 */
  .svc-page main > section:first-child{padding-top:84px;}
  .svc-page main > section + section{border-top:1px solid var(--rule);}
  .svc-page .sec-head{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
  }
  .svc-page .sec-head .en{font-size:10.5px;letter-spacing:.16em;}
  .svc-page .sec-head .ln{display:none;}
  .svc-page main h2{font-size:clamp(24px,6.4vw,30px);line-height:1.4;}
  .svc-page main section > .container > .sec-lead{font-size:14px;line-height:1.9;margin-top:14px;}

  /* ── 表紙：発行情報が2段に折れていたので2列で組む ── */
  .svc-page .gb-cover{padding:56px 0 44px;}
  .svc-page .gb-cover h1{font-size:clamp(28px,8.4vw,36px);}
  .svc-page .gb-lead{margin-top:22px;font-size:14.5px;line-height:1.95;}
  .svc-page .gb-meta{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:28px;}
  .svc-page .gb-meta > div{
    padding:11px 0;margin-right:0;border-right:0;
    border-bottom:1px solid var(--rule-soft);
  }
  .svc-page .gb-meta > div:nth-child(3){grid-column:1 / -1;border-bottom:0;}
  .svc-page .gb-cta{margin-top:26px;}
  .svc-page .gb-btn{padding:13px 22px;font-size:13.5px;}

  /* ── 目次：1画面の1.7倍あった。説明を落とし、番号＋章題だけにする ── */
  .svc-page .gb-contents{padding:44px 0;}
  .svc-page .gb-toc a{
    grid-template-columns:38px 1fr;
    gap:0 12px;
    padding:11px 0;
    align-items:center;
  }
  .svc-page .gb-toc .n{font-size:15px;}
  .svc-page .gb-toc .t{font-size:15px;line-height:1.5;}
  .svc-page .gb-toc .d{display:none;}          /* 章題だけで足りる */
  .svc-page .gb-toc a:hover{transform:none;}

  /* 本ガイドの位置づけ：縦4段 → 2列 */
  .svc-page .gb-series-nav{margin-top:28px;}
  .svc-page .gb-series-nav ul{grid-template-columns:1fr 1fr;}
  .svc-page .gb-series-nav a,
  .svc-page .gb-series-nav li.is-current{padding:12px 14px;}
  .svc-page .gb-series-nav span{margin-bottom:5px;}
  .svc-page .gb-series-nav strong{font-size:13px;}
  .svc-page .gb-series-nav small{font-size:11px;}

  /* ── 図：横2カラムのまま縮んで文字が読めなくなっていた。
         実寸を確保して横スクロールさせる ── */
  .svc-page .gb-fig{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:24px;}
  .svc-page .gb-fig svg{min-width:600px;max-height:none;width:600px;}
  .svc-page .gb-fig figcaption{margin-top:10px;font-size:12px;}
  .svc-page .gb-fig::-webkit-scrollbar{height:3px;}
  .svc-page .gb-fig::-webkit-scrollbar-thumb{background:rgba(24,27,57,.25);}

  /* ── 04：カードと数値帯を詰める ── */
  .svc-page #plans .plan.glass{padding:18px 0 22px;border-top:1px solid var(--rule-soft);}
  .svc-page #plans .plan .price{font-size:30px;margin-top:10px;}
  .svc-page .stat-band .sbn{padding:20px 0;}
  .svc-page .stat-band .sbn .v{font-size:44px;}
  .svc-page .stat-band .sbn .k{margin-top:8px;font-size:12px;}

  /* ── 03 / 05：左列を上に出す ── */
  .svc-page .bene li{grid-template-columns:1fr;gap:4px;padding:16px 0;}
  .svc-page .bene h3{font-size:17px;}
  .svc-page .bene p{font-size:13.5px;}
  .svc-page .gb-flow{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:4px;}
  .svc-page .gb-flow strong{font-size:13.5px;}
  .svc-page .gb-flow p{font-size:12px;}

  /* ── 納品物：5列 → 2列 ── */
  .svc-page .deliver-grid{grid-template-columns:1fr 1fr;}
}
/* 発行情報：2列だと「経営・DX推進・現場責任者」が折れて隣と混ざるので1列に */
@media (max-width:820px){
  .svc-page .gb-meta{grid-template-columns:1fr;}
  .svc-page .gb-meta > div{
    grid-column:1 / -1;
    gap:14px;padding:10px 0;
    border-bottom:1px solid var(--rule-soft);
  }
  .svc-page .gb-meta > div:last-child{border-bottom:0;}
  .svc-page .gb-meta dt{flex:0 0 34px;}
}

/* ── 02巻（AX）の図：効果 × 実現性のマトリクス ── */
.svc-page .gb-fig .gb-axis{stroke:rgba(24,27,57,.42);stroke-width:1.2;}
.svc-page .gb-fig .gb-grid{stroke:rgba(24,27,57,.12);stroke-width:1;stroke-dasharray:4 5;}
.svc-page .gb-fig .gb-quad{fill:rgba(47,91,215,.07);stroke:var(--accent);stroke-width:1.2;}
.svc-page .gb-fig .gb-dot{fill:rgba(24,27,57,.32);}
.svc-page .gb-fig .gb-dot-on{fill:var(--accent);}
.svc-page .gb-fig .gb-fig-p{font-size:13px;fill:var(--body);}
/* 金額でない項目（個別見積・月額応相談）。
   .price を名乗ると site.js のカウントアップに拾われて NaN になるため、
   別クラスにしてある（共有JSは触らない方針） */
.svc-page .plan .price-text,
.svc-page #plans .plan .price-text{
  font-family:var(--sans);
  font-size:20px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--kachi);
}

/* ── 03巻（BPO）の図：循環を示す線と、方向のティック ── */
.svc-page .gb-fig .gb-loop{stroke:var(--accent);stroke-width:1.4;}
.svc-page .gb-fig .gb-tick{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* ── 04巻（事業共創）の図：判断の縦線 ── */
.svc-page .gb-fig .gb-judge{stroke:rgba(24,27,57,.45);stroke-width:2;}
.svc-page .gb-fig .gb-judge-on{stroke:var(--accent);}
/* 納品物は巻によって4点／5点と変わる。列数を固定していたため
   4点の巻（02〜04）で右端に1列分の空きが出ていた */
.svc-page .deliver-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
@media (max-width:900px){.svc-page .deliver-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}}
@media (max-width:820px){.svc-page .deliver-grid{grid-template-columns:1fr 1fr;}}
/* 画面高が低い環境（812px 程度）で目次だけ溢れていたので詰める */
@media (min-width:900px) and (min-height:640px){
  .svc-page .gb-contents .gb-toc a{padding:13px 0;}
  .svc-page .gb-contents .gb-series-nav{margin-top:26px;}
  .svc-page .gb-contents .gb-series-nav a,
  .svc-page .gb-contents .gb-series-nav li.is-current{padding:14px 20px;}
}

/* ── 02章「何を渡すか」は成果物が主役の章。
       4点以下の巻はカードに余裕があるので、大きく組んで章の中心に据える
       （5点の01巻は幅が足りないので現状のまま） ── */
.svc-page .deliver-grid:not(:has(> li:nth-child(5))) li{
  padding:32px 26px 30px;
  gap:16px;
}
.svc-page .deliver-grid:not(:has(> li:nth-child(5))) svg{width:52px;height:52px;stroke-width:1.4;}
.svc-page .deliver-grid:not(:has(> li:nth-child(5))) strong{font-size:17px;line-height:1.5;}
.svc-page .deliver-grid:not(:has(> li:nth-child(5))) small{font-size:12.5px;line-height:1.8;}
.svc-page .deliver-grid:not(:has(> li:nth-child(5))){border-bottom:1px solid var(--rule-soft);}
@media (min-width:900px) and (min-height:640px){
  .svc-page #deliver .deliver{margin-top:34px;padding-top:28px;}
  .svc-page #deliver .deliver-head{margin-bottom:24px;}
}

/* ════════════════════════════════════════════════════════════
   指摘の反映：位置づけの見せ方 / マトリクスの点 / 02の配置 / 05の列一致
   ════════════════════════════════════════════════════════════ */

/* ── シリーズ全4巻：箱の並びをやめ、整える→使う→回す→生む の流れに ── */
.svc-page .gb-series-nav.is-flow ul{
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
  border-bottom:0;
}
.svc-page .gb-series-nav.is-flow li{border:0;position:relative;}
.svc-page .gb-series-nav.is-flow li::before{
  content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:transparent;
}
.svc-page .gb-series-nav.is-flow li.is-current::before{background:var(--accent);}
.svc-page .gb-series-nav.is-flow a,
.svc-page .gb-series-nav.is-flow li.is-current{
  padding:16px 20px 14px 0;background:none;box-shadow:none;
}
.svc-page .gb-series-nav.is-flow span{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);margin-bottom:7px;
}
.svc-page .gb-series-nav.is-flow li.is-current span{color:var(--accent);}
.svc-page .gb-series-nav.is-flow strong{font-size:13.5px;color:var(--dim);font-weight:500;}
.svc-page .gb-series-nav.is-flow li.is-current strong{color:var(--kachi);font-weight:600;}
.svc-page .gb-series-nav.is-flow small{margin-top:5px;font-size:11px;color:var(--dim);}
.svc-page .gb-series-nav.is-flow li.is-current small{color:var(--accent);}
.svc-page .gb-series-nav.is-flow a:hover{background:none;}
.svc-page .gb-series-nav.is-flow a:hover strong{color:var(--kachi);}

/* is-flow だけ列を落とす指定が無く、狭い画面でも4列のままだった。
   通常の gb-series-nav（820pxで2列・560pxで1列）と同じ挙動に揃える。
   サービス名を正式なラベルに統一して文言が長くなり、4列のままでは
   1項目が3〜4行に折り返して読みにくかった。 */
@media (max-width:820px){
  .svc-page .gb-series-nav.is-flow ul{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .svc-page .gb-series-nav.is-flow ul{grid-template-columns:1fr;}
  .svc-page .gb-series-nav.is-flow a,
  .svc-page .gb-series-nav.is-flow li.is-current{padding:14px 20px 12px 0;}
}

/* ── マトリクスの点：■ → ●。径で効果の大きさ、濃さで優先度を示す ── */
.svc-page .gb-fig .gb-pt{fill:rgba(24,27,57,.34);}
.svc-page .gb-fig .gb-pt-weak{fill:rgba(24,27,57,.18);}
.svc-page .gb-fig .gb-pt-on{fill:var(--accent);}

/* ── 02：リードと成果物が詰まっていた。間隔を空け、4項目を等間隔に広げる ── */
@media (min-width:900px) and (min-height:640px){
  .svc-page #deliver .deliver{margin-top:48px;padding-top:34px;}
  .svc-page #deliver .deliver-head{margin-bottom:30px;}
}
.svc-page .deliver-grid:not(:has(> li:nth-child(5))){
  column-gap:28px;
  border-top:0;
  border-bottom:0;
}
.svc-page .deliver-grid:not(:has(> li:nth-child(5))) li{
  border:0;
  border-top:1px solid var(--rule);
  padding:26px 0 0;
}

/* ── 05：帯の区間と説明の列がずれていた。列比とギャップを帯に合わせる ──
       （標準化は帯の比率が違うので等幅のまま） */
.svc-page .gb-flow{grid-template-columns:228fr 228fr 228fr 252fr;column-gap:.84%;}
.svc-page.gb-vol1 .gb-flow{grid-template-columns:repeat(4,1fr);column-gap:20px;}
@media (max-width:820px){
  .svc-page .gb-flow,
  .svc-page.gb-vol1 .gb-flow{grid-template-columns:1fr 1fr;column-gap:16px;}
}

/* ── 03：リードと4項目が詰まっていた。間隔を空け、行にも余裕を持たせる ── */
@media (min-width:900px) and (min-height:640px){
  .svc-page #benefits .bene{margin-top:36px;}
  .svc-page #benefits .bene li{padding:18px 0;}
  .svc-page #benefits .bene p{margin-top:8px;}
}
/* 部門名が見出しより上にずれて見えたので、行の頭を揃える */
.svc-page .bene .b-who{margin-top:2px;}

/* ── 06：左の CASE ラベルが空きすぎ、本文が右に寄っていた ── */
.svc-page .case-brief{grid-template-columns:88px minmax(0,1fr);gap:0 24px;}
@media (min-width:900px) and (min-height:640px){
  .svc-page #case .case-brief{margin-top:34px;padding-top:28px;}
}

/* ── 07：質問の行に余裕を持たせる ── */
@media (min-width:900px) and (min-height:640px){
  .svc-page #faq .nf-faq{margin-top:32px;}
}
/* A側の連結線は「進むだけ」なので、循環側の差し色と区別する */
.svc-page .gb-fig .gb-mute{stroke:rgba(24,27,57,.3);}

/* ════════════════════════════════════════════════════════════
   /service：4巻の入口。各巻の「悩みの一文」を主役に並べる
   ════════════════════════════════════════════════════════════ */
.svc-page .gb-guides{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--rule);}
.svc-page .gb-guides li{border-bottom:1px solid var(--rule-soft);}
.svc-page .gb-guides a{
  display:grid;
  grid-template-columns:74px minmax(0,1fr) 40px;
  gap:0 22px;
  align-items:center;
  padding:22px 0;
  text-decoration:none;
  transition:transform .22s;
}
.svc-page .gb-guides a:hover{transform:translateX(8px);}
.svc-page .gb-guides .g-no{
  font-family:var(--disp);font-style:italic;font-weight:600;font-size:34px;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(84,103,159,.45);
}
.svc-page .gb-guides a:hover .g-no{-webkit-text-stroke-color:var(--accent);}
.svc-page .gb-guides .g-body{display:grid;gap:0;}
.svc-page .gb-guides .g-verb{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--accent);margin-bottom:9px;
}
.svc-page .gb-guides .g-hook{
  font-size:clamp(18px,2.1vw,25px);font-weight:700;color:var(--kachi);letter-spacing:.01em;line-height:1.5;
}
.svc-page .gb-guides .g-name{margin-top:9px;font-size:12.5px;letter-spacing:.04em;color:var(--dim);}
.svc-page .gb-guides .g-desc{margin-top:7px;font-size:13.5px;line-height:1.8;color:var(--body);max-width:60ch;}
.svc-page .gb-guides .g-go{justify-self:end;font-size:15px;color:var(--dim);}
.svc-page .gb-guides a:hover .g-go{color:var(--accent);}
@media (max-width:820px){
  .svc-page .gb-guides a{grid-template-columns:44px minmax(0,1fr);gap:0 14px;padding:18px 0;}
  .svc-page .gb-guides .g-no{font-size:24px;}
  .svc-page .gb-guides .g-go{display:none;}
  .svc-page .gb-guides a:hover{transform:none;}
}
/* 一覧ページは章が少ないので、見出しの下により余裕を持たせる */
@media (min-width:900px) and (min-height:640px){
  .svc-page.gb-index #guides .gb-guides{margin-top:30px;}
}

/* path で描いた戻り線が塗りつぶされていた（line にしか fill:none が効いていない） */
.svc-page .gb-fig path.gb-loop{fill:none;}
/* /service だけ、旧ページの背景アニメーションを引き続き使う */
.svc-page.gb-index .liquid-bg{display:none;}

/* ════════════════════════════════════════════════════════════
   /service の背景アニメーション
   旧ページ（service-brushup）の演出をそのまま引き継ぐ。
   service-brushup.css は全体を読み込むとレイアウトが衝突するため、
   背景まわりのルールだけを移植した。JS は body.service-brushup を
   起動条件にしているので、クラスだけ付けてある。
   ════════════════════════════════════════════════════════════ */
.proposal-motion-stage{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#fbfdff;transition:background 1s cubic-bezier(.22,1,.36,1);}
.proposal-motion-stage::before,.proposal-motion-stage::after{content:"";position:absolute;border-radius:50%;filter:blur(10px);opacity:.64;transition:width 1.15s cubic-bezier(.22,1,.36,1),height 1.15s cubic-bezier(.22,1,.36,1),left 1.15s cubic-bezier(.22,1,.36,1),right 1.15s cubic-bezier(.22,1,.36,1),top 1.15s cubic-bezier(.22,1,.36,1),bottom 1.15s cubic-bezier(.22,1,.36,1),background 1.15s cubic-bezier(.22,1,.36,1),opacity .8s;}
.proposal-motion-stage::before{left:-10vw;top:12vh;width:44vw;height:44vw;background:radial-gradient(circle,rgba(181,207,244,.48),rgba(230,240,253,.18) 48%,transparent 72%);}
.proposal-motion-stage::after{right:-12vw;bottom:-14vw;width:48vw;height:48vw;background:radial-gradient(circle,rgba(127,163,222,.24),rgba(220,234,252,.14) 46%,transparent 72%);}
#proposal-motion-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.96;transition:opacity .8s;}
.proposal-motion-wash{position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.58),rgba(255,255,255,.04) 44%,rgba(236,244,255,.22));transition:background 1s cubic-bezier(.22,1,.36,1);}
.proposal-motion-label{position:fixed;z-index:1;right:27px;top:50%;display:flex;align-items:center;gap:10px;margin:0;color:rgba(16,25,54,.48);font-family:Inter,sans-serif;transform:translateY(-50%) rotate(90deg);transform-origin:right center;transition:color .6s;}
.proposal-motion-label::after{content:"";width:42px;height:1px;background:currentColor;}
.proposal-motion-label span{font-size:9px;font-weight:700;letter-spacing:.18em;}
.proposal-motion-label b{font-size:8px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;}
body[data-proposal-scene="impact"] .proposal-motion-stage{background:#f8fbff;}
body[data-proposal-scene="impact"] .proposal-motion-stage::before{left:17vw;top:18vh;width:34vw;height:34vw;background:radial-gradient(circle,rgba(151,188,237,.34),rgba(230,240,253,.12) 52%,transparent 73%);}
body[data-proposal-scene="impact"] .proposal-motion-stage::after{right:5vw;bottom:-12vw;width:42vw;height:42vw;}
body[data-proposal-scene="challenges"] .proposal-motion-stage{background:#f5f8fd;}
body[data-proposal-scene="challenges"] .proposal-motion-stage::before{left:-2vw;top:28vh;width:35vw;height:35vw;background:radial-gradient(circle,rgba(189,208,237,.42),rgba(236,242,252,.12) 54%,transparent 74%);}
body[data-proposal-scene="challenges"] .proposal-motion-stage::after{right:8vw;bottom:12vh;width:32vw;height:32vw;background:radial-gradient(circle,rgba(142,169,220,.25),transparent 70%);}
body[data-proposal-scene="brands"] .proposal-motion-stage{background:linear-gradient(108deg,#f3f6fc 0%,#f8faff 47%,#eef5ff 100%);}
body[data-proposal-scene="brands"] .proposal-motion-stage::before{left:-13vw;top:8vh;width:54vw;height:54vw;background:radial-gradient(circle,rgba(25,42,87,.23),rgba(113,139,196,.08) 48%,transparent 72%);opacity:.55;}
body[data-proposal-scene="brands"] .proposal-motion-stage::after{right:-8vw;bottom:-7vw;width:55vw;height:55vw;background:radial-gradient(circle,rgba(111,160,231,.36),rgba(218,233,253,.14) 49%,transparent 73%);}
body[data-proposal-scene="brands"] .proposal-motion-wash{background:linear-gradient(90deg,rgba(249,251,255,.5),rgba(255,255,255,.04) 47%,rgba(244,249,255,.28));}
body[data-proposal-scene="flow"] .proposal-motion-stage{background:#f7faff;}
body[data-proposal-scene="flow"] .proposal-motion-stage::before{left:12vw;top:-15vw;width:48vw;height:48vw;}
body[data-proposal-scene="flow"] .proposal-motion-stage::after{right:4vw;bottom:-17vw;width:44vw;height:44vw;background:radial-gradient(circle,rgba(103,145,216,.3),transparent 72%);}
body[data-proposal-scene="insights"] .proposal-motion-stage{background:#f7f9fd;}
body[data-proposal-scene="insights"] .proposal-motion-stage::before{left:45vw;top:8vh;width:37vw;height:37vw;background:radial-gradient(circle,rgba(141,176,229,.3),transparent 72%);}
body[data-proposal-scene="insights"] .proposal-motion-stage::after{right:50vw;bottom:-18vw;width:44vw;height:44vw;background:radial-gradient(circle,rgba(91,119,180,.19),transparent 72%);}
body[data-proposal-scene="contact"] .proposal-motion-stage{background:#eef4fc;}
body[data-proposal-scene="contact"] .proposal-motion-stage::before{left:24vw;top:12vh;width:52vw;height:52vw;background:radial-gradient(circle,rgba(87,126,200,.3),rgba(225,236,252,.18) 50%,transparent 72%);}
body[data-proposal-scene="contact"] .proposal-motion-stage::after{right:20vw;bottom:-20vw;width:42vw;height:42vw;}
.proposal-motion-label{display:none;}
#proposal-motion-canvas{opacity:.68;}
.proposal-motion-stage,.proposal-motion-stage::before,.proposal-motion-stage::after,.proposal-motion-wash{transition:none;}
#proposal-motion-canvas{opacity:.62;}
/* 4巻の一覧は1画面に収まらなかったので、行の余白と文字を詰める */
@media (min-width:900px) and (min-height:640px){
  .svc-page.gb-index .gb-guides{margin-top:22px;}
  .svc-page.gb-index .gb-guides a{padding:16px 0;}
  .svc-page.gb-index .gb-guides .g-hook{font-size:clamp(17px,1.8vw,21px);}
  .svc-page.gb-index .gb-guides .g-verb{margin-bottom:6px;}
  .svc-page.gb-index .gb-guides .g-name{margin-top:6px;font-size:12px;}
  .svc-page.gb-index .gb-guides .g-desc{margin-top:5px;font-size:12.5px;line-height:1.7;}
  .svc-page.gb-index .gb-guides .g-no{font-size:28px;}
}
/* 4巻の一覧はまだ70px溢れていた。この章だけ上下の余白も詰める */
@media (min-width:900px) and (min-height:640px){
  .svc-page.gb-index #guides{padding:64px 0 44px;}
  .svc-page.gb-index .gb-guides a{padding:12px 0;}
  .svc-page.gb-index #guides .sec-lead{margin-top:14px;}
}

/* 面付きの章が不透明な地色で背景アニメーションを覆っていた。
   章の切り替わりは見せたいので、地色は残したまま透過させる */
.svc-page main > section.surface{background:rgba(246,248,252,.72);}