/* 地図データでリアル謎解き — 読み物サイトのデザイン（2026-09-12）
   方針: 地図が主役・白地に黒・太いゴシックの大見出し・細い本文カラム・末尾にクレジット。
   アクセントはチャンネルアイコンのピンの赤だけ。装飾は増やさない。 */
:root{
  --ink:#111418; --body:#2A2E35; --muted:#6B7078; --faint:#9AA0A8;
  --line:#E4E6E9; --soft:#F5F5F3; --bg:#FFFFFF; --dark:#0F1216;
  --accent:#D0392B; --accent-dk:#A92B1F;
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --wide:1160px; --text:700px;
}
*{box-sizing:border-box}
html{scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

/* ---------- ヘッダー ---------- */
.gh{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.gh-in{max-width:var(--wide);margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:28px}
.gh-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px;color:var(--ink);
  letter-spacing:.01em;white-space:nowrap}
.gh-brand img{width:32px;height:32px;border-radius:50%}
.gh-nav{display:flex;gap:22px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.gh-nav::-webkit-scrollbar{display:none}
.gh-nav a{font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap;padding:19px 0;
  border-bottom:2px solid transparent}
.gh-nav a:hover{color:var(--ink)}
.gh-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
@media(max-width:820px){
  .gh-in{height:auto;flex-wrap:wrap;gap:0;padding:0}
  .gh-brand{padding:12px 18px}
  .gh-nav{width:100%;margin:0;padding:0 18px;gap:18px;border-top:1px solid var(--line)}
  .gh-nav a{padding:11px 0}
}

/* ---------- 共通の部品 ---------- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 24px}
.label{display:inline-block;font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.04em}
.date{font-size:12.5px;color:var(--faint);font-feature-settings:"tnum"}
.sec{margin-top:72px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;margin-bottom:28px;border-bottom:2px solid var(--ink)}
.sec-h h2{margin:0;font-size:22px;font-weight:900;color:var(--ink);letter-spacing:.02em}
.sec-h a{font-size:13.5px;font-weight:700;color:var(--muted)}
.sec-h a:hover{color:var(--accent)}

/* カード（画像が主役。説明文は出さない） */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
@media(max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr;gap:32px}}
.card{display:block}
.card-img{aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.035)}
.card-meta{display:flex;gap:12px;align-items:baseline;margin-top:14px}
.card h3{margin:6px 0 0;font-size:17px;line-height:1.6;font-weight:700;color:var(--ink)}
.card:hover h3{color:var(--accent-dk)}

/* ---------- トップ ---------- */
.hero{position:relative;height:min(76vh,660px);min-height:440px;overflow:hidden;background:var(--dark)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,12,16,.82) 0%,rgba(10,12,16,.55) 45%,rgba(10,12,16,.05) 80%)}
.hero-in{position:relative;z-index:1;max-width:var(--wide);height:100%;margin:0 auto;padding:0 24px;
  display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:64px;color:#fff}
.hero .kicker{font-size:13px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.75)}
.hero h1{margin:14px 0 0;font-size:clamp(28px,5.4vw,64px);line-height:1.3;font-weight:900;letter-spacing:.01em}
.hero p{margin:20px 0 0;max-width:560px;font-size:16px;line-height:1.95;color:rgba(255,255,255,.86)}
.hero-credit{position:absolute;z-index:1;right:14px;bottom:10px;font-size:11px;color:rgba(255,255,255,.6)}
.nb{display:inline-block}  /* 日本語の見出しを句の途中で折らない */
@media(max-width:600px){.hero-in{padding-bottom:56px}.hero p{font-size:14.5px}.hero-credit{left:14px;font-size:10px;text-align:right}}

.feature{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
@media(max-width:860px){.feature{grid-template-columns:1fr;gap:20px}}
.feature .card-img{aspect-ratio:16/10}
.feature h3{margin:10px 0 0;font-size:clamp(24px,2.8vw,32px);line-height:1.5;font-weight:900;color:var(--ink)}
.feature p{margin:16px 0 0;font-size:15px;line-height:1.95;color:var(--body)}
.feature .more{display:inline-block;margin-top:20px;font-size:14px;font-weight:700;color:var(--accent)}
.feature:hover h3{color:var(--accent-dk)}

.series-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:960px){.series-row{grid-template-columns:repeat(2,1fr)}}
.stile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--dark)}
.stile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .3s,transform .5s}
.stile:hover img{opacity:.9;transform:scale(1.04)}
.stile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0) 62%)}
.stile span{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;color:#fff}
.stile b{display:block;font-size:19px;font-weight:900;line-height:1.4}
.stile i{font-style:normal;font-size:12px;color:rgba(255,255,255,.75)}

.yt{margin-top:88px;background:var(--dark);color:#fff}
.yt .wrap{display:flex;align-items:center;gap:28px;padding-top:44px;padding-bottom:44px}
.yt img{width:88px;height:88px;border-radius:50%;flex:0 0 auto}
.yt h2{margin:0;font-size:22px;font-weight:900}
.yt p{margin:8px 0 0;font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.72)}
.yt a.btn{margin-left:auto;flex:0 0 auto;font-weight:700;font-size:14px;color:var(--dark);background:#fff;padding:12px 22px}
.yt a.btn:hover{background:var(--accent);color:#fff}
@media(max-width:760px){.yt .wrap{flex-direction:column;align-items:flex-start}.yt a.btn{margin-left:0}}

/* ---------- 一覧・シリーズ ---------- */
.page-h{padding:56px 0 8px}
.page-h h1{margin:6px 0 0;font-size:clamp(28px,4vw,40px);font-weight:900;color:var(--ink);line-height:1.4}
.page-h p{margin:14px 0 0;max-width:640px;color:var(--muted);font-size:15px}
.tabs{display:flex;gap:26px;margin:30px 0 36px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{font:inherit;font-size:14px;font-weight:700;color:var(--muted);background:none;border:0;
  padding:12px 0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.empty{display:none;color:var(--muted);text-align:center;padding:48px 0}

.sband{position:relative;height:360px;overflow:hidden;background:var(--dark)}
.sband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.sband::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,12,16,.85),rgba(10,12,16,.15))}
.sband .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:40px;color:#fff}
.sband .label{color:#fff;opacity:.8}
.sband h1{margin:8px 0 0;font-size:clamp(30px,4.4vw,48px);font-weight:900;line-height:1.3}
.sband p{margin:12px 0 0;font-size:15.5px;color:rgba(255,255,255,.85)}
.none{color:var(--muted);padding:40px 0}

/* ---------- 記事 ---------- */
.a-head{max-width:820px;margin:0 auto;padding:56px 24px 0}
.crumbs{font-size:12.5px;color:var(--faint);margin-bottom:22px}
.crumbs a:hover{color:var(--accent)}
.a-head h1{margin:10px 0 0;font-size:clamp(28px,4.2vw,44px);line-height:1.45;font-weight:900;color:var(--ink);letter-spacing:.005em}
.a-head .lead{margin:22px 0 0;font-size:17px;line-height:1.95;color:var(--body)}
.a-head .byline{margin-top:22px;font-size:13px;color:var(--muted)}
.a-hero{max-width:var(--wide);margin:40px auto 0;padding:0 24px}
.a-hero img{width:100%;aspect-ratio:16/10;object-fit:cover}
.a-hero figcaption{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.a-hero figcaption small{display:block;color:var(--faint);font-size:11.5px}

.a-body{max-width:var(--text);margin:48px auto 0;padding:0 24px;font-size:17px;line-height:2.05;color:var(--body)}
.a-body p{margin:0 0 1.6em}
.a-body b{color:var(--ink);font-weight:700;background:linear-gradient(transparent 62%,rgba(208,57,43,.14) 62%)}
.a-body a{color:var(--accent-dk);text-decoration:underline;text-underline-offset:3px}
.a-body h2{margin:72px 0 24px;padding-top:20px;border-top:3px solid var(--ink);
  font-size:25px;line-height:1.55;font-weight:900;color:var(--ink)}
.a-body h3{margin:56px 0 18px;font-size:21px;line-height:1.6;font-weight:900;color:var(--ink)}
.a-body h3::before{content:"";display:block;width:28px;height:3px;background:var(--accent);margin-bottom:14px}
.a-body h2 + h3{margin-top:28px}
.a-body ul,.a-body ol{margin:0 0 1.6em;padding-left:1.4em}
.a-body li{margin:.35em 0}
.a-body blockquote{margin:0 0 1.6em;padding:16px 20px;background:var(--soft);border-left:3px solid var(--ink);
  font-size:15px;line-height:1.9;color:var(--body)}
.a-body figure{margin:40px -24px}
.a-body figure img{width:100%}
.a-body figcaption{padding:10px 24px 0;font-size:12.5px;color:var(--muted);line-height:1.7}
.table-wrap{margin:0 0 1.8em;overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.7}
.table-wrap th{text-align:left;font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink);padding:10px 12px;white-space:nowrap}
.table-wrap td{border-bottom:1px solid var(--line);padding:10px 12px;vertical-align:top}

.credits{max-width:var(--text);margin:64px auto 0;padding:22px 24px 0;border-top:1px solid var(--ink)}
.credits dl{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:0;font-size:13px;line-height:1.8}
.credits dt{color:var(--muted);white-space:nowrap}
.credits dd{margin:0;color:var(--body)}
.credits .note{margin:16px 0 0;font-size:12px;line-height:1.8;color:var(--faint)}

.a-yt{max-width:var(--text);margin:40px auto 0;padding:0 24px}
.a-yt a{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--soft)}
.a-yt img{width:48px;height:48px;border-radius:50%}
.a-yt b{display:block;font-size:15px;color:var(--ink)}
.a-yt span{font-size:13px;color:var(--muted)}
.a-yt a:hover b{color:var(--accent-dk)}

/* ---------- フッター ---------- */
.yt + .gf{margin-top:0}
.gf{margin-top:96px;background:var(--soft);border-top:1px solid var(--line)}
.gf .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding-top:34px;padding-bottom:34px}
.gf .brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--ink)}
.gf .brand img{width:28px;height:28px;border-radius:50%}
.gf nav{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--muted)}
.gf nav a:hover{color:var(--ink)}
.gf small{width:100%;font-size:11.5px;line-height:1.8;color:var(--faint)}

/* ---------- 固定ページ（about・404） ---------- */
.static{max-width:760px;margin:0 auto;padding:0 24px}
.static h2{margin:56px 0 18px;padding-top:20px;border-top:3px solid var(--ink);
  font-size:23px;line-height:1.5;font-weight:900;color:var(--ink)}
.static p{margin:0 0 1.5em;font-size:16px;line-height:2}
.static ul{margin:0 0 1.5em;padding-left:1.3em;font-size:15.5px;line-height:1.95}
.static li{margin:.4em 0}
.static a{color:var(--accent-dk);text-decoration:underline;text-underline-offset:3px}
.static b{color:var(--ink);font-weight:700}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0 0 1.5em;font-size:15.5px;line-height:1.9}
.kv dt{color:var(--muted);white-space:nowrap}
.kv dd{margin:0}
.links{list-style:none;padding:0;margin:28px 0 0;font-size:16px}
.links li{margin:0;border-bottom:1px solid var(--line)}
.links a{display:block;padding:15px 2px;font-weight:700;color:var(--ink);text-decoration:none}
.links a:hover{color:var(--accent)}
.upd{margin-top:48px;font-size:12.5px;color:var(--faint)}
@media(max-width:600px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:10px}}

/* ---------- スクロリーテリング（図が貼り付き、文章だけ流れる） ---------- */
.scrolly{margin:56px calc((var(--text) - 100vw) / 2 + 24px);max-width:none}
@media(max-width:1180px){.scrolly{margin:56px -24px}}
.sstep{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:0 48px;align-items:start;max-width:1160px;margin:0 auto;padding:0 24px}
.sfig{position:sticky;top:84px;margin:0;grid-column:1}
.sfig img{width:100%;max-height:calc(100vh - 140px);object-fit:contain;background:#fff}
.sfig figcaption{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.stext{grid-column:2;min-height:104vh;display:flex;flex-direction:column;justify-content:center;padding:8vh 0}
.stext p{margin:0 0 1.5em;font-size:16.5px;line-height:2.05;color:var(--body)}
.stext p:last-child{margin-bottom:0}
@media(max-width:860px){
  .scrolly{margin:40px 0}
  .sstep{display:block;padding:0}
  .sfig{position:sticky;top:64px;background:#fff;padding:8px 0}
  .sfig img{max-height:42vh}
  .sfig figcaption{padding:0 4px}
  .stext{min-height:auto;display:block;padding:18px 0 14vh}
  .stext p{font-size:16px}
}