/*! v3-diagrams.css — 図解部品(v3 段階3A、2026-09-28、includes/v3-diagrams.php、docs/design-2026-09-28/HANDOFF.md「段階 3」)。
   Loaded after v3.css. 色は --stn-* トークンとブランド色(--stnv3-brand-*、SVG のインライン style)だけ。アニメーションなし。 */

/* 00 SVG 共通 — viewBox で伸縮。文字は viewBox 上 15 以上(幅 300 → 320px 画面の枠内 260px でも 13px 相当) */
.stnv3-dg{box-sizing:border-box;margin:12px 0 16px;padding:0}
.stnv3-dg__svg{display:block;width:100%;max-width:520px;height:auto;margin:0;overflow:visible}
.stnv3-dg text{font-family:var(--stnv4-font-body,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif);font-weight:700;fill:var(--stn-navy,#0b2545)}
.stnv3-dg .stnv3-dg__num,.stnv3-dg .stnv3-dg__num tspan{font-family:var(--stnv3-font-amount,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums lining-nums}
.stnv3-dg .stnv3-dg__unit{font-family:var(--stnv3-font-amount,sans-serif);font-size:15px}
.stnv3-dg .stnv3-dg__strong{font-weight:700}
.stnv3-dg .stnv3-dg__label{font-weight:700}
.stnv3-dg .stnv3-dg__muted{font-weight:700;fill:var(--stn-navy,#0b2545);fill-opacity:.78}
.stnv3-dg .stnv3-dg__head{font-weight:700}
.stnv3-dg .stnv3-dg__green{fill:var(--stn-green-text,#0e7d51)}
.stnv3-dg .stnv3-dg__amber{fill:var(--stn-amber,#b45309)}
.stnv3-dg__fill-sky{fill:var(--stn-sky,#eaf5ff)}
.stnv3-dg__fill-navy{fill:var(--stn-navy,#0b2545)}
.stnv3-dg__fill-amber{fill:var(--stn-amber,#b45309)}
.stnv3-dg__ring{stroke:#fff}
.stnv3-dg__stroke-navy{fill:none;stroke:var(--stn-navy,#0b2545)}
.stnv3-dg__stroke-line{fill:none;stroke:var(--stn-line,#dbe7f3)}
.stnv3-dg__note{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--stnv2-muted-strong,#526579)}

/* 10 ① 段階制料金(記事の結論ボックス直下) */
.stnv3-dg--tiers{padding:14px 14px 10px;border:1px solid var(--stn-line,#dbe7f3);border-radius:12px;background:#fff}
.stnv3-dg--tiers .stnv3-dg__svg{margin:0 auto}

/* 20 ② 24か月の総額の横棒(/hikari/ ③、戸建て・マンションの2枚。782px 以上で横並び) */
.stnv3-dg--bars{padding:14px;border:1px solid var(--stn-line,#dbe7f3);border-radius:12px;background:#fff}
.stnv3-dg__title{margin:0 0 10px;font-family:inherit;font-size:18px;font-weight:700;line-height:1.4;color:var(--stn-navy,#0b2545)}
.stnv3-dg__pair{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:782px){.stnv3-dg__pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}

/* 30 ④ 期限タイムライン(一覧板の「今月で終わる」区切り行の直下の 1 行) */
body .stnv2-table--board tbody>tr.stnv3-dg-row>td{padding:4px 0 12px;border:0;background:transparent}
.stnv3-dg-row .stnv3-dg--timeline{margin:0;padding:12px 12px 10px;border:1px solid var(--stnv2-warn-line,#f3d9a8);border-radius:12px;background:var(--stnv2-warn-bg,#fff7ec)}
.stnv3-dg-row .stnv3-dg__ring{stroke:var(--stnv2-warn-bg,#fff7ec)}
.stnv3-dg--timeline .stnv3-dg__svg{max-width:460px}
@media (max-width:1023px){body .stnv2-table--board tbody>tr.stnv3-dg-row{display:block;padding:0 0 12px;border:0}}

/* 40 ⑤ セット割の家族回線図(/hikari/ ④ ドコモ光カード) */
.stnv3-dg--family{margin:12px 0;padding:12px 12px 10px;border-radius:12px;background:var(--stnv2-green-bg,#e3f6ec)}
.stnv3-dg--family .stnv3-dg__svg{max-width:340px;margin:0 auto}
.stnv3-dg--family .stnv3-dg__note{color:var(--stnv2-ink,#102033)}

/* 50 ③ 手順フロー(HTML の ol)。360px 以上は横並び、未満は縦。アイコンは CSS マスク */
.stnv3-steps{display:grid;grid-template-columns:repeat(var(--stnv3-steps-n,5),minmax(0,1fr));gap:6px;margin:12px 0 16px;padding:0;list-style:none;counter-reset:none}
.stnv3-steps--3{--stnv3-steps-n:3}.stnv3-steps--4{--stnv3-steps-n:4}.stnv3-steps--5{--stnv3-steps-n:5}.stnv3-steps--6{--stnv3-steps-n:6}
.stnv3-steps__item{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;margin:0;padding:0;text-align:center}
.stnv3-steps__item::before{content:"";position:absolute;top:22px;left:calc(50% + 26px);right:calc(-50% + 26px - 6px);height:2px;background:var(--stn-line,#dbe7f3)}
.stnv3-steps__item:last-child::before{display:none}
.stnv3-steps__icon{position:relative;display:block;width:44px;height:44px;border-radius:9999px;background:var(--stn-sky,#eaf5ff)}
.stnv3-steps__icon::after{content:"";position:absolute;inset:9px;background:var(--stn-navy,#0b2545);-webkit-mask:var(--stnv3-step-icon) center/contain no-repeat;mask:var(--stnv3-step-icon) center/contain no-repeat}
.stnv3-steps__no{font-family:var(--stnv3-font-amount,sans-serif);font-size:11.5px;font-weight:700;line-height:1.2;letter-spacing:.02em;color:var(--stnv2-blue-press,#085aa9)}
.stnv3-steps__title{font-family:inherit;font-size:13px;font-weight:700;line-height:1.35;color:var(--stn-navy,#0b2545);overflow-wrap:anywhere}
@media (max-width:359px){
  .stnv3-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .stnv3-steps__item{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:0;align-content:center;align-items:center;min-height:44px;padding:0 0 12px;text-align:left}
  .stnv3-steps__item::before{top:44px;bottom:0;left:21px;right:auto;width:2px;height:auto}
  .stnv3-steps__icon{grid-column:1;grid-row:1/span 2;align-self:start}
  .stnv3-steps__no{grid-column:2;grid-row:1;align-self:end}
  .stnv3-steps__title{grid-column:2;grid-row:2;align-self:start;font-size:14px}
}
@media (min-width:782px){.stnv3-steps{gap:12px}.stnv3-steps__title{font-size:14px}}
.stnv3-steps__item--account{--stnv3-step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='16' r='8'/%3E%3Cpath d='M9 42c3-12 27-12 30 0'/%3E%3C/svg%3E")}
.stnv3-steps__item--swap{--stnv3-step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17h25l-6-6M37 31H12l6 6'/%3E%3C/svg%3E")}
.stnv3-steps__item--form{--stnv3-step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='11' y='7' width='26' height='34' rx='4'/%3E%3Cpath d='M17 17h14M17 25h14M17 33h8'/%3E%3C/svg%3E")}
.stnv3-steps__item--sim{--stnv3-step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 7h14l6 6v28H15z'/%3E%3Cpath d='M20 22h10v10H20zM20 17h5'/%3E%3C/svg%3E")}
.stnv3-steps__item--check{--stnv3-step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 25l7 7 14-15'/%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3C/svg%3E")}
.stnv3-steps__item--esim{--stnv3-step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='7' width='20' height='34' rx='4'/%3E%3Cpath d='M18 18h8v8h-8zM36 15a9 9 0 010 18'/%3E%3C/svg%3E")}
.stnv3-steps__item--calendar{--stnv3-step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='12' width='30' height='28' rx='4'/%3E%3Cpath d='M16 7v8M32 7v8M9 21h30'/%3E%3C/svg%3E")}
.stnv3-steps__item--plan,.stnv3-steps__item--device,.stnv3-steps__item--support{--stnv3-step-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='8' width='28' height='32' rx='4'/%3E%3Cpath d='M16 17h16M16 24h16M16 31h10'/%3E%3C/svg%3E")}

/* 60 ⑥ 向いている人/向かない人(キャリア別ページ ①結論の下)。360px 以上で左右 2 列 */
.stnv2-section.stnv3-fit-section{padding-top:4px}
.stnv3-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.stnv3-fit__col{box-sizing:border-box;min-width:0;padding:12px 12px 10px;border:1px solid var(--stn-line,#dbe7f3);border-top-width:4px;border-radius:12px;background:#fff}
.stnv3-fit__col--yes{border-top-color:var(--stn-green-text,#0e7d51)}
.stnv3-fit__col--no{border-top-color:var(--stn-amber,#b45309)}
.stnv3-fit__head{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-family:inherit;font-size:16px;font-weight:700;line-height:1.3;color:var(--stn-navy,#0b2545)}
.stnv3-fit__icon{flex:none;width:22px;height:22px;-webkit-mask:var(--stnv3-fit-icon) center/contain no-repeat;mask:var(--stnv3-fit-icon) center/contain no-repeat}
.stnv3-fit__col--yes .stnv3-fit__icon{background:var(--stn-green-text,#0e7d51);--stnv3-fit-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5'/%3E%3C/svg%3E")}
.stnv3-fit__col--no .stnv3-fit__icon{background:var(--stn-amber,#b45309);--stnv3-fit-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8.5 8.5 7 7M15.5 8.5l-7 7'/%3E%3C/svg%3E")}
.stnv3-fit__list{margin:0;padding:0;list-style:none}
.stnv3-fit__list li{position:relative;margin:0 0 6px;padding-left:14px;font-size:14px;line-height:1.55;color:var(--stnv2-ink,#102033)}
.stnv3-fit__list li::before{content:"";position:absolute;top:.62em;left:2px;width:6px;height:6px;border-radius:9999px;background:var(--stn-navy,#0b2545)}
.stnv3-fit__note{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--stnv2-muted-strong,#526579)}
.stnv3-fit__more{margin:6px 0 0;font-size:14px}
@media (max-width:359px){.stnv3-fit{grid-template-columns:minmax(0,1fr)}}