/* =====================================================================
   v9（2026-10-11）サービスページ（service-v2.html）だけで読む。cta.css のあとに読む
   1. 03「6ヶ月で、形にします」の主役の演出「6ヶ月の軌道図」
      地球＝御社、月＝MUKIAI。月の軌道が段階ごとに外へ広がり、条件がそろうと最後は離れて消える（軌道の広がり＝社内でAIを使う範囲の広がり）。
      旅をするのは御社ではなく私たち（トップの「月が離れても、地球は自分で回る」と同じ向き）。
      書く順番：先に「JS が無いとき＝完成形」、そのあとに「.js-svc があって動かすとき＝初期状態と途中」。
      prefers-reduced-motion のときは JS が .is-static を付けるだけなので、完成形のまま。
   2. 料金：右列を「申し込んだあとの流れ」にする（3D の地球は外した）
   3. 比較表：760px 以下は MUKIAI の行を先頭にする
   共通部品（cta.css／sections.css）は触らない。ここで上書きする。
   ===================================================================== */

/* ---------- 1-1. 並び（PC：左に見出しと段階、右に地図。地図は見出しの横から sticky で付いてくる） ---------- */
.space.sub .svc-lead2{margin-top:12px}
.svc-orbit{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,42%,560px);grid-template-rows:auto 1fr;column-gap:clamp(32px,4.4vw,80px);align-items:start}
.svc-defs{position:absolute;width:0;height:0;overflow:hidden}
.svc-head{grid-column:1;grid-row:1;min-width:0}
.svc-stages{grid-column:1;grid-row:2;min-width:0;margin-top:clamp(28px,3.4vw,44px)}
.svc-map{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--header-h) + 24px);height:min(78vh,720px);min-width:0}
.svc-svg{display:block;width:100%;height:100%;overflow:hidden}   /* 航路は地図の右端で切れて「画面の外へ」抜ける */
.svc-rail{display:none}
.svc-pin,.svc-ic{display:none}
.svc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 1-2. 段階のリスト（線で区切った5行。文字は最初から全部読める） ---------- */
.svc-stages>li{position:relative;padding:clamp(22px,2.6vw,34px) 0;border-top:1px solid var(--rule)}
.svc-stages>li.svc-st--grad{padding-bottom:0}
.space.sub .svc-st-k{display:flex;align-items:baseline;gap:12px;font-size:var(--t5);line-height:var(--lh5);font-weight:800;letter-spacing:.12em;color:var(--note)}
.space.sub .svc-st-k .en{color:var(--soft);letter-spacing:.14em}
.space.sub .svc-st-m{margin-top:4px;font-size:var(--t3);line-height:var(--lh3);font-weight:900;color:#fff}
.space.sub .svc-st-m .badge{display:inline-block;margin-left:10px;font-size:var(--t5);line-height:1.4;vertical-align:middle}
.space.sub .svc-st-d{margin-top:10px;max-width:var(--measure);font-size:var(--t4);line-height:var(--lh4);letter-spacing:.02em;font-weight:var(--fw-body);color:var(--body);text-wrap:pretty}
.space.sub .svc-st-out{margin-top:8px;font-size:var(--t5);line-height:var(--lh5);font-weight:700;color:#fff}
/* 5つ目（卒業）：以前の #graduate の中身 */
.space.sub #graduate{scroll-margin-top:calc(var(--header-h) + 16px)}
/* v9 修正：卒業の見出しは h3。03 の h2（--t2、1440 で 56px）と同じ大きさだと見出しの段が並んで見えるので、h2 と段の月表示（--t3）の間に置く（1440 で 40px、390 で 24px） */
.space.sub .svc-stages .svc-grad-h{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(24px,2.8vw,44px);line-height:var(--lh2);letter-spacing:-.01em;font-weight:900;color:#fff;max-width:10em}
.space.sub .svc-st--grad .grad-sub{margin-top:clamp(14px,1.6vw,20px)}
.space.sub .svc-cond-lead{margin-top:clamp(22px,2.6vw,32px);font-size:var(--t4);line-height:var(--lh4);letter-spacing:.02em;font-weight:var(--fw-body);color:var(--body);max-width:var(--measure)}
.space.sub .svc-st--grad .conds{margin-top:14px}
/* 5つの条件と前後の1行は、文節の切れ目で折り返す（狭い列で「が、」などが行頭に来ないように） */
.space.sub .svc-st--grad .conds span,.space.sub .svc-cond-lead,.space.sub .svc-st--grad .cond-foot,.space.sub .svc-st--grad .grad-sub,.space.sub .svc-grad-h{word-break:auto-phrase}

/* ---------- 1-3. 地図（PC）：完成形 ----------
   線の言葉はトップの orbit-deco と同じ（rgba(201,210,234,.28) の細い線、2本目だけ 2 6 の点線）。光は radialGradient（filter は使わない） */
.svc-orb{fill:none;stroke:rgba(141,184,255,.6);stroke-width:1.35;transition:stroke 600ms ease}
.svc-orb--dash{stroke-dasharray:2 6}
.svc-earth--edge{stroke:rgba(141,184,255,.55);stroke-width:1.35}
.svc-guide{fill:none;stroke:rgba(201,210,234,.28);stroke-width:1.35;stroke-dasharray:2 6}
.svc-route,.svc-route-static{fill:none;stroke:#8DB8FF;stroke-width:2}
.svc-route{display:none}
.svc-node-dot{fill:#fff;transition:fill 400ms ease}
.svc-node-ring{fill:none;stroke:rgba(141,184,255,.5);stroke-width:1.35;transform-box:fill-box;transform-origin:center;transition:opacity 400ms ease,transform 500ms cubic-bezier(.16,1,.3,1)}
.svc-node-lb{font-family:var(--font-en);font-size:17px;font-weight:800;letter-spacing:.12em;fill:var(--soft)}
.svc-light{opacity:1;transition:opacity 500ms ease}
.svc-light:nth-child(2){transition-delay:60ms}.svc-light:nth-child(3){transition-delay:120ms}.svc-light:nth-child(4){transition-delay:180ms}
.svc-light:nth-child(5){transition-delay:240ms}.svc-light:nth-child(6){transition-delay:300ms}.svc-light:nth-child(7){transition-delay:360ms}
.svc-light:nth-child(8){transition-delay:420ms}.svc-light:nth-child(9){transition-delay:480ms}
/* 縦レールの節（860px 以下）：完成形 */
.svc-pin-orb{fill:none;stroke:rgba(141,184,255,.6);stroke-width:1;transition:stroke 600ms ease}
.svc-pin-orb--dash{stroke-dasharray:2 6}
.svc-pin-dot{fill:#fff;transition:fill 400ms ease}
.svc-pin-ring{fill:none;stroke:rgba(141,184,255,.5);stroke-width:1;transform-box:fill-box;transform-origin:center;transition:opacity 400ms ease,transform 500ms cubic-bezier(.16,1,.3,1)}
.svc-earth{stroke:rgba(141,184,255,.55);stroke-width:1}

/* ---------- 1-4. .js-svc があって動かすとき：初期状態と途中（.is-static のときは上の完成形のまま） ---------- */
.js-svc .svc-orbit:not(.is-static) .svc-route{display:inline;stroke-dasharray:1000 1000;stroke-dashoffset:1000}
.js-svc .svc-orbit:not(.is-static) .svc-route-static{display:none}
.js-svc .svc-orbit:not(.is-static) .svc-orb:not(.is-on),
.js-svc .svc-orbit:not(.is-static) .svc-pin:not(.is-on) .svc-pin-orb{stroke:rgba(201,210,234,.28)}
.js-svc .svc-orbit:not(.is-static) .svc-node:not(.is-on) .svc-node-dot,
.js-svc .svc-orbit:not(.is-static) .svc-pin:not(.is-on) .svc-pin-dot{fill:rgba(201,210,234,.35)}
.js-svc .svc-orbit:not(.is-static) .svc-node:not(.is-on) .svc-node-ring,
.js-svc .svc-orbit:not(.is-static) .svc-pin:not(.is-on) .svc-pin-ring{opacity:0;transform:scale(.5)}
.js-svc .svc-orbit:not(.is-static):not(.is-done) .svc-light{opacity:0}
.js-svc .svc-orbit:not(.is-static) .svc-pin-moon{display:none}
/* 左の段階：読んでいる段階は月表示を青、本文を白。ほかは本文を少しだけ落とす（読めなくはしない） */
.js-svc .svc-orbit:not(.is-static) .svc-st-m,
.js-svc .svc-orbit:not(.is-static) .svc-st-d,
.js-svc .svc-orbit:not(.is-static) .svc-grad-h{transition:color 400ms ease}
.js-svc .svc-orbit:not(.is-static) .svc-stages>li.is-on .svc-st-m{color:var(--soft)}
.js-svc .svc-orbit:not(.is-static) .svc-stages>li.is-on .svc-st-d{color:#fff}
.js-svc .svc-orbit:not(.is-static) .svc-stages>li.is-dim .svc-st-d{color:var(--note)}
.js-svc .svc-orbit:not(.is-static):not(.is-done) .svc-grad-h{color:var(--txt-3)}

/* ---------- 1-5. 860px 以下：地図は段階の左の縦レール（幅56px、高さは段階のリストと同じ） ----------
   .sf-panel の左右の余白（6px）で .wrap が 346px になるので、レールを左の余白に 14px はみ出させ、文字の列を 287px 確保する
   （設計の padding-left 72px だと文字の列が 274px になり、280px に届かない） */
@media (max-width:860px){
  .svc-orbit{grid-template-columns:44px minmax(0,1fr);column-gap:14px}
  .svc-head{grid-column:1 / -1}
  .svc-stages{grid-column:2;grid-row:2}
  .svc-map{grid-column:1;grid-row:2;align-self:stretch;position:relative;top:auto;width:56px;height:auto;margin-left:-14px}
  .svc-svg{display:none}
  .svc-rail{width:56px;height:100%}
  .svc-stages>li{padding:22px 0 26px}
  .svc-stages>li.svc-st--grad{padding-bottom:0}
  .svc-pin{display:block;position:absolute;left:-72px;top:20px;width:56px;height:28px;z-index:1;pointer-events:none}
  .svc-pin svg{display:block;width:56px;height:28px;overflow:visible}
  .svc-pin--earth{top:0;height:56px}
  .svc-pin--earth svg{height:56px}
  .svc-ic{display:block;width:56px;height:56px;margin:16px 0 0}
  /* JS が無いとき・.is-static のときの航路：節と節を結ぶ線（CSS だけ）。節4（卒業）まで実線で、月は節4。動かしたときの p = 0.96 と同じ絵（明かりも点いている） */
  .svc-stages>li:not(:last-child)::after{content:"";position:absolute;left:-44.75px;top:34px;bottom:-34px;width:1.5px;background:#8DB8FF;z-index:0;pointer-events:none}
  .svc-stages>li:first-child::after{top:50px}
  .js-svc .svc-orbit:not(.is-static) .svc-rail{display:block}
  .js-svc .svc-orbit:not(.is-static) .svc-stages>li::after{display:none}
  .space.sub .svc-stages .svc-grad-h{margin-top:12px}
  .space.sub .svc-st-m .badge{margin-left:8px}
  /* 5つの条件：段階の中の1項目になったので、狭い列では本文の大きさ（太字・白）にする。t3 のままだと1行が10字ほどで折れが乱れる */
  .space.sub .svc-st--grad .conds li{font-size:var(--t4);line-height:var(--lh4);gap:12px}
}

/* ---------- 2. 料金：左に数字と条件、右に申し込んだあとの流れ ---------- */
.space.sub .price-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,88px);align-items:start}
.space.sub .svc-after{padding-top:clamp(4px,1vw,14px);min-width:0}
.space.sub .svc-after h3{font-size:var(--t3);line-height:var(--lh3);font-weight:900;color:#fff}
.space.sub .svc-after-steps{margin-top:14px;display:grid;border-bottom:1px solid var(--rule)}
.space.sub .svc-after-steps li{display:grid;grid-template-columns:3.2em minmax(0,1fr);padding:16px 0;border-top:1px solid var(--rule)}
.space.sub .svc-after-k{font-family:var(--font-en);font-size:var(--t5);line-height:var(--lh4);font-weight:800;letter-spacing:.1em;color:var(--soft);padding-top:.1em}
.space.sub .svc-after-steps p{font-size:var(--t4);line-height:var(--lh4);letter-spacing:.02em;font-weight:var(--fw-body);color:var(--body);max-width:var(--measure)}
.space.sub .svc-after-steps p.svc-after-t{font-weight:700;color:#fff}
.space.sub .svc-after-foot{margin-top:16px;font-size:var(--t4);line-height:var(--lh4);letter-spacing:.02em;font-weight:700;color:#fff}
/* v9 修正：390 で「6ヶ/月」「せん。」のように語の途中や句点だけで折れないよう、文節で折り返す */
.space.sub .svc-after-steps p,.space.sub .svc-after-foot,.space.sub .svc-st-d,.space.sub .svc-st-out,.space.sub .svc-head .lead{word-break:auto-phrase}
/* v9 修正：比較表も「受/講中」のような語の途中の折れを止める（PC の4列でも 390 の縦積みでも） */
.space.sub .cmp tbody th,.space.sub .cmp td{word-break:auto-phrase}
@media (max-width:860px){
  .space.sub .price-top{grid-template-columns:1fr;row-gap:clamp(36px,8vw,48px)}
}

/* ---------- 3. 比較表：760px 以下は MUKIAI の行を先頭に（表の中身と PC の4列は変えない） ---------- */
@media (max-width:760px){
  .space.sub .cmp tbody{display:flex;flex-direction:column}
  .space.sub .cmp tbody tr.cmp-us{order:-1;border-top:2px solid #8DB8FF;border-bottom:2px solid #8DB8FF}
  .space.sub .cmp tbody tr:first-child{border-top:0}
  .space.sub .cmp tbody tr:nth-last-child(2){border-bottom:1px solid var(--rule)}
}

/* ---------- 4. 7つの工程の開閉部品：6ヶ月の一覧の下に置いたときの余白（以前の .road6+details.tg の代わり） ---------- */
.space.sub .svc-orbit+details.tg.tg{margin-top:clamp(28px,3.4vw,44px)}
/* v9 修正：予約と LINE のボタンは、卒業の段の中から7つの工程の開閉のあとへ移した（中身を読んでからボタン、の順） */
.space.sub details.tg+.svc-cta{margin-top:clamp(32px,3.6vw,48px)}

@media (prefers-reduced-motion:reduce){
  .svc-orb,.svc-pin-orb,.svc-node-dot,.svc-pin-dot,.svc-node-ring,.svc-pin-ring,.svc-light,.svc-st-m,.svc-st-d,.svc-grad-h{transition:none!important}
}

/* ---------------- 最終通し検査（2026-10-11）：ページの一番下と、最後の呼びかけの注記 ----------------
   共通の作りはフッターを margin-top:-100vh で最後の呼びかけに重ねる。フッターの高さ（pages-space.css の min-height:76vh）が重なり幅より低いと、
   一番下までスクロールしたときにフッターの下へ呼びかけの地球・注記・ボタンの切れ端がはみ出す（1440×900 で約200px）。
   相談・自己診断のページと同じく、フッターを 100vh 以上にする。動きを減らす設定では共通側が重ねない（margin-top:0）ので変えない。
   注記は、スクロールの途中で地球の縁の明るい光が文字の後ろを通るので、相談ページと同じく文字の周りだけ暗くする */
@media (prefers-reduced-motion:no-preference){
  .space.sub .site-footer{min-height:100vh}
}
.space.sub #cta .notes li{text-shadow:0 0 16px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.95),0 0 2px rgb(3,6,14)}