/* 配色: オフホワイト / 深いグリーン / 柔らかなベージュ / チャコール。写真を主役に、装飾は置かない。Airbnb型の検索UIと大きな角丸。 */
:root{
  --bg:#FAF9F6; --surface:#FFFFFF; --ink:#25332E; --ink-2:#5E6C66; --line:#E6E8E1; --sub:#7A8B83; --sage-pale:#F0F3EE;
  --green:#1F4A3F; --green-ink:#FFFFFF; --green-soft:#E3ECE7; --beige:#E2A882; --beige-soft:#F8E9DD; --fill:#F0F3EE;
  --warn:#7A4B00; --warn-bg:#F6E8CC; --closed:#9C2E27; --closed-bg:#F5DCD9; --unk:#6A7370;
  --r:18px; --r-s:12px;
  --g-forest:linear-gradient(160deg,#DFE8E0,#C6D5CA); --g-water:linear-gradient(160deg,#DBE8E7,#BED1D0); --g-shrine:linear-gradient(160deg,#E6E9E3,#CDD3CC); --g-view:linear-gradient(160deg,#F6E4D5,#E9CBB2); --ph-ink:#5E6C66;
  --ff:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --ff-d:"Zen Maru Gothic","Noto Sans JP","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif; --on-accent:#25332E;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#131A17; --surface:#1B2421; --ink:#ECEAE4; --ink-2:#A3ADA9; --line:#2D3835; --sub:#7A8B83; --sage-pale:#1A2420;
  --g-forest:linear-gradient(160deg,#2F5547,#1E3A31); --g-water:linear-gradient(160deg,#3E5E59,#26413D); --g-shrine:linear-gradient(160deg,#46524C,#27302C); --g-view:linear-gradient(160deg,#6A5240,#4A382B); --ph-ink:#C7D2CC;
  --green:#A9CDBB; --green-ink:#112019; --green-soft:#223730; --beige:#E2A882; --beige-soft:#3A2C22; --fill:#232C29;
  --warn:#EBC27A; --warn-bg:#3A2D14; --closed:#F0A29C; --closed-bg:#40201D; --unk:#A3ADA9; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#131A17; --surface:#1B2421; --ink:#ECEAE4; --ink-2:#A3ADA9; --line:#2D3835; --sub:#7A8B83; --sage-pale:#1A2420;
  --g-forest:linear-gradient(160deg,#2F5547,#1E3A31); --g-water:linear-gradient(160deg,#3E5E59,#26413D); --g-shrine:linear-gradient(160deg,#46524C,#27302C); --g-view:linear-gradient(160deg,#6A5240,#4A382B); --ph-ink:#C7D2CC;
  --green:#A9CDBB; --green-ink:#112019; --green-soft:#223730; --beige:#E2A882; --beige-soft:#3A2C22; --fill:#232C29;
  --warn:#EBC27A; --warn-bg:#3A2D14; --closed:#F0A29C; --closed-bg:#40201D; --unk:#A3ADA9; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);font-size:15.5px;line-height:1.8;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
a{color:var(--green);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-family:var(--ff-d);font-weight:700;line-height:1.4;margin:0;text-wrap:balance}
h3{font-weight:700}
h1{font-size:clamp(1.8rem,5.6vw,2.8rem);letter-spacing:-.01em}
h2{font-size:clamp(1.2rem,3vw,1.5rem);margin-bottom:.3em}
h3{font-size:1rem}
p{margin:.5em 0;max-width:40em}
small,.sm{font-size:.8rem;color:var(--ink-2)}
.wrap{max-width:1080px;margin:0 auto}
.sec{padding-block:clamp(24px,4.5vw,44px)}
.lead{color:var(--ink-2)}
.ttl{font-size:clamp(1.5rem,4.2vw,2.1rem)}

/* header: モバイルは 左メニュー / 中央ロゴ / 右検索 */
.hdr{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding-block:8px;position:relative}
.hdr .menu{grid-column:1;grid-row:1}
.brand{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;color:var(--green);text-decoration:none;line-height:1}
.logo{display:block;height:27px;width:auto}
.logo .dot{fill:#E2A882}
.sbtn{grid-column:3;grid-row:1;justify-self:end}
.ib{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:transparent;border:0;color:var(--ink);cursor:pointer}
.ib:hover{background:var(--fill)}
.ib svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nav{display:flex;flex-wrap:wrap;gap:2px 20px;font-size:.88rem}
.nav a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a[aria-current="page"],.nav a:hover{border-bottom-color:var(--green)}
@media (min-width:821px){
  .hdr{display:flex;gap:28px;padding-block:14px}
  .ib.menu{display:none}
  .brand{order:1;justify-self:auto}.logo{height:31px}
  .nav{order:2;margin-left:auto}.sbtn{order:3}
}
@media (max-width:820px){
  .nav{display:flex;position:absolute;left:0;right:0;top:100%;z-index:30;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:6px 4px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
  html.js .nav:not(.open){display:none}
  .nav a{padding:12px 14px;border:0}
  html:not(.js) .nav{position:static;box-shadow:none;grid-column:1/-1;grid-row:2;flex-direction:row;flex-wrap:wrap;border:0;background:none}
}

/* hero: 写真（または深緑の色面）に見出しと検索を重ねる */
.hero{margin-top:4px}
.hero-img{position:relative;border-radius:20px;overflow:hidden;min-height:clamp(300px,56vw,420px);background:var(--sage-pale);display:flex;align-items:flex-end;isolation:isolate}
.hero-img.has{background:var(--g-forest)}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-img.has::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,35,29,.10) 0%,rgba(15,35,29,.55) 100%)}
.hero-in{padding:clamp(20px,4vw,40px);width:100%}
.hero-in h1{color:var(--ink)}.hero-in p{color:var(--ink-2)}
.hero-img.has .hero-in h1,.hero-img.has .hero-in p{color:#fff}
.hero-in p{margin:.7em 0 0;opacity:.92;max-width:30em}
.search{display:flex;align-items:center;gap:10px;background:var(--fill);border-radius:var(--r-s);padding:0 16px;min-height:52px;margin-top:16px}
.search.white{background:#fff;max-width:560px;margin-top:22px;border:1px solid var(--line)}
.hero-img.has .search.white{border-color:transparent}
:root[data-theme="dark"] .search.white,:root[data-theme="dark"] .search.white input{background:var(--surface);color:var(--ink)}
.search.white input{color:#25332E}
.search svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round}
.search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);padding:12px 0;outline:none}
.search:focus-within{outline:2px solid var(--green)}
.search.white:focus-within{outline:2px solid var(--beige)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
a.pill,.pills label span{display:inline-block;padding:7px 16px;border-radius:999px;background:var(--fill);color:var(--ink);font-size:.86rem;font-weight:500;text-decoration:none;border:1px solid transparent}
a.pill:hover{border-color:var(--sub)}
.pills label{position:relative}
.pills input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pills input:checked+span{background:var(--beige);color:var(--on-accent);font-weight:700}
.pills input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:8px 22px;border-radius:var(--r-s);font:700 .92rem var(--ff);text-decoration:none;border:1.5px solid var(--sub);color:var(--green);background:transparent;cursor:pointer}
.btn:hover{background:var(--green-soft)}
.btn.go{background:var(--green);color:var(--green-ink);border-color:var(--green)}
.btn.go:hover{filter:brightness(1.12);background:var(--green)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.sm2{min-height:36px;padding:4px 14px;font-size:.82rem}

.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 20px;margin-bottom:14px}
.head h2{margin:0}
.head a{font-size:.86rem;color:var(--ink-2)}

/* media: 写真が主役。無い場合は落ち着いた色面 */
.media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--g-forest);display:block}
.media.t-water{background:var(--g-water)} .media.t-shrine{background:var(--g-shrine)} .media.t-view{background:var(--g-view)}
.media:not(.has)::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 60% at 80% 8%,rgba(255,255,255,.55),transparent 62%)}
.media:not(.has)::after{content:"写真準備中";position:absolute;right:12px;bottom:10px;font-size:.66rem;color:var(--ph-ink);opacity:.8}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cr{position:absolute;left:10px;bottom:10px;font-size:.7rem;color:#fff;background:rgba(35,42,41,.72);padding:2px 10px;border-radius:999px}
.media.wide{aspect-ratio:16/9}
@media (min-width:821px){.media.wide{aspect-ratio:21/9}}

/* cards (Airbnb型: 枠なし) */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;gap:2px;min-width:0}
.card .media{margin-bottom:8px}
.card:hover .media{filter:brightness(1.04)}
.card h3{font-size:.98rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card .cmp-btn{position:relative;z-index:2}
.sub{margin:0;font-size:.8rem;color:var(--ink-2);line-height:1.5}
.wlk{margin:2px 0 0;font-size:.82rem;line-height:1.5}
.wlk b{font-weight:700}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.cmp-btn{margin-top:8px;align-self:flex-start;background:transparent;border:1px solid var(--line);border-radius:999px;font:500 .76rem var(--ff);color:var(--ink-2);padding:3px 12px;cursor:pointer}
.cmp-btn[aria-pressed="true"]{background:var(--green-soft);color:var(--green);border-color:var(--green)}
.chip{font-weight:500;display:inline-block;padding:0 10px;border-radius:999px;font-size:.72rem;background:var(--beige-soft);color:var(--ink)}
.st{display:inline-block;padding:0 10px;border-radius:999px;font-size:.72rem;font-weight:700}
.st.caution{background:var(--warn-bg);color:var(--warn)} .st.unknown{background:var(--fill);color:var(--unk)} .st.closed{background:var(--closed-bg);color:var(--closed)} .st.open{background:var(--green-soft);color:var(--green)}

.cta-card{display:block;background:var(--fill);border-radius:var(--r);padding:22px 22px 18px;text-decoration:none;color:var(--ink);max-width:680px}
.cta-card h3{font-size:1.2rem;margin-bottom:6px}
.cta-card p{margin:0;color:var(--ink-2)}
.cta-card .ar{display:block;text-align:right;font-size:1.3rem;margin-top:6px}
.cta-card:hover{background:var(--beige-soft)}

/* 歩く分数くらべ */
.ruler{background:var(--surface);border-radius:var(--r);border:1px solid var(--line);padding:18px}
.ruler h2{font-size:1.1rem;margin:0}
.rl{display:grid;gap:5px;margin-top:12px}
.rl-row{display:grid;grid-template-columns:7.4em minmax(0,1fr);align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:.86rem}
.rl-row:hover .rl-name{text-decoration:underline}
.rl-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-track{position:relative;height:20px;border-left:1px solid var(--line);background:linear-gradient(90deg,transparent calc(50% - .5px),var(--line) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}
.rl-bar{position:absolute;left:0;top:3px;height:14px;border-radius:0 7px 7px 0;background:var(--green)}
.rl-bar span{position:absolute;right:8px;top:0;line-height:14px;font-size:.72rem;font-weight:700;color:var(--green-ink)}
.rl-hatch{position:absolute;top:3px;height:14px;right:0;background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 8px)}
.rl-hatch.full{left:0}
.rl-lab{position:absolute;top:0;line-height:20px;font-size:.74rem;font-weight:700;white-space:nowrap}
.rl-lab.part,.rl-lab.unk{color:var(--ink-2);font-weight:400}
.rl-lab.unk{left:8px}
.rl-axis{display:block;position:relative;height:1.2em;padding-left:calc(7.4em + 8px);font-size:.7rem;color:var(--ink-2);margin-top:4px}
.rl-axis .ax{position:relative;height:100%}
.rl-axis .ax span{position:absolute;top:0;transform:translateX(-50%)}
.rl-axis .ax span:first-child{transform:none} .rl-axis .ax span:last-child{transform:translateX(-100%)}
@media (max-width:560px){.rl-row{grid-template-columns:5.8em minmax(0,1fr)}.rl-axis{padding-left:calc(5.8em + 8px)}}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:22px}
.three h3{margin-bottom:4px}
.three p{font-size:.9rem;color:var(--ink-2);margin:0}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}

/* list */
.more{margin-top:12px}
.more summary{display:inline-flex;list-style:none;cursor:pointer;font-weight:700;font-size:.86rem;padding:7px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.more summary::-webkit-details-marker{display:none}
.more[open] summary{background:var(--fill)}
.more .box{display:grid;gap:12px;padding:14px 0 4px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:500;font-size:.8rem;color:var(--ink-2);padding:0;margin-bottom:6px}
select{font:inherit;font-size:.88rem;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);min-height:38px}
.note{background:var(--fill);border-radius:var(--r-s);padding:10px 14px;font-size:.86rem;margin:12px 0}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.tray{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;gap:12px;align-items:center;justify-content:space-between}
.cmp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:24px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:520px}
th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
thead th{font-weight:700;background:var(--green-soft)}
tbody th{color:var(--ink-2);font-weight:400;white-space:nowrap}

/* detail */
.crumb{font-size:.8rem;padding-top:4px;color:var(--ink-2)}
.dmain{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0 48px;align-items:start;margin-top:8px}
.panel{padding-block:22px;border-top:1px solid var(--line)}
.panel h2{font-size:1.2rem;margin-bottom:8px}
.panel h3{margin-bottom:6px}
.kv{display:grid;grid-template-columns:6.2em minmax(0,1fr);gap:4px 10px;font-size:.9rem;margin:6px 0 0}
.kv dt{color:var(--ink-2)} .kv dd{margin:0}
.tabs{display:inline-flex;background:var(--fill);border-radius:999px;padding:4px;margin:10px 0 6px}
.tabs button{font:700 .84rem var(--ff);padding:8px 20px;background:transparent;color:var(--ink);border:0;border-radius:999px;cursor:pointer;min-height:38px}
.tabs button[aria-selected="true"]{background:var(--beige);color:var(--on-accent)}
html:not(.js) .tabs{display:none}
.tp h3{font-size:.95rem;margin-top:10px}
html.js .tp h3{display:none}
.walkbig{display:flex;align-items:baseline;gap:8px;margin:8px 0 6px}
.walkbig b{font-size:2.2rem;font-weight:800;line-height:1}
.seg{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;height:6px;max-width:360px}
.seg i{background:var(--line);border-radius:3px}
.seg i.on{background:var(--green)}
.seg i.hat{background:repeating-linear-gradient(135deg,var(--line) 0 3px,transparent 3px 6px)}
.cta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.cta-main{padding:10px 28px}
.pr{display:inline-block;font-size:.68rem;font-weight:700;border:1px solid var(--warn);color:var(--warn);border-radius:4px;padding:0 5px;margin-right:6px}
.offer{display:block;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;margin-top:8px;text-decoration:none;color:var(--ink);background:var(--surface)}
ul.plain{margin:.3em 0;padding-left:1.2em}
.source li{margin:.2em 0;font-size:.86rem}
details.q{border-bottom:1px solid var(--line)}
details.q summary{cursor:pointer;padding:14px 2px;font-weight:700;font-size:.92rem;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";color:var(--green);font-weight:400;font-size:1.3rem;line-height:1}
details.q[open] summary::after{content:"−"}
details.q p{margin:0 0 14px;font-size:.9rem;color:var(--ink-2)}
.stk{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.stk b{display:block;font-size:.92rem;line-height:1.3} .stk small{display:block;line-height:1.3}
@media (min-width:821px){.stk{display:none}}
@media (max-width:820px){.dmain{grid-template-columns:minmax(0,1fr)} body[data-page="spot"]{padding-bottom:84px}}
label.f{display:grid;gap:4px;font-size:.88rem;font-weight:700;margin-bottom:12px}
input[type=text],textarea,select.full{width:100%;font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink)}
textarea{min-height:110px}
.ftr{border-top:1px solid var(--line);margin-top:24px;padding-block:24px 40px;font-size:.8rem;color:var(--ink-2)}
.ftr a{color:var(--ink-2)}
.ftr nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.price{font-weight:800;font-size:1.1rem}
.nb{display:inline-block}

.search input,select,.kv dt,.kv dd,.sub,.wlk{font-weight:500}
.kv dd,.wlk{font-weight:400}
.mh{font-size:1.15rem;margin-top:26px}
.ftr .flogo{height:24px;width:auto;color:var(--green);margin-bottom:10px;display:block}
.ftr .flogo .dot{fill:#E2A882}

.bandw{background:var(--sage-pale);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.cta-card{background:var(--surface);border:1px solid var(--line)}
.cta-card:hover{background:var(--beige-soft)}
.ruler{background:var(--surface)}
.rl-axis .ax span{white-space:nowrap}
/* 比較表：スマホでは横にスクロール。項目の列は固定 */
#cmp-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
#cmp-table table{min-width:560px}
#cmp-table th[scope=row]{position:sticky;left:0;z-index:1;background:var(--surface)}
.cmp-hint{margin:0 0 8px;color:var(--ink-2)}
@media (min-width:900px){.cmp-hint{display:none}}
.spot-now{font-size:1.05rem;font-weight:700;margin:4px 0 12px}
a.chip{text-decoration:none;border:1px solid var(--line);padding:2px 12px;margin:2px 0;font-size:.8rem}
a.chip:hover{border-color:var(--green);color:var(--green)}
.intro .pts{margin:10px 0 12px;padding-left:1.2em}
.intro .pts li{margin:4px 0}
/* 一覧表（車なしで行く・歩く量）：広い画面は列幅を決める。スマホは1か所ずつのカード */
table.stack{min-width:0;table-layout:fixed}
table.stack th:nth-child(1){width:15%}table.stack th:nth-child(2){width:30%}table.stack th:nth-child(3){width:13%}table.stack th:nth-child(4){width:15%}
table.stack td{overflow-wrap:anywhere;line-break:strict}
table.stack .walk{white-space:nowrap}
@media (max-width:760px){
  .tbl.stack{overflow:visible}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:auto}
  table.stack thead{display:none}
  table.stack tr{border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;margin:0 0 12px;background:var(--surface)}
  table.stack td{border:0;padding:4px 0;display:grid;grid-template-columns:6.5em 1fr;gap:10px}
  table.stack td::before{content:attr(data-label);font-weight:700;font-size:.78rem;color:var(--ink-2)}
  table.stack td:first-child{display:block;font-size:1rem;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
  table.stack td:first-child::before{display:none}
  table.stack .walk{white-space:normal}
}
/* 地図・乗換・時刻表・駐車場のボタン */
.maps{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.maprow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:6px 0}
.maprow .ml{font-weight:700;font-size:.88rem}
.maprow .ml small{display:block;font-weight:400;color:var(--ink-2);font-size:.76rem}
.maprow .mb{display:flex;flex-wrap:wrap;gap:6px}
.maprow.tt .mb{flex-basis:100%}
.maprow.tt .btn{min-height:38px;text-align:left}
/* 写真クレジット（写真の下のトグル。Yamatch と同じ形） */
.pcredit{margin:8px 0 0;padding:8px 14px;background:var(--fill);border-radius:var(--r-s);font-size:.78rem;color:var(--ink-2)}
.pcredit summary{cursor:pointer;font-weight:500}
.pcredit ul{margin:6px 0 2px;padding-left:1.2em}
.pcredit a{color:inherit}
.hero .pcredit{max-width:none}
/* アイコン（Lucide）：文字の高さに合わせる。見出しはブランド色 */
.ic{width:1.05em;height:1.05em;flex:none;vertical-align:-.16em;margin-right:.32em;stroke-width:2}
.ic.h{color:var(--green);width:1.1em;height:1.1em;margin-right:.4em}
.ic.big{width:1.6rem;height:1.6rem;color:var(--green);margin:0 .4em 0 0;vertical-align:middle}
.walkbig{display:flex;align-items:center;flex-wrap:wrap}
.btn .ic,.pill .ic,.chip .ic,.st .ic,legend .ic,.tabs .ic{margin-right:.35em}
.chip .ic,.st .ic{width:.95em;height:.95em}
.nav a .ic{width:1em;height:1em;color:var(--green)}
.maprow .ml .ic{color:var(--green)}
.intro dt .ic{color:var(--green)}
.pcredit summary .ic{width:1em;height:1em}
.stk .btn .ic{color:inherit}
.intro .kv{grid-template-columns:8.2em minmax(0,1fr)}
.intro dt{white-space:nowrap}
@media (max-width:420px){.intro .kv{grid-template-columns:1fr;gap:2px}.intro .kv dd{margin-bottom:8px}}
/* キャラクター（小さな相棒）：透過画像を背景になじませる。色の強いカード・アニメーションは付けない */
.chara{display:block;height:auto;flex:none;user-select:none;pointer-events:none}
/* A：トップ「気分から探す」 スマホ 64px／PC 100px */
.bubble{position:relative;font-size:.78rem;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}
.bubble::after{content:"";position:absolute;right:-6px;top:50%;width:9px;height:9px;background:var(--surface);border-right:1px solid var(--line);border-top:1px solid var(--line);transform:translateY(-50%) rotate(45deg)}
/* B：一覧の0件 スマホ 72px／PC 90px */
.empty{display:flex;align-items:center;gap:14px;margin:16px 0;padding:6px 0}
.empty[hidden]{display:none}
.empty-lead{font-weight:700;margin:0 0 4px;color:var(--green)}
.empty .sm{margin:0}
.c-empty{width:72px}
@media (min-width:768px){.c-empty{width:90px}}
/* B：詳細「行き方と歩く分数」の見出しの横 スマホ 56px／PC 72px（アクセス情報より目立たせない） */
/* C：フッターのロゴの近く スマホ 52px／PC 68px */
.fbrand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.fbrand .flogo{margin-bottom:0}
.fthanks{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:.78rem}
.c-thanks{width:52px}
@media (min-width:768px){.c-thanks{width:68px}}

/* A：トップ「気分から探す」。キャラクターは見出しのすぐ右に、見出しと縦の中心をそろえる（どの幅でも同じ） */
.mood{display:grid;grid-template-columns:max-content auto;justify-content:start;align-items:center;column-gap:14px;margin-top:22px}
.mood .mh{margin:0;white-space:nowrap}
.mood-chara{display:flex;flex-direction:row-reverse;align-items:center;gap:8px}
.mood-pills{margin-top:10px}
.c-guide{width:64px}
.bubble::after{right:auto;left:-6px;transform:translateY(-50%) rotate(-135deg)}
@media (max-width:420px){.bubble{display:none}}
@media (min-width:768px){.c-guide{width:92px}.mood{margin-top:28px;column-gap:18px}}
/* B：詳細「行き方と歩く分数」。見出しのすぐ横に、文字の高さに合わせて小さく */
.acc-head{display:flex;align-items:center;gap:12px}
.acc-head h2{margin:0}
.c-walk{width:52px}
@media (min-width:768px){.c-walk{width:64px}}
@media (min-width:768px){.fbrand{justify-content:flex-start;gap:28px}}
/* 車なしで行く・歩く量：写真つきのカード（表をやめた） */
.nc-h{display:flex;align-items:center;font-size:1.1rem;margin:28px 0 12px}
.nc-c{margin-left:10px;font:500 .78rem var(--ff);color:var(--ink-2);background:var(--fill);border-radius:999px;padding:2px 10px}
.nc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:768px){.nc-list{grid-template-columns:1fr 1fr;gap:18px}}
.nc-card{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;background:var(--surface);border-radius:var(--r);padding:12px;align-items:start}
@media (min-width:768px){.nc-card{grid-template-columns:132px minmax(0,1fr)}}
.nc-ph{display:block}
.nc-ph .media{border-radius:var(--r-s)}
.nc-body h3{font-size:1rem;margin:2px 0 2px}
.nc-body h3 a{color:var(--ink);text-decoration:none}
.nc-body h3 a:hover{color:var(--green);text-decoration:underline}
.nc-body .sub{font-size:.76rem;margin:0 0 8px}
.nc-body .sub .ic{width:.9em;height:.9em;margin-right:.15em;color:var(--green)}
.nc-walk{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;margin:0 0 6px}
.nc-walk .ic.wk{width:1.25rem;height:1.25rem;color:var(--green);margin:0}
.wk-n{font:700 1.5rem/1 var(--ff-d);color:var(--green)}
.wk-n small{font-size:.8rem;margin-left:1px}
.wk-n.unk{font-size:1rem;color:var(--ink-2)}
.wk-o{font-size:.76rem;color:var(--ink-2)}
.nc-route,.nc-note,.nc-cau{font-size:.8rem;line-height:1.55;margin:4px 0 0;color:var(--ink-2);display:flex;gap:2px}
.nc-route .ic,.nc-note .ic{color:var(--green);margin-top:.22em;flex:none}
.nc-cau{color:var(--ink)}
.nc-cau .ic{color:#B5651D;margin-top:.22em;flex:none}
/* D：探索キャラクター（検索ページの上）。スマホ 68px／PC 112px。検索フォームはその下に横幅いっぱい */
.s-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-top:10px}
.s-head .ttl{margin:0 0 4px}
.s-lead{margin:0 0 6px;font-size:.88rem;color:var(--ink-2)}
.c-explore{width:68px;margin-bottom:-6px}
@media (min-width:768px){.s-head{justify-content:flex-start;gap:32px}.c-explore{width:112px}}
.is-empty .c-explore{visibility:hidden}
/* 0件の操作ボタン */
.empty-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.empty .sm + .sm{margin-top:2px}
.s-head .ttl{font-size:clamp(1.4rem,6vw,2rem)}
.s-head .ttl .nb{display:inline-block}
/* 楽しみ方（温泉・カフェ）：気分の下の2段目。白地に枠で、気分より控えめに */
.pills.amen{margin-top:8px}
.pills.amen label span{background:var(--surface);border-color:var(--line);font-size:.82rem;padding:6px 14px}
.pills.amen input:checked+span{background:var(--beige);border-color:var(--beige)}
.pills label span .ic{margin-right:.3em}
/* 詳細：近くにあるもの */
.amen-panel li{display:block;margin:6px 0;font-size:.9rem;line-height:1.6}
.amen-panel li .ic{color:var(--green)}
.amen-panel li small{color:var(--ink-2);margin-left:2px}
/* 願いごと */
.lg-note{font-weight:400;font-size:.76rem;color:var(--ink-2);margin-left:4px}
.wish-link{margin:10px 0 0;font-size:.86rem}
.wish-link a{color:var(--green);font-weight:500}
.wish-q{font-size:.88rem;line-height:1.6;margin:6px 0 0}
.faith li{display:block;margin:6px 0;font-size:.9rem;line-height:1.6}
.faith li .ic,.faith dt .ic{color:var(--green)}
.faith small{color:var(--ink-2);margin-left:2px}
/* 詳細：h1 の下の検索語の1行・似た雰囲気の場所 */
.guide-line{margin:2px 0 4px;font-size:.78rem;color:var(--ink-2)}
.more-links{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.more-links li{font-size:.86rem}