/* トウキョウお散歩手帳：日本語版・英語版で共通のスタイル（原本。本番には tools/release.py が osanpo.<番号>.css として出す）
   片方だけの指定は :where([lang="ja"]) / :where(html[lang="en"]) で包んでいる（詳細度は変わらない） */
/* Layout: 散歩人の手帳。上に「次の一歩」、月タブ、月の暦（行事の印つき）、その月の行事カード */
/* ==== 共通：色・文字などの変数（ライト／ダーク） ==== */
/* ライト（ふだんの色） */
:root:where([lang="ja"]){
  --paper:#e8ebe5; --card:#ffffff; --ink:#1d2827; --muted:#45524f; --line:#bcc6bf;
  --green:#1f5c4e; --green-soft:#e1ece7; --tram:#d39b14; --tram-soft:#f6ecd2; --kitsune:#b5532d;
  --c1:#2c8a6f; --c2:#d39b14; --c3:#c0563a; --c4:#4f72b3;
  --shu:#b32e24; --page:#fbfaf6;
  --display:"Kiwi Maru","Hiragino Maru Gothic ProN","Zen Maru Gothic",sans-serif;
  --body:"M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  --brush:"Yuji Syuku","Kiwi Maru",serif;
  --mono:"Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  /* 駅めぐり帳・おみくじ */
  --ai:#2b4c8c; --cell:#fbfaf6; --cellline:#dfe3dc; --ward:#8d9a95; --aka1:#f6d3c8; --aka2:#ecaa94; --aka3:#e0806a;
  --kusa2:#bcd99c; --kusa3:#97c172; --visit:#f3dc93; --kuji:#d39b14; --kujibg:#f6ecd2; --rail:#1d2827;
}
:root:where([lang="en"]){
  --paper:#e8ebe5; --card:#ffffff; --ink:#1d2827; --muted:#45524f; --line:#bcc6bf;
  --green:#1f5c4e; --green-soft:#e1ece7; --tram:#d39b14; --tram-soft:#f6ecd2; --kitsune:#b5532d;
  --c1:#2c8a6f; --c2:#d39b14; --c3:#c0563a; --c4:#4f72b3;
  --shu:#b32e24; --page:#fbfaf6;
  --display:"Kiwi Maru","Hiragino Maru Gothic ProN","Zen Maru Gothic",sans-serif;
  --body:"Nunito","M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  --brush:"Yuji Syuku","Kiwi Maru",serif;
  --mono:"Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  /* 駅めぐり帳・おみくじ */
  --ai:#2b4c8c; --cell:#fbfaf6; --cellline:#dfe3dc; --ward:#8d9a95; --aka1:#f6d3c8; --aka2:#ecaa94; --aka3:#e0806a;
  --kusa2:#bcd99c; --kusa3:#97c172; --visit:#f3dc93; --kuji:#d39b14; --kujibg:#f6ecd2; --rail:#1d2827;
}
/* ダーク：端末がダークのとき（画面の色で「ライト」を選んだ人は除く） */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#141b1a; --card:#1c2523; --ink:#e7ece9; --muted:#9aa8a4; --line:#2e3a37;
  --green:#6fb9a5; --green-soft:#1f3530; --tram:#e7b544; --tram-soft:#3a3121; --kitsune:#e08a62;
  --c1:#5fbf9f; --c2:#e7b544; --c3:#e58a6c; --c4:#8eaee8;
  --shu:#e0574a; --page:#232c2a;
  --ai:#8eaee8; --cell:#1f2826; --cellline:#2b3633; --ward:#6b7a76; --aka1:#4a2d27; --aka2:#6e3a2f; --aka3:#94493a;
  --kusa2:#3c5534; --kusa3:#517241; --visit:#4f4422; --kuji:#e7b544; --kujibg:#3a3121; --rail:#e7ece9;
  color-scheme:dark;
}}
/* 画面の色を自分で選んだとき */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{
  --paper:#141b1a; --card:#1c2523; --ink:#e7ece9; --muted:#9aa8a4; --line:#2e3a37;
  --green:#6fb9a5; --green-soft:#1f3530; --tram:#e7b544; --tram-soft:#3a3121; --kitsune:#e08a62;
  --c1:#5fbf9f; --c2:#e7b544; --c3:#e58a6c; --c4:#8eaee8;
  --shu:#e0574a; --page:#232c2a;
  --ai:#8eaee8; --cell:#1f2826; --cellline:#2b3633; --ward:#6b7a76; --aka1:#4a2d27; --aka2:#6e3a2f; --aka3:#94493a;
  --kusa2:#3c5534; --kusa3:#517241; --visit:#4f4422; --kuji:#e7b544; --kujibg:#3a3121; --rail:#e7ece9;
  color-scheme:dark;
}
/* ==== 共通：色・文字などの変数（ライト／ダーク） ここまで ==== */
:where(html[lang="ja"]) body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75}
:where(html[lang="en"]) body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;letter-spacing:-0.01em}
:where(html[lang="en"]) svg{letter-spacing:normal}
.wrap{max-width:880px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:28px 56px;display:grid;gap:22px}
header{display:grid;gap:6px}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--green)}
h1{font-family:var(--display);font-weight:500;font-size:clamp(30px,6vw,44px);line-height:1.2;margin:0;text-wrap:balance}
.lead{margin:0;color:var(--muted);max-width:60ch}
.proto{display:inline-block;font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:2px 10px;width:max-content}
.ph{position:relative;background:
  repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--green) 10%,transparent) 14px 15px),
  var(--green-soft);display:grid;place-items:center;text-align:center;padding:12px}
.ph span{font-family:var(--display);font-size:20px;color:var(--green)}
.ph .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .cap{position:absolute;left:0;right:0;bottom:0;margin:0;font-family:var(--body);font-size:13px;line-height:1.5;color:#fff;text-align:left;padding:18px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.ph small{display:block;font-family:var(--body);font-size:12px;color:var(--muted);margin-top:4px}
.tabs button:focus-visible,a:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
.mnav{display:flex;justify-content:space-between;align-items:center}
.filter{display:flex;align-items:baseline;flex-wrap:wrap;font-weight:700}
.filter .hint{font-weight:400;color:var(--muted)}
/* ==== 共通：ボタン ==== */
.btn{font:inherit;font-weight:700;border:0;background:var(--green);color:var(--paper);border-radius:999px;padding:8px 18px;cursor:pointer}
.btn:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
.btn:disabled{background:var(--line);color:var(--muted);cursor:default}
/* 文字だけのボタン（下線つき） */
.linkbtn{font:inherit;font-size:14px;font-weight:700;color:var(--green);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
/* ==== 共通：ボタン ここまで ==== */
.town{font-size:14px;color:var(--muted)}
.omikuji{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:12px}
.omikuji .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.omikuji h2{font-family:var(--display);font-size:20px;margin:0}
.kuji{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.kuji-box{width:60px;min-height:96px;padding:8px 0;border-radius:10px;background:var(--tram-soft);border:2px solid var(--tram);display:grid;place-items:center;font-family:var(--brush);font-size:22px;color:var(--kitsune);writing-mode:vertical-rl;letter-spacing:.1em}
.kuji-box.kuji-s{font-size:17px}
.kuji-box.kuji-xs{font-size:14px;width:52px}
.kuji dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
.kuji dt{font-size:13px;color:var(--muted);font-weight:700;padding-top:3px}
.kuji dd{margin:0}
.kuji a{color:var(--green);font-weight:700}
.shake{animation:shake .6s ease-in-out}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
/* ==== 御足印帳（帳面・めくり・絞り込み） ==== */
/* -- 見出し・数・ボタン -- */
.stamps{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.stamps b{color:var(--ink);font-family:var(--display);font-size:16px}
.book{display:grid;gap:12px}
.book-head{flex-wrap:wrap}
.book-head h2{font-family:var(--display);font-size:28px;margin:0}
.book-head rt{font-size:12px;font-family:var(--body);color:var(--muted);letter-spacing:0}
.book-head p{margin:0;color:var(--muted)}
.book-head rt.po{color:var(--shu);font-weight:700;font-size:14px}
.book-head p rt.po{font-size:12px}
.book-head b.po{color:var(--shu)}
.book-head .ore-line{display:inline-block;margin-top:4px;color:var(--ink)}
.book-head{gap:6px 14px}
.book-head .stamps{flex:1 1 auto;font-size:14px}
.about-btn{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--green);border-radius:999px;padding:3px 12px;cursor:pointer}
.book-empty{grid-column:1/-1;color:var(--muted);font-size:15px}
.book-head{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.book-head .stamps{display:grid;gap:0;line-height:1.35;color:var(--muted)}
.book-head .stamps .st-main{color:var(--ink);font-size:15px}
.book-head .stamps .st-n{font-family:var(--display);font-size:20px;color:var(--shu)}
.book-head .stamps .st-next{font-size:12px}
.book-head .stamps .st-of{font-size:14px;color:var(--muted);margin-left:1px}
@media (max-width:520px){.book-head h2{font-size:24px}.book-head .about-btn{grid-column:1/-1;justify-self:start}}
:where(html[lang="ja"]) .bk-note{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;width:calc(100% - 24px);max-width:520px;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:sheetup .25s ease-out}
:where(html[lang="ja"]) .bk-note p{margin:0;font-size:13px;line-height:1.55}
:where(html[lang="ja"]) .bk-note-ic{font-size:18px;line-height:1.3}
:where(html[lang="ja"]) .bk-note-b{grid-column:2;display:flex;align-items:center;gap:8px;justify-content:space-between}
:where(html[lang="ja"]) .bk-note-x{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;padding:4px 6px;cursor:pointer}
.bk-emo{font-family:var(--body)}
.book-head .bk-btns{grid-column:1/-1;justify-self:start;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.book-head .bk-btns .about-btn{grid-column:auto}
.bk-btns .bk-near{white-space:nowrap}
/* -- 地元の区 -- */
:where(html[lang="ja"]) .home-ward{margin:4px 0 10px;font-size:13px;color:var(--muted);display:grid;justify-items:start;gap:4px}
:where(html[lang="ja"]) .home-ward>span{display:block}
:where(html[lang="ja"]) .home-ward b{color:var(--ink)}
:where(html[lang="ja"]) .hw-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
:where(html[lang="ja"]) .hw-w{display:grid;gap:2px;justify-items:start;border-radius:10px;padding:8px 10px;text-align:left}
:where(html[lang="ja"]) .hw-w small{font-size:11px;color:var(--muted);font-weight:400}
:where(html[lang="ja"]) .hw-conf{background:color-mix(in srgb,var(--green) 10%,var(--card));border:1px solid var(--line);border-radius:10px;padding:10px 12px}
/* -- 絞り込み・並べ替え -- */
.fs-bar{min-width:0;max-width:100%;box-sizing:border-box;display:flex;gap:8px;align-items:center;margin:4px 0 6px}
.fs-bar input{flex:1 1 0;width:0;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;font:inherit;font-size:16px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
.fs-bar input:focus{outline:2px solid var(--green);outline-offset:1px}
.fs-open{flex:0 0 auto;display:grid;place-items:center;width:40px;height:36px;border:1.5px solid var(--green);background:var(--card);color:var(--green);border-radius:999px;padding:0;cursor:pointer}
.fs-open.on{background:var(--green);color:var(--paper)}
.fs-empty{grid-column:1/-1;padding:40px 8px;text-align:center;font-size:14px;line-height:1.7}
#fs-dlg .sheet h3{font-size:15px;margin:4px 0 6px;color:var(--ink);font-weight:700}
#fs-dlg .sheet h4{font-size:13px;margin:6px 0 4px;color:var(--ink);opacity:.75;font-weight:700}
.fs-sec{display:grid;gap:2px}
.fs-sub{display:grid;gap:8px;padding-left:12px;border-left:2px solid var(--line)}
.fs-seg{display:flex;gap:6px;flex-wrap:wrap}
.fs-seg button,.fs-tags button{font:inherit;font-size:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 12px;cursor:pointer}
.fs-seg button[aria-pressed=true],.fs-tags button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:var(--paper);font-weight:700}
.fs-tags{display:flex;gap:6px;flex-wrap:wrap}
.fs-tags small{opacity:.7;margin-left:2px}
#fs-dlg select{width:100%;font:inherit;font-size:16px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.fs-sel2{display:grid;grid-template-columns:1fr;gap:8px}
.fs-msg{font-size:13px;margin:2px 0 0;color:#c0392b}
.fs-foot{display:flex;gap:14px;align-items:center;justify-content:space-between;position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));background:var(--paper);padding:10px 0 4px;margin-top:4px;border-top:1px solid var(--line)}
.fs-go{font:inherit;font-size:15px;font-weight:700;border:0;background:var(--green);color:var(--paper);border-radius:999px;padding:9px 22px;cursor:pointer}
.fs-go:disabled{opacity:.45}
.fs-reset{font:inherit;font-size:15px;font-weight:700;color:var(--green);background:var(--card);border:1.5px solid var(--green);border-radius:999px;padding:8px 18px;cursor:pointer}
.fs-qw{position:relative;flex:1 1 0;min-width:0;display:flex}
.fs-qw input{padding-right:36px}
.fs-qw input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.fs-qx{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:var(--line);color:var(--ink);font-size:16px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.fs-qx[hidden]{display:none}
.fs-picked{display:flex;flex-wrap:wrap;gap:6px}
.fs-picked[hidden]{display:none}
.fs-picked button{font:inherit;font-size:14px;border:0;background:var(--green);color:var(--paper);border-radius:999px;padding:4px 10px 4px 12px;cursor:pointer;font-weight:700}
.fs-picked button span{margin-left:2px;opacity:.85}
.fs-tags button:disabled{opacity:.4;cursor:default}
/* -- 押したあとの案内・試作ページの帯 -- */
.after-press{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1.5px solid #b8892e;border-radius:12px;padding:10px 12px;background:color-mix(in srgb,#b8892e 8%,var(--card));font-size:15px;animation:fade .3s ease-out}
.after-press[hidden]{display:none}
.after-press .ap-x{font:inherit;border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;padding:0 4px}
.after-press a,.after-press button.ap-go{font:inherit;font-weight:700;color:var(--green);background:none;border:0;padding:0;cursor:pointer;text-align:left;text-decoration:underline}
.demo-bar{font-size:0;text-align:right;margin:10px 0 0;padding:0}
.demo-bar #demo-reset{font-size:12px;color:var(--sub,#888);opacity:.8}
/* -- 帳面（めくる札） -- */
.fl-t.mht{outline:2px dashed #c23a2b;outline-offset:-2px}
.mh-flag{position:absolute;top:4px;right:4px;z-index:2;background:#c23a2b;color:#fff;font-size:10px;line-height:1;padding:3px 5px;border-radius:3px;font-weight:700;letter-spacing:.05em}
.fl-t.mht .got{left:5px}
.fl-mihon{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;background:var(--card);border:1px dashed #c23a2b88;border-radius:10px;padding:10px 12px}
.fl-mihon .card{max-width:96px}
.fl-mihon p{margin:0;font-size:14px;line-height:1.7}
.fl-mihon p b{font-family:var(--display);font-weight:500;font-size:16px;display:block}
.fl-near{margin:8px 0 0;text-align:center}
.fl-near .btn{font-size:15px;padding:6px 16px}
.ura-tag{position:absolute!important;left:8px;top:8px;z-index:2;font-size:10px!important;font-weight:700;letter-spacing:.08em!important;line-height:1.4;color:#e6c870!important;background:#1f1a15;border:1px solid #c9a24a;border-radius:3px;padding:1px 6px;font-family:var(--body)!important;writing-mode:horizontal-tb!important;text-shadow:none!important}
.fl-wrap{max-width:520px;width:100%;margin:0 auto}
.fl-stage{position:relative;width:100%;aspect-ratio:3/3.55;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fl-page{position:absolute;inset:0;background:var(--page);border-radius:4px 10px 10px 4px;box-shadow:0 1px 0 var(--line),0 8px 18px rgb(0 0 0 / .12);padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.fl-page::before{content:"";position:absolute;inset:0 auto 0 0;width:14px;background:linear-gradient(90deg,rgb(0 0 0 / .10),transparent);pointer-events:none}
.fl-ph{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);line-height:1.3}
.fl-ph b{font-family:var(--brush);font-weight:400;font-size:18px;color:var(--ink);letter-spacing:.08em}
.fl-ph .of{font-family:var(--brush);font-size:15px;color:var(--muted);letter-spacing:.08em}
.fl-g{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;flex:1;min-height:0}
.fl-t{position:relative;border:0;padding:0;background:color-mix(in srgb,var(--line) 45%,var(--page));border-radius:3px;overflow:hidden;cursor:pointer;min-height:0;font:inherit}
.fl-t img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);-webkit-user-drag:none}
.fl-t .nm{position:absolute;left:0;right:0;bottom:0;padding:10px 6px 4px;font-size:12px;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgb(0 0 0 / .55));text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-t .got{position:absolute;top:5px;left:5px;width:16px;height:16px;border:1px solid rgb(255 255 255 / .75);border-radius:50%;background:color-mix(in srgb,var(--shu) 78%,transparent);color:#fff;font-family:var(--brush);font-size:9px;line-height:14px;text-align:center;font-style:normal}
.fl-t .ura-tag{top:auto;bottom:21px;left:5px;font-size:9px!important;padding:0 4px;letter-spacing:.04em!important}
.fl-t .fav{position:absolute;top:2px;right:5px;color:#f5c542;font-size:16px;font-style:normal;text-shadow:0 0 3px rgb(0 0 0 / .6)}
.fl-t .lk{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-style:normal}
:where(html[lang="ja"]) .fl-t.lkt img{filter:brightness(.75) saturate(.75)}
:where(html[lang="en"]) .fl-t.lkt img{filter:blur(6px) brightness(.55)}
.fl-t.pdt .lk{inset:4px auto auto 6px;font-size:14px;text-shadow:0 0 3px rgb(0 0 0 / .6)}
.fl-t:focus-visible,.fl-ear:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.fl-pf{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:0 50px;line-height:1.3}
.fl-ear{position:absolute;right:0;bottom:0;width:44px;height:44px;border:0;padding:0;background:linear-gradient(315deg,var(--paper) 50%,color-mix(in srgb,var(--line) 55%,var(--page)) 50%);cursor:pointer;z-index:5;border-radius:0 0 10px 0;box-shadow:-2px -2px 4px rgb(0 0 0 / .08)}
.fl-earl{right:auto;left:0;background:linear-gradient(45deg,var(--paper) 50%,color-mix(in srgb,var(--line) 55%,var(--page)) 50%);border-radius:0 0 0 4px;box-shadow:2px -2px 4px rgb(0 0 0 / .08)}
.fl-ear.last,.fl-ear.first{opacity:.35;animation:none}
@media (prefers-reduced-motion:no-preference){.fl-ear.hint{animation:fl-wig 1.6s ease-in-out 1.2s 2}}
.fl-flapw{position:absolute;inset:0;z-index:4;pointer-events:none;filter:drop-shadow(-3px 3px 5px rgb(0 0 0 / .28));opacity:0}
.fl-flap{position:absolute;inset:0;border-radius:4px 10px 10px 4px;background:color-mix(in srgb,var(--line) 35%,var(--page));overflow:hidden}
.fl-flap .ura{position:absolute;inset:0;opacity:.10;background:
  radial-gradient(circle at 50% 100%,transparent 0 5px,var(--c4) 5px 6px,transparent 6px 9px,var(--c4) 9px 10px,transparent 10px 13px,var(--c4) 13px 14px,transparent 14px) 0 0/28px 14px,
  radial-gradient(circle at 50% 100%,transparent 0 5px,var(--c4) 5px 6px,transparent 6px 9px,var(--c4) 9px 10px,transparent 10px 13px,var(--c4) 13px 14px,transparent 14px) 14px 7px/28px 14px}
.fl-flap .mirp{position:absolute;inset:0;transform-origin:0 0;opacity:.16;filter:grayscale(.3) blur(.3px);box-shadow:none;background:transparent}
.fl-flap .mirp::before{display:none}
.fl-flap .fsh{position:absolute;inset:0}
.fl-flap .mark{position:absolute;width:58px;height:58px;border:2px solid var(--shu);border-radius:50%;color:var(--shu);opacity:.22;display:grid;place-items:center;font-family:var(--brush);font-size:16px;line-height:1.1;text-align:center;transform-origin:0 0}
#fl-cur{z-index:3}
.fl-ush{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:4px 10px 10px 4px;background:linear-gradient(90deg,rgb(0 0 0 / .35),transparent 70%);opacity:0}
.fl-wrap{position:relative}
.fl-edgemsg{position:absolute;left:0;right:0;top:-1.5em;z-index:6;margin:0;pointer-events:none;font-size:14px;color:var(--shu);text-align:center;line-height:1.3}
.fl-tip{text-align:center;font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.6}
@media (prefers-reduced-motion:no-preference){.fl-page.nudge{animation:fl-nudge .56s cubic-bezier(.36,.07,.19,.97);transform-origin:50% 90%}}
.fl-box{scroll-margin-top:calc(var(--navh,84px) + 10px);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.fl-box>summary{cursor:pointer;font-size:15px;font-family:var(--display)}
.fl-box[open]>summary{margin-bottom:10px}
.fl-donebtn{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;cursor:pointer;color:var(--ink);font:inherit;font-size:16px;font-family:var(--display)}
.fl-donebtn .arr{font-size:20px;line-height:1;color:var(--muted)}
.fl-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.fl-mini button{position:relative;border:0;padding:0;background:none;cursor:pointer;font:inherit;display:grid;gap:2px;text-align:left;min-width:0}
.fl-mini img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;display:block}
.fl-mini small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.fl-mini p{grid-column:1/-1;font-size:13px;color:var(--muted);margin:0}
.fl-ph{flex-wrap:wrap;column-gap:8px}
.fl-ph .fs-cnt{font-size:11px;color:var(--muted);letter-spacing:0;margin-left:auto;white-space:nowrap}
.fl-wrap .fs-bar{position:relative;z-index:1;margin:0 0 12px}
.fl-wrap .fs-bar input{background:var(--page);border-color:transparent}
.fl-wrap .fs-open{background:var(--page);border-color:transparent;color:var(--muted)}
.fl-wrap .fs-bar input::placeholder{color:var(--muted);opacity:1}
.fl-wrap .fs-open.on{background:var(--green);color:var(--paper)}
.fl-wrap .fl-donebtn{position:relative;z-index:1;margin:12px 0 0;background:var(--page);border-color:transparent;box-sizing:border-box}
.fl-wrap .fl-tip{margin-top:26px}
.fl-wrap .fl-donebtn{justify-content:flex-start;gap:12px;padding:8px 14px 8px 10px}
.fl-donebtn .gl-st{display:flex;flex:0 0 auto}
.fl-donebtn .gl-st i{width:42px;height:42px;border-radius:50%;margin-left:-14px;background:var(--page) center/88% no-repeat;border:2px solid var(--page);box-shadow:0 0 0 1px var(--line)}
.fl-donebtn .gl-st i:first-child{margin-left:0;position:relative;z-index:3}
.fl-donebtn .gl-st i:nth-child(2){position:relative;z-index:2}
.fl-donebtn .gl-st i:not(.e){background-color:#f6f1e4;border-color:#f6f1e4}
.fl-donebtn .gl-st i.e{border:1.5px dashed var(--line);box-shadow:none;background:none}
.fl-donebtn .gl-t{display:grid;line-height:1.25;font-size:16px}
.fl-donebtn .gl-t small{font-family:system-ui,sans-serif;font-size:12px;color:var(--muted)}
.fl-donebtn .arr{margin-left:auto}
.fl-wrap .fl-stage::before{top:calc(-14px - 48px);bottom:calc(-14px - 74px)}
.fl-pf span{display:inline-flex;align-items:center;gap:6px}
.fl-jump{display:inline-grid;place-items:center;width:30px;height:26px;border:0;border-radius:999px;background:color-mix(in srgb,var(--line) 35%,transparent);color:var(--muted);padding:0;cursor:pointer}
.fl-jump:active{background:var(--line)}
.fl-wrap .fs-near{color:var(--muted)}
.fl-t.crs-t{box-shadow:inset 0 0 0 2px var(--green)}
/* ==== 御足印帳（帳面・めくり・絞り込み） ここまで ==== */
html,body{overflow-x:clip;max-width:100%}
.wrap>*{min-width:0}
img,svg,video{max-width:100%}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.sheet-foot{display:flex;justify-content:center;align-items:center;gap:18px}
.sheet-foot .sheet-close{margin:0}
.sheet-lang{font-size:13px;font-weight:700;text-decoration:none;color:var(--green);border:1px solid var(--green);border-radius:999px;padding:1px 10px;background:var(--paper)}
/* ==== 御足印ギャラリー・札の拡大 ==== */
/* -- 札の拡大 -- */
#seal-dlg .sheet-lang{position:static;align-self:center}
:where(html[lang="ja"]) .dlg-face.seal-side{position:relative}
#seal-dlg .mh-rrow{text-align:center}
#seal-dlg .mh-rrow .linkbtn{color:#f4efe4;font-size:13px;opacity:.85}
#seal-dlg .rp{width:100%;text-align:center}
#seal-dlg .rp[open]{margin-bottom:96px}
#seal-dlg .rp summary{color:#e8e1d2}
#seal-dlg{border:0;padding:0;background:transparent;max-width:min(92vw,440px);width:100%}
#seal-dlg::backdrop{background:rgba(20,16,12,.9)}
#seal-dlg{overscroll-behavior:contain;max-height:100dvh;touch-action:pan-y}
.dlg-body{display:grid;gap:12px;justify-items:center}
.dlg-card{width:100%;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#efe7d6;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.dlg-face{width:100%;height:100%}
.dlg-face svg,.dlg-face img{width:100%;height:100%;object-fit:cover;display:block}
.photo-side{position:relative}
.photo-side span{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));font-weight:700}
.dlg-cap{color:#f4efe4;font-size:15px;line-height:1.7;text-align:center}
.dlg-cap b{font-size:18px}
#seal-dlg .linkbtn{color:#f4efe4}
.dlg-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;row-gap:10px}
.dlg-btns>*{white-space:nowrap}
#seal-dlg .fav-btn{background:transparent;color:#f4efe4;border-color:rgb(244 239 228 / .5)}
#seal-dlg .fav-btn[aria-pressed="true"]{color:#f5c542;border-color:#f5c542}
#seal-dlg .mp-row .linkbtn{color:#f4efe4;font-size:13px}
#seal-dlg .mp-row .linkbtn.mp-arm{background:#c8402c;color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;box-shadow:0 0 0 3px rgba(200,64,44,.35);animation:mpArm .5s ease-out}
@media (prefers-reduced-motion:reduce){#seal-dlg .mp-row .linkbtn.mp-arm{animation:none}}
.photo-side .mp-badge{top:10px;right:10px;font-size:16px;padding:6px 8px}
#seal-dlg .dlg-body{gap:10px;padding:8px 0}
:where(html[lang="ja"]) .vis-nav{display:flex;align-items:center;justify-content:center;gap:14px;color:#efe7d6;font-size:14px}
:where(html[lang="ja"]) .vis-b{font:inherit;font-size:22px;line-height:1;width:40px;height:36px;border-radius:999px;border:1px solid rgba(239,231,214,.5);background:rgba(0,0,0,.25);color:#efe7d6;cursor:pointer}
:where(html[lang="ja"]) .vis-b:disabled{opacity:.3;cursor:default}
#seal-dlg .dlg-card{width:min(100%,calc((100dvh - 250px)*.75));margin:0 auto}
/* -- 自分の写真 -- */
.mp-face{position:relative;background:#1b1712}
.mp-face img{width:100%;height:100%;object-fit:cover;display:block}
.mp-face span{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));font-weight:700}
.mp-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.mp-row .btn{font-size:14px}
.mp-msg{color:#f4efe4;font-size:13px;min-height:1em;text-align:center}
.mp-take{display:block;width:100%;margin:6px 0 0;padding:6px 8px;border:1px dashed #c23a2b;border-radius:8px;background:#fff8f0;color:#c23a2b;font:inherit;font-size:12px;font-weight:700;line-height:1.4;cursor:pointer}
#mp-share{border:0;padding:0;background:transparent;max-width:min(92vw,420px);width:100%}
#mp-share::backdrop{background:rgba(20,16,12,.8)}
#mp-share .body{display:grid;gap:12px;justify-items:center}
#mp-share img{width:100%;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#mp-share p{color:#f4efe4;font-size:13px;text-align:center;margin:0}
#mp-share .linkbtn{color:#f4efe4}
.mp-lang{width:100%;display:flex;justify-content:center;margin-top:4px}
.mp-badge{font-style:normal;position:absolute;top:6px;right:6px;z-index:3;font-size:13px;line-height:1;background:rgba(255,255,255,.9);border-radius:999px;padding:4px 6px;box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none}
/* -- カード -- */
.card.mihon .pg.blank{border-style:dashed;border-color:#c23a2b88;background:color-mix(in srgb,#c23a2b 5%,var(--page))}
.mh-in{writing-mode:horizontal-tb!important;display:grid;gap:4px;justify-items:center;text-align:center;font-size:13px!important;line-height:1.5;color:var(--muted)}
.mh-in b{font-family:var(--display);font-size:22px;color:#c23a2b;border:2px solid #c23a2b;border-radius:4px;padding:2px 8px;transform:rotate(-6deg)}
.mh-tag{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;color:#fff;background:#c23a2b;border-radius:3px;padding:1px 6px;letter-spacing:.1em}
.card.mihon .card-cap .linkbtn{font-size:12px;padding:0}
:where(html[lang="ja"]) .card.lkcard .hint-img{filter:none}
:where(html[lang="en"]) .card.lkcard .hint-img{filter:sepia(.35) saturate(.8) blur(.8px)}
.card.lkcard .pg{overflow:hidden}
.card.lkcard .cap{font-weight:700}
.don{--d:0ms;overflow:hidden}
.don .don-st,.don .don-hk{transform-box:fill-box;transform-origin:50% 50%}
.don .don-st{animation:don-st .5s cubic-bezier(.55,0,.9,.45) calc(var(--d) + .05s) both}
.don .don-hk{animation:don-hk .32s cubic-bezier(.55,0,.9,.45) calc(var(--d) + .62s) both}
.don .don-rw{animation:don-rw .5s ease-out calc(var(--d) + .85s) both}
.don > svg{animation:don-shake .32s ease-out calc(var(--d) + .4s) both}
.don .don-ink{position:absolute;left:50%;top:33%;width:62%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(circle,rgba(194,58,43,0) 52%,rgba(194,58,43,.35) 60%,rgba(194,58,43,0) 72%);animation:don-ink .6s ease-out calc(var(--d) + .4s) both}
@media (prefers-reduced-motion:reduce){.don *,.don > svg{animation:none!important}.don .don-ink{display:none}}
.flip{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;background:none;cursor:pointer;perspective:900px}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.flip .photo-face{transform:rotateY(180deg)}
.flip.show-photo .seal-face,.flip.from-photo .seal-face{transform:rotateY(-180deg)}
.flip.show-photo .photo-face,.flip.from-photo .photo-face{transform:rotateY(0)}
.flip.from-photo .face{transition:none}
.flip:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.flip .face{transition:none}}
.flip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.card{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-content:start;min-width:0}
.card .pg{width:100%}
.card button.pg{padding:0;cursor:pointer;font:inherit}
:where(html[lang="ja"]) .card-cap{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-size:13px;padding:0 2px}
:where(html[lang="en"]) .card-cap{display:flex;justify-content:space-between;font-size:13px;padding:0 2px}
.card-cap b{font-family:var(--display);font-size:15px;color:var(--ink)}
.card-cap small{color:var(--muted);font-size:10px;white-space:nowrap}
.card:not(.done) .card-cap b{color:var(--muted)}
:where(html[lang="ja"]) .card-cap{flex-wrap:wrap}
:where(html[lang="ja"]) .card-cap b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
:where(html[lang="ja"]) .card-cap .vn{font-size:11px;margin-left:1px}
:where(html[lang="en"]) .card-cap b{overflow:hidden;text-overflow:ellipsis}
.card-cap .map-go{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.flip,.flip *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.flip img,.flip svg,.flip image{pointer-events:none}
:where(html[lang="en"]) .card-cap{flex-wrap:wrap;min-width:0;flex-direction:column;align-items:flex-start;gap:0}
:where(html[lang="en"]) .card-cap b{min-width:0;max-width:100%;white-space:normal!important;overflow-wrap:anywhere;line-height:1.3}
:where(html[lang="en"]) .card>*{min-width:0}
.card.done{position:relative}
/* -- ギャラリーの枠 -- */
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
@media (max-width:520px){.pages{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.mihon-msg{margin:8px 0 0;font-size:13px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
#done-dlg .done-h{font-family:var(--display);font-weight:500;font-size:18px;margin:12px 0 8px}
#done-dlg .pages{margin-bottom:12px}
#pages.pages{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
@media (max-width:520px){#pages.pages{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
.pages .card{min-width:0}
.gal-gm{margin:0 0 4px}
.gal-gm>summary{font-size:14px;color:var(--green);cursor:pointer;font-weight:700}
.gal-gm .gm-box{margin-top:8px}
.gal-gm .gm-box.hm{position:relative;height:320px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--page)}
.gal-none{font-size:13px;color:var(--muted);margin:4px 0}
.done-hint{margin:-4px 0 8px;font-size:12.5px;color:var(--muted,#7a6e60)}
/* ==== 御足印ギャラリー・札の拡大 ここまで ==== */
@media (prefers-reduced-motion:reduce){.shake{animation:none}}
/* ==== 合鍵（鍵のかかった所・合言葉の画面） ==== */
/* -- 鍵のかかった所 -- */
.unlock{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.unlock label{font-weight:700;font-size:15px}
.unlock input{font:inherit;font-size:16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:6px 10px;min-width:0;flex:1 1 160px}
.unlock input:focus-visible{outline:2px solid var(--tram);outline-offset:1px}
.lk-mark{font-size:.8em;margin-left:3px}
.locked{border:1px dashed var(--line);border-radius:14px;padding:28px 20px;text-align:center;display:grid;gap:10px;justify-items:center;background:var(--card)}
.locked .lk{font-size:34px;line-height:1}
.locked h3{margin:0;font-family:var(--display);font-size:20px}
.locked p{margin:0;color:var(--muted);font-size:15px;max-width:34em}
.locked ul{margin:0;padding:0;list-style:none;font-size:14px;color:var(--ink);display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.locked li{border:1px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--page)}
/* -- 合言葉の画面・上の帯の鍵 -- */
.member{font-size:14px;color:var(--muted)}
.member a{color:var(--green);font-weight:700}
.qkey{font:inherit;font-size:16px;line-height:1;font-weight:700;white-space:nowrap;cursor:pointer;border-radius:50%;padding:0;width:34px;height:34px;display:inline-grid;place-items:center;flex:none;background:var(--card);color:var(--ink);border:1.5px solid #b8892e;box-shadow:0 0 0 2px color-mix(in srgb,#b8892e 18%,transparent)}
.qkey.on{background:color-mix(in srgb,#b8892e 30%,var(--card));border-color:#b8892e;box-shadow:0 0 0 3px color-mix(in srgb,#b8892e 30%,transparent)}
@media (max-width:560px){.qkey{flex:none}}
.key-sheet h3{margin:0 0 4px;font-family:var(--display);font-size:20px}
.key-sheet p{margin:0 0 10px;font-size:15px;line-height:1.7}
.key-sheet ul{margin:0 0 12px;padding-left:1.2em;font-size:15px;line-height:1.8}
.key-sheet ul small{color:var(--muted)}
.key-sheet form{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.key-sheet input{flex:1 1 12em;font:inherit;font-size:16px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--page);color:var(--ink)}
.key-sheet .kmsg{display:block;min-height:1.4em;font-size:14px;margin:4px 0}
.key-sheet .kmsg.ng{color:var(--shu)}
.key-sheet .kmsg.ok{color:var(--green)}
.key-sheet .kfoot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14px;margin-top:8px}
.key-badge{display:inline-block;font-size:13px;font-weight:700;border:1px solid var(--green);color:var(--green);border-radius:999px;padding:1px 10px}
:where(html[lang="en"]) .key-sheet .buy-btn{display:block;text-align:center;margin:10px 0 4px;text-decoration:none}
:where(html[lang="en"]) .key-sheet p.small{font-size:13px;color:var(--muted)}
/* ==== 合鍵（鍵のかかった所・合言葉の画面） ここまで ==== */
.msg{font-size:14px;color:var(--muted);flex-basis:100%}
.msg.ok{color:var(--green);font-weight:700}
.msg.ng{color:var(--kitsune)}
/* ==== 札（スポットの札・御足印を押す画面） ==== */
/* -- ヒントの地図 -- */
.hint-gm{margin:10px 0 0;font-size:14px}
.hint-gm summary{cursor:pointer;color:var(--green)}
.hint-gm:not(.near-gm){scroll-margin:12px 0 24px}
.hint-gm .hm-keyl{display:block;margin-top:0;padding:9px 11px;border-radius:8px;background:color-mix(in srgb,#d4a72c 16%,transparent);border:1px solid color-mix(in srgb,#d4a72c 60%,transparent);color:var(--ink);font-size:14px;line-height:1.55}
.hint-gm .hm-keyl b{font-weight:700}
.hint-gm .hm-keyl .hm-key{font-weight:700}
.hint-gm:not(.near-gm)>summary{display:flex;align-items:center;gap:8px;padding:11px 14px;border:1.5px solid var(--green);border-radius:10px;background:color-mix(in srgb,var(--green) 9%,transparent);font-weight:700;font-size:15px;list-style:none;-webkit-tap-highlight-color:transparent}
.hint-gm:not(.near-gm)>summary::-webkit-details-marker{display:none}
.hint-gm:not(.near-gm)>summary::before{content:"🗺";font-size:19px;line-height:1}
.hint-gm:not(.near-gm)>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.hint-gm[open]:not(.near-gm)>summary::after{transform:translateY(2px) rotate(-135deg)}
.hint-gm[open]:not(.near-gm)>summary{margin-bottom:6px}
.hint-gm:not(.near-gm)>summary:active{background:color-mix(in srgb,var(--green) 16%,transparent)}
.hint-gm p{margin:6px 0;font-size:13px;color:var(--muted)}
.mm{position:relative;width:100%;overflow:hidden;border-radius:10px;background:#efeae0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mm-ctl{position:absolute;right:6px;top:42px;display:flex;flex-direction:column;gap:6px}
.mm-ctl button{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid #8a7b67;background:rgba(255,255,255,.92);color:#2a231c;font:inherit;font-size:18px;line-height:1;padding:0;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.mm-ctl button:disabled{opacity:.4}
.mm .mm-ctl svg{position:static;inset:auto}
.mm-t{position:absolute;inset:0;filter:sepia(.45) saturate(.7) contrast(.92) brightness(1.03)}
.mm-t img{position:absolute;width:256px;height:256px;max-width:none}
.mm svg{position:absolute;inset:0}
.mm-src{position:absolute;right:6px;bottom:4px;font-size:9px;color:#6b6257;background:rgba(255,255,255,.75);padding:0 4px;border-radius:3px;text-decoration:none}
.map-go{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}
.map-go:hover{text-decoration-style:solid}
.mg-pin{display:inline-block;font-size:.65em;margin-left:5px;vertical-align:.15em}
.hint-gm .gm-box.hm{position:relative;height:300px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--page)}
/* -- 位置の確認 -- */
.msg.geo-help{display:block;text-align:left;line-height:1.6}
.msg.geo-help ol{margin:4px 0 4px 1.3em;padding:0}
.msg.geo-help .geo-again{display:block;margin-top:4px}
.geo-note{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.geo-box{margin:12px 0 0;padding:12px 14px;border:2px solid #b8892e;border-radius:12px;background:color-mix(in srgb,#b8892e 10%,var(--card));font-size:15px;line-height:1.7;box-shadow:0 2px 10px rgba(184,137,46,.18);animation:gbIn .35s ease-out}
.geo-box::before{content:"📍";margin-right:4px}
.geo-box ol{margin:6px 0 8px 1.3em;padding:0}
.geo-box li{margin:3px 0}
.geo-box .geo-again{display:inline-block;margin-top:2px;font-weight:700;color:var(--green);border:1px solid var(--green);border-radius:999px;padding:3px 14px;background:var(--card)}
@media (prefers-reduced-motion: reduce){.geo-box{animation:none}}
/* -- この場所について知らせる -- */
.rp{margin:10px 0 0;font-size:14px}
.rp summary{cursor:pointer;color:var(--muted);font-size:13px}
.rp-f{display:grid;gap:6px;margin-top:8px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:left}
.rp-lead{margin:0;font-size:13px;color:var(--muted)}
.rp-f [hidden]{display:none!important}
.rp-f label{display:flex;gap:6px;align-items:baseline;font-size:14px;line-height:1.5;cursor:pointer}
.rp-f textarea{font:inherit;font-size:16px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--paper);color:var(--ink);resize:vertical}
.rp-row .btn{font-size:15px;padding:6px 16px}
.rp-msg{font-size:13px;color:var(--green)}
.rp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;scroll-margin-bottom:96px}
.rp-here{display:flex!important;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;border:1px solid #d9a441;background:#fff6dc;border-radius:8px;font-weight:700;color:#6b4400}
.rp-here input{margin-top:3px;accent-color:#c27f00;flex:none}
/* -- 御足印を押す画面 -- */
:where(html[lang="ja"]) .gt-glow{position:absolute;inset:0;border-radius:6px;pointer-events:none;animation:gt-glow 2s ease-out 1s both}
:where(html[lang="ja"]) .gt-gin{--gl:rgba(232,238,255,.9)}
:where(html[lang="ja"]) .gt-do{--gl:rgba(240,165,95,.85)}
:where(html[lang="ja"]) .gt-rare-cap{margin:0;text-align:center;color:#f3e3b0;font-weight:700;font-size:17px;letter-spacing:.08em;text-shadow:0 0 12px rgba(255,215,120,.75);animation:gtFade .5s 1.3s both}
:where(html[lang="ja"]) .gt-card .bt-dust{z-index:3}
#gt-dlg{border:0;padding:0;background:transparent;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;overflow:hidden}
#gt-dlg::backdrop{background:rgba(20,16,12,.62);transition:background .5s}
#gt-dlg.gt-out::backdrop{background:rgba(20,16,12,0)}
.gt-wrap{position:fixed;inset:0;display:grid;place-items:center;align-content:center;gap:16px;padding:20px}
.gt-card{position:relative;width:min(74vw,340px);aspect-ratio:3/4;transform:rotate(-2deg);border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.gt-paper{position:absolute;inset:0;border-radius:6px;background:#efe7d6;animation:gtPaper .3s ease-out both}
.gt-seal{position:absolute;inset:0}
.gt-seal .don-st,.gt-seal svg>text{visibility:hidden;animation:none!important}
.gt-stl{position:absolute;inset:0;pointer-events:none;transform-origin:50% 33%;will-change:transform,opacity;animation:gtSlam2 1.1s .3s linear both}
.gt-stl svg{width:100%;height:100%;display:block;overflow:visible}
.gt-stl.landed{will-change:auto}
.gt-seal .don-hk{visibility:hidden;animation:none!important}
.gt-hkl{position:absolute;inset:0;pointer-events:none;animation:gtHk .35s 1.1s ease-out both}
.gt-hkl svg{width:100%;height:100%;display:block;overflow:visible}
.gt-seal .don-rw{animation:none!important}
.gt-seal svg{width:100%;height:100%;display:block;overflow:visible}
.gt-photo{position:absolute;inset:0;border-radius:6px;overflow:hidden;animation:gtFade .5s both}
.gt-photo img{width:100%;height:100%;object-fit:cover;display:block}
.gt-ink{position:absolute;left:50%;top:42%;width:60%;aspect-ratio:1;margin:-30% 0 0 -30%;border-radius:50%;border:6px solid rgba(194,58,43,.62);box-sizing:border-box;opacity:0;animation:gtInk .7s .62s ease-out both;pointer-events:none}
.gt-msg{margin:0;text-align:center;color:#f4efe4;line-height:1.6;transition:opacity .2s;animation:gtFade .4s 1.1s both}
.gt-msg b{display:block;font-size:22px}
.gt-msg span{font-size:14px}
.gt-btns[hidden]{display:none}
.gt-btns{display:flex;flex-direction:column;gap:10px;align-items:center;transition:opacity .2s;animation:gtFade .3s both}
#gt-dlg .linkbtn{color:#f4efe4}
@media (prefers-reduced-motion:reduce){.gt-paper,.gt-seal,.gt-stl,.gt-hkl,.gt-msg{animation:none}}
.gt-nolayer .gt-seal .don-st,.gt-nolayer .gt-seal .don-hk,.gt-nolayer .gt-seal svg>text{visibility:visible}
/* -- 別誂え（金・銀・銅の演出） -- */
.bt-shine{animation:bt-sweep 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.bt-shine{display:none}}
.bt-dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bt-dust i{position:absolute;top:-6px;width:5px;height:3px;background:linear-gradient(135deg,#a77d2c,#f0dc95,#9a7228);border-radius:1px;opacity:0;animation:bt-fall var(--bd) ease-in calc(var(--d) + var(--bw)) forwards}
@media (prefers-reduced-motion:reduce){.bt-dust{display:none}}
.bt-hint{display:block;margin-top:6px;color:#8a6a1f;font-weight:500}
:where(html[lang="ja"]) .bt-dust.gin i{background:linear-gradient(135deg,#7d848b,#ffffff,#9aa2a9)}
:where(html[lang="ja"]) .bt-dust.do i{background:linear-gradient(135deg,#6b3f17,#f2c893,#94602f)}
:where(html[lang="ja"]) #bt-cmp{position:fixed;inset:0;z-index:200;background:var(--paper);overflow:auto;padding:12px 16px 40px}
:where(html[lang="ja"]) .cmp-in{max-width:760px;margin:0 auto}
:where(html[lang="ja"]) .cmp-h{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-12px;background:var(--paper);padding:8px 0;z-index:1}
:where(html[lang="ja"]) .cmp-h .btn{font-size:14px;padding:6px 14px}
:where(html[lang="ja"]) #bt-cmp h3{margin:18px 0 8px;font-size:17px}
:where(html[lang="ja"]) #bt-cmp h3 small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
:where(html[lang="ja"]) .cmp-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){:where(html[lang="ja"]) .cmp-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
:where(html[lang="ja"]) .lnc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
:where(html[lang="ja"]) .lnc-sw{height:150px;border-radius:8px;box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
:where(html[lang="ja"]) .cmp-g figure{margin:0}
:where(html[lang="ja"]) .cmp-c{border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25)}
:where(html[lang="ja"]) .cmp-c svg{display:block;width:100%;height:auto}
:where(html[lang="ja"]) .cmp-g figcaption{text-align:center;font-size:13px;margin-top:4px}
:where(html[lang="ja"]) .holo{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;overflow:hidden;opacity:.55}
:where(html[lang="ja"]) .holo::before{content:"";position:absolute;left:-60%;top:-60%;width:220%;height:220%;background:linear-gradient(115deg,transparent 42%,rgba(255,236,170,.45) 47%,rgba(210,232,255,.4) 50%,rgba(255,205,235,.35) 53%,transparent 58%);transform:translate(var(--hx,0%),var(--hy,0%))}
:where(html[lang="ja"]) .holo.gin::before{background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 48%,rgba(210,228,255,.4) 51%,transparent 57%)}
:where(html[lang="ja"]) .holo.do::before{background:linear-gradient(115deg,transparent 42%,rgba(255,205,150,.45) 48%,rgba(255,236,205,.4) 51%,transparent 57%)}
:where(html[lang="ja"]) .holo-auto .holo::before{animation:holo-drift 4.5s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){:where(html[lang="ja"]) .holo-auto .holo::before{animation:none}}
/* -- 札の本体 -- */
@media (max-width:520px){.leaf.has-act{grid-column:1/-1;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center}.pg.blank .cap{font-size:10px}.pg.blank span{font-size:16px}.act{font-size:13px}.act .btn{padding:6px 10px;font-size:14px}.pg .far{font-size:13px}.pg .far b{display:block;font-size:17px}}
.pg{background:var(--page);border:1px solid var(--line);border-radius:6px;aspect-ratio:3/4;max-width:100%;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--line) 35%,transparent)}
:where(html[lang="ja"]) .pg.blank span{font-family:var(--brush);color:color-mix(in srgb,var(--muted) 55%,transparent);font-size:18px;writing-mode:vertical-rl;letter-spacing:.2em}
:where(html[lang="en"]) .pg.blank span{font-family:var(--brush);color:color-mix(in srgb,var(--muted) 55%,transparent)}
.pg svg{width:88%;height:auto}
.pg.new svg{animation:press .5s ease-out}
@media (prefers-reduced-motion:reduce){.pg.new svg{animation:none}}
.howto{margin:0;font-size:15px;line-height:1.8}
.leaf{display:grid;gap:8px;align-content:start}
.act{display:grid;gap:6px;font-size:14px}
.act .spot{font-weight:700}
.act .spot small{display:block;font-weight:400;color:var(--muted)}
.act .gm-go{font-weight:500;color:var(--green);text-underline-offset:3px}
.pg .far .far-dir{display:block;margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.pg .far .far-gm{display:block;margin-top:6px;font-size:13px;font-weight:700;font-style:normal;color:var(--green);writing-mode:horizontal-tb}
.act .btn{width:100%}
.act details summary{cursor:pointer;color:var(--green);font-size:13px}
.act form{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.act form p{margin:0;flex-basis:100%;font-size:13px}
.act input{font:inherit;font-size:16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:4px 8px;min-width:0;flex:1 1 100px}
.act .sub{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:4px 10px;cursor:pointer}
.act .msg{flex-basis:auto}
.pg .far{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);margin:0;padding:10px 8px;background:var(--card);border:1px solid var(--line);border-radius:8px;text-align:center;font-size:14px;line-height:1.6;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.pg .far b{font-size:20px;color:var(--shu);margin:0 2px}
.pg:has(.far:not([hidden])) .cap{visibility:hidden}
.pg.blank .cap{writing-mode:horizontal-tb;font-family:var(--body);font-size:12px;letter-spacing:0;color:var(--muted)}
.pg .cap{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted)}
.pg.hint{overflow:hidden}
.pg.hint .hint-img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;border-radius:3px;filter:sepia(.35) saturate(.8);opacity:.9}
.pg.hint>span:not(.cap){position:relative;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.pg.hint .cap{z-index:1;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);font-weight:700}
.pg.hint .far{z-index:2}
.pg .far{cursor:pointer}
.pg .far small{display:block;margin-top:4px;font-size:10px;color:var(--muted)}
.act .town{font-family:var(--display);font-size:20px;line-height:1.2;color:var(--green)}
:where(html[lang="ja"]) .act .seal-see{margin-top:8px}
.mh-lead{margin:0 0 10px;font-size:13px;color:#a8342a;font-weight:700}
.pg.mh-done{background:none;border:0;padding:0}
.mh-town{font-weight:inherit}
.mh-ask{display:grid;gap:8px;justify-items:start;margin-top:4px}
.mh-ask p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.mh-ask .linkbtn{font-size:13px}
.mh-noloc{margin-top:8px}
.pg .keyhole{position:absolute;inset:6px;display:block;width:calc(100% - 12px)!important;height:calc(100% - 12px)!important;max-width:none;border-radius:3px;pointer-events:none;overflow:hidden}
.pg>.chk-ic{left:auto;right:10px;top:10px;width:20px;height:20px;font-size:14px}
.act .rp-open{justify-self:start;margin:2px 0 0;padding:2px 0;border:0;background:none;font:inherit;font-size:13px;color:var(--green);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.act .rp-open[aria-expanded="true"]{font-weight:700}
#spot-dlg .rp>summary{display:none}
#spot-dlg .rp:not([open]){display:none}
#spot-dlg .rp{margin:0}
#spot-dlg .sheet>.hint-gm{margin-top:0}
.pg{container-type:inline-size}
.act .tap{font-size:13px;color:var(--muted)}
.fav-btn{white-space:nowrap;font:inherit;font-size:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:3px 12px;cursor:pointer}
.fav-btn[aria-pressed="true"]{border-color:var(--tram);color:var(--tram)}
:where(html[lang="en"]) .pg.blank span{writing-mode:horizontal-tb;letter-spacing:0;font-size:16px;text-align:center;padding:0 6px}
/* ==== 札（スポットの札・御足印を押す画面） ここまで ==== */
/* ==== きょうのひとこま（試作） ==== */
#koma-dlg .km-h{font-family:var(--display);font-size:20px;margin:2px 0 -4px}
#koma-dlg .km-g{display:grid;gap:6px;margin:0}
#koma-dlg .km-g>b{font-size:13px;color:var(--muted)}
.km-ch{display:flex;flex-wrap:wrap;gap:6px}
.km-ch button{font:inherit;font-size:15px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer}
.km-ch button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--paper);font-weight:700}
.km-ch button:disabled{opacity:.4;cursor:default}
#koma-dlg .km-list{justify-self:end;font-size:13px;font-weight:700;color:var(--green)}
#omk-dlg .omk-sheet{height:min(88dvh,760px);grid-template-rows:auto minmax(0,1fr)}
#omk-dlg .omk-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--display);font-size:17px;padding:4px 2px 0}
#omk-dlg .omk-hd .omk-x{font-size:15px}
#omk-dlg iframe{width:100%;height:100%;border:0;border-radius:10px;background:var(--paper)}
.km-ch button:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
#koma-dlg .sheet-foot{justify-content:center;margin-top:16px}
.dlg-top{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;align-items:center}
.dlg-top>.dlg-btns,.dlg-top>.mp-row{display:contents}
.dlg-top>.mp-msg{flex-basis:100%;text-align:center}
.dlg-top>.mp-msg:empty{display:none}
#seal-dlg:has(.crs-in) .dlg-card{width:min(100%,calc((100dvh - 285px)*.75))}
#seal-dlg .dlg-cardw{position:relative;width:fit-content;margin:0 auto}
#seal-dlg .dlg-cardw>.vis-nav{position:absolute;left:-20px;right:-20px;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none;margin:0}
#seal-dlg .dlg-cardw>.vis-nav .vis-b{pointer-events:auto;width:34px;height:44px;background:rgba(20,24,23,.6)}
#seal-dlg .crs-in-h{color:#f4efe4}
.dlg-top .km-star{order:5;font-size:22px;line-height:1;width:46px;height:46px;border-radius:50%;border:1.5px solid #f4efe4;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.dlg-top .km-star[aria-pressed="false"]{filter:grayscale(1);opacity:.55}
.dlg-top .km-star[aria-pressed="true"]{background:#f4efe4}
.dlg-top .km-star:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
#seal-dlg .rp summary{text-decoration:underline;text-underline-offset:3px}
:where(html[lang="ja"]) #seal-dlg .dlg-top .btn{font-size:16px;padding:8px 18px}
:where(html[lang="en"]) #seal-dlg .dlg-top .btn{font-size:15px;padding:8px 13px}
:where(html[lang="en"]) #seal-dlg .dlg-top{gap:10px}
/* ==== きょうのひとこま（試作） ここまで ==== */
@keyframes press{0%{transform:scale(1.25);opacity:0}60%{transform:scale(.96);opacity:1}100%{transform:scale(1)}}
footer{color:var(--muted);font-size:14px;display:grid;gap:4px;border-top:1px solid var(--line);padding-top:16px}
@media (prefers-reduced-motion:no-preference){@keyframes fade{from{opacity:.4}to{opacity:1}}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .qkey.on{color:#e8c77a}}
:where(html[lang="ja"]) .lang-sw{font-size:14px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:0 10px}
:where(html[lang="ja"]) .lang-sw:hover{color:var(--ink)}
#tabs,#walklog,#book,#kuji,#kuji-top,#eki{scroll-margin-top:calc(var(--navh,84px) + 10px)}
/* 上のメニューの高さ＋少し */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.po-stamp{display:inline-grid;place-items:center;width:1.15em;height:1.15em;margin:0 .04em;border:.09em solid var(--shu);border-radius:50%;color:var(--shu);font-size:.82em;line-height:1;font-weight:700;transform:rotate(-10deg);vertical-align:.08em;font-family:var(--display)}
@keyframes bt-sweep{0%{transform:translateX(-320px)}60%,100%{transform:translateX(320px)}}
@keyframes bt-fall{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--bx),var(--by)) rotate(var(--br))}}
@keyframes holo-drift{0%{transform:translate(-25%,-10%)}100%{transform:translate(25%,10%)}}
@keyframes gt-glow{0%{box-shadow:0 0 0 0 transparent}35%{box-shadow:0 0 56px 16px var(--gl,rgba(255,215,120,.9))}100%{box-shadow:0 0 24px 5px var(--gl,rgba(255,215,120,.55))}}
.terms{max-height:min(70vh,640px);overflow:auto;padding:0 2px 8px;font-size:14.5px;line-height:1.8;text-align:left}
.terms h3{margin:4px 0 8px;font-size:17px}
.terms h4{margin:16px 0 4px;font-size:15px}
.terms ul{margin:0;padding-left:1.2em}
.terms p{margin:0 0 6px}
.terms-date{margin-top:14px!important;color:var(--muted);font-size:13px}
.foot-links{display:block;margin-top:6px}
.qg{display:inline-flex;flex-direction:column;align-items:center;gap:1px;flex:none}
.qg small{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted);line-height:1.2}
.qb{display:inline-flex;gap:5px}
.qar{align-self:flex-end;padding-bottom:6px;color:var(--muted);font-size:13px;flex:none}
/* ==== おみくじ ==== */
/* -- おみくじの帯（開く・たたむ） -- */
.kuji-top{display:grid;gap:6px;margin:4px 0 0;min-width:0;scroll-margin-top:72px}
.kuji-top summary{box-sizing:border-box;list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px 8px 8px;
  background-image:repeating-linear-gradient(0deg,transparent 0 22px,color-mix(in srgb,var(--line) 45%,transparent) 22px 23px)}
.kuji-top summary::-webkit-details-marker{display:none}
.kuji-top[open] summary{border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.kt-slip{min-height:72px;box-sizing:border-box;display:flex;writing-mode:vertical-rl;text-orientation:upright;background:#c23a2b;color:#fff8ec;border-radius:3px;padding:8px 3px;font-family:"Yuji Syuku",serif;font-size:13px;line-height:1;letter-spacing:.02em;box-shadow:inset 0 0 0 2px #c23a2b,inset 0 0 0 3px #fff8ec55;align-self:stretch;justify-content:center}
.kt-tx{display:grid;gap:3px;min-width:0}
.kuji-top h2{margin:0;font-size:16px;font-weight:700}
.kt-d{font-size:13px;line-height:1.55;color:var(--muted)}
.kt-st{display:none;font-size:13px;line-height:1.55;color:#8a2a1e;font-weight:600}
.kuji-top.drawn .kt-st{display:block}
.kuji-top.drawn .kt-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kt-st{color:#f0a493}}
:root[data-theme="dark"] .kt-st{color:#f0a493}
.kt-tg{flex:none;min-width:58px;text-align:center;box-sizing:border-box;font-size:13px;font-weight:700;color:#8a2a1e;border:1px solid #c23a2b66;border-radius:999px;padding:5px 9px;background:color-mix(in srgb,#c23a2b 7%,var(--card));white-space:nowrap}
:where(html[lang="ja"]) .kt-tg::after{content:"引く ▼"}
:where(html[lang="ja"]) .kuji-top.drawn .kt-tg::after{content:"見る ▼"}
:where(html[lang="en"]) .kt-tg::after{content:"Draw ▼"}
:where(html[lang="en"]) .kuji-top.drawn .kt-tg::after{content:"View ▼"}
.kuji-top[open] .kt-tg::after{content:"▲"}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kt-tg{color:#f0a493}}
:root[data-theme="dark"] .kt-tg{color:#f0a493}
.kuji-top .kt-d{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
/* -- 引いたおみくじ -- */
#kuji-slot{min-width:0}
#kuji-slot .ek-kuji{box-sizing:border-box;min-width:0}
#kuji-slot{margin-top:6px}
.ek-kuji{display:grid;gap:4px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--kuji);border-radius:10px;padding:10px 12px;text-align:left;width:100%}
.ek-kuji.shake{animation:shake .6s ease}
.ek-kuji .k5:empty{display:none}
.ek-kuji .k0h{font-size:12px;color:var(--muted);font-weight:400;font-family:inherit}
.ek-kuji .k0{font-family:var(--display);font-size:15px;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.ek-kuji .taian{font-family:var(--body);font-size:12px;color:var(--shu);border:1px solid var(--shu);border-radius:4px;padding:0 6px}
.ek-kuji .ek-kn{font:inherit;font-family:var(--display);font-weight:500;font-size:16px;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--kuji);text-decoration-thickness:2px;text-underline-offset:4px}
.ek-kuji .k1 a{color:var(--green);text-underline-offset:3px}
.ek-kuji .k5{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ek-kuji .k5 small{color:var(--muted);font-size:13px}
.ek-kuji .k5 .ek-act{margin-left:0}
.ek-kuji .k4{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}
.ek-kuji .k4 small{flex:1 0 100%;font-size:12px;color:var(--muted)}
.ek-kuji .k1{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline;font-size:14px}
.ek-kuji .k1 small{color:var(--muted);font-size:13px}
.ek-kuji .k1 b{font-family:var(--display);font-weight:500;font-size:16px}
.ek-kuji .k2{font-size:14px;color:var(--muted)}
.ek-kuji.ok{border-left-color:var(--shu)}
/* ==== おみくじ ここまで ==== */
@media (max-width:560px){.qar{font-size:10px}}
@media (max-width:400px){.qar{margin:0 -1px}}
.qpre{letter-spacing:.04em}
.first-guide{scroll-margin-top:calc(var(--navh,84px) + 10px);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--shu);border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.7;position:relative}
.first-guide .fg-x{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--shu);background:var(--paper);color:var(--shu);font:inherit;font-size:22px;line-height:1;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:0}
.first-guide .fg-x:hover{background:var(--shu);color:var(--paper)}
.first-guide .fg-x:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.first-guide h2{padding-right:44px;margin:0 0 2px;font-family:var(--display);font-size:16px;font-weight:500}
.first-guide ol{margin:0;padding-left:1.2em}
.first-guide a{color:var(--green)}
.first-guide li small{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.fg-btns{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:6px 0 4px}
.fg-btns .btn{font-size:15px;flex:1 1 0;min-width:0;white-space:nowrap;padding-left:8px;padding-right:8px;text-align:center;justify-content:center}
.fl-mihon[hidden],.first-guide[hidden]{display:none}
.fg-mh{margin:6px 0 0}
.fg-mh[hidden],#fl-mhmsg[hidden]{display:none}
.q-top{display:flex;flex-basis:100%;align-items:center;gap:6px;min-width:0;margin:-2px 0 1px}
.q-top .q-date{margin:0}
.q-date{display:flex;flex:1 1 0;min-width:0;justify-content:center;font-size:12px;line-height:1.3;margin:-2px 0 1px}
/* ==== 共通：上の帯（日付・こよみ・しおり…のメニュー） ==== */
.quick{position:sticky;top:0;z-index:7;display:flex;flex-wrap:wrap!important;align-items:center;justify-content:center;gap:6px;min-width:0;
  padding:8px 0;margin:0 -16px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.quick a{font-size:14px;font-weight:700;text-decoration:none;color:var(--green);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 14px;white-space:nowrap}
.quick a:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
.quick .qlinks{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-width:0}
.quick .po-stamp{font-size:.9em}
/* スマホ：横に並べて、はみ出したら横にスクロール */
@media (max-width:560px){
  .quick{padding:8px 8px 8px 12px;gap:6px}
  .quick .qi,.quick .qx{display:none}
  .quick .qlinks{flex:1;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:2px}
  .quick .qlinks::-webkit-scrollbar{display:none}
  .quick a{padding:5px 11px;font-size:13.5px}
  .quick .qb{gap:3px}
  .quick .qb a{padding:5px 8px;font-size:13px}
}
@media (max-width:400px){.quick .qb{gap:2px}.quick .qb a{padding:5px 6px;font-size:12.5px}}
@media (max-width:370px){.quick{padding-left:8px;padding-right:6px;gap:4px}.quick .qb a{padding:4px 5px;font-size:12px}}
/* ==== 共通：上の帯（日付・こよみ・しおり…のメニュー） ここまで ==== */
.q-date .sk::before{margin-right:6px}
.q-date.today-line{gap:0 6px}
@media (max-width:400px){.q-date.today-line{font-size:12px}}
/* 狭い画面では日付の行を1行に収める */
.qnews{position:relative;flex:none;width:24px;height:24px;margin:-4px 0 -2px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);font-size:13px;line-height:1;display:inline-grid;place-items:center;cursor:pointer}
.qnews:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
.news-dot{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--shu);border:1.5px solid var(--card)}
.news-dot[hidden]{display:none}
#news-dlg .sheet h2{font-family:var(--display);font-weight:500;font-size:17px;margin:12px 0 4px}
#news-dlg .sheet ol{margin:0;padding-left:1.3em;font-size:15px;line-height:1.8}
#news-dlg .sheet ol a{color:var(--green)}
#news-dlg .sheet li small{display:block;color:var(--muted);font-size:13px;line-height:1.5}
dialog .sheet:focus,dialog .dlg-body:focus,dialog:focus{outline:none}
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
.zoom-dlg{border:0;padding:0;background:transparent;max-width:min(92vw,440px);width:100%;overflow:visible}
.zoom-dlg[open]{display:grid;gap:12px;justify-items:center;touch-action:none}
.zoom-dlg::backdrop{background:rgba(20,16,12,.85)}
.zoom-card{position:relative;width:100%;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#efe7d6;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.zoom-card img{width:100%;height:100%;object-fit:cover;display:block}
.zoom-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));font-weight:700}
.zoom-x{color:#f4efe4}
.btn-sub{background:var(--card);color:var(--green);border:1.5px solid var(--green)}
#near-dlg h2{font-family:var(--display);font-weight:500;font-size:17px;margin:12px 0 4px}
.near-msg{font-size:14px;color:var(--muted);margin:4px 0 8px}
.near-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.near-list>li>button{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;border-radius:10px;cursor:pointer}
.near-list>li>button img{width:64px;height:64px;object-fit:cover;border-radius:6px;display:block}
.near-list>li>button b{font-family:var(--display);font-weight:500;font-size:16px;display:block;line-height:1.4}
.near-list>li>button small{color:var(--muted)}
.near-list>li>button .dist{display:inline-block;color:#fff;background:#2e7d64;font-weight:700;line-height:1.5;padding:0 8px;border-radius:999px;margin-right:2px}
.near-list>li>button .dist.d-mid{background:#b26a12}
.near-list>li>button .dist.d-far{background:#6b6f78}
/* 距離で色分け：300m未満は緑、1km未満は橙、それより遠いと灰 */
.news-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;line-height:1.7}
.news-list li{border-top:1px solid var(--line);padding-top:8px}
.news-list time{display:block;font-size:13px;color:var(--muted)}
.news-list .new{font-size:12px;font-weight:700;color:var(--shu);margin-left:6px}
.pg .ura-tag,.chk-ic{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:4px;border-radius:50%;background:#e09b00;color:#fff;font:700 11px/1 var(--body);font-style:normal;vertical-align:1px;flex:none;text-shadow:none;letter-spacing:0}
.fl-t>.chk-ic,.pg>.chk-ic,.near-list>li>button>.chk-ic{position:absolute;left:4px;top:4px;margin:0;z-index:3;width:16px;height:16px;font-size:12px;box-shadow:0 0 0 1.5px rgb(255 255 255 / .85)}
/* 「この場所について知らせる」は「御足印をもらう」の下から開く */
.near-list>li>button{position:relative}
.near-list>li>button>.chk-ic{left:9px;top:9px}
.ek-nr .chk-ic{position:absolute;left:1px;top:1px;margin:0;width:14px;height:14px;font-size:9.5px;box-shadow:0 0 0 1px rgb(255 255 255 / .8)}
.chk-lg{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.chk-lg .chk-ic{margin:0}
.chk-note{display:block;color:var(--shu,#c23a2b)!important;margin-top:4px;font-weight:700}
.chk-note .chk-ic{width:14px;height:14px;font-size:10px;margin:0 4px 0 0;vertical-align:-1px}
.fg-terms{margin:6px 0 0;font-size:13px;color:var(--muted)}
.fg-terms .linkbtn{font-size:13px}
@keyframes don-st{0%{opacity:0;transform:translateY(-6%) scale(1.75) rotate(-5deg)}70%{opacity:.35}80%{opacity:1;transform:scale(.93) rotate(0)}90%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes don-hk{0%{opacity:0;transform:scale(2.2)}75%{opacity:1;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes don-rw{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
@keyframes don-shake{0%{transform:translate(0,0)}20%{transform:translate(0,3px) scale(.985)}45%{transform:translate(-2px,-1px)}70%{transform:translate(1px,1px)}100%{transform:none}}
@keyframes don-ink{0%{opacity:0;transform:scale(.55)}25%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
/* テストページだけ：説明は出さず、「押した印をすべて消す」だけを手帳の一番下に小さく */
.about{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:15px;line-height:1.8}
.about p{margin:0 0 8px}
.about .small{font-size:13px;color:var(--muted);margin:0}
/* めくる御足印帳：1ページに九つの景色。右端をつまんで左へ引くと、紙の角が折れ返ってめくれる */
@keyframes fl-wig{0%,100%{width:44px;height:44px}50%{width:64px;height:64px}}
/* イヤイヤ：小刻みに首を振るように、だんだん小さく */
@keyframes fl-nudge{
  0%,100%{transform:none}
  14%{transform:translateX(calc(var(--nx,6px)*1)) rotate(calc(var(--nr,.4deg)*1.6))}
  30%{transform:translateX(calc(var(--nx,6px)*-.8)) rotate(calc(var(--nr,.4deg)*-1.2))}
  46%{transform:translateX(calc(var(--nx,6px)*.6)) rotate(calc(var(--nr,.4deg)*.8))}
  62%{transform:translateX(calc(var(--nx,6px)*-.38)) rotate(calc(var(--nr,.4deg)*-.5))}
  78%{transform:translateX(calc(var(--nx,6px)*.18)) rotate(calc(var(--nr,.4deg)*.2))}
}
.spot-dlg{margin:auto auto 0;border:0;padding:0;width:100%;max-width:560px;background:transparent}
.spot-dlg::backdrop{background:rgba(20,16,12,.55)}
.sheet{background:var(--paper);border-radius:18px 18px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));display:grid;gap:10px;box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.sheet-grip{width:44px;height:4px;border-radius:2px;background:var(--line);margin:0 auto}
.sheet-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;align-items:start}
.sheet .sheet-close{justify-self:center}
.spot-dlg[open] .sheet{animation:sheetup .25s ease-out}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
/* 合言葉の画面は上から出す（キーボードに隠れないように） */
.spot-dlg.top-dlg{margin:max(12px,env(safe-area-inset-top)) auto auto;width:calc(100% - 24px);max-width:520px}
.top-dlg .sheet{border-radius:18px;padding-bottom:16px;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.top-dlg .sheet-grip{display:none}
.top-dlg[open] .sheet{animation:sheetdown .25s ease-out}
@keyframes sheetdown{from{transform:translateY(-30px);opacity:.4}to{transform:none;opacity:1}}
/* 下から出る札は、キーボードが出たらその上に持ち上げる */
.spot-dlg:not(.top-dlg){margin-bottom:var(--kb,0px);transition:margin-bottom .15s}
.spot-dlg:not(.top-dlg) .sheet{max-height:calc(100dvh - var(--kb,0px) - 12px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.spot-dlg{max-height:100dvh;overscroll-behavior:contain}
html.dlg-open,html.dlg-open body{overflow:hidden}
/* 長い駅名（大井競馬場前など）でカードが横に広がらないように */
/* 駅名が長いときは、日付を次の行へ */
/* 称号があがったときの札と、これまでの道のり */
.title-dlg{border:0;padding:0;background:transparent;max-width:min(88vw,360px);width:100%}
.title-dlg::backdrop{background:rgba(20,16,12,.62)}
.title-dlg[open] .tt-card{animation:ttin .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes ttin{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.tt-card{background:#faf6ec;color:#2b2520;border-radius:14px;padding:22px 20px 16px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.tt-k{font-size:13px;color:#8a7f72;letter-spacing:.1em}
.tt-gaku{margin:10px auto 12px;padding:7px;background:linear-gradient(#5b3b22,#3e2714);border-radius:4px;box-shadow:0 3px 0 #2a1a0d,inset 0 0 0 2px #7a5332}
.tt-gaku>div{background:linear-gradient(#20160e,#2f2115);padding:9px 10px 10px;border:1px solid #8a6a3a;display:grid;gap:3px;color:#e9cf8a}
.tt-gaku small{font-family:"Yuji Syuku",serif;font-size:12px;letter-spacing:.35em;color:#c9ad6e}
.tt-name{font-family:"Yuji Boku","Yuji Syuku",serif;font-size:34px;line-height:1.2;letter-spacing:.06em;color:#e9cf8a;text-shadow:0 1px 0 #000}
.tt-gaku em{font-style:normal;font-family:"Yuji Syuku",serif;font-size:13.5px;line-height:1.5;color:#e2d3ad}
.tt-gaku.h .tt-name{font-size:24px;letter-spacing:0}
.tt-n{font-size:14px;margin:0 0 2px;font-family:"Yuji Syuku",serif}
.tt-n b{font-family:"Yuji Syuku",serif;font-size:20px;color:#b32e24}
.tt-say{font-size:15px;line-height:1.6;margin:0 0 10px}
.tt-next{font-size:12px;color:#8a7f72;margin:0 0 14px}
.tt-fuda.h{padding:14px 18px 10px}
.tt-fuda.h .tt-name{display:block;font-size:24px;line-height:1.3}
.tt-btns{display:flex;gap:10px;justify-content:center}
.tt-btns button{font:inherit;font-size:14px;border-radius:999px;padding:8px 16px;border:1px solid #cdbfa9;background:transparent;color:#2b2520;cursor:pointer}
.tt-btns .tt-ok{background:#b32e24;border-color:#b32e24;color:#fff}
.st-tbtn{font:inherit;background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer;text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}
.t-new{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin-left:.3em;border:1.5px solid var(--shu);border-radius:50%;color:var(--shu);font-size:11px;font-family:var(--display);transform:rotate(-10deg);vertical-align:.1em}
#road-dlg h2{font-family:var(--display);font-weight:500;font-size:18px;margin:12px 0 4px}
#road-dlg .rd-sub{font-size:13px;color:var(--muted);margin:0 0 10px}
#road-dlg ol{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
#road-dlg li{display:grid;grid-template-columns:4.6em 1fr 64px;gap:10px;align-items:center;min-height:64px;padding:8px 10px;border-radius:10px;background:var(--card,rgba(127,127,127,.08))}
#road-dlg .rd-mid{display:grid;gap:2px;min-width:0}
#road-dlg .rd-mark{width:64px;height:64px;display:block;background:#faf6ec;border-radius:6px}
#road-dlg .rd-lnbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 10px;font-size:13px;color:var(--muted)}
#road-dlg .rd-ln{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;line-height:1.2;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;justify-self:start;margin-top:4px}
#road-dlg .rd-ln.on{border-color:var(--shu);color:var(--shu);font-weight:700}
#road-dlg .ln-sw{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0/.15);flex:none}
#road-dlg .rd-blank{background:none;border:1.5px dashed color-mix(in srgb,var(--muted) 45%,transparent)}
#road-dlg .rd-town{margin-left:.6em;color:var(--muted)}
#road-dlg li .rd-need{font-size:12px;color:var(--muted);text-align:right}
#road-dlg li .rd-name{font-family:var(--display);font-size:16px}
#road-dlg li .rd-date{font-size:12px;color:var(--muted)}
#road-dlg li.got .rd-name{color:var(--ink)}
#road-dlg .rd-btn{font:inherit;font-family:var(--display);font-size:16px;text-align:left;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px}
#road-dlg li.got .rd-date{color:var(--shu)}
#road-dlg li.cur{outline:2px solid var(--shu);outline-offset:-2px}
#road-dlg li.no .rd-name{color:var(--muted);letter-spacing:.2em}
/* 長押しで画像保存のメニューを出さない（iPhone） */
#pages,#pages *,#spot-dlg img,#seal-dlg img,#seal-dlg svg{-webkit-touch-callout:none;}
/*EKI-CSS-BEGIN*/
/* ---- 手帳の日付欄 ---- */
.hd-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px}
.today-line{display:flex;flex-wrap:wrap;gap:0 10px;font-size:13px;color:var(--muted);font-family:var(--display)}
.today-line .ry{color:var(--ink)}
.today-line .ry.good{color:var(--shu)}
:where(html[lang="ja"]) .today-line .sk::before{content:"｜";margin-right:10px;color:var(--line)}
:where(html[lang="en"]) .today-line .sk::before{content:"|";margin-right:10px;color:var(--line)}
/* ---- 駅めぐり帳（23区の駅のエリア地図） ---- */
/* ==== 駅めぐり帳 ==== */
/* -- 見出し・説明・数 -- */
.eki{display:grid;gap:14px;scroll-margin-top:60px;min-width:0}
.eki>*{min-width:0}
.eki h2{font-family:var(--display);font-weight:500;font-size:22px;margin:0}
.eki h2 small{font-family:var(--body);font-size:14px;color:var(--muted);margin-left:8px;font-weight:400}
.ek-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.ek-how{margin:0 0 10px;padding-left:1.4em;display:grid;gap:4px;font-size:14px}
ul.ek-how{list-style:none;padding-left:0}
.ek-how .ek-sw{margin-right:6px}
.ek-stats[hidden]{display:none}
.eki .ek-lead{margin:-6px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.eki .ek-stats{margin-top:-6px}
.ek-stats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted);line-height:1.4}
.ek-stats b{font-family:var(--display);font-weight:500;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:2px}
.ek-kc{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:1px 9px;cursor:pointer}
.ek-kc.ok{border-color:var(--shu);color:var(--shu)}
.ek-lnk,.ek-lk{font:inherit;font-size:13px;color:var(--green);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.eki .ek-board{margin-top:-4px}
.eki h4{font-family:var(--display);font-weight:500;font-size:16px;margin:4px 0 0}
/* -- 路線図の地図 -- */
.ek-mapwrap{position:relative;border-top:1px solid var(--line)}
.ek-map{display:block;width:100%;height:auto;aspect-ratio:1/1;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ek-map.zoom{touch-action:none;cursor:grab}
.ek-map .ec{fill:var(--cell);stroke:var(--cellline);stroke-width:.6;transition:fill .9s ease,opacity .3s}
.ek-map .ec.s1{fill:var(--aka1)}
.ek-map .ec.s2{fill:var(--aka2)}
.ek-map .ec.s3{fill:var(--aka3)}
.ek-map #ek-hatch line{stroke:var(--kusa3);stroke-width:2.2}
.ek-map .eread{fill:url(#ek-hatch);stroke:none;pointer-events:none}
.ek-map .ekj{pointer-events:none}
.ek-map .ekj rect{fill:#fff;stroke:var(--shu);stroke-width:1.3}
.ek-map .ekj text{fill:var(--shu);font-family:var(--display);font-weight:700}
.ek-map .ekj.old{opacity:.45}
.ek-map .eseal circle{fill:var(--card);stroke:var(--shu)}
.ek-map .eseal text{fill:var(--shu);font-family:var(--display);font-weight:700}
.ek-map .ewp{cursor:pointer}
.ek-map .ewp rect{fill:var(--card);stroke:var(--ward)}
.ek-map .ewp text{fill:var(--ink);font-family:var(--body);font-weight:700}
.ek-map .ewp .ewpin{fill:var(--ai)}
.ek-map .ewp .ewpin-c{fill:var(--card)}
.ek-map .ewp.all rect{fill:var(--ai);stroke:var(--ai)}
.ek-map .ewp.all text{fill:var(--card)}
.ek-map .ewp.all .ewpin{fill:var(--card)}
.ek-map .ewp.all .ewpin-c{fill:var(--ai)}
.ek-sw-kuji{display:inline-grid!important;place-items:center;width:10px!important;border-radius:1px!important;border:1.5px solid var(--shu)!important;background:#fff;color:var(--shu);font-style:normal;font-size:8px;font-family:var(--display);transform:rotate(-10deg)}
.ek-sw-read{background:repeating-linear-gradient(135deg,var(--kusa3) 0 2px,var(--cell) 2px 6px)}
.ek-sw-seal{display:inline-grid!important;place-items:center;border-radius:50%!important;border:1.5px solid var(--shu)!important;color:var(--shu);font-style:normal;font-size:9px;font-family:var(--display);background:var(--card)}
.ek-map .ec.dim{opacity:.5}
.ek-map .ec.sel{stroke:var(--ink);stroke-width:2.2}
.ek-map .ew{fill:none;stroke:var(--ward);stroke-width:1.3;pointer-events:none}
.ek-map .er{fill:none;stroke:var(--rail);stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.ek-map .er.cas{stroke:var(--card);stroke-width:7}
.ek-map .erd{fill:var(--card);stroke:var(--rail);pointer-events:none}
.ek-map .edot{fill:var(--muted);pointer-events:none}
.ek-map .elb{fill:var(--ink);font-family:var(--body);pointer-events:none;paint-order:stroke;stroke:var(--card);stroke-width:2.5px;stroke-linejoin:round}
.ek-map .elb.on{font-weight:700}
.ek-map .ewl{fill:var(--muted);font-family:var(--display);pointer-events:none;opacity:.85}
.ek-map .epin{cursor:pointer}
.ek-map .epin path{fill:var(--ai);stroke:var(--card);stroke-width:1.5}
.ek-map .epin text{fill:var(--card);font-family:var(--display);font-size:10px}
.ek-map .epin.got path{fill:var(--card);stroke:var(--ai);stroke-width:2}
.ek-map .epin.got text{fill:var(--ai)}
.ek-map .edp{fill:var(--ai);stroke:var(--card);pointer-events:none}
.ek-map .edp.got{fill:var(--card);stroke:var(--ai);opacity:.75}
.ek-sw-todo{border-radius:50%!important;background:var(--ai);border:1.5px solid var(--card)!important;box-shadow:0 0 0 1px var(--ai)}
.ek-sw-done{border-radius:50%!important;background:var(--card);border:1.5px solid var(--ai)!important}
.ek-map .erp{fill:none;stroke:var(--shu);pointer-events:none}
.ek-todo{position:absolute;left:10px;top:10px;font:inherit;color:inherit;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:4px 12px;font-size:14px;cursor:pointer}
.ek-todo[aria-pressed="true"]{border-color:var(--shu);color:var(--shu);font-weight:700}
.ek-home{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;font-size:15px;color:#fff;border:0;background:var(--ai);border-radius:999px;padding:8px 14px 8px 11px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.ek-home svg{width:16px;height:16px;flex:none}
.ek-home:active{transform:translateY(1px)}
.ek-here{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:700;font-size:14px;color:var(--ai);background:var(--card);border:1.5px solid var(--ai);border-radius:999px;padding:6px 12px 6px 9px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ek-here svg{width:16px;height:16px;flex:none}
.ek-mapwrap [hidden]{display:none!important}
.ek-mapwrap:has(#ek-home:not([hidden])) .ek-here{top:56px}
.ek-here[aria-busy="true"]{opacity:.6}
.eme-dot{fill:#1a73e8;stroke:#fff;stroke-width:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.eme-halo{fill:#1a73e8;opacity:.18;stroke:#1a73e8;stroke-width:1.5;stroke-opacity:.5}
.eme-pulse{fill:#1a73e8;fill-opacity:.35;stroke:#1a73e8;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:eme 1.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){.eme-pulse{animation:none}}
.ek-hint.msg{color:var(--ink);font-weight:600;background:var(--card);padding:2px 8px;border-radius:6px;max-width:calc(100% - 140px)}
.ek-hint{position:absolute;left:12px;bottom:8px;font-size:12px;color:var(--muted);pointer-events:none}
.ek-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);align-items:center;margin:0}
.ek-sw{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:4px;border:1px solid var(--cellline)}
@media (prefers-reduced-motion: reduce){.ek-map .ec{transition:none}}
/* -- 記録を預ける・写す -- */
.ek-bk{display:grid;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.ek-bk h4{margin:0}
.ek-bk.lite{background:none;border:0;padding:0}
:where(html[lang="ja"]) .ek-bk-d summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;cursor:pointer;list-style:none}
:where(html[lang="ja"]) .ek-bk-d summary::-webkit-details-marker{display:none}
:where(html[lang="ja"]) .ek-bk-d summary h4::before{content:"▸ ";color:var(--green)}
:where(html[lang="ja"]) .ek-bk-d[open] summary h4::before{content:"▾ "}
:where(html[lang="ja"]) .ek-bk-st{font-size:12px;color:var(--muted)}
:where(html[lang="ja"]) .ek-bk-st.on{font-size:13px;font-weight:700;color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);border:1px solid color-mix(in srgb,var(--green) 45%,transparent);border-radius:999px;padding:1px 10px}
:where(html[lang="ja"]) .ek-bk-body{display:grid;gap:6px;margin-top:8px}
:where(html[lang="ja"]) .ek-bk-sub{margin:6px 0 0;font-size:13px;font-weight:700}
:where(html[lang="ja"]) .ek-row{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 12px;padding:8px 0;border-top:1px solid var(--line)}
:where(html[lang="ja"]) .ek-row:first-child{border-top:0}
:where(html[lang="ja"]) .ek-row-l{font-size:13px;font-weight:700;padding-top:4px}
:where(html[lang="ja"]) .ek-row-c{display:grid;gap:6px;min-width:0}
:where(html[lang="ja"]) .ek-row-io{display:flex;gap:8px;align-items:stretch}
:where(html[lang="ja"]) .ek-row-io textarea,:where(html[lang="ja"]) .ek-row-io input{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:ui-monospace,Menlo,monospace;font-size:14px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
:where(html[lang="ja"]) .ek-row-io textarea{resize:vertical;font-size:12px}
:where(html[lang="ja"]) .ek-row-io .ek-act{flex:0 0 auto;align-self:center}
:where(html[lang="ja"]) .ek-bk-sw.dis{opacity:.55;cursor:default}
:where(html[lang="ja"]) .ek-row-sw{display:flex;align-items:center;gap:6px}
:where(html[lang="ja"]) .ek-lockbtn{border:0;background:none;font-size:16px;cursor:pointer;padding:0 4px}
:where(html[lang="ja"]) .ek-row-c>.ek-bk-sw{display:inline-flex}
@media (max-width:520px){:where(html[lang="ja"]) .ek-row{grid-template-columns:1fr}:where(html[lang="ja"]) .ek-row-l{padding-top:0}}
:where(html[lang="ja"]) .ek-bk-mine{border-top:1px dashed var(--line);margin-top:6px;padding-top:8px}
:where(html[lang="ja"]) .ek-bk-sw{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
:where(html[lang="ja"]) .ek-bk-sw input{width:18px;height:18px;accent-color:var(--green)}
:where(html[lang="ja"]) .ek-bk-sw small{font-size:12px;color:var(--muted)}
:where(html[lang="ja"]) .ek-ex{display:grid;gap:6px}
:where(html[lang="ja"]) .ek-ex-row{display:flex;flex-wrap:wrap;gap:8px}
:where(html[lang="ja"]) .ek-ex-ta{width:100%;box-sizing:border-box;font-family:ui-monospace,Menlo,monospace;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);resize:vertical;overflow-wrap:anywhere}
:where(html[lang="ja"]) .ek-bk .lock-key{justify-self:start}
.ek-bk-t{margin:0;font-size:13px;color:var(--muted)}
.ek-bk-code{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ek-bk-code span{font-size:13px;color:var(--muted)}
.ek-bk-code b{font-family:ui-monospace,Menlo,monospace;font-size:16px;letter-spacing:.04em;user-select:all;overflow-wrap:anywhere;min-width:0}
.ek-bk-code .ek-act,.ek-bk .ek-act{margin-left:0}
.ek-bk-r summary{font-size:13px;color:var(--green);cursor:pointer}
.ek-bk-in{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ek-bk-in input{flex:1 1 160px;width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:16px;padding:4px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);text-transform:uppercase}
/* -- 駅の札・そのほか -- */
.ek-board{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;scroll-margin-top:64px}
.ek-card{padding:10px 14px 8px;display:grid;gap:4px}
.ek-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.ek-top h3{font-family:var(--display);font-weight:500;font-size:22px;margin:0;line-height:1.3}
.ek-top small{font-size:14px;color:var(--muted)}
.ek-cq{font-family:var(--display);font-size:13px;color:var(--card);background:var(--shu);border-radius:4px;padding:0 6px}
.ek-empty{font-size:14px;color:var(--muted);margin:0}
.ek-lines{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;min-height:30px;align-items:center;margin-inline:-2px;padding-inline:2px}
.ek-lines::-webkit-scrollbar{display:none}
.ek-lines.more{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.ek-ln{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;color:inherit;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:2px 10px;cursor:pointer}
.ek-ln i{width:10px;height:10px;border-radius:50%;background:var(--lc)}
.ek-ln small{color:var(--muted);font-variant-numeric:tabular-nums}
.ek-ln[aria-pressed="true"]{border-color:var(--lc);box-shadow:inset 0 0 0 1.5px var(--lc);font-weight:700}
.ek-nav{min-height:26px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ek-nav button{font:inherit;line-height:1.4;color:inherit;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:3px 10px;cursor:pointer;font-size:14px;white-space:nowrap}
.ek-nav button:disabled{opacity:.35;cursor:default}
.ek-npin{width:11px;height:15px;margin:0 2px 0 4px;vertical-align:-2px}
.ek-npin path{fill:var(--ai)}
.ek-npin circle{fill:var(--card)}
.ek-facts{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;font-size:14px;min-height:30px;overflow:hidden}
.ek-facts small{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ek-seal{flex:0 0 auto;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--shu);background:var(--card);color:var(--shu);font-family:var(--display);font-size:14px;line-height:1;padding:0;transform:rotate(-8deg);cursor:pointer}
.ek-seal.got{background:var(--shu);color:var(--card)}
.ek-bm{display:inline-grid;place-items:center;width:26px;height:28px;font-size:18px;line-height:1;text-decoration:none;border-radius:6px;position:relative}
.ek-bm span{filter:grayscale(1);opacity:.4}
.ek-bm.got span{filter:none;opacity:1}
.ek-bm.got::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:3px;border-radius:2px;background:var(--kusa3)}
.ek-act{margin-left:auto;white-space:nowrap;font:inherit;font-size:13px;border:1px solid var(--shu);color:var(--shu);background:var(--card);border-radius:999px;padding:3px 12px;cursor:pointer}
.ek-act.k{border-color:var(--kuji);color:var(--ink);background:var(--kujibg)}
.ek-msg{font-size:13px;color:var(--muted);min-height:1em;margin:0}
.ek-msg:empty{display:none}
.ek-near{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ek-nr{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:5px;align-items:center;padding:3px 4px 3px 3px;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--card);text-align:left;font:inherit;color:inherit;cursor:pointer}
.ek-nr img{grid-row:1;width:40px;height:40px;object-fit:cover;border-radius:5px;display:block}
.ek-nr b{min-width:0;font-weight:500;font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all}
.ek-nr-m{position:absolute;left:3px;top:31px;width:40px;text-align:center;font-size:9.5px;font-weight:700;color:#fff;background:rgb(0 0 0 / .55);border-radius:0 0 5px 5px;line-height:12px}
.ek-bms{display:inline-flex;align-items:center;gap:4px;min-width:0}
.ek-bms small{font-size:13px;color:var(--muted)}
.ek-nr-got{position:absolute;left:1px;top:1px;width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--shu) 80%,transparent);color:#fff;font-family:var(--brush);font-size:8px;line-height:13px;text-align:center;font-style:normal;border:1px solid rgb(255 255 255 / .75)}
.ek-nr:focus-visible{outline:2px solid var(--tram);outline-offset:1px}
.ek-none{margin:0;font-size:13px;color:var(--muted)}
.ek-facts:has(>small:only-child){min-height:0}
.ek-msg.ek-ok{font-size:15px;font-weight:700;color:var(--green);background:var(--green-soft);border:1px solid var(--green);border-radius:8px;padding:8px 10px}
.ek-wards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.ek-chip{font:inherit;color:inherit;border:1px solid var(--line);background:var(--card);border-radius:10px;text-align:left;display:grid;gap:3px;padding:6px 10px;cursor:pointer;font-size:14px}
.ek-chip span{display:flex;justify-content:space-between;gap:6px}
.ek-chip small{color:var(--muted);font-variant-numeric:tabular-nums}
.ek-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.ek-bar i{display:block;height:100%;background:var(--shu);opacity:.7}
.ek-more{justify-self:start;font:inherit;color:inherit;font-size:14px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:3px 12px;cursor:pointer}
.ek-note{font-size:12px;color:var(--muted);margin:0}
/* ==== 駅めぐり帳 ここまで ==== */
#book .ek-flash{outline:3px solid var(--ai);outline-offset:3px;border-radius:12px;transition:outline-color 1.2s}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ek-home{color:#14203a}}
:root[data-theme="dark"] .ek-home{color:#14203a}
/* 「全体を見る」は display を指定しているので、hidden のときに消えるように */
/* 右下は画面の「English」などのボタンと重なるので、現在地は右上へ。「全体を見る」が出ているときはその下 */
@keyframes eme{0%{transform:scale(.7);opacity:.9}100%{transform:scale(3.2);opacity:0}}
:where(html[lang="ja"]) .hw-sheet,:where(html[lang="ja"]) .pd-sheet{display:grid;gap:10px}
:where(html[lang="ja"]) .hw-sheet h3,:where(html[lang="ja"]) .pd-sheet h3{margin:0}
:where(html[lang="ja"]) .hw-sheet p,:where(html[lang="ja"]) .pd-sheet p{margin:0;font-size:14px;line-height:1.6}
:where(html[lang="ja"]) .pd-img{width:100%;max-height:46vh;object-fit:cover;border-radius:12px}
:where(html[lang="ja"]) .pd-sheet h3 small{font-size:13px;color:var(--muted);font-weight:400;margin-left:6px}
:where(html[lang="ja"]) .pd-spot{color:var(--muted)}
:where(html[lang="ja"]) .pd-lk{font-weight:700}
:where(html[lang="ja"]) .pd-btns{display:flex;flex-wrap:wrap;gap:8px}
/*EKI-CSS-END*/
/*LAYOUT2-CSS-BEGIN　2026-10 ファーストビュー・こよみ帳・街のしおりの見直し*/
/* こよみを小さくする試作（共通） */
.filter{font-size:15px;gap:4px 10px}
.filter .hint{font-size:12px}
.mnav{margin-top:-4px;font-size:14px}
/* 4：横にめくる＋たためる（1と3の合わせ技） */
/* イベント名（こよみ帳のカードと、上の大きいカード）は本文の丸ゴシック */
/* 6：カレンダーを日付の帯に */
/* 7：見出し「東京こよみ」、帯に件数、日付を押したときの「◯月◯日の行事（◯件）」をなくす */
.sec-head{display:flex;align-items:baseline;gap:10px;margin:8px 0 -4px}
.sec-head h2{font-family:var(--display);font-size:28px;margin:0}
/* 8：文字を大きく（老眼にもやさしく） */
:where(html[lang="en"]) .walklog{display:grid;gap:12px}
:where(html[lang="en"]) .wl-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
:where(html[lang="en"]) .wl-head h2{margin:0;font-family:var(--display);font-size:26px}
:where(html[lang="en"]) .wl-count{font-size:14px;color:var(--muted)}
:where(html[lang="en"]) .wl-lead{margin:0;color:var(--muted);font-size:15px}
:where(html[lang="en"]) .wl-q{font:inherit;font-size:16px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);width:100%;max-width:420px}
:where(html[lang="en"]) #walklog .wl-lead{font-size:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
:where(html[lang="en"]) .wl-more{justify-self:start}
:where(html[lang="en"]) #walklog .wl-pager{display:flex;align-items:center;justify-content:space-between;gap:8px}
:where(html[lang="en"]) #walklog .wl-pg{font:inherit;font-size:16px;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--green);border-radius:999px;padding:7px 16px;cursor:pointer}
:where(html[lang="en"]) #walklog .wl-pg:disabled{opacity:.35;cursor:default}
:where(html[lang="en"]) #walklog .wl-pn{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
:where(html[lang="en"]) #walklog #wl-more{display:none!important}
:where(html[lang="en"]) .walks{display:grid;gap:12px;margin-top:6px}
:where(html[lang="en"]) .wl-list{display:grid;gap:12px}
@media (min-width:900px){:where(html[lang="en"]) .wl-list{grid-template-columns:1fr 1fr}}
:where(html[lang="en"]) .wl-town{font-family:var(--display);font-size:20px!important}
:where(html[lang="en"]) .wl-sub{font-size:15px;line-height:1.5;color:inherit;text-decoration:none}
:where(html[lang="en"]) .wl-trow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
:where(html[lang="en"]) .wl-town a{color:inherit;text-decoration:none}
:where(html[lang="en"]) .wc-img{display:block;text-decoration:none}
:where(html[lang="en"]) .wl-map{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--page);font-size:17px;line-height:1;text-decoration:none;cursor:pointer;padding:0;font-family:inherit}
:where(html[lang="en"]) .wl-map.wait{opacity:.4;cursor:default}
:where(html[lang="en"]) .wl-map.wl-lk{filter:grayscale(.6)}
:where(html[lang="en"]) .wl-map.wl-lk i{position:absolute;right:-4px;bottom:-3px;font-size:12px;font-style:normal;filter:none}
:where(html[lang="en"]) .wl-parts{display:grid;border-top:1px dashed var(--line)}
:where(html[lang="en"]) .wl-parts a{padding:9px 12px;font-size:15px;color:inherit;text-decoration:none;border-top:1px solid var(--line)}
:where(html[lang="en"]) .wl-parts a:first-child{border-top:0}
:where(html[lang="en"]) .wl-parts a::after{content:" ›";color:var(--green);font-weight:700}
:where(html[lang="en"]) .walks h3{margin:0;font-family:var(--display);font-size:18px}
:where(html[lang="en"]) .walks-none{color:var(--muted);font-size:15px;margin:0}
:where(html[lang="en"]) .wc{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
:where(html[lang="en"]) .wc-a{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center;color:inherit;text-decoration:none;padding:10px}
:where(html[lang="en"]) .wc-a img{width:132px;aspect-ratio:1.91/1;object-fit:cover;border-radius:8px;background:var(--line)}
:where(html[lang="en"]) .wc-b{display:grid;gap:4px;min-width:0}
:where(html[lang="en"]) .wc-noimg{display:grid;place-items:center;width:100%;aspect-ratio:1.91/1;border-radius:8px;background:color-mix(in srgb,var(--green) 10%,var(--card));font-size:28px}
:where(html[lang="en"]) .wc-d{font-size:13px;color:var(--green);font-weight:700}
:where(html[lang="en"]) .wc-b b{font-size:15px;line-height:1.5}
:where(html[lang="en"]) .wc-b small{font-size:13px;color:var(--muted)}
:where(html[lang="en"]) .wc-neta{display:block;width:100%;text-align:left;font:inherit;font-size:14px;font-weight:700;padding:10px 12px;border:0;border-top:1px dashed var(--line);background:color-mix(in srgb,var(--green) 6%,var(--card));color:var(--green);text-decoration:none;cursor:pointer}
:where(html[lang="en"]) .wc-neta.lock{color:var(--ink);background:var(--page)}
@media (min-width:640px){:where(html[lang="en"]) .wc-a{grid-template-columns:200px minmax(0,1fr)}:where(html[lang="en"]) .wc-a img{width:200px}}
:where(html[lang="en"]) #walklog .wl-list{gap:6px}
:where(html[lang="en"]) #walklog .wc{border-radius:10px}
:where(html[lang="en"]) #walklog .wc-a{display:block!important;padding:0!important;cursor:pointer}
:where(html[lang="en"]) #walklog .wc-b{display:flex!important;align-items:center;position:relative;min-height:56px;box-sizing:border-box}
:where(html[lang="en"]) #walklog .wc-b small{display:none}
:where(html[lang="en"]) #walklog .wc-d{font-size:14px!important;font-variant-numeric:tabular-nums;flex:0 0 5.9em;white-space:nowrap}
:where(html[lang="en"]) #walklog .wl-trow{flex-wrap:nowrap!important;gap:6px!important}
:where(html[lang="en"]) #walklog .wl-town a{pointer-events:none}
:where(html[lang="en"]) #walklog .wl-map{width:28px!important;height:28px!important;font-size:16px!important;flex:0 0 auto}
:where(html[lang="en"]) #walklog .wl-n{flex:0 0 auto;font-size:13px;color:var(--muted);font-weight:700}
:where(html[lang="en"]) #walklog .wc-b::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
:where(html[lang="en"]) #walklog .wc.open .wc-b::after{content:"▴"}
:where(html[lang="en"]) #walklog .wc:not(.open) .wl-parts,:where(html[lang="en"]) #walklog .wc:not(.open) .wc-neta{display:none!important}
:where(html[lang="en"]) #walklog .wl-parts a{font-size:16px;padding:10px 12px}
:where(html[lang="en"]) #walklog .wc-neta{font-size:15px}
:where(html[lang="en"]) #walklog .wc-b .wc-img,:where(html[lang="en"]) #walklog .wc-b > .wc-noimg{display:block!important;flex:0 0 72px;pointer-events:none}
:where(html[lang="en"]) #walklog .wc-b .wc-img img,:where(html[lang="en"]) #walklog .wc-b .wc-img .wc-noimg,:where(html[lang="en"]) #walklog .wc-b > .wc-noimg{display:block!important;width:72px!important;height:40px;aspect-ratio:auto!important;object-fit:cover;border-radius:6px;font-size:16px}
:where(html[lang="en"]) #walklog .wc{position:relative;overflow:visible!important}
:where(html[lang="en"]) #walklog .wc::before{content:"";position:absolute;left:10px;top:-3px;width:11px;height:30px;background:var(--shu);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);box-shadow:0 1px 0 rgba(0,0,0,.15);z-index:1}
:where(html[lang="en"]) #walklog .wc .wl-parts{border-bottom-left-radius:10px;border-bottom-right-radius:10px;overflow:hidden}
:where(html[lang="en"]) #walklog .wc-b .wc-noimg{display:grid!important;place-items:center}
:where(html[lang="en"]) #walklog .wc-b img{display:block!important;flex:0 0 72px!important;width:72px!important;height:40px!important;max-width:72px;aspect-ratio:auto!important;object-fit:cover;border-radius:6px;pointer-events:none}
:where(html[lang="en"]) #walklog .wc-b .wc-img{flex:0 0 72px!important;width:72px;height:40px}
:where(html[lang="en"]) #walklog .wc[hidden]{display:none!important}
:where(html[lang="en"]) #walklog .wl-list{grid-template-columns:minmax(0,1fr)}
:where(html[lang="en"]) #walklog .wc,:where(html[lang="en"]) #walklog .wc-a,:where(html[lang="en"]) #walklog .wc-b{min-width:0}
:where(html[lang="en"]) #walklog .wl-trow{flex:1 1 0!important;min-width:0}
:where(html[lang="en"]) #walklog .wl-town{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere;min-width:0}
:where(html[lang="en"]) #walklog .wl-town:where(:not(:has(a))),:where(html[lang="en"]) #walklog .wl-town a{font-size:inherit}
:where(html[lang="en"]) #walklog .wc-b{gap:10px!important;padding:8px 30px 8px 28px!important}
:where(html[lang="en"]) #walklog .wl-tx{display:flex;flex-direction:column;gap:1px;flex:1 1 0;min-width:0}
:where(html[lang="en"]) #walklog .wl-tx .wc-d{flex:none!important;font-size:13px!important;min-width:0!important}
:where(html[lang="en"]) #walklog .wl-tx .wl-trow{flex:none!important}
:where(html[lang="en"]) #walklog .wl-town{font-size:17px!important;-webkit-line-clamp:1!important;white-space:nowrap!important;text-overflow:ellipsis}
:where(html[lang="en"]) #walklog .wc-b .wc-img,:where(html[lang="en"]) #walklog .wc-b > .wc-noimg,:where(html[lang="en"]) #walklog .wc-b img{flex:0 0 68px!important;width:68px!important;height:44px!important}
:where(html[lang="en"]) #walklog .wl-n{margin-left:auto}
:where(html[lang="en"]) #walklog .wl-tx{margin-left:6px}
/* 10：いま、歩きどき（トピックカード）を小さく。リンクは公式サイトとカレンダーだけ */
/*LAYOUT2-CSS-END*/
:where(html[lang="en"]) .hint-lock{display:block;width:100%;margin:10px 0 0;padding:10px 12px;border:1px dashed var(--cellline,#dfe3dc);border-radius:10px;background:transparent;text-align:left;font:inherit;font-size:14px;color:var(--green,#2b6b4a);cursor:pointer}
:where(html[lang="en"]) .hint-lock small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
:where(html[lang="en"]) .free-note{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
@keyframes gbIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* ---- 御足印帳の「さがす」 ---- */
/* 手帳の枠（grid）を押し広げないように */
/* 絞り込みや並び順を変えているときは、塗りつぶして見分ける */
/* 見出しの下を一段さげて、まとまりを分かりやすく */
/* 区の下に路線（横に並べない） */
/* 見出しの「御足印帳」は押せるボタン（説明のポップアップを開く） */
.bk-title{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:2px;text-align:left}
.bk-q{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;border-radius:50%;border:1.5px solid var(--green);color:var(--green);font-family:system-ui,sans-serif;font-size:13px;font-weight:700;line-height:1;transform:translateY(-2px)}
.about-pop p{margin:0 0 10px;line-height:1.75;font-size:14px}
.about-pop .small{font-size:12px;opacity:.85}
/* 検索欄と絞り込みボタンは、手帳の表紙の上の余白に置く（ページといっしょにはめくれない） */
/* 表紙より上、上のメニュー（z-index:7）より下 */
/* 表紙を検索欄のぶん上へのばす（検索欄36px＋すき間12px） */
/* 記号と「キーワードで探す」は同じ色 */
/* 縁取りは押しているように見えるので付けない */
/* キーワード欄の右端の × （入れた言葉を消す） */
/* 選んだ区・路線の札（× で外す） */
/* 御足印ギャラリーのボタンは、手帳の表紙の下の余白に置く */
/* 表紙をボタンのぶん下へのばす（ボタン40px＋すき間12px） */
/* 御足印ギャラリーのボタン：左に最近の印の丸、名前の下に件数 */
/* スタンプの丸は、ダークモードでも明るい和紙の色にする（暗い地だとスタンプが沈む） */
/* 丸が大きくなったぶん、表紙をのばす（ボタン62px＋すき間12px） */
/* ==== こよみ帳（もうすぐ歩きどき・月のタブ・カレンダー・イベント） ==== */
/* -- もうすぐ歩きどき -- */
.next{background:var(--card);border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);overflow:hidden}
.next h2{font-family:var(--display);margin:0;text-wrap:balance}
.label{font-size:13px;letter-spacing:.08em;color:var(--green);font-weight:700}
@media (max-width:640px){.next{grid-template-columns:1fr}.next .ph{min-height:150px}}
.next .ph{min-height:96px!important;height:96px}
.next .body{display:grid;align-content:start;min-width:0;padding:10px 14px 12px!important;gap:4px!important}
.next h2{font-size:20px!important;line-height:1.3}
.next .ore{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;font-size:15px!important;-webkit-line-clamp:2}
#next-links a[href*="note.com"]{display:none!important}
#next-links{display:flex;flex-wrap:nowrap;gap:8px;margin-top:2px}
#next-links a{font-size:15px;padding:4px 12px;white-space:nowrap}
.next-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.next-top .when{margin:0!important;display:flex;align-items:center;gap:6px;font-size:14px}
.next-top .label{margin:0}
/* -- 月のタブ -- */
.tabs button{font:inherit;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:var(--paper)}
.tabs button.lock::after{content:" 🔒";font-size:.8em}
.tabs button.lock[aria-selected="true"]{background:var(--card);color:var(--ink);border-color:var(--ink)}
.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
.tabs::-webkit-scrollbar{display:none}
.tabs .tcnt{font-weight:500;font-size:.85em;margin-left:2px}
.tabs button{white-space:nowrap;flex:0 0 auto;font-size:16px;padding:5px 14px}
/* -- 月の見出し・種類の切り替え・絞り込み -- */
.month{display:grid}
.month-head{display:flex;align-items:baseline;flex-wrap:wrap}
.month-head h2{font-family:var(--display);margin:0}
.month-head p{margin:0;color:var(--muted)}
.cats{display:flex;gap:6px;margin:0}
.cats button{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;cursor:pointer}
.cats button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cats button:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.month{animation:fade .3s ease-out}}
.month{gap:8px}
.month-head{gap:2px 10px}
.month-head h2{font-size:22px}
.month-head p{font-size:13px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cats::-webkit-scrollbar{display:none}
#month .cal-wrap ~ .filter > span{display:none}
#month .cal-wrap ~ .filter .linkbtn{font-size:13px}
#month .cal-wrap ~ .filter{display:none!important}
.cats button{white-space:nowrap;flex:0 0 auto;font-size:15px;padding:4px 12px}
/* -- カレンダー -- */
.cal-wrap{overflow-x:auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(38px,1fr));min-width:290px}
.cal .dow{text-align:center;color:var(--muted);font-weight:700}
.cal .dow.sun,.cal .d.sun .n{color:var(--kitsune)}
.cal .d{background:var(--card);border:1px solid var(--line);display:grid;align-content:start;font-variant-numeric:tabular-nums}
.cal .d.empty{background:transparent;border-color:transparent}
.cal .d.far{opacity:.45}
.cal .d .wmark{position:absolute;right:3px;top:2px;line-height:1}
.cal .d.walk:not(.has){background:color-mix(in srgb,var(--green) 8%,var(--card))}
.cal .d.far-btn{cursor:pointer;font:inherit;text-align:left}
.cal .d .kmark{display:block;font-size:14px;line-height:1;margin-top:4px;filter:grayscale(.2)}
.cal .d.far:has(.kmark){opacity:.7}
.cal .d .n{font-family:var(--mono);font-size:13px;font-weight:700}
.cal .d.today{outline:2px solid var(--green);outline-offset:-2px}
.cal button.d{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.cal button.d:focus-visible{outline:2px solid var(--tram);outline-offset:1px}
.cal .d.has{background:var(--card);border-color:var(--line)}
.cal .d.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cal .bar{display:block;height:6px;border-radius:0;background:color-mix(in srgb,var(--c) 70%,transparent);margin-inline:-7px}
.cal .bar.cap-l{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0}
.cal .bar.cap-r{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0}
.cal .bar.lab{height:auto;font-size:10px;line-height:1.5;padding:0 5px;color:var(--ink);background:color-mix(in srgb,var(--c) 22%,var(--card));border-left:3px solid var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .more{font-size:10px;color:var(--muted);font-weight:700}
.cal .dots{display:none;flex-wrap:wrap}
.cal .dots i{border-radius:50%;background:var(--c)}
@media (max-width:520px){.cal .bar,.cal .more{display:none}.cal .dots{display:flex}}
.cal{gap:3px}
.cal .d{position:relative;min-height:36px;padding:2px 4px;border-radius:6px;gap:1px}
.cal .dow{font-size:10px}
.cal .dots{gap:2px}
.cal .dots i{width:5px;height:5px}
.cal .d .wmark{font-size:14px}
#month .cal-wrap{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin:0 -2px;padding:2px}
#month .cal-wrap::-webkit-scrollbar{display:none}
#month .cal{display:flex!important;gap:4px;min-width:0!important;width:max-content}
#month .cal .dow,#month .cal .d.empty{display:none!important}
#month .cal .d{min-height:0!important;padding:3px 2px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;text-align:center!important;scroll-snap-align:start;box-sizing:border-box}
#month .cal .d .wd{line-height:1.2;color:var(--muted);font-weight:700}
#month .cal .d.sun .wd,#month .cal .d.hol .wd{color:var(--kitsune)}
#month .cal .d.sat .wd{color:var(--tram,#3a6ea5)}
#month .cal .d.today .wd{color:var(--green)}
#month .cal .d .n{line-height:1.2}
#month .cal .d .dots{justify-content:center;flex-wrap:nowrap;gap:2px;max-width:40px;overflow:hidden}
#month .cal .d .wmark{font-size:12px;right:1px;top:1px}
#month .cal .d .kmark{font-size:12px;margin-top:1px}
#month .cal .d:not(.has):not(.walk):not(.far){opacity:.55}
#month .cal .d .dots i:nth-child(n/**/+6){display:none}
#month .cal .d .dots i{flex:0 0 5px}
#month .cal .d .dots{display:none!important}
#month .cal .d .cnt{line-height:1.2;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
#month .cal .d.sel .cnt{color:var(--green)}
#month .cal .d-all{font:inherit;color:inherit;cursor:pointer}
#month .cal .d-all .n{font-family:var(--body)}
#month .cal .d{flex:0 0 54px;height:72px}
#month .cal .d .wd{font-size:13px}
#month .cal .d .n{font-size:18px}
#month .cal .d .cnt{font-size:13px}
#month .cal .d-all .n{font-size:15px}
#month .cal .d-all .cnt{font-size:14px}
#month .cal .d-all{opacity:1!important}
#month .cal .d-all,#month .cal .d-all.sel{box-shadow:none;border-width:1px}
/* -- 長い期間のイベント（たたむ欄） -- */
.longs{display:block;margin:0;background:var(--card);border:1px dashed var(--line);border-radius:10px}
.longs summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.longs summary::-webkit-details-marker{display:none}
.longs .lg-n{color:var(--muted);margin-left:0}
.lg-tg{margin-left:auto;display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;font-size:16px;font-weight:700;line-height:1;color:var(--muted);background:var(--paper)}
.lg-tg::after{content:"＋"}
.longs[open] .lg-tg::after{content:"－"}
.lg-body{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:8px}
.longs span{border-left:3px solid var(--c);padding-left:6px}
.longs small{color:var(--muted);margin-left:6px}
#month .longs:not(:has(.lg-body)) summary{cursor:default}
#month .longs:not(:has(.lg-body)) .lg-tg{visibility:hidden}
.longs{padding:6px 10px;font-size:15px}
.longs summary b{font-size:15px}
#month .longs.none summary{cursor:default}
#month .longs.none .lg-tg{visibility:hidden}
/* -- イベントのカード -- */
.locked.slim{padding:18px 16px;margin-top:14px}
.locked.slim h3{font-size:17px}
.ev{border-left:4px solid var(--c,var(--line))}
.ev{background:var(--card);border:1px solid var(--line);display:grid;grid-template-columns:150px minmax(0,1fr);overflow:hidden}
.ev .body{display:grid;min-width:0}
.ev .when{display:flex;align-items:center;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:13px;background:var(--green-soft);color:var(--green);border-radius:6px;padding:1px 8px}
.chip.maybe{background:var(--tram-soft);color:var(--ink)}
.chip.cat{background:transparent;border:1px solid var(--line);color:var(--muted)}
.chip.long{background:color-mix(in srgb,var(--c) 18%,var(--card));color:var(--ink)}
.ev h3{font-family:var(--display);margin:0}
.ev p{margin:0}
.ore{font-family:var(--display);color:var(--ink);border-left:3px solid var(--tram);padding-left:10px}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.links a{font-size:14px;font-weight:700;color:var(--green);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.links a:hover{border-color:var(--green)}
.links .none{font-size:14px;color:var(--muted);padding:3px 0}
@media (max-width:560px){.ev{grid-template-columns:1fr}.ev .ph{min-height:110px}}
.ev{position:relative}
.events{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding:0 2px 8px;align-items:flex-start;scrollbar-width:thin}
.ev{flex:0 0 80%;scroll-snap-align:start;grid-template-columns:84px minmax(0,1fr)!important;border-radius:10px;cursor:pointer}
.ev .ph{box-sizing:border-box;min-height:84px!important;height:100%}
.ev .ph .cap{display:none}
.ev .body{padding:8px 28px 8px 10px;gap:3px;align-content:center}
.ev .when{gap:4px}
.ev .when .chip{padding:0 6px}
.ev h3{line-height:1.35}
.ev:not(.open) .when{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.ev:not(.open) .when .chip{flex:0 0 auto}
.ev:not(.open) h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#month .ev h3,.next h2{font-family:var(--body);font-weight:700}
.ev:not(.open) .body>p,.ev:not(.open) .links{display:none}
.ev::after{content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
.ev.open .ph{height:140px;min-height:140px!important}
.ev.open .ph .cap{display:block}
.ev.open::after{content:"▴";top:150px;transform:none}
.ev.open .body{padding:10px 12px 12px}
.ev .body>p{font-size:14px}
.ev-swipe{font-size:12px;color:var(--muted);margin:-4px 0 0;display:flex;justify-content:space-between;gap:8px}
.ev-swipe button{font:inherit;font-size:12px;background:none;border:0;color:var(--green);text-decoration:underline;cursor:pointer;padding:0}
.ev-swipe,.ev-swipe span{font-size:14px}
.ev:not(.open){height:104px}
.ev{flex-basis:84%;grid-template-columns:96px minmax(0,1fr)!important}
.ev.open{grid-template-columns:1fr!important}
.ev .when .chip{font-size:14px}
.ev h3{font-size:17px}
.ev .body>p,.ev .ore{font-size:16px!important}
.ev .links a,.ev .links button{font-size:15px;padding:4px 12px}
#month .ev .links a[href*="note.com"]{display:none!important}
/* ==== こよみ帳（もうすぐ歩きどき・月のタブ・カレンダー・イベント） ここまで ==== */
/* 「今月」の枠は、選んでいても細い線 */
/* 最初・最後のページへ行くボタン（もどる・めくるの外側） */
.about-pop .about-hr{border:0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);margin:4px 0 12px}
/* 薄めの罫線 */
/* 現在地の近くを探すピン（キーワード欄の右）。押すと近い3件のリスト */
/* 近くの御足印：行の下に「地図で見る」（ヒントの地図より一段広い縮尺） */
.near-list .near-gm>summary{font-size:14px;font-weight:700;color:var(--green);cursor:pointer;text-align:right;list-style:none}
.near-list .near-gm>summary::-webkit-details-marker{display:none}
.near-list .near-gm>summary::before{content:"🗺 "}
.near-list .near-gm .gm-box{margin-top:6px}
.near-list>li>button .dist{font-size:15px}
.near-list>li>button small{font-size:14px}
/* 「地図で見る」もカードの中に収める：枠は行（li）につけ、中のボタンは枠なし */
.near-list li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px}
.near-list>li>button{border:0;padding:0;background:none}
.near-list .near-gm{margin:4px 0 0;border-top:1px dashed var(--line);padding-top:4px}
:where(html[lang="en"]) .near-list .near-lock{display:block;width:100%;text-align:right;font:inherit;font-size:13px;color:var(--green);background:none;border:0;border-top:1px dashed var(--line);margin:4px 0 0;padding:4px 0 0;cursor:pointer}
/* 合鍵の人：小さい円の地図の上に「ピンを見る」 */
.hm-reveal{position:absolute;right:10px;top:10px;z-index:3;font:inherit;font-size:13px;font-weight:700;border:0;border-radius:999px;background:#c23a2b;color:#fff;padding:6px 12px;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.hm-reveal.on{background:#fff;color:#c23a2b;box-shadow:0 0 0 1.5px #c23a2b,0 1px 4px rgba(0,0,0,.3)}
/* 表示中は白地にして「隠す」と分かるように */
/* 御足印ギャラリーの地図 */
/* 地図の左端の帯（画面のスクロール用）は、うすい灰色で見分けられるように。印は帯より手前に出して、帯の上でも押せるようにする */
.gm-box.hm .hm-lane{background:rgba(0,0,0,.07);width:47px}
/* 左右とも同じ濃さ・同じ幅の、うすい灰色。幅は左上の拡大・縮小ボタンの右端にそろえる（後ろにある元の指定より強くする） */
.gm-box.hm .hm-lane.hm-lane-r{left:auto;right:0}
.hm .maplibregl-marker{z-index:2}
/* 画面の色（自動・ライト・ダーク）の切り替え */
:root[data-theme="dark"] .qkey.on{color:#e8c77a}
.theme-sw{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.theme-sw button{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:3px 12px;cursor:pointer}
.theme-sw button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:var(--paper);font-weight:700}
/* 駅めぐり帳・街のしおりの見出しも、押せる見出し（御足印帳と同じ） */
.ek-head .bk-title small{margin-left:6px}
.about-pop ul,.about-pop ol{margin:0 0 10px;padding-left:1.3em;font-size:14px;line-height:1.7}
/* ==== 街のしおり（こよみの「さんぽのしおり」のカードも） ==== */
/* -- 枠・見出し・検索 -- */
:where(html[lang="ja"]) .walklog{display:grid;gap:12px}
:where(html[lang="ja"]) .wl-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
:where(html[lang="ja"]) .wl-head h2{margin:0;font-family:var(--display);font-size:26px}
:where(html[lang="ja"]) .wl-count{font-size:14px;color:var(--muted)}
:where(html[lang="ja"]) .wl-lead{margin:0;color:var(--muted);font-size:15px}
:where(html[lang="ja"]) .wl-q{font:inherit;font-size:16px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);width:100%;max-width:420px}
:where(html[lang="ja"]) #walklog .wl-lead{font-size:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
:where(html[lang="ja"]) #walklog .wl-count{display:none}
/* -- ページ送り -- */
:where(html[lang="ja"]) .wl-more{justify-self:start}
:where(html[lang="ja"]) #walklog .wl-pager{display:flex;align-items:center;justify-content:space-between;gap:8px}
:where(html[lang="ja"]) #walklog .wl-pg{font:inherit;font-size:16px;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--green);border-radius:999px;padding:7px 16px;cursor:pointer}
:where(html[lang="ja"]) #walklog .wl-pg:disabled{opacity:.35;cursor:default}
:where(html[lang="ja"]) #walklog .wl-pn{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
:where(html[lang="ja"]) #walklog #wl-more{display:none!important}
/* -- 街のカード -- */
:where(html[lang="ja"]) .walks{display:grid;gap:12px;margin-top:6px}
:where(html[lang="ja"]) .wl-list{display:grid;gap:12px}
@media (min-width:900px){:where(html[lang="ja"]) .wl-list{grid-template-columns:1fr 1fr}}
:where(html[lang="ja"]) .wl-town{font-family:var(--display);font-size:20px!important}
:where(html[lang="ja"]) .wl-sub{font-size:15px;line-height:1.5;color:inherit;text-decoration:none}
:where(html[lang="ja"]) .wl-trow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
:where(html[lang="ja"]) .wl-town a{color:inherit;text-decoration:none}
:where(html[lang="ja"]) .wc-img{display:block;text-decoration:none}
:where(html[lang="ja"]) .wl-map{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--page);font-size:17px;line-height:1;text-decoration:none;cursor:pointer;padding:0;font-family:inherit}
:where(html[lang="ja"]) .wl-map.wait{opacity:.4;cursor:default}
:where(html[lang="ja"]) .wl-map.wl-lk{filter:grayscale(.6)}
:where(html[lang="ja"]) .wl-map.wl-lk i{position:absolute;right:-4px;bottom:-3px;font-size:12px;font-style:normal;filter:none}
:where(html[lang="ja"]) .wl-parts{display:grid;border-top:1px dashed var(--line)}
:where(html[lang="ja"]) .wl-parts a{padding:9px 12px;font-size:15px;color:inherit;text-decoration:none;border-top:1px solid var(--line)}
:where(html[lang="ja"]) .wl-parts a:first-child{border-top:0}
:where(html[lang="ja"]) .wl-parts a::after{content:" ›";color:var(--green);font-weight:700}
:where(html[lang="ja"]) .walks h3{margin:0;font-family:var(--display);font-size:18px}
:where(html[lang="ja"]) .walks-none{color:var(--muted);font-size:15px;margin:0}
:where(html[lang="ja"]) .wc{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
:where(html[lang="ja"]) .wc-a{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center;color:inherit;text-decoration:none;padding:10px}
:where(html[lang="ja"]) .wc-a img{width:132px;aspect-ratio:1.91/1;object-fit:cover;border-radius:8px;background:var(--line)}
:where(html[lang="ja"]) .wc-b{display:grid;gap:4px;min-width:0}
:where(html[lang="ja"]) .wc-noimg{display:grid;place-items:center;width:100%;aspect-ratio:1.91/1;border-radius:8px;background:color-mix(in srgb,var(--green) 10%,var(--card));font-size:28px}
:where(html[lang="ja"]) .wc-d{font-size:13px;color:var(--green);font-weight:700}
:where(html[lang="ja"]) .wc-b b{font-size:15px;line-height:1.5}
:where(html[lang="ja"]) .wc-b small{font-size:13px;color:var(--muted)}
:where(html[lang="ja"]) .wc-neta{display:block;width:100%;text-align:left;font:inherit;font-size:14px;font-weight:700;padding:10px 12px;border:0;border-top:1px dashed var(--line);background:color-mix(in srgb,var(--green) 6%,var(--card));color:var(--green);text-decoration:none;cursor:pointer}
:where(html[lang="ja"]) .wc-neta.lock{color:var(--ink);background:var(--page)}
@media (min-width:640px){:where(html[lang="ja"]) .wc-a{grid-template-columns:200px minmax(0,1fr)}:where(html[lang="ja"]) .wc-a img{width:200px}}
:where(html[lang="ja"]) #walklog .wl-list{gap:6px}
:where(html[lang="ja"]) #walklog .wc{border-radius:10px}
:where(html[lang="ja"]) #walklog .wc-a{display:block!important;padding:0!important;cursor:pointer}
:where(html[lang="ja"]) #walklog .wc-b{display:flex!important;align-items:center;position:relative;min-height:56px;box-sizing:border-box}
:where(html[lang="ja"]) #walklog .wc-b small{display:none}
:where(html[lang="ja"]) #walklog .wc-d{font-size:14px!important;font-variant-numeric:tabular-nums;flex:0 0 5.9em;white-space:nowrap}
:where(html[lang="ja"]) #walklog .wl-trow{flex-wrap:nowrap!important;gap:6px!important}
:where(html[lang="ja"]) #walklog .wl-town a{pointer-events:none}
:where(html[lang="ja"]) #walklog .wl-map{width:28px!important;height:28px!important;font-size:16px!important;flex:0 0 auto}
:where(html[lang="ja"]) #walklog .wl-n{flex:0 0 auto;font-size:13px;color:var(--muted);font-weight:700}
:where(html[lang="ja"]) #walklog .wc-b::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
:where(html[lang="ja"]) #walklog .wc.open .wc-b::after{content:"▴"}
:where(html[lang="ja"]) #walklog .wc:not(.open) .wl-parts,:where(html[lang="ja"]) #walklog .wc:not(.open) .wc-neta{display:none!important}
:where(html[lang="ja"]) #walklog .wl-parts a{font-size:16px;padding:10px 12px}
:where(html[lang="ja"]) #walklog .wc-neta{font-size:15px}
:where(html[lang="ja"]) #walklog .wc-b .wc-img,:where(html[lang="ja"]) #walklog .wc-b > .wc-noimg{display:block!important;flex:0 0 72px;pointer-events:none}
:where(html[lang="ja"]) #walklog .wc-b .wc-img img,:where(html[lang="ja"]) #walklog .wc-b .wc-img .wc-noimg,:where(html[lang="ja"]) #walklog .wc-b > .wc-noimg{display:block!important;width:72px!important;height:40px;aspect-ratio:auto!important;object-fit:cover;border-radius:6px;font-size:16px}
:where(html[lang="ja"]) #walklog .wc{position:relative;overflow:visible!important}
:where(html[lang="ja"]) #walklog .wc::before{content:"";position:absolute;left:10px;top:-3px;width:11px;height:30px;background:var(--shu);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);box-shadow:0 1px 0 rgba(0,0,0,.15);z-index:1}
:where(html[lang="ja"]) #walklog .wc .wl-parts{border-bottom-left-radius:10px;border-bottom-right-radius:10px;overflow:hidden}
:where(html[lang="ja"]) #walklog .wc-b .wc-noimg{display:grid!important;place-items:center}
:where(html[lang="ja"]) #walklog .wc-b img{display:block!important;flex:0 0 72px!important;width:72px!important;height:40px!important;max-width:72px;aspect-ratio:auto!important;object-fit:cover;border-radius:6px;pointer-events:none}
:where(html[lang="ja"]) #walklog .wc-b .wc-img{flex:0 0 72px!important;width:72px;height:40px}
:where(html[lang="ja"]) #walklog .wc[hidden]{display:none!important}
:where(html[lang="ja"]) #walklog .wl-list{grid-template-columns:minmax(0,1fr)}
:where(html[lang="ja"]) #walklog .wc,:where(html[lang="ja"]) #walklog .wc-a,:where(html[lang="ja"]) #walklog .wc-b{min-width:0}
:where(html[lang="ja"]) #walklog .wl-trow{flex:1 1 0!important;min-width:0}
:where(html[lang="ja"]) #walklog .wl-town{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere;min-width:0}
:where(html[lang="ja"]) #walklog .wl-town:where(:not(:has(a))),:where(html[lang="ja"]) #walklog .wl-town a{font-size:inherit}
:where(html[lang="ja"]) #walklog .wc-b{gap:10px!important;padding:8px 30px 8px 28px!important}
:where(html[lang="ja"]) #walklog .wl-tx{display:flex;flex-direction:column;gap:1px;flex:1 1 0;min-width:0}
:where(html[lang="ja"]) #walklog .wl-tx .wc-d{flex:none!important;font-size:13px!important;min-width:0!important}
:where(html[lang="ja"]) #walklog .wl-tx .wl-trow{flex:none!important}
:where(html[lang="ja"]) #walklog .wl-town{font-size:17px!important;-webkit-line-clamp:1!important;white-space:nowrap!important;text-overflow:ellipsis}
:where(html[lang="ja"]) #walklog .wc-b .wc-img,:where(html[lang="ja"]) #walklog .wc-b > .wc-noimg,:where(html[lang="ja"]) #walklog .wc-b img{flex:0 0 68px!important;width:68px!important;height:44px!important}
:where(html[lang="ja"]) #walklog .wl-n{margin-left:auto}
:where(html[lang="ja"]) #walklog .wl-tx{margin-left:6px}
/* ==== 街のしおり（こよみの「さんぽのしおり」のカードも） ここまで ==== */
/* 「◯の街」の数は出さない（11/1） */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
:where(html[lang="en"]) .lang-sw{font-size:14px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:0 10px}
:where(html[lang="en"]) .lang-sw:hover{color:var(--ink)}
/* Walking Courses */
/* 2行で切る見出しでも、最後の行の下線が切れないように */
/* タイトルから note の記事（1本目）へ */
/* アドレスバーが縮んだときの帯の後ろも、同じカードの背景にする */
/* 左右とも同じ濃さ・同じ幅（ヒントの地図と同じ） */
/* 現在地の向き（扇形） */
/* ナビの画面：画面いっぱいに固定。上は地図、下に小さなカード */
/* ナビのカードは2行（名前・距離）。1行ずつ折り返さないので、どのカードも同じ高さ */
/* 現在地の青い点の波紋：ゆっくり・小さく（元は2秒で3倍まで広がる） */
@keyframes osanpo-pulse{0%{opacity:.6;transform:scale(1)}50%{opacity:0;transform:scale(2.2)}100%{opacity:0;transform:scale(1)}}
/* 朱色で目立たせる */
/* ==== 散歩コース（一覧・詳しく・地図とナビ・立ち寄り先） ==== */
/* -- 一覧（カード） -- */
.wc2{display:grid;gap:12px}
.wc2-lead{margin:-4px 0 0;color:var(--muted);font-size:15px}
.wc2-demo{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.wc2-demo button{font:inherit;font-size:13px;border:1px dashed var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:2px 10px;cursor:pointer}
#crs-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none;align-items:stretch}
#crs-list::-webkit-scrollbar{display:none}
#crs-list .crs{flex:0 0 min(80%,300px);scroll-snap-align:start;display:flex;flex-direction:column}
#crs-list .crs-b{flex:1;display:flex;flex-direction:column;gap:6px}
#crs-list .crs-b h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#crs-list .crs-b .crs-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#crs-list .crs-open{margin-top:auto}
#crs-list .crs.active{border-color:var(--shu);box-shadow:0 0 0 1px var(--shu)}
.crs-rowhint{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin:-4px 0 -6px}
.crs-cover{position:relative;height:150px;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:150px;gap:2px;background:var(--line);overflow:hidden}
.crs-cover img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.crs-cover > img{height:150px}
.crs-cover .side{display:grid;grid-template-rows:74px 74px;gap:2px;min-height:0;overflow:hidden}
.crs-cover .side img{min-height:0}
.crs-strip{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;height:64px;background:var(--line);overflow:hidden}
.crs-strip img{width:100%;height:64px;object-fit:cover;display:block}
.crs-badge{position:absolute;left:8px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:700;border-radius:999px;padding:3px 10px}
.crs-b{padding:12px 14px 14px;display:grid;gap:6px}
.crs-b h3{margin:0;font-family:var(--display);font-size:20px;line-height:1.3}
.crs-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:14px}
.crs-meta span{background:var(--green-soft);color:var(--green);border-radius:6px;padding:1px 8px;font-weight:700}
.crs-ft{font-size:14px;line-height:1.45;color:var(--muted)}
.crs-b h3:has(.crs-tl){padding-bottom:6px;margin-bottom:-6px}
.crs-tl{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--green) 55%,transparent);text-decoration-thickness:2px;text-underline-offset:4px}
.crs-tl-ic{display:inline-block;margin-left:5px;font-size:.78em;line-height:1;color:var(--green);vertical-align:-.05em}
.crs-tl-ic svg{display:block}
.crs-dots{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crs-dots img{width:38px;height:38px;border-radius:50%;display:block}
.crs-dots img.cd-ph{object-fit:cover;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.crs-dots img.cd-st{object-fit:contain;background:#f7f3ea;border:2px solid var(--shu);padding:2px;box-sizing:border-box}
.crs-dots .lk{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--page);border:1px dashed var(--line);font-size:15px}
.crs-open{font:inherit;font-size:16px;font-weight:700;border:1px solid var(--green);color:var(--green);background:transparent;border-radius:999px;padding:7px 16px;cursor:pointer;justify-self:start}
.crs-t .crs-t-col{position:absolute;inset:0;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:var(--green)}
.crs-t .crs-t-col img,.crs-t .crs-t-col i{width:100%;height:100%;object-fit:cover;display:block;min-height:0;background:var(--page)}
.crs-t .crs-t-col>:first-child{grid-row:1/3}
.crs-t .crs-t-tag{position:absolute;left:4px;top:4px;z-index:1;font-size:10px;font-weight:700;color:#fff;background:#d23a2c;border-radius:999px;padding:2px 8px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.crs-t .nm{z-index:1;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.crs-meta .crs-free{background:var(--tram-soft);color:var(--ink)}
.crs-dots img[data-sid]{cursor:pointer}
/* -- 札・御足印帳の中のコース案内 -- */
.crs-in{margin:10px 0 2px;display:grid;gap:6px}
.crs-in-h{font-size:13px;color:var(--muted);font-weight:700}
.crs-in-b{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 10px 6px 6px;cursor:pointer}
.crs-in-b:hover,.crs-in-b:focus-visible{border-color:var(--shu)}
.crs-in-col{flex:none;width:84px;height:56px;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:2px;border-radius:8px;overflow:hidden;background:var(--line)}
.crs-in-col img,.crs-in-col i{width:100%;height:100%;object-fit:cover;display:block;min-height:0;background:var(--page)}
.crs-in-col>:first-child{grid-row:1/3}
.crs-in-t{flex:1;min-width:0;display:grid;gap:2px}
.crs-in-t b{font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crs-in-t small{font-size:12px;color:var(--muted)}
.crs-in-a{font-size:22px;color:var(--muted)}
/* -- 有料のコース -- */
.crs-pay{border:1px solid var(--tram);background:var(--tram-soft);border-radius:10px;padding:10px 12px;display:grid;gap:6px;font-size:15px}
.crs-pay b{font-size:16px}
.crs-pay .btn{justify-self:start}
/* -- 地図とナビ -- */
.crs-gl{position:relative;height:min(46vh,350px);border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--page)}
.crs-gl .gl-lane{position:absolute;left:0;top:0;bottom:0;width:47px;z-index:1;touch-action:pan-y;background:rgba(0,0,0,.07)}
.crs-gl .gl-lane.r{left:auto;right:0}
.crs-gl .maplibregl-marker{z-index:2}
.crs-gl .maplibregl-ctrl-top-right{z-index:3}
.crs-gl .gl-arrive{position:absolute;left:50%;top:62px;transform:translateX(-50%);z-index:4;display:flex;gap:10px;align-items:center;background:var(--card);color:var(--ink);border:2px solid var(--shu);border-radius:18px;padding:7px 8px 7px 14px;font-weight:700;font-size:15px;line-height:1.35;box-shadow:0 4px 14px rgba(0,0,0,.25);width:max-content;max-width:calc(100% - 110px)}
.crs-gl .gl-arrive button{flex:none;font:inherit;font-size:14px;border:0;border-radius:999px;background:var(--green);color:#fff;padding:4px 12px;cursor:pointer}
.crs-gl .hd-cone{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;pointer-events:none;z-index:-1;background:conic-gradient(from -30deg,rgba(29,161,242,.5) 0deg 60deg,transparent 60deg);-webkit-mask:radial-gradient(circle,#000 0 30%,transparent 70%);mask:radial-gradient(circle,#000 0 30%,transparent 70%)}
.crs-x.navfs{position:fixed;inset:0;z-index:50;margin:0;border:0;border-radius:0;padding:0!important;display:flex!important;flex-direction:column;gap:0;background:var(--card)}
.crs-x.navfs>*:not(.crs-gl):not(.stops){display:none!important}
.crs-x.navfs .crs-gl{flex:1 1 auto;height:auto!important;min-height:0;margin:0!important;border:0;border-radius:0}
.crs-x.navfs .crs-gl .maplibregl-ctrl-top-left,.crs-x.navfs .crs-gl .maplibregl-ctrl-top-right{top:env(safe-area-inset-top)}
.crs-x.navfs .stops{flex:none;margin:0;padding:8px 10px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.crs-x.navfs .stp2{grid-template-columns:44px minmax(0,1fr);padding:8px 10px;gap:8px;align-items:center}
.crs-x.navfs .stp2.end,.crs-x.navfs .stp2.st0{grid-template-columns:minmax(0,1fr);padding-left:34px}
.crs-x.navfs .stp2 img,.crs-x.navfs .stp2 .ph0{width:44px;height:44px}
.crs-x.navfs .stp2 .one,.crs-x.navfs .stp2 .tip,.crs-x.navfs .stp2 .more{display:none!important}
.crs-x.navfs .stp2{height:auto;min-height:64px!important;box-sizing:border-box;overflow:visible}
.crs-x.navfs .stp2 b{line-height:1.3;font-size:15px}
.crs-x.navfs .stp2 small{margin:0;line-height:1.3;font-size:13px}
.crs-x.navfs .stp2>span:last-child{min-width:0}
.crs-x.navfs .stp2 b,.crs-x.navfs .stp2 small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crs-x.navfs .stp2 b .crs-sn{white-space:nowrap}
.crs-x.navfs .stp2 .no{width:20px;height:20px;font-size:12px}
html.crs-navfs,html.crs-navfs body{overflow:hidden}
.maplibregl-user-location-dot::before{animation:osanpo-pulse 6s ease-out infinite!important}
.crs-gl .gl-nav{font:inherit;font-size:15px;font-weight:700;border:0;border-radius:999px;padding:7px 14px;background:var(--green);color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.3);cursor:pointer;margin:12px 12px 0 0}
.crs-gl.nav .gl-nav{background:#fff;color:var(--ink);border:1px solid var(--line)}
.crs-gl .maplibregl-ctrl-top-left,.crs-gl .maplibregl-ctrl-bottom-right{z-index:3}
.crs-gl .gl-card{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:none;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;align-items:start;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.crs-gl .gl-card.on{display:grid}
.crs-gl .gl-card img,.crs-gl .gl-card .ph0{width:72px;height:72px;border-radius:8px;object-fit:cover;display:grid;place-items:center;background:var(--page);font-size:20px}
.crs-gl .gl-card small{display:block;font-size:12px;color:var(--muted)}
.crs-gl .gl-card .lft{display:grid;justify-items:center;gap:5px}
.crs-gl .gl-card .lft.tap{cursor:pointer}
.crs-gl .gl-card .lft.tap img{box-shadow:0 0 0 2px var(--shu)}
.crs-gl .gl-card .lft .pin{width:24px;height:24px;line-height:20px;font-size:13px;cursor:default;box-shadow:none}
.crs-gl .gl-card .lft .pin.st.sg{width:36px}
.crs-gl .gl-card b{display:block;font-size:16px;line-height:1.3;margin-bottom:2px}
.crs-gl .gl-card .one{font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.crs-gl .gl-card .go{margin-top:4px;font:inherit;font-weight:700;font-size:13px;border:1px solid var(--green);color:var(--green);background:transparent;border-radius:999px;padding:2px 10px;cursor:pointer}
.crs-gl .gl-card .x{border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer;padding:0 2px;line-height:1}
.crs-gl .gl-back{display:grid!important;place-items:center;align-content:center;gap:1px;color:#1f2a28;height:46px!important}
.crs-gl .gl-back span{font:700 9px/1 system-ui;letter-spacing:.02em}
.crs-gl .maplibregl-ctrl-top-left .maplibregl-ctrl-group{margin-top:12px}
.crs-gl .maplibregl-ctrl-top-left .maplibregl-ctrl-group button{width:36px;height:36px}
.crs-gl .pin{width:30px;height:30px;border-radius:50%;background:var(--shu);color:#fff;font:700 14px/26px system-ui;text-align:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer}
.crs-gl .pin.act{box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(179,46,36,.45);z-index:5}
.crs-gl .pin.det{background:var(--tram);width:24px;height:24px;line-height:20px;font-size:13px}
.crs-gl .pin.st{border-radius:6px;background:#1f2a28;width:28px;height:28px;line-height:24px;font-size:13px}
.crs-gl .pin.st.sg{width:40px;font-size:12px}
.crs-gl-note{font-size:13px;color:var(--muted);margin:-4px 0 0}
.crs-map{width:100%;height:auto;background:color-mix(in srgb,var(--green) 6%,var(--page));border-radius:10px;border:1px solid var(--line)}
.crs-map .rt{fill:none;stroke:var(--shu);stroke-width:2.2;stroke-dasharray:5 4;stroke-linecap:round}
.crs-map .st{fill:var(--ink)}
.crs-map .stt{font-size:9px;fill:var(--muted);font-family:var(--body)}
.crs-map .pt{fill:var(--shu)}
.crs-map .pn{font-size:9px;fill:#fff;font-weight:700;font-family:var(--body)}
.crs-map .dt{fill:var(--tram)}
/* -- 立ち寄り先 -- */
.stp2 .one{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stp2 .tip{display:-webkit-box!important;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.stp2.open .one,.stp2.open .tip{-webkit-line-clamp:unset;display:block!important}
.stp2 .more{display:block;font-size:14px;font-weight:700;color:var(--green);margin-top:2px}
.stp2.has-more{cursor:pointer}
.stp2.open .more{display:none}
.stp2{position:relative;flex:0 0 min(86%,330px);scroll-snap-align:start;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.stp2.end,.stp2.st0{grid-template-columns:minmax(0,1fr);padding-left:38px}
.stp2.on{border-color:var(--shu);box-shadow:0 0 0 1px var(--shu)}
.stp2 .no{position:absolute;left:4px;top:4px;z-index:1;width:24px;height:24px;border-radius:50%;background:var(--shu);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;border:2px solid var(--card)}
.crs-swipe{font-size:13px;color:var(--muted);margin:-2px 0 -6px;display:flex;justify-content:space-between}
.stp2.det .no{background:var(--tram)}
.stp2.end .no{background:var(--ink)}
.stp2 img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.stp2 .ph0{width:64px;height:64px;border-radius:6px;background:var(--page);border:1px dashed var(--line);display:grid;place-items:center;font-size:16px}
.stp2 b{display:block;font-size:16px;line-height:1.25}
.stp2 small{display:block;font-size:14px;line-height:1.3;color:var(--muted);margin:1px 0 3px}
.stp2 .st-sum{display:inline-block;font-size:13px;font-weight:700;color:var(--green);background:var(--green-soft);border-radius:6px;padding:0 6px;margin-bottom:4px}
.stp2 .tip{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);font-size:15px;line-height:1.45;color:var(--muted)}
:where(html[lang="ja"]) .stp2 .tip::before{content:"おまけ：";font-weight:700;color:var(--ink)}
:where(html[lang="en"]) .stp2 .tip::before{content:"Next: ";font-weight:700;color:var(--ink)}
.stp2 .one{display:block;font-size:16px;line-height:1.45;color:var(--ink)}
.stp2.lk2{filter:blur(3px);opacity:.6;pointer-events:none;user-select:none}
.crs-sp{border:0;padding:0;background:none;cursor:pointer;border-radius:6px;display:block}
.crs-sp:hover img,.crs-sp:focus-visible img{outline:2px solid var(--shu);outline-offset:1px}
.crs-sn{border:0;padding:0;background:none;font:inherit;font-weight:700;color:inherit;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
/* -- 詳しく（開いたコース） -- */
#crs-detail .crs-x{display:grid;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px 86px;border-top:1px solid var(--line)}
#crs-detail:empty{display:none}
.crs-dh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.crs-dh b{font-family:var(--display);font-size:18px;line-height:1.3}
.crs-close{font:inherit;font-size:14px;font-weight:700;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:3px 12px;cursor:pointer;white-space:nowrap}
.crs{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.crs-x{display:none;border-top:1px dashed var(--line);padding:12px 14px 14px;gap:10px}
.crs.open .crs-x{display:grid;padding-bottom:86px}
.crs-x .stops{list-style:none;margin:0 -14px;padding:2px 14px 8px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.crs-x .stops::-webkit-scrollbar{display:none}
.crs-x .stops{align-items:flex-start}
/* ==== 散歩コース（一覧・詳しく・地図とナビ・立ち寄り先） ここまで ==== */
/* ヒントの地図：自前の地図データで印の場所を出す（日本語版は日本語、英語版は英語の地名） */
.hm .hm-me{width:16px;height:16px;border-radius:50%;background:#1da1f2;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 0 10px rgba(29,161,242,.5)}
.hm .hd-cone{display:none;position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-84px 0 0 -42px;transform-origin:50% 100%;transform:rotate(calc(var(--hd,0deg) - var(--mb,0deg)));background:radial-gradient(circle at 50% 100%,rgba(29,155,240,.55),rgba(29,155,240,.18) 55%,rgba(29,155,240,0) 72%);clip-path:polygon(50% 100%,12% 0,88% 0);pointer-events:none}
.hd-on .hm .hd-cone{display:block}
.hm .maplibregl-user-location-dot,.hm .hm-me{overflow:visible}
.hm .hm-pin{width:30px;height:40px;cursor:default;z-index:2}
.hm .hm-op{width:24px;height:24px;padding:0;border-radius:50%;border:2px solid #fff;background:#c23a2b;color:#fff;font:13px/20px "Yuji Syuku",serif;text-align:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hm .hm-op.got{background:#fff;color:#c23a2b;border-color:#c23a2b;opacity:.9}
.hm .hm-op.lk{background:#8a8f98}
.hm .hm-lane{position:absolute;left:0;top:0;bottom:0;width:58px;z-index:1;touch-action:pan-y;background:linear-gradient(90deg,rgba(0,0,0,.07),rgba(0,0,0,0))}
.hm .maplibregl-ctrl-top-left,.hm .maplibregl-ctrl-bottom-right{z-index:3}
.hm .maplibregl-ctrl-top-left .maplibregl-ctrl-group{margin-top:12px}
.hm .maplibregl-ctrl-top-left .maplibregl-ctrl-group button{width:36px;height:36px}
.hm .hm-back{display:grid!important;place-items:center;align-content:center;gap:1px;height:46px!important;color:#1f2a28}
.hm .hm-back span{font:700 9px/1 system-ui}
@keyframes mpArm{0%{transform:scale(.9)}40%{transform:scale(1.08)}70%{transform:translateX(-3px)}85%{transform:translateX(3px)}100%{transform:none}}
@keyframes gtPaper{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes gtSlam{0%{opacity:0;transform:translateY(-140%) scale(1.5) rotate(5deg);animation-timing-function:cubic-bezier(.45,0,1,.6)}7%{opacity:1}38%{transform:none;animation-timing-function:ease-out}43%{transform:scale(1.06,.9)}49%{transform:none}56%{transform:none}59%{transform:translate(-1.10%,0) rotate(-0.55deg)}62%{transform:translate(1.00%,0) rotate(0.50deg)}65%{transform:translate(-0.90%,0) rotate(-0.45deg)}68%{transform:translate(0.80%,0) rotate(0.40deg)}71%{transform:translate(-0.70%,0) rotate(-0.35deg)}74%{transform:translate(0.60%,0) rotate(0.30deg)}77%{transform:translate(-0.50%,0) rotate(-0.25deg)}80%{transform:translate(0.40%,0) rotate(0.20deg)}83%{transform:translate(-0.30%,0) rotate(-0.15deg)}86%{transform:translate(0.20%,0) rotate(0.10deg)}89%{transform:translate(-0.12%,0) rotate(-0.06deg)}95%{transform:none}100%{opacity:1;transform:none}}
@keyframes gtSlam2{0%{opacity:0;transform:translateY(-61.60%) scale(1.5) rotate(5deg);animation-timing-function:cubic-bezier(.45,0,1,.6)}7%{opacity:1}38%{transform:none;animation-timing-function:ease-out}43%{transform:scale(1.06,.9)}49%{transform:none}56%{transform:none}59%{transform:translate(-0.646%,0) rotate(-0.55deg)}62%{transform:translate(0.587%,0) rotate(0.50deg)}65%{transform:translate(-0.528%,0) rotate(-0.45deg)}68%{transform:translate(0.470%,0) rotate(0.40deg)}71%{transform:translate(-0.411%,0) rotate(-0.35deg)}74%{transform:translate(0.352%,0) rotate(0.30deg)}77%{transform:translate(-0.293%,0) rotate(-0.25deg)}80%{transform:translate(0.235%,0) rotate(0.20deg)}83%{transform:translate(-0.176%,0) rotate(-0.15deg)}86%{transform:translate(0.117%,0) rotate(0.10deg)}89%{transform:translate(-0.070%,0) rotate(-0.06deg)}95%{transform:none}100%{opacity:1;transform:none}}
@keyframes gtHit{0%,100%{transform:rotate(-2deg)}30%{transform:rotate(-2deg) translateY(5px) scale(.985)}60%{transform:rotate(-2deg) translateY(-2px)}}
@keyframes gtInk{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.7)}}
@keyframes gtHk{0%{opacity:0}100%{opacity:1}}
@keyframes gtFade{from{opacity:0}to{opacity:1}}
/* 写真を撮るボタン（右下）と、撮った写真を保存する画面 */
#cam-dlg .cam-img{display:block;width:100%;max-height:58vh;object-fit:contain;border-radius:10px;background:var(--page)}
#cam-dlg .cam-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
#cam-dlg .cam-note{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.5}
/* 右下のボタンは丸一つにまとめる。押すと左に、演出・カメラ・言語のボタンが出る */
/* ==== 共通：右下の＋（演出・カメラ・使い方・言語） ==== */
/* 丸い＋。押すと左に、使い方・演出・カメラ・言語のボタンが出る */
.fab{position:fixed;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:6;display:flex;gap:6px;align-items:center}
.fab-tg{width:44px;height:44px;border-radius:50%;border:0;background:var(--green);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);flex:none;padding:0}
.fab-tg:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
.fab-tg span{position:relative;width:18px;height:18px}
.fab-tg span::before,.fab-tg span::after{content:"";position:absolute;left:0;right:0;top:50%;height:2.5px;margin-top:-1.25px;border-radius:2px;background:currentColor;transition:transform .25s ease}
.fab-tg span::after{transform:rotate(90deg)}
.fab.open .fab-tg span::before{transform:rotate(45deg)}
.fab.open .fab-tg span::after{transform:rotate(135deg)}
.fab-items{display:flex;gap:6px;align-items:center;max-width:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-width .28s ease,opacity .2s ease;padding:4px 0}
:where(html[lang="ja"]) .fab.open .fab-items{max-width:420px;opacity:1;pointer-events:auto}
:where(html[lang="en"]) .fab.open .fab-items{max-width:440px;opacity:1;pointer-events:auto}
/* 中のボタン */
.nav-fab{font:inherit;font-size:14px;font-weight:700;border:0;color:#fff;background:var(--tram);border-radius:999px;padding:5px 14px;box-shadow:0 1px 6px rgba(0,0,0,.18);cursor:pointer;white-space:nowrap}
.nav-fab:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.fx-btn{position:fixed;right:12px;bottom:12px;z-index:6;font:inherit;font-size:13px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--muted);border-radius:999px;padding:4px 12px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.fx-btn:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
.fab .fx-btn{position:static;font-size:16px;padding:3px 9px}
.cam-fab{font:inherit;font-size:17px;line-height:1;border:0;background:var(--green);color:#fff;border-radius:999px;width:42px;height:32px;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.cam-fab:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
.lang-fab{font-size:14px;font-weight:700;text-decoration:none;color:#fff;background:var(--green);border-radius:999px;padding:5px 14px;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.lang-fab:focus-visible{outline:2px solid var(--tram);outline-offset:2px}
/* コースのナビを全画面で見ているときは、上に寄せて言語と演出を隠す */
html.crs-navfs .fab{z-index:60;bottom:auto;top:calc(env(safe-area-inset-top) + 64px)}
html.crs-navfs .fab .lang-fab,html.crs-navfs .fab .fx-btn{display:none}
/* ==== 共通：右下の＋（演出・カメラ・使い方・言語） ここまで ==== */
/* ---- 使い方の案内（画面を指さすチュートリアル） ---- */
@keyframes tour-blink{50%{outline-color:#fff}}
@keyframes tour-bob{50%{transform:translateY(-3px)}}
/* ---- 使い方ガイド（動画つきの画面説明） ---- */
/* ==== 使い方ガイド・見本のナビ ==== */
/* -- 見本のナビ（ボタンの上の札） -- */
#tour{position:fixed;inset:0;z-index:2147483647;margin:0;padding:0;border:0;background:none;max-width:none;max-height:none;width:auto;height:auto}
#tour[hidden]{display:none}
#tour .tour-pop[hidden]{display:none}
#tour.pass{pointer-events:none}
#tour.pass .tour-pop{pointer-events:auto}
#tour .tour-hole{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(20,28,27,.62);outline:3px solid var(--tram);outline-offset:2px;transition:top .3s,left .3s,width .3s,height .3s;pointer-events:none}
#tour .tour-hole.none{width:0;height:0;left:50%;top:40%;outline:none}
#tour.pass .tour-hole{animation:tour-blink 1.4s ease-in-out infinite}
#tour .tour-pop{position:fixed;left:16px;right:16px;max-width:420px;margin:0 auto;background:var(--card);color:var(--ink);border-radius:16px;padding:16px 16px 12px;box-shadow:0 8px 28px rgba(0,0,0,.28);font-size:15px;line-height:1.7;text-align:left}
#tour .tour-n{font-size:12px;color:var(--muted);letter-spacing:.05em}
#tour .tour-pop h3{font-family:var(--display);font-size:18px;margin:2px 0 6px;color:var(--green)}
#tour .tour-pop p{margin:0}
#tour .tour-pop small{display:block;margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.6}
#tour .tour-do{display:block;margin-top:8px;font-weight:700;color:var(--green)}
#tour .tour-body{display:flex;gap:12px;align-items:flex-start}
#tour .tour-vid{flex:0 0 96px;width:96px;aspect-ratio:390/844;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--paper);object-fit:cover;display:block}
#tour .tour-txt{flex:1;min-width:0}
#tour .tour-vid{cursor:zoom-in}
#tour .tour-vid.big{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(72vw,340px);max-height:88vh;z-index:3;cursor:zoom-out;box-shadow:0 10px 40px rgba(0,0,0,.45)}
@media (min-width:600px){#tour .tour-vid{flex-basis:120px;width:120px}}
#tour .tour-tag{position:fixed;z-index:2;max-width:calc(100vw - 16px);background:var(--tram);color:#1d1a12;font-weight:700;font-size:14.5px;line-height:1.4;padding:7px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap;pointer-events:none;animation:tour-bob 1.2s ease-in-out infinite}
#tour .tour-tag::after{content:"";position:absolute;left:var(--ax,50%);bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--tram)}
#tour .tour-tag.under::after{bottom:auto;top:-7px;border:7px solid transparent;border-top:0;border-bottom-color:var(--tram)}
#tour .tour-tag[hidden]{display:none}
.tour-pad{padding-bottom:75vh!important}
#tour .tour-quit{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);z-index:3;pointer-events:auto;border:0;border-radius:999px;background:rgba(255,255,255,.96);color:var(--ink);font:inherit;font-size:14px;font-weight:700;padding:9px 20px;box-shadow:0 4px 16px rgba(0,0,0,.35);cursor:pointer;white-space:nowrap}
#tour .tour-btns{display:flex;align-items:center;gap:8px;margin-top:12px}
#tour .tour-btns .sp{flex:1}
#tour .tour-btns .btn{width:auto;flex:0 0 auto;padding:6px 18px}
#tour .tour-dots{display:flex;gap:5px;justify-content:center;margin-top:10px}
#tour .tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
#tour .tour-dots i.on{background:var(--green)}
@media (prefers-reduced-motion:reduce){#tour .tour-hole,#tour .tour-tag{transition:none;animation:none}}
.fg-tour{margin:6px 0 0}
/* -- 使い方ガイド -- */
#guide-dlg{border:0;padding:0;margin:auto;width:min(94vw,600px);max-width:none;max-height:none;background:transparent;overflow:visible}
#guide-dlg::backdrop{background:rgba(20,16,12,.6)}
#guide-dlg .gd-in{display:flex;flex-direction:column;height:min(86dvh,640px);background:var(--card);color:var(--ink);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden}
#guide-dlg .gd-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px}
#guide-dlg .gd-head b{font-family:var(--display);font-size:17px;color:var(--green)}
#guide-dlg .gd-x{border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px}
#guide-dlg .gd-menu{display:flex;gap:6px;overflow-x:auto;padding:4px 12px 10px;border-bottom:1px solid var(--line);scrollbar-width:none;flex:0 0 auto}
#guide-dlg .gd-menu::-webkit-scrollbar{display:none}
#guide-dlg .gd-menu button{flex:0 0 auto;font:inherit;font-size:12.5px;border:1.5px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;padding:4px 10px;cursor:pointer;white-space:nowrap}
#guide-dlg .gd-menu button i{font-style:normal;font-weight:700;margin-right:3px}
#guide-dlg .gd-menu button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#fff}
#guide-dlg .gd-body{flex:1 1 auto;min-height:0;display:flex;gap:14px;padding:14px;overflow:auto}
#guide-dlg .gd-demo{flex:0 0 48%;display:flex;justify-content:center;align-items:flex-start}
#guide-dlg .gd-demo video{display:block;width:100%;max-width:240px;height:auto;max-height:100%;aspect-ratio:390/844;object-fit:cover;border-radius:14px;border:5px solid #1f2a28;background:var(--paper);box-shadow:0 4px 14px rgba(0,0,0,.2)}
#guide-dlg .gd-txt{flex:1;min-width:0}
#guide-dlg .gd-n{font-size:12px;color:var(--muted);letter-spacing:.05em}
#guide-dlg .gd-txt h3{font-family:var(--display);font-size:19px;color:var(--green);margin:2px 0 8px;line-height:1.4}
#guide-dlg .gd-txt p{margin:0;font-size:15px;line-height:1.8}
#guide-dlg .gd-txt p+p{margin-top:8px}
#guide-dlg .gd-foot{display:flex;align-items:center;gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex:0 0 auto}
#guide-dlg .gd-foot .sp{flex:1}
#guide-dlg .gd-foot .btn{width:auto;flex:0 0 auto;padding:7px 20px}
#guide-dlg .gd-foot .linkbtn[disabled]{opacity:.35;cursor:default}
@media (max-width:420px){#guide-dlg .gd-body{gap:10px;padding:12px}#guide-dlg .gd-demo{flex-basis:47%}#guide-dlg .gd-txt h3{font-size:17px}#guide-dlg .gd-txt p{font-size:14px;line-height:1.75}}
/* ==== 使い方ガイド・見本のナビ ここまで ==== */