/* =========================================================================
   ひっとべ！南九州 — たびのしおり  |  Design System
   小学校の「旅行のしおり」風。わら半紙×赤青鉛筆×マーカー黄×テープ。
   写真は本物、あしらいは学級だより。
   ========================================================================= */

/* ---------- Fonts (loaded in HTML):
   Hachi Maru Pop (丸文字見出し), Zen Maru Gothic (本文),
   Yomogi (手書きメモ), DM Mono (時刻) ---------- */

/* ---------- Tokens ---------- */
:root{
  --paper:      #F8F2E2;   /* わら半紙          */
  --paper-2:    #F1E8D2;
  --kraft:      #EBDDBB;   /* クラフト紙        */
  --card:       #FFFDF4;   /* 白い紙            */
  --ink:        #40372B;   /* 濃い鉛筆          */
  --ink-2:      #5C5142;
  --ink-3:      #8A7D69;
  --red:        #E8503A;   /* 赤鉛筆            */
  --red-deep:   #C93A26;
  --blue:       #3A6EA8;   /* 青鉛筆            */
  --green:      #5E9E5A;   /* みどり            */
  --marker:     #FFE066;   /* 蛍光マーカー黄    */
  --tape:       rgba(255,224,102,.55);

  --edge: 2px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 9px;

  --shadow-hard: 4px 4px 0 rgba(64,55,43,.18);
  --shadow-soft: 0 14px 40px -18px rgba(64,55,43,.35);

  --f-display: "Hachi Maru Pop", "Zen Maru Gothic", sans-serif;
  --f-jp:      "Zen Maru Gothic", sans-serif;
  --f-hand:    "Yomogi", "Zen Maru Gothic", cursive;
  --f-mono:    "DM Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --gutter: clamp(18px, 5vw, 64px);
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--f-jp); color:var(--ink);
  background:var(--paper); line-height:1.75; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
::selection{ background:var(--marker); color:var(--ink); }

/* わら半紙の紙目 */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; opacity:.06;
}

/* 学級だより風の赤青二色線 */
.duoline{ height:6px; background:
  repeating-linear-gradient(90deg, var(--red) 0 26px, transparent 26px 34px, var(--blue) 34px 60px, transparent 60px 68px); border:none; }

/* ---------- Utilities ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; }
.eyebrow{
  font-family:var(--f-display); font-size:.85rem; letter-spacing:.14em;
  color:var(--red); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow .idx{ color:var(--blue); }
.eyebrow::before{ content:"☆"; color:var(--red); }
.hand{ font-family:var(--f-hand); }
.mono{ font-family:var(--f-mono); }

.section{ position:relative; padding-block:clamp(58px,9vw,120px); }
.section-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(28px,4.5vw,54px); position:relative; }
.section-title{
  font-family:var(--f-display); font-weight:400; line-height:1.25; margin:0;
  font-size:clamp(1.9rem,5.4vw,3.4rem); letter-spacing:.03em; color:var(--ink);
}
.section-title .hl{ background:linear-gradient(transparent 58%, var(--marker) 58% 92%, transparent 92%); padding-inline:.08em; }
.section-title .sub{
  display:block; font-family:var(--f-jp); font-weight:700;
  font-size:clamp(.92rem,2.3vw,1.15rem); letter-spacing:.02em; color:var(--ink-2); margin-top:.5em; line-height:1.6;
}

/* stamp (はんこ) */
.stamp{
  display:inline-grid; place-items:center; text-align:center;
  width:96px; height:96px; border-radius:50%;
  border:3px double var(--red); color:var(--red);
  font-family:var(--f-display); font-size:.78rem; line-height:1.3;
  transform:rotate(-12deg); opacity:.9; padding:8px;
  mix-blend-mode:multiply; background:rgba(232,80,58,.04);
}

/* tape */
.tape{
  position:absolute; width:92px; height:26px; background:var(--tape);
  border-left:1px dashed rgba(64,55,43,.25); border-right:1px dashed rgba(64,55,43,.25);
  transform:rotate(-5deg); opacity:.9; pointer-events:none;
}

/* Reveal */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px var(--gutter); color:var(--ink); transition:transform .4s ease;
  background:linear-gradient(rgba(248,242,226,.94), rgba(248,242,226,0));
}
.nav.hide{ transform:translateY(-120%); }
.nav__brand{ font-family:var(--f-display); font-size:1.05rem; letter-spacing:.05em; }
.nav__brand em{ font-style:normal; color:var(--red); }
.nav__links{ display:flex; gap:20px; font-family:var(--f-display); font-size:.74rem; letter-spacing:.1em; }
.nav__links a{ opacity:.75; transition:opacity .2s,color .2s; }
.nav__links a:hover{ opacity:1; color:var(--red); }
@media (max-width:720px){ .nav__links{ display:none; } }

/* =========================================================================
   TICKER（運動会の万国旗ノリ）
   ========================================================================= */
.ticker{
  background:var(--red); color:#FFF8EA;
  overflow:hidden; white-space:nowrap; padding-block:10px; position:relative; z-index:2;
}
.ticker__row{ display:inline-flex; gap:30px; padding-left:30px; animation:marq 30s linear infinite; }
.ticker span{ font-family:var(--f-display); font-size:.85rem; letter-spacing:.12em; display:inline-flex; align-items:center; gap:30px; }
.ticker b{ font-weight:400; font-size:1rem; }
.ticker .dot{ font-style:normal; color:var(--marker); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* 万国旗 divider */
.bunting{ position:relative; height:34px; background:transparent; overflow:hidden; }
.bunting::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--ink-3); opacity:.5; }
.bunting::after{ content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='34' viewBox='0 0 168 34'%3E%3Cpath d='M2 2l24 0-12 26z' fill='%23E8503A'/%3E%3Cpath d='M44 2l24 0-12 26z' fill='%23FFE066'/%3E%3Cpath d='M86 2l24 0-12 26z' fill='%233A6EA8'/%3E%3Cpath d='M128 2l24 0-12 26z' fill='%235E9E5A'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:168px 34px; }

/* =========================================================================
   HERO（しおりの表紙）
   ========================================================================= */
.hero{
  position:relative; background:var(--paper); color:var(--ink);
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; isolation:isolate; padding-block:90px 40px;
}
.hero__inner{ position:relative; z-index:2; width:100%; max-width:980px; margin-inline:auto; padding-inline:var(--gutter); text-align:center; }
.hero__cover{
  position:relative; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard); padding:clamp(26px,5vw,56px) clamp(18px,4vw,48px);
}
/* 赤青鉛筆の内枠 */
.hero__cover::before{ content:""; position:absolute; inset:10px; border-radius:calc(var(--r-lg) - 8px); pointer-events:none;
  border:3px dashed var(--red); opacity:.5; }
.hero__cover::after{ content:""; position:absolute; inset:16px; border-radius:calc(var(--r-lg) - 12px); pointer-events:none;
  border:2px dashed var(--blue); opacity:.4; }
.hero__tape-l{ top:-13px; left:8%; transform:rotate(-7deg); }
.hero__tape-r{ top:-13px; right:8%; transform:rotate(6deg); }
.hero__kicker{
  font-family:var(--f-display); font-size:clamp(.85rem,2.2vw,1.05rem); letter-spacing:.3em; color:var(--blue); margin-bottom:10px;
}
.hero__title{
  font-family:var(--f-display); font-weight:400; line-height:1.12; margin:0;
  font-size:clamp(2.6rem,9vw,5.6rem); letter-spacing:.02em;
}
.hero__title em{ font-style:normal; color:var(--red); }
.hero__title .hl{ background:linear-gradient(transparent 60%, var(--marker) 60% 94%, transparent 94%); padding-inline:.06em; }
.hero__en{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; }
.hero__tag{
  margin:18px auto 0; max-width:26em; font-weight:700;
  font-size:clamp(1rem,2.4vw,1.3rem); line-height:1.7;
}
.hero__tag em{ font-style:normal; color:var(--red); }
.hero__photo{
  position:relative; width:min(420px,72%); margin:26px auto 0; background:#fff;
  padding:10px 10px 34px; border:1.5px solid rgba(64,55,43,.25); box-shadow:var(--shadow-soft);
  transform:rotate(-2deg);
}
.hero__photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.hero__photo .cap{ position:absolute; left:0; right:0; bottom:6px; text-align:center; font-family:var(--f-hand); font-size:.9rem; color:var(--ink-2); }
.hero__photo .tape{ top:-12px; left:calc(50% - 46px); transform:rotate(2deg); }
.hero__meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin-top:26px; }
.hero__dates{ font-family:var(--f-display); font-size:clamp(1rem,2.6vw,1.3rem); letter-spacing:.06em; color:var(--ink); }
.hero__dates b{ color:var(--red); }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
  border:2px solid var(--ink); font-size:.8rem; letter-spacing:.03em; font-weight:700; background:var(--card);
}
.chip svg{ width:15px; height:15px; color:var(--red); }
.chip--e{ background:var(--red); color:#FFF8EA; border-color:var(--red); }
.chip--e svg{ color:#FFF8EA; }
.hero__stamp{ position:absolute; right:clamp(6px,4vw,40px); bottom:clamp(6px,3vw,26px); }
.hero__name{
  margin-top:22px; display:inline-flex; align-items:baseline; gap:10px;
  font-family:var(--f-display); font-size:.9rem; color:var(--ink-2);
}
.hero__name .line{ display:inline-block; min-width:11em; border-bottom:2px solid var(--ink-3); font-family:var(--f-hand); font-size:1.05rem; color:var(--ink); padding-inline:8px; }
.hero__scroll{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:3;
  font-family:var(--f-display); font-size:.66rem; letter-spacing:.26em; color:var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.hero__scroll .bar{ width:2px; height:36px; background:linear-gradient(var(--ink-3),transparent); animation:scrolldrop 1.8s ease-in-out infinite; }
@keyframes scrolldrop{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4;} 50%{ transform:scaleY(1); opacity:1; } }
/* らくがき太陽 */
.doodle-sun{ position:absolute; top:24px; left:24px; width:74px; height:74px; color:var(--red); opacity:.85; }
.doodle-mt{ position:absolute; bottom:18px; left:26px; width:88px; height:60px; color:var(--blue); opacity:.7; }

/* =========================================================================
   DASH（しゅうごう・のりもの）
   ========================================================================= */
.dash{ background:var(--paper); }
.dash__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; }
@media (max-width:860px){ .dash__grid{ grid-template-columns:1fr; } }

.pass{
  position:relative; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-md);
  box-shadow:var(--shadow-hard); overflow:hidden;
}
.pass__top{ display:flex; align-items:center; justify-content:space-between; padding:13px 20px; background:#B9DB4A; color:#233000; }
.pass__top .brand{ font-family:var(--f-display); font-size:1rem; letter-spacing:.05em; }
.pass__top .flt{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; font-weight:500; }
.pass__route{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:24px 20px 8px; }
.pass__ap{ text-align:center; }
.pass__ap .code{ font-family:var(--f-display); font-size:clamp(2rem,6vw,3rem); line-height:1; color:var(--ink); }
.pass__ap .city{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.pass__ap .time{ font-weight:900; margin-top:4px; color:var(--red); font-size:1.05rem; }
.pass__mid{ display:flex; flex-direction:column; align-items:center; color:var(--blue); }
.pass__mid .dur{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-3); margin-bottom:2px; }
.pass__line{ display:flex; align-items:center; gap:6px; }
.pass__line .dash-l{ width:44px; height:2px; background:repeating-linear-gradient(90deg,var(--ink-3) 0 6px,transparent 6px 11px); }
.pass__line svg{ width:22px; height:22px; }
.pass__perf{ height:0; border-top:2px dashed var(--paper-2); margin:8px 0; position:relative; }
.pass__perf::before,.pass__perf::after{ content:""; position:absolute; top:-13px; width:24px; height:24px; border-radius:50%; background:var(--paper); border:2.5px solid var(--ink); }
.pass__perf::before{ left:-14px; } .pass__perf::after{ right:-14px; }
.pass__foot{ display:flex; flex-wrap:wrap; gap:14px 26px; padding:12px 20px 16px; }
.pass__cell .k{ font-family:var(--f-display); font-size:.62rem; letter-spacing:.1em; color:var(--blue); }
.pass__cell .v{ font-weight:900; font-size:.94rem; }
.pass__ret{ padding:11px 20px; border-top:2px dashed var(--paper-2); display:flex; align-items:center; gap:10px; font-size:.8rem; font-weight:700; color:var(--ink-2); flex-wrap:wrap; }
.pass__ret .rt{ margin-left:auto; font-family:var(--f-mono); font-size:.72rem; color:var(--ink-3); }
.pass__ret svg{ width:17px; height:17px; color:var(--red); flex:none; }

.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-content:start; }
.tile{
  background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-md);
  padding:16px 16px 14px; display:flex; flex-direction:column; gap:5px; min-height:108px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-hard);
}
.tile .k{ font-family:var(--f-display); font-size:.66rem; letter-spacing:.1em; color:var(--blue); }
.tile .v{ font-family:var(--f-display); font-size:clamp(1.25rem,3.6vw,1.8rem); line-height:1.15; color:var(--ink); }
.tile .s{ font-size:.79rem; color:var(--ink-2); font-weight:500; }
.tile--ember{ background:var(--red); border-color:var(--red-deep); }
.tile--ember .k{ color:#FFE9C9; }
.tile--ember .v,.tile--ember .s{ color:#FFF8EA; }
.tile--cd .v{ color:var(--red); }
.tile__cd{ display:flex; gap:10px; }
.tile__cd div{ text-align:center; }
.tile__cd .n{ font-family:var(--f-display); font-size:clamp(1.3rem,3.8vw,1.9rem); line-height:1; color:var(--red); }
.tile__cd .u{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
a.tile:hover{ transform:translateY(-2px); }
@media (max-width:520px){ .tiles{ grid-template-columns:1fr; } }

.concept{ margin-top:22px; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-md); box-shadow:var(--shadow-hard); padding:18px 22px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; position:relative; }
.concept__tag{ font-family:var(--f-display); font-size:.66rem; letter-spacing:.14em; padding:5px 12px; border:2px solid var(--red); color:var(--red); border-radius:999px; }
.concept__main{ font-family:var(--f-display); font-size:clamp(1.15rem,3.2vw,1.8rem); line-height:1.35; }
.concept__main span{ background:linear-gradient(transparent 60%, var(--marker) 60% 94%, transparent 94%); }
.concept__sub{ font-size:.84rem; color:var(--ink-2); margin-left:auto; line-height:1.7; max-width:30em; font-weight:500; }
@media (max-width:640px){ .concept__sub{ margin-left:0; } }

/* =========================================================================
   MAP（ちず）
   ========================================================================= */
.map{ background:var(--paper-2); }
.map__frame{
  position:relative; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard); padding:clamp(14px,3vw,28px); overflow:hidden;
}
.map__frame .tape{ top:-12px; left:calc(50% - 46px); }
.map__svg{ position:relative; width:100%; height:auto; display:block; }
.map__legend{ position:relative; display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; }
.map__legend .lg{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; color:var(--ink-2); }
.map__legend .lg svg{ width:16px; height:16px; color:var(--red); }
.map__legend .pin{ width:18px; height:18px; border-radius:50%; background:var(--red); display:inline-grid; place-items:center; color:#FFF8EA; font-weight:700; font-size:.6rem; }

.mpin{ transform-box:fill-box; transform-origin:center bottom; opacity:0; }
.mpin.in{ animation:pindrop .55s cubic-bezier(.2,1.4,.3,1) forwards; }
@keyframes pindrop{ 0%{ opacity:0; transform:translateY(-22px) scale(.6);} 100%{ opacity:1; transform:none; } }
.mroute{ stroke-dasharray:6 8; stroke-dashoffset:900; opacity:.9; }
.mroute.in{ animation:draw 2.6s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* =========================================================================
   ITINERARY（じかんわり）
   ========================================================================= */
.itin{ background:var(--paper); }
.day{ position:relative; padding-top:clamp(28px,5vw,60px); }
.day__head{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:6px; }
.day__no{
  font-family:var(--f-display); font-size:clamp(1.4rem,3.6vw,2rem); line-height:1;
  background:var(--red); color:#FFF8EA; border-radius:999px; padding:.55em .9em;
  box-shadow:var(--shadow-hard); transform:rotate(-2deg);
}
.day__no em{ font-style:normal; color:var(--marker); }
.day__meta{ }
.day__date{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; color:var(--ink-3); }
.day__theme{ font-family:var(--f-display); font-size:clamp(1.05rem,2.8vw,1.5rem); }

.tl{ position:relative; margin-top:24px; }
.tl::before{ content:""; position:absolute; left:calc(50% - 1px); top:0; bottom:0; width:2px; background:repeating-linear-gradient(var(--ink-3) 0 7px,transparent 7px 14px); opacity:.6; }
.tl__item{ position:relative; width:50%; padding:13px 40px; }
.tl__item:nth-child(odd){ left:0; text-align:right; }
.tl__item:nth-child(even){ left:50%; }
.tl__node{ position:absolute; top:20px; width:46px; height:46px; border-radius:50%; background:var(--card); border:2.5px solid var(--ink); display:grid; place-items:center; z-index:2; color:var(--red); box-shadow:2px 2px 0 rgba(64,55,43,.18); }
.tl__node svg{ width:23px; height:23px; }
.tl__item:nth-child(odd) .tl__node{ right:-23px; }
.tl__item:nth-child(even) .tl__node{ left:-23px; }
.tl__time{ font-family:var(--f-mono); font-size:.92rem; letter-spacing:.05em; color:var(--red); font-weight:500; }
.tl__name{ font-weight:900; font-size:1.08rem; line-height:1.4; margin-top:2px; }
.tl__hook{ font-size:.86rem; color:var(--ink-2); margin-top:5px; white-space:pre-line; font-weight:500; }
.tl__tags{ display:inline-flex; gap:6px; margin-top:7px; flex-wrap:wrap; }
.tl__cat{ font-family:var(--f-display); font-size:.6rem; letter-spacing:.08em; padding:3px 10px; border:2px solid var(--ink-3); border-radius:999px; color:var(--ink-2); background:var(--card); }
.tl__map{ display:inline-flex; align-items:center; gap:4px; font-family:var(--f-display); font-size:.6rem; letter-spacing:.06em; padding:3px 10px 3px 8px; border-radius:999px; border:2px solid var(--blue); color:var(--blue); background:var(--card); transition:background .2s,color .2s; }
.tl__map svg{ width:13px; height:13px; }
.tl__map:hover{ background:var(--blue); color:#FFF8EA; }
/* クライマックス item */
.tl__item--climax .tl__node{ background:var(--marker); border-color:var(--red); color:var(--red-deep); box-shadow:0 0 0 5px rgba(255,224,102,.45), 2px 2px 0 rgba(64,55,43,.18); }
.tl__item--climax .tl__name{ font-family:var(--f-display); font-weight:400; font-size:1.2rem; color:var(--red-deep); }
.tl__climax{ font-family:var(--f-display); font-size:.6rem; letter-spacing:.1em; padding:3px 10px; border-radius:999px; background:var(--red); color:#FFF8EA; }

@media (max-width:760px){
  .tl::before{ left:22px; }
  .tl__item{ width:100%; left:0 !important; text-align:left !important; padding:13px 12px 13px 60px; }
  .tl__node{ left:0 !important; right:auto !important; }
}
.itin__note{ margin-top:34px; background:var(--card); border:2px dashed var(--ink-3); border-radius:var(--r-md); padding:14px 20px; font-family:var(--f-hand); font-size:.98rem; color:var(--ink-2); }
.itin__note b{ color:var(--red); }

/* =========================================================================
   SPOTS（ポラロイド）
   ========================================================================= */
.spots{ background:var(--kraft); }
.spots__scroll{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(76vw,320px); gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:14px 6px 22px; scrollbar-width:thin; scrollbar-color:var(--red) var(--paper-2);
}
.spots__scroll::-webkit-scrollbar{ height:8px; }
.spots__scroll::-webkit-scrollbar-thumb{ background:var(--red); border-radius:99px; }
.spots__scroll::-webkit-scrollbar-track{ background:var(--paper-2); }
.spotcard{
  scroll-snap-align:start; position:relative; background:#fff;
  border:1.5px solid rgba(64,55,43,.25); box-shadow:var(--shadow-soft);
  padding:10px 10px 14px;
}
.spotcard:nth-child(odd){ transform:rotate(-1.4deg); }
.spotcard:nth-child(even){ transform:rotate(1.2deg); }
.spotcard::before{ content:""; position:absolute; top:-12px; left:calc(50% - 42px); width:84px; height:24px; background:var(--tape);
  border-left:1px dashed rgba(64,55,43,.25); border-right:1px dashed rgba(64,55,43,.25); transform:rotate(-3deg); z-index:3; }
.spotcard__img{ aspect-ratio:4/3.4; overflow:hidden; background:var(--paper-2); }
.spotcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.spotcard:hover .spotcard__img img{ transform:scale(1.06); }
.spotcard__no{ position:absolute; top:16px; left:16px; z-index:2; font-family:var(--f-display); font-size:1rem; color:#FFF8EA; background:var(--red); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; box-shadow:2px 2px 0 rgba(64,55,43,.25); }
.spotcard__day{ position:absolute; top:20px; right:16px; z-index:2; font-family:var(--f-display); font-size:.6rem; letter-spacing:.1em; padding:4px 10px; border-radius:999px; background:rgba(255,253,244,.92); border:1.5px solid var(--ink-3); color:var(--ink-2); }
.spotcard__body{ padding:12px 6px 0; }
.spotcard__name{ font-weight:900; font-size:1.05rem; line-height:1.4; }
.spotcard__en{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.spotcard__hook{ font-family:var(--f-hand); font-size:.95rem; color:var(--ink-2); margin-top:4px; line-height:1.55; }
.spotcard__map{ display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-family:var(--f-display); font-size:.62rem; letter-spacing:.08em; padding:5px 12px 5px 9px; border-radius:999px; border:2px solid var(--blue); color:var(--blue); transition:background .2s,color .2s; }
.spotcard__map svg{ width:14px; height:14px; }
.spotcard__map:hover{ background:var(--blue); color:#FFF8EA; }
.spots__hint{ font-family:var(--f-display); font-size:.72rem; letter-spacing:.12em; color:var(--ink-2); margin-top:10px; display:flex; align-items:center; gap:8px; }
.spots__hint svg{ width:15px; height:15px; }
/* 写真なしカード: クラフト紙＋らくがき */
.spotcard.noimg .spotcard__img{ position:relative; background:
  repeating-linear-gradient(-45deg, rgba(64,55,43,.05) 0 12px, transparent 12px 24px), var(--kraft); }
.spotcard.noimg .spotcard__img::after{ content:"おたのしみに！"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-hand); font-size:1.1rem; color:var(--ink-2); transform:rotate(-6deg); }
.spotcard.noimg .spotcard__img img{ display:none; }
/* クライマックスカード */
.spotcard--climax{ outline:3px solid var(--red); outline-offset:3px; }
.spotcard--climax .spotcard__name{ color:var(--red-deep); }

/* =========================================================================
   CLIMAX（野首の墓石群）
   ========================================================================= */
.climax{ background:var(--paper); }
.climax__card{
  position:relative; background:var(--card); border:3px solid var(--red); border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard); padding:clamp(24px,4.5vw,48px); text-align:center; overflow:hidden;
}
.climax__card::before{ content:""; position:absolute; inset:9px; border-radius:calc(var(--r-lg) - 7px); border:2px dashed var(--red); opacity:.4; pointer-events:none; }
.climax__kicker{ font-family:var(--f-display); font-size:.8rem; letter-spacing:.3em; color:var(--red); }
.climax__title{ font-family:var(--f-display); font-size:clamp(1.7rem,5vw,3rem); margin:.3em 0 0; line-height:1.3; }
.climax__title .hl{ background:linear-gradient(transparent 58%, var(--marker) 58% 92%, transparent 92%); }
.climax__lead{ max-width:36em; margin:18px auto 0; font-weight:700; font-size:clamp(.95rem,2.3vw,1.12rem); line-height:2; }
.climax__lead em{ font-style:normal; color:var(--red); }
.climax__note{ margin-top:14px; font-family:var(--f-hand); font-size:1rem; color:var(--ink-2); }
.climax__stamp{ position:absolute; right:clamp(8px,4vw,42px); top:clamp(8px,3vw,30px); transform:rotate(10deg); width:104px; height:104px; font-size:.82rem; }
.climax__crown{ width:64px; height:64px; margin-inline:auto; color:var(--red); }

/* =========================================================================
   STAY（おやど）
   ========================================================================= */
.stay{ background:var(--paper-2); }
.stay__grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:860px){ .stay__grid{ grid-template-columns:1fr; } }
.stay__card{ background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-hard); display:flex; flex-direction:column; position:relative; }
.stay__visual{ position:relative; min-height:230px; display:flex; align-items:flex-end; padding:16px 18px; background:
    repeating-linear-gradient(-45deg, rgba(232,80,58,.08) 0 14px, transparent 14px 28px), var(--paper); border-bottom:2.5px solid var(--ink); overflow:hidden; }
.stay__visual.teal{ background:
    repeating-linear-gradient(-45deg, rgba(58,110,168,.1) 0 14px, transparent 14px 28px), var(--paper); }
.stay__visual > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stay__night{ position:relative; z-index:1; font-family:var(--f-display); font-size:1.4rem; color:var(--ink); line-height:1.2;
  background:rgba(255,253,244,.94); border:2px solid var(--ink); border-radius:12px; padding:8px 16px 10px; box-shadow:var(--shadow-hard); }
.stay__night .sm{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; color:var(--ink-3); margin-bottom:4px; text-transform:uppercase; }
.stay__body{ padding:clamp(18px,3vw,28px); display:flex; flex-direction:column; gap:9px; flex:1; }
.stay__when{ font-family:var(--f-display); font-size:.68rem; letter-spacing:.14em; color:var(--blue); text-transform:uppercase; }
.stay__name{ font-family:var(--f-display); font-size:clamp(1.3rem,3.2vw,1.8rem); line-height:1.3; }
.stay__status{ display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-family:var(--f-display); font-size:.62rem; letter-spacing:.1em; padding:4px 12px; border-radius:999px; }
.stay__status--ok{ background:rgba(94,158,90,.12); border:2px solid var(--green); color:var(--green); }
.stay__status--wip{ background:rgba(255,224,102,.25); border:2px solid #C99A00; color:#8A6A00; }
.stay__row{ display:flex; align-items:flex-start; gap:9px; font-size:.88rem; color:var(--ink-2); font-weight:500; }
.stay__row svg{ width:17px; height:17px; color:var(--red); flex:none; margin-top:4px; }
.stay__link{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:var(--f-display); font-size:.7rem; letter-spacing:.08em; padding:8px 16px; border-radius:999px; border:2px solid var(--ink); background:var(--card); transition:background .2s,color .2s; }
.stay__link svg{ width:15px; height:15px; color:var(--red); }
.stay__link:hover{ background:var(--red); border-color:var(--red); color:#FFF8EA; }
.stay__link:hover svg{ color:#FFF8EA; }

/* =========================================================================
   TODO（かかりのしごと・やくそく）
   ========================================================================= */
.todo{ background:var(--paper);
  background-image:repeating-linear-gradient(transparent 0 34px, rgba(58,110,168,.12) 34px 36px); }
.todo__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.todo__item{ display:flex; align-items:flex-start; gap:12px; background:var(--card); border:2px solid var(--ink); border-radius:var(--r-sm); padding:13px 15px; font-weight:500; box-shadow:var(--shadow-hard); }
.todo__box{ width:24px; height:24px; border:2.5px solid var(--ink-2); border-radius:7px; flex:none; display:grid; place-items:center; margin-top:2px; background:#fff; }
.todo__box svg{ width:15px; height:15px; color:var(--red); opacity:0; transform:scale(.4); transition:.35s cubic-bezier(.2,1.6,.4,1); }
.todo__item.done{ opacity:.68; }
.todo__item.done .todo__box{ border-color:var(--red); }
.todo__item.done.in .todo__box svg{ opacity:1; transform:none; }
.todo__item.done .todo__t{ text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:2px; }
.todo__t{ font-size:.92rem; line-height:1.5; font-weight:700; }
.todo__meta{ display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.todo__who{ font-family:var(--f-display); font-size:.6rem; letter-spacing:.08em; padding:3px 10px; border-radius:999px; background:rgba(232,80,58,.1); border:2px solid var(--red); color:var(--red); }
.todo__note{ font-family:var(--f-hand); font-size:.86rem; color:var(--ink-2); margin-top:4px; line-height:1.55; display:block; }
.todo__rules{ margin-top:30px; background:var(--card); border:2px dashed var(--ink-3); border-radius:var(--r-md); padding:16px 22px; font-family:var(--f-hand); font-size:1rem; color:var(--ink-2); line-height:2; }
.todo__rules b{ color:var(--red); font-family:var(--f-display); font-weight:400; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{ background:var(--kraft); padding-block:clamp(52px,8vw,100px); position:relative; overflow:hidden; text-align:center; }
.foot__big{ font-family:var(--f-display); font-size:clamp(1.9rem,6.5vw,4rem); line-height:1.35; }
.foot__big em{ font-style:normal; color:var(--red); }
.foot__jp{ font-family:var(--f-hand); font-size:clamp(1rem,2.6vw,1.35rem); color:var(--ink-2); margin-top:12px; }
.foot__stamp{ margin:26px auto 0; }
.foot__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:36px; padding-top:20px; border-top:2px dashed var(--ink-3); font-size:.76rem; font-weight:500; color:var(--ink-2); }
.foot__meta a{ color:var(--red); font-weight:700; }
.totop{ position:fixed; right:20px; bottom:20px; z-index:90; width:52px; height:52px; border-radius:50%; background:var(--red); color:#FFF8EA; border:2.5px solid var(--red-deep); display:grid; place-items:center; box-shadow:var(--shadow-hard); opacity:0; transform:translateY(20px); transition:.3s; }
.totop.show{ opacity:1; transform:none; }
.totop svg{ width:22px; height:22px; }

/* flat mode (screenshot verification) */
html.flat .hero{ min-height:auto; padding-block:120px 60px; }
html.flat .mpin{ opacity:1; animation:none; }
html.flat .mroute{ stroke-dashoffset:0; animation:none; }