/* mochikomi Biz ヘルプ：記事ページ・一覧ページの共通の見た目
   色の役割（変えない）：ピンク＝主な操作・情報提供者／紺＝リンク・情報取得者／緑＝はじめて・安心
   土台：白い紙面にうすい灰色の面とカード、角丸 8〜14px、影はごく弱く（トップと同じ） */
:root {
  color-scheme: light;
  --bg: #fbfbfe; --paper: #ffffff; --ink: #1d2142; --sub: #5d6283; --line: #e6e8f2; --face: #f4f5fa;
  --sky: #eef3ff;
  --pink: #a43f98; --pink-soft: #fbeaf7; --navy: #1a33c8; --navy-soft: #ecefff;
  --green: #2a8458; --green-soft: #e6f5ec; --gold: #7a5200; --gold-soft: #fff5de;
  --red: #b3261e; --red-soft: #fdecea;
  --f-display: "M PLUS 1p", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --hh: 58px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--hh) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
a { color: var(--navy); }
.in { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ヘッダー（トップと同じ作り） */
.top { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.top .in { display: flex; align-items: center; gap: 18px; min-height: var(--hh); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand img { height: 26px; width: auto; }
.brand span { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--sub); border-left: 1px solid var(--line); padding-left: 10px; white-space: nowrap; }
.top nav { margin-left: auto; display: flex; gap: 4px; font-size: 14px; }
.top nav a { text-decoration: none; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--sub); }
.top nav a:hover { background: var(--sky); color: var(--ink); }
.top nav a.cta { background: var(--pink); color: #fff; font-weight: 700; }

/* 記事の頭 */
.ahead { background: var(--paper); border-bottom: 1px solid var(--line); }
.ahead .in { padding-top: 18px; padding-bottom: 24px; display: grid; gap: 12px; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 13.5px; color: var(--sub); }
.crumb li + li::before { content: "›"; margin-right: 6px; color: #9aa0bd; }
.crumb a { color: var(--sub); text-decoration: none; display: inline-block; padding: 10px 0; }
.crumb a:hover { color: var(--navy); text-decoration: underline; }
.crumb [aria-current] { padding: 10px 0; display: inline-block; }
.ahead h1 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(25px, 3.2vw, 34px); line-height: 1.4; text-wrap: balance; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 14px; color: var(--sub); }
.rtag { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 2px 11px; line-height: 1.6; white-space: nowrap; }
.rtag.s { background: var(--pink-soft); color: var(--pink); }
.rtag.b { background: var(--navy-soft); color: var(--navy); }
.rtag.c { background: var(--face); color: var(--ink); border: 1px solid var(--line); }
.rtag.o { background: var(--green-soft); color: var(--green); }
.can, .answer { margin: 4px 0 0; background: var(--face); border-radius: 12px; padding: 14px 18px; max-width: 760px; }
.can b, .answer b { display: block; font-family: var(--f-display); font-size: 14px; color: var(--sub); margin-bottom: 2px; }
.answer { background: var(--navy-soft); }
.answer p { margin: 0; font-size: 17px; font-weight: 500; }

/* 立場の切り替え */
.switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.switch span { font-size: 13.5px; color: var(--sub); margin-right: 4px; }
.switch button { font: inherit; font-size: 14.5px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.switch button.s[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); }
.switch button.b[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
.rb { border-left: 4px solid var(--line); padding: 2px 0 2px 16px; margin: 18px 0; }
.rb-s { border-left-color: var(--pink); }
.rb-b { border-left-color: var(--navy); }
.rb > .rtag { margin-bottom: 4px; }
body[data-show="provider"] .rb[data-role="buyer"], body[data-show="buyer"] .rb[data-role="provider"] { display: none; }

/* 本文と目次 */
.alayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 28px; padding-bottom: 56px; }
.alayout.has-toc { grid-template-columns: minmax(0, 1fr) 260px; }
.article { max-width: 760px; min-width: 0; }
.article > h2, .article section > h2 { font-family: var(--f-display); font-weight: 800; font-size: 23px; line-height: 1.45; margin: 44px 0 14px; padding-top: 4px; text-wrap: balance; }
.article > h2:first-child, .article > section:first-child > h2 { margin-top: 0; }
.article h3 { font-family: var(--f-display); font-weight: 700; font-size: 18.5px; line-height: 1.5; margin: 26px 0 8px; }
.article p { margin: 0 0 14px; }
.article ul, .article ol { margin: 0 0 14px; padding-left: 1.4em; }
.article li { margin: 4px 0; }
.article strong { font-weight: 700; }
.article mark { background: linear-gradient(transparent 58%, #ffe58a 58%); color: inherit; padding: 0 1px; }
.ext { font-size: .85em; margin-left: 2px; }
.ilink { font: inherit; color: var(--navy); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

.toc { position: relative; }
.toc-in { position: sticky; top: calc(var(--hh) + 20px); max-height: calc(100vh - var(--hh) - 40px); overflow: auto; border-left: 1px solid var(--line); padding: 2px 0 2px 16px; }
.toc b { display: block; font-family: var(--f-display); font-size: 13.5px; color: var(--sub); margin-bottom: 6px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; text-decoration: none; color: var(--sub); font-size: 14px; line-height: 1.5; padding: 7px 10px; border-radius: 8px; position: relative; }
.toc a:hover { background: var(--face); color: var(--ink); }
.toc a[aria-current="true"] { color: var(--pink); font-weight: 700; background: var(--pink-soft); }
.toc a[aria-current="true"]::before { content: ""; position: absolute; left: -17px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--pink); }
.tocbar { display: none; }

/* 手順カード（番号付き） */
.step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 6px 16px; margin: 0 0 14px; }
.step-n { width: 40px; height: 40px; border-radius: 50%; background: var(--pink); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 19px; display: grid; place-items: center; }
.step h3 { margin: 6px 0 8px; }
.step-b { min-width: 0; }

/* 画面写真（押すと拡大）と①②の印 */
.shot { margin: 6px 0 14px; }
.zoom { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--face); cursor: zoom-in; overflow: hidden; }
.zoom img { display: block; width: 100%; height: auto; }
.zoom-hint { position: absolute; right: 8px; bottom: 8px; font-size: 12px; font-weight: 700; background: rgba(29,33,66,.82); color: #fff; border-radius: 999px; padding: 2px 10px; }
.pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--pink); color: #fff; font-style: normal; font-weight: 800; font-size: 15px; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); font-family: var(--f-display); }
.shot figcaption { font-size: 13px; color: var(--sub); margin-top: 6px; }
.marks { list-style: none; padding: 0 !important; display: grid; gap: 6px; margin: 0 0 14px; }
.marks li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.marks i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pink); color: #fff; font-style: normal; font-weight: 800; font-size: 13.5px; display: grid; place-items: center; margin-top: 2px; font-family: var(--f-display); }

/* 注意の色枠：赤＝取り消せない、黄＝条件つき、緑＝安心、青＝補足 */
.box { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; border: 1px solid; }
.box > div > b { display: block; font-family: var(--f-display); font-weight: 800; margin-bottom: 2px; }
.box p:last-child, .box ul:last-child { margin-bottom: 0; }
.box-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; margin-top: 2px; }
.box.red { background: var(--red-soft); border-color: #f2c4c0; } .box.red .box-ic { background: var(--red); } .box.red > div > b { color: var(--red); }
.box.yellow { background: var(--gold-soft); border-color: #f0dca8; } .box.yellow .box-ic { background: #b07a00; } .box.yellow > div > b { color: var(--gold); }
.box.green { background: var(--green-soft); border-color: #bfe3cd; } .box.green .box-ic { background: var(--green); } .box.green > div > b { color: var(--green); }
.box.blue { background: var(--navy-soft); border-color: #cdd5fb; } .box.blue .box-ic { background: var(--navy); } .box.blue > div > b { color: var(--navy); }

/* 表 */
.tbl { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tbl th, .tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { background: var(--face); font-size: 14px; white-space: nowrap; }
.tbl tbody th { font-weight: 700; }
.tbl tr:last-child > * { border-bottom: 0; }
.tbl td.num, .tbl .num { font-variant-numeric: tabular-nums; }

details.more { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin: 0 0 12px; }
details.more > summary { cursor: pointer; padding: 12px 16px; min-height: 48px; font-weight: 700; list-style-position: inside; }
details.more > div { padding: 0 16px 6px; }

/* 動画 */
.vids { margin-bottom: 8px; }
.vcard { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.vthumb { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; background: var(--sky); display: block; width: 100%; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vthumb i { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--navy); font-style: normal; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.vthumb em { position: absolute; left: 8px; bottom: 8px; font-style: normal; font-size: 12px; background: rgba(255,255,255,.94); color: var(--ink); border-radius: 999px; padding: 0 9px; }
.vcard b { display: block; font-family: var(--f-display); font-size: 16.5px; line-height: 1.5; }
.vcard span { display: block; font-size: 13.5px; color: var(--sub); }
.vcard a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; }

/* 動画の再生画面（トップと同じ：最大幅960px・×/Esc/外側で閉じる・閉じたら iframe を消す） */
.vmodal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(20, 22, 44, .62); animation: vfade .18s ease both; }
.vbox { width: min(960px, 100%); background: var(--paper); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: grid; animation: vup .22s ease both; }
.vhead { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--line); }
.vhead b { flex: 1; min-width: 0; font-family: var(--f-display); font-size: 15px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhead a { font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; border: 1px solid #c9cfe6; border-radius: 8px; padding: 0 10px; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
.vclose { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sky); color: var(--ink); font-size: 22px; cursor: pointer; display: grid; place-items: center; }
.vclose:hover, .vclose:focus-visible { background: var(--ink); color: #fff; }
.vframe { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 130px); background: #0f1022; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vnote { font-size: 12.5px; color: var(--sub); padding: 8px 18px 10px; margin: 0; }
body.vopen .cw-launch, body.vopen .cw-panel, body.lbopen .cw-launch, body.lbopen .cw-panel { display: none !important; }
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vup { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* 画面写真の全画面表示 */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(15, 16, 34, .9); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: vfade .18s ease both; }
.lb-bar { display: flex; justify-content: flex-end; padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 0 8px; }
.lb-close { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 26px; cursor: pointer; display: grid; place-items: center; }
.lb-stage { overflow: auto; display: grid; place-items: center; padding: 8px 12px; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 6px; }
.lb-cap { color: #e9ebf7; font-size: 14px; text-align: center; padding: 6px 16px max(14px, env(safe-area-inset-bottom, 0px)); margin: 0; }

/* カード（次にやること・関連記事） */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.cards.one { grid-template-columns: minmax(0, 1fr); }
.card { position: relative; display: grid; gap: 2px; align-content: start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 44px 14px 16px; text-decoration: none; color: var(--ink); min-height: 64px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(40,60,160,.09); border-color: #cfd5ef; }
.card b { font-family: var(--f-display); font-size: 16px; line-height: 1.45; color: var(--navy); }
.card span:not(.rtag):not(.ext) { font-size: 13.5px; color: var(--sub); line-height: 1.6; }
.card .rtag, .card .ext { justify-self: start; margin-bottom: 4px; }
.card .ext { font-size: 12px; font-weight: 700; color: var(--sub); }
.card em { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--navy); font-weight: 700; }
.next .card { border-left: 4px solid var(--pink); }
.related { margin-top: 28px; }

/* 役に立ちましたか */
.fb { margin-top: 36px; background: var(--face); border-radius: 14px; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.fb .fb-h { margin: 0 !important; font-size: 17px !important; padding: 0 !important; }
.fb-btns { display: flex; gap: 8px; }
.fb-btns button { font: inherit; font-weight: 700; min-height: 44px; min-width: 88px; border-radius: 999px; border: 1.5px solid #cfd5ef; background: var(--paper); color: var(--ink); cursor: pointer; }
.fb-btns button:hover { border-color: var(--navy); color: var(--navy); }
.fb-done { margin: 0; flex-basis: 100%; font-weight: 700; color: var(--green); }
.fb-done small { font-weight: 400; color: var(--sub); }
.srcnote { font-size: 12.5px; color: var(--sub); margin-top: 18px; }

/* お金の流れ（共通部品） */
.mflow { margin: 8px 0 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 8px; }
.mflow figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 4px; }
.mflow figcaption b { font-family: var(--f-display); font-size: 18px; }
.mflow figcaption span { font-size: 13.5px; color: var(--sub); }
.mf-map { display: block; width: 100%; max-width: 600px; height: auto; margin: 4px auto 10px; color: var(--sub); font-family: var(--f-display); }
.mf-map rect { stroke-width: 2; }
.mf-map .n-o { fill: var(--face); stroke: #c9cde0; }
.mf-map .n-b { fill: var(--navy-soft); stroke: var(--navy); }
.mf-map .n-s { fill: var(--pink-soft); stroke: var(--pink); }
.mf-nodes text { text-anchor: middle; font-size: 19px; font-weight: 800; fill: var(--ink); }
.mf-arrows path { fill: none; stroke: currentColor; stroke-width: 3; }
.mf-arrows .a-usage { color: var(--navy); } .mf-arrows .a-incentive { color: var(--pink); } .mf-arrows .a-reward { color: var(--green); }
.mf-labels text { font-size: 15px; font-weight: 700; text-anchor: middle; }
.mf-labels .l-usage { fill: var(--navy); } .mf-labels .l-incentive { fill: var(--pink); } .mf-labels .l-reward { fill: var(--green); }
.mf-list { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mf { margin: 0 !important; border: 1px solid var(--line); border-top: 4px solid; border-radius: 12px; padding: 12px 14px; background: var(--paper); }
.mf-usage { border-top-color: var(--navy); } .mf-incentive { border-top-color: var(--pink); } .mf-reward { border-top-color: var(--green); }
.mf.on { box-shadow: 0 0 0 3px var(--gold-soft), 0 10px 22px rgba(40,60,160,.1); }
.mf-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mf-h b { font-family: var(--f-display); font-size: 17px; }
.mf-n { font-weight: 800; color: var(--sub); }
.mf dl { margin: 0; display: grid; gap: 6px; }
.mf dl div { display: grid; gap: 0; }
.mf dt { font-size: 12.5px; font-weight: 700; color: var(--sub); }
.mf dd { margin: 0; font-size: 14.5px; line-height: 1.65; }
.mf-note { font-size: 13px !important; color: var(--sub); margin: 8px 0 0 !important; border-top: 1px dashed var(--line); padding-top: 6px; }

/* 区市町村名でランクを探す */
.rank { background: var(--navy-soft); border: 1px solid #cdd5fb; border-radius: 16px; padding: 18px; margin: 0 0 22px; }
.rank label { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; margin-bottom: 8px; }
.rank label b { font-family: var(--f-display); font-size: 18px; }
.rank label span { font-size: 13.5px; color: var(--sub); }
.rank input { width: 100%; font: inherit; font-size: 17px; min-height: 52px; padding: 0 16px; border: 2px solid #b9c3f3; border-radius: 12px; background: var(--paper); color: var(--ink); }
.rank input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,51,200,.15); }
.rank-help { font-size: 13px; color: var(--sub); margin: 6px 0 0 !important; }
.rank-list { list-style: none; padding: 0 !important; margin: 10px 0 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.rank-list li { margin: 0; }
.rank-list button { font: inherit; font-size: 15px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #b9c3f3; background: var(--paper); color: var(--ink); cursor: pointer; }
.rank-list button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.rank-list small { color: inherit; opacity: .75; margin-left: 4px; }
.rank-result { margin-top: 14px; background: var(--paper); border-radius: 12px; border: 1px solid var(--line); padding: 16px; }
.rank-result .rr-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.rank-result .rr-rank { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1; color: #fff; background: var(--navy); border-radius: 12px; padding: 10px 14px; }
.rank-result .rr-city { font-family: var(--f-display); font-size: 19px; font-weight: 800; }
.rank-result .rr-city small { display: block; font-family: var(--f-body); font-size: 13px; font-weight: 400; color: var(--sub); }
.rank-result table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rank-result th, .rank-result td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.rank-result td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-result td small { display: block; color: var(--sub); font-size: 12.5px; }
.rank-result .rr-note { font-size: 13px; color: var(--sub); margin: 10px 0 0 !important; }
.rank-empty { margin: 10px 0 0 !important; font-size: 14.5px; }

/* 規約・ポリシー（条ごとの開閉） */
.legal-lead { background: var(--face); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.legal-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.legal-tools button { font: inherit; font-size: 14px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #cfd5ef; background: var(--paper); color: var(--ink); cursor: pointer; }
details.art { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin-bottom: 8px; }
details.art > summary { cursor: pointer; min-height: 52px; padding: 13px 16px; font-family: var(--f-display); font-weight: 700; font-size: 16.5px; list-style: none; display: flex; align-items: center; gap: 10px; }
details.art > summary::-webkit-details-marker { display: none; }
details.art > summary::after { content: "＋"; margin-left: auto; color: var(--sub); font-weight: 400; }
details.art[open] > summary::after { content: "－"; }
details.art[open] > summary { border-bottom: 1px solid var(--line); }
.art-b { padding: 12px 18px 4px; font-size: 15.5px; }
.art-b ol, .art-b ul { padding-left: 1.5em; }

/* 一覧ページ */
.lhead .lead { margin: 0; color: var(--sub); max-width: 760px; }
.lhead.s { border-top: 4px solid var(--pink); } .lhead.b { border-top: 4px solid var(--navy); } .lhead.o { border-top: 4px solid var(--green); }
.lmain { padding-top: 28px; padding-bottom: 56px; display: grid; gap: 34px; }
.lgroup h2 { font-family: var(--f-display); font-weight: 800; font-size: 21px; margin: 0 0 12px; }
.lcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lcard { position: relative; display: flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 44px 14px 16px; text-decoration: none; color: var(--ink); min-height: 72px; transition: transform .18s ease, box-shadow .18s ease; }
.lcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(40,60,160,.09); }
.lcard > div { display: grid; gap: 2px; min-width: 0; }
.lcard b { font-family: var(--f-display); font-size: 16.5px; line-height: 1.45; color: var(--navy); }
.lcard span:not(.rtag) { font-size: 13.5px; color: var(--sub); line-height: 1.6; }
.lcard .rtag { justify-self: start; }
.lcard .ext { font-size: 12px; font-weight: 700; }
.lcard img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex: none; }
.lcard em { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--navy); font-weight: 700; }
/* 一覧：記事と動画を1枚にまとめたカード（2026-11-06）。サムネイルを大きく、ボタンは下にそろえる */
.lgh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 12px; }
.lgh h2 { margin: 0; }
.lstep { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 16px; margin-right: 10px; vertical-align: 2px; }
.lmore { font-size: 14px; font-weight: 700; text-decoration: none; }
.lmore:hover { text-decoration: underline; }
.tcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tcards + .lcards { margin-top: 12px; }
.tcard { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 16px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.tthumb { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--face); }
.tthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.tthumb:hover img { transform: scale(1.04); }
.tplay { position: absolute; left: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgba(29,33,66,.82); }
.tplay::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.tthumb:hover .tplay { background: var(--pink); }
.tlen { position: absolute; right: 8px; bottom: 8px; background: rgba(29,33,66,.82); color: #fff; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 7px; line-height: 1.6; }
.tbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; height: 100%; }
.tbody .rtag { align-self: flex-start; margin-bottom: 2px; }
.tbody b { font-family: var(--f-display); font-size: 17px; line-height: 1.45; }
.tbody b a { color: var(--navy); text-decoration: none; }
.tbody b a:hover { text-decoration: underline; }
.tdesc { font-size: 13.5px; color: var(--sub); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.tbtn { flex: 1 1 120px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--navy); color: var(--navy); background: var(--paper); font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.3; }
.tbtn:hover { background: var(--navy-soft); }
.tbtn.play { background: var(--pink); border-color: var(--pink); color: #fff; }
.tbtn.play::before { content: ""; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff; }
.tbtn.play:hover { background: #8e3583; border-color: #8e3583; }
/* 一覧：並べ方の切り替え（流れの順／いまの状況から）と、ほかの立場への入口 */
.lviews { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; margin-top: 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); padding: 4px; gap: 4px; }
.lviews a, .lviews span { font-size: 14.5px; font-weight: 700; border-radius: 999px; padding: 6px 18px; text-decoration: none; line-height: 1.5; }
.lviews a { color: var(--navy); }
.lviews a:hover { background: var(--navy-soft); }
.lviews span { background: var(--ink); color: #fff; }
.lother { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 16px 18px; background: var(--face); border-radius: 14px; font-size: 14.5px; }
.lother a { font-weight: 700; margin-left: 6px; white-space: nowrap; }
/* 一覧：題名だけの短い行（いまの状況から探す） */
.lrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; }
.lrow { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; min-height: 48px; }
.lrow b { font-size: 15.5px; line-height: 1.5; color: var(--navy); }
.lrow:hover b { text-decoration: underline; }
.lrow i { font-style: normal; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 0 8px; white-space: nowrap; margin-left: auto; line-height: 1.7; }
.lrow i.v { color: var(--pink); border: 1px solid var(--pink); }
.lrow i.q { color: var(--sub); border: 1px solid var(--line); font-weight: 500; }
@media (max-width: 900px) { .tcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .tcard { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lrows { grid-template-columns: minmax(0, 1fr); }
  .lviews a, .lviews span { padding: 6px 14px; font-size: 14px; }
}
.lfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -12px; }

/* フッター */
.foot { background: var(--paper); border-top: 1px solid var(--line); }
.foot .in { padding-top: 22px; padding-bottom: 28px; display: grid; gap: 10px; font-size: 14px; color: var(--sub); }
.foot-help { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.foot-help b { color: var(--ink); }
.foot-help a, .foot nav a { min-height: 44px; display: inline-flex; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot nav a { color: var(--sub); }

/* パソコン以外：目次は上部の細い帯にまとめる */
@media (max-width: 960px) {
  .alayout.has-toc { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .top { position: static; }
  html { scroll-padding-top: 60px; }
  .tocbar { display: block; position: sticky; top: 0; z-index: 25; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); box-shadow: 0 4px 12px rgba(29,33,66,.06); }
  .tocbar-btn { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); border: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--ink); cursor: pointer; text-align: left; }
  .tocbar-btn::before { content: "今の章"; flex: none; font-size: 12px; font-weight: 700; color: var(--pink); background: var(--pink-soft); border-radius: 999px; padding: 1px 9px; }
  .tocbar-now { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tocbar-ic { flex: none; transition: transform .18s ease; }
  .tocbar-btn[aria-expanded="true"] .tocbar-ic { transform: rotate(180deg); }
  .tocbar-list { list-style: none; margin: 0; padding: 4px 8px 10px; max-height: 60vh; overflow: auto; border-top: 1px solid var(--line); }
  .tocbar-list a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 15px; line-height: 1.45; }
  .tocbar-list a[aria-current="true"] { background: var(--pink-soft); color: var(--pink); font-weight: 700; }
  .mf-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .top nav a:not(.cta) { display: none; }
  .brand img { height: 20px; }
  .brand span { font-size: 12.5px; padding-left: 8px; }
  .ahead .in { padding-top: 6px; }
  .cards, .lcards { grid-template-columns: minmax(0, 1fr); }
  .vcard { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 4px; gap: 6px; }
  .step-n { width: 36px; height: 36px; font-size: 17px; }
  .lcard img { width: 88px; }
  .tbl table { font-size: 14px; }
  .tbl th, .tbl td { padding: 9px 10px; }
  .mflow { padding: 14px 12px 6px; }
  .mf-labels text { font-size: 23px; }
  .mf-nodes text { font-size: 25px; }
  .pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12.5px; }
  .vmodal { padding: 0 0 env(safe-area-inset-bottom, 0px); }
  .vbox { width: 100%; border-radius: 14px 14px 0 0; align-self: end; }
  .vframe { max-height: none; }
}
.lb { background: rgba(15, 16, 34, .95); }
.rank-result tbody th { white-space: nowrap; font-size: 14px; }
@media (max-width: 400px) { .rank-result th, .rank-result td { padding: 8px 6px; } .rank-result tbody th { font-size: 13px; } }
.top nav a { white-space: nowrap; }
@media (max-width: 640px) { .crumb li:last-child { display: none; } .crumb li:nth-last-child(2)::after { content: ""; } }
/* スマホ幅でも「ヘルプセンター」は出したまま、ロゴを小さくして収める（2026-11-06 高村さん指示。トップ＝compose_site.py も同じ） */
@media (max-width: 440px) {
  .brand { gap: 6px; }
  .brand img { height: 15px; }
  .brand span { font-size: 12px; padding-left: 6px; }
  .login-menu summary { padding: 0 12px; }
}
@media (max-width: 345px) { .brand span { display: none; } }

/* ===== 料金・契約書の部品（2026-10-17 作り直し） ===== */
/* ランクの色：A（濃い紺）→ F（淡い紺） */
.rk { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-family: var(--f-display); font-weight: 800; font-size: 17px; flex: none; }
.rk-A { background: var(--navy); color: #fff; } .rk-B { background: color-mix(in srgb, var(--navy) 80%, #fff); color: #fff; }
.rk-C { background: color-mix(in srgb, var(--navy) 60%, #fff); color: #fff; } .rk-D { background: color-mix(in srgb, var(--navy) 40%, #fff); color: var(--ink); }
.rk-E { background: color-mix(in srgb, var(--navy) 24%, #fff); color: var(--ink); } .rk-F { background: color-mix(in srgb, var(--navy) 12%, #fff); color: var(--ink); }

/* 選ぶボタン（中身はラジオボタン） */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #c4cbec; background: var(--paper); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.seg label:hover span { border-color: var(--navy); color: var(--navy); }
.seg input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid rgba(26,51,200,.35); outline-offset: 2px; }
.seg-rank span { width: 48px; padding: 0; font-family: var(--f-display); font-size: 17px; }

/* 料金シミュレーター */
.calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 1px solid #cdd5fb; border-radius: 18px; overflow: hidden; background: var(--paper); margin: 0 0 20px; }
.calc-in { padding: 18px 20px; display: grid; gap: 14px; background: var(--navy-soft); }
.calc-f { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-family: var(--f-display); font-weight: 800; font-size: 16px; margin-bottom: 8px; padding: 0; }
.calc-l i { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; align-self: center; }
.calc-l small { font-family: var(--f-body); font-weight: 400; font-size: 12.5px; color: var(--sub); flex-basis: 100%; padding-left: 32px; }
.calc input[type="search"] { width: 100%; font: inherit; font-size: 16.5px; min-height: 50px; padding: 0 16px; border: 2px solid #b9c3f3; border-radius: 12px; background: var(--paper); color: var(--ink); }
.calc input[type="search"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,51,200,.15); }
.calc .rank-list { margin-top: 8px !important; }
.calc-out { padding: 22px 22px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-left: 1px solid #cdd5fb; }
.calc-cap { font-size: 13.5px; font-weight: 700; color: var(--sub); }
.calc-yen { margin: 0 !important; display: flex; align-items: baseline; gap: 8px; }
.calc-yen b { font-family: var(--f-display); font-weight: 800; font-size: clamp(38px, 5vw, 52px); line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.calc-yen span { font-size: 14px; font-weight: 700; color: var(--sub); }
.calc-tax { margin: 0 !important; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-why { margin: 8px 0 0 !important; font-size: 13.5px; color: var(--sub); line-height: 1.6; }
.calc-why b { color: var(--ink); }
.calc-scale { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 0 !important; margin: 12px 0 0 !important; }
.calc-scale li { margin: 0; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: 13px; padding: 5px 0; border-radius: 6px; background: var(--face); color: #9aa0bf; transition: background .2s ease, color .2s ease, transform .2s ease; }
.calc-scale li.on { background: var(--navy); color: #fff; transform: translateY(-2px); }
.calc-note { margin: 12px 0 0 !important; font-size: 12.5px; color: var(--sub); border-top: 1px dashed var(--line); padding-top: 8px; }
.calc-out.bump .calc-yen b { animation: bump .28s ease; }
@keyframes bump { 40% { transform: scale(1.04); } }

/* 料金表（買取／仲介の切り替え） */
.pt { margin: 0 0 20px; }
.pt-sw { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--face); border: 1px solid var(--line); margin-bottom: 10px; }
.pt-sw button { font: inherit; font-size: 15px; font-weight: 700; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: var(--sub); cursor: pointer; }
.pt-sw button[aria-pressed="true"] { background: var(--paper); color: var(--navy); box-shadow: 0 2px 8px rgba(29,33,66,.12); }
.pt-sw button small { font-size: 12px; font-weight: 500; margin-left: 2px; }
.pt-cap { font-size: 13.5px; color: var(--sub); margin: 0 0 8px !important; }
.pt .cap-broker, .pt .v-broker { display: none; }
.pt[data-mode="broker"] .cap-buy, .pt[data-mode="broker"] .v-buy { display: none; }
.pt[data-mode="broker"] .cap-broker { display: inline; } .pt[data-mode="broker"] .v-broker { display: block; }
.pt-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
.pt table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pt th, .pt td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.pt thead th { background: var(--face); font-size: 13.5px; }
.pt tbody tr:last-child > * { border-bottom: 0; }
.pt tbody th { font-weight: 400; }
.rk-cell { display: flex; align-items: center; gap: 10px; }
.rk-cell small { font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.pt td { width: 19%; }
.pt .v b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.pt .v i { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--face); overflow: hidden; }
.pt .v i::before { content: ""; display: block; height: 100%; width: var(--w); border-radius: 3px; background: color-mix(in srgb, var(--navy) 55%, #fff); transition: width .3s ease; }
.pt tr.on > * { background: var(--gold-soft); }
.pt tr.on .rk { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--gold); }

/* エリアランク一覧（都県タブ × ランクの札） */
.rm { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); padding: 14px 16px 6px; margin: 0 0 16px; }
.rm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rm-tabs button { font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #c4cbec; background: var(--paper); color: var(--ink); cursor: pointer; }
.rm-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rm.js .rm-h { display: none; }
.rm-h { font-size: 16px !important; margin: 12px 0 4px !important; }
.rm-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.rm-h + .rm-row { border-top: 0; }
.rm-row ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 !important; margin: 3px 0 0 !important; }
.rm-row li { margin: 0; font-size: 14px; line-height: 1.4; padding: 4px 10px; border-radius: 999px; background: var(--face); }

/* 業務委託契約：診断 */
.ag { border: 1px solid #f0cce8; border-radius: 18px; background: var(--paper); overflow: hidden; margin: 0 0 20px; }
.ag-q { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px 20px; background: var(--pink-soft); }
.ag-q fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ag-q legend { display: flex; gap: 8px; align-items: center; font-family: var(--f-display); font-weight: 800; font-size: 16px; margin-bottom: 8px; padding: 0; }
.ag-q legend i { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 13px; flex: none; }
.ag .seg label:hover span { border-color: var(--pink); color: var(--pink); }
.ag .seg input:checked + span { background: var(--pink); border-color: var(--pink); color: #fff; }
.ag-wait { margin: 0 !important; padding: 18px 20px; color: var(--sub); font-size: 14.5px; }
.ag-res { padding: 18px 20px 20px; animation: vup .22s ease both; }
.ag-res > header { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.ag-no { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--pink); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 28px; }
.ag-res header > div > b { display: block; font-family: var(--f-display); font-size: 19px; line-height: 1.4; }
.ag-res header > div > span { font-size: 13.5px; color: var(--sub); }
.ag-forms { display: grid; gap: 14px; }
.ag-res.two .ag-forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-form { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; min-width: 0; }
.ag-when { margin: 0 0 4px !important; font-weight: 800; font-family: var(--f-display); color: var(--pink); }
.ag-map { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; font-family: var(--f-display); }
.ag-node rect { stroke-width: 2; }
.ag-node.n-o rect { fill: var(--face); stroke: #c3c8de; } .ag-node.n-b rect { fill: var(--navy-soft); stroke: var(--navy); } .ag-node.n-s rect { fill: var(--pink-soft); stroke: var(--pink); }
.ag-node text { text-anchor: middle; fill: var(--ink); } .ag-node .t1 { font-size: 20px; font-weight: 800; } .ag-node .t2 { font-size: 14px; font-weight: 700; fill: var(--sub); }
.ag-ln { stroke: #b6bcd8; stroke-width: 2.5; stroke-dasharray: 6 6; } .ag-ln.main { stroke: var(--navy); stroke-width: 3.5; stroke-dasharray: none; }
.ag-lb { text-anchor: middle; font-size: 15px; font-weight: 700; fill: var(--sub); paint-order: stroke; stroke: #fff; stroke-width: 6px; } .ag-lb.main { fill: var(--navy); font-size: 16px; }
.ag-money { fill: none; stroke: var(--green); stroke-width: 3.5; }
.ag-mlb { text-anchor: middle; font-size: 15.5px; font-weight: 800; fill: var(--green); paint-order: stroke; stroke: #fff; stroke-width: 6px; }
.ag-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; background: var(--green-soft); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.ag-rate span { font-size: 13px; font-weight: 700; color: var(--green); }
.ag-rate b { font-family: var(--f-display); font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ag-rate small { font-size: 12.5px; color: var(--sub); flex-basis: 100%; }
.ag-how { font-size: 14.5px; margin: 0 !important; line-height: 1.75; }

/* 図が小さく表示されるとき（2つ並び・スマホ）は、図の中の文字を大きくする */
.ag-res.two .ag-node .t1 { font-size: 25px; } .ag-res.two .ag-node .t2 { font-size: 18px; }
.ag-res.two .ag-lb, .ag-res.two .ag-lb.main, .ag-res.two .ag-mlb { font-size: 19px; }
@media (max-width: 640px) {
  .ag-node .t1 { font-size: 25px !important; } .ag-node .t2 { font-size: 18px !important; }
  .ag-lb, .ag-lb.main, .ag-mlb { font-size: 19px !important; }
}

/* ダウンロードのボタン・一覧 */
.ag-dl, .tpl { display: flex; align-items: center; gap: 12px; text-decoration: none; border-radius: 14px; min-height: 64px; padding: 10px 16px; }
.ag-dl { margin-top: 14px; background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(26,51,200,.22); transition: transform .15s ease, box-shadow .15s ease; }
.ag-dl:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26,51,200,.28); }
.doc { flex: none; display: grid; place-items: center; width: 38px; height: 46px; border-radius: 6px 12px 6px 6px; background: #fff; color: #2b5797; font-family: var(--f-display); font-weight: 800; font-size: 19px; box-shadow: inset 0 0 0 2px #2b5797; }
.doc-b { display: grid; min-width: 0; flex: 1; }
.doc-b b { font-family: var(--f-display); font-size: 16px; line-height: 1.4; }
.doc-b small { font-size: 12px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-dl em, .tpl em { font-style: normal; font-weight: 800; font-size: 20px; }
.tpls { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 !important; margin: 0 0 18px !important; }
.tpls li { margin: 0; }
.tpl { background: var(--paper); border: 1px solid var(--line); color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.tpl:hover { border-color: var(--navy); transform: translateY(-2px); }
.tpl em { color: var(--navy); }
.tpl small { color: var(--sub); opacity: 1; }

/* 早見表（宅建免許 × 取引タイプ） */
.agg { display: grid; gap: 8px; margin: 0 0 8px; }
.agg-r { display: grid; grid-template-columns: 112px repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.agg-top { align-items: end; }
.agg-l { display: flex; align-items: center; font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.4; }
.agg-h { text-align: center; font-family: var(--f-display); font-weight: 800; font-size: 15px; padding: 6px 0; border-radius: 8px; background: var(--face); }
.agg-c { font: inherit; text-align: left; display: grid; align-content: start; gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 10px 12px; cursor: pointer; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; min-height: 92px; }
.agg-c:hover, .agg-c.on { border-color: var(--pink); box-shadow: 0 8px 20px rgba(164,63,152,.12); transform: translateY(-2px); }
.agg-c.on { background: var(--pink-soft); }
.agg-no { font-family: var(--f-display); font-weight: 800; font-size: 20px; color: var(--pink); line-height: 1; }
.agg-c p { margin: 0 !important; display: grid; }
.agg-c p span { font-size: 12px; color: var(--sub); font-weight: 700; }
.agg-c p b { font-size: 14.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.agg-note { font-size: 13px; color: var(--sub); margin: 0 0 18px !important; }

@media (max-width: 960px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-out { border-left: 0; border-top: 1px solid #cdd5fb; }
  .ag-res.two .ag-forms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .calc-in, .calc-out, .ag-q, .ag-res, .ag-wait { padding-left: 14px; padding-right: 14px; }
  .ag-q { grid-template-columns: minmax(0, 1fr); }
  .seg span { padding: 0 13px; font-size: 14.5px; }
  .seg-rank { display: grid; grid-template-columns: repeat(6, 1fr); }
  .seg-rank span { width: 100%; }
  .pt th, .pt td { padding: 9px 8px; }
  .pt table { font-size: 14px; }
  .pt tbody th small { display: none; }
  .pt .v b { font-size: 14.5px; }
  .pt thead th { font-size: 12px; }
  .pt-sw button { padding: 0 14px; font-size: 14px; }
  .tpls { grid-template-columns: minmax(0, 1fr); }
  .agg-r { grid-template-columns: 58px repeat(3, minmax(0, 1fr)); gap: 6px; }
  .agg-l { font-size: 12.5px; }
  .agg-h { font-size: 13px; }
  .agg-c { padding: 8px; min-height: 84px; }
  .agg-c p b { font-size: 12.5px; }
  .agg-no { font-size: 17px; }
}

/* ===== 問い合わせの入口・申請フォーム（2026-10-17） ===== */
.chub { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 !important; margin: 0 0 10px !important; }
.ch { margin: 0 !important; display: grid; align-content: start; gap: 6px; border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: 14px; background: var(--paper); padding: 14px 16px 16px; }
.ch-ai { border-top-color: var(--pink); } .ch-tel { border-top-color: var(--green); }
.ch b { font-family: var(--f-display); font-size: 16.5px; line-height: 1.45; }
.ch span { font-size: 14px; color: var(--sub); line-height: 1.65; }
.ch-btn { justify-self: start; margin-top: 4px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--navy); color: #fff !important; font: inherit; font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.ch-ai .ch-btn { background: var(--pink); } .ch-tel .ch-btn { background: var(--green); }
.ch-sub { font-size: 13.5px; color: var(--sub); margin: 0 0 18px !important; }
.mform { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); padding: 18px 20px; margin: 0 0 18px; display: grid; gap: 14px; }
.mf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.mf-f { display: grid; gap: 6px; margin: 0; }
.mf-f > span { font-weight: 700; font-size: 14.5px; display: flex; gap: 8px; align-items: center; }
.mf-f em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--red); border-radius: 4px; padding: 0 6px; }
.mf-f small { font-size: 11.5px; font-weight: 700; color: var(--sub); }
.mf-f input, .mf-f select, .mf-f textarea { font: inherit; font-size: 16px; min-height: 48px; padding: 8px 12px; border: 1.5px solid #c4cbec; border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.mf-f textarea { min-height: 120px; resize: vertical; }
.mf-f input:focus, .mf-f select:focus, .mf-f textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,51,200,.15); }
.mf-f.ng input, .mf-f.ng select, .mf-f.ng textarea { border-color: var(--red); background: var(--red-soft); }
.mf-f.ng > span::after { content: attr(data-msg); font-size: 12px; color: var(--red); }
.mf-note { font-size: 12.5px !important; font-weight: 400 !important; color: var(--sub); }
.mf-send { justify-self: start; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; }
.mf-tip { font-size: 13px; color: var(--sub); margin: 0 !important; }
.mf-done { background: var(--green-soft); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.7; }
.mf-done button { font: inherit; font-size: 13.5px; font-weight: 700; min-height: 40px; padding: 0 14px; margin-top: 8px; border-radius: 999px; border: 1.5px solid #bfe3cd; background: #fff; color: var(--green); cursor: pointer; }
@media (max-width: 760px) { .chub, .mf-grid { grid-template-columns: minmax(0, 1fr); } .mform { padding: 14px; } }

/* 2026-10-17 立場別の監査で追加 */
.pt .v b { white-space: nowrap; }
.srcnote { display: none; }
.ag-dl.hold, .tpl.hold { background: var(--face); color: var(--sub); box-shadow: none; border: 1px dashed #c4cbec; cursor: default; }
.ag-dl.hold .doc, .tpl.hold .doc { opacity: .45; }
.ag-dl.hold small, .tpl.hold small { white-space: normal; }
@media (max-width: 640px) { main#main { padding-bottom: 120px; } }