/* v9-route.css — 段 2「路線部品」(2026-10-11、docs/loop-20261006/design-20261011.md 案 B「路線図」)。
   手順を「縦 1 本の線と駅」で描く。線は紺青(--stnv2-navy)固定、駅の丸は白地に紺の輪、番号は --stnv2-font-num。
   終点の駅 = 手順の直後にある既存の CTA(新しく足さない)。分岐 = 「止まったときの確認先」を線から横に出す枝(amber の細線)。
   2026-10-11 段 3a fix(1.0.373): 目印として強くする。線 3px(--stnv9-w)、駅の丸の輪 2.5px(--stnv9-dot-w。border は Chrome が整数 px に切り下げて 2px になるので inset の box-shadow で描く)・直径 14px 以上、終点の丸は塗り、駅名は 700。
   乗り換え先の駅の丸だけブランド色(--stnv9-dest に --stnv3-brand-<slug> を入れる。未設定なら紺青)。線・丸は擬似要素だけ(画像なし)。
   読み込み: includes/v3-diagrams.php の stn_v9_route_enqueue()(v4/v7/v8-article の後)。!important は使わない。
   使う先:
     記事   ol.stnv9-route(v8-article-layout.php が手順の ol に付ける)+ 直後の CTA に .stnv9-route__end
     /mnp/  ol.stnv4-runbook(実行順の一本のリスト)+ 直後の .stn-visual-cta、概観の ol.stnv3-steps.stnv9-route--overview
     /hikari/ #steps の ol.stnv2-steps(既存の stnv3-dg 図解は触らない) */

:root{--stnv9-line:var(--stnv2-navy,#0b2545);--stnv9-w:3px;--stnv9-dot-w:2.5px;--stnv9-dot:28px;--stnv9-pad:44px;--stnv9-branch:var(--stnv2-amber,#b45309)}

/* ---------- 駅と線(共通) ----------
   各駅 = li。::before が駅の丸(番号)、::after がその駅から次の駅までの線。最後の駅は線なし(終点の CTA へ続くときだけ下まで引く) */
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route,
body .stn-visual-section ol.stnv4-runbook,
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps{--stnv9-c:calc(var(--stnv9-dot) / 2);counter-reset:stnv9r;list-style:none;padding:0}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route{margin:20px 0}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route > li,
body .stn-visual-section ol.stnv4-runbook > li.stnv4-runbook__step,
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps > li{position:relative;counter-increment:stnv9r;margin:0;padding:0 0 20px var(--stnv9-pad);border:0}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route > li{line-height:1.75}
/* 駅の丸 */
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route > li::before,
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps > li::before{content:counter(stnv9r);position:absolute;z-index:1;left:0;top:0;box-sizing:border-box;display:block;width:var(--stnv9-dot);height:var(--stnv9-dot);margin:0;border:0;box-shadow:inset 0 0 0 var(--stnv9-dot-w) var(--stnv9-line);border-radius:50%;background:var(--stnv2-white,#fff);color:var(--stnv9-line);font:700 13px/var(--stnv9-dot) var(--stnv2-font-num,sans-serif);font-variant-numeric:tabular-nums;text-align:center}
body .stn-visual-section ol.stnv4-runbook .stnv4-runbook__no{position:absolute;z-index:1;left:0;top:0;box-sizing:border-box;width:var(--stnv9-dot);height:var(--stnv9-dot);border:0;box-shadow:inset 0 0 0 var(--stnv9-dot-w) var(--stnv9-line);background:var(--stnv2-white,#fff);color:var(--stnv9-line);font-family:var(--stnv2-font-num,sans-serif);font-size:12px;font-weight:700;line-height:1}
/* 線(この駅の中心 → 次の駅の中心。次の駅の丸の下に潜る) */
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route > li::after,
body .stn-visual-section ol.stnv4-runbook > li.stnv4-runbook__step::after,
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps > li::after{content:"";position:absolute;left:calc(var(--stnv9-c) - var(--stnv9-w) / 2);top:var(--stnv9-c);bottom:calc(-1 * var(--stnv9-c));width:var(--stnv9-w);background:var(--stnv9-line)}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route > li:last-child::after,
body .stn-visual-section ol.stnv4-runbook > li.stnv4-runbook__step:last-child::after,
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps > li:last-child::after{content:none}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route > li:last-child{padding-bottom:0}
/* 乗り換え先の駅(/hikari/ は最後の駅 = ドコモ光の開通) */
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps{--stnv9-dest:var(--stnv3-brand-docomo-hikari,var(--stnv9-line))}
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps > li:last-child::before{box-shadow:inset 0 0 0 var(--stnv9-dot-w) var(--stnv9-dest)}

/* ---------- /mnp/ 実行順(stnv4-runbook): 見出しの行を駅の丸の高さにそろえる ---------- */
body .stn-visual-section ol.stnv4-runbook{--stnv4-pm:8px;margin-top:12px} /* v4.css の段落下の余白(1.4em)は変数で詰める(規則の詳細度が高い) */
body .stn-visual-section ol.stnv4-runbook .stnv4-runbook__stop:has(+ .stnv4-runbook__where){--stnv4-pm:0px;margin-bottom:0}
/* 見出しの段落を線の位置まで左へ広げ、駅の丸をその中に置く(丸が親の段落からはみ出さない。detect.mjs の d に掛からない) */
body .stn-visual-section ol.stnv4-runbook .stnv4-runbook__head{position:relative;min-height:var(--stnv9-dot);margin:0 0 6px calc(-1 * var(--stnv9-pad));padding-left:var(--stnv9-pad)}
body .stn-visual-section ol.stnv4-runbook > li.stnv4-runbook__step:last-child{padding-bottom:0}
/* /hikari/: 駅の見出し(b)を丸の高さに */
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps > li > b:first-child{display:block;min-height:var(--stnv9-dot);line-height:1.6;padding-top:1px}

/* ---------- 分岐: 止まったときの確認先 ----------
   本線の丸の中心から横へ細い枝を出し、枝の先で縦に下ろす(止まりやすい点 → 確認先 を同じ枝に並べる) */
body .stn-visual-section ol.stnv4-runbook :is(.stnv4-runbook__stop,.stnv4-runbook__where),
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps .stnv4-stop{position:relative;padding:3px 0 3px 12px;border-left:2px solid var(--stnv9-branch)}
body .stn-visual-section ol.stnv4-runbook .stnv4-runbook__stop + .stnv4-runbook__where{margin-top:0}
body .stn-visual-section ol.stnv4-runbook .stnv4-runbook__stop:has(+ .stnv4-runbook__where){padding-bottom:6px}
body .stn-visual-section ol.stnv4-runbook .stnv4-runbook__stop + .stnv4-runbook__where{padding-top:2px}
/* 枝の付け根(本線 → 枝)。枝の 1 つ目の段落にだけ描く。left は段落の内側(border-left の内)から測るので -2px */
body .stn-visual-section ol.stnv4-runbook .stnv4-runbook__stop::before,
body .stn-visual-section ol.stnv4-runbook .stnv4-runbook__where:not(.stnv4-runbook__stop + .stnv4-runbook__where)::before,
body:is(.stnv6-page-hikari,.stnv7-page--hikari) #steps ol.stnv2-steps .stnv4-stop::before{content:"";position:absolute;top:-2px;left:calc(var(--stnv9-c) + var(--stnv9-w) / 2 - var(--stnv9-pad) - 2px);width:calc(var(--stnv9-pad) - var(--stnv9-c) - var(--stnv9-w) / 2);height:2px;background:var(--stnv9-branch)}
/* /hikari/ の段落の上余白は v7.css が !important で 6px に固定しているので、枝の付け根は段落の上端に置く */

/* ---------- 終点の駅 = 直後の既存 CTA ---------- */
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route.stnv9-route--to-end{margin-bottom:0}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route.stnv9-route--to-end > li:last-child{padding-bottom:20px}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route.stnv9-route--to-end > li:last-child::after,
body .stn-visual-section ol.stnv4-runbook:has(+ .stn-visual-cta) > li.stnv4-runbook__step:last-child::after{content:"";bottom:0}
body .stn-visual-section ol.stnv4-runbook:has(+ .stn-visual-cta) > li.stnv4-runbook__step:last-child{padding-bottom:20px}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route--to-end + .stnv9-route__end,
body .stn-visual-section ol.stnv4-runbook + .stn-visual-cta{--stnv9-c:calc(var(--stnv9-dot) / 2);position:relative;box-sizing:border-box;margin-top:0;padding-top:6px;padding-left:var(--stnv9-pad);text-align:left}
/* 前の駅から終点の丸までの線 */
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route--to-end + .stnv9-route__end::before,
body .stn-visual-section ol.stnv4-runbook + .stn-visual-cta::before{content:"";position:absolute;left:calc(var(--stnv9-c) - var(--stnv9-w) / 2);top:0;height:6px;width:var(--stnv9-w);background:var(--stnv9-line)}
/* 終点の丸(塗り。1.0.372 までは二重の輪)。乗り換え先のブランド色があればその色 */
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route--to-end + .stnv9-route__end::after,
body .stn-visual-section ol.stnv4-runbook + .stn-visual-cta::after{content:"";position:absolute;left:0;top:6px;box-sizing:border-box;width:var(--stnv9-dot);height:var(--stnv9-dot);border:0;border-radius:50%;background:var(--stnv9-dest,var(--stnv9-line))}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route--to-end + .stnv9-route__end .stnv7-cta__lead{min-height:var(--stnv9-dot);margin-top:0;line-height:var(--stnv9-dot);text-align:left}
body.single-post.stnv8a-article .wp-block-post-content > ol.stnv9-route--to-end + .stnv9-route__end > :first-child{margin-top:0}
body .stn-visual-section ol.stnv4-runbook + .stn-visual-cta{margin-top:0;padding-top:6px}
body .stn-visual-section ol.stnv4-runbook + .stn-visual-cta > a:first-child{margin-top:0}

/* ---------- /mnp/ 概観(stnv3-steps): 同じ部品の横向き(〜767px は路線なしの番号付きリスト)。丸は白地に紺の輪、線は紺青 ---------- */
body .stnv3-steps.stnv9-route--overview .stnv3-steps__item::before{height:var(--stnv9-w);top:calc(22px - var(--stnv9-w) / 2);left:calc(50% + 22px);right:calc(-50% + 22px - 6px);background:var(--stnv9-line)}
body .stnv3-steps.stnv9-route--overview .stnv3-steps__icon{box-sizing:border-box;border:0;box-shadow:inset 0 0 0 var(--stnv9-dot-w) var(--stnv9-line);background:var(--stnv2-white,#fff)}
body .stnv3-steps.stnv9-route--overview .stnv3-steps__icon::after{inset:8px}
body .stnv3-steps.stnv9-route--overview .stnv3-steps__no{font-family:var(--stnv2-font-num,sans-serif);color:var(--stnv9-line)}
@media (min-width:782px){body .stnv3-steps.stnv9-route--overview .stnv3-steps__item::before{right:calc(-50% + 22px - 12px)}}
/* 〜767px: 概観は路線を描かず、通常の番号付きリスト(「STEP n 題」の行)に戻す。路線は直後の実行順(stnv4-runbook)だけに描く。
   狭い幅で概観と実行順が縦に 2 本の路線として重複して見えるため(段 2 の要判断への対処、10/11)。文字は変えない(アイコンは aria-hidden の空要素) */
@media (max-width:767px){
  body .stnv3-steps.stnv9-route--overview{display:block;margin:8px 0 12px;padding:0}
  body .stnv3-steps.stnv9-route--overview .stnv3-steps__item{display:flex;flex-direction:row;align-items:baseline;gap:10px;min-height:0;padding:4px 0;text-align:left}
  body .stnv3-steps.stnv9-route--overview .stnv3-steps__item::before{content:none;display:none}
  body .stnv3-steps.stnv9-route--overview .stnv3-steps__icon{display:none}
  body .stnv3-steps.stnv9-route--overview .stnv3-steps__no{flex:0 0 auto;min-width:4.4em;font-size:12px;line-height:1.6}
  body .stnv3-steps.stnv9-route--overview .stnv3-steps__title{flex:1 1 auto;font-size:15px;line-height:1.6}
}

/* ---------- 記事の経路札(「A」›「B」): 札を駅名板に、› を短い線に(› の文字は残し、見た目だけ消す) ---------- */
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-path .stnv8a-key{border:1.5px solid var(--stnv9-line);border-radius:9999px;background:var(--stnv2-white,#fff);color:var(--stnv9-line)}
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-path .stnv8a-sep{display:inline-block;width:12px;height:var(--stnv9-w);margin:0 1px;overflow:hidden;vertical-align:middle;background:var(--stnv9-line);color:transparent;font-size:0;line-height:0}
/* 線と次の札は 1 つの塊(線だけが行末に残らないように) */
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-path .stnv8a-step{white-space:nowrap}
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-path .stnv8a-step:last-child .stnv8a-key{background:var(--stnv9-line);color:var(--stnv2-white,#fff)}

/* ---------- 320px 前後: 字を詰めず、線との間だけ少し狭める ---------- */
@media (max-width:359px){
  :root{--stnv9-pad:38px}
}

/* ---------- 段 3a(2026-10-11)初回画面のミニ路線 .stnv9-mini ----------
   案件ページの冒頭の結論の帯: 駅 1 = 対象の人(対象外が 3 件以内ならその注意も)→ 駅 2 = 特典(実額と期限)→ 終点 = 既存の主ボタン。
   縦の路線(390px で崩れない)。線は紺青、駅の丸は白地に紺の輪(番号なし)、終点の丸は二重の輪で乗り換え先のブランド色(data-stnv9-dest、
   /campaign/ は親の .stnv3-offer[data-brand] の --stnv6-c)。代理店経由のページ(ソフトバンク)は紺青のまま。
   マークアップ: includes/v3-design.php stn_v9_mini_route()。線・丸は擬似要素だけで、各要素の箱の内側に描く(detect.mjs の d に掛けない) */
.stnv9-mini{--stnv9m-dot:18px;--stnv9m-c:9px;--stnv9m-pad:32px;box-sizing:border-box;max-width:40em;margin:14px 0 0}
.stnv9-mini[data-stnv9-dest="rakuten"]{--stnv9-dest:var(--stnv3-brand-rakuten,#bf0000)}
[data-brand] .stnv9-mini{--stnv9-dest:var(--stnv6-c,var(--stnv9-line))}
/* v4.css の段落・項目の行間(--stnv4-lh)と段落下の余白(--stnv4-pm)は詳細度が高い規則なので、変数で駅の中だけ詰める */
body .stnv9-mini .stnv9-mini__stops{--stnv4-pm:0px;list-style:none;margin:0;padding:0}
body .stnv9-mini :is(.stnv9-mini__label,.stnv9-mini__sublabel){--stnv4-lh:20px}
body .stnv9-mini .stnv9-mini__text{--stnv4-lh:1.45}
body .stnv9-mini :is(.stnv9-mini__when,.stnv9-mini__notes li){--stnv4-lh:1.6}
body .stnv9-mini .stnv9-mini__stop{position:relative;margin:0;padding:0 0 14px var(--stnv9m-pad);border:0}
/* 駅の丸(駅名の行の高さ 20px の中央) */
body .stnv9-mini .stnv9-mini__stop:not(.stnv9-mini__stop--branch)::before{content:"";position:absolute;z-index:1;left:0;top:1px;box-sizing:border-box;width:var(--stnv9m-dot);height:var(--stnv9m-dot);border:0;box-shadow:inset 0 0 0 var(--stnv9-dot-w) var(--stnv9-line);border-radius:50%;background:var(--stnv2-white,#fff)}
/* 線(駅の箱の上端 → 下端。最初の駅だけ丸の中心から。終点の箱の上端で次の線へつながる) */
body .stnv9-mini .stnv9-mini__stop::after{content:"";position:absolute;left:calc(var(--stnv9m-c) - var(--stnv9-w) / 2);top:0;bottom:0;width:var(--stnv9-w);background:var(--stnv9-line)}
body .stnv9-mini .stnv9-mini__stop:first-child::after{top:var(--stnv9m-c)}
body .stnv9-mini :is(.stnv9-mini__label,.stnv9-mini__sublabel){margin:0;font-size:12px;font-weight:700;line-height:20px;letter-spacing:.02em;color:var(--stnv2-muted-strong,#526579)}
body .stnv9-mini .stnv9-mini__sublabel{margin-top:8px}
body .stnv9-mini .stnv9-mini__text{margin:2px 0 0;font-size:16px;font-weight:700;line-height:1.5;color:var(--stnv2-navy,#0b2545)}
body .stnv9-mini .stnv9-mini__amount{font-family:var(--stnv2-font-num,sans-serif);font-size:16px;font-variant-numeric:tabular-nums;line-height:1.3}
body .stnv9-mini .stnv9-mini__amount .stnv2-unit{font-size:16px;color:var(--stnv2-navy,#0b2545)}
body .stnv9-mini .stnv9-mini__when{margin:2px 0 0;font-size:14px;line-height:1.6;color:var(--stnv2-ink,#102033)}
body .stnv9-mini .stnv9-mini__when .stnv9-mini__left{margin-left:8px;font-weight:700}
body .stnv9-mini .stnv9-mini__notes{margin:2px 0 0;padding:0 0 0 1.2em;font-size:14px;line-height:1.6;color:var(--stnv2-ink,#102033)}
body .stnv9-mini .stnv9-mini__notes li{margin:0 0 2px}
/* 枝(丸なし): 対象外の一覧。本線から amber の細い枝 */
body .stnv9-mini .stnv9-mini__stop--branch{padding-bottom:10px}
body .stnv9-mini .stnv9-mini__stop--branch > :first-child{position:relative;margin-top:0;padding-left:12px;border-left:2px solid var(--stnv9-branch)}
body .stnv9-mini .stnv9-mini__stop--branch .stnv3-except__label{margin:0 0 2px}
body .stnv9-mini .stnv9-mini__stop--branch .stnv3-except__list{font-size:13.5px}
.stnv3-offer:has(.stnv9-mini){padding-top:10px}
body .stnv9-mini .stnv9-mini__stop--branch > :first-child::before{content:"";position:absolute;top:10px;left:calc(var(--stnv9m-c) + var(--stnv9-w) / 2 - var(--stnv9m-pad) - 2px);width:calc(var(--stnv9m-pad) - var(--stnv9m-c) - var(--stnv9-w) / 2);height:2px;background:var(--stnv9-branch)}
/* 終点: 既存の CTA の箱をそのまま置く。上端から終点の丸までの線と、塗りの丸 */
body .stnv9-mini .stnv9-mini__end{position:relative;padding:2px 0 0 var(--stnv9m-pad)}
body .stnv9-mini .stnv9-mini__end::before{content:"";position:absolute;left:calc(var(--stnv9m-c) - var(--stnv9-w) / 2);top:0;height:calc(2px + var(--stnv9m-c));width:var(--stnv9-w);background:var(--stnv9-line)}
body .stnv9-mini .stnv9-mini__end::after{content:"";position:absolute;left:0;top:2px;box-sizing:border-box;width:var(--stnv9m-dot);height:var(--stnv9m-dot);border:0;border-radius:50%;background:var(--stnv9-dest,var(--stnv9-line))}
body .stnv9-mini .stnv9-mini__end > :first-child,
body .stnv9-mini .stnv9-mini__end > .stnv7-cta,
body .stnv9-mini .stnv9-mini__end .affiliate-text-slot-wrap{margin-top:0}
body .stnv9-mini .stnv9-mini__end :is(.stnv2-cta__pr,.stnv7-pr):first-child{min-height:20px;margin-top:0}
@media (max-width:359px){.stnv9-mini{--stnv9m-pad:28px}body .stnv9-mini .stnv9-mini__text{font-size:16px}}

/* ---------- 段 3a トップ: ヒーロー直下の 3 駅「比べる → 確かめる → 申し込む」 .stnv9-home-route ----------
   横 3 列(駅名が短いので 320px でも 3 列)。各駅はページ内の節へのリンク(ボタンにしない)。線は li ごとに自分の箱の中だけ描く */
.stnv9-home-route{margin:16px 0 0}
body .stnv9-home-route ol.stnv9-home-route__stops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px;list-style:none;margin:0;padding:0}
body .stnv9-home-route .stnv9-home-route__stops > li{position:relative;margin:0;padding:0}
body .stnv9-home-route li::before{content:"";position:absolute;top:calc(7px - var(--stnv9-w) / 2);left:0;right:0;height:var(--stnv9-w);background:var(--stnv9-line)}
body .stnv9-home-route li:first-child::before{left:50%}
body .stnv9-home-route li:last-child::before{right:50%}
body .stnv9-home-route a{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:48px;padding:22px 2px 4px;color:var(--stnv2-navy,#0b2545);text-align:center;text-decoration:none}
body .stnv9-home-route a::before{content:"";position:absolute;z-index:1;top:0;left:calc(50% - 7px);box-sizing:border-box;width:14px;height:14px;border:0;box-shadow:inset 0 0 0 var(--stnv9-dot-w) var(--stnv9-line);border-radius:50%;background:var(--stnv2-white,#fff)}
body .stnv9-home-route li:last-child a::before{background:var(--stnv9-line);box-shadow:none}
body .stnv9-home-route .stnv9-home-route__name{font-size:14px;font-weight:700;line-height:1.4}
body .stnv9-home-route .stnv9-home-route__sub{font-size:12px;line-height:1.4;color:var(--stnv2-muted-strong,#526579);word-break:keep-all;overflow-wrap:anywhere}
body .stnv9-home-route a:hover .stnv9-home-route__name,body .stnv9-home-route a:focus-visible .stnv9-home-route__name{color:var(--stnv2-blue-press,#085aa9);text-decoration:underline}
body.stnv7-page--home :is(#home-apply,.stnv7-home-board tr[id^="cond-"]){scroll-margin-top:80px}

/* ---------- 段 3a トップ「今月の注目」の札: 面は canvas-soft の 1 色(画像 -v9.jpg)、ブランド色は左端の 4px 帯だけ ---------- */
body .stnv7-picks :is(.stnv7-pick-main,.stnv7-card)[data-brand] img{box-sizing:border-box;border-left:4px solid var(--stnv6-c,var(--stnv9-line))}