/* 空めぐり：名所ページ・一覧・About などの見た目（トップは top.css）。
   外のフォントは使わない。スマホが先、左右の余白16px */
:root{
  /* 色：全ページ名所絵の色。紙・藍・紅＋色紙。紙の上に置く紙は #fffdf8 */
  --paper:#efe8d8;      /* 地（和紙） */
  --ai:#1f3a5f;         /* 藍：主ボタン・ぼかし */
  --shikishi:#e6d6a6;   /* 色紙 */
  --print:#fffdf8;      /* 紙の上に置く紙（カード・写真の縁） */
  --ink:#2b2a27;        /* 文字・主ボタン */
  --sub:#6a665d;        /* 補足の文字（紙の上で 5.2:1） */
  --faint:#a29d92;      /* 線・飾りだけ。文字には使わない */
  --line:#d9d3c5;       /* 罫線・枠 */
  --red:#b02a30;        /* 紅：短冊・距離・ガイドの線（紙の上で 6.4:1） */
  /* 字：名所の名前と題だけセリフ／明朝。あとは全部ゴシック。座標だけ等幅 */
  --serif:"Hiragino Mincho ProN","Yu Mincho","Iowan Old Style",Palatino,Georgia,serif;
  --sans:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--sans)}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
[hidden]{display:none!important}

/* ---- 字の段 ---- */
.t-place{font-family:var(--serif);font-weight:600;letter-spacing:.01em;line-height:1.2}
.t-label{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.35;color:var(--ink)}
.t-coord{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.t-small{font-size:12px;line-height:1.6;color:var(--sub)}

/* ---- ボタン：1画面に主ボタン（墨）は1つ ---- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:24px;border:1px solid var(--line);background:transparent;font-size:15px;text-decoration:none;white-space:nowrap}
.b.ink,.b.ai{background:var(--ai);border-color:var(--ai);color:#fff;font-weight:600}
.b.s{min-height:44px;padding:0 14px;font-size:14px}
.tb{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;color:var(--sub);font-size:13px;text-decoration:none}

/* ---- 紙のカード／プリント／ガイド／広告の枠 ---- */
.card{background:var(--print);border:1px solid var(--line)}
.print{background:var(--print);padding:8px;outline:1px solid var(--line)}
.guide{background:var(--print);border:1px solid var(--line);border-left:3px solid var(--red);padding:10px 14px 10px 12px;font-size:15px;line-height:1.6}
.guide p{margin:0}.guide p+p{margin-top:6px}
.aff{border:1px dashed var(--faint);padding:12px 14px}
.aff .ad{font-size:13px;color:var(--sub);margin:0 0 4px}

/* ---- 上の帯と下の出典（両方のページ） ---- */
.top{max-width:720px;margin:0 auto;padding:calc(var(--st) + 8px) 16px 0;display:flex;align-items:center;gap:4px}
.brand{font-family:var(--serif);font-weight:600;font-size:18px;text-decoration:none;margin-right:auto;min-height:44px;display:flex;align-items:center}
main{max-width:720px;margin:0 auto;padding:8px 16px 48px}
h1{font-size:34px;margin:0}

/* ---- 名所ページ：ちぎった紙の縁の窓（中は spot.js の canvas、縁は SVG の mask） ---- */
.win{position:relative;margin:8px 0 0;aspect-ratio:4/3;overflow:hidden;background:#8a8f84}
.win canvas{display:block;width:100%;height:100%;cursor:pointer}
/* 縁の SVG は窓より1pxずつ大きくして、端に canvas の細い線がのぞかないようにする */
.win .edge{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none}
.win .hole{x:11px;y:11px;width:calc(100% - 22px);height:calc(100% - 22px)}
.win .fly{position:absolute;right:18px;bottom:18px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.where{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:16px 0 0}
.where .ja{font-family:var(--serif);font-size:16px;color:var(--sub)}
.meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:4px 0 0}
.meta .pl{font-size:14px}
.spot .lead{font-size:18px;line-height:1.6;margin:14px 0 0}
.cta{margin-top:16px;width:100%;white-space:normal;text-align:center;padding-top:10px;padding-bottom:10px;line-height:1.35}
@media (min-width:560px){.cta{width:auto}}
.spot section{margin-top:48px}
.spot section>h2{margin:0 0 8px}
.above{list-style:none;margin:0;padding:0}
.above li{position:relative;padding:8px 0 8px 22px;border-bottom:1px solid #e6e1d5}
.above li::before{content:'';position:absolute;left:4px;top:19px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--red)}
.src{margin:8px 0 0}
/* 地上の写真：プリントを横に並べ、指で送る */
.prints{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;margin:0 -2px}
@media (min-width:560px){.prints{grid-auto-columns:46%}}
.prints figure{margin:0;scroll-snap-align:start}
.prints .print{padding:6px 6px 0}
.prints img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#e6e1d5}
.prints figcaption{font-size:11px;line-height:1.5;color:var(--sub);padding:6px 2px 8px;word-break:break-word}
/* 近くの名所：搭乗券の形（距離｜名前と県） */
.near{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:560px){.near{grid-template-columns:1fr 1fr}}
.near a{display:flex;align-items:stretch;text-decoration:none;background:var(--print);border:1px solid var(--line);min-height:64px}
.near .km{display:flex;align-items:center;padding:0 12px;border-right:1px dashed var(--line);font-size:12px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.near .nm{min-width:0;padding:8px 12px;line-height:1.3}
.near b{display:block;font-family:var(--serif);font-size:17px;font-weight:600}
.near small{font-size:12px;color:var(--sub)}

/* ---- 一覧：地方ごとに区切った時刻表のような行（PC では2列） ---- */
.places main{padding-top:10px}
.places h1{margin:8px 0 0}
.places .lead{margin:8px 0 0;color:var(--sub)}
.start{display:flex;align-items:center;gap:12px;margin:20px 0 0;padding:14px;text-decoration:none}
.start>span:first-child{min-width:0}
.start b{display:block;font-family:var(--serif);font-size:19px}
.start small{color:var(--sub);font-size:13px}
.start .b{margin-left:auto;flex:none}
.reg{margin:32px 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.reg span+span{font-size:14px;font-weight:400;color:var(--sub)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
@media (min-width:600px){.rows{columns:2;column-gap:28px}.rows li{break-inside:avoid}}
.rows a{display:flex;align-items:baseline;gap:10px;min-height:52px;padding:12px 2px;border-bottom:1px solid #e6e1d5;text-decoration:none}
.rows b{min-width:0;font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.35}
.rows small{margin-left:auto;font-size:12px;color:var(--sub);white-space:nowrap}
.rows .g{flex:none;align-self:center;font-size:12px;font-weight:600;color:var(--red)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =====================================================================
   サイト共通のページ（トップ・About・広告の表示・プライバシー）
   名所ページ・一覧の上の部品はそのまま使い、ここでは足りない物だけ足す
   ===================================================================== */
/* 言語：英語が主。日本語は site.js が html[data-l=ja] にしたときだけ出す（JS が無ければ英語のまま） */
html:not([data-l=ja]) .l-ja,html[data-l=ja] .l-en{display:none!important}
/* 上の帯：言語の切り替えは右端の文字ボタン */
.top .sw{border-left:1px solid var(--line);margin-left:4px;padding-left:10px}
/* 上の帯は「サイト名｜All places｜Fly｜言語」。375px でもサイト名を1行に。320px だけは2行に折れてよい */
.top .brand{white-space:nowrap}
@media (max-width:400px){.top{gap:0}.top .brand{font-size:17px}.top .tb{padding:0 6px}.top .sw{margin-left:2px;padding-left:8px}}
@media (max-width:359px){.top .brand{white-space:normal}}
@media (max-width:359px){.top .nx{display:none}}   /* 320px の日本語で帯が2行になるので、狭い幅だけ「（英語）」を外す */
/* 全ページ共通の下の帯：道（About など）→ 出典 → サイト名 */
.foot{max-width:720px;margin:0 auto;padding:22px 16px calc(var(--sb) + 36px);border-top:1px solid var(--line)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 14px;margin:0 0 10px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.foot p{margin:0 0 8px}
.foot .sig{font-family:var(--serif);font-size:14px;color:var(--ink);margin-top:14px}

/* ---- トップ（名所絵）----
   浮世絵の名所シリーズの見せ方を借りる：紅の題の短冊・シリーズ名の色紙・空の藍のぼかし・紙の余白。絵柄は写さない
   （旧トップの版画・いまは使っていない） */
.home .top,.home main,.home .foot{max-width:640px}
.home main{padding-top:4px}
.ukiyo{position:relative;height:62vh;height:62svh;min-height:400px;max-height:760px;margin-top:4px;overflow:hidden;background:#7d8a80;outline:1.5px solid var(--ink);outline-offset:-1px}
.ukiyo canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
/* 一文字ぼかし：上から藍が薄れていく（浮世絵の空の刷り方） */
.ukiyo .bokashi{position:absolute;left:0;right:0;top:0;height:26%;background:linear-gradient(var(--ai),rgba(31,58,95,.75) 30%,rgba(31,58,95,0));pointer-events:none}
.ukiyo .titles{position:absolute;right:12px;top:12px;display:flex;gap:6px;align-items:flex-start;pointer-events:none}
.ukiyo .tanzaku{writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:.14em;line-height:1;color:#fff;background:var(--red);padding:14px 9px;outline:1.5px solid var(--ink);outline-offset:-4px}
.ukiyo .shikishi{writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.1em;line-height:1.5;color:var(--ink);background:var(--shikishi);padding:10px 6px;outline:1px solid var(--ink);outline-offset:-3px}
.ukiyo .wipe{position:absolute;inset:0;background:var(--paper);transform:translateX(-101%);pointer-events:none}
.ukiyo .wipe.on{animation:wIn .8s cubic-bezier(.7,0,.3,1) forwards}
.ukiyo .wipe.out{animation:wOut .8s cubic-bezier(.7,0,.3,1) forwards}
@keyframes wIn{from{transform:translateX(-101%)}to{transform:none}}
@keyframes wOut{from{transform:none}to{transform:translateX(101%)}}
.cap{display:flex;align-items:flex-end;gap:12px;margin:12px 0 0}
.cap>div{flex:1;min-width:0}
.cap small{display:block;font-size:12px;letter-spacing:.04em;color:var(--sub)}
.cap p{font-size:24px;font-weight:700;line-height:1.25;margin:2px 0 0;text-wrap:balance}
.cap .no{font-family:var(--serif);font-size:15px;color:var(--sub);white-space:nowrap}
.home .go{margin-top:16px;width:100%}
.home h1{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.4;margin:20px 0 0}
.home .lead{font-size:16px;line-height:1.7;margin:8px 0 0}
.home section{margin-top:48px}
.home section>h2{font-family:var(--serif);font-size:22px;font-weight:600;margin:0 0 4px}
.home section>.sub{margin:0 0 16px;color:var(--sub);font-size:14px}
/* 十景：地上の写真を版画のように（紙の余白＋小さな紅の短冊） */
.ten{display:grid;grid-auto-flow:column;grid-auto-columns:64%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;margin:0 -2px}
@media (min-width:600px){.ten{grid-auto-columns:31%}}
.ten a{display:block;scroll-snap-align:start;text-decoration:none}
.ten .pr{position:relative;background:var(--print);padding:6px;outline:1px solid var(--line)}
.ten img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#e0d8c6}
.ten .tz{position:absolute;right:12px;top:12px;writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.1em;line-height:1;color:#fff;background:var(--red);padding:8px 5px;outline:1px solid var(--ink);outline-offset:-3px}
.ten .no{display:block;margin:8px 2px 0;font-family:var(--serif);font-size:13px;color:var(--sub)}
.ten b{display:block;margin:0 2px;font-size:17px;line-height:1.3}
.ten small{display:block;margin:0 2px;font-size:12px;color:var(--sub)}
.how-chose{margin:4px 0 0}
.credits{margin:10px 0 0}
.credits summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:13px;color:var(--sub)}
.credits ol{margin:0;padding-left:20px;font-size:12px;line-height:1.6;color:var(--sub)}
/* ほかのコース：罫線の行 */
.courses{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.courses a{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 2px;border-bottom:1px solid var(--line);text-decoration:none}
.courses .nm{min-width:0;flex:1}
.courses b{display:block;font-size:17px;line-height:1.3}
.courses small{display:block;font-size:13px;color:var(--sub);text-wrap:balance}
.courses .n{flex:none;font-family:var(--serif);font-size:14px;color:var(--sub)}
.home .start{background:var(--print)}

/* ---- 読むページ（About・広告の表示・プライバシー） ---- */
.doc main{padding-top:10px}
.doc h1{margin:8px 0 0}
.doc .lead{font-size:17px;margin:8px 0 0;text-wrap:pretty}
.doc h2{font-family:var(--serif);font-size:20px;font-weight:600;margin:40px 0 8px;line-height:1.4}
.doc p,.doc li{max-width:38em}
.doc ul{padding-left:20px}
.doc li+li{margin-top:6px}
.doc .upd{margin:14px 0 0}
.doc dl{margin:0;border-top:1px solid var(--line)}
.doc dl>div{padding:10px 0;border-bottom:1px solid var(--line)}
.doc dt{font-weight:600}
.doc dd{margin:2px 0 0;font-size:14px;color:var(--sub)}
.doc dd a{color:var(--ink)}
.todo{background:#fbe9e6;color:#8f2f28;padding:0 4px;border-radius:2px}   /* 公開前に埋める空欄 */
/* 版画の一時停止（左下・44px）：写真の上でも読めるよう紙の色の札 */
.ukiyo .pause{position:absolute;left:8px;bottom:8px;min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--ink);border-radius:22px;background:rgba(239,232,216,.92);color:var(--ink);font-size:14px;cursor:pointer}
.home h1,.lead{text-wrap:pretty}