/* NIPPON ATLAS の静的ページ（scripts/build_pages.py が書き出す）。白を基調に、差し色は藍だけ */
:root{--ink:#22272e;--sub:#5d6670;--line:#e3e6ea;--soft:#f5f6f8;--bg:#fff;--ai:#35577a;--ai-ink:#fff;--ai-soft:#eaf0f6;--r:12px}
@media (prefers-color-scheme:dark){:root{--ink:#e6e9ed;--sub:#a3abb5;--line:#2f353d;--soft:#1c2026;--bg:#14171b;--ai:#8fb0d3;--ai-ink:#0f1a26;--ai-soft:#1d2a38}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;font-weight:400;line-height:1.75;font-size:16px;overflow-wrap:anywhere;line-break:strict}
a{color:var(--ai)}
a:hover{text-decoration-thickness:2px}
b,strong,h1,h2,h3,th{font-weight:700}
img{max-width:100%;height:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hd{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:10}
/* ホーム画面から開いたとき（black-translucent）: 時計・電池の表示の下に暗い帯を敷いて白い文字を読めるようにし、上の帯をその下へ。ブラウザでは env() が 0 なので何も変わらない */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:#14171b;z-index:30;pointer-events:none}
body{padding-top:env(safe-area-inset-top,0px)}
.hd{top:env(safe-area-inset-top,0px)}
.hdi{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:10px 16px;max-width:1040px;margin:0 auto}
.sch{position:relative;flex:1 1 220px;max-width:360px;margin:0}
.sch input{width:100%;font:inherit;font-size:15px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--soft);color:var(--ink)}
.sch input:focus{outline:none;border-color:var(--ai);background:var(--bg)}
.sch ul{position:absolute;left:0;right:0;top:calc(100% + 4px);list-style:none;margin:0;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.12);max-height:60vh;overflow:auto;z-index:20}
.sch li a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:4px;color:var(--ink);text-decoration:none;font-size:14.5px}
.sch li a small{color:var(--sub);font-size:12px;white-space:nowrap}
.sch li[aria-selected="true"] a,.sch li a:hover{background:var(--ai-soft)}
.sch li.none{padding:8px 10px;color:var(--sub);font-size:13.5px}
.logo{color:var(--ink);text-decoration:none}
.wm{display:inline-flex;align-items:center;gap:.42em;font-size:15.5px;letter-spacing:.12em;white-space:nowrap;line-height:1}
.wm b{display:inline-flex;align-items:center}
.hm{display:inline-block;width:.78em;height:.78em;margin:0 .12em 0 .02em;border-radius:50%;background:#bc002d}
.gn{display:flex;align-items:center;gap:4px 16px;flex-wrap:wrap;font-size:14px;margin-left:auto}
.gn a{color:var(--ink);text-decoration:none;font-weight:700}
.gn a:hover{color:var(--ai)}
.gn .tomap{color:var(--ai)}
.wrap{max-width:760px;margin:0 auto;padding:8px 16px 40px}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:2px 0;margin:8px 0 16px;padding:0;font-size:13px;color:var(--sub)}
.bc li+li::before{content:"›";margin:0 .5em;color:var(--sub)}
.bc a{color:var(--sub)}
.hero{margin:0 0 16px}
.hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:var(--soft)}
figcaption,.cr{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.5}
figcaption a,.cr a{color:var(--sub)}
.cf figcaption{min-height:1.5em}
.bcap a{color:inherit}
.head{margin:8px 0 12px}
.kind{margin:0;font-size:13px;font-weight:700;color:var(--ai)}
h1{font-size:30px;line-height:1.3;margin:2px 0 2px;letter-spacing:.02em}
.kana{margin:0;color:var(--sub);font-size:14px}
h2{font-size:20px;line-height:1.4;margin:36px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
h3{font-size:16px;line-height:1.5;margin:20px 0 6px}
.ctag,.tg{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:8px 0 0}
.ctag li,.tg li{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--ai-soft);color:var(--ai)}
.tg li{background:var(--soft);color:var(--ink);font-weight:400}
.acts,.cta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.cta{margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 18px;border-radius:8px;border:1.5px solid var(--ai);color:var(--ai);background:var(--bg);font-weight:700;text-decoration:none;font-size:15px}
.btn.pri{background:var(--ai);color:var(--ai-ink)}
.btn:hover{text-decoration:underline}
.lead{font-size:16.5px;margin:16px 0}
.lead2{margin:6px 0}
.sub2{margin:4px 0;color:var(--sub);font-size:14px}
.note{padding:10px 14px;border-radius:8px;background:var(--soft)}
.src{font-size:12.5px;color:var(--sub);line-height:1.65;margin:10px 0}
.st{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
@media (min-width:640px){.st{grid-template-columns:repeat(4,minmax(0,1fr))}}
.st div{background:var(--soft);border-radius:8px;padding:10px 12px}
.st dt{font-size:12.5px;color:var(--sub)}
.st dd{margin:0;font-size:15px;line-height:1.5}
.st dd b{font-size:18px}
.st small{display:block;font-size:12px;color:var(--sub)}
.rk{font-size:12.5px;font-weight:700;white-space:nowrap}
.hl{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:12px 0 0}
.hlb{display:inline-block;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;border:1.5px solid var(--ai);text-decoration:none}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
table.it{border-collapse:collapse;width:100%;font-size:14px}
.it th{font-size:12.5px;color:var(--sub);text-align:left;border-bottom:1.5px solid var(--line);padding:6px 8px;white-space:nowrap}
.it td{border-bottom:1px solid var(--line);padding:7px 8px;vertical-align:top}
.it td small{display:block;font-size:12px;color:var(--sub)}
.it .num{text-align:right;white-space:nowrap}
.it .r{width:3.5em;font-weight:700}
.it td.top a{font-size:14px}
.bar{display:inline-block;width:48px;height:6px;border-radius:3px;background:var(--line);margin-right:6px;vertical-align:middle;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ai)}
.spots{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.spot{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px;border-radius:var(--r);background:var(--soft)}
@media (min-width:640px){.spot{grid-template-columns:160px minmax(0,1fr)}}
.spot img,.spot .noimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--line);display:block}
.spot h3{margin:0 0 2px;font-size:16px}
.spk{margin:0;font-size:12.5px;color:var(--sub)}
.spk .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.spd{margin:0;font-size:14px}
.spw{margin:4px 0 0;font-size:13px}
.nbr,.mlist,.rlist,.plist,.pk{list-style:none;padding:0;margin:0}
.nbr,.mlist{display:flex;flex-wrap:wrap;gap:6px 14px}
.nbr small{margin-left:4px;color:var(--sub);font-size:12px}
.mlist{font-size:14.5px}
.rlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px}
.rlist small{margin-left:6px;color:var(--sub);font-size:12px}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.plist a{display:block;padding:10px 12px;border-radius:8px;background:var(--soft);text-decoration:none;color:var(--ink)}
.plist a:hover b{color:var(--ai)}
.plist small{display:block;color:var(--sub);font-size:12px}
.pk li{padding:6px 0;border-bottom:1px solid var(--line)}
.srct td{font-size:13px}
.ft{border-top:1px solid var(--line);margin-top:24px;padding:20px 16px 32px;font-size:12.5px;color:var(--sub)}
.fb{max-width:var(--w,880px);margin:28px auto 0;padding:0 16px;font-size:13px}
.fb a,.fb button{color:var(--ai);font-weight:700}
.fb button{font:inherit;font-weight:700;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.fb button:hover{text-decoration-thickness:2px}
.ft>*{max-width:760px;margin-left:auto;margin-right:auto}
.ft p{margin:6px auto}
.ft a{color:var(--sub);margin-right:14px;display:inline-block}
.ftl{display:flex;align-items:center;gap:12px;margin-top:14px!important;color:var(--ink)}
.ftl .wm{font-size:13px}
.spot h3 a{color:var(--ink);text-decoration:none}
.spot h3 a:hover{color:var(--ai);text-decoration:underline}
.spi{display:block}
.kv{margin:0;display:grid;gap:0}
.kv div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.kv dt{color:var(--sub);font-size:13.5px}
.kv dd{margin:0}
.kv dd a+a{margin-left:.5em}
.kana a+a{margin-left:.5em}
.nst,.evs{list-style:none;padding:0;margin:0}
.nst li,.evs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--line)}
.nst span,.evs span{color:var(--sub);font-size:14px}
.nst small,.evs small{flex-basis:100%;color:var(--sub);font-size:12.5px}
.pspots{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pspots>div{background:var(--soft);border-radius:var(--r);padding:12px 14px}
.pspots h3{margin:0 0 4px;font-size:15px}
.pspots ul{list-style:none;padding:0;margin:0;font-size:14px}
.pspots small{margin-left:6px;color:var(--sub);font-size:12px}
.tophero img{aspect-ratio:2/1}
.head.top h1{font-size:30px;line-height:1.45}
.acts.big .btn{min-height:52px;font-size:17px;padding:10px 28px}
.feats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.feats a{display:block;height:100%;padding:14px 16px;border-radius:var(--r);background:var(--soft);color:var(--ink);text-decoration:none}
.feats b{display:block;color:var(--ai);font-size:16px;margin-bottom:4px}
.feats span{font-size:14px;color:var(--sub)}
.feats a:hover b{text-decoration:underline}
.spk .cat{color:var(--sub)}
.spk .cat:hover{color:var(--ai)}
.kind .dot,.cg h3 .dot,.cats .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.kv .sm{font-size:13px;margin-left:.8em}
.cgs{display:grid;gap:4px 24px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cg h3{font-size:14px;margin:12px 0 6px}
.cats{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.cats li{font-size:14px;padding:3px 12px;border-radius:999px;background:var(--soft)}
.cats li small{margin-left:5px;color:var(--sub);font-size:12px}
.cats.home{margin:12px 0}
.cp h4{font-size:15px;margin:14px 0 4px}
.cp h3{font-size:15px;margin:14px 0 4px}
.cp h3 small{margin-left:8px;color:var(--sub);font-size:12px;font-weight:400}
.cp h4 small{margin-left:8px;color:var(--sub);font-size:12px;font-weight:400}
.cp ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:2px 16px;font-size:14px}
.cp li small{margin-left:4px;color:var(--sub);font-size:12px}
section>h3:first-child{margin-top:8px}
@media (min-width:900px){.wrap{max-width:820px}}
@media (max-width:640px){.hd{position:static}
  /* スマホの見出し: 1段目にロゴと「地図で探す」、2段目（と検索欄）に案内。3段に積むと写真が下に押し出されるため */
  .hdi{position:relative;row-gap:6px}
  .logo{display:inline-flex;align-items:center;min-height:40px}
  .gn{flex-basis:100%;margin-left:0;gap:0 16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .gn::-webkit-scrollbar{display:none}
  .gn a:not(.tomap){padding:8px 0}
  .gn .tomap{position:absolute;top:10px;right:16px}
  .sch{flex-basis:100%;max-width:none}}
::selection{background:var(--ai-soft);color:var(--ink)}
table,ol,.nums b{font-variant-numeric:tabular-nums}
main.home ~ .fb{max-width:1280px;padding:0 24px}
main.home ~ .ft{padding-left:24px;padding-right:24px}
main.home ~ .ft>*{max-width:1232px}
main.home ~ .ft p:first-child{max-width:72ch;margin-left:max(0px,calc((100% - 1232px)/2))}
main.wide ~ .fb{max-width:1240px}
@media (max-width:480px){h1{font-size:26px}.head.top h1{font-size:24px}.gn{margin-left:0}.wm{font-size:14px;letter-spacing:.08em}.gn{font-size:13px;gap:4px 10px}}
/* ---- 2026-11-15: 広い幅・地図への入口・位置図・トップページ ---- */
:focus-visible{outline:3px solid var(--ai);outline-offset:2px}
.hdi{max-width:1280px;padding:10px 24px}
.gn .tomap{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:8px;background:var(--ai);color:var(--ai-ink)}
.gn .tomap:hover{color:var(--ai-ink);text-decoration:underline}
.ic{flex:none}
.wrap.wide{max-width:1240px;padding-left:24px;padding-right:24px}
.wide .head,.wide>.lead,.wide>.acts,.wide .src,.wide .sub2{max-width:760px}
.wide .spots{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.wide .rlist{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:start;margin:8px 0 4px}
.hrow .head{margin:0}
.hrow .acts{margin:16px 0 0}
.loc{display:block;width:200px;padding:12px 12px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ai);text-decoration:none}
.loc>svg{display:block;width:100%;height:auto;max-height:190px}
.loc .l0{fill:var(--soft);stroke:var(--sub);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-opacity:.55}
.loc .l1{fill:var(--ai)}
.loc .l2{fill:var(--ai-soft);stroke:var(--ai);stroke-width:1;vector-effect:non-scaling-stroke;stroke-opacity:.6}
.loc .lp{fill:var(--ai);stroke:var(--bg);stroke-width:2.5;vector-effect:non-scaling-stroke}
.locl{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-size:14px;font-weight:700}
.loc:hover{border-color:var(--ai)}
.loc:hover .locl{text-decoration:underline}
@media (max-width:640px){.hrow{grid-template-columns:minmax(0,1fr)}.loc{display:flex;align-items:center;gap:14px;width:auto;padding:8px 14px 8px 8px}
  .loc>svg{width:88px;max-height:88px}.locl{margin:0}}
/* トップページ */
main.home{padding:0}
.home h2{border-top:0;padding-top:0;margin:0}
.hero2{position:relative;z-index:2;isolation:isolate;min-height:clamp(560px,82vh,860px);display:flex;align-items:flex-end;color:#fff}
.hero2 .slides{position:absolute;inset:0;overflow:hidden;z-index:-1;background:#1d2733}
.slide{position:absolute;inset:0;margin:0}
.slide img{display:block;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,16,24,.18) 0%,rgba(10,16,24,0) 30%,rgba(10,16,24,.62) 100%),linear-gradient(90deg,rgba(10,16,24,.5) 0%,rgba(10,16,24,0) 70%);background-color:rgba(10,16,24,var(--dim,0))}
.slide figcaption{position:absolute;z-index:1;right:24px;bottom:20px;margin:0;font-size:12.5px;line-height:1.4;text-align:right}
.slide figcaption a{color:#fff;text-decoration:none;opacity:.92}
.slide figcaption a:hover{text-decoration:underline}
.slide figcaption span{display:block;font-size:12px;opacity:.85}
.hero2 .slide{opacity:0;visibility:hidden}
.hero2 .s1{opacity:1;visibility:visible}
.hero2.n3 .slide{animation:xf 27s linear infinite}
.hero2.n3 .s1{animation-delay:-1.35s}.hero2.n3 .s2{animation-delay:7.65s}.hero2.n3 .s3{animation-delay:16.65s}
@keyframes xf{0%{opacity:0;visibility:visible}5%{opacity:1;visibility:visible}33.3%{opacity:1;visibility:visible}38.3%{opacity:0;visibility:visible}38.4%,100%{opacity:0;visibility:hidden}}
.hero2.n5 .slide{animation:xf5 45s linear infinite}
.hero2.n5 .s1{animation-delay:-1.35s}.hero2.n5 .s2{animation-delay:7.65s}.hero2.n5 .s3{animation-delay:16.65s}.hero2.n5 .s4{animation-delay:25.65s}.hero2.n5 .s5{animation-delay:34.65s}
@keyframes xf5{0%{opacity:0;visibility:visible}3%{opacity:1;visibility:visible}20%{opacity:1;visibility:visible}23%{opacity:0;visibility:visible}23.1%,100%{opacity:0;visibility:hidden}}
.hcopy{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:96px 24px clamp(56px,10vh,104px)}
.hero2 h1{font-size:clamp(32px,5.2vw,64px);line-height:1.28;letter-spacing:.03em;margin:0 0 16px;text-shadow:0 2px 28px rgba(0,0,0,.35)}
.hsub{font-size:clamp(15px,1.35vw,18px);max-width:34em;margin:0 0 28px;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero2 :focus-visible{outline-color:#fff}
.sch.big{display:block;max-width:640px;position:relative}
.sch.big .ic{position:absolute;left:18px;top:19px;color:#5d6670;pointer-events:none}
.sch.big input{height:60px;font-size:17px;padding:0 20px 0 52px;border-radius:12px;border:0;background:#fff;color:#22272e;box-shadow:0 10px 36px rgba(0,0,0,.25)}
.sch.big input:focus{outline:3px solid var(--ai);outline-offset:2px;background:#fff}
.sch.big input::placeholder{color:#6b737c}
.sch.big ul{top:calc(100% + 6px);border-radius:12px;padding:6px}
.hcta{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
.btn{gap:8px}
.btn.big{min-height:52px;padding:10px 24px;font-size:16px}
.btn.ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.9);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* ガラスのボタン（2026-11-15 オーナーの依頼）。写真の上（大写真・しめくくりの帯）は、すりガラス（白の半透明＋強いぼかし＋明るい縁）。
   主なボタンは少し濃いガラス、ほかは薄いガラスで差を付ける。ぼかしが使えないブラウザは、暗い半透明の地にする */
.hero2 .btn,.band .btn{color:#fff;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 28px rgba(8,16,28,.22);transition:background .2s,border-color .2s,transform .12s}
.hero2 .btn.pri,.band .btn.pri{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.72)}
.hero2 .btn:hover,.band .btn:hover{background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.9);color:#fff}
.hero2 .btn:active,.band .btn:active{transform:scale(.97)}
.hero2 .btn .ic,.band .btn .ic{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.hero2 .btn,.band .btn{background:rgba(12,20,32,.5)}.hero2 .btn.pri,.band .btn.pri{background:rgba(12,20,32,.66)}}
/* 見出しの帯の「地図で探す」: 白地の上なので、藍を透かしたガラス（上の縁に光、やわらかい影）。帯そのものも、すりガラスにしてページが下を流れて見える */
.hd{background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
.gn .tomap{background:color-mix(in srgb,var(--ai) 84%,transparent);border:1px solid color-mix(in srgb,#fff 28%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(8,16,28,.16);transition:background .2s,transform .12s}
.gn .tomap:hover{background:var(--ai);text-decoration:none}
.gn .tomap:active{transform:scale(.97)}
.nums{max-width:1280px;margin:0 auto;padding:36px 24px 0}
.nums ul{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
.nums li+li{border-left:1px solid var(--line)}
.nums a{display:block;padding:4px 14px;color:var(--ink);text-decoration:none}
.nums li:first-child a{padding-left:0}
.nums b{display:block;font-size:clamp(24px,2.3vw,34px);line-height:1.2;white-space:nowrap}
.nums span{font-size:13.5px;color:var(--sub);font-weight:700}
.nums a:hover b{color:var(--ai)}
.nums .src{margin:16px 0 0;max-width:none}
.sec{max-width:1280px;margin:0 auto;padding:72px 24px 0}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:0 0 22px}
.sh h2,.mapband h2,.closing h2{font-size:clamp(24px,2.6vw,34px);line-height:1.35;letter-spacing:.02em}
.sh p{margin:6px 0 0;color:var(--sub);font-size:15px}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;white-space:nowrap}
.more:hover{text-decoration:underline}
.mapband{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:40px 56px;align-items:center}
/* 見出しと短い導入文は文節で折り返す（「表/示」のような途中での改行を避ける。対応していないブラウザは今までどおり） */
h1,h2,h3,.hsub,.mapband p,.sech p{word-break:auto-phrase}
.mb-text h2{margin:0 0 16px}
.mb-text p{margin:0 0 20px}
.mb-shot{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 50px rgba(20,32,48,.16)}
.mb-shot img{display:block;width:100%;height:auto}
.pill{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background:var(--bg);color:var(--ai);font-size:13.5px;font-weight:700;border:1px solid var(--line)}
.mb-shot:hover .pill{text-decoration:underline}
.mb-shot:hover{border-color:var(--ai)}
.rowwrap{position:relative}
.row{list-style:none;margin:0;padding:2px 2px 14px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 20px) / 4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin}
.row.wide{grid-auto-columns:calc((100% - 2 * 20px) / 3)}
.card{scroll-snap-align:start;min-width:0}
.card>a{display:block;color:var(--ink);text-decoration:none;border-radius:12px}
.card .ph{display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--soft)}
.card.land .ph{aspect-ratio:3/2}
.card .ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card>a:hover .ph img{transform:scale(1.04)}
.card>a:hover b{color:var(--ai)}
.card b{display:block;font-size:16.5px;line-height:1.45;margin-top:2px}
.card .ck{display:block;margin-top:10px;font-size:13px;color:var(--sub)}
.card.cat b{margin-top:10px}
.card.cat .ck{margin-top:0}
.card .cr,.tiles .cr,.rc .cr{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:var(--sub)}
.home .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.rb{position:absolute;top:calc(50% - 60px);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.rb.prev{left:-20px}.rb.next{right:-20px}
.rb:disabled{opacity:0;pointer-events:none}
.rb:hover{color:var(--ai);border-color:var(--ai)}
@media (hover:hover) and (min-width:900px){.rb{display:flex}}
.tiles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:32px 20px}
.tile{flex:1 1 260px;min-width:0}
.tph{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--soft)}
.tph img{display:block;width:100%;height:100%;object-fit:cover}
.tov{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 14px;background:linear-gradient(rgba(10,16,24,0),rgba(10,16,24,.72));color:#fff}
.tov h3{margin:0;font-size:24px;line-height:1.3}
.tov span{font-size:13px;opacity:.92}
.tcap{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:4px;background:rgba(10,16,24,.5);color:#fff;font-size:12px}
.td{margin:12px 0 8px;font-size:14px;color:var(--sub);line-height:1.65}
.tp{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tp a{display:inline-flex;align-items:center;min-height:32px;padding:3px 12px;border-radius:999px;background:var(--soft);color:var(--ink);text-decoration:none;font-size:14px;font-weight:700}
.tp a:hover{background:var(--ai-soft);color:var(--ai)}
.rcs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.rc{display:flex;flex-direction:column}
.rc>a{flex:1;display:block;padding:18px 20px 16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;background:var(--bg)}
.rc>a:hover{border-color:var(--ai)}
.rc .rl{display:block;margin:0 0 10px;font-size:13px;color:var(--sub)}
.rc h3{margin:0 0 2px;font-size:16px}
/* ふと、知らない町へ（ランダムな市区町村・駅・見どころ。シャッフルは pages.js） */
.exg+.exg{margin-top:28px}
.exh{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:0 0 14px}
.exh h3{margin:0;font-size:19px;line-height:1.4}
.exh .more{margin-left:auto;font-size:14px}
.shuf{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:8px;border:1.5px solid var(--ai);background:var(--bg);color:var(--ai);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .12s cubic-bezier(.2,.8,.2,1)}
.shuf:hover{background:var(--ai-soft)}
.shuf:active{transform:scale(.95)}
.shuf[aria-busy="true"]{opacity:.6}
.card.ex .ck{margin-top:2px}
/* 開くたびに中身を入れ替えても列の高さが変わらないように（表示のずれを出さない）、名前と1行は1行に、クレジットは2行分の高さに固定する */
.card.ex b,.card.ex .ck{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.ex .cr{height:3em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card.ex:not(:has(.cr))::after{content:"";display:block;height:calc(3em + 4px);font-size:11px}
.card.ex b{margin-top:10px}
.card .ph.exst{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:16px;background:var(--soft)}
.exsg{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:10px;text-align:center}
.card.ex .exsg b{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.3;letter-spacing:.08em;color:var(--ink)}
.exl{display:flex;flex-direction:column;gap:4px}
.exl i{display:block;height:10px;border-radius:4px}
.exn{font-size:12.5px;line-height:1.5;color:var(--sub);font-weight:700}
.row.exfade{opacity:0;transition:opacity .16s ease}
.row{transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){.row,.row.exfade{transition:none;opacity:1}.shuf{transition:none}.shuf:active{transform:none}}
.rc ol{list-style:none;margin:0 0 12px;padding:0}
.rc ol li{display:grid;grid-template-columns:1.6em minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line);font-size:14.5px}
.rc ol i{font-style:normal;font-weight:700;color:var(--ai)}
.rc ol small{margin-left:6px;font-size:12px;color:var(--sub)}
.rc ol b{font-size:14px;white-space:nowrap}
.rc .more{font-size:14px;color:var(--ai)}
.band{position:relative;isolation:isolate;margin:88px 0 0;min-height:560px;display:flex;align-items:center;color:#fff;background:#1d2733}
.bph{position:absolute;inset:0;z-index:-1;overflow:hidden}
.bph img{display:block;width:100%;height:100%;object-fit:cover}
.bph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,16,24,.74) 0%,rgba(10,16,24,.35) 60%,rgba(10,16,24,.1) 100%)}
.bin{width:100%;max-width:1280px;margin:0 auto;padding:80px 24px}
.bin h2{margin:0 0 14px;font-size:clamp(26px,3.4vw,44px);line-height:1.3;color:#fff}
.bin>p{max-width:34em;margin:0}
.chips{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:780px}
.chips a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.95);color:#22272e;font-weight:700;font-size:14px;text-decoration:none}
.chips a:hover{background:#fff;color:#35577a;text-decoration:underline}
.chips small{font-weight:400;color:#5d6670}
.band :focus-visible{outline-color:#fff}
.bcap{position:absolute;right:24px;bottom:14px;margin:0;font-size:12px;opacity:.85}
.closing{text-align:center;padding-bottom:16px}
.closing h2{margin:0 0 20px}
.cl{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.closing .src{margin:24px auto 0}
.closing.band{min-height:480px;padding:0}
.closing.band .bph::after{background:linear-gradient(180deg,rgba(10,16,24,.35),rgba(10,16,24,.55))}
.closing.band h2{color:#fff}
.closing.band .src,.closing.band .src a{color:#fff;opacity:.9}
.home+.fb,.home~.ft{margin-top:56px}
@media (max-width:1100px){.nums ul{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:20px}.nums li:nth-child(5){border-left:0}.nums li:nth-child(5) a{padding-left:0}
  .row{grid-auto-columns:calc((100% - 2 * 20px) / 3)}.row.wide{grid-auto-columns:calc((100% - 20px) / 2)}}
@media (max-width:860px){.mapband{grid-template-columns:minmax(0,1fr)}.row{grid-auto-columns:calc((100% - 20px) / 2.3)}.row.wide{grid-auto-columns:78%}}
@media (max-width:640px){.hdi,.wrap.wide{padding-left:16px;padding-right:16px}.sec,.nums,.hcopy,.bin{padding-left:16px;padding-right:16px}.sec{padding-top:56px}
  .hero2{min-height:min(720px,calc(100svh - 56px))}.hcopy{padding-top:72px;padding-bottom:40px}.hero2 h1{font-size:clamp(24px,7.2vw,32px)}
  .slide figcaption{top:12px;right:12px;bottom:auto}.sch.big input{height:54px;font-size:16px}.sch.big .ic{top:16px}
  .hcta .btn{flex:1 1 auto}.nums ul{grid-template-columns:repeat(2,minmax(0,1fr))}.nums li+li{border-left:0}.nums li:nth-child(even){border-left:1px solid var(--line)}
  .nums li:nth-child(odd) a{padding-left:0}.sh{flex-direction:column;align-items:flex-start}.row{grid-auto-columns:68%;gap:14px}.row.wide{grid-auto-columns:84%}
  .rcs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.rc{scroll-snap-align:start}
  .band{min-height:0}.bin{padding-top:64px;padding-bottom:64px}.wide .spots{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.hero2.n3 .slide,.hero2.n5 .slide{animation:none}.hero2 .slide:not(.s1){display:none}.card .ph img{transition:none}.card>a:hover .ph img{transform:none}}
/* ---- 国立公園（/np/）。緑は国立公園の範囲と印だけ（DESIGN.md の park-green）。見どころの番号は種類の色 ---- */
:root{--park:#2f6b49;--park-ink:#fff}
@media (prefers-color-scheme:dark){:root{--park:#7cc49a;--park-ink:#0f2318}}
.npmap{margin:16px 0 4px;max-width:720px}
.npov{display:grid;gap:20px 40px;align-items:start;margin:16px 0 0}
@media (min-width:1000px){.npov{grid-template-columns:minmax(0,600px) minmax(0,1fr)}}
.npov .npmap{margin:0}
.npl{columns:2 150px;column-gap:28px}
.npl>div{break-inside:avoid;margin:0 0 14px}
.npl .nplh{margin:0 0 2px;font-size:13px;font-weight:700;color:var(--sub)}
.npl ol{list-style:none;margin:0;padding:0}
.npl a{display:flex;align-items:center;gap:8px;min-height:34px;color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.4}
.npl a:hover span{color:var(--ai);text-decoration:underline}
.npmap svg{display:block;width:100%;height:auto;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.npmap .l0{fill:var(--soft);stroke:var(--sub);stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.npmap .pk{fill:var(--park);fill-opacity:.4;fill-rule:evenodd;stroke:var(--park);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.npmap .pkf{fill:var(--park);fill-opacity:.07;fill-rule:evenodd;stroke:var(--park);stroke-width:1.2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.npmap .ins{fill:var(--bg);stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.npmap .inl{font-size:22px;fill:var(--sub)}
.npmap .pin circle{fill:var(--park);stroke:var(--bg);stroke-width:2;vector-effect:non-scaling-stroke}
.npmap .pin text{fill:var(--park-ink);font-weight:700;text-anchor:middle;dominant-baseline:central}
.npmap .pin line{stroke:var(--park);stroke-width:1.2;vector-effect:non-scaling-stroke}
.npd .pin text{fill:#fff}
.npd .pin line{stroke:var(--sub)}
.npmap a.pin:hover circle,.npmap a.pin:focus-visible circle{fill:var(--ai)!important}
.npmap a.pin:hover text,.npmap a.pin:focus-visible text{fill:var(--ai-ink)}
.npmap a.pin:focus{outline:none}
.npmap figcaption{margin-top:6px}
.nplg{list-style:none;display:flex;flex-wrap:wrap;gap:2px 18px;margin:0;padding:0;font-size:13px;color:var(--sub)}
.nplg li{display:flex;align-items:center;gap:6px}
.sw{display:inline-block;width:18px;height:12px;border-radius:3px;flex:none;font-style:normal}
.sw.l{background:var(--park);opacity:.5}
.sw.f{border:1.5px dashed var(--park)}
.sw.n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--park);color:var(--park-ink);font-size:11px;font-weight:700}
.sw.n.s{background:var(--sub);color:var(--bg)}
.loc .lk{fill:var(--park);fill-rule:evenodd}
.loc .lkp{fill:var(--park);stroke:var(--bg);stroke-width:2.5;vector-effect:non-scaling-stroke}
.npr h2 small,h2 .cnt,h3 .cnt{margin-left:8px;font-size:14px;font-weight:400;color:var(--sub)}
.npg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px 20px}
.npc .ck{display:flex;align-items:center;gap:8px}
.nno{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--park);color:var(--park-ink);font-style:normal;font-weight:700;font-size:12px;flex:none}
.npc .nm{display:block;margin-top:2px;font-size:13.5px;color:var(--sub)}
.ph.cf.none img{visibility:hidden}
.sn{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin-right:6px;border-radius:999px;color:#fff;font-size:12px;font-weight:700;line-height:1;vertical-align:1px}
.kv dd small{margin-left:.6em;color:var(--sub);font-size:12.5px}
.npm small{display:inline-flex;gap:6px;align-items:baseline}
.hy{font-size:11px;font-weight:700;color:var(--ai);padding:0 6px;border-radius:999px;background:var(--ai-soft)}
@media (max-width:640px){.npg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 12px}.npc b{font-size:15px}.npc .nm{font-size:12.5px}}