/* =====================================================================
   Visual Direction F v1 — three acquisition flows (large renovation / single-work widening / damage repair) + B2B; built on the E v1 system.
   Standalone visual prototype. NOT a WordPress theme / plugin.
   Design intent: a reader should be able to SEE where to go (illustrated theme cards), READ the
   answer fast (big figures, diagrams with HTML text), and know where to PRESS (one coral action).
   Surfaces carry the hierarchy: sand = orientation, white = content, teal-soft = help, coral = act.
   TEMPORARY VISUAL PALETTE — brand values are not final.
   ===================================================================== */
/* tokens: see theme.json + assets/css/tokens.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: var(--fs); line-height: var(--lh); color: var(--ink); background: var(--bg); line-break: strict; word-break: normal; overflow-wrap: anywhere; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-heading); font-weight: var(--fw-heading); letter-spacing: .01em; overflow-wrap: anywhere; text-wrap: balance; }
p { margin: 0 0 1.2em; text-wrap: pretty; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin: .25em 0; }
dl { margin: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; overflow-wrap: anywhere; }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus, .skip-link:focus-visible { position: fixed !important; top: 12px; left: 12px; z-index: 200; width: auto; height: auto; min-height: 48px; min-width: 220px; clip: auto; clip-path: none; overflow: visible; white-space: normal; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; background: var(--bg); color: var(--teal); font-weight: 700; border: 3px solid var(--teal); border-radius: var(--radius-s); box-shadow: var(--shadow-up); }
#main:focus { outline: none; }
[hidden] { display: none !important; }
.num, .nb, .keep-unit { white-space: nowrap; }
.wrap { max-width: var(--site); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: var(--narrow); margin: 0 auto; }
.eyebrow { display: inline-block; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .06em; color: var(--teal); margin-bottom: 8px; }
.small { font-size: var(--fs-s); color: var(--ink-2); }
.meta { font-size: var(--fs-meta); color: var(--ink-3); }
.lead { font-size: var(--fs-lead); color: var(--ink-2); }
.ic { width: 24px; height: 24px; flex: none; }

/* ---------- buttons: only actions look like buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--rm-btn-h); padding: 0 22px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; text-align: center; line-height: 1.3; }
.btn > span { min-width: 0; }
.btn-consult { background: var(--coral); color: #fff; box-shadow: 0 6px 16px rgba(184,70,31,.25); }
.btn-consult:hover { background: var(--coral-dark); }
.btn-ai { background: var(--teal); color: #fff; }
.btn-ai:hover { background: var(--teal-dark); }
.btn-outline { background: var(--bg); color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal-soft); }
.btn-warn { background: var(--bg); color: var(--warn); border-color: var(--warn); }
.btn-warn:hover { background: var(--warn-soft); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-sm { min-height: var(--rm-btn-h-sm); padding: 0 16px; font-size: var(--fs-s); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn .ic { width: 20px; height: 20px; }

/* ---------- header ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--rm-header-h); }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); min-height: 44px; justify-content: center; }
.brand-name { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.brand-by { font-size: 12px; color: var(--ink-3); }
.nav-desktop { display: none; }
.nav-desktop ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav-desktop a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 700; font-size: var(--fs-s); color: var(--ink); text-decoration: none; border-radius: 999px; }
.nav-desktop a:hover, .nav-desktop a[aria-current] { background: var(--sand); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: var(--fs-s); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-bars { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(92vw, 380px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-up); padding: 8px; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; font-weight: 700; color: var(--ink); text-decoration: none; border-radius: var(--radius-s); }
.menu-list a:hover { background: var(--sand); }
.menu-foot { display: grid; gap: 8px; padding: 12px 8px 8px; border-top: 1px solid var(--line); margin-top: 8px; }
@media (min-width: 900px) { .nav-desktop { display: block; } .menu { display: none; } }

/* ---------- sections ---------- */
.section { padding: var(--rm-section-pad) 0; }
.band-sand { background: var(--sand); }
.band-teal { background: var(--teal-soft); }
.sec-head { max-width: 720px; margin-bottom: var(--s5); }
.sec-head h2 { font-size: var(--fs-h2); margin-bottom: 8px; }
.sec-head p { margin: 0; color: var(--ink-2); }
.sec-foot { margin-top: var(--s5); }
@media (max-width: 599px) { .section { padding: var(--rm-section-pad-sp) 0; } .sec-head h2 { font-size: calc(var(--fs-h2) - 2px); } }

/* ---------- hero (TOP) ---------- */
.hero { background: var(--sand); padding: var(--s6) 0 var(--s7); }
.hero-grid { display: grid; gap: var(--s5); align-items: center; }
.hero h1 { font-size: 30px; line-height: 1.3; margin: 4px 0 14px; }
.hero .lead { margin-bottom: var(--s5); }
.hero-ill { max-width: 360px; margin: 0 auto; }
.hero-ill svg { width: 100%; height: auto; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } .hero h1 { font-size: 38px; } .hero-ill { max-width: 460px; } }
@media (max-width: 359px) { .hero h1 { font-size: 26px; } }
.shortcuts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.shortcuts a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 10px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px; font-weight: 700; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(34,40,43,.05); }
.shortcuts a:hover { border-color: var(--teal); }
.shortcuts a.trouble { border-color: var(--warn); color: var(--warn); }
.shortcuts .ic { width: 28px; height: 28px; }

/* ---------- theme cards (illustration + concrete title + arrow) ---------- */
.theme-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rm-card-gap); }
@media (min-width: 560px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.theme { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 16px 18px 16px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; min-height: 112px; transition: transform .15s ease, box-shadow .15s ease; }
.theme:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.theme .ill { width: 76px; height: 76px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; }
.theme .ill svg { width: 56px; height: 56px; }
.theme h3 { font-size: 18px; line-height: 1.35; margin: 0 0 4px; padding-right: 28px; }
.theme .know { font-size: var(--fs-s); color: var(--ink-2); margin: 0; }
.theme .go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; color: var(--teal); }
.tag-soon { display: inline-block; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--sand-2); border-radius: 999px; padding: 2px 10px; margin-top: 6px; }
.tag-soon:empty { display: none; }
@media (min-width: 900px) { .theme { grid-template-columns: 1fr; text-align: left; padding: 22px 22px 20px; min-height: 0; } .theme .ill { width: 88px; height: 88px; margin-bottom: 4px; } .theme .ill svg { width: 64px; height: 64px; } .theme .go { top: auto; bottom: 18px; transform: none; } }

/* ---------- trouble band ---------- */
.trouble { background: var(--warn-soft); border-left: 6px solid var(--warn); border-radius: var(--radius-s); padding: 18px 20px; display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; }
.trouble .ic { width: 56px; height: 56px; }
.trouble h2 { font-size: 20px; margin-bottom: 2px; }
.trouble .items { font-weight: 700; margin: 0 0 6px; }
.trouble p { margin: 0 0 12px; font-size: var(--fs-s); color: var(--ink-2); }
@media (min-width: 900px) { .trouble { grid-template-columns: 64px 1fr auto; align-items: center; } .trouble .btn { grid-column: 3; grid-row: 1; } }

/* ---------- AI panel ---------- */
.ai-panel { background: var(--teal-soft); border-radius: var(--radius); padding: 24px; display: grid; gap: 16px; }
.ai-panel .ic { width: 64px; height: 64px; }
.ai-panel h2 { font-size: 22px; margin-bottom: 6px; }
.ai-panel p { margin: 0 0 10px; }
.chips-static { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-static li { background: var(--bg); border: 1px solid var(--teal-mid); border-radius: 999px; padding: 6px 14px; font-size: var(--fs-s); color: var(--ink-2); }
@media (min-width: 900px) { .ai-panel { grid-template-columns: 64px 1fr auto; align-items: center; padding: 28px 32px; } .ai-panel .btn { align-self: center; } }

/* ---------- article picks ---------- */
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.pick { position: relative; display: block; padding: 18px 44px 18px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; min-height: 44px; }
.pick:hover { box-shadow: var(--shadow-up); }
.pick .tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--teal); background: var(--teal-soft); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.pick h3 { font-size: 18px; margin-bottom: 4px; }
.pick .know { font-size: var(--fs-s); color: var(--ink-2); margin: 0; }
.pick .go { position: absolute; right: 12px; top: 18px; width: 24px; height: 24px; color: var(--teal); }
.pick.mock-link { box-shadow: none; background: var(--paper); }
.pick.mock-link .go { display: none; }

/* ---------- costs + places ---------- */
.two-up { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .two-up { grid-template-columns: 1.15fr .85fr; gap: var(--s7); } }
.costs { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.costs table { font-size: 16px; }
.costs th, .costs td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.costs thead th { font-size: var(--fs-meta); color: var(--ink-2); background: var(--sand); font-weight: 700; }
.costs td.r, .costs th.r { text-align: right; font-variant-numeric: tabular-nums; }
.costs .big { font-size: 20px; font-weight: 800; }
.costs .sub { display: block; font-size: var(--fs-meta); color: var(--ink-3); font-weight: 400; }
.costs tr.soon td { color: var(--ink-3); }
.costs a { display: inline-block; padding: 6px 0; min-height: 44px; font-weight: 700; }
.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .places { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.place { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-weight: 700; }
.place:hover { border-color: var(--teal); }
.place .ic { width: 36px; height: 36px; }
.place .tag-soon { margin: 2px 0 0; font-size: 11px; padding: 1px 8px; }
.place > span { display: flex; flex-direction: column; }

/* ---------- consult band ---------- */
.consult { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .consult { grid-template-columns: 1fr 1fr; align-items: center; } }
.consult .card-plain { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.know { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.know li { position: relative; padding-left: 30px; margin: 8px 0; }
.know li::before { content: ""; position: absolute; left: 0; top: .45em; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); }
.know li::after { content: ""; position: absolute; left: 6px; top: calc(.45em + 5px); width: 8px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.b2b-teaser { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 18px 20px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.b2b-teaser .ic { width: 48px; height: 48px; }
.b2b-teaser p { margin: 0 0 6px; }
@media (min-width: 900px) { .b2b-teaser { grid-template-columns: 48px 1fr auto; } }
.soon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.soon-list li { background: var(--sand); border-radius: 999px; padding: 6px 14px; font-size: var(--fs-s); color: var(--ink-2); }

/* placeholders are not links: text with a marker, never a dead anchor */
a.mock-link { color: var(--ink-2); text-decoration: none; cursor: default; }
a.mock-link::after { content: "（準備中）"; margin-left: .25em; font-size: .85em; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.pending-link { color: var(--ink-2); }
.pending-link .meta { display: block; font-size: 12px; }

/* ---------- footer ---------- */
.site-footer { margin-top: var(--s8); padding: var(--s6) 0 var(--s6); background: var(--paper); border-top: 1px solid var(--line); font-size: var(--fs-s); }
.footer-grid { display: grid; gap: var(--s5); margin-bottom: var(--s5); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-grid h2 { font-size: 14px; color: var(--ink-3); letter-spacing: .06em; margin-bottom: 6px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-op { color: var(--ink-2); max-width: 760px; }
.footer-copy { margin: 0; color: var(--ink-3); }
.mock-mark { position: fixed; left: 8px; bottom: 8px; z-index: 30; background: rgba(34,40,43,.8); color: #fff; font-size: 11px; letter-spacing: .08em; padding: 4px 8px; border-radius: 4px; pointer-events: none; }

/* ---------- article ---------- */
.crumbs { font-size: var(--fs-meta); margin: var(--s4) 0 var(--s3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "／"; color: var(--ink-3); padding: 0 6px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; color: var(--ink-2); }
.art-head { padding: 0 0 var(--s5); }
.cat { display: inline-block; font-size: 12px; font-weight: 700; color: var(--teal); background: var(--teal-soft); border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.art-head h1 { font-size: calc(var(--fs-h1) + 2px); margin-bottom: 6px; }
.art-head .sub-title { display: block; font-size: 18px; font-weight: 700; color: var(--ink-2); margin-bottom: 12px; }
.art-meta { font-size: var(--fs-meta); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.art-meta a { color: var(--teal); }
@media (min-width: 900px) { .art-head h1 { font-size: calc(var(--fs-h1-pc) - 4px); } }
.answer { background: var(--teal-soft); border-radius: var(--radius); padding: 22px 22px 8px; margin-bottom: var(--s6); }
.answer .eyebrow { margin-bottom: 4px; }
.answer p.first { font-size: 18px; margin-bottom: 14px; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0 0 12px; }
@media (min-width: 640px) { .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.figs .k { font-size: var(--fs-meta); color: var(--ink-2); display: block; margin-bottom: 2px; }
.figs .v { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.figs .v .u { font-size: 15px; font-weight: 700; margin-left: 1px; }
.figs .n { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.answer .cond { font-size: var(--fs-meta); color: var(--ink-2); margin: 0 0 14px; }
.prose h2 { font-size: var(--fs-h2); margin: var(--s7) 0 var(--s4); padding-top: 4px; }
.prose h3 { font-size: var(--fs-h3); margin: var(--s5) 0 var(--s3); }
.prose p { margin-bottom: 1.1em; }
@media (max-width: 599px) { .prose h2 { font-size: 21px; margin-top: var(--s6); } }
.fig { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: var(--s4) 0 var(--s5); }
.fig-title { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.fig-title::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--teal); }
.fig .note { font-size: var(--fs-meta); color: var(--ink-3); margin: 10px 0 0; }
.inc-exc { display: grid; gap: 12px; }
@media (min-width: 640px) { .inc-exc { grid-template-columns: 1fr 1fr; gap: 16px; } }
.inc-exc > div { border-radius: var(--radius-s); padding: 12px 14px; }
.inc-exc .inc { background: var(--teal-soft); }
.inc-exc .exc { background: var(--sand); }
.inc-exc h3 { font-size: 15px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.inc-exc ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-s); }
.inc-exc li { padding: 4px 0 4px 0; border-top: 1px solid rgba(34,40,43,.08); }
.inc-exc li:first-child { border-top: 0; }
/* range bars: HTML numbers first, bars are the picture */
.bars { display: grid; gap: 14px; }
.bar-row { display: grid; gap: 4px; }
.bar-row .lbl { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-s); font-weight: 700; }
.bar-row .lbl .n { font-weight: 400; color: var(--ink-2); }
.track { position: relative; height: 22px; background: var(--sand); border-radius: 999px; overflow: visible; }
.track .range { position: absolute; top: 0; height: 100%; background: var(--teal); border-radius: 999px; }
.track .range.all { background: var(--teal-mid); }
.track .med { position: absolute; top: -5px; width: 4px; height: 32px; background: var(--coral); border-radius: 2px; transform: translateX(-2px); }
.track-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-meta); color: var(--ink-2); margin: 10px 0 0; list-style: none; padding: 0; }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
/* day timeline */
.days { display: grid; gap: 10px; }
.days .row { display: grid; grid-template-columns: 7em 1fr; gap: 10px; align-items: center; font-size: var(--fs-s); }
.days .cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.days .cell { height: 26px; border-radius: 6px; background: var(--sand); position: relative; }
.days .cell.on { background: var(--teal); }
.days .cell.maybe { background: repeating-linear-gradient(135deg, var(--teal) 0 6px, var(--teal-mid) 6px 12px); }
.days .cell.bath { background: var(--coral); }
.days .cell.bath-maybe { background: repeating-linear-gradient(135deg, var(--coral) 0 6px, var(--coral-soft) 6px 12px); }
.days .scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; font-size: 12px; color: var(--ink-3); text-align: center; }
.days .head { display: grid; grid-template-columns: 7em 1fr; gap: 10px; }
/* keep / replace */
.keep-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .keep-grid { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.keep-grid svg { width: 100%; height: auto; }
.keep-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-s); }
.keep-list li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; }
.keep-list .sw { flex: none; width: 16px; height: 16px; border-radius: 4px; margin-top: 6px; }
.keep-list .sw.rep { background: var(--teal); }
.keep-list .sw.keep { background: var(--sand-2); border: 1px solid var(--line); }
/* increases */
.ups { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 8px; }
.ups li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); }
.ups .l { font-weight: 700; }
.ups .c { font-size: var(--fs-meta); color: var(--ink-2); display: block; font-weight: 400; margin-top: 2px; }
.ups .d { font-size: 18px; font-weight: 800; color: var(--coral); white-space: nowrap; }
/* breakdown */
.bd { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bd li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: var(--fs-s); }
.bd .l { font-weight: 700; }
.bd .v { font-weight: 800; font-size: 17px; text-align: right; white-space: nowrap; }
.bd .w { grid-column: 1 / -1; height: 8px; background: var(--sand); border-radius: 999px; overflow: hidden; }
.bd .w > span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.bd .m { grid-column: 1 / -1; font-size: var(--fs-meta); color: var(--ink-3); }
/* knowable */
.know-cols { display: grid; gap: 12px; }
@media (min-width: 640px) { .know-cols { grid-template-columns: 1fr 1fr; gap: 16px; } }
.know-cols > div { border-radius: var(--radius-s); padding: 14px; }
.know-cols .before { background: var(--teal-soft); }
.know-cols .onsite { background: var(--sand); }
.know-cols h3 { font-size: 15px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.know-cols ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-s); }
.know-cols li { padding: 4px 0; border-top: 1px solid rgba(34,40,43,.08); }
.know-cols li:first-child { border-top: 0; }
.know-cols li b { display: block; }
.know-cols li span { color: var(--ink-2); font-size: var(--fs-meta); }
/* cases */
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .cases { grid-template-columns: 1fr 1fr; } }
.case { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; }
.case h3 { font-size: 16px; margin: 0 0 8px; }
.case dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: var(--fs-s); }
.case dt { color: var(--ink-3); }
.case dd { margin: 0; font-weight: 700; }
/* sources */
.sources { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.sources dl { display: grid; grid-template-columns: 9em 1fr; gap: 6px 12px; font-size: var(--fs-s); }
.sources dt { color: var(--ink-3); }
.sources dd { margin: 0; }
@media (max-width: 479px) { .sources dl { grid-template-columns: 1fr; gap: 0 } .sources dt { margin-top: 8px; } }
/* article CTA */
.cta-block { background: var(--sand); border-radius: var(--radius); padding: 24px; margin-top: var(--s7); }
.cta-block h2 { font-size: 22px; margin: 0 0 12px; }
.cta-block .btn-row { margin-top: 12px; }
.cta-block .after { font-size: var(--fs-meta); color: var(--ink-2); margin: 14px 0 0; }
.related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.related a, .related span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--fs-s); background: var(--bg); }
.related a:hover { border-color: var(--teal); }
.toc-inline { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.toc-inline a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-meta); text-decoration: none; }
.toc-inline a:hover { color: var(--teal); border-color: var(--teal); }
.aside-note { background: var(--paper); border-left: 4px solid var(--teal-mid); padding: 12px 16px; border-radius: 0 var(--radius-s) var(--radius-s) 0; font-size: var(--fs-s); margin: var(--s4) 0; }
.aside-note p { margin: 0; }

/* ---------- B2B ---------- */
.b2b-hero { background: var(--sand); padding: var(--s6) 0 var(--s6); }
.b2b-hero h1 { font-size: 28px; margin: 4px 0 12px; }
@media (min-width: 900px) { .b2b-hero h1 { font-size: 36px; } .b2b-hero .grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s6); align-items: center; } }
.work-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 560px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.work { position: relative; display: block; padding: 18px 18px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.work:hover { box-shadow: var(--shadow-up); }
.work .ill { width: 64px; height: 64px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; margin-bottom: 10px; }
.work .ill svg { width: 48px; height: 48px; }
.work h3 { font-size: 17px; margin: 0 0 4px; }
.work .scope { font-size: var(--fs-meta); color: var(--ink-2); margin: 0 0 8px; }
.work .cost { font-size: 20px; font-weight: 800; }
.work .cost .u { font-size: 13px; color: var(--ink-2); font-weight: 700; margin-left: 4px; }
.work .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--teal); font-weight: 700; font-size: var(--fs-s); }
.work .go .ic { width: 18px; height: 18px; }
.cost-table { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.cost-table table { min-width: 560px; font-size: var(--fs-s); }
.cost-table th, .cost-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cost-table thead th { background: var(--sand); font-size: var(--fs-meta); }
.cost-table .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-table .big { font-weight: 800; font-size: 17px; }
.option-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .option-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.option { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; }
.option .ic { width: 48px; height: 48px; }
.option h3 { font-size: 17px; margin: 0 0 6px; }
.option p { margin: 0; font-size: var(--fs-s); color: var(--ink-2); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 10px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: st; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 16px 18px; position: relative; }
.steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; margin-bottom: 8px; }
.steps b { display: block; font-size: 16px; margin-bottom: 4px; }
.steps span { font-size: var(--fs-meta); color: var(--ink-2); }
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.reasons li { padding: 16px 18px; background: var(--teal-soft); border-radius: var(--radius); }
.reasons b { display: block; font-size: 16px; margin-bottom: 6px; }
.reasons p { margin: 0; font-size: var(--fs-s); color: var(--ink-2); }
.cta-band { background: var(--bg); border: 2px solid var(--coral); border-radius: var(--radius); padding: 24px; display: grid; gap: 12px; }
.cta-band h2 { font-size: 22px; margin: 0; }
.cta-band p { margin: 0; color: var(--ink-2); }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; } .cta-band .btn { grid-row: 1 / 3; grid-column: 2; } }
.more { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); }
.more > summary { min-height: 48px; display: flex; align-items: center; padding: 0 16px; font-weight: 700; cursor: pointer; }
.more .body { padding: 0 16px 14px; font-size: var(--fs-s); color: var(--ink-2); }
.hs-static { opacity: .6; }

/* ---------- review fixes after first capture (mobile header, phrase-safe H1, stacked tables, overlaps) ---------- */
.seg { display: inline-block; }
.brand-name, .btn-sm, .menu > summary { white-space: nowrap; }
.days .head .meta { text-align: right; font-size: 12px; align-self: end; }
.cell-v { display: block; }
@media (min-width: 900px) { .b2b-teaser .btn { grid-column: 3; } }
@media (max-width: 899px) { .trouble .btn, .b2b-teaser .btn { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 599px) {
  .header-row { gap: 10px; min-height: 60px; }
  .header-actions { gap: 8px; }
  .brand-name { font-size: 17px; }
  .brand-by { font-size: 11px; }
  .btn-sm { min-height: 44px; padding: 0 14px; }
  .menu > summary { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .b2b-hero h1 { font-size: 26px; }
  .theme { padding: 16px 48px 16px 14px; }
  .theme h3 { padding-right: 0; }
  /* cost tables: one work = one block; column names come from data-label */
  .costs thead, .cost-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .costs table, .costs tbody, .costs tr, .costs th, .costs td,
  .cost-table table, .cost-table tbody, .cost-table tr, .cost-table th, .cost-table td { display: block; }
  .costs tr, .cost-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .costs tr:last-child, .cost-table tr:last-child { border-bottom: 0; }
  .costs th, .costs td, .cost-table th, .cost-table td { padding: 0; border: 0; }
  .costs th[scope="row"], .cost-table th[scope="row"] { margin-bottom: 4px; }
  .cost-table th[scope="row"] { font-size: 16px; }
  .costs td.r, .cost-table td.r { text-align: left; white-space: normal; display: grid; grid-template-columns: 5em 1fr; gap: 6px; align-items: baseline; margin-top: 4px; }
  .costs td.r::before, .cost-table td.r::before { content: attr(data-label); font-size: var(--fs-meta); color: var(--ink-3); }
  .costs .big { font-size: 19px; }
  .cost-table { overflow: visible; }
  .cost-table table { min-width: 0; }
  .mock-mark { font-size: 10px; padding: 3px 6px; opacity: .8; }
}
@media (max-width: 359px) { .brand-name { white-space: normal; font-size: 16px; line-height: 1.25; } }
.costs thead .sub { color: var(--ink-2); }
.art-meta a { display: inline-flex; align-items: center; min-height: 28px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .theme { transition: none; } }

/* =====================================================================
   F v1 additions — three acquisition flows (A 大型改修 / B 単品→周辺→全体 / C 事故・災害修繕) + B2B.
   Rules kept from E v1: consult = coral filled, AI = teal filled, cards = illustration + concrete title + arrow,
   info boxes have no arrow / shadow, links in prose are underlined. New: navigation primary = .btn-dark (ink).
   Illustrations (s-*, r-*) and category icons (c-*) are different things and sized differently on purpose.
   ===================================================================== */
.hero-f { padding: 18px 0 22px; }
.hero-f-grid { display: grid; gap: 14px; align-items: center; }
.hero-f h1 { font-size: var(--fs-h1); line-height: 1.3; margin: 2px 0 8px; }
.hero-f .lead { font-size: calc(var(--fs-lead) - 2px); margin-bottom: 12px; }
.hero-f-ill { display: none; }
@media (min-width: 900px) { .hero-f { padding: 40px 0 36px; } .hero-f-grid { grid-template-columns: 1.3fr .7fr; gap: 32px; } .hero-f h1 { font-size: var(--fs-h1-pc); } .hero-f .lead { font-size: var(--fs-lead); margin-bottom: 16px; } .hero-f-ill { display: block; max-width: 300px; margin: 0 auto; } }
.shortcuts-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shortcuts-4 a { width: 100%; justify-content: flex-start; min-height: 48px; padding: 0 10px 0 8px; font-size: 15px; }
.shortcuts-4 .ic { width: 26px; height: 26px; }
@media (min-width: 640px) { .shortcuts-4 { display: flex; flex-wrap: wrap; gap: 10px; } .shortcuts-4 a { width: auto; padding: 0 16px 0 10px; } }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }

/* ---------- scenes: 場面 → 目的 → 工事 (details, no JS needed) ---------- */
.scene-grid { display: grid; gap: var(--rm-card-gap); }
@media (min-width: 640px) { .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .scene-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.scene { background: var(--bg); border: var(--line-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.scene:hover { box-shadow: var(--shadow-up); }
.scene > summary { list-style: none; display: grid; grid-template-columns: 60px 1fr 24px; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; min-height: 84px; border-radius: var(--radius); }
.scene > summary::-webkit-details-marker { display: none; }
.scene .ill { width: 60px; height: 60px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; }
.scene .ill svg { width: 48px; height: 48px; }
.scene .t { display: flex; flex-direction: column; min-width: 0; }
.scene .h { font-weight: 700; font-size: 16px; line-height: 1.3; }
.scene .s { font-size: 12.5px; color: var(--ink-2); }
.scene .chev { width: 24px; height: 24px; color: var(--teal); transition: transform .15s ease; }
.scene[open] .chev { transform: rotate(90deg); }
.scene[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.purposes { padding: 10px 12px 12px; display: grid; gap: 10px; }
.purpose .p { margin: 0 0 6px; font-weight: 700; font-size: 15px; }
.works { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.works li { margin: 0; }
.works a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--teal-mid); border-radius: 999px; background: var(--teal-soft); color: var(--teal-dark); text-decoration: none; font-weight: 700; font-size: var(--fs-meta); }
.works a::after { content: "→"; }
.works a:hover { background: var(--teal); color: #fff; }
.works a.mock-link { background: var(--paper); border-style: dashed; color: var(--ink-2); }
.works a.mock-link::after { content: ""; }
.scenes-more { margin-top: 14px; }
.scenes-more > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 700; cursor: pointer; background: var(--bg); list-style: none; font-size: var(--fs-s); }
.scenes-more > summary::-webkit-details-marker { display: none; }
.scenes-more > summary::before { content: "＋"; margin-right: 8px; color: var(--teal); font-weight: 800; }
.scenes-more[open] > summary::before { content: "－"; }
.scenes-more[open] > summary { margin-bottom: 12px; }

/* ---------- troubles: symptom chips ---------- */
.trouble-groups { display: grid; gap: 12px; }
@media (min-width: 900px) { .trouble-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.tg { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.tg h3 { font-size: 15px; color: var(--ink-2); margin: 0 0 8px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-s); }
.chip .ic { width: 20px; height: 20px; color: var(--teal); }
.chip:hover { border-color: var(--teal); }
.chip.mock-link { background: var(--paper); border-style: dashed; }
.chip.mock-link .ic { color: var(--ink-3); }

/* ---------- urgent (emergency route, kept apart from comfort topics) ---------- */
.urgent { background: var(--warn-soft); border-left: 6px solid var(--warn); border-radius: var(--radius-s); padding: 18px 20px; }
.urgent-head { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; margin-bottom: 12px; }
.urgent-head .ic { width: 52px; height: 52px; }
.urgent h2 { font-size: 20px; margin-bottom: 2px; }
.urgent .items { font-weight: 700; margin: 0; font-size: var(--fs-s); }
.urgent-steps { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: us; display: grid; gap: 8px; }
@media (min-width: 900px) { .urgent-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.urgent-steps li { counter-increment: us; background: var(--bg); border-radius: var(--radius-s); padding: 10px 12px 10px 42px; position: relative; font-size: var(--fs-meta); color: var(--ink-2); margin: 0; }
.urgent-steps li::before { content: counter(us); position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--warn); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.urgent-steps b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.urgent .small { margin: 12px 0 0; }

/* ---------- big card (large renovation entry) ---------- */
.big-card { display: grid; gap: 16px; align-items: center; }
@media (min-width: 900px) { .big-card { grid-template-columns: 200px 1fr; gap: 32px; } }
.big-ill { width: 150px; height: 150px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; margin: 0 auto; }
.big-ill svg { width: 116px; height: 116px; }
.big-card h2 { font-size: 24px; margin: 4px 0 8px; }
.big-card p { margin: 0 0 14px; }

/* ---------- renovation hub ---------- */
.starts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .starts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .starts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }
.starts li { margin: 0; }
.start { display: block; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; color: var(--ink); text-decoration: none; height: 100%; }
.start:hover { box-shadow: var(--shadow-up); }
.start .ill { width: 64px; height: 64px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; margin-bottom: 8px; }
.start .ill svg { width: 50px; height: 50px; }
.start h3 { font-size: 16px; margin: 0 0 4px; }
.start p { margin: 0; font-size: var(--fs-meta); color: var(--ink-2); }
.start .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--teal); font-weight: 700; font-size: var(--fs-meta); }
.start .go .ic { width: 18px; height: 18px; }
.compare-table { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare-table table { font-size: var(--fs-s); }
.compare-table th, .compare-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.compare-table th:first-child, .compare-table td:first-child { border-left: 0; }
.compare-table thead th { font-size: 15px; background: var(--sand); }
.compare-table thead th:nth-child(3) { background: var(--teal-soft); }
.compare-table thead th:nth-child(4) { background: var(--teal-mid); }
.compare-table tbody th { background: var(--paper); font-size: var(--fs-meta); color: var(--ink-2); width: 9em; }
@media (max-width: 699px) {
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .compare-table table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .compare-table tr:last-child { border-bottom: 0; }
  .compare-table th, .compare-table td { padding: 0; border: 0; }
  .compare-table tbody th { width: auto; background: none; font-weight: 700; color: var(--ink); margin-bottom: 6px; font-size: 15px; }
  .compare-table td { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; padding: 4px 0; align-items: start; }
  .compare-table td::before { content: attr(data-col); font-size: 12px; font-weight: 700; color: var(--teal-dark); background: var(--teal-soft); border-radius: 4px; padding: 2px 6px; line-height: 1.4; }
  .compare-table td[data-col="交換だけ"]::before { background: var(--sand); color: var(--ink-2); }
  .compare-table td[data-col="空間全体を見直す"]::before { background: var(--teal-mid); }
}
.levels { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.levels li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; font-size: var(--fs-meta); color: var(--ink-2); margin: 0; }
.levels b { display: block; color: var(--ink); font-size: 15px; }
.lv { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 26px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; letter-spacing: .02em; }
.lv-l1 { background: var(--coral-soft); color: var(--coral-dark); border: 1.5px solid var(--coral); }
.lv-l2 { background: var(--teal-soft); color: var(--teal-dark); border: 1.5px solid var(--teal); }
.lv-l3 { background: var(--sand); color: var(--ink-2); border: 1.5px solid var(--sand-2); }
.levels .lv { min-width: 0; padding: 0 10px; }
.sets { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .sets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.set { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0; scroll-margin-top: 16px; }
.set h3 { font-size: 18px; margin: 0 0 2px; }
.set .base { font-size: var(--fs-meta); color: var(--ink-2); margin: 0 0 10px; }
.set ul { list-style: none; margin: 0; padding: 0; }
.set ul li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid rgba(34,40,43,.08); font-size: var(--fs-s); margin: 0; }
.set ul li:first-child { border-top: 0; }
.set ul li b { display: block; }
.set .n { display: block; color: var(--ink-2); font-size: var(--fs-meta); }
.no-upsell { background: var(--teal-soft); border-radius: var(--radius); padding: 18px 20px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.no-upsell .ic { width: 40px; height: 40px; color: var(--teal); }
.no-upsell p { margin: 0; }

/* ---------- damage / insurance ---------- */
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .entries { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.entry { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; margin: 0; }
.entry .ic { width: 40px; height: 40px; color: var(--warn); }
.entry b { display: block; font-size: 16px; }
.entry span span { font-size: var(--fs-meta); color: var(--ink-2); }
@media (min-width: 900px) { .steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.roles { display: grid; gap: 12px; }
@media (min-width: 700px) { .roles { grid-template-columns: 1fr 1fr; gap: 16px; } }
.role { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.role h3 { font-size: 17px; margin: 0 0 6px; }
.role ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-s); }
.role li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; margin: 0; }
.role li .ic { width: 20px; height: 20px; flex: none; margin-top: 4px; }
.role .does .ic { color: var(--teal); }
.role .not .ic { color: var(--warn); }
.role .k { font-size: var(--fs-meta); color: var(--ink-3); margin: 8px 0 2px; font-weight: 700; }
.separate { display: grid; gap: 12px; }
@media (min-width: 700px) { .separate { grid-template-columns: 1fr 1fr; gap: 16px; } }
.sep { border-radius: var(--radius); padding: 16px 18px; }
.sep.restore { background: var(--teal-soft); }
.sep.optional { background: var(--sand); }
.sep h3 { font-size: 16px; margin: 0 0 6px; }
.sep p { margin: 0; font-size: var(--fs-s); color: var(--ink-2); }
.repairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .repairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.repairs li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; font-size: var(--fs-s); margin: 0; }
.repairs .ic { width: 36px; height: 36px; color: var(--teal); }
.repairs b { display: block; }
.repairs span span { color: var(--ink-2); font-size: var(--fs-meta); }
.notice { background: var(--paper); border: 2px solid var(--teal); border-radius: var(--radius); padding: 18px 20px; }
.notice h2 { font-size: 18px; margin: 0 0 10px; }
.notice ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-s); }
.notice li { margin: 6px 0; }
.warning { background: var(--warn-soft); border-left: 6px solid var(--warn); border-radius: var(--radius-s); padding: 14px 18px; font-size: var(--fs-s); }
.warning h2 { font-size: 17px; margin: 0 0 6px; color: var(--warn); }
.warning p { margin: 0; }
.ext-sources { list-style: none; margin: 0; padding: 0; font-size: var(--fs-s); }
.ext-sources li { padding: 6px 0; border-top: 1px solid var(--line); margin: 0; }
.ext-sources li:first-child { border-top: 0; }
.ext-sources .org { display: block; font-size: var(--fs-meta); color: var(--ink-3); }
.ext-sources a { display: inline-block; padding: 4px 0; min-height: 28px; }
.ext-sources .chk { font-size: 12px; color: var(--ink-3); margin-left: 6px; white-space: nowrap; }

/* ---------- B2B questions / impact ---------- */
.questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .questions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.questions li { margin: 0; }
.question { display: grid; grid-template-columns: 34px 1fr; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; color: var(--ink); text-decoration: none; height: 100%; }
.question:hover { box-shadow: var(--shadow-up); }
.question .n { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; display: grid; place-items: center; }
.question b { display: block; font-size: 16px; }
.question span span { font-size: var(--fs-meta); color: var(--ink-2); display: block; }
.question .go { color: var(--teal); font-weight: 700; margin-top: 4px; }
.impact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .impact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.impact li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0; }
.impact b { display: block; font-size: 16px; margin-bottom: 6px; }
.impact p { margin: 0; font-size: var(--fs-s); color: var(--ink-2); }
@media (min-width: 900px) { .work-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- article: scope widening + related-work module ---------- */
.wider { display: grid; gap: 10px; }
@media (min-width: 700px) { .wider { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wider > div { border-radius: var(--radius-s); padding: 12px 14px; font-size: var(--fs-s); border: 1px solid var(--line); background: var(--bg); }
.wider > div:nth-child(2) { background: var(--teal-soft); border-color: var(--teal-mid); }
.wider > div:nth-child(3) { background: var(--teal-mid); border-color: var(--teal-mid); }
.wider h3 { font-size: 15px; margin: 0 0 6px; }
.wider p { margin: 0 0 6px; }
.wider .v { font-weight: 800; font-size: 17px; }
.wider .m { font-size: var(--fs-meta); color: var(--ink-2); }
.together { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.together li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; font-size: var(--fs-s); margin: 0; }
.together b { display: block; }
.together .n { display: block; color: var(--ink-2); font-size: var(--fs-meta); }
.skip-box { background: var(--teal-soft); border-radius: var(--radius-s); padding: 12px 14px; font-size: var(--fs-s); }
.skip-box h3 { font-size: 15px; margin: 0 0 6px; }
.skip-box ul { margin: 0; padding-left: 1.2em; }
.decide { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; font-size: var(--fs-s); display: grid; gap: 6px; }
.decide b { font-size: 15px; }
.decide .links { display: flex; flex-wrap: wrap; gap: 8px; }
.decide .links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--teal-mid); background: var(--bg); text-decoration: none; font-weight: 700; font-size: var(--fs-meta); color: var(--teal-dark); }

/* ---------- fixes after first F v1 validation ---------- */
.shortcuts-4 a { font-size: 14px; padding: 0 8px; gap: 6px; }
@media (min-width: 640px) { .shortcuts-4 a { font-size: var(--fs-s); padding: 0 16px 0 10px; gap: 8px; } }
main p a:not(.btn), .wider .m a, .ext-sources a { display: inline-block; min-height: 24px; }
.decide .links a { min-height: 44px; }
.ext-sources .org, .ext-sources .chk { color: var(--ink-2); }

/* ---------- F v1.1: large illustrations, non-link "later" items, scope figure ---------- */
.hero-f-band { display: block; margin: 14px 0 0; }
.hero-f-band svg { width: 100%; height: auto; max-height: 128px; }
@media (min-width: 900px) { .hero-f-band { display: none; } .hero-f-ill { max-width: 460px; } }
.works .later span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px dashed var(--line); border-radius: 999px; color: var(--ink-2); font-size: var(--fs-meta); background: var(--paper); }
.chip-later { border-style: dashed; color: var(--ink-2); background: var(--paper); cursor: default; }
.place-later { border-style: dashed; color: var(--ink-2); background: var(--paper); }
.related .later { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px dashed var(--line); border-radius: 999px; color: var(--ink-2); font-weight: 700; font-size: var(--fs-s); background: var(--paper); }
.scope-figure { margin: 0 0 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.scope-items { display: grid; gap: 12px; }
@media (min-width: 700px) { .scope-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.scope-item svg { width: 100%; height: auto; border-radius: var(--radius-s); }
.scope-item p { margin: 8px 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.scope-item b { display: block; color: var(--ink); font-size: 16px; }
.scope-figure .note { margin: 12px 0 0; }
.scope-note { background: var(--teal-soft); border-radius: var(--radius); padding: 18px 20px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.scope-note .ic { width: 40px; height: 40px; color: var(--teal); }
.scope-note p { margin: 0; }
.hero-f-ill svg { width: 100%; height: auto; }
@media (min-width: 900px) { .hero-f-grid { align-items: center; } }

/* ---------- F v1.1 final cleanup: mobile first view reaches the first scene card ---------- */
.lead-pc { display: none; }
.lead-sp { display: block; }
@media (min-width: 900px) { .lead-pc { display: block; } .lead-sp { display: none; } }
@media (max-width: 899px) { .hero-f { padding: 14px 0 14px; } .hero-f h1 { margin-bottom: 6px; } .hero-f .lead { margin-bottom: 10px; } .hero-f-band { margin-top: 10px; } .hero-f-band svg { max-height: 96px; } #scenes.section { padding-top: 16px; } #scenes .sec-head { margin-bottom: 12px; } }

/* =====================================================================
   W1 block additions — core block markup (buttons / details / list / site-title / navigation) styled with the same tokens.
   ===================================================================== */
/* header (core blocks) */
.site-header .wrap.header-row { padding: 0 20px; }
.site-header .brand { gap: 0; }
.site-header .brand-name, .site-header .brand-name a { font-size: 20px; font-weight: 800; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.site-header .brand-by { font-size: 12px; color: var(--ink-3); margin: 0; }
.site-header .header-actions { margin: 0; }
.site-header .header-actions .wp-block-button__link { min-height: var(--rm-btn-h-sm); padding: 0 16px; font-size: var(--fs-s); background: var(--coral); color: #fff; border-radius: var(--radius-pill); font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
.site-header .header-actions .wp-block-button__link:hover { background: var(--coral-dark); }
.rm-header--no-consult .rm-header-consult { display: none; }
/* navigation block: our breakpoint is 900px (WP core uses 600px), so the list is hidden below 900 unless the overlay is open */
.site-header .wp-block-navigation.nav-desktop { display: block; }
@media (max-width: 599px) { .site-header .wrap.header-row { padding: 0 12px; gap: 8px; } .site-header .brand { min-width: 0; flex: 1 1 auto; } .site-header .wp-block-navigation, .site-header .header-actions { flex: none; } .site-header .brand-name, .site-header .brand-name a { font-size: 16px; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; } .site-header .brand-by { white-space: nowrap; } .site-header .header-actions .wp-block-button__link { padding: 0 12px; } }
@media (max-width: 359px) { .site-header .brand-name, .site-header .brand-name a { white-space: normal; font-size: 15px; } }
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
.site-header .wp-block-navigation__responsive-container-open { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bg); cursor: pointer; padding: 0; }
@media (min-width: 900px) { .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: block; } .site-header .wp-block-navigation__responsive-container-open { display: none; } }
.wp-block-navigation.nav-desktop .wp-block-navigation__container { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.wp-block-navigation.nav-desktop .wp-block-navigation-item { margin: 0; }
.wp-block-navigation.nav-desktop .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 700; font-size: var(--fs-s); color: var(--ink); text-decoration: none; border-radius: var(--radius-pill); }
.wp-block-navigation.nav-desktop .wp-block-navigation-item__content:hover, .wp-block-navigation.nav-desktop .current-menu-item > .wp-block-navigation-item__content { background: var(--sand); }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
/* hero shortcuts (core buttons) */
.shortcuts-4.wp-block-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .shortcuts-4.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; } }
.shortcuts-4 .wp-block-button { margin: 0; }
.shortcuts-4 .wp-block-button__link { display: inline-flex; align-items: center; gap: 6px; width: 100%; min-height: 48px; padding: 0 8px; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-pill); font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(34,40,43,.05); justify-content: flex-start; }
@media (min-width: 640px) { .shortcuts-4 .wp-block-button__link { width: auto; padding: 0 16px 0 10px; font-size: var(--fs-s); gap: 8px; } }
.shortcuts-4 .wp-block-button__link:hover { border-color: var(--teal); }
.shortcuts-4 .wp-block-button__link::before { content: ""; width: 26px; height: 26px; flex: none; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background-repeat: no-repeat; background-size: contain; }
.shortcuts-4 .rm-shortcut--urgent .wp-block-button__link { border-color: var(--warn); color: var(--warn); }
.rm-shortcuts--hidden .shortcuts-4 { display: none; }
.hero-f .lead, .hero-f .lead-sp { margin-top: 0; } /* WP の flow block-gap（:where(.is-layout-flow) > * + * = 24px）を打ち消し、F v1.1 と同じ H1 直下の間隔にする（Runtime Gate 2026-09-14） */
/* W4 additions（pattern 変換で inline style を class に置換したもの・記事 component・dynamic block の placeholder） */
.rm-h2-small { font-size: calc(var(--fs-h3) - 1px); margin: 32px 0 10px; }
.section.rm-pt-0 { padding-top: 0; }
.sec-head.is-layout-flow > * + *, .cta-band.is-layout-flow > * + *, .b2b-hero .is-layout-flow > * + *, .big-card .is-layout-flow > * + *, .urgent-head .is-layout-flow > * + *, .complete.is-layout-flow > * + *, .flow-intro.is-layout-flow > * + * { margin-block-start: 0; }
.b2b-hero .lead { margin-top: 8px; }
.rm-block-placeholder { padding: 12px 16px; border: 1px dashed var(--line); color: var(--ink-3); font-size: var(--fs-meta); }
.rm-dynamic-block__label { font-size: 12px; color: var(--ink-3); margin: 0 0 4px; }
.rm-article .wider { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.rm-article .wider .tiers { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: 10px; }
.rm-article .wider .tiers li { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); }
.rm-article .wider .tiers b { color: var(--teal); }
.rm-article .related-block { margin-top: var(--s6); }
.rm-article .operator-note { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--ink-2); }
.rm-article .cta-block .after { margin-top: 10px; font-size: var(--fs-s); }
.rm-article .art-head { margin-bottom: var(--s4); }
.err-box { padding: 12px 14px; border-left: 4px solid var(--warn); background: var(--warn-soft); color: var(--ink); }
.notice-box { padding: 12px 14px; border: 1px solid var(--line); color: var(--ink-2); }
.rm-page .narrow { max-width: 760px; margin-inline: auto; padding: var(--s6) 0; }
.costs table .soon th a { font-weight: 700; }
/* W5-1 Article Link Fail-Safe（D-030／D-044）: 公開済みでない記事へのリンクは押せない「今後追加」表示。F v1.1 の later 表現（.chip-later／.place-later／.tag-soon）を流用し、card・表・文中の構造は変えない */
.is-later { cursor: default; text-decoration: none; }
.pick-later { box-shadow: none; background: var(--paper); border-style: dashed; color: var(--ink-2); }
.pick-later:hover { box-shadow: none; }
.pick-later .go { display: none; }
.pick-later .tag-soon { margin: 6px 0 0; }
.chip-later .tag-soon { margin: 0; font-size: 11px; padding: 1px 8px; }
.place-later .tag-soon { margin: 2px 0 0; }
.gen-later { font-weight: 700; color: var(--ink-2); }
.is-later + .tag-soon { margin: 0 0 0 6px; vertical-align: middle; }
/* W5-3 /articles/ 記事を探す（UR-04 RESOLVED）: F v1.1 の .picks / .pick カードを流用。日付順ブログ風にしない */
.rm-page-articles .article-list .pick-title { font-size: 18px; margin: 0 0 4px; }
.rm-page-articles .article-list .meta { font-size: var(--fs-meta); color: var(--ink-3); margin: 8px 0 0; }
.rm-page-articles .article-empty { margin: 0; }
.rm-page-articles .article-empty-back { margin-top: var(--s4); }
.rm-page-articles .pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-top: var(--s6); }
.rm-page-articles .pagination .page-of { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rm-page-articles .pagination .is-disabled { opacity: .45; cursor: default; pointer-events: none; }
/* legacy_html_v1 の表: APP が付ける inline overflow-x は投稿ユーザーの権限（unfiltered_html）次第で KSES に落とされる（Runtime Gate W4 で実測）→ theme 側でも横スクロールを保証する */
.rm-article figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--s4) 0; }
.rm-article figure.wp-block-table table { min-width: 480px; }
/* scenes (core details) */
.scene.wp-block-details { padding: 0; }
.scene.wp-block-details > summary { list-style: none; display: grid; grid-template-columns: 60px 1fr 24px; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; min-height: 84px; border-radius: var(--radius); font-weight: 700; font-size: 16px; line-height: 1.3; }
.scene.wp-block-details > summary::-webkit-details-marker { display: none; }
.scene.wp-block-details > summary::before { content: ""; width: 60px; height: 60px; border-radius: 50%; background-color: var(--sand); background-repeat: no-repeat; background-position: center; background-size: 48px 48px; }
.scene.wp-block-details > summary::after { content: ""; width: 24px; height: 24px; border-right: 3px solid var(--teal); border-bottom: 3px solid var(--teal); transform: rotate(-45deg) scale(.6); transition: transform .15s ease; }
.scene.wp-block-details[open] > summary::after { transform: rotate(45deg) scale(.6); }
.scene.wp-block-details[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.scene.wp-block-details > .p { margin: 10px 12px 6px; font-weight: 700; font-size: 15px; }
.scene.wp-block-details > .works { margin: 0 12px 12px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.scene.wp-block-details > .works li { margin: 0; }
.scene.wp-block-details > .works li:not(:has(a)) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px dashed var(--line); border-radius: var(--radius-pill); color: var(--ink-2); font-size: var(--fs-meta); background: var(--paper); }
/* scenes layout variants (block style or body class from the console) */
.is-style-rm-scenes-horizontal-scroll.scene-grid, .rm-scenes--horizontal-scroll .scene-grid { display: flex; overflow-x: auto; gap: var(--rm-card-gap); scroll-snap-type: x mandatory; padding-bottom: 8px; }
.is-style-rm-scenes-horizontal-scroll.scene-grid > .scene, .rm-scenes--horizontal-scroll .scene-grid > .scene { flex: 0 0 280px; scroll-snap-align: start; }
@media (min-width: 1000px) { .is-style-rm-scenes-feature-small.scene-grid, .rm-scenes--feature-small .scene-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .is-style-rm-scenes-feature-small.scene-grid > .scene:first-child, .rm-scenes--feature-small .scene-grid > .scene:first-child { grid-column: span 2; grid-row: span 2; } .is-style-rm-scenes-feature-small.scene-grid > .scene:first-child > summary, .rm-scenes--feature-small .scene-grid > .scene:first-child > summary { grid-template-columns: 96px 1fr 24px; min-height: 140px; font-size: 20px; } .is-style-rm-scenes-feature-small.scene-grid > .scene:first-child > summary::before, .rm-scenes--feature-small .scene-grid > .scene:first-child > summary::before { width: 96px; height: 96px; background-size: 76px 76px; } }
/* footer (core columns / lists) */
.site-footer .footer-grid { gap: var(--s5); }
.site-footer .footer-grid h2 { font-size: 14px; color: var(--ink-3); letter-spacing: .06em; margin-bottom: 6px; }
.site-footer .footer-grid ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-grid li { margin: 0; }
.site-footer .footer-grid a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.site-footer .footer-grid a:hover { text-decoration: underline; }
/* wp layout helpers: keep the prototype's own widths (theme.json provides the tokens) */
.wp-block-group.wrap { max-width: var(--site); margin: 0 auto; }
.rm-main { margin: 0; }
/* W5-3 記事一覧（archive.html／home.html）: core/query の出力に F v1.1 の記事カード（.picks / .pick / .know）をそのまま当てる。
   新しい色・新しい部品・新しい導線は作らない。カード内のリンクは core/post-title（公開済み投稿の実 permalink）だけで、
   theme が URL を組み立てないため W5-1 の fail-safe（/articles/{slug}/ の照合）は不要 = 押して 404 になるリンクを増やさない。
   矢印は sprite の <use>（core/html は template では D-039 の無害化対象）が使えないため、.scene の summary と同じ CSS の山形で表す。 */
.rm-archive .sec-head h1 { font-size: calc(var(--fs-h1) + 2px); margin-bottom: 8px; }
@media (min-width: 900px) { .rm-archive .sec-head h1 { font-size: calc(var(--fs-h1-pc) - 4px); } }
.rm-archive .sec-head .wp-block-term-description p:last-child { margin-bottom: 0; }
.rm-archive .wp-block-query { margin: 0; }
ul.picks.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
ul.picks.wp-block-post-template > li { margin: .25em 0; min-width: 0; } /* WP の flow layout が足す block-gap を打ち消し、TOP の .picks > li と同じ間隔にする */
.pick-card { position: relative; }
.pick-card.is-layout-flow > * + * { margin-block-start: 0; }
.pick-card .wp-block-post-title { font-size: 18px; margin: 0 0 4px; }
.pick-card .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.pick-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } /* カード全体を 1 本のリンクにする（リンク先は増やさない） */
.pick-card:hover .wp-block-post-title a { text-decoration: underline; }
.pick-card .wp-block-post-excerpt { margin: 0; }
.pick-card .wp-block-post-excerpt p, .pick-card .wp-block-post-excerpt__excerpt { margin: 0; }
.pick-card::after { content: ""; position: absolute; right: 16px; top: 22px; width: 10px; height: 10px; border-right: 3px solid var(--teal); border-bottom: 3px solid var(--teal); transform: rotate(-45deg); }
.rm-pager { margin-top: var(--s5); }
.rm-pager, .rm-pager .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rm-pager a, .rm-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: var(--radius-pill); color: var(--teal); text-decoration: none; }
.rm-pager a:hover { background: var(--sand); text-decoration: underline; }
.rm-pager .current { background: var(--sand); color: var(--ink); font-weight: 700; }
/* W5-3 検索結果／404（search.html／404.html）: archive.html／home.html と同じ F v1.1 のカード・見出し・余白をそのまま流用する。
   カードと余白は .rm-archive / .picks / .pick / .know / .notice-box が既に持っているので、ここで足すのは core/search の見た目だけ。
   core/search の label・buttonText は W1 の指定のまま変えない（新しい導線・新しい意味色は作らない）。
   スコープ用のクラスは検索結果と 404 の 2 画面にしか付かないため、他の画面の見た目は変わらない。 */
.rm-fallback .sec-head .wp-block-search { margin-top: var(--s4); margin-bottom: 0; }
.rm-fallback .wp-block-search__label { display: block; font-size: var(--fs-meta); font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.rm-fallback .wp-block-search__inside-wrapper { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.rm-fallback .wp-block-search__input { flex: 1 1 200px; min-width: 0; min-height: var(--rm-btn-h); padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); color: var(--ink); font-size: var(--fs); }
.rm-fallback .wp-block-search__input:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
.rm-fallback .wp-block-search__button { min-height: var(--rm-btn-h); padding: 0 22px; border: 2px solid var(--teal); border-radius: var(--radius-pill); background: var(--teal); color: var(--bg); font-weight: 700; line-height: 1.3; cursor: pointer; }
.rm-fallback .wp-block-search__button:hover { background: var(--teal-dark); border-color: var(--teal-dark); }