/*
 * vo テーマ app.css
 * 色・書体・寸法のトークンと、全ページ共通の部品の CSS。
 * 部品のクラスは vo- 接頭辞の BEM 風。見た目の値（幅・高さ・色・余白・字の大きさ・角丸）はこのファイルのトークンと各部品の指定だけで決まる。
 * 全体に効く box-sizing などのリセットは入れない（要素ごとに box-sizing を指定して寸法をそろえている）。
 * 構成: 1 トークン / 2 土台 / 3 ヘッダー・フッター / 4 一覧ヘッダー / 5 カード / 6 料金 / 7 ブランド / 8 補助金 / 9 レイアウト
 */

/* hidden 属性は display 指定（flex など）に負けて見えてしまわないよう、常時読み込むこのファイルの先頭で固定する */
[hidden] { display: none !important; }

/* ============================== 1 トークン ============================== */
:root {
  --white: #FFFFFF;
  --surface: #F7FAFD;
  --surface2: #F2F4F6;
  --ink: #1A1A1A;
  --ink2: #3D4756;
  --sub: #616A77;
  --line: #E3E7EC;
  --line2: #D5DBE2;
  --navy: #031D4A;
  --navy2: #08285D;
  --gold: #DC9800;
  --gold2: #F2AD08;
  --price: #12233B;
  --link: #0A6FD3;
  --link-bg: #E9F2FC;
  --success: #158A54;
  --success-bg: #E7F6EE;
  --success-line: #BFE6D0;
  --success-text: #116136;
  --success-badge: #166534;
  --danger: #B3283D;
  --danger-bg: #FDECEF;
  --amber-note: #B7791F;
  --amber-bg: #FDF3DC;
  --amber-text: #92400E;
  --ph: #E3E1E6;
  --ph-ink: #4A5568;
  --cta-gold: linear-gradient(90deg, #D69500, #E8A300);
  --footer-line: #334066;
  --on-dark-2: #9FB0C8;
  --on-dark-3: #AEB9CC;
  --font: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', Meiryo, system-ui, sans-serif;
  --r-xs: 4px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-pill: 20px;
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;
  --w-sp: 390px;
  --w-pc: 1280px;
  --w-container: 1200px;
}

/* ============================== 2 土台 ============================== */
body { margin: 0; font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--surface); }
a { color: var(--link); text-decoration: none; }
select, button, input { font-family: inherit; }

/* スタイルガイドの舞台・実面のページ枠 */
/* 幅の切り替えは画面幅でなく「この箱の幅」（コンテナクエリ）で行う。SP 幅の舞台は PC の画面で見ても SP のまま */
.vo-stage { display: flex; flex-direction: column; box-sizing: border-box; background: var(--surface); position: relative; font-family: var(--font); color: var(--ink); font-size: 14px; container: vo / inline-size; }
.vo-page { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--font); color: var(--ink); font-size: 14px; container: vo / inline-size; }
.vo-fbar-wrap { position: sticky; bottom: 0; z-index: 20; }
.vo-only-pc { display: none; }
.vo-only-sp { display: block; }
@container vo (min-width: 1024px) {
  .vo-only-pc { display: block; }
  .vo-only-sp { display: none; }
}

/* 画像枠（スタイルガイド用。実面は写真が無ければ枠ごと出さない） */
.vo-imgbox { flex-shrink: 0; background: var(--ph); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; box-sizing: border-box; }
.vo-imgbox > span { color: var(--ph-ink); line-height: 1.35; }
.vo-imgbox--fluid { width: 100%; }

/* パンくず */
.vo-crumbs { padding: 10px 16px; font-size: 11px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: #FFFFFF; }
.vo-crumbs__sep { color: var(--sub); display: inline-flex; }
.vo-crumbs__link { color: var(--sub); }
.vo-crumbs__cur { color: var(--ink); font-weight: 700; }

/* 節 */
.vo-sec { padding: 26px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.vo-sec--pc { padding: 28px 40px 0; }
.vo-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vo-sec__h { margin: 0; font-size: 17px; font-weight: 900; font-family: var(--font); border-left: 4px solid var(--navy); padding-left: 10px; line-height: 1.4; }
.vo-sec__right { font-size: 12px; color: var(--sub); white-space: nowrap; }
.vo-divider { height: 8px; background: var(--surface); flex-shrink: 0; }

/* カード・本文 */
.vo-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.vo-card--stretch { height: 100%; box-sizing: border-box; }
.vo-p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--ink); }
.vo-ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9; color: var(--ink); }
/* position: relative は、中の読み上げ用の文字（.vo-sr の absolute）を枠の中に収めるため（無いとページ全体が横に広がる） */
.vo-hscroll { position: relative; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
/* 横スクロールの中のチップ（40px）の当たり判定（44px）が上で切れないよう、上にも 2px の余白を取り、同じ分を負のマージンで戻す（見た目の位置は変わらない） */
.vo-hscroll > .vo-sortchip { margin-top: 2px; }
.vo-hscroll:has(> .vo-sortchip) { margin-top: -2px; }
.vo-more { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--link); }

/* チップ */
.vo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vo-chip { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 14px; background: #FFFFFF; border: 1.5px solid var(--link); border-radius: 20px; font-size: 12.5px; font-weight: 700; color: var(--ink); flex-shrink: 0; white-space: nowrap; }
.vo-chip--line { border-color: var(--line); }
.vo-chip.is-on { background: var(--link-bg); border-color: var(--link); }
.vo-chipsm { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--surface); color: var(--sub); font-size: 11px; font-weight: 700; white-space: nowrap; }
.vo-chipsm.is-on { background: var(--success-badge); color: #FFFFFF; }
/* 満たしている条件はどれもチェックつきの緑（濃いのは法人登記可）。灰色は「ない」「条件ではない」の意味だけに使う（プランカード・診断の結果と同じ） */
.vo-chipsm.is-ok { background: var(--success-bg); color: var(--success-text); }
.vo-chipsm--more { background: var(--surface2); color: var(--sub); }
.vo-hchip { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--surface2); color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.vo-hchip.is-on { background: var(--success-bg); color: var(--success-text); }
/* 押せないチップ: 緑地にしない（緑地＋矢印は押せるチップだけ）。満たしている印のチェックだけ緑 */
.vo-hchip.is-met { background: #FFFFFF; border: 1px solid var(--line2); color: var(--ink); }
.vo-hchip.is-met svg { color: var(--success); }

/* 画面には出さず、読み上げにだけ出す文字 */
.vo-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vo-hchip--link { border-bottom: 1px solid var(--success-line); }
.vo-hrow { display: flex; flex-direction: column; gap: 4px; }
.vo-hrow__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vo-hrow__note { font-size: 10.5px; color: var(--sub); }

/* バッジ */
.vo-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; background: var(--navy); color: #FFFFFF; font-size: 11px; font-weight: 700; white-space: nowrap; }
.vo-badge--success { background: var(--success-badge); color: #FFFFFF; }
.vo-badge--sub { background: var(--sub); color: #FFFFFF; }
.vo-badge--soft-success { background: var(--success-bg); color: var(--success-text); }
.vo-badge--surface { background: var(--surface); color: var(--ink); }
.vo-badge--surface-sub { background: var(--surface); color: var(--sub); }
.vo-badge--purple { background: #EDE9FE; color: #5B21B6; }
.vo-badge--green { background: #DCEFE2; color: #116136; }

/* ページ送り */
.vo-pager { display: flex; flex-direction: column; gap: 4px; }
.vo-pager__nav { display: flex; justify-content: center; gap: 6px; }
.vo-pager__gap { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--sub); }
.vo-pager__n { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 700; }
.vo-pager__n.is-cur { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }

/* FAQ */
.vo-faqb, .vo-faq { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
.vo-faqb__row { border-top: 1px solid var(--line); padding: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.vo-faqb__q, .vo-faqb__a { display: flex; gap: 8px; align-items: flex-start; }
.vo-faqb__mk--q { color: var(--navy); font-size: 13px; }
.vo-faqb__mk--a { color: var(--sub); font-size: 13px; }
.vo-faqb__qt { font-size: 13.5px; line-height: 1.6; }
.vo-faqb__at { font-size: 13px; line-height: 1.8; color: var(--ink); }
.vo-faq__item { border-top: 1px solid var(--line); padding: 10px 0; }
.vo-faq__sum { display: flex; gap: 8px; align-items: flex-start; list-style: none; font-size: 13.5px; font-weight: 700; line-height: 1.6; cursor: pointer; }
.vo-faq__q { color: var(--navy); flex-shrink: 0; }
.vo-faq__qt { flex: 1; }
.vo-faq__chev { color: var(--sub); flex-shrink: 0; display: flex; }
.vo-faq__ans { display: flex; gap: 8px; margin-top: 6px; }
.vo-faq__a { color: var(--sub); font-size: 13px; flex-shrink: 0; }
.vo-faq__at { margin: 0; font-size: 13px; line-height: 1.8; color: var(--ink); }
.vo-faq__item[open] .vo-faq__chev { transform: rotate(180deg); }

/* 表・注記 */
.vo-stable { width: 100%; border-collapse: collapse; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.vo-stable__k { padding: 10px 12px; font-size: 12.5px; color: var(--sub); white-space: nowrap; border-bottom: 1px solid var(--line); vertical-align: top; width: 34%; }
.vo-stable__k--pc { width: 220px; }
.vo-stable__v { padding: 10px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line); line-height: 1.7; overflow-wrap: anywhere; }
/* 表は SP でも縦に崩さず、左右の列の表のまま出す。固定ページなど md 由来の 4 列以上の表だけ、横スクロールの枠（.vo-tscroll）に入れて 1 列目を左に固定する */
.vo-tscroll { margin: 0 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; }
.vo-tscroll table { min-width: 560px; margin: 0; border: 0; }
.vo-tscroll th:first-child, .vo-tscroll td:first-child { position: sticky; left: 0; z-index: 1; background: #FFFFFF; box-shadow: 1px 0 0 var(--line); }
.vo-tscroll th:first-child { background: var(--surface); }
.vo-note { display: flex; gap: 8px; align-items: flex-start; background: var(--link-bg); border-radius: 8px; padding: 10px 12px; }
.vo-note__ic { color: var(--navy); flex-shrink: 0; display: flex; margin-top: 1px; }
.vo-note__tx { font-size: 12px; line-height: 1.7; color: var(--ink); }
.vo-note--warn { background: #FEF3C7; }
.vo-note--warn .vo-note__ic { color: var(--amber-note); }
.vo-note--success { background: var(--success-bg); }
.vo-note--success .vo-note__ic { color: var(--success-text); }
.vo-nbox { border-left: 3px solid var(--navy); background: #FFFFFF; border-radius: 0 8px 8px 0; padding: 10px 12px; }
.vo-nbox__p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--sub); }

/* 行型リンク */
.vo-rlinks { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; }
.vo-rlink { display: flex; align-items: center; gap: 8px; min-height: 48px; box-sizing: border-box; padding: 12px 14px; color: var(--ink); }
.vo-rlink.has-bd { border-bottom: 1px solid var(--line); }
.vo-rlink__l { flex: 1; font-size: 14px; font-weight: 700; }
.vo-rlink__r { font-size: 13px; color: var(--link); }
.vo-rlink__ch { color: var(--sub); display: flex; }

/* フォーム部品 */
.vo-sfield { display: flex; flex-direction: column; gap: 2px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-height: 44px; box-sizing: border-box; justify-content: center; }
.vo-sfield__l { font-size: 11px; color: var(--sub); }
/* セレクトは枠いっぱい（ラベルの文字の上も、枠の余白も）が押せる大きさにする。文字の位置は変えず、上・左右・下へ余白ぶん広げ、同じ余白を padding で戻す。ラベルの文字は下に透けて見える（背景は透明） */
.vo-sfield__s { align-self: stretch; box-sizing: border-box; margin: -25px 0 -6px -10px; padding: 25px 0 6px 10px; border: 0; font-size: 16px; font-weight: 700; color: var(--ink); background: transparent; }
.vo-cbox { width: 18px; height: 18px; flex-shrink: 0; border-radius: 4px; border: 1.5px solid var(--line); background: #FFFFFF; display: flex; align-items: center; justify-content: center; color: transparent; }
.vo-cbox.is-on { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.vo-rbox { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--line); background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.vo-rbox.is-on { border-color: var(--navy); background: var(--navy); }
.vo-rbox__dot { width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; }
.vo-cbrow { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.vo-cbrow__t { font-size: 13px; color: var(--ink); }
.vo-sinput { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 22px; padding: 0 14px; height: 44px; box-sizing: border-box; }
.vo-sinput__ic { color: var(--sub); display: flex; }
.vo-sinput__in { border: 0; outline: 0; font-size: 16px; flex: 1; background: transparent; color: var(--ink); }
/* 入力の outline を消した代わり: 入力にフォーカスがある間は検索窓の枠全体に枠線を出す（キーボード操作でも見える） */
.vo-sinput:focus-within { border-color: var(--link); outline: 2px solid var(--link); outline-offset: 2px; }
.vo-sinput__go { height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: var(--navy); color: #FFFFFF; font-size: 12px; font-weight: 700; }
.vo-sortchip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: 20px; border: 1.5px solid var(--line); background: #FFFFFF; color: var(--ink); font-size: 12.5px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.vo-sortchip.is-on { border-color: var(--link); background: var(--link-bg); }
.vo-cbx { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.vo-cbx:checked + .vo-cbox { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.vo-cbx:focus-visible + .vo-cbox { outline: 2px solid var(--link); outline-offset: 2px; }
/* 見た目より大きな当たり判定（44px）。要素の位置・見た目は変えず、タップだけ 44px 四方に広げる */
.vo-hit, .vo-hchip--link, .vo-pager__n, .vo-sinput__go, .vo-fbtn, .vo-toc__row, .vo-hdr-pc__search, .vo-hdr-pc__cmp, .vo-hdr-pc__sv, .vo-prc__apply, .vo-prc__more, .vo-cbi { position: relative; }
.vo-hit::after, .vo-hchip--link::after, .vo-pager__n::after, .vo-sinput__go::after, .vo-fbtn::after, .vo-toc__row::after, .vo-hdr-pc__search::after, .vo-hdr-pc__cmp::after, .vo-hdr-pc__sv::after, .vo-prc__apply::after, .vo-prc__more::after, .vo-cbi::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: calc(100% + 4px); min-width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* 文字だけのリンク（パンくず・フッター・PC ナビ・「もっと見る」）は 24px 四方（WCAG 2.2 の最小）まで当たり判定を広げる */
.vo-crumbs__link, .vo-hdr-pc__nav, .vo-hdr-pc__logo, .vo-hdr-sp__logo, .vo-more, .vo-scard__more, .vo-rev__link, .vo-icard__link, .vo-ft__legal, .vo-ft__link, .vo-rbars__link { position: relative; }
.vo-crumbs__link::after, .vo-hdr-pc__nav::after, .vo-hdr-pc__logo::after, .vo-hdr-sp__logo::after, .vo-more::after, .vo-scard__more::after, .vo-rev__link::after, .vo-icard__link::after, .vo-ft__legal::after, .vo-ft__link::after, .vo-rbars__link::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 24px; min-width: 24px; transform: translateY(-50%);
}
/* SP（この箱が 1024px 未満）では、文字だけのリンクの短辺を 44px 以上にする（余白で。文字の大きさは変えない）。PC は 24px のまま */
@container vo (max-width: 1023px) {
  .vo-ft--sp .vo-ft__link, .vo-ft--sp .vo-ft__legal { box-sizing: border-box; min-height: 44px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
  .vo-crumbs { padding-top: 0; padding-bottom: 0; }
  .vo-crumbs__link, .vo-more, .vo-scard__more, .vo-rev__link, .vo-icard__link { box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; }
  .vo-scard__more { display: flex; }
  .vo-crumbs__link::after { left: 50%; right: auto; width: 100%; min-width: 44px; transform: translate(-50%, -50%); }   /* 短い語（「県」など）も横 44px まで当たり判定を広げる */
  .vo-hdr-sp__logo { padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }   /* ヘッダーの高さ・文字の位置は変えずに、押せる高さだけ 44px に */
}
.vo-fbtn { height: 40px; padding: 0 14px; border-radius: 20px; border: 1.5px solid var(--ink); background: #FFFFFF; color: var(--ink); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vo-fbtn__n { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--navy); color: #FFFFFF; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* 目次 */
.vo-toc { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.vo-toc__sum { font-size: 13px; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.vo-toc__lbl { color: var(--link); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 2px; }
.vo-toc__lbl--open { display: none; }
.vo-toc[open] .vo-toc__lbl--open { display: flex; }
.vo-toc[open] .vo-toc__lbl--closed { display: none; }
.vo-toc__rows { margin-top: 4px; display: flex; flex-direction: column; }
.vo-toc__row { display: flex; align-items: center; justify-content: space-between; min-height: 38px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.vo-toc__ch { color: var(--sub); display: flex; flex-shrink: 0; }

/* ステップ・情報表・横スクロール表 */
.vo-steps { display: flex; flex-direction: column; }
.vo-steps__row { display: flex; gap: 10px; }
.vo-steps__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.vo-steps__n { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #FFFFFF; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vo-steps__bar { width: 2px; flex: 1; background: var(--line2); margin-top: 2px; }
.vo-steps__body { flex: 1; padding-bottom: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vo-steps__body.is-last { padding-bottom: 0; }
.vo-steps__t { display: flex; align-items: center; gap: 6px; color: var(--navy); }
.vo-steps__tt { font-size: 13px; color: var(--ink); }
.vo-steps__p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--sub); }
.vo-itn { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vo-itn__row { display: flex; border-top: 1px solid var(--line); }
.vo-itn__k { width: 112px; flex-shrink: 0; background: var(--navy); color: #FFFFFF; font-size: 11.5px; font-weight: 700; padding: 9px 10px; line-height: 1.5; }
.vo-itn__v { flex: 1; padding: 9px 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink); min-width: 0; }
.vo-hst { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; }
.vo-hst__head { display: flex; }
.vo-hst__corner { flex-shrink: 0; background: var(--surface); }
.vo-hst__th { flex-shrink: 0; background: var(--surface); font-size: 11px; color: var(--ink); font-weight: 700; padding: 8px 8px; text-align: center; box-sizing: border-box; }
.vo-hst__row { display: flex; border-top: 1px solid var(--line); }
.vo-hst__lab { flex-shrink: 0; background: var(--surface); font-size: 11px; font-weight: 700; color: var(--ink); padding: 8px 8px; box-sizing: border-box; }
.vo-hst__td { flex-shrink: 0; font-size: 11.5px; color: var(--ink); padding: 8px 8px; text-align: center; box-sizing: border-box; font-variant-numeric: tabular-nums; }

/* ============================== 3 ヘッダー・フッター・固定バー ============================== */
.vo-hdr-sp { height: 56px; flex-shrink: 0; background: #FFFFFF; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 4px; padding: 0 6px 0 14px; box-sizing: border-box; }
.vo-hdr-sp__logo { flex: 1; min-width: 0; font-size: 14px; font-weight: 900; font-family: var(--font); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-iconbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.vo-iconbtn--btn { border: 0; background: transparent; }
/* メニューのボタン: 開いている間（aria-expanded=true）はアイコンが「閉じる」に変わる */
.vo-iconbtn__ic { display: flex; }
.vo-iconbtn__ic--close { display: none; }
.vo-iconbtn--btn[aria-expanded="true"] .vo-iconbtn__ic--menu { display: none; }
.vo-iconbtn--btn[aria-expanded="true"] .vo-iconbtn__ic--close { display: flex; }
/* 保存（ハート）。保存が 1 件以上あるときだけ件数の丸を出す（hidden） */
.vo-iconbtn--saved { position: relative; }
.vo-iconbtn__n { position: absolute; top: 5px; right: 3px; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; }
.vo-hdr-pc { height: 72px; flex-shrink: 0; background: #FFFFFF; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.vo-hdr-pc__in { width: 1200px; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 22px; }
.vo-hdr-pc__logo { font-size: 17px; font-weight: 900; color: var(--navy); font-family: var(--font); white-space: nowrap; flex-shrink: 0; }
.vo-hdr-pc__navs { display: flex; gap: 18px; flex: 1; }
.vo-hdr-pc__nav { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.vo-hdr-pc__nav.is-on { color: var(--navy); }
.vo-hdr-pc__form { display: contents; }
.vo-hdr-pc__search { width: 240px; flex-shrink: 0; height: 40px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 20px; display: flex; align-items: center; padding: 0 14px; gap: 8px; color: var(--sub); }
.vo-hdr-pc__input { border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--ink); width: 100%; }
.vo-hdr-pc__search:focus-within { border-color: var(--link); outline: 2px solid var(--link); outline-offset: 2px; }
.vo-hdr-pc__cmp { flex-shrink: 0; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--navy); color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; }
.vo-hdr-pc__sv { box-sizing: border-box; flex-shrink: 0; height: 40px; margin-right: -10px; padding: 0 14px; border-radius: 20px; border: 1.5px solid var(--navy); background: #FFFFFF; color: var(--navy); font-size: 13px; font-weight: 700; display: flex; align-items: center; }

.vo-ft { background: var(--ink); color: #FFFFFF; display: flex; flex-direction: column; }
.vo-ft--sp { margin-top: 28px; padding: 24px 16px 28px; gap: 14px; }
.vo-ft--sp .vo-ft__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.vo-ft__group { display: flex; flex-direction: column; min-width: 0; }
.vo-ft__gt { font-size: 11px; color: var(--on-dark-2); margin-bottom: 4px; }
.vo-ft__link { color: #FFFFFF; padding: 6px 0; font-size: 12.5px; }
.vo-ft--sp .vo-ft__legals { display: flex; flex-wrap: wrap; gap: 0 14px; border-top: 1px solid var(--footer-line); padding-top: 12px; }
.vo-ft--sp .vo-ft__legal { color: var(--on-dark-3); padding: 8px 0; font-size: 11px; }
.vo-ft--sp .vo-ft__note { margin: 0; font-size: 10px; color: var(--on-dark-3); line-height: 1.7; }
.vo-ft--sp .vo-ft__copy { font-size: 11px; color: var(--on-dark-3); }
.vo-ft--pc { margin-top: 36px; padding: 32px 0; align-items: center; gap: 16px; }
.vo-ft--pc .vo-ft__groups { width: 1200px; max-width: calc(100% - 32px); display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.vo-ft--pc .vo-ft__gt { font-size: 12px; margin-bottom: 6px; }
.vo-ft--pc .vo-ft__link { padding: 4px 0; }
.vo-ft--pc .vo-ft__legals { width: 1200px; max-width: calc(100% - 32px); display: flex; flex-wrap: wrap; border-top: 1px solid var(--footer-line); padding-top: 14px; }
.vo-ft--pc .vo-ft__legal { color: var(--on-dark-3); padding: 0 12px; font-size: 11.5px; }
.vo-ft--pc .vo-ft__bottom { width: 1200px; max-width: calc(100% - 32px); display: flex; justify-content: space-between; align-items: center; }
.vo-ft--pc .vo-ft__note { margin: 0; font-size: 10.5px; color: var(--on-dark-3); }
.vo-ft--pc .vo-ft__copy { font-size: 11.5px; color: var(--on-dark-3); }

.vo-fbar { flex-shrink: 0; position: sticky; bottom: 0; background: #FFFFFF; border-top: 1px solid var(--line); display: flex; z-index: 20; }
.vo-fbar__cell { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--ink); font-size: 10.5px; font-weight: 700; }
.vo-fbar--detail { padding: 8px 16px; box-sizing: border-box; }
.vo-fbar__cta { flex: 1; min-height: 45px; border-radius: 7px; background: var(--cta-gold); color: #FFFFFF; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: none; }

/* ============================== 4 一覧面の共通ヘッダー ============================== */
.vo-hero { background: var(--navy); padding: 18px 16px 16px; }
.vo-hero__in { display: flex; flex-direction: column; gap: 8px; color: #FFFFFF; }
.vo-hero__h1 { margin: 0; font-size: 19px; font-weight: 900; font-family: var(--font); color: #FFFFFF; line-height: 1.5; }
.vo-hero__lead { margin: 0; font-size: 12.5px; line-height: 1.8; color: #FFFFFF; }
.vo-hero__links { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; line-height: 1.6; }
.vo-hero__lt { color: #FFFFFF; opacity: 0.8; font-size: 11.5px; }
.vo-hero__link { display: inline-flex; align-items: center; gap: 3px; min-height: 44px; box-sizing: border-box; color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vo-hero--pc { display: flex; justify-content: center; padding: 26px 0 22px; }
.vo-hero--pc .vo-hero__in { width: 1200px; max-width: calc(100% - 32px); gap: 10px; }
.vo-hero--pc .vo-hero__h1 { font-size: 25px; }
.vo-hero--pc .vo-hero__lead { font-size: 13.5px; }
@container vo (min-width: 1024px) {
  .vo-hero { display: flex; justify-content: center; padding: 26px 0 22px; }
  .vo-hero__in { width: 1200px; max-width: calc(100% - 32px); gap: 10px; }
  .vo-hero__h1 { font-size: 25px; }
  .vo-hero__lead { font-size: 13.5px; }
  .vo-sec { padding: 28px 40px 0; }
}

.vo-selrow { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #FFFFFF; }
.vo-selrow__lab { flex-shrink: 0; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 5px; background: var(--surface); color: var(--sub); font-size: 10.5px; font-weight: 700; }
.vo-selrow__val { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-selrow__btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 16px; background: #FFFFFF; color: var(--link); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.vo-ic { display: flex; }
.vo-ic--up { display: none; }
.is-open > .vo-ic--down { display: none; }
.is-open > .vo-ic--up { display: flex; }

.vo-ctog { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 12px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.vo-ctog.is-on { background: var(--link-bg); border-color: var(--link); }
.vo-apanel { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--line); }
.vo-apanel[hidden], .vo-cpanel[hidden] { display: none; }
.vo-apanel__grp { display: flex; flex-direction: column; gap: 6px; }
.vo-apanel__gt { font-size: 11px; color: var(--sub); }
.vo-apanel__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.vo-cpanel { background: #FFFFFF; padding: 2px 16px 14px; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.vo-cpanel__row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
button.vo-cpanel__row { box-sizing: content-box; width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; text-align: left; cursor: pointer; }
button.vo-cpanel__row:disabled { cursor: default; }
.vo-cpanel__lab { flex: 1; font-size: 13px; }
.vo-cpanel__lab--link { font-weight: 700; color: var(--link); }
.vo-cpanel__n { font-size: 11.5px; color: var(--sub); }
.vo-cpanel__type { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.vo-cpanel__trow { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; }
.vo-cpanel__foot { display: flex; gap: 10px; padding-top: 10px; }
.vo-cpanel__clear { flex: 1; min-height: 44px; border-radius: 22px; border: 1.5px solid var(--line); background: #FFFFFF; color: var(--ink); font-size: 13px; font-weight: 700; }
.vo-cpanel__go { flex: 1.6; min-height: 44px; border-radius: 22px; background: var(--cta-gold); color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: none; }

.vo-seg { display: flex; gap: 4px; background: var(--surface2); border-radius: 20px; padding: 3px; }
.vo-seg__b { flex: 1; min-height: 40px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; color: var(--ink); font-size: 12.5px; font-weight: 700; }
.vo-seg__b.is-on { background: var(--navy); color: #FFFFFF; }
.vo-sfr { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.vo-sfr__filt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vo-sfr__filtl { font-size: 11.5px; color: var(--sub); }
.vo-sfr__count { font-size: 12px; color: var(--sub); }

.vo-fpc { flex: 0 0 280px; width: 280px; box-sizing: border-box; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.vo-fpc__t { font-size: 14px; font-family: var(--font); }
.vo-fpc__grp { display: flex; flex-direction: column; gap: 6px; }
.vo-fpc__grp--tight { gap: 2px; }
.vo-fpc__gt { font-size: 12.5px; }
.vo-fpc__gt--mb { margin-bottom: 4px; }
.vo-fpc__body { margin: 0 -16px; }
.vo-fpc__body--cond { margin: -2px -16px -16px; }
.vo-fpc__clear { min-height: 44px; border-radius: 8px; border: 1.5px solid var(--line); background: #FFFFFF; color: var(--ink); font-size: 13px; font-weight: 700; }

/* ============================== 5 カード ============================== */
.vo-card--p12 { padding: 12px; }
.vo-cmpchk { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.vo-cmp { width: 15px; height: 15px; margin: 0; flex-shrink: 0; }

/* 拠点カード */
.vo-oc__photo { position: relative; }
.vo-oc__img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); box-sizing: border-box; background: var(--ph); }
.vo-oc__save { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); border: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFF; cursor: pointer; }
.vo-oc--compact .vo-oc__save { width: 28px; height: 28px; }
.vo-oc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.vo-oc__name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.vo-oc__namelink { color: var(--ink); }
.vo-oc--compact .vo-oc__name { font-size: 15px; }
.vo-oc__brandrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.vo-oc__brand { font-size: 11.5px; color: var(--sub); }
.vo-oc__line { font-size: 11.5px; color: var(--sub); display: flex; align-items: center; gap: 4px; }
.vo-oc__sts { display: flex; flex-direction: column; gap: 2px; }
.vo-oc__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.vo-oc__setup { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.vo-oc__setuptx { font-size: 13px; color: var(--ink); white-space: nowrap; }
.vo-oc--compact .vo-oc__setuptx { font-size: 12.5px; }
.vo-oc__setuptx--note, .vo-oc--compact .vo-oc__setuptx--note { font-size: 11.5px; color: var(--sub); white-space: normal; line-height: 1.5; }
.vo-oc__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vo-oc__num { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vo-oc__num--r { text-align: right; }
.vo-oc__numl { font-size: 10.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-oc__numv { font-size: 22px; color: var(--price); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.vo-oc__numv--ink { color: var(--ink); }
.vo-oc--compact .vo-oc__numv { font-size: 17px; }
/* 年払い・年間契約の1か月あたりを月額に出すとき、金額のそばに小さく添える『年払い』（有利誤認を避ける。値の中に入れて折り返さない） */
.vo-basis { display: inline-block; margin-left: 4px; font-size: 10.5px; font-weight: 600; font-style: normal; color: var(--sub); letter-spacing: 0; line-height: 1.2; white-space: nowrap; vertical-align: baseline; }
.vo-oc__note { margin: 0; font-size: 11px; color: var(--sub); }
.vo-oc__go { margin-top: auto; min-height: 44px; border-radius: 8px; background: var(--navy); color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* プラン行カード */
.vo-prc__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.vo-prc__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vo-prc__name { font-size: 14.5px; line-height: 1.4; }
.vo-prc__sub { font-size: 11.5px; color: var(--sub); }
.vo-prc__office { color: var(--link); font-weight: 700; }
.vo-prc__st { font-size: 11px; color: var(--sub); display: flex; align-items: center; gap: 3px; }
.vo-prc__pr { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; }
.vo-prc__prl { font-size: 10.5px; color: var(--sub); }
.vo-prc__prv { font-size: 20px; color: var(--price); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vo-prc__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.vo-prc__cost { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.vo-prc__costtx { font-size: 11.5px; color: var(--sub); }
.vo-prc__acts { display: flex; gap: 8px; }
.vo-prc__apply { flex: 1; min-height: 40px; border-radius: 8px; background: var(--cta-gold); color: #FFFFFF; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: none; }
.vo-prc__more { flex: 1; min-height: 40px; border-radius: 8px; border: 1.5px solid var(--line); background: #FFFFFF; color: var(--ink); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* プランカード */
.vo-pcard__main { display: flex; flex-direction: column; gap: 6px; }
.vo-pcard__name { font-size: 15px; line-height: 1.4; }
.vo-pcard__prow { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vo-pcard__price { display: flex; align-items: baseline; gap: 3px; }
.vo-pcard__pv { font-size: 24px; color: var(--price); font-variant-numeric: tabular-nums; line-height: 1.1; }
.vo-pcard__pu { font-size: 11.5px; color: var(--sub); }
.vo-pcard__vs { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.vo-tone--even { background: var(--surface2); color: var(--sub); }
.vo-tone--cheap { background: var(--success-bg); color: var(--success-text); }
.vo-tone--high { background: var(--danger-bg); color: var(--danger); }
.vo-pcard__cost { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--surface); border-radius: 8px; padding: 8px 10px; }
.vo-pcard__c { display: flex; flex-direction: column; gap: 1px; }
.vo-pcard__c--r { border-left: 1px solid var(--line); padding-left: 10px; }
.vo-pcard__cl { font-size: 10.5px; color: var(--sub); }
.vo-pcard__cv { font-size: 14px; font-variant-numeric: tabular-nums; }
.vo-pcard__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vo-pcard__chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 3px 8px; border-radius: 12px; background: var(--surface); color: var(--sub); border: 1px solid var(--line); }
.vo-pcard__chip.is-on { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.vo-pcard__chip.is-off { background: var(--surface2); color: var(--sub); }
.vo-pcard__chip.is-off svg { opacity: .8; }
.vo-pcard__note { margin: 2px 0 0; font-size: 11.5px; color: var(--sub); }
/* 条件つきのプラン（契約できる人・期間・組み合わせが限られるプラン）: バッジと注記。月額・総額の数字は変えない */
.vo-badge--elig { background: var(--amber-bg); color: var(--amber-text); box-shadow: inset 0 0 0 1px var(--amber-note); margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.vo-elig-note { display: block; margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--amber-text); overflow-wrap: anywhere; }
.vo-rrow__elig { display: block; margin-top: 3px; }
.vo-pcard__main > .vo-badge--elig, .vo-prc__id > .vo-badge--elig { align-self: flex-start; margin: 4px 0 0; }
.vo-hub-rrow__plan .vo-badge--elig { font-size: 10px; }
.vo-pcard__tg { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--link); background: transparent; border: 0; padding: 0; align-self: flex-start; cursor: pointer; }
.vo-pdr { margin-top: 8px; background: var(--surface); border-radius: 8px; padding: 4px 10px; }
.vo-pdr[hidden] { display: none; }
.vo-pdr__row { display: flex; gap: 10px; padding: 7px 0; }
.vo-pdr__row.has-bd { border-bottom: 1px solid var(--line); }
.vo-pdr__k { flex: 0 0 92px; font-size: 12px; color: var(--sub); }
.vo-pdr__v { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); line-height: 1.6; }
.vo-pdr__foot { padding: 2px 0 4px; }
.vo-pdr__sub { display: block; margin-top: 2px; font-size: 11px; line-height: 1.55; color: var(--sub); overflow-wrap: anywhere; }

/* 補助金カード */
.vo-scard__top { display: flex; justify-content: space-between; align-items: center; }
.vo-scard__badges { display: flex; gap: 6px; }
.vo-scard__dl { font-size: 11px; color: var(--sub); font-weight: 700; }
.vo-scard__dl.is-urgent { color: var(--danger); }
.vo-scard__name { font-size: 14.5px; }
.vo-scard__loc { font-size: 11.5px; color: var(--sub); }
.vo-scard__mid { display: flex; justify-content: space-between; align-items: center; }
.vo-scard__upper { font-size: 17px; color: var(--price); }
.vo-scard__sum { margin: 0; font-size: 12px; line-height: 1.7; color: var(--ink); }
.vo-scard__more { font-size: 12px; font-weight: 700; color: var(--link); }

/* 小さなカード・タイル */
.vo-gcard { display: flex; flex-direction: column; gap: 6px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 12px; color: var(--ink); flex-shrink: 0; min-width: 200px; box-sizing: border-box; }
.vo-gcard__t { font-size: 13px; line-height: 1.6; }
.vo-gcard__d { font-size: 11px; color: var(--sub); }
.vo-btile { display: flex; flex-direction: column; gap: 4px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.vo-btile__n { font-size: 14px; font-family: var(--font); }
.vo-btile__m { font-size: 11px; color: var(--sub); }
.vo-btile__p { font-size: 12px; color: var(--price); font-weight: 700; }
.vo-ptile { display: flex; flex-direction: column; gap: 2px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-height: 44px; min-width: 108px; flex-shrink: 0; box-sizing: border-box; }
.vo-ptile__n { font-size: 13.5px; white-space: nowrap; }
.vo-ptile__c { font-size: 11px; color: var(--sub); white-space: nowrap; }
.vo-rrow { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.vo-rrow__rank { width: 22px; flex-shrink: 0; font-size: 15px; color: var(--navy); }
.vo-rrow__img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 6px; object-fit: cover; }
.vo-rrow__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vo-rrow__name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-rrow__pref { font-size: 10.5px; color: var(--sub); }
.vo-rrow__price { font-size: 14px; color: var(--price); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 地域ハブの県アコーディオン */
.vo-pacc { background: #FFFFFF; }
.vo-pacc--none { background: transparent; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; color: var(--sub); font-size: 13.5px; border-top: 1px solid var(--line); }
.vo-pacc__no { font-size: 11px; }
.vo-pacc__sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; cursor: pointer; border-top: 1px solid var(--line); }
.vo-pacc__name { font-size: 14px; font-weight: 700; color: var(--ink); }
.vo-pacc__cnt { margin-left: 8px; font-size: 11.5px; color: var(--sub); font-weight: 400; }
.vo-pacc__lbl { color: var(--link); display: flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; }
.vo-pacc__lbl--open { display: none; }
.vo-pacc[open] .vo-pacc__lbl--open { display: flex; }
.vo-pacc[open] .vo-pacc__lbl--closed { display: none; }
.vo-pacc__body { background: var(--surface); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.vo-pacc__grp { display: flex; flex-direction: column; gap: 6px; }
.vo-pacc__gt { font-size: 11px; color: var(--sub); }
.vo-pacc__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vo-pacc__more { display: flex; flex-direction: column; gap: 6px; }
.vo-pacc__msum { min-height: 44px; list-style: none; cursor: pointer; }
.vo-pacc__msum::-webkit-details-marker { display: none; }
.vo-pacc__mc, .vo-pacc__mo { display: inline-flex; align-items: center; gap: 2px; }
.vo-pacc__mo { display: none; }
.vo-pacc__more[open] .vo-pacc__mo { display: inline-flex; }
.vo-pacc__more[open] .vo-pacc__mc { display: none; }
.vo-pacc__all { min-height: 44px; border-radius: 8px; background: var(--navy); color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* ============================== 6 料金 ============================== */
.vo-pbox { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; box-sizing: border-box; }
.vo-pbox__top { display: grid; grid-template-columns: 1fr 1fr; }
.vo-pbox__col { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 10px; min-width: 0; }
.vo-pbox__col--r { border-left: 1px solid var(--line); }
.vo-pbox__l { font-size: 11px; color: var(--sub); }
.vo-pbox__v { font-size: 26px; font-weight: 800; color: var(--price); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vo-pbox__s { font-size: 10.5px; color: var(--sub); text-align: center; line-height: 1.4; }
.vo-pbox__vsw { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.vo-pbox__vs { margin-top: 4px; padding: 3px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; line-height: 1.4; text-align: center; box-sizing: border-box; max-width: 100%; }
.vo-pbox__vsnote { font-size: 9.5px; color: var(--sub); margin-top: 3px; text-align: center; line-height: 1.3; }
.vo-pbox__fees { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 13px; padding-top: 10px; }
.vo-pbox__fee { font-size: 12px; color: var(--sub); }
.vo-pbox__feev { color: var(--price); font-size: 13px; font-weight: 800; }
.vo-pbox__upd { font-size: 10.5px; color: var(--sub); }
.vo-pbox__noprice { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink); text-align: center; }
.vo-pbox--noprice .vo-pbox__fees { margin-top: 8px; padding-top: 8px; justify-content: center; }
.vo-pbox__cta { margin-top: 13px; min-height: 45px; border-radius: 7px; background: var(--cta-gold); color: #FFFFFF; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: none; }
.vo-pbox__note { margin: 8px 0 0; font-size: 11px; color: var(--sub); text-align: center; }

.vo-pbar { display: flex; flex-direction: column; gap: 8px; }
.vo-pbar__row { display: flex; align-items: center; gap: 8px; }
.vo-pbar__l { width: 56px; flex-shrink: 0; font-size: 11.5px; color: var(--sub); }
.vo-pbar__track { flex: 1; height: 14px; background: var(--surface); border-radius: 7px; overflow: hidden; }
.vo-pbar__bar { height: 100%; background: var(--navy); border-radius: 7px; }
.vo-pbar__v { width: 72px; flex-shrink: 0; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.vo-stats { display: flex; justify-content: space-between; }
.vo-stats__l { font-size: 11px; color: var(--sub); }
.vo-stats__v { font-size: 19px; font-variant-numeric: tabular-nums; }
.vo-stats__v.is-accent { color: var(--price); }
.vo-fstats__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.vo-fstats__unit { font-size: 10.5px; color: var(--sub); }
.vo-fstats__fb { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ink); background: #FEF3C7; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }

.vo-calc { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.vo-calc__head { display: flex; flex-direction: column; gap: 2px; }
.vo-calc__title { display: flex; align-items: center; gap: 6px; }
.vo-calc__ic { color: var(--navy); }
.vo-calc__tt { font-size: 14px; }
.vo-calc__sub { font-size: 11px; color: var(--sub); }
.vo-calc__ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vo-calc__ctl--pc { grid-template-columns: 1fr 1fr 1fr; }
.vo-calc__f { display: flex; flex-direction: column; gap: 4px; }
.vo-calc__f--wide { grid-column: 1 / -1; }
.vo-calc__ctl--pc .vo-calc__f--wide { grid-column: auto; }
.vo-calc__lab { font-size: 11px; font-weight: 700; color: var(--sub); }
.vo-calc__sel { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; font-size: 13.5px; font-weight: 700; color: var(--ink); padding: 0 10px; appearance: auto; }
.vo-calc__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vo-calc__tile { background: var(--surface); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vo-calc__tk { font-size: 10.5px; color: var(--sub); white-space: nowrap; }
.vo-calc__tv { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vo-calc--pc .vo-calc__tv { font-size: 16px; }
.vo-calc__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.vo-calc__tcol { display: flex; flex-direction: column; gap: 2px; }
.vo-calc__tcol--r { text-align: right; }
.vo-calc__tlab { font-size: 11.5px; color: var(--sub); }
.vo-calc__tlab2 { font-size: 11px; color: var(--sub); }
.vo-calc__tval { font-size: 26px; color: var(--price); font-variant-numeric: tabular-nums; line-height: 1.1; }
.vo-calc--pc .vo-calc__tval { font-size: 30px; }
.vo-calc__per { font-size: 15px; font-variant-numeric: tabular-nums; }
.vo-calc__cmp { display: flex; flex-direction: column; gap: 8px; background: var(--link-bg); border: 1px solid var(--line2); border-radius: 10px; padding: 12px; }
.vo-calc__cmph { font-size: 13px; }
.vo-calc__bars { display: flex; flex-direction: column; gap: 6px; }
.vo-calc__brow { display: flex; align-items: center; gap: 8px; }
.vo-calc__bl { width: 84px; font-size: 11px; color: var(--sub); flex-shrink: 0; }
.vo-calc__track { flex: 1; height: 14px; background: var(--surface2); border-radius: 7px; overflow: hidden; }
.vo-calc__bar { height: 100%; background: var(--navy); border-radius: 7px; }
.vo-calc__bar--med { background: #9FB0C8; }
.vo-calc__bv { width: 72px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.vo-calc__bv--med { color: var(--sub); }
.vo-calc__verdict { font-size: 12.5px; line-height: 1.6; color: var(--ink); }
.vo-calc__note { font-size: 10.5px; line-height: 1.6; color: var(--sub); }
.vo-ok { color: var(--success-text); }
.vo-ng { color: var(--danger); }

/* ============================== 7 ブランド・採点 ============================== */
.vo-stars { display: inline-flex; gap: 1px; flex-shrink: 0; }
.vo-stars svg { fill: none; stroke: var(--line2); }
.vo-stars svg.on { fill: var(--gold); stroke: var(--gold); }
.vo-spill { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.vo-spill__n { color: var(--price); font-variant-numeric: tabular-nums; }
.vo-spill__lab { color: var(--sub); }
.vo-spill--big { display: flex; gap: 8px; flex-wrap: wrap; white-space: normal; }
.vo-spill__big { font-size: 20px; color: var(--price); font-variant-numeric: tabular-nums; line-height: 1; }
.vo-spill__u { font-size: 11px; color: var(--sub); }
.vo-verdict { background: var(--link-bg); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.vo-verdict__ic { color: var(--navy); flex-shrink: 0; margin-top: 1px; }
.vo-verdict__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vo-verdict__row { display: flex; flex-direction: column; gap: 2px; }
.vo-verdict__lbl { font-size: 10.5px; font-weight: 700; color: var(--navy); letter-spacing: .04em; }
.vo-verdict__tx { font-size: 13px; line-height: 1.7; color: var(--ink); }
.vo-caution { background: var(--amber-bg); border: 1px solid #F0D999; border-radius: 10px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.vo-caution__ic { color: var(--amber-text); flex-shrink: 0; margin-top: 1px; }
.vo-caution__body { display: flex; flex-direction: column; gap: 4px; }
.vo-caution__p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink); }
.vo-rbars__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.vo-rbars__t { font-size: 12.5px; font-weight: 700; color: var(--sub); }
.vo-rbars__sc { display: flex; align-items: center; gap: 6px; }
.vo-rbars__n { font-size: 22px; color: var(--price); font-variant-numeric: tabular-nums; }
.vo-rbars__u { font-size: 11px; color: var(--sub); }
.vo-rbars__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.vo-rbars__row { display: flex; align-items: center; gap: 8px; }
.vo-rbars__an { font-size: 12px; color: var(--ink); width: 84px; flex-shrink: 0; }
.vo-rbars__track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.vo-rbars__bar { height: 100%; background: var(--gold); border-radius: 4px; }
.vo-bh-card .vo-rbars__bar { background: var(--navy); }      /* ブランド一覧のカードの「採点の高い軸」は紺 */
.vo-rbars__av { font-size: 12.5px; color: var(--price); width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.vo-rbars__note { margin: 4px 0 0; font-size: 10.5px; color: var(--sub); line-height: 1.6; }
.vo-rbars__link { color: var(--link); font-weight: 700; white-space: nowrap; }
.vo-reco__head { background: var(--navy); border-radius: 12px 12px 0 0; padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; }
.vo-reco__ht { font-size: 12.5px; color: #FFFFFF; }
.vo-reco__badge { font-size: 10.5px; font-weight: 700; color: var(--navy); background: #FFFFFF; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.vo-reco__body { background: #FFFFFF; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.vo-reco__name { font-size: 15px; }
.vo-reco__prow { display: flex; align-items: baseline; gap: 8px; }
.vo-reco__price { font-size: 27px; color: var(--price); font-variant-numeric: tabular-nums; }
.vo-reco__unit { font-size: 11px; color: var(--sub); }
.vo-reco__yr { font-size: 11.5px; color: var(--sub); }
.vo-reco__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vo-reco__chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 12px; background: var(--surface); color: var(--sub); border: 1px solid var(--line); }
.vo-reco__chip.is-on { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.vo-reco__note { margin: 0; font-size: 11.5px; color: var(--sub); line-height: 1.6; }
.vo-fact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.vo-fact__cell { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; }
.vo-fact__ic { color: var(--navy); flex-shrink: 0; }
.vo-fact__t { font-size: 12px; font-weight: 700; line-height: 1.4; }
.vo-icard__head { display: flex; align-items: center; gap: 8px; }
.vo-icard__ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--danger-bg); color: var(--danger); }
.vo-icard__ic--good { background: var(--success-bg); color: var(--success-text); }
.vo-icard__t { font-size: 13px; line-height: 1.5; }
.vo-icard__p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--ink); }
.vo-icard__link { font-size: 11.5px; font-weight: 700; color: var(--link); display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; }
.vo-rev__top { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.vo-rev__who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vo-rev__src { font-size: 10.5px; font-weight: 700; color: var(--ink); background: var(--surface2); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.vo-rev__src.is-amber { background: var(--amber-bg); }
.vo-rev__place { font-size: 11px; color: var(--sub); }
.vo-rev__none { font-size: 10.5px; color: var(--sub); white-space: nowrap; }
.vo-rev__title { font-size: 13px; line-height: 1.5; }
.vo-rev__sum { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink); }
.vo-rev__foot { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: var(--sub); gap: 6px; }
.vo-rev__link { font-weight: 700; color: var(--link); white-space: nowrap; }

/* ============================== 8 補助金・統計 ============================== */
.vo-cbi { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 20px; flex-shrink: 0; }
.vo-cbi__box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--navy); background: #FFFFFF; display: flex; align-items: center; justify-content: center; color: transparent; }
.vo-cbi__box.is-on { background: var(--navy); color: #FFFFFF; }
.vo-cbx:checked + .vo-cbi__box { background: var(--navy); color: #FFFFFF; }
.vo-cbi__t { font-size: 12px; color: var(--ink); }
.vo-sfchips { display: flex; flex-wrap: wrap; gap: 8px; }
.vo-sbar { margin-top: 12px; border-top: 1px solid var(--line); }
.vo-sbar__cond { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.vo-raccs { display: flex; flex-direction: column; gap: 8px; }
.vo-racc { border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; overflow: hidden; }
.vo-racc__sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 700; font-family: var(--font); }
.vo-racc__cnt { margin-left: 8px; font-size: 11.5px; color: var(--sub); font-weight: 400; }
.vo-racc__ch { color: var(--link); display: flex; }
.vo-racc__ch--open { display: none; }
.vo-racc[open] .vo-racc__ch--open { display: flex; }
.vo-racc[open] .vo-racc__ch--closed { display: none; }
.vo-racc__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 12px 12px; background: var(--surface); }
.vo-rtile { display: flex; flex-direction: column; gap: 2px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.vo-rtile__n { font-size: 13px; }
.vo-rtile__c { font-size: 10.5px; color: var(--sub); }
.vo-sbars { display: flex; flex-direction: column; gap: 8px; }
.vo-sbars__row { display: flex; flex-direction: column; gap: 3px; }
.vo-sbars__top { display: flex; justify-content: space-between; font-size: 12px; }
.vo-sbars__n { font-variant-numeric: tabular-nums; }
.vo-sbars__track { height: 8px; border-radius: 4px; background: var(--surface2); }
.vo-sbars__bar { height: 8px; border-radius: 4px; background: var(--navy); }
.vo-sbars__bar--link { background: var(--link); }
.vo-sbars__bar--sub { background: var(--sub); }
.vo-ntiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.vo-ntile { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vo-ntile__v { font-size: 18px; font-family: var(--font); color: var(--navy); font-variant-numeric: tabular-nums; }
.vo-ntile__k { font-size: 10.5px; color: var(--sub); text-align: center; }
.vo-mini { display: flex; flex-direction: column; gap: 10px; }

/* ============================== 9 レイアウト ============================== */
/* 外枠。SP は 1 カラム。PC は本文 840 + 右 320（detail）／左パネル 280 + 本文（list）。幅 1200 の枠の中に置く */
.vo-wrap { width: 1200px; max-width: calc(100% - 32px); margin: 0 auto; display: flex; flex-direction: column; }
.vo-main { display: flex; flex-direction: column; flex: 1; }
.vo-layout { display: flex; flex-direction: column; }
.vo-layout__main { min-width: 0; display: flex; flex-direction: column; }
.vo-layout__side { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.vo-layout__filter { display: none; }
@container vo (min-width: 1024px) {
  .vo-wrap--page { padding: 20px 0 40px; }
  .vo-layout--detail { flex-direction: row; gap: 40px; align-items: flex-start; }
  .vo-layout--detail > .vo-layout__main { flex: 0 0 840px; }
  .vo-layout--detail > .vo-layout__side { flex: 0 0 320px; position: sticky; top: 16px; }
  .vo-layout--list { flex-direction: row; gap: 28px; align-items: flex-start; }
  .vo-layout--list > .vo-layout__main { flex: 1; }
  .vo-layout--list > .vo-layout__filter { display: block; flex: 0 0 280px; }
}

/* メニュー（SP） */
.vo-menu[hidden] { display: none; }
.vo-menu { background: #FFFFFF; border-bottom: 1px solid var(--line); padding: 4px 16px 12px; }
.vo-menu__link { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; }
.vo-menu__link[aria-current] { color: var(--navy); font-weight: 900; box-shadow: inset 4px 0 0 var(--navy); padding-left: 12px; }

/* ============================== 10 一覧面・拠点ページ ============================== */
.vo-blk { display: contents; }
/* 外枠: SP は幅いっぱい（節が 16px の余白を持つ）。PC は 1200px の枠 */
.vo-wrap--page { max-width: 100%; }
.vo-cardlist { display: flex; flex-direction: column; gap: 10px; }
.vo-pagerwrap { padding: 16px 16px 0; }
.vo-ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vo-ptiles .vo-ptile { min-width: 0; }
/* 都道府県のタイル: 上位の県を横スクロールで出し、「すべての都道府県を見る」の開閉（既定は閉じる）の中に全県のグリッドを置く */
.vo-pall { margin-top: 2px; }
.vo-pall__sum { min-height: 44px; list-style: none; cursor: pointer; }
.vo-pall__sum::-webkit-details-marker { display: none; }
.vo-pall__c, .vo-pall__o { display: inline-flex; align-items: center; gap: 2px; }
.vo-pall__o { display: none; }
.vo-pall[open] .vo-pall__o { display: inline-flex; }
.vo-pall[open] .vo-pall__c { display: none; }
.vo-pall__body { margin-top: 4px; }
.vo-sfr__note { margin: 0; font-size: 11px; line-height: 1.6; color: var(--sub); }
.vo-oc__credit { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 52px); font-size: 10px; line-height: 1.5; color: #FFFFFF; background: rgba(0, 0, 0, .6); padding: 1px 6px; border-radius: 4px; }
.vo-cpanel__row--off { color: var(--sub); }
.vo-cpanel__row--off .vo-cpanel__lab { color: var(--sub); }
.vo-crumbs__link--plain { color: var(--sub); }
.vo-nearcond { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.vo-nearcond__t { font-size: 13px; }
.vo-cannot__t { font-size: 13.5px; }
.vo-stars svg.half { fill: none; stroke: var(--gold); }
.vo-stars svg polygon.hf { fill: var(--gold); stroke: none; clip-path: inset(0 50% 0 0); }
.vo-pbox__cta--navy, .vo-fbar__cta--navy { background: var(--navy); }
@container vo (min-width: 1024px) {
  .vo-wrap--page { max-width: calc(100% - 32px); }
  .vo-cardlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .vo-layout .vo-sec { padding-left: 0; padding-right: 0; }
  .vo-pagerwrap { padding: 16px 0 0; }
  .vo-ptiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .vo-layout--list > .vo-layout__main > .vo-sfr { margin-top: 0; }
}

/* 拠点ページ */
.vo-ohero { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 0; }
.vo-ohero__photo { position: relative; }
.vo-ohero__img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); box-sizing: border-box; background: var(--ph); }
.vo-ohero__badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vo-ohero__pr { font-size: 10px; color: var(--sub); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
/* 広告（アフィリエイト）リンクの CTA のそばの「PR」（vo_pr_tag）。横に並ぶ行では中央寄せ、--blk はボタンの上、--bar は固定バーの左 */
.vo-prtag { flex: 0 0 auto; align-self: center; font-size: 10px; line-height: 1.6; color: var(--sub); border: 1px solid var(--line2); border-radius: 4px; padding: 0 6px; background: #FFFFFF; }
.vo-prtag--blk { display: block; width: fit-content; margin: 0 0 4px; }
.vo-prtag--bar { margin: 0 4px 0 12px; }
.vo-ohero__susp { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--amber-text); background: var(--amber-bg); border-radius: 5px; padding: 3px 8px; }
.vo-ohero__h1 { margin: 0; font-size: 19px; font-weight: 900; font-family: var(--font); line-height: 1.5; }
.vo-ohero__brand { font-size: 12.5px; color: var(--sub); font-weight: 700; }
.vo-ohero__brand a { color: var(--link); }
.vo-ohero__score { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vo-ohero__slink { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: 11.5px; font-weight: 700; color: var(--link); white-space: nowrap; }
.vo-ohero__addr { font-size: 12.5px; color: var(--sub); display: flex; align-items: center; gap: 4px; }
.vo-ohero__sts { display: flex; gap: 10px; flex-wrap: wrap; }
.vo-ohero__st { font-size: 12px; color: var(--sub); display: flex; align-items: center; gap: 3px; }
/* この拠点自身の「保存」「比較に追加」（どちらも 44px の高さ。保存済みは赤＋塗りのハート） */
.vo-ohero__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vo-osave, .vo-ohero__acts .vo-cmpchk { box-sizing: border-box; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1.5px solid var(--line2); background: #FFFFFF; color: var(--ink); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.vo-ohero__acts .vo-cmpchk { gap: 8px; }
.vo-osave.is-on { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.vo-osave.is-on svg { fill: currentColor; }
.vo-poi { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; }
.vo-poi__t { font-size: 12.5px; display: block; padding: 8px 0 4px; }
.vo-poi__row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.vo-poi__ic { color: var(--navy); flex-shrink: 0; display: flex; }
.vo-poi__n { flex: 1; font-size: 12.5px; color: var(--ink); min-width: 0; }
.vo-poi__w { font-size: 11.5px; color: var(--sub); white-space: nowrap; }
.vo-loc { display: flex; flex-direction: column; gap: 10px; }
.vo-loc__src { font-size: 10.5px; color: var(--sub); }
.vo-ptabs { display: flex; background: var(--surface); border-radius: 8px; padding: 4px; gap: 4px; }
.vo-ptabs__on, .vo-ptabs__off { flex: 1; min-height: 44px; border-radius: 6px; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; box-sizing: border-box; }
.vo-ptabs__on { background: var(--navy); color: #FFFFFF; }
.vo-ptabs__off { border: 1.5px solid var(--line); background: #FFFFFF; color: var(--link); }
.vo-ptabs small { font-size: 10px; font-weight: 400; }
.vo-ptabs__on small { opacity: .85; }
.vo-ptabs__off small { color: var(--sub); }
.vo-ptabs__note { display: block; margin-top: 6px; font-size: 11px; color: var(--sub); }
.vo-plans { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.vo-unconf { color: var(--sub); }
.vo-otbl__box { display: flex; flex-direction: column; gap: 8px; }
.vo-otbl__wrap { overflow-x: auto; }
.vo-otbl { width: 100%; border-collapse: collapse; background: #FFFFFF; border: 1px solid var(--line); }
.vo-otbl__h { text-align: left; padding: 7px 8px; font-size: 11px; color: var(--sub); font-weight: 700; }
.vo-otbl__h--r { text-align: right; }
.vo-otbl__t { padding: 7px 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--sub); white-space: nowrap; vertical-align: top; }
.vo-otbl__d { padding: 7px 8px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.vo-otbl__note { display: block; font-size: 11px; color: var(--sub); }
.vo-otbl__p { padding: 7px 8px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; vertical-align: top; }
.vo-otbl__src { font-size: 10.5px; color: var(--sub); }
.vo-brc { display: flex; flex-direction: column; gap: 10px; }
.vo-brc__top { display: flex; align-items: center; gap: 10px; }
.vo-brc__logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.vo-brc__tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vo-brc__t { font-size: 13.5px; }
.vo-brc__s { font-size: 11.5px; color: var(--sub); }
.vo-brc__go { min-height: 50px; border-radius: 8px; background: var(--cta-gold); color: #FFFFFF; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: none; text-align: center; padding: 0 8px; }
.vo-feebd { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vo-feebd__t { font-size: 13.5px; }
.vo-nearcell { flex: 0 0 272px; width: 272px; min-width: 0; display: flex; }
/* 横スクロール内のカードは高さを揃える。「詳しく見る」は下端に揃う（.vo-oc__go の margin-top: auto） */
.vo-nearcell .vo-card { width: 100%; min-width: 0; }
.vo-oc--compact .vo-oc__head { flex-wrap: wrap; }
/* 名前は内容の幅（flex-basis: auto）。バッジと同じ行に収まる短い名前は 1 行目に並び、収まらない長い名前だけが 1 行を使って 2 行までで切り、バッジが次の行に落ちる */
.vo-oc--compact .vo-oc__name { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ブランドの代表画像（公式の OGP）に差し替えたときは切り抜かず、1.91:1 の枠の中に全体を収める */
.vo-oc__img.vo-oc__img--brand, .vo-ohero__img.vo-ohero__img--brand, .vo-sbc__img.vo-sbc__img--brand { height: auto; aspect-ratio: 1.91 / 1; object-fit: contain; background: var(--surface); }
.vo-sbc { flex-shrink: 0; width: 160px; display: flex; flex-direction: column; gap: 6px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 10px; color: var(--ink); box-sizing: border-box; }
.vo-sbc__img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; }
.vo-sbc__n { font-size: 12px; line-height: 1.4; }
.vo-sbc__a { font-size: 10.5px; color: var(--sub); }
.vo-subnote { display: block; margin-top: 6px; font-size: 11px; color: var(--sub); }
.vo-endcta { padding-bottom: 0; }
.vo-layout__side .vo-sidebox { position: sticky; top: 16px; }
/* 拠点ページの右サイド: 購入ボックスと補助金を縦に並べる。画面より高いときだけ中でスクロールする（固定は右サイドの外枠に任せる） */
.vo-office-side { display: flex; flex-direction: column; gap: 20px; }
@container vo (min-width: 1024px) {
  .vo-office-side { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .vo-office-side .vo-sidebox { position: static; }
}
@container vo (min-width: 1024px) {
  .vo-ohero { padding: 0; }
  .vo-ohero__img { height: 280px; }
  .vo-ohero__img.vo-ohero__img--brand { height: auto; max-width: 560px; }
  .vo-ohero__h1 { font-size: 22px; }
  .vo-layout--detail > .vo-layout__main > .vo-ohero { margin-top: 0; }
}

/* @@APPEND@@ */