/* 旅撮 -TABI DORI- : 昭和の商店街の看板と、色あせたペンキの色調。
   配色は写真に写る緑の看板・赤い日よけ・黄色い看板から取っている。 */
:root{
  --bg:#ebe7da;          /* 壁の漆喰に近い灰みの生成り */
  --surface:#e1dccb;
  --fg:#2b2a26;
  --fg-soft:#5d5a50;
  --line:#bdb7a3;
  --red:#b8402a;         /* 日よけの赤 */
  --on-red:#fff8ee;
  --teal:#2c5f5b;        /* 緑の看板 */
  --hero-bg:#2c5f5b;
  --hero-fg:#eef0e4;
  --mustard:#d6a62c;     /* 黄色い看板 */
  --print:#fbf9f2;       /* 印画紙の白縁 */
  --link:#1f5a56;
  --badge-a:#2c5f5b;
  --badge-b:#8a6410;
  --todo-bg:#f6df8e;
  --shadow:rgba(40,30,10,.35);
  --font-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#181c1b;--surface:#222827;--fg:#e8e4d6;--fg-soft:#a9a594;--line:#3d4543;
    --red:#d2593f;--on-red:#fff8ee;--teal:#6fb0a6;--hero-bg:#1f3f3c;--hero-fg:#eef0e4;
    --mustard:#d6a62c;--print:#d8d4c5;--link:#8fc9bf;--badge-a:#8fc9bf;--badge-b:#e0b44f;
    --todo-bg:#5a4a14;--shadow:rgba(0,0,0,.6);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#181c1b;--surface:#222827;--fg:#e8e4d6;--fg-soft:#a9a594;--line:#3d4543;
  --red:#d2593f;--on-red:#fff8ee;--teal:#6fb0a6;--hero-bg:#1f3f3c;--hero-fg:#eef0e4;
  --mustard:#d6a62c;--print:#d8d4c5;--link:#8fc9bf;--badge-a:#8fc9bf;--badge-b:#e0b44f;
  --todo-bg:#5a4a14;--shadow:rgba(0,0,0,.6);color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.85;letter-spacing:.02em}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.2em}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.4;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}

/* ヘッダー */
.site-header{border-bottom:4px double var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.plate{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:.12em;background:var(--red);color:var(--on-red);padding:.1em .5em .1em .62em;border-radius:3px;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--red)}
.brand small{font-size:.72rem;letter-spacing:.42em;color:var(--fg-soft);font-weight:500}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:.92rem}
.nav a{color:var(--fg);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--red);color:var(--fg)}

/* トップ */
.hero{background:var(--hero-bg);color:var(--hero-fg);border-bottom:8px solid var(--mustard)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding-block:clamp(36px,6vw,72px)}
.hero h1{font-size:clamp(4rem,12vw,7.5rem);font-weight:800;letter-spacing:.06em;line-height:1.05}
.hero .en{display:block;margin-top:.6rem;font-size:.9rem;letter-spacing:.55em;font-weight:500;opacity:.85}
.hero .lead{margin-top:1.6rem;font-family:var(--font-display);font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:600;line-height:1.7}
.hero .sub{margin-top:.8rem;font-size:.95rem;opacity:.9;max-width:34em}
.prints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.prints img{background:var(--print);padding:6px 6px 14px;box-shadow:0 8px 18px -8px var(--shadow);aspect-ratio:2/3;object-fit:cover;width:100%}
.prints img:nth-child(1){transform:rotate(-2.4deg);margin-top:18px}
.prints img:nth-child(2){transform:rotate(1.6deg)}
.prints img:nth-child(3){transform:rotate(-1.2deg);margin-top:28px}

.section{padding-block:clamp(36px,6vw,64px)}
.section h2{font-size:clamp(1.4rem,3vw,1.8rem)}
.section h2 small{display:block;font-family:var(--font-body);font-size:.72rem;letter-spacing:.35em;font-weight:500;color:var(--fg-soft);margin-bottom:.3rem}
.section .lead-p{margin-top:.8rem;color:var(--fg-soft);max-width:38em}

.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px;margin-top:28px}
.area-card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:center;color:inherit;text-decoration:none;background:var(--surface);padding:14px;border:1px solid var(--line);border-radius:3px}
.area-card:hover{border-color:var(--red);color:inherit}
.area-card img{aspect-ratio:2/3;object-fit:cover;width:100%;background:var(--print);padding:4px}
.area-card .ward{font-size:.78rem;color:var(--fg-soft);letter-spacing:.12em}
.area-card h3{font-size:1.5rem;margin:.1rem 0 .4rem}
.area-card .count{font-size:.85rem;color:var(--fg-soft);font-variant-numeric:tabular-nums}
.more-note{margin-top:20px;font-size:.9rem;color:var(--fg-soft)}

.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px;margin-top:28px}
.howto h3{font-size:1.1rem;display:flex;align-items:center;gap:10px;margin-bottom:.5rem}
.howto p{font-size:.95rem;color:var(--fg-soft)}


/* 町名ページ */
.crumbs{font-size:.82rem;color:var(--fg-soft);padding-block:18px 0}
.crumbs a{color:var(--fg-soft)}
.crumbs span{margin-inline:.5em}
.area-head{padding-block:18px clamp(24px,4vw,40px);border-bottom:1px solid var(--line)}
.area-head h1{font-size:clamp(2.4rem,7vw,4rem);font-weight:800;letter-spacing:.08em}
.area-head .kana{font-size:.85rem;letter-spacing:.3em;color:var(--fg-soft);margin-left:.4em;font-weight:500}
.meta-line{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:4px 22px;font-size:.9rem;color:var(--fg-soft)}
.intro{margin-top:1.4rem;max-width:40em;display:grid;gap:1em}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;list-style:none;margin:0;padding:0}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card a{display:block;color:inherit;text-decoration:none}
.card .print{background:var(--print);padding:8px 8px 20px;box-shadow:0 8px 16px -10px var(--shadow);transition:transform .18s ease}
.card .print img{aspect-ratio:2/3;object-fit:cover;width:100%}
.card a:hover .print{transform:translateY(-3px)}
.card .cap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:12px}
.card .ttl{font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1.5}
.card a:hover .ttl{color:var(--red)}
.field-note{margin-top:clamp(40px,6vw,72px);padding:22px clamp(18px,3vw,32px) 26px;border:2px dashed var(--line);position:relative;max-width:46rem}
.field-note .tab{position:absolute;top:-.85em;left:18px;background:var(--bg);padding:0 .7em;font-size:.78rem;letter-spacing:.3em;color:var(--fg-soft);font-weight:700}
.field-note p{font-family:var(--font-display);font-size:1.12rem;line-height:1.95}

/* 写真ページ */
.photo-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(24px,5vw,56px);align-items:start;padding-block:24px clamp(40px,6vw,72px)}
.photo-main .print{background:var(--print);padding:clamp(8px,1.6vw,16px) clamp(8px,1.6vw,16px) clamp(22px,3.4vw,40px);box-shadow:0 14px 28px -14px var(--shadow);width:min(100%,calc(84vh * 2 / 3 + 32px));margin-inline:auto}
.photo-main .print img{width:100%;height:auto}
.photo-side h1{font-size:clamp(1.4rem,3vw,1.9rem)}
.photo-side .badge{margin-bottom:12px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:20px 0;font-size:.92rem;border-block:1px solid var(--line);padding-block:14px}
.facts dt{color:var(--fg-soft)}
.facts dd{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.tags li{font-size:.8rem;background:var(--surface);padding:.2em .7em;border-radius:2px}
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--red);color:var(--on-red);font-weight:700;font-size:1rem;padding:.85em 1.6em;border-radius:3px;text-decoration:none;letter-spacing:.06em}
.btn:hover{color:var(--on-red);filter:brightness(1.1)}
.dl-note{margin-top:8px;font-size:.8rem;color:var(--fg-soft)}
.use-box{margin-top:24px;font-size:.88rem;color:var(--fg-soft);display:grid;gap:.5em}
.use-box strong{color:var(--fg)}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:28px;font-size:.9rem}
.pager a{max-width:48%}

/* 文書ページ */
.doc{max-width:46rem;padding-block:24px clamp(40px,6vw,80px)}
.doc h1{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:1.2rem}
.doc h2{font-size:1.2rem;margin:2.2rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
.doc p,.doc li{margin-bottom:.7em}
.doc ul{padding-left:1.4em}
.todo{background:var(--todo-bg);color:var(--fg);padding:0 .3em;border-radius:2px;font-weight:700}

/* フッター */
.site-footer{border-top:4px double var(--line);margin-top:clamp(24px,5vw,56px);font-size:.85rem;color:var(--fg-soft)}
.site-footer .wrap{display:grid;gap:10px;padding-block:28px 40px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.site-footer a{color:var(--fg-soft)}
.stations{margin-top:.5rem;font-size:.92rem;display:flex;flex-wrap:wrap;gap:4px 14px}
.stations .st-h{background:var(--teal);color:var(--on-red);font-size:.78rem;padding:.1em .7em;border-radius:2px;letter-spacing:.1em;align-self:center}
.area-lead{margin-top:1rem;max-width:44rem;font-size:.98rem}
.facts-box{margin-top:1.2rem;max-width:44rem;background:var(--surface);border-left:6px solid var(--mustard);padding:14px 18px 12px;border-radius:2px}
.facts-h{font-size:1rem;letter-spacing:.08em;margin:0 0 .5rem}
.facts-h::before{content:"📌 "}
.facts-box ul{margin:0;padding-left:1.2em;display:grid;gap:.35em;font-size:.95rem;line-height:1.7}
.facts-src{margin-top:.7rem;font-size:.74rem;color:var(--fg-soft);line-height:1.6}
.facts-src a{color:var(--fg-soft)}
.town-map{height:clamp(260px,55vw,420px);border:2px solid var(--line);border-radius:3px;background:var(--surface);z-index:0}
.map-note{margin-top:8px;font-size:.76rem;color:var(--fg-soft);line-height:1.6}
.map-note a{color:var(--fg-soft)}
.st-label{font-family:var(--font-body);font-size:12px;font-weight:700;color:#2c5f5b;background:#fff;border:1px solid #2c5f5b;border-radius:3px;padding:1px 6px;box-shadow:none}
.st-label::before{display:none}
.site-footer .sns{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.site-footer .sns a{display:inline-block;padding:.15em .9em;border:1.5px solid currentColor;border-radius:999px;text-decoration:none;color:var(--link)}
.site-footer .sns a:hover{background:var(--red);border-color:var(--red);color:var(--on-red)}

@media (max-width:760px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .prints{max-width:420px}
  .photo-layout{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.card .print{transition:none}.card a:hover .print{transform:none}}

/* 検索 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.search{display:flex;gap:0;max-width:34rem;width:100%;min-width:0}
.search input{flex:1 1 0;width:0;min-width:0;font:inherit;font-size:1rem;padding:.7em 1em;border:2px solid var(--fg);border-right:0;border-radius:3px 0 0 3px;background:var(--bg);color:var(--fg)}
.hero .search input{border-color:var(--hero-fg)}
.search button{flex:none;font:inherit;font-weight:700;letter-spacing:.1em;padding:.7em 1.3em;border:2px solid var(--red);border-radius:0 3px 3px 0;background:var(--red);color:var(--on-red);cursor:pointer}
.search button:hover{filter:brightness(1.1)}
.hero-search{margin-top:1.6rem;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.hero-search.on-light{margin-top:1rem}
.taglist{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.taglist a{display:inline-block;font-size:.85rem;padding:.2em .8em;border-radius:999px;border:1.5px solid currentColor;text-decoration:none;color:var(--link)}
.hero .taglist a{color:var(--hero-fg);opacity:.9}
.taglist a:hover{background:var(--red);border-color:var(--red);color:var(--on-red)}
.result-count{margin:22px 0 18px;font-size:.92rem;color:var(--fg-soft)}
#tag-area .meta-line{margin:0 0 10px}
#town-results:empty{display:none}
#town-results{margin:0 0 30px}
.sub-h{font-size:1.1rem;margin:40px 0 16px;color:var(--fg-soft)}
.where{font-size:.78rem;color:var(--fg-soft)}
.tags a{color:inherit;text-decoration:none}
.tags a:hover{color:var(--red)}
.use-box a{color:var(--link)}

/* 写真の使い方：クレジットの見本（2026-10-14） */
.credit-sample{padding:.6em .9em;border-left:3px solid currentColor;opacity:.9}
.credit-code{white-space:pre-wrap;word-break:break-all;padding:.7em .9em;border:1px solid rgba(127,127,127,.4);border-radius:6px;font-size:.85em;user-select:all}