@charset "utf-8";
/* =========================================================
   ものがたり博 in ぬまづ ＆ みしま 2026
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  color-scheme: light;

  --ink:        #2b2118;
  --ink-2:      #5a4b3c;
  --ink-3:      #8b7c6b;
  --paper:      #fbf5e6;
  --paper-2:    #fffdf4;
  --paper-3:    #f2ead4;

  --lime:       #8cc63e;
  --lime-deep:  #5c9a15;
  --lime-pale:  #e8f3cf;
  --leaf:       #2fa23a;
  --cyan:       #00aedc;
  --cyan-deep:  #0083b0;
  --cyan-pale:  #d9f1f9;
  --magenta:    #e4007f;
  --magenta-pale:#fde0ef;
  --orange:     #f08300;
  --orange-deep:#d86000;
  --sun:        #ffc51f;

  --wrap: 1180px;
  --gut: clamp(1.15rem, 4.4vw, 3rem);
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 30px;

  --shadow-hard: 5px 6px 0 var(--ink);
  --shadow-soft: 0 18px 40px -22px rgba(43,33,24,.55);

  --ff-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --ff-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ff-num: "Outfit", "Zen Kaku Gothic New", sans-serif;

  --ease: cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--ff-body);
  font-weight:500;
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;
  font-feature-settings:"palt" 1;
}

img,svg,video,iframe{ display:block; max-width:100%; }
img,svg,video{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--sun); color:var(--ink); }

:focus-visible{ outline:3px solid var(--magenta); outline-offset:3px; border-radius:4px; }

.wrap{ width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto; }
.wrap-w{ width:min(100% - var(--gut)*2, 1400px); margin-inline:auto; }
.sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.skip{
  position:fixed; top:-100px; left:12px; z-index:2000;
  background:var(--ink); color:#fff; padding:.7em 1.2em; border-radius:0 0 12px 12px;
  text-decoration:none; transition:top .2s;
}
.skip:focus{ top:0; }

/* ---------- paper grain ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.3; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* =========================================================
   header
   ========================================================= */
.hd{
  position:fixed; inset:0 0 auto; z-index:1000;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem var(--gut);
  transition:padding .45s var(--ease);
}
.hd::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--paper-2) 90%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:2px solid var(--ink);
  opacity:0; transition:opacity .45s var(--ease);
}
.hd.is-stuck{ padding-block:.42rem; }
.hd.is-stuck::before{ opacity:1; }

.hd__logo{ display:block; flex:0 0 auto; line-height:0; }
.hd__logo img{
  width:clamp(146px, 19vw, 226px);
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.9)) drop-shadow(0 6px 12px rgba(43,33,24,.25));
  transition:width .45s var(--ease);
}
.hd.is-stuck .hd__logo img{ width:clamp(124px, 15vw, 172px); }

.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(.6rem,1.8vw,1.6rem); }
.nav__list{ display:flex; align-items:center; gap:clamp(.5rem,1.6vw,1.5rem); }
.nav__list a{
  position:relative; display:block; text-decoration:none;
  font-family:var(--ff-round); font-weight:700; font-size:.9rem; letter-spacing:.05em;
  padding:.3em .1em; text-shadow:0 1px 0 rgba(255,255,255,.85), 0 0 10px rgba(255,255,255,.7);
}
.hd.is-stuck .nav__list a{ text-shadow:none; }
.nav__list a span{
  display:block; font-family:var(--ff-num); font-weight:700;
  font-size:.56rem; letter-spacing:.16em; color:var(--orange-deep); line-height:1;
  text-transform:uppercase;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; border-radius:3px;
  background:var(--magenta); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav__list a:hover::after, .nav__list a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

.hd__cta{
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  background:var(--magenta); color:#fff; text-decoration:none;
  font-family:var(--ff-round); font-weight:700; font-size:.84rem;
  padding:.6em 1.1em; border-radius:999px; border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.hd__cta:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.burger{
  display:none; margin-left:auto; width:52px; height:52px; padding:0; position:relative; z-index:5;
  background:var(--paper-2); border:2px solid var(--ink); border-radius:14px;
  box-shadow:3px 3px 0 var(--ink); cursor:pointer;
}
.burger i{ display:block; width:22px; height:2.5px; background:var(--ink); border-radius:2px; margin:5px auto; transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1040px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; margin:0; background:var(--paper);
    display:grid; place-content:center; gap:1.8rem;
    clip-path:circle(0 at calc(100% - 44px) 44px);
    transition:clip-path .55s var(--ease);
    pointer-events:none;
  }
  .nav.is-open{ clip-path:circle(155% at calc(100% - 44px) 44px); pointer-events:auto; }
  .nav__list{ flex-direction:column; gap:1.1rem; text-align:center; }
  .nav__list a{ font-size:1.4rem; }
  .nav__list a span{ font-size:.66rem; }
  .hd__cta{ font-size:1rem; margin-inline:auto; }
}

/* =========================================================
   hero
   ========================================================= */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  padding:clamp(4.2rem,7vw,4.8rem) 0 clamp(1.7rem,3.2vw,2.3rem);
  display:grid; align-content:center; grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:-6% -4%; z-index:-3;
  background:url("../img/cutout/bg-paint.webp") center/cover no-repeat;
  transform:scale(1.06);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 78% at 50% 40%, rgba(255,255,240,.5), transparent 62%),
    linear-gradient(to bottom, rgba(190,220,120,.12) 0 60%, var(--paper) 99%);
}
.hero__deco{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero__deco img{
  position:absolute;
  filter:drop-shadow(0 12px 18px rgba(60,80,20,.22));
  will-change:transform;
}
.d-carriage{ left:-3%;  top:5%;   width:clamp(140px,20vw,300px); }
.d-ship    { right:2%;  top:3%;   width:clamp(120px,17vw,250px); }
.d-rose    { right:5%;  top:28%;  width:clamp(64px,8vw,116px); }
.d-cat     { right:-1%; top:50%;  width:clamp(96px,13vw,186px); }
.d-girl    { left:2%;   top:40%;  width:clamp(70px,9vw,128px); }
.d-king    { left:4%;   bottom:7%;width:clamp(96px,12vw,178px); }
.d-badger  { right:12%; bottom:32%;width:clamp(58px,7vw,102px); }
.d-bird    { right:21%; top:15%;  width:clamp(88px,11vw,164px); }
@media (max-width:900px){
  .d-rose,.d-badger,.d-bird{ display:none; }
  .d-carriage{ left:-12%; top:2%; }
  .d-ship{ right:-9%; top:1%; }
  .d-girl{ left:-5%; top:54%; }
  .d-king{ left:-7%; bottom:2%; }
  .d-cat{ right:-7%; top:62%; }
}

.hero__inner{
  --kids-w: clamp(260px, 33vw, 500px);
  position:relative; display:grid; grid-template-columns:minmax(0,1fr);
  justify-items:center; text-align:center;
}
.hero__inner > *{ max-width:100%; }
.hero__h1{ display:grid; justify-items:center; margin:0; font-size:inherit; font-weight:inherit; line-height:0; }

/* イラストは常に文字の背面へ */
.hero__kids{ position:relative; z-index:1; }
.hero__h1, .hero__tag, .hero__lead, .tickets, .countdown{ position:relative; z-index:2; }

.hero__kids{
  width:var(--kids-w);
  /* 脚のあたりにロゴ〜文字を重ねて、縦をコンパクトに */
  margin-bottom:calc(var(--kids-w) * -0.55);
  filter:drop-shadow(0 16px 22px rgba(60,80,20,.26));
}

.hero__title{ width:min(100%, 590px); filter:drop-shadow(0 8px 14px rgba(60,80,20,.28)); }
.hero__tag{ width:min(88%, 520px); margin-top:.75rem; filter:drop-shadow(0 5px 9px rgba(60,80,20,.28)); }

.hero__lead{
  margin-top:.7rem; max-width:46em; justify-self:center;
  font-weight:700; font-size:clamp(.74rem,1.5vw,.86rem); line-height:1.75;
  color:#332d1c;
  text-shadow:0 1px 0 #fffdf4, 0 0 5px #fffdf4, 0 0 11px #fffdf4, 0 0 20px rgba(255,253,244,.95);
  text-wrap:balance;
}

/* date tickets */
.tickets{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(.9rem,2.2vw,1.6rem);
  margin-top:clamp(1rem,2.2vw,1.5rem);
  width:100%; justify-self:stretch;
}
@media (max-width:600px){ .tickets{ gap:1.9rem; } }
.ticket{
  position:relative; display:grid; gap:.15rem; text-decoration:none;
  background:var(--paper-2); border:2.5px solid var(--ink); border-radius:var(--r-m);
  padding:.72rem clamp(1.1rem,2.6vw,1.7rem) .78rem;
  box-shadow:var(--shadow-hard);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  min-width:min(100%, 258px);
}
.ticket--numazu{ transform:rotate(-1.6deg); }
.ticket--mishima{ transform:rotate(1.4deg); }
.ticket:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:8px 10px 0 var(--ink); }
.ticket__city{
  font-family:var(--ff-round); font-weight:900; font-size:1.02rem; letter-spacing:.1em;
  display:flex; align-items:center; justify-content:center; gap:.55em;
}
.ticket__city::before,.ticket__city::after{ content:""; height:2px; width:1.4rem; background:currentColor; opacity:.32; }
.ticket__date{
  font-family:var(--ff-num); font-weight:800; font-size:clamp(2.5rem,6vw,3.35rem);
  line-height:.95; letter-spacing:-.035em; display:flex; align-items:baseline; justify-content:center; gap:.14em;
}
.ticket__dow{
  font-family:var(--ff-round); font-weight:900; font-size:.88rem; color:#fff;
  width:1.8em; height:1.8em; display:grid; place-content:center; border-radius:50%;
  transform:translateY(-.35em);
}
.ticket__place{ font-size:.8rem; font-weight:700; line-height:1.65; color:var(--ink-2); }
.ticket__time{ font-family:var(--ff-num); font-weight:600; font-size:.84rem; letter-spacing:.04em; color:var(--ink-2); }
.ticket--numazu .ticket__city, .ticket--numazu .ticket__date{ color:var(--lime-deep); }
.ticket--numazu .ticket__dow{ background:var(--lime-deep); }
.ticket--mishima .ticket__city, .ticket--mishima .ticket__date{ color:var(--cyan-deep); }
.ticket--mishima .ticket__dow{ background:var(--cyan-deep); }
.ticket__ribbon{
  position:absolute; top:-.8rem; left:50%; transform:translateX(-50%);
  background:var(--magenta); color:#fff; font-family:var(--ff-round); font-weight:700;
  font-size:.62rem; letter-spacing:.05em; padding:.24em 1em; border-radius:999px;
  border:2px solid var(--ink); white-space:nowrap;
}

.stamp{
  position:absolute; z-index:3; right:clamp(.4rem,2vw,3rem); bottom:clamp(4rem,9vw,5rem);
  display:grid; place-content:center; text-align:center; gap:.1rem;
  width:clamp(100px,12vw,142px); aspect-ratio:1; border-radius:50%;
  background:var(--magenta); color:#fff; border:3px solid var(--ink);
  box-shadow:var(--shadow-hard); transform:rotate(-9deg);
  font-family:var(--ff-round); font-weight:900; line-height:1.35;
  font-size:clamp(.76rem,1.45vw,.92rem); letter-spacing:.01em;
}
.stamp small{ display:block; font-size:.56em; font-weight:700; letter-spacing:0; opacity:.92; }
@media (max-width:900px){ .stamp{ position:static; margin:1.6rem auto 0; } }

.scroll-cue{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  font-family:var(--ff-num); font-size:.58rem; letter-spacing:.28em; color:var(--ink-2);
  display:grid; justify-items:center; gap:.4rem;
}
.scroll-cue i{ display:block; width:1.5px; height:40px; background:linear-gradient(var(--ink-2), transparent); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{
  0%{ transform:scaleY(0); transform-origin:top }
  45%{ transform:scaleY(1); transform-origin:top }
  55%{ transform:scaleY(1); transform-origin:bottom }
  100%{ transform:scaleY(0); transform-origin:bottom }
}
@media (max-width:900px){ .scroll-cue{ display:none; } }

/* countdown */
.countdown{
  display:flex; align-items:baseline; justify-content:center; gap:.5rem; flex-wrap:wrap;
  margin-top:.75rem; font-family:var(--ff-round); font-weight:700; font-size:.78rem;
  color:#3a3320; text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.countdown b{ font-family:var(--ff-num); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; color:var(--magenta); }

/* =========================================================
   ticker
   ========================================================= */
.ticker{
  position:relative; z-index:3; overflow:hidden;
  background:var(--ink); color:var(--paper);
  padding-block:.5rem;
}
.ticker__row{ display:flex; width:max-content; animation:slide 40s linear infinite; }
.ticker:hover .ticker__row{ animation-play-state:paused; }
.ticker span{
  font-family:var(--ff-round); font-weight:700; font-size:clamp(.8rem,1.7vw,.98rem);
  letter-spacing:.08em; padding-inline:1rem; white-space:nowrap;
  display:flex; align-items:center; gap:1rem;
}
.ticker span::after{ content:"✦"; color:var(--sun); font-size:.72em; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__row{ animation:none; } }

/* =========================================================
   generic section
   ========================================================= */
.sec{ position:relative; padding-block:clamp(4rem,9vw,7.5rem); }
.sec--paper{ background:var(--paper); }
.sec--cream{ background:var(--paper-3); }
.sec--ink{ background:var(--ink); color:var(--paper); }
.sec--ink .shead__en{ color:var(--sun); }
.sec--ink .shead__note{ color:rgba(251,245,230,.78); }

.shead{ display:grid; gap:.3rem; margin-bottom:clamp(2rem,4.5vw,3.4rem); }
.shead__en{
  font-family:var(--ff-num); font-weight:700; font-size:.7rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--lime-deep);
  display:flex; align-items:center; gap:.7rem;
}
.shead__en::before{ content:""; width:2.2rem; height:3px; border-radius:3px; background:currentColor; }
.shead__ja{
  font-family:var(--ff-round); font-weight:900; letter-spacing:.01em;
  font-size:clamp(1.65rem,4.5vw,2.65rem); line-height:1.4; text-wrap:balance;
  word-break:auto-phrase; line-break:strict;
  position:relative; z-index:0;
}
.shead__ja em{ font-style:normal; position:relative; white-space:nowrap; }
.shead__ja em::after{
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:.04em; height:.34em; z-index:-1;
  background:var(--sun); border-radius:.2em .5em .3em .25em; opacity:.6;
}
.shead__note{ font-size:.88rem; color:var(--ink-2); margin-top:.5rem; max-width:44em; text-wrap:pretty; word-break:auto-phrase; }
.shead--c{ justify-items:center; text-align:center; }
.shead--c .shead__en::before{ display:none; }

/* torn paper divider */
.tear{ display:block; width:100%; height:clamp(16px,2.6vw,34px); }

/* =========================================================
   about
   ========================================================= */
.about__grid{ display:grid; gap:clamp(2.4rem,5vw,4rem); grid-template-columns:1fr; }
@media (min-width:900px){ .about__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; } }
.about__copy p + p{ margin-top:1.05em; }
.about__copy p{ text-wrap:pretty; font-size:.92rem; }
.about__lead{ font-family:var(--ff-round); font-weight:700; font-size:clamp(1.05rem,2.4vw,1.32rem)!important; line-height:1.95; word-break:auto-phrase; }
.about__lead b{ color:var(--orange-deep); }

.about__media{ position:relative; padding-bottom:9%; }
.about__media img{ border-radius:var(--r-m); border:2.5px solid var(--ink); box-shadow:var(--shadow-hard); }
.about__media .m1{ transform:rotate(-1.5deg); }
.about__media .m2{ position:absolute; right:-3%; bottom:0; width:46%; transform:rotate(3deg); }


.pillars{ display:grid; gap:clamp(1.2rem,2.6vw,1.8rem); grid-template-columns:1fr; margin-top:clamp(2.6rem,5vw,3.6rem); }
@media (min-width:760px){ .pillars{ grid-template-columns:repeat(3,1fr); } }
.pillar{ background:var(--paper-2); border:2.5px solid var(--ink); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--shadow-hard); }
.pillar img{ aspect-ratio:16/10; object-fit:cover; width:100%; border-bottom:2.5px solid var(--ink); }
.pillar__b{ padding:1.1rem 1.2rem 1.35rem; }
.pillar__n{ font-family:var(--ff-num); font-weight:800; font-size:.76rem; letter-spacing:.1em; color:var(--magenta); }
.pillar h3{ font-family:var(--ff-round); font-weight:900; font-size:1.1rem; margin-block:.1rem .35rem; }
.pillar p{ font-size:.84rem; line-height:1.85; color:var(--ink-2); text-wrap:pretty; }

/* =========================================================
   venues
   ========================================================= */
.spread{ display:grid; gap:clamp(1.6rem,3vw,2.2rem); grid-template-columns:1fr; }
@media (min-width:940px){ .spread{ grid-template-columns:1fr 1fr; } }

.vcard{
  position:relative; background:var(--paper-2);
  border:3px solid var(--ink); border-radius:var(--r-l);
  padding:clamp(1.8rem,3.6vw,2.6rem) clamp(1.25rem,3vw,2.2rem) clamp(1.5rem,3vw,2.2rem);
  box-shadow:var(--shadow-hard);
  overflow:hidden;
}
.vcard::before{
  content:""; position:absolute; inset:0 0 auto; height:10px;
  background:repeating-linear-gradient(90deg, var(--c) 0 18px, transparent 18px 36px);
}
.vcard--numazu{ --c:var(--lime); }
.vcard--mishima{ --c:var(--cyan); }
.vcard__tape{ display:none; }
.vcard__no{ font-family:var(--ff-num); font-weight:800; font-size:.74rem; letter-spacing:.2em; color:var(--ink-3); }
.vcard__city{
  font-family:var(--ff-round); font-weight:900; line-height:1.15;
  font-size:clamp(1.85rem,5vw,2.5rem); margin-top:.05rem;
}
.vcard__city span{ font-family:var(--ff-num); font-size:.36em; letter-spacing:.14em; display:block; color:var(--ink-3); font-weight:600; }
.vcard__date{
  display:flex; align-items:flex-end; gap:.35rem; margin-block:.6rem .5rem;
  font-family:var(--ff-num); font-weight:800; letter-spacing:-.04em; line-height:.88;
  font-size:clamp(3.4rem,10vw,5.2rem);
}
.vcard--numazu .vcard__date{ color:var(--lime-deep); }
.vcard--mishima .vcard__date{ color:var(--cyan-deep); }
.vcard__date .y{ font-size:.23em; font-weight:700; letter-spacing:.04em; color:var(--ink-3); margin-bottom:.85em; }
.vcard__date .dow{
  font-family:var(--ff-round); font-weight:900; font-size:.22em; color:#fff;
  width:2em; height:2em; display:grid; place-content:center; border-radius:50%; margin-bottom:.5em;
}
.vcard--numazu .vcard__date .dow{ background:var(--lime-deep); }
.vcard--mishima .vcard__date .dow{ background:var(--cyan-deep); }
.vcard__date .dow b{ color:#fff; }
.vcard__hall{ font-family:var(--ff-round); font-weight:900; font-size:clamp(1.05rem,2.6vw,1.26rem); line-height:1.55; }
.vcard__hall small{ display:block; font-weight:700; font-size:.72em; color:var(--ink-2); }
.vcard__dl{ margin-top:1.1rem; border-top:2px dashed color-mix(in srgb,var(--ink) 28%, transparent); }
.vcard__dl > div{ display:grid; grid-template-columns:5.4em 1fr; gap:.7rem; padding:.6rem 0; border-bottom:2px dashed color-mix(in srgb,var(--ink) 16%, transparent); }
.vcard__dl dt{ font-size:.72rem; font-weight:700; color:#fff; background:var(--ink); border-radius:999px; height:1.9em; display:grid; place-content:center; align-self:start; margin-top:.28rem; }
.vcard__dl dd{ font-size:.86rem; line-height:1.75; }
.vcard__badge{
  display:inline-block; margin-top:1.1rem; background:var(--magenta); color:#fff;
  font-family:var(--ff-round); font-weight:700; font-size:.72rem; letter-spacing:.03em;
  padding:.4em 1em; border-radius:999px; border:2px solid var(--ink);
}
.vcard__deco{ position:absolute; right:-10px; bottom:-8px; width:clamp(66px,9vw,104px); opacity:.85; pointer-events:none; }

.free-note{
  margin-top:clamp(1.8rem,3.6vw,2.6rem); text-align:center;
  font-family:var(--ff-round); font-weight:900; font-size:clamp(1rem,2.6vw,1.28rem);
}
.free-note b{ background:var(--sun); padding:.12em .55em; border-radius:.4em; border:2.5px solid var(--ink); display:inline-block; }
.free-note small{ display:block; font-weight:700; font-size:.62em; color:var(--ink-2); margin-top:.6rem; }

/* =========================================================
   guests
   ========================================================= */
.filters{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:clamp(1.6rem,3.4vw,2.4rem); }
.filters button{
  background:var(--paper-2); border:2.5px solid var(--ink); border-radius:999px;
  padding:.5em 1.25em; font-family:var(--ff-round); font-weight:700; font-size:.85rem;
  cursor:pointer; box-shadow:3px 3px 0 var(--ink);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .25s, color .25s;
}
.filters button:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.filters button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.filters button[data-f="numazu"][aria-pressed="true"]{ background:var(--lime-deep); color:#fff; }
.filters button[data-f="mishima"][aria-pressed="true"]{ background:var(--cyan-deep); color:#fff; }

.guests{ display:grid; gap:clamp(.7rem,2.2vw,1.6rem); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:620px){ .guests{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:960px){ .guests{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.guest{
  display:grid; grid-template-rows:auto 1fr; background:var(--paper-2);
  border:2.5px solid var(--ink); border-radius:var(--r-m); overflow:hidden;
  box-shadow:var(--shadow-hard);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.guest:hover{ transform:translateY(-5px); box-shadow:7px 9px 0 var(--ink); }
.guest[hidden]{ display:none; }
.guest__pic{
  position:relative; aspect-ratio:1; overflow:hidden;
  border-bottom:2.5px solid var(--ink); background:var(--paper-3);
}
.guest__pic img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:scale .5s var(--ease);
}
.guest:hover .guest__pic img{ scale:1.04; }
.guest__pic--duo{ display:grid; grid-template-columns:1fr 1fr; }
.guest__pic--duo img{ border-right:2px solid var(--ink); }
.guest__pic--duo img:last-child{ border-right:0; }
.guest__venue{
  position:absolute; top:.55rem; left:.55rem; z-index:2;
  font-family:var(--ff-round); font-weight:700; font-size:.8rem; letter-spacing:.05em;
  color:#fff; padding:.3em .95em; border-radius:999px; border:2.5px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.guest--numazu .guest__venue{ background:var(--lime-deep); }
.guest--mishima .guest__venue{ background:var(--cyan-deep); }
.guest--both .guest__venue{ background:var(--orange-deep); }
.guest__b{ padding:.9rem 1rem 1.15rem; display:grid; align-content:start; gap:.28rem;
  background:var(--paper-2); }
.guest--numazu .guest__b{ background:var(--lime-pale); }
.guest--mishima .guest__b{ background:var(--cyan-pale); }
.guest__role{ font-size:.67rem; font-weight:700; letter-spacing:.03em; color:var(--magenta); line-height:1.5; }
.guest__name{ font-family:var(--ff-round); font-weight:900; font-size:1.02rem; line-height:1.4; }
.guest__name small{ font-size:.66em; font-weight:700; }
.guest__bio{ font-size:.77rem; line-height:1.8; color:var(--ink-2); text-wrap:pretty; }
@media (max-width:620px){
  .guest__b{ padding:.7rem .75rem .95rem; }
  .guest__name{ font-size:.92rem; }
  .guest__role{ font-size:.62rem; }
  .guest__bio{ font-size:.7rem; line-height:1.75; }
  .guest__venue{ font-size:.7rem; padding:.26em .7em; }
}

.mc-line{
  margin-top:clamp(1.6rem,3vw,2.2rem); text-align:center;
  font-family:var(--ff-round); font-weight:700; font-size:.92rem;
}
.mc-line b{ font-size:1.18em; }
.note{ margin-top:1.2rem; font-size:.75rem; color:var(--ink-3); text-align:center; text-wrap:pretty; }

/* =========================================================
   contents
   ========================================================= */
.conts{ display:grid; gap:clamp(1rem,2.2vw,1.5rem); grid-template-columns:1fr; }
@media (min-width:640px){ .conts{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .conts{ grid-template-columns:repeat(3,1fr); } }
.cont{
  position:relative; overflow:hidden; border:2.5px solid var(--ink); border-radius:var(--r-m);
  box-shadow:var(--shadow-hard); background:var(--ink); isolation:isolate;
  min-height:clamp(268px,25vw,330px); display:grid; align-content:end; padding:1.2rem 1.25rem 1.4rem; color:#fff;
}
.cont img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%; z-index:-2; transition:scale .6s var(--ease); }
.cont::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(20,15,8,.94) 4%, rgba(20,15,8,.78) 34%, rgba(20,15,8,.22) 70%, rgba(20,15,8,.06)); }
.cont:hover img{ scale:1.06; }
.cont__n{ font-family:var(--ff-num); font-weight:800; font-size:.7rem; letter-spacing:.18em; color:var(--sun); }
.cont h3{ font-family:var(--ff-round); font-weight:900; font-size:1.15rem; margin-block:.1rem .3rem; word-break:auto-phrase; }
.cont p{ font-size:.79rem; line-height:1.8; opacity:.93; text-wrap:pretty; }


/* =========================================================
   report link
   ========================================================= */
.about__report{ margin-top:1.6rem; }
.report-link{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  font-family:var(--ff-round); font-weight:700; font-size:.9rem;
  border-bottom:3px solid var(--sun); padding-bottom:.15em;
}
.report-link svg{ width:1em; height:1em; flex:0 0 auto; }

/* =========================================================
   access
   ========================================================= */
.acc{ display:grid; gap:clamp(1.6rem,3.4vw,2.4rem); grid-template-columns:1fr; }
@media (min-width:920px){ .acc{ grid-template-columns:1fr 1fr; } }
.acc__card{ background:var(--paper-2); border:2.5px solid var(--ink); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--shadow-hard); }
.acc__map{ aspect-ratio:16/10; background:var(--paper-3); border-bottom:2.5px solid var(--ink); }
.acc__map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.9); }
.acc__b{ padding:1.3rem 1.35rem 1.5rem; }
.acc__b h3{ font-family:var(--ff-round); font-weight:900; font-size:1.2rem; }
.acc__b h3 span{ display:inline-block; font-family:var(--ff-num); font-size:.6rem; letter-spacing:.15em; color:#fff; background:var(--ink); padding:.28em .8em; border-radius:999px; vertical-align:middle; margin-right:.6em; }
.acc__addr{ font-size:.86rem; margin-top:.5rem; }
.acc__ways{ margin-top:.9rem; display:grid; gap:.5rem; }
.acc__ways li{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; font-size:.82rem; line-height:1.75; align-items:start; }
.acc__ways b{ font-family:var(--ff-round); font-weight:700; font-size:.7rem; background:var(--paper-3); border:2px solid var(--ink); border-radius:999px; padding:.15em .8em; white-space:nowrap; margin-top:.15rem; }
.acc__link{ display:inline-flex; align-items:center; gap:.4em; margin-top:1rem; font-size:.82rem; font-weight:700; text-decoration:none; border-bottom:2px solid var(--cyan); }

/* =========================================================
   faq
   ========================================================= */
.faq{ display:grid; gap:.7rem; max-width:820px; margin-inline:auto; }
.faq details{
  background:var(--paper-2); border:2.5px solid var(--ink); border-radius:var(--r-m);
  box-shadow:3px 4px 0 var(--ink); overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:1rem 3.2rem 1rem 1.2rem; position:relative;
  font-family:var(--ff-round); font-weight:700; font-size:.96rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:1.3rem; top:50%; width:11px; height:11px;
  border-right:3px solid var(--ink); border-bottom:3px solid var(--ink);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-25%) rotate(225deg); }
.faq details[open] summary{ background:var(--sun); }
.faq__a{ padding:.9rem 1.2rem 1.2rem; font-size:.86rem; line-height:1.9; color:var(--ink-2); }

/* =========================================================
   flyer + info
   ========================================================= */
.flyer{ display:grid; gap:clamp(1.8rem,4vw,3.2rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:840px){ .flyer{ grid-template-columns:.8fr 1.2fr; } }
.flyer__btn{ border:0; background:none; padding:0; cursor:zoom-in; display:block; width:100%; }
.flyer__img{ border:3px solid var(--ink); border-radius:var(--r-s); box-shadow:var(--shadow-hard); transform:rotate(-1.4deg); background:#fff; width:100%; }
.flyer__b h3{ font-family:var(--ff-round); font-weight:900; font-size:clamp(1.3rem,3.2vw,1.8rem); line-height:1.5; }
.flyer__b p{ margin-top:.9rem; font-size:.88rem; color:var(--ink-2); text-wrap:pretty; }

.btn{
  display:inline-flex; align-items:center; gap:.55em; text-decoration:none;
  background:var(--sun); border:2.5px solid var(--ink); border-radius:999px;
  font-family:var(--ff-round); font-weight:900; font-size:.92rem;
  padding:.8em 1.6em; box-shadow:var(--shadow-hard); color:var(--ink);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  cursor:pointer;
}
.btn:hover{ transform:translate(3px,3px); box-shadow:2px 3px 0 var(--ink); }
.btn--magenta{ background:var(--magenta); color:#fff; }
.btn--ghost{ background:var(--paper-2); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }

.orgs{ display:grid; gap:.85rem; max-width:900px; margin-inline:auto; }
.orgs > div{ display:grid; grid-template-columns:5.6em 1fr; gap:1rem; align-items:start; }
.orgs dt{ font-family:var(--ff-round); font-weight:700; font-size:.75rem; text-align:center; border:2px solid currentColor; border-radius:999px; padding:.2em 0; margin-top:.35rem; }
.orgs dd{ font-size:.84rem; line-height:1.9; }

.contact{
  background:var(--paper-2); border:3px solid var(--ink); border-radius:var(--r-l);
  padding:clamp(1.7rem,4vw,2.8rem); box-shadow:var(--shadow-hard); text-align:center;
  max-width:760px; margin:clamp(2.4rem,5vw,3.6rem) auto 0; color:var(--ink);
}
.contact h3{ font-family:var(--ff-round); font-weight:900; font-size:clamp(1.15rem,3vw,1.45rem); }
.contact p{ font-size:.86rem; color:var(--ink-2); margin-top:.6rem; text-wrap:pretty; }
.contact__rows{ display:grid; gap:.5rem; margin-top:1.3rem; justify-items:center; }
.contact__rows a{ font-family:var(--ff-num); font-weight:700; font-size:1.12rem; text-decoration:none; border-bottom:2px solid var(--magenta); }

/* =========================================================
   footer
   ========================================================= */
.ft{ background:var(--ink); color:var(--paper); padding-block:clamp(3rem,6vw,4.5rem) 3rem; }
.ft__top{ display:grid; gap:2.2rem; align-items:start; }
@media (min-width:820px){ .ft__top{ grid-template-columns:1.15fr 1fr; } }
.ft__logo{ width:min(290px,78%); filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.ft__meta{ margin-top:1.1rem; font-size:.8rem; line-height:1.95; opacity:.85; }
.ft__links{ display:grid; gap:.5rem; align-content:start; }
.ft__links h4{ font-family:var(--ff-round); font-weight:700; font-size:.76rem; letter-spacing:.16em; color:var(--sun); margin-bottom:.2rem; }
.ft__links a{ font-size:.84rem; text-decoration:none; opacity:.88; display:inline-flex; gap:.4em; align-items:center; }
.ft__links a:hover{ opacity:1; text-decoration:underline; }
.ft__bottom{ margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(251,245,230,.22); display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; font-size:.72rem; opacity:.72; }

/* sticky mobile bar */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  display:none; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:stretch;
  background:var(--paper-2); border-top:3px solid var(--ink);
}
.mbar a{ text-decoration:none; padding:.5rem .3rem; text-align:center; border-right:2px solid var(--ink); }
.mbar a:last-child{ border-right:0; background:var(--magenta); color:#fff; display:grid; place-content:center; padding-inline:.85rem; font-family:var(--ff-round); font-weight:900; font-size:.78rem; white-space:nowrap; }
.mbar small{ display:block; font-size:.58rem; font-weight:700; letter-spacing:.08em; color:var(--ink-3); }
.mbar b{ font-family:var(--ff-num); font-weight:800; font-size:1.22rem; line-height:1.15; letter-spacing:-.02em; }
.mbar .n b{ color:var(--lime-deep); }
.mbar .m b{ color:var(--cyan-deep); }
@media (max-width:720px){ .mbar{ display:grid; } .ft{ padding-bottom:6.5rem; } html{ scroll-padding-top:76px; } }

/* lightbox */
dialog.lb{ border:0; padding:0; background:transparent; max-width:min(94vw,720px); max-height:92vh; overflow:visible; }
dialog.lb::backdrop{ background:rgba(24,18,10,.84); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.lb__in{ position:relative; }
dialog.lb img{ border:3px solid var(--ink); border-radius:8px; background:#fff; max-height:86vh; width:auto; margin-inline:auto; }
dialog.lb button{
  position:absolute; top:-16px; right:-16px; width:44px; height:44px; border-radius:50%;
  background:var(--paper-2); border:3px solid var(--ink); cursor:pointer; font-size:1.15rem; line-height:1;
  box-shadow:3px 3px 0 var(--ink);
}

/* =========================================================
   reveal
   ========================================================= */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s }
.rv-d4{ transition-delay:.32s } .rv-d5{ transition-delay:.4s } .rv-d6{ transition-delay:.48s }
.no-js .rv{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .hero__deco img{ transform:none!important; }
  .scroll-cue i{ animation:none; }
  .guest:hover, .ticket:hover, .btn:hover{ transform:none; }
}

/* =========================================================
   timetable
   ========================================================= */
.tt-grid{ display:grid; gap:clamp(1.6rem,3vw,2.2rem); grid-template-columns:1fr; }
@media (min-width:900px){ .tt-grid{ grid-template-columns:1fr 1fr; align-items:start; } }

.tt{
  position:relative; background:var(--paper-2);
  border:3px solid var(--ink); border-radius:var(--r-l);
  padding:clamp(1.5rem,3vw,2.1rem) clamp(1.1rem,2.6vw,1.9rem) clamp(1.4rem,2.6vw,1.9rem);
  box-shadow:var(--shadow-hard); overflow:hidden;
}
.tt::before{
  content:""; position:absolute; inset:0 0 auto; height:10px;
  background:repeating-linear-gradient(90deg, var(--c) 0 18px, transparent 18px 36px);
}
.tt--numazu{ --c:var(--lime); --deep:var(--lime-deep); }
.tt--mishima{ --c:var(--cyan); --deep:var(--cyan-deep); }

.tt__head{ padding-bottom:1rem; border-bottom:2px dashed color-mix(in srgb,var(--ink) 26%, transparent); }
.tt__no{ font-family:var(--ff-num); font-weight:800; font-size:.72rem; letter-spacing:.2em; color:var(--ink-3); }
.tt__city{
  font-family:var(--ff-round); font-weight:900; line-height:1.25;
  font-size:clamp(1.3rem,3.2vw,1.65rem); display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
}
.tt__city span{
  font-family:var(--ff-num); font-weight:800; font-size:.7em; letter-spacing:.02em;
  color:#fff; background:var(--deep); border:2px solid var(--ink); border-radius:999px; padding:.05em .7em;
}
.tt__hall{ font-size:.82rem; color:var(--ink-2); margin-top:.3rem; }

.tt__list{ margin-top:.3rem; }
.tt__list li{
  position:relative; display:grid; grid-template-columns:4.4em 1fr; gap:.9rem;
  padding:.75rem 0 .75rem .1rem;
  border-bottom:2px dashed color-mix(in srgb,var(--ink) 14%, transparent);
}
.tt__list li:last-child{ border-bottom:0; }
.tt__list time{
  font-family:var(--ff-num); font-weight:800; font-size:1.02rem; letter-spacing:-.01em;
  color:var(--deep); line-height:1.5;
}
.tt__list b{ display:block; font-family:var(--ff-round); font-weight:900; font-size:.94rem; line-height:1.5; word-break:auto-phrase; }
.tt__list span{ display:block; font-size:.8rem; line-height:1.7; color:var(--ink-2); margin-top:.1rem; }
.tt__list .is-key b{ position:relative; display:inline-block; }
.tt__list .is-key b::after{
  content:""; position:absolute; left:-.1em; right:-.1em; bottom:.04em; height:.36em; z-index:-1;
  background:var(--sun); border-radius:.2em .5em .3em .25em; opacity:.65;
}
.tt__list .is-key{ position:relative; z-index:0; }
.tt__list .is-rest{ opacity:.62; }
.tt__list .is-tbd b{ font-weight:700; font-size:.86rem; color:var(--ink-3); }
.tt__list .is-tbd time{ opacity:.5; }
.tt__list .is-rest b{ font-weight:700; font-size:.85rem; }

.tt__foot{
  margin-top:1.1rem; padding:.85rem 1rem; border-radius:14px;
  background:var(--paper-3); font-size:.8rem; line-height:1.8; word-break:auto-phrase;
}
.tt__foot b{ font-family:var(--ff-round); font-weight:900; }

.tt-notice{
  margin-top:clamp(1.6rem,3.2vw,2.4rem); max-width:900px; margin-inline:auto;
  background:var(--paper-2); border:2.5px dashed var(--ink); border-radius:var(--r-m);
  padding:1.1rem clamp(1.1rem,2.6vw,1.6rem); font-size:.85rem; line-height:1.9;
  word-break:auto-phrase;
}
.tt-notice b{
  display:block; font-family:var(--ff-round); font-weight:900; font-size:.95rem;
  margin-bottom:.2rem; color:var(--magenta);
}