/* ===== support.html ページ固有（mono.css の上に加算・IDスコープで優先） ===== */
/* 【33】運用プラン: 左右の冒頭骨格をミラー（ラベルピル→価格→罫線→リスト）
※料金カードは v23 でもカード維持（囲う意味がある情報） */
#plans .duo-name { align-self: flex-start; background: var(--kg-t1); color: var(--kg-blue); font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 5px 14px; border-radius: 999px; line-height: 1.7; }
#plans .duo-card--plus .duo-name { background: rgba(255,255,255,.18); color: #fff; }
#plans .duo-price { font-size: clamp(28px, 3vw, 36px); margin-top: 18px; }
#plans .duo-price .duo-tax { font-family: var(--font-jp); font-size: 16px; font-weight: 700; white-space: nowrap; }
#plans .duo-rule { border-top: 1px solid var(--kg-line); margin-top: 22px; }
#plans .duo-card--plus .duo-rule { border-top-color: rgba(255,255,255,.25); }
#plans .duo-note { margin-top: 18px; }
#plans .duo-list { flex: none; margin-top: 12px; } /* flex:1をやめ、注記+リンクをリスト直後に流す（中腹の空洞解消） */
/* ============================================================
v23（2026-08-09 恒久方針適用）
- 強み: アイコンカード3連 → 01-03 左右交互（薄青の大数字＋図解）
- 開店後にやること: カード2×2 → 罫線リスト（行の整列で見せる）
- 含まれる/含まれない: カード2枚 → 罫線リスト2列（○/−は継続）
============================================================ */
/* --- 強み: 左右交互 --- */
#strength .sx-list { margin-top: 72px; display: grid; row-gap: 100px; }
#strength .sx-no { display: block; font-family: var(--font-num); font-size: clamp(56px, 6vw, 84px); font-weight: 700; line-height: 1; letter-spacing: .02em; color: rgba(22, 104, 220, .18); }
#strength .sx-t { font-size: clamp(20px, 2.3vw, 26px); font-weight: 700; color: var(--kg-ink); line-height: 1.65; margin-top: 18px; text-wrap: balance; }
#strength .sx-d { font-size: 15.5px; line-height: 1.95; margin-top: 18px; max-width: 34em; text-wrap: pretty; }
#strength .sx-fig { display: block; width: 100%; height: auto; }
/* 図解の部品色（パレット変数のみ） */
#strength .sx-fig .f-label { font-family: var(--font-jp); font-size: 14px; font-weight: 700; fill: var(--kg-ink); letter-spacing: .05em; }
#strength .sx-fig .f-num { font-family: var(--font-num); font-size: 12px; font-weight: 700; fill: var(--kg-blue); }
#strength .sx-fig .f-blue { fill: var(--kg-blue); }
#strength .sx-fig .f-dot { fill: var(--kg-blue2); }
#strength .sx-fig .f-dotline { fill: var(--kg-line); }
#strength .sx-fig .f-dash { stroke: var(--kg-blue2); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; fill: none; }
#strength .sx-fig .f-mainline { stroke: var(--kg-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
#strength .sx-fig .f-node { fill: #fff; stroke: var(--kg-blue); stroke-width: 2.5; }
#strength .sx-fig .f-panel { fill: #fff; stroke: var(--kg-line); stroke-width: 1.5; }
#strength .sx-fig .f-back1 { fill: var(--kg-t1); }
#strength .sx-fig .f-back2 { fill: var(--kg-t2); stroke: var(--kg-line); stroke-width: 1; }
#strength .sx-fig .f-hair { stroke: var(--kg-line); stroke-width: 1.5; }
#strength .sx-fig .f-bar { fill: var(--kg-line); }
#strength .sx-fig .f-bar--main { fill: rgba(61, 155, 245, .45); }
#strength .sx-fig .f-pillbg { fill: var(--kg-t1); }
#strength .sx-fig .f-check { stroke: var(--kg-blue); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#strength .sx-fig .f-checkw { stroke: #fff; stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#strength .sx-fig .f-numbg { fill: var(--kg-t1); }
/* --- 開店後にやること: 罫線リスト（帯背景の上に行を整列） --- */
#after .aftlist { margin-top: 56px; }
#after .aft { display: grid; grid-template-columns: 300px 1fr; column-gap: 64px; row-gap: 10px; padding: 30px 4px; border-top: 1px solid rgba(11, 44, 85, .12); align-items: start; }
#after .aft:first-child { border-top: none; padding-top: 0; }
#after .aft .screen-t { margin-top: 0; font-size: 17px; line-height: 1.75; }
#after .aft .screen-d { margin-top: 0; font-size: 15px; line-height: 1.95; max-width: 44em; }
#after .pill-basic { display: inline-block; background: #fff; border: 1px solid var(--kg-line); color: var(--kg-blue); font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px; line-height: 1.7; margin-top: 12px; }
/* --- 含まれる/含まれない: カード外し → 見出し＋罫線リスト2列 --- */
#plans .oxwrap { gap: 40px 80px; align-items: start; }
#plans .oxcard { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
#plans .oxh { font-size: 17px; letter-spacing: .04em; }
#plans .oxcard .oxlist { margin-top: 12px; }
#plans .oxlist li { font-size: 14.5px; }
#plans .oxcard--not .oxh { color: var(--kg-ink); }
#plans .oxcard--not li { color: var(--kg-quiet); }
/* SP */
@media (max-width: 749px) {
#strength .sx-list { margin-top: 48px; row-gap: 72px; }
#strength .sx-no { font-size: 56px; }
#strength .sx-t { font-size: 20px; }
#after .aftlist { margin-top: 40px; }
#after .aft { grid-template-columns: 1fr; row-gap: 8px; padding: 24px 0; }
#plans .oxwrap { gap: 56px; }
}
/* v25（2026-08-10 さき指示）: タブレット帯（750〜1023px） */
@media (min-width: 750px) and (max-width: 1023px) {
/* 強み: 章間リズムをPC(100px)とSP(72px)の中間に */
#strength .sx-list { margin-top: 56px; row-gap: 84px; }
/* 開店後にやること: 300px固定+1fr は説明文が約340pxまで潰れるので1列に
→ v28で2カラムへ差し戻し（240px+gap40なら説明文414〜687pxを確保できる。列指定は下のv28ブロックが正） */
#after .aftlist { margin-top: 44px; }
#after .aft { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 10px; padding: 26px 0; }
#after .aft .screen-t { font-size: 16.5px; }
/* 運用プラン: 2列は維持し、カード内の詰まり（価格が2行に折り返す）を解消 */
#plans .duo-card { padding: 32px 26px 30px; }
#plans .duo-price { font-size: clamp(22px, 2.6vw, 28px); margin-top: 14px; }
#plans .duo-price .duo-tax { font-size: 14px; }
/* 含まれる/含まれない: 列間80px → 52px（2/3） */
#plans .oxwrap { gap: 36px 52px; }
}
/* ============================================================
v28（2026-08-10 デザインレビュー対応）
- 強み: PCの図解が小さい → 1.2倍（400 → 480px）
- 強み: 01→02→03 の縦余白が「離れて」見える → 12%圧縮（100 → 88px）
※ mono.css の .col-visual svg(400px) と SP/タブレットの上書きを潰さないよう
必ず min-width:1024px にスコープする（p-support.css は mono.css の後に読む）
============================================================ */
@media (min-width: 1024px) {
#strength .col-visual .sx-fig { max-width: 480px; }
#strength .sx-list { row-gap: 88px; }
}
/* タブレット帯（750〜1023px）: 全部を同じ幅で1列化しない（＝スマホを広げた縦レイアウト回避）
開店後にやること = 見出し240px + 本文の2カラムに戻す。
実測: 説明文の幅は 750px時414px / 830px時494px / 1023px時687px（v25で懸念した340px潰れは起きない） */
@media (min-width: 750px) and (max-width: 1023px) {
#after .aft { grid-template-columns: minmax(0, 240px) 1fr; column-gap: 40px; }
}