:root{
  --bg:#F2F4F6; --surface:#FFFFFF; --surface2:#F6F8FA; --line:#DDE2E8;
  --ink:#222A35; --ink2:#5B6675; --ink3:#8C96A5;
  --brand:#149AA3; --brand2:#3FC0B0; --brand-dk:#0F7B83; --brand-ink:#FFFFFF;
  --link:#1A6FB5; --score:#F58A1F; --star:#F3A63B; --star-off:#D8DDE4;
  --good:#1E8E5A; --warn:#C7791B; --bad:#C43D3D;
  --chip:#E4F3F4; --chip-ink:#0F6E75;
  --shadow:0 1px 2px rgba(20,30,50,.06),0 4px 14px rgba(20,30,50,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12171F; --surface:#1A2029; --surface2:#222A35; --line:#2E3745;
    --ink:#EDF0F4; --ink2:#AAB3C0; --ink3:#7B8592;
    --brand:#178F98; --brand2:#2FA99B; --brand-dk:#0E6C73; --brand-ink:#FFFFFF;
    --link:#7DB7F0; --score:#FF9A3C; --star:#F6B455; --star-off:#3A4452;
    --good:#4CC28A; --warn:#E8A34A; --bad:#E86A6A;
    --chip:#173C40; --chip-ink:#9FDDE0;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#12171F; --surface:#1A2029; --surface2:#222A35; --line:#2E3745;
  --ink:#EDF0F4; --ink2:#AAB3C0; --ink3:#7B8592;
  --brand:#178F98; --brand2:#2FA99B; --brand-dk:#0E6C73; --brand-ink:#FFFFFF;
  --link:#7DB7F0; --score:#FF9A3C; --star:#F6B455; --star-off:#3A4452;
  --good:#4CC28A; --warn:#E8A34A; --bad:#E86A6A;
  --chip:#173C40; --chip-ink:#9FDDE0;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",sans-serif;font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;line-height:1.3;margin:0;text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
[hidden]{display:none!important}

/* ===== header ===== */
.hdr{background:var(--surface);border-bottom:1px solid var(--line)}
.hdr-in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:inherit}
.logo:hover{text-decoration:none}
.logo .mk{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:26px;color:var(--brand);letter-spacing:-.02em;line-height:1}
.logo .mk small{display:block;font-size:10px;letter-spacing:.14em;color:var(--ink3);font-weight:700;margin-top:3px}
.logo .badge{font-size:11px;font-weight:700;color:var(--score);border:1.5px solid var(--score);border-radius:14px;padding:2px 9px;line-height:1.4;white-space:nowrap}
.gnav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.gnav a{padding:8px 11px;font-weight:700;font-size:13.5px;color:var(--ink2);border-radius:4px;white-space:nowrap}
.gnav a.on,.gnav a:hover{color:var(--brand);background:var(--chip);text-decoration:none}
.subnav{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff}
.subnav-in{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;gap:2px;overflow-x:auto}
.subnav a,.subnav button{color:#fff;background:none;border:0;padding:7px 12px;font-size:12px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:5px;opacity:.95}
.subnav a:hover,.subnav button:hover{background:rgba(255,255,255,.15);text-decoration:none}
.subnav .ic{display:inline-block;width:16px;height:16px;border:1.5px solid #fff;border-radius:3px;font-size:9px;line-height:13px;text-align:center}
.subnav .sp{margin-left:auto}

/* ===== layout ===== */
.wrap{max-width:1100px;margin:0 auto;padding:18px 16px 60px;display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}
@media(max-width:860px){.wrap{grid-template-columns:1fr}}
.side{position:sticky;top:12px}
@media(max-width:860px){.side{position:static}}
.crumb{font-size:12px;color:var(--ink3);margin-bottom:12px}
.crumb a{color:var(--ink2)}

/* section heads */
.bar-h{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;padding:10px 16px;border-radius:6px 6px 0 0;font-size:16px;font-weight:700;font-family:"Zen Kaku Gothic New",sans-serif;display:flex;justify-content:space-between;align-items:center;gap:10px}
.bar-h a{color:#fff;font-size:12px;font-weight:500;opacity:.9}
.line-h{border-left:4px solid var(--brand);padding-left:12px;font-size:18px;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.line-h a{font-size:12.5px;font-weight:500}
.sec{margin-bottom:28px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:6px}
.box.pad{padding:16px}

/* hero search (tabelog) */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;margin-bottom:22px;box-shadow:var(--shadow)}
.hero h1{font-size:20px;font-weight:900;margin-bottom:4px}
.hero p{margin:0 0 14px;color:var(--ink2);font-size:13px}
.sform{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.sform select,.sform input{border:0;padding:11px 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);min-width:0}
.sform select{border-right:1px solid var(--line);flex:0 0 160px}
.sform input{flex:1}
.sform button{border:0;background:var(--score);color:#fff;font-weight:700;padding:0 22px;font-size:15px}
@media(max-width:520px){.sform{flex-wrap:wrap}.sform select{flex:1 0 100%;border-right:0;border-bottom:1px solid var(--line)}.sform button{flex:1 0 100%;padding:10px}}

/* worries banner (men-esthe) */
.worry{background:linear-gradient(135deg,var(--chip),var(--surface));border:1px solid var(--line);border-radius:6px;padding:18px 20px;margin-bottom:22px}
.worry h2{font-size:19px;font-weight:900;color:var(--brand-dk);margin-bottom:10px}
:root[data-theme="dark"] .worry h2{color:var(--chip-ink)}
.worry ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
@media(max-width:600px){.worry ul{grid-template-columns:1fr}}
.worry li{display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:500}
.worry li::before{content:"✔";flex:none;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;display:grid;place-items:center;margin-top:3px}
.worry .to{margin-top:10px;font-size:13px;color:var(--ink2)}

/* genre tiles (tabelog) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}
.tile .tilebg{position:absolute;inset:0;width:100%;height:100%}.tile b,.tile span{position:relative}
.tile{position:relative;border-radius:6px;padding:18px 16px;color:#fff;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.tile:hover{text-decoration:none;filter:brightness(1.06)}
.tile b{font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.tile span{font-size:12px;opacity:.95}
.tile.g1{background:linear-gradient(135deg,#1B7F86,#3FC0B0)}
.tile.g2{background:linear-gradient(135deg,#3B5BA9,#6C8EE3)}
.tile.g3{background:linear-gradient(135deg,#B4622A,#F0A052)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{display:inline-block;border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-size:12.5px;padding:3px 10px;border-radius:3px}
.chip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.chip.sel{background:var(--brand);color:#fff;border-color:var(--brand)}

/* recommend cards (men-esthe) */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.card .nm{padding:10px 14px 0;font-weight:700;font-size:15px;color:var(--brand-dk)}
:root[data-theme="dark"] .card .nm{color:var(--chip-ink)}
.card .nm small{font-weight:500;color:var(--ink2);font-size:12.5px}
.visual{margin:10px 14px 0;height:130px;width:calc(100% - 28px);border-radius:4px;display:block}
.visual.tall{height:210px;margin:0;width:100%}
.card .lead{padding:10px 14px;font-size:13px;color:var(--ink2);flex:1}
.card .sc{padding:0 14px;display:flex;align-items:center;gap:8px}
.sc b{font-family:"Zen Kaku Gothic New",sans-serif;color:var(--score);font-size:22px;font-weight:900}
.sc .n{font-size:12px;color:var(--ink3)}
.stars{color:var(--star);letter-spacing:1px;font-size:14px;white-space:nowrap}
.stars i{font-style:normal;color:var(--star-off)}
.cta{display:block;margin:12px 14px 14px;padding:11px;text-align:center;background:var(--surface2);border:1px solid var(--line);border-radius:4px;color:var(--brand-dk);font-weight:700;font-size:13.5px;position:relative}
:root[data-theme="dark"] .cta{color:var(--chip-ink)}
.cta::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--ink3)}
.cta:hover{text-decoration:none;border-color:var(--brand)}

/* list rows */
.rows{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.row{display:grid;grid-template-columns:36px 92px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);color:inherit}
.row:first-child{border-top:0}
.row:hover{background:var(--surface2);text-decoration:none}
.rank{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:20px;color:var(--ink3);text-align:center}
.rank.top{color:var(--score)}
.thumb{height:56px;width:100%;border-radius:4px;display:block}
.row .t{font-weight:700;font-size:15px}
.row .s{font-size:12px;color:var(--ink2)}
.score{text-align:right}
.score b{font-family:"Zen Kaku Gothic New",sans-serif;font-size:22px;font-weight:900;color:var(--score)}
.score span{display:block;font-size:11px;color:var(--ink3)}
.tag{display:inline-block;background:var(--chip);color:var(--chip-ink);font-size:11px;padding:1px 7px;border-radius:3px;font-weight:700;margin-right:5px;vertical-align:middle}
.tag.gray{background:var(--surface2);color:var(--ink3)}
@media(max-width:560px){.row{grid-template-columns:30px 1fr}.thumb{display:none}.score{grid-column:2;text-align:left;display:flex;gap:8px;align-items:baseline}}
.verified{color:var(--good);font-size:11.5px;font-weight:700}
.pending{color:var(--warn);font-size:11.5px;font-weight:700}

/* review cards (men-esthe reviewer style) */
.rv{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin-bottom:10px;display:grid;grid-template-columns:56px 1fr;gap:14px}
.rv .av{width:56px;height:56px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:var(--surface2)}.rv .av svg{width:100%;height:100%;display:block}
.rv .hd{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12.5px;color:var(--ink2)}
.rv .hd .who{font-weight:700;color:var(--brand-dk);font-size:14px}
:root[data-theme="dark"] .rv .hd .who{color:var(--chip-ink)}
.rv .ax{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 14px;margin:6px 0;font-size:12.5px}
.rv .ax span{display:flex;justify-content:space-between;gap:8px}
.rv .ax b{font-weight:500;color:var(--ink2)}
.rv .tot{font-size:12.5px;color:var(--ink2)}
.rv .tot b{color:var(--score);font-size:18px;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;margin-left:4px}
.rv .ttl{font-weight:700;font-size:14.5px;margin-top:6px}
.rv p{margin:2px 0 0;font-size:13.5px;color:var(--ink)}
.rv .to{font-size:12px;margin-top:4px}
@media(max-width:480px){.rv{grid-template-columns:1fr}.rv .av{display:none}}

/* detail */
.title-bar{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;padding:14px 18px;border-radius:6px 6px 0 0}
.title-bar h1{font-size:22px;font-weight:900}
.title-bar .kana{font-size:12px;opacity:.9}
.dbox{background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;padding:16px}
.bigscore{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px}
.bigscore b{font-family:"Zen Kaku Gothic New",sans-serif;font-size:42px;font-weight:900;color:var(--score);line-height:1}
.bigscore .stars{font-size:18px}
.bigscore small{display:block;color:var(--ink3);font-size:12px}
.axes3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
@media(max-width:480px){.axes3{grid-template-columns:1fr}}
.axbox{background:var(--surface2);border-radius:4px;padding:8px 12px}
.axbox span{display:block;font-size:12px;color:var(--ink2)}
.axbox b{font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px;font-weight:900;color:var(--score)}
.bar{height:6px;background:var(--star-off);border-radius:3px;margin-top:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--star)}
.survey{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin-top:14px;font-size:13.5px}
.survey h3{font-size:14px;font-weight:700;display:inline-block;background:var(--chip);color:var(--chip-ink);padding:2px 10px;border-radius:3px;margin-bottom:8px}
.survey p{margin:0}
.survey mark{background:none;color:var(--score);font-weight:700}
.acc{display:block;width:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;border:0;border-radius:6px;padding:13px;font-weight:700;font-size:15px;margin:14px 0}
.bbs{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:14px}
.bbs .bar-h{border-radius:0}
.bbs-body{padding:12px 14px}
.bpost{background:var(--surface2);border-radius:4px;padding:10px 12px;margin-bottom:6px;font-size:13.5px}
.bpost .no{font-weight:700;color:var(--ink3);font-size:12px;margin-right:8px}
.bpost .d{font-size:11.5px;color:var(--ink3);margin-left:8px}
.bpost p{margin:2px 0 0;white-space:pre-wrap}
.bbs-form{display:flex;gap:8px;margin-top:10px}
.bbs-form input{flex:1;border:1px solid var(--line);border-radius:4px;padding:9px 12px;font:inherit;font-size:13.5px;background:var(--surface);color:var(--ink);min-width:0}
dl.facts{display:grid;grid-template-columns:100px 1fr;gap:6px 12px;margin:0;font-size:13.5px}
dl.facts dt{color:var(--ink3);font-size:12.5px}
dl.facts dd{margin:0}
.info{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;margin-top:14px}
.info h3{border-left:4px solid var(--brand);padding-left:10px;font-size:15px;margin-bottom:10px}

/* sidebar */
.sbox{background:var(--surface);border:1px solid var(--line);border-radius:6px;margin-bottom:14px;overflow:hidden}
.sbox .bar-h{font-size:14px;padding:8px 14px;border-radius:0}
.sbox .in{padding:12px 14px}
.sbox .grp{font-size:12.5px;font-weight:700;color:var(--ink2);margin:8px 0 4px}
.sbox .grp:first-child{margin-top:0}
.sitem{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line);align-items:center;color:inherit;font-size:13px}
.sitem:first-child{border-top:0}
.sitem:hover{text-decoration:none;background:var(--surface2)}
.sitem .thumb{height:40px}
.sitem .nm{font-weight:700;color:var(--link);line-height:1.3}
.sitem .m{font-size:11.5px;color:var(--ink3)}
.sitem .m b{color:var(--score)}
.regbox{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-radius:6px;padding:16px;margin-bottom:14px}
.regbox h3{font-size:15px;font-weight:900;margin-bottom:6px}
.regbox p{margin:0 0 10px;font-size:12.5px;opacity:.95}
.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:4px;padding:10px 16px;font-weight:700;font-size:14px;text-align:center}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.wide{display:block;width:100%}
.btn.orange{background:var(--score);color:#fff}
.btn.white{background:#fff;color:var(--brand-dk)}
.btn.ghost{background:transparent;color:var(--brand-dk);border:1px solid var(--brand)}
:root[data-theme="dark"] .btn.ghost{color:var(--chip-ink)}
.fav{background:none;border:1px solid var(--line);border-radius:4px;padding:6px 10px;font-size:12.5px;color:var(--ink2);display:inline-flex;gap:6px;align-items:center}
.fav.on{color:var(--bad);border-color:var(--bad)}
.muted{color:var(--ink3);font-size:12.5px}
.lock{background:var(--surface);border:1px dashed var(--line);border-radius:6px;padding:26px;text-align:center}
.lock h3{font-size:16px;margin-bottom:6px}

/* forms */
.form{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px}
.form h2{font-size:19px;font-weight:700;margin-bottom:4px}
.f{margin-top:14px}
.f label{display:block;font-weight:700;font-size:13px;margin-bottom:5px}
.f label small{font-weight:400;color:var(--ink3);margin-left:6px}
.f input[type=text],.f input[type=email],.f textarea,.f select{width:100%;border:1px solid var(--line);border-radius:4px;padding:9px 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.f textarea{min-height:130px;resize:vertical}
.starpick{display:flex;gap:2px}
.starpick button{background:none;border:0;font-size:28px;color:var(--star-off);padding:0 2px;line-height:1}
.starpick button.on{color:var(--star)}
.hint{font-size:12.5px;color:var(--ink2);background:var(--surface2);padding:10px 12px;border-radius:4px;margin-top:8px}
.err{color:var(--bad);font-size:13px;margin-top:6px}
.list-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.list-h h1{font-size:20px;font-weight:900}
.list-h select{border:1px solid var(--line);border-radius:4px;padding:5px 10px;font:inherit;font-size:13px;background:var(--surface);color:var(--ink)}

/* modal / toast / footer */
.ov{position:fixed;inset:0;background:rgba(10,15,25,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--surface);border-radius:8px;padding:24px;max-width:420px;width:100%;box-shadow:var(--shadow)}
.modal h2{font-size:19px;font-weight:900}
.modal p{color:var(--ink2);font-size:13px;margin:6px 0 0}
.modal .x{float:right;background:none;border:0;font-size:20px;color:var(--ink3)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:4px;font-size:13.5px;z-index:60;box-shadow:var(--shadow)}
.foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:30px;padding-top:16px;font-size:12px;color:var(--ink3);display:flex;gap:16px;flex-wrap:wrap}
.topbtn{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;border:0;font-size:18px;box-shadow:var(--shadow)}
@media (prefers-reduced-motion:no-preference){.card,.row,.chip,.cta{transition:filter .15s,border-color .15s,background .15s}}

/* --- static site additions --- */
.wrap.single{grid-template-columns:1fr}
.hero-top{background:linear-gradient(135deg,var(--brand-dk),var(--brand2));color:#fff;padding:26px 22px;border-radius:6px;margin-bottom:22px}
.hero-top h1{font-size:22px;font-weight:900;color:#fff}
.hero-top p{margin:6px 0 14px;font-size:13.5px;opacity:.95}
.hero-top .sform{border:0}
.seo-lead{font-size:14px;color:var(--ink2);margin:0 0 14px}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;margin-top:14px}
.faq h3{border-left:4px solid var(--brand);padding-left:10px;font-size:15px;margin-bottom:10px}
.faq dt{font-weight:700;margin-top:10px}.faq dd{margin:2px 0 0;font-size:13.5px;color:var(--ink2)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;background:var(--surface2);color:var(--ink2);font-weight:500;padding:8px 10px;width:110px;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl a{word-break:break-all}
.member-only{position:relative}
.member-only .blur{filter:blur(5px);pointer-events:none;user-select:none}
.member-only .gate{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.2),var(--surface) 70%)}
:root[data-theme="dark"] .member-only .gate{background:linear-gradient(180deg,rgba(0,0,0,.1),var(--surface) 70%)}
.gate-box{text-align:center;padding:16px}
.gate-box h3{font-size:16px;margin-bottom:6px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px}
.foot-links a{color:var(--ink3)}
.pg{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.pg a{border:1px solid var(--line);border-radius:4px;padding:5px 10px;font-size:13px;background:var(--surface)}
.hdr-in{gap:14px}
.gnav a{padding:8px 9px}
.loading{color:var(--ink3);font-size:13px;padding:10px}