/* 案3「スタンプ帳」— ページをめくり、押して、集める。道の駅スタンプラリーそのものがサイトに */
:root{--desk:#16423c;--paper:#fbf6e9;--ink:#2b2118;--red:#d6342c;--blue:#2457c5;--green:#1f8a4c;--navy:#14264a;--gold:#e6c36a;--f-h:"Kaisei Decol",serif;--f-h2:"Zen Kurenaido",cursive;--f-b:"Zen Maru Gothic",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--f-b);line-height:1.85;overflow-x:hidden;
  background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.07),transparent 40%),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 9px),var(--desk)}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.todo{background:#ffe97a;padding:0 .3em;border-radius:3px;font-weight:700;font-size:.88em}
.book{max-width:1000px;margin:0 auto;padding:40px 16px 60px}
/* 表紙 */
.cover{position:relative;min-height:min(86svh,760px);border-radius:10px 26px 26px 10px;background:
  radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 50%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 3px,transparent 3px 6px),var(--navy);
  color:var(--gold);display:grid;place-items:center;text-align:center;padding:40px 20px;box-shadow:0 30px 60px rgba(0,0,0,.5),inset 10px 0 0 rgba(0,0,0,.35),inset 14px 0 0 rgba(255,255,255,.06);
  transform:perspective(1200px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .15s}
.cover::after{content:"";position:absolute;inset:14px 14px 14px 26px;border:2px solid rgba(230,195,106,.55);border-radius:6px 16px 16px 6px;pointer-events:none}
.cover .sm{font-family:var(--f-h);letter-spacing:.5em;font-size:.9rem}
.cover h1{font-family:var(--f-h);font-size:clamp(2.6rem,10vw,6.4rem);line-height:1.15;font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 20px rgba(230,195,106,.25);margin:.2em 0}
.cover .en{font-family:var(--f-h);letter-spacing:.3em;font-size:clamp(.8rem,2vw,1.2rem)}
.cover .no{display:inline-block;margin-top:24px;border:2px solid var(--gold);border-radius:999px;padding:2px 22px;font-family:var(--f-h)}
.open{display:inline-block;margin-top:30px;font:inherit;font-family:var(--f-h);font-weight:700;background:var(--gold);color:var(--navy);border:0;padding:14px 38px;border-radius:999px;cursor:pointer;box-shadow:0 6px 0 #a98a3a;transition:transform .15s,box-shadow .15s}
.open:active{transform:translateY(5px);box-shadow:0 1px 0 #a98a3a}
/* ページ */
.page{position:relative;margin-top:36px;background:var(--paper);border-radius:6px 22px 22px 6px;padding:clamp(28px,5vw,64px) clamp(20px,5vw,64px) clamp(28px,5vw,64px) clamp(36px,6vw,80px);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .09 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}
.page::before{content:"";position:absolute;left:20px;top:18px;bottom:18px;border-left:3px dashed rgba(0,0,0,.18)}
.pg-no{position:absolute;right:20px;top:14px;font-family:var(--f-h2);color:#9a8a6d}
.tape{position:absolute;width:110px;height:30px;background:repeating-linear-gradient(45deg,rgba(255,200,80,.65) 0 8px,rgba(255,255,255,.5) 8px 16px);transform:rotate(-6deg);top:-14px;left:12%;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.tape.r{left:auto;right:10%;transform:rotate(5deg);background:repeating-linear-gradient(45deg,rgba(120,200,230,.6) 0 8px,rgba(255,255,255,.5) 8px 16px)}
h2.t{font-family:var(--f-h);font-weight:700;font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.25;margin-bottom:.4em}
h2.t em{font-style:normal;background:linear-gradient(transparent 62%,rgba(214,52,44,.35) 62%)}
.hand{font-family:var(--f-h2);font-size:1.25rem;color:#5b4a8c;transform:rotate(-2deg);display:inline-block}
.lead{font-size:clamp(1.05rem,2vw,1.3rem);font-weight:500;max-width:30em}
/* スタンプ枠と押印 */
.slot{position:relative;display:inline-grid;place-items:center;width:150px;height:150px;border-radius:50%;border:3px dashed #b9a98a;background:rgba(0,0,0,.025);cursor:pointer;color:#a39577;font-family:var(--f-h2);text-align:center;line-height:1.3;font-size:.95rem;transition:transform .2s,border-color .2s;padding:0;font-weight:400}
.slot:hover{transform:rotate(-6deg) scale(1.05);border-color:var(--red)}
.slot .st{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;mix-blend-mode:multiply}
.slot.on{border-color:transparent;background:none;cursor:default;color:transparent}
.slot.on:hover{transform:none}
.slot.on .st{opacity:.92;animation:stamp .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{0%{transform:scale(2.6) rotate(var(--r,-12deg));opacity:0;filter:blur(6px)}60%{opacity:1}100%{transform:scale(1) rotate(var(--r,-12deg));filter:none}}
.st svg{width:140px;height:140px;transform:rotate(var(--r,-12deg))}
.slot.on .st svg{transform:none}
.st text{font-family:var(--f-h);font-weight:700;fill:currentColor}
.slot.red .st{color:var(--red)}.slot.blue .st{color:var(--blue)}.slot.green .st{color:var(--green)}
.shake{animation:shk .35s}
@keyframes shk{25%{transform:translateY(-6px)}75%{transform:translateY(2px)}}
/* 中身 */
.polas{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-top:30px}
.pola{background:#fff;padding:12px 12px 16px;box-shadow:0 6px 14px rgba(0,0,0,.2);transform:rotate(var(--a,-2deg));transition:transform .3s}
.pola:nth-child(2n){--a:2.2deg}.pola:nth-child(3n){--a:-1deg}
.pola:hover{transform:rotate(0) scale(1.05) translateY(-4px)}
.pola .ph{aspect-ratio:1;background:repeating-linear-gradient(135deg,#e5dcc6 0 14px,#efe7d3 14px 28px);display:grid;place-items:center;color:#8c7d5c;font-size:.8rem}
.pola h3{font-family:var(--f-h2);font-size:1.3rem;margin-top:10px;font-weight:400}
.pola p{font-size:.88rem;color:#6b5d44;line-height:1.5}
.row{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:28px}
.tbl{display:grid;grid-template-columns:7.5em 1fr;margin-top:20px;font-size:1rem}
.tbl dt,.tbl dd{margin:0;padding:12px 0;border-bottom:1.5px dotted #b9a98a}
.tbl dt{font-family:var(--f-h2);font-size:1.15rem;color:#8a3a2d}
.note{margin-top:26px;background:#fff4b8;padding:14px 18px;transform:rotate(-1deg);box-shadow:0 4px 10px rgba(0,0,0,.15);font-family:var(--f-h2);font-size:1.1rem;max-width:30em}
.pgtitle{padding:36px 16px 0}
.pgtitle h1{font-family:var(--f-h);color:var(--gold);font-size:clamp(2.6rem,10vw,6rem);line-height:1.1}
.pgtitle p{color:#cfe3dc;letter-spacing:.3em;font-family:var(--f-h)}
/* 右のインデックス */
.tabs{position:fixed;right:0;top:90px;z-index:50;display:grid;gap:6px}
.tabs a{writing-mode:vertical-rl;font-family:var(--f-h);font-weight:700;padding:16px 8px;border-radius:10px 0 0 10px;color:#fff;box-shadow:-3px 3px 8px rgba(0,0,0,.3);transition:transform .25s,padding .25s}
.tabs a:hover,.tabs a[aria-current]{transform:translateX(-6px);padding-right:14px}
.t1{background:#d6342c}.t2{background:#2457c5}.t3{background:#d98a1c}.t4{background:#1f8a4c}
.count{position:fixed;left:14px;top:14px;z-index:50;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:2px 16px;font-family:var(--f-h);box-shadow:0 4px 0 rgba(0,0,0,.4)}
.count b{color:var(--red);font-size:1.3em}.count span{font-size:.75rem;letter-spacing:.2em;margin-right:6px}
.foot{margin-top:36px;color:#cfe3dc;text-align:center;font-size:.9rem}
.foot .small{opacity:.6;margin-top:6px}
.done{position:fixed;inset:0;z-index:99;background:rgba(10,30,28,.8);display:grid;place-items:center;text-align:center;color:#fff}
.done[hidden]{display:none}
.done>div{background:var(--paper);color:var(--ink);padding:40px 48px;border-radius:20px;border:4px double var(--red);transform:rotate(-2deg);animation:stamp .6s cubic-bezier(.2,1.6,.4,1)}
.done .k{font-family:var(--f-h);font-size:3rem;color:var(--red);font-weight:700}
.done button{margin-top:18px;font:inherit;padding:8px 28px;border-radius:999px;border:2px solid var(--ink);background:none;cursor:pointer}
.conf{position:fixed;top:-20px;width:10px;height:16px;z-index:100;animation:fallc linear forwards}
@keyframes fallc{to{transform:translateY(110vh) rotate(720deg)}}
@media(max-width:700px){.tabs{top:auto;bottom:0;left:0;right:0;display:flex;gap:0}.tabs a{writing-mode:horizontal-tb;flex:1;text-align:center;border-radius:10px 10px 0 0;padding:10px 4px}.tabs a:hover,.tabs a[aria-current]{transform:translateY(-4px);padding:10px 4px}.book{padding-bottom:90px}.slot{width:120px;height:120px}.st svg{width:112px;height:112px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.tbl.m{grid-template-columns:1fr auto;column-gap:16px;margin-top:6px}.tbl.m dt{font-family:var(--f-b);font-size:1rem;color:var(--ink);font-weight:700}.tbl.m dd{text-align:right;font-family:var(--f-h);font-weight:700;white-space:nowrap}