
:root{--bg:#f4f6f0;--surface:#fff;--surface-2:#eef1e8;--ink:#17251c;--soft:#48584d;--faint:#7d8a80;--line:#dde3d6;--line2:#c7d0bd;--accent:#1f7a44;--yes-ink:#186c37;--yes-bg:#e3f2e6;--phone-ink:#9a6516;--serif:"Hiragino Mincho ProN","Yu Mincho",serif;--sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#0f1512;--surface:#18211c;--surface-2:#1f2a23;--ink:#eaf0e9;--soft:#a9b6ab;--faint:#7c8a7f;--line:#2a352d;--line2:#3a473d;--accent:#4cc177;--yes-ink:#6fd394;--yes-bg:#173324;--phone-ink:#e0b262}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.8;-webkit-font-smoothing:antialiased}
.hero-banner{background:linear-gradient(135deg,#1a6e3d,#26894e 55%,#3fa268);color:#fff;padding:15px 0}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.hb{font-family:var(--serif);font-size:18px;font-weight:600}.hb a{color:#fff;text-decoration:none}
.crumb{font-size:12.5px;color:var(--faint);padding:18px 0 0}.crumb a{color:var(--soft);text-decoration:none}.crumb a:hover{color:var(--accent)}
article{padding:8px 0 30px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(23px,4.4vw,33px);line-height:1.42;margin:14px 0 6px;letter-spacing:.01em}
.meta{font-size:12.5px;color:var(--faint);margin-bottom:20px}
.lead{font-size:15.5px;color:var(--soft);background:var(--surface);border-left:3px solid var(--accent);padding:14px 18px;border-radius:0 10px 10px 0}
.lead b{color:var(--ink)}
h2{font-family:var(--serif);font-size:21px;font-weight:600;margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--line)}
p{font-size:15px}
.rk{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 16px;margin:10px 0;text-decoration:none;color:inherit;transition:.15s}
.rk:hover{border-color:var(--accent);transform:translateY(-1px)}
.rank{font-family:var(--serif);font-size:25px;font-weight:700;color:var(--accent);min-width:36px;text-align:center;font-variant-numeric:tabular-nums}
.rkbody{flex:1;min-width:0}
.rkname{font-family:var(--serif);font-size:16px;font-weight:600;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.area{font-size:11px;font-weight:700;color:var(--accent);background:var(--surface-2);padding:2px 8px;border-radius:5px}
.rkprice{margin-top:4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.jr{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--yes-ink);font-variant-numeric:tabular-nums}
.jr.ask{font-size:15px;color:var(--phone-ink)}
.gen{font-size:12.5px;color:var(--soft)}
.off{font-size:11px;font-weight:800;color:var(--yes-ink);background:var(--yes-bg);border-radius:5px;padding:2px 7px}
.acc{font-size:12px;color:var(--faint);margin-top:3px}
.cta{display:block;background:var(--accent);color:#fff;text-align:center;padding:15px;border-radius:12px;font-weight:700;text-decoration:none;margin:26px 0;font-size:15px}
.rel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-top:24px}
.rel b{font-size:13px}.rel a{display:block;color:var(--accent);text-decoration:none;padding:5px 0;font-size:14px}
.cardlist{display:grid;gap:10px;margin:14px 0}
.acard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 17px;text-decoration:none;color:inherit}
.acard:hover{border-color:var(--accent)}
.acard .t{font-family:var(--serif);font-size:16px;font-weight:600}
.acard .d{font-size:13px;color:var(--soft);margin-top:3px}
footer{border-top:1px solid var(--line);padding:22px 0 50px;color:var(--faint);font-size:12px;line-height:1.7}
footer a{color:var(--accent);text-decoration:none}
