/* 日本酒も、どっち：和紙の白地に墨の文字、藍と朱を少しだけ。スマホ幅を基準に、PCでは中央寄せ */
:root{
  --bg:#F6F3EC; --surface:#FFFFFF; --ink:#1F1D1A; --muted:#6B665E; --line:#E2DCCF;
  --ai:#26457A; --ai-soft:#E4E9F2; --shu:#B8402C; --shu-soft:#F6E4DF; --moss:#5F7334; --moss-soft:#E8EDDC;
  --display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15140F; --surface:#1E1C17; --ink:#ECE8DF; --muted:#A39D92; --line:#33302A;
  --ai:#93AEDB; --ai-soft:#22304A; --shu:#E58A75; --shu-soft:#3A241E; --moss:#A9C072; --moss-soft:#273020; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15140F; --surface:#1E1C17; --ink:#ECE8DF; --muted:#A39D92; --line:#33302A;
  --ai:#93AEDB; --ai-soft:#22304A; --shu:#E58A75; --shu-soft:#3A241E; --moss:#A9C072; --moss-soft:#273020; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75}
a{color:var(--ai)}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.35;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ai);outline-offset:2px}

.site-header{border-bottom:1px solid var(--line)}
.site-header .inner{max-width:720px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.logo{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:.04em}
.pr{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;padding:0 6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted);vertical-align:1px}

main{max-width:720px;margin:0 auto;padding:28px 16px 56px}
.screen{display:grid;gap:20px}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:700;color:var(--shu)}

/* はじめ */
.hero{display:grid;gap:18px;padding:12px 0 8px}
.hero h1{font-size:clamp(36px,9vw,56px);font-weight:800}
.hero h1 em{font-style:normal;color:var(--shu)}
.lead{font-size:16px;max-width:36em}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;font-weight:700;display:grid;gap:2px;text-align:center}
.steps span{font-family:var(--display);color:var(--ai);font-size:18px}
.btn-main{justify-self:stretch;font-size:17px;font-weight:700;padding:15px 20px;border-radius:12px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
.btn-main:hover{opacity:.9}
.btn-main.ghost{background:transparent;color:var(--ink)}
.hero-note{font-size:13px;color:var(--muted)}
.points{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.points li{display:grid;gap:2px;border-left:3px solid var(--ai);padding:2px 0 2px 12px}
.points b{font-family:var(--display);font-size:17px}
.points span{font-size:14px;color:var(--muted)}

/* 質問 */
.progress{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.bar{height:100%;width:0;background:var(--ai);transition:width .25s}
.qmeta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.kind{font-size:11px;font-weight:700;padding:0 8px;border-radius:4px;background:var(--ai-soft);color:var(--ai)}
.kind.k-ラベル,.kind.k-風景{background:var(--moss-soft);color:var(--moss)}
.kind.k-冒険,.kind.k-知名度,.kind.k-予算{background:var(--shu-soft);color:var(--shu)}
.qtext{font-size:clamp(24px,6vw,32px);font-weight:800;outline:none}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:grid;gap:10px;justify-items:center;align-content:center;min-height:120px;padding:18px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:16px;font-weight:700;line-height:1.5;text-align:center;transition:border-color .15s,transform .1s}
.opt:hover{border-color:var(--ai)}
.opt:active{transform:scale(.98)}
.opt[aria-pressed="true"]{border-color:var(--ai);background:var(--ai-soft)}
.opt svg{width:84px;height:120px;display:block}
.photo{position:relative;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg);display:grid;place-items:center}
.photo .emo{font-size:48px;line-height:1}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.opt:has(.photo){padding:10px 10px 14px;align-content:start}
.btn-back{justify-self:start;background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:6px 0}

/* 結果 */
.type{font-size:clamp(22px,5.6vw,30px);font-weight:800;outline:none}
.type-sub{font-size:14px;color:var(--muted)}
.slate{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pick{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:8px;min-width:0}
.pick .head{display:flex;gap:10px;align-items:baseline}
.pick .n{font-family:var(--display);font-size:26px;color:var(--ai);line-height:1}
.pick .why{font-size:13px;font-weight:700;color:var(--moss)}
.pick .nm{font-family:var(--display);font-weight:800;font-size:24px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.pick .pct{font-family:var(--body);font-size:13px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.pick .desc{font-size:14px;color:var(--muted);line-height:1.65}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-size:11px;font-weight:700;padding:1px 8px;border-radius:4px;background:var(--ai-soft);color:var(--ai)}
.badge.g{background:var(--moss-soft);color:var(--moss)}
.badge.w{background:var(--shu-soft);color:var(--shu)}
.item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:2px 12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);text-decoration:none;margin-top:4px}
.item:hover{border-color:var(--ai)}
.item img,.item .noimg{width:72px;height:72px;object-fit:contain;border-radius:8px;background:#fff;grid-row:span 3}
.item .iname{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .iprice{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.item .iprice small{font-size:11px;font-weight:400;color:var(--muted);margin-left:6px}
.item .cta{font-size:14px;font-weight:700;color:var(--ai);display:flex;gap:6px;align-items:center}
.more{font-size:12px}
.pr-note{font-size:12px;color:var(--muted);line-height:1.6}

.fit,.share{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:10px}
.fit p:first-child,.share p{font-weight:700;font-size:15px}
.fit-btns,.share-btns{display:flex;flex-wrap:wrap;gap:8px}
.fit-btns button,.share-btns a,.share-btns button{flex:1 1 auto;text-align:center;font-size:14px;font-weight:700;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);text-decoration:none;cursor:pointer}
.fit-btns button:hover,.share-btns a:hover,.share-btns button:hover{border-color:var(--ai)}
.fit-btns button[aria-pressed="true"]{border-color:var(--ai);background:var(--ai-soft)}
.fit-thanks{font-size:13px;color:var(--muted)}

.mapbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.mapbox summary{cursor:pointer;font-weight:700;font-size:15px}
.mapbox .note{font-size:12px;color:var(--muted)}
#map{display:block;width:100%;height:auto;margin:10px 0 6px}
#map text{font-family:var(--body);fill:var(--ink);font-size:12px}
#map .axis{fill:var(--muted);font-size:11px}
#map .quad{fill:var(--muted);font-size:12px;font-weight:700}
#map .zero{stroke:var(--line);stroke-width:1}
#map circle.b{fill:var(--line);stroke:var(--surface);stroke-width:1}
#map circle.rec{fill:var(--ai);stroke:var(--surface);stroke-width:2}
#map circle.me{fill:none;stroke:var(--shu);stroke-width:2.5}
#map circle.me-in{fill:var(--shu)}
#map text.num{fill:#fff;font-size:11px;font-weight:700}

.site-footer{border-top:1px solid var(--line);max-width:720px;margin:0 auto;padding:24px 16px 40px;font-size:12px;color:var(--muted);display:grid;gap:6px}
.footer-logo{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink)}

/* プライバシーポリシー */
.doc{display:grid;gap:12px}
.doc h1{font-size:26px}
.doc h2{font-size:18px;margin-top:14px}
.doc ul{margin:0;padding-left:1.3em}
.doc .updated{font-size:13px;color:var(--muted)}

@media (min-width:640px){
  main{padding-top:40px}
  .opt{min-height:150px;font-size:17px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}