/* ============================================================
   DELIVERY PARTY — DESIGN SYSTEM（UI全面刷新版）
   ベース：白 × YELLOW/PINK/BLUE/GREEN/ORANGE
   「街に突然イベントが現れたようなWebサイト」
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  --dp-yellow:#FFC531; --dp-yellow-deep:#F5A800;
  --dp-pink:#FF4D8D;   --dp-pink-deep:#E82870;
  --dp-blue:#2E7CFF;   --dp-blue-deep:#1B5FE0;
  --dp-green:#00C482;  --dp-green-deep:#00A56C;
  --dp-orange:#FF7A2F; --dp-orange-deep:#F05E0E;
  --dp-purple:#8B5CF6;

  --dp-ink:#221C3A;
  --dp-ink-soft:#4A4463;
  --dp-paper:#FFFDF6;
  --dp-paper-2:#FFF7E8;
  --dp-line:#E9E2D6;

  --acc:var(--dp-yellow); --acc-deep:var(--dp-yellow-deep); --acc-soft:#FFF3D1;

  --font-display:'Anton',sans-serif;
  --font-jp-head:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  --font-body:'Noto Sans JP',sans-serif;

  --radius:22px; --radius-lg:34px;
  --header-h:78px;
  --pad-x:clamp(20px,5vw,72px);

  /* エディタ COLORS パネル互換 */
  --red:var(--dp-pink); --blue:var(--dp-blue); --green:var(--dp-green);
  --soft:var(--dp-paper-2); --ink:var(--dp-ink);
}
[data-accent="yellow"]{--acc:var(--dp-yellow);--acc-deep:var(--dp-yellow-deep);--acc-soft:#FFF3D1}
[data-accent="pink"]  {--acc:var(--dp-pink);  --acc-deep:var(--dp-pink-deep);  --acc-soft:#FFE3EE}
[data-accent="blue"]  {--acc:var(--dp-blue);  --acc-deep:var(--dp-blue-deep);  --acc-soft:#E3EDFF}
[data-accent="green"] {--acc:var(--dp-green); --acc-deep:var(--dp-green-deep); --acc-soft:#DCF7EC}
[data-accent="orange"]{--acc:var(--dp-orange);--acc-deep:var(--dp-orange-deep);--acc-soft:#FFE8D8}
[data-accent="purple"]{--acc:var(--dp-purple);--acc-deep:#6D3FE0;--acc-soft:#EDE4FF}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:clamp(.95rem,1.15vw,1.05rem);
  line-height:1.9;color:var(--dp-ink);background:var(--dp-paper);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--dp-yellow);color:var(--dp-ink)}
h1,h2,h3{font-family:var(--font-jp-head);font-weight:900;line-height:1.25}
.en{font-family:var(--font-display);font-weight:400;line-height:1.05}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--pad-x)}
.lp-sec{position:relative}
.dp-sec-pad{padding-block:clamp(84px,11vw,150px)}
.center{text-align:center}
.hide-sp{display:initial}
.hide-pc{display:none}

/* 編集エンジンの画像方式（背景image div） */
.ph{background-size:cover;background-position:center;background-repeat:no-repeat}

.sec-label{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:.95rem;letter-spacing:.22em;
  margin-bottom:18px;
}
.sec-label::before{content:"";width:34px;height:12px;border-radius:99px;background:var(--acc);transform:rotate(-4deg)}
.giant{font-family:var(--font-display);font-size:clamp(2.6rem,8vw,6rem);line-height:.98;letter-spacing:.01em}
.huge-jp{font-family:var(--font-jp-head);font-weight:900;font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.3;letter-spacing:.02em}
.marker{background:linear-gradient(transparent 62%,var(--acc) 62%,var(--acc) 92%,transparent 92%)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-jp-head);font-weight:800;font-size:1.02rem;
  padding:1.02em 2em;border-radius:999px;
  background:var(--dp-ink);color:#fff;border:3px solid var(--dp-ink);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
}
.btn:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 8px 0 rgba(34,28,58,.85)}
.btn:active{transform:none;box-shadow:none}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(5px)}
.btn-acc{background:var(--acc);color:var(--dp-ink)}
.btn-white{background:#fff;color:var(--dp-ink)}
.btn-lg{font-size:1.14rem;padding:1.18em 2.5em}
.btn-sm{font-size:.88rem;padding:.68em 1.5em;border-width:2px}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.sticker{
  display:inline-block;font-family:var(--font-jp-head);font-weight:800;
  background:#fff;color:var(--dp-ink);
  padding:.42em 1.05em;border-radius:999px;border:3px solid var(--dp-ink);
  box-shadow:4px 5px 0 rgba(34,28,58,.9);transform:rotate(-3deg);
}
.sticker.alt{transform:rotate(2.5deg)}
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.confetti-piece{position:absolute;pointer-events:none;border-radius:2px}

/* ---------- 入場ゲート（ローディング） ---------- */
.dp-intro{
  position:fixed;inset:0;z-index:5000;background:var(--dp-yellow);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  transition:transform .7s cubic-bezier(.7,0,.2,1);
}
.dp-intro.done{transform:translateY(-101%)}
.dp-intro .gate{font-family:var(--font-display);font-size:clamp(2rem,8vw,5rem);letter-spacing:.04em;color:var(--dp-ink)}
.dp-intro .tick{font-family:var(--font-jp-head);font-weight:800;background:#fff;border:3px solid var(--dp-ink);border-radius:999px;padding:.4em 1.4em;box-shadow:4px 4px 0 var(--dp-ink);transform:rotate(-3deg)}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(16px,3vw,36px);
  transition:transform .3s,background .3s,box-shadow .3s;
}
.site-header.is-scrolled{background:rgba(255,253,246,.92);backdrop-filter:blur(12px);box-shadow:0 3px 0 var(--dp-ink)}
.site-header.is-hidden{transform:translateY(-110%)}
.site-logo{display:flex;align-items:center;gap:8px;cursor:pointer}
.site-logo__mark{
  font-family:var(--font-display);font-size:1.35rem;line-height:1.05;letter-spacing:.02em;
  color:var(--dp-ink);display:flex;flex-direction:column;
}
.site-logo__mark .lg2{color:var(--dp-pink-deep)}
.site-logo__sub{font-family:var(--font-jp-head);font-weight:700;font-size:.5rem;letter-spacing:.26em;color:var(--dp-ink-soft);display:block}
.brand-dot{width:13px;height:13px;border-radius:50%;background:var(--dp-pink);animation:dotpulse 2.4s infinite}
@keyframes dotpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5);background:var(--dp-yellow)}}
.hero:not(.x) ~ * .x{display:none}
.gnav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.gnav .nav-link{
  font-family:var(--font-display);font-size:.92rem;letter-spacing:.12em;position:relative;padding:6px 2px;color:var(--dp-ink);
}
.gnav .nav-link::after{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:8px;
  background:var(--u,var(--dp-yellow));z-index:-1;transform:scaleX(0) rotate(-1deg);transform-origin:left;transition:transform .22s;
}
.gnav .nav-link:hover::after{transform:scaleX(1) rotate(-1deg)}
.nav-cta{
  font-family:var(--font-display);letter-spacing:.06em;font-size:.92rem;
  background:var(--dp-pink);color:#fff;border:3px solid var(--dp-ink);
  padding:.6em 1.35em;border-radius:999px;box-shadow:4px 4px 0 var(--dp-ink);
  transition:transform .18s,box-shadow .18s;display:inline-block;
}
.nav-cta:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:7px 7px 0 var(--dp-ink)}
.header-contact{display:none}

.menu-toggle{
  display:none;width:54px;height:54px;border-radius:50%;
  background:var(--dp-ink);position:relative;z-index:1001;color:transparent;overflow:hidden;
}
.menu-toggle::before,.menu-toggle::after,.menu-toggle i{
  content:"";position:absolute;left:15px;right:15px;height:3px;background:#fff;border-radius:3px;transition:.3s;
}
.menu-toggle::before{top:19px}
.menu-toggle i{top:26px;display:block}
.menu-toggle::after{top:33px}
body.menu-open .menu-toggle{background:var(--dp-pink)}
body.menu-open .menu-toggle::before{top:26px;transform:rotate(45deg)}
body.menu-open .menu-toggle i{opacity:0}
body.menu-open .menu-toggle::after{top:26px;transform:rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:1000;background:var(--dp-yellow);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--pad-x) 40px;
  clip-path:circle(0 at calc(100% - 43px) 43px);
  transition:clip-path .55s cubic-bezier(.7,0,.2,1);visibility:hidden;
}
body.menu-open .mobile-menu{clip-path:circle(160% at calc(100% - 43px) 43px);visibility:visible}
.mobile-menu .mm-link{
  font-family:var(--font-display);font-size:clamp(2rem,8.5vw,3.2rem);line-height:1.3;
  display:flex;align-items:baseline;gap:14px;color:var(--dp-ink);
  opacity:0;transform:translateX(-30px) rotate(-1deg);transition:.4s;
}
body.menu-open .mobile-menu .mm-link{opacity:1;transform:none}
.mobile-menu .mm-link small{font-family:var(--font-jp-head);font-weight:700;font-size:.82rem}
.mobile-menu .mm-link:active,.mobile-menu .mm-link:hover{color:var(--dp-pink-deep)}
.mm-foot{margin-top:30px}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;white-space:nowrap;border-block:3px solid var(--dp-ink);
  background:var(--mq,var(--dp-yellow));color:var(--dp-ink);padding-block:.5em;position:relative;z-index:4;
}
.marquee.tilt{transform:rotate(-1.6deg) scale(1.02)}
.marquee .track{display:inline-flex;animation:marq 26s linear infinite;will-change:transform}
.marquee span{font-family:var(--font-display);font-size:clamp(1.15rem,2.5vw,1.9rem);letter-spacing:.08em;padding-inline:.55em}
.marquee span::after{content:"●";font-size:.45em;vertical-align:middle;margin-left:1.1em}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee.rev .track{animation-direction:reverse}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--dp-ink);
}
.hero-media{position:absolute;inset:0}
.hero__bg,.hero-sl2,.hero-sl3,.hero-sl4{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);transition:opacity 1.1s ease,transform 6.5s linear;
}
.hero__bg.on,.hero-sl2.on,.hero-sl3.on,.hero-sl4.on{opacity:1;transform:scale(1)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.hero.has-video .hero-video{display:block}
.hero.has-video .hero__bg,.hero.has-video .hero-sl2,.hero.has-video .hero-sl3,.hero.has-video .hero-sl4{display:none}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,18,48,.42),rgba(24,18,48,.18) 40%,rgba(24,18,48,.6));z-index:1;pointer-events:none}
.hero .container{position:relative;z-index:3;text-align:center;color:#fff;padding:120px var(--pad-x) 110px;width:100%}
.hero-sub{
  font-family:var(--font-display);letter-spacing:.32em;font-size:clamp(.68rem,1.4vw,.95rem);
  display:inline-block;padding:.5em 1.5em;border:2px solid #fff;border-radius:999px;margin-bottom:24px;
}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(3.4rem,12.5vw,10.5rem);line-height:.92;letter-spacing:.01em;color:#fff}
.hero h1 .hrow{display:block;overflow:hidden}
.hero h1 .hrow i{display:inline-block;font-style:normal;transform:translateY(110%);animation:heroup .9s cubic-bezier(.2,.9,.3,1) forwards}
.hero h1 .hrow:nth-child(2) i{animation-delay:.12s;color:var(--dp-yellow)}
@keyframes heroup{to{transform:translateY(0)}}
#heroCopy{
  font-family:var(--font-jp-head);font-weight:900;
  font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:1.5;margin-top:28px;
  text-shadow:0 4px 30px rgba(24,18,48,.55);
}
.hero-ctas{margin-top:36px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:3}
.scroll-cue{
  position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:4;
  color:#fff;font-family:var(--font-display);letter-spacing:.3em;font-size:.72rem;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue .ball{width:12px;height:12px;border-radius:50%;background:var(--dp-yellow);animation:cuejump 1.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cuejump{0%,100%{transform:translateY(0)}50%{transform:translateY(14px);background:var(--dp-pink)}}
.hero-marquee{position:absolute;left:-2%;right:-2%;bottom:0;z-index:5}
.hero .confetti-piece{animation:cfall linear infinite;z-index:2}
@keyframes cfall{0%{transform:translateY(-6vh) rotate(0)}100%{transform:translateY(106vh) rotate(720deg)}}

/* ヒーロー周りのポラロイド */
.hero-polaroids{position:absolute;inset:0;z-index:2;pointer-events:none}
.hp{
  position:absolute;width:clamp(104px,13vw,188px);aspect-ratio:3/4;
  background-size:cover;background-position:center;
  border:7px solid #fff;outline:3px solid var(--dp-ink);
  box-shadow:8px 10px 0 rgba(24,18,48,.45);
  animation:hp-float 5.2s ease-in-out infinite;
}
.hp-a{left:3%;top:20%;transform:rotate(-11deg)}
.hp-b{right:4%;top:16%;transform:rotate(9deg);animation-delay:.8s}
.hp-c{left:7%;bottom:16%;transform:rotate(7deg);animation-delay:1.6s}
.hp-d{right:7%;bottom:18%;transform:rotate(-8deg);animation-delay:2.2s}
@keyframes hp-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.hero-live{
  position:absolute;top:calc(var(--header-h) + 18px);left:50%;transform:translateX(-50%);
  z-index:4;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--dp-ink);border:3px solid var(--dp-ink);
  border-radius:999px;padding:.38em 1.1em;font-weight:900;font-size:.78rem;
  box-shadow:4px 4px 0 var(--dp-pink);
}
.hero-live i{
  width:9px;height:9px;border-radius:50%;background:var(--dp-pink);
  animation:liveblink 1s ease-in-out infinite;
}
@keyframes liveblink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- ガーランド／フィルム／ポラロイド ---------- */
.bunting{
  display:flex;justify-content:center;height:38px;overflow:hidden;
  pointer-events:none;position:relative;z-index:6;margin-top:-2px;
  background:transparent;
}
.bunting i{
  width:26px;height:38px;flex:0 0 26px;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  animation:bunting-sway 2.6s ease-in-out infinite;
}
.bunting i:nth-child(5n+1){background:var(--dp-yellow);animation-delay:0s}
.bunting i:nth-child(5n+2){background:var(--dp-pink);animation-delay:.15s}
.bunting i:nth-child(5n+3){background:var(--dp-blue);animation-delay:.3s}
.bunting i:nth-child(5n+4){background:var(--dp-green);animation-delay:.1s}
.bunting i:nth-child(5n){background:var(--dp-orange);animation-delay:.22s}
@keyframes bunting-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

.photo-film{
  overflow:hidden;background:var(--dp-ink);padding:16px 0 18px;
  border-block:5px solid var(--dp-yellow);position:relative;
}
.photo-film::before,.photo-film::after{
  content:"";position:absolute;top:0;bottom:0;width:48px;z-index:2;pointer-events:none;
}
.photo-film::before{left:0;background:linear-gradient(90deg,var(--dp-ink),transparent)}
.photo-film::after{right:0;background:linear-gradient(270deg,var(--dp-ink),transparent)}
.photo-film__track{
  display:flex;gap:12px;width:max-content;animation:filmrun 42s linear infinite;will-change:transform;
}
.photo-film.rev .photo-film__track{animation-direction:reverse;animation-duration:48s}
.pf-shot{
  flex:0 0 210px;height:132px;border-radius:10px;
  border:5px solid #fff;box-shadow:0 0 0 3px var(--dp-ink);
  background-size:cover;background-position:center;
  transform:rotate(var(--r,0deg));
}
@keyframes filmrun{to{transform:translateX(-50%)}}

.polaroid-wall{
  display:flex;flex-wrap:wrap;justify-content:center;gap:22px 26px;
  padding:8px 0 12px;
}
.polaroid{
  background:#fff;padding:10px 10px 34px;width:min(230px,44vw);
  border:3px solid var(--dp-ink);border-radius:4px;
  box-shadow:7px 9px 0 rgba(34,28,58,.88);
  transform:rotate(var(--r,-2deg));
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.polaroid:hover{transform:translateY(-12px) rotate(0) scale(1.05);z-index:3}
.polaroid .ph{aspect-ratio:4/3;width:100%;border:2px solid var(--dp-ink);border-radius:2px}
.polaroid figcaption{
  font-family:var(--font-display);letter-spacing:.1em;
  font-size:.78rem;text-align:center;margin-top:12px;color:var(--dp-ink);
}
.polaroid .tape{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:68px;height:18px;background:rgba(255,197,49,.72);border:2px solid var(--dp-ink);
}

.food-stack{position:relative;padding:36px 28px 44px 10px}
.food-stack .polaroid{position:absolute;width:42%;z-index:1}
.food-stack .p1{top:-8px;left:-4%;}
.food-stack .p2{bottom:4px;right:-2%;}

.join-polaroids{display:flex;gap:12px;margin-top:22px}
.join-polaroids .polaroid{width:46%;padding:8px 8px 28px}

.balloon-cluster{
  position:absolute;pointer-events:none;z-index:1;
  font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;
  animation:hp-float 4.8s ease-in-out infinite;
  filter:drop-shadow(3px 4px 0 rgba(34,28,58,.25));
}

.sticker-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.sticker-rain span{
  position:absolute;font-size:1.4rem;opacity:.28;
  animation:sticker-drift 16s linear infinite;
}
@keyframes sticker-drift{0%{transform:translateY(-10%) rotate(0)}100%{transform:translateY(110vh) rotate(240deg)}}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(34px)}
.rv.rv-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1)}
.rv-rot{opacity:0;transform:translateY(40px) rotate(3deg)}
.rv-rot.rv-in{opacity:1;transform:none;transition:.75s cubic-bezier(.2,.9,.3,1)}
.ghost-word{
  position:absolute;white-space:nowrap;pointer-events:none;z-index:0;
  font-family:var(--font-display);font-size:clamp(6rem,22vw,19rem);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(34,28,58,.12);will-change:transform;
}

/* ---------- WHAT WE DO ---------- */
.wwd-panel{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);
  align-items:center;padding-block:clamp(40px,6vw,80px);
}
.wwd-panel:nth-child(even){direction:rtl}
.wwd-panel:nth-child(even)>*{direction:ltr}
.wwd-num{
  font-family:var(--font-display);font-size:1.05rem;letter-spacing:.2em;
  display:inline-block;background:var(--acc);border:3px solid var(--dp-ink);
  padding:.32em 1em;border-radius:999px;box-shadow:4px 4px 0 var(--dp-ink);margin-bottom:16px;
}
.wwd-word{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);line-height:1}
.wwd-body h3{font-size:clamp(1.25rem,2.4vw,1.75rem);margin:8px 0 4px}
.wwd-catch{font-family:var(--font-jp-head);font-weight:800;font-size:clamp(1.05rem,2vw,1.35rem);color:var(--acc-deep);margin-bottom:12px}
.wwd-media-wrap{position:relative}
.wwd-media{border-radius:var(--radius-lg);border:3px solid var(--dp-ink);box-shadow:10px 12px 0 var(--acc);width:100%;aspect-ratio:4/3}
.wwd-media-wrap .sticker{position:absolute;top:-16px;right:-6px}
.wwd-link{margin-top:16px}

/* ---------- EVENTS ---------- */
.ev-scroller{
  display:flex;gap:clamp(16px,2vw,28px);
  overflow-x:auto;padding:26px var(--pad-x) 42px;
  scroll-snap-type:x mandatory;cursor:grab;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ev-scroller::-webkit-scrollbar{display:none}
.ev-scroller.dragging{cursor:grabbing;scroll-snap-type:none}
.ev-card{
  flex:0 0 clamp(275px,27vw,350px);scroll-snap-align:start;
  background:#fff;border:3px solid var(--dp-ink);border-radius:var(--radius);
  overflow:hidden;position:relative;box-shadow:0 6px 0 rgba(34,28,58,.85);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
  transform:rotate(var(--tilt,0deg));cursor:pointer;
}
.ev-card:nth-child(odd){--tilt:-.8deg}
.ev-card:nth-child(even){--tilt:.8deg}
.ev-card:hover{transform:translateY(-8px) rotate(0);box-shadow:0 14px 0 var(--acc)}
.ev-media{aspect-ratio:16/10;width:100%;border-bottom:3px solid var(--dp-ink)}
.ev-body{padding:16px 20px 20px}
.ev-body h3{font-size:1.06rem;line-height:1.5;margin-bottom:8px}
.ev-body p{font-size:.85rem;color:var(--dp-ink-soft)}
.ev-body b{color:var(--dp-ink)}
.st-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.1em;
  color:#fff;background:var(--dp-green);border:2.5px solid var(--dp-ink);
  padding:.32em .95em;border-radius:999px;transform:rotate(-4deg);
  box-shadow:3px 3px 0 rgba(34,28,58,.85);
}
.st-pink{background:var(--dp-pink)}
.st-blue{background:var(--dp-blue)}
.st-gray{background:#9A94AC}
.st-orange{background:var(--dp-orange)}

/* イベント詳細モーダル */
.ev-modal{
  position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;padding:20px;
}
.ev-modal.open{display:flex}
.ev-modal__bg{position:absolute;inset:0;background:rgba(24,18,48,.72)}
.ev-modal__box{
  position:relative;background:var(--dp-paper);border:3px solid var(--dp-ink);border-radius:var(--radius-lg);
  max-width:680px;width:100%;max-height:86svh;overflow:auto;padding:clamp(24px,4vw,44px);
  box-shadow:0 14px 0 rgba(34,28,58,.85);
}
.ev-modal__close{
  position:sticky;top:0;float:right;width:44px;height:44px;border-radius:50%;
  background:var(--dp-ink);color:#fff;font-size:1.1rem;font-weight:900;z-index:2;
}
.ev-detail h4{font-size:1.3rem;margin-bottom:10px}
.ev-detail dl{margin:14px 0}
.ev-detail dt{font-weight:900;color:var(--acc-deep);margin-top:12px;font-family:var(--font-jp-head)}
.ev-detail dd{margin:0}

/* ---------- JOIN ---------- */
#join{background:var(--dp-pink);color:#fff;overflow:hidden}
#join .sec-label{color:#fff}
#join .sec-label::before{background:var(--dp-ink)}
.join-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:2}
.join-lines{font-family:var(--font-jp-head);font-weight:900;font-size:clamp(1.4rem,3.2vw,2.2rem);line-height:2;letter-spacing:.05em}
.join-lines .pop{display:inline-block;background:#fff;color:var(--dp-pink-deep);padding:.03em .42em;border-radius:12px;transform:rotate(-2deg);margin:.08em 0}
.join-photo{border-radius:var(--radius-lg);border:3px solid var(--dp-ink);box-shadow:10px 12px 0 var(--dp-ink);width:100%;aspect-ratio:4/3}

/* ---------- ORGANIZER ---------- */
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.type-card{
  position:relative;border-radius:var(--radius);overflow:hidden;border:3px solid var(--dp-ink);
  aspect-ratio:4/5;display:flex;align-items:flex-end;cursor:pointer;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.tc-media{position:absolute;inset:0;transition:transform .5s}
.type-card:hover{transform:translateY(-8px) rotate(-1deg)}
.type-card:hover .tc-media{transform:scale(1.07)}
.t-label{
  position:relative;z-index:2;width:100%;padding:14px 16px;
  background:linear-gradient(transparent,rgba(24,18,48,.88));color:#fff;
}
.t-label .en{font-size:1.2rem;display:block}
.t-label small{font-weight:700;font-size:.78rem}

/* ---------- PROJECTS ---------- */
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.pj-card{
  background:#fff;border:3px solid var(--dp-ink);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 6px 0 rgba(34,28,58,.85);cursor:pointer;position:relative;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
  transform:rotate(var(--tilt,0));
}
.pj-card:nth-child(1){--tilt:-.7deg}
.pj-card:nth-child(3){--tilt:.7deg}
.pj-card:hover{transform:translateY(-8px);box-shadow:0 14px 0 var(--acc)}
.pj-media{aspect-ratio:4/3;width:100%;border-bottom:3px solid var(--dp-ink)}
.pj-body{padding:16px 20px 20px}
.pj-body h3{font-size:1.02rem;line-height:1.5;margin-bottom:6px}
.pj-body p{font-size:.82rem;color:var(--dp-ink-soft)}
.pj-more{
  font-family:var(--font-display);font-size:.8rem;letter-spacing:.1em;
  display:inline-block;margin-top:10px;color:var(--acc-deep);
}
/* CASE STUDY ストーリー（モーダル内） */
.story-step{position:relative;padding:20px 22px 20px 84px;background:#fff;border:3px solid var(--dp-ink);border-radius:var(--radius);margin-bottom:26px}
.story-step::after{content:"↓";font-family:var(--font-display);font-size:1.4rem;position:absolute;left:50%;bottom:-30px;transform:translateX(-50%)}
.story-step:last-child::after{display:none}
.story-step .tag{
  position:absolute;left:14px;top:18px;font-family:var(--font-display);font-size:.72rem;letter-spacing:.06em;
  background:var(--acc);border:2.5px solid var(--dp-ink);border-radius:999px;padding:.35em .8em;transform:rotate(-4deg);
}
.story-step h5{font-family:var(--font-jp-head);font-weight:900;margin-bottom:4px}
.story-step p{font-size:.88rem}

/* ---------- NUMBERS ---------- */
.num-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(16px,2vw,28px)}
.num-card{
  background:#fff;border:3px solid var(--dp-ink);border-radius:var(--radius);
  padding:28px 18px;text-align:center;box-shadow:0 6px 0 rgba(34,28,58,.85);
  transform:rotate(var(--tilt,0));
}
.num-card:nth-child(3n+1){--tilt:-1deg}
.num-card:nth-child(3n){--tilt:1deg}
.num-val{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;color:var(--acc-deep)}
.num-val .unit{font-size:.4em;font-family:var(--font-jp-head);font-weight:900;color:var(--dp-ink)}
.num-label{font-weight:800;margin-top:8px;font-size:.92rem}
.num-card small{color:var(--dp-ink-soft);font-size:.75rem}

/* ---------- SYSTEM ---------- */
#system{background:var(--dp-green);color:#fff}
#system .sec-label{color:#fff}
#system .sec-label::before{background:var(--dp-ink)}
.sys-mock{
  background:#fff;color:var(--dp-ink);border:3px solid var(--dp-ink);border-radius:var(--radius-lg);
  box-shadow:0 18px 50px rgba(20,60,45,.3),0 10px 0 rgba(34,28,58,.85);
  overflow:hidden;max-width:880px;margin-inline:auto;position:relative;z-index:2;text-align:left;
}
.sys-bar{display:flex;gap:8px;align-items:center;background:var(--dp-ink);padding:12px 18px}
.sys-bar i{width:12px;height:12px;border-radius:50%}
.sys-bar i:nth-child(1){background:var(--dp-pink)}
.sys-bar i:nth-child(2){background:var(--dp-yellow)}
.sys-bar i:nth-child(3){background:var(--dp-green)}
.sys-bar span{color:#fff;font-family:var(--font-display);letter-spacing:.15em;font-size:.72rem;margin-left:8px}
.sys-body{display:grid;grid-template-columns:190px 1fr;min-height:320px}
.sys-side{background:var(--dp-paper-2);border-right:3px solid var(--dp-ink);padding:16px 0}
.sys-side div{padding:9px 18px;font-weight:800;font-size:.82rem}
.sys-side div.on{background:var(--dp-green);color:#fff}
.sys-main{padding:20px}
.sys-main .srow{display:flex;justify-content:space-between;align-items:center;border:2.5px solid var(--dp-line);border-radius:14px;padding:11px 15px;margin-bottom:9px;font-size:.83rem;font-weight:700;gap:10px}
.sys-main .ok{color:var(--dp-green-deep);font-weight:900;white-space:nowrap}
.sys-main .ng{color:var(--dp-orange-deep);font-weight:900;white-space:nowrap}
.float-chip{
  position:absolute;font-weight:900;font-size:.82rem;color:var(--dp-ink);
  background:#fff;border:3px solid var(--dp-ink);border-radius:999px;padding:.45em 1.1em;
  box-shadow:4px 4px 0 rgba(34,28,58,.85);z-index:3;animation:floaty 4.5s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0))}50%{transform:translateY(-12px) rotate(var(--r,0))}}
.sys-flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:46px}
.sys-flow .step{
  font-family:var(--font-jp-head);font-weight:900;font-size:clamp(.95rem,2vw,1.25rem);color:var(--dp-ink);
  background:#fff;border:3px solid var(--dp-ink);border-radius:999px;padding:.55em 1.5em;
  box-shadow:0 5px 0 rgba(34,28,58,.85);margin:8px 4px;
}
.sys-flow .fa{font-family:var(--font-display);font-size:1.3rem;margin-inline:6px;color:#fff}

/* ---------- FOOD ---------- */
.food-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:2}
.food-photo{border-radius:var(--radius-lg);border:3px solid var(--dp-ink);box-shadow:10px 12px 0 var(--dp-orange);width:100%;aspect-ratio:4/3}

/* ---------- NEWS ---------- */
.news-list{max-width:860px;margin-inline:auto}
.news-list .n-item,.news-list>div{padding:18px 8px;border-bottom:3px dashed var(--dp-line)}
.news-list time,.news-list .nd{font-family:var(--font-display);font-size:.88rem;color:var(--dp-ink-soft);margin-right:14px}
.news-list .chip{
  font-size:.7rem;font-weight:700;padding:.22em .9em;border-radius:999px;
  background:var(--dp-paper-2);border:2px solid var(--dp-ink);margin-right:10px;display:inline-block;
}
.news-list b{font-weight:800}

/* ---------- CONTACT ---------- */
.contact-strip{background:var(--dp-paper-2);overflow:hidden}
.cv-q{font-family:var(--font-jp-head);font-weight:900;font-size:clamp(1.5rem,3.6vw,2.5rem);text-align:center;margin:6px 0 30px}
.cv-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:960px;margin-inline:auto}
.cv-choice{
  font-family:var(--font-jp-head);font-weight:800;font-size:.95rem;line-height:1.5;
  background:#fff;border:3px solid var(--dp-ink);border-radius:var(--radius);
  padding:20px 14px;text-align:center;box-shadow:0 6px 0 rgba(34,28,58,.85);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .18s;
  display:flex;flex-direction:column;gap:8px;align-items:center;color:var(--dp-ink);
}
.cv-choice .ico{font-size:1.8rem;line-height:1}
.cv-choice:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 12px 0 var(--dp-yellow)}
.cv-choice.is-on{background:var(--dp-yellow)}
.ct-form-wrap{max-width:720px;margin:40px auto 0}
.ct-form{display:flex;flex-direction:column;gap:14px}
.ct-form input,.ct-form textarea,.ct-form select{
  width:100%;font-family:var(--font-body);font-size:1rem;
  padding:.9em 1.2em;border:3px solid var(--dp-ink);border-radius:18px;background:#fff;color:var(--dp-ink);
}
.ct-form input:focus,.ct-form textarea:focus{outline:3px solid var(--dp-yellow);outline-offset:2px}
.ct-submit{
  font-family:var(--font-jp-head);font-weight:800;font-size:1.1rem;
  background:var(--dp-pink);color:#fff;border:3px solid var(--dp-ink);border-radius:999px;
  padding:1em 2.4em;align-self:center;box-shadow:0 6px 0 rgba(34,28,58,.85);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
}
.ct-submit:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 10px 0 rgba(34,28,58,.85)}
.ct-form small{text-align:center;color:var(--dp-ink-soft)}
.ct-side{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.ct-tel{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  background:#fff;border:3px solid var(--dp-ink);border-radius:var(--radius);
  padding:16px 30px;box-shadow:0 6px 0 rgba(34,28,58,.85);
  transition:transform .18s;
}
.ct-tel:hover{transform:translateY(-4px)}
.ct-tel b{font-family:var(--font-display);font-size:.75rem;letter-spacing:.2em;color:var(--dp-pink-deep)}
.ct-tel strong{font-family:var(--font-display);font-size:1.5rem}
.ct-tel span{font-size:.72rem;color:var(--dp-ink-soft)}
.btn--line{background:#06C755;color:#fff;border-color:var(--dp-ink)}
.btn--line[href="#"]{display:none}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--dp-ink);color:#fff;position:relative;overflow:hidden}
.foot-party{text-align:center;padding:clamp(70px,10vw,130px) var(--pad-x) clamp(36px,5vw,60px)}
#footParty{
  font-family:var(--font-display);font-size:clamp(2.6rem,9vw,7rem);line-height:1.04;color:#fff;
}
#footParty .fy{color:var(--dp-yellow)}
#footParty .fp{color:var(--dp-pink)}
.foot-nav{
  display:flex;justify-content:center;gap:clamp(14px,3vw,38px);flex-wrap:wrap;
  padding:0 var(--pad-x) 38px;font-family:var(--font-display);letter-spacing:.12em;font-size:.88rem;
}
.foot-nav a{opacity:.85;padding:6px}
.foot-nav a:hover{opacity:1;color:var(--dp-yellow)}
.foot-info{
  border-top:1px solid rgba(255,255,255,.18);
  padding:26px var(--pad-x) 120px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.78rem;color:#B9B2D4;position:relative;z-index:2;
}
.foot-info a:hover{color:#fff}
.foot-ground{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;align-items:flex-end;overflow:hidden;pointer-events:none}
.foot-ground i{flex:1;height:26px;border-radius:99px 99px 0 0}
.foot-ground i:nth-child(5n+1){background:var(--dp-yellow);height:34px}
.foot-ground i:nth-child(5n+2){background:var(--dp-pink);height:22px}
.foot-ground i:nth-child(5n+3){background:var(--dp-blue);height:40px}
.foot-ground i:nth-child(5n+4){background:var(--dp-green);height:18px}
.foot-ground i:nth-child(5n){background:var(--dp-orange);height:30px}

/* ---------- FLOAT ---------- */
.lp-float{
  position:fixed;right:16px;bottom:16px;z-index:800;display:flex;flex-direction:column;gap:10px;
}
.lp-float a{
  font-family:var(--font-jp-head);font-weight:800;font-size:.9rem;text-align:center;
  border-radius:999px;padding:.8em 1.6em;border:3px solid var(--dp-ink);
  box-shadow:0 5px 0 rgba(34,28,58,.85);transition:transform .15s;
}
.lp-float a:hover{transform:translateY(-3px)}
.lp-float .f-contact{background:var(--dp-pink);color:#fff;font-family:var(--font-display);letter-spacing:.08em}
.lp-float .f-line{background:#06C755;color:#fff}
.lp-float .f-tel{background:#fff;color:var(--dp-ink)}

/* ---------- fx ---------- */
#fxCanvas{position:fixed;inset:0;pointer-events:none;z-index:2000}
.tbl-scroll{overflow-x:auto}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .type-grid{grid-template-columns:repeat(2,1fr)}
  .pj-grid{grid-template-columns:1fr 1fr}
  .sys-body{grid-template-columns:1fr}
  .sys-side{display:flex;overflow-x:auto;border-right:none;border-bottom:3px solid var(--dp-ink);padding:0}
  .sys-side div{white-space:nowrap}
}
@media(max-width:860px){
  :root{--header-h:66px}
  .gnav .nav-link,.gnav .nav-cta{display:none}
  .menu-toggle{display:block}
  .hero-polaroids .hp-c,.hero-polaroids .hp-d{display:none}
  .hp{width:86px;border-width:5px}
  .hero-live{font-size:.68rem;padding:.3em .85em}
  .food-stack{padding:0}
  .food-stack .polaroid{position:relative;width:48%;inset:auto}
  .wwd-panel{grid-template-columns:1fr}
  .wwd-panel:nth-child(even){direction:ltr}
  .join-grid,.food-grid{grid-template-columns:1fr}
  .cv-choices{grid-template-columns:repeat(2,1fr)}
  .hide-sp{display:none}
  .hide-pc{display:initial}
  .hero-ctas .btn{width:min(100%,340px)}
  .num-grid{grid-template-columns:repeat(2,1fr)}
  .pj-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .type-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cv-choices{grid-template-columns:1fr}
  .ev-card{flex-basis:82vw}
  .foot-info{flex-direction:column}
  .story-step{padding:60px 20px 20px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv-rot{opacity:1!important;transform:none!important}
  .marquee .track{animation:none;transform:none}
  .hero h1 .hrow i{animation:none;transform:none}
  .float-chip,.scroll-cue .ball,.brand-dot{animation:none}
  .hero .confetti-piece{display:none}
  #fxCanvas{display:none}
  .dp-intro{display:none}
  .bunting i,.hp,.balloon-cluster,.sticker-rain{animation:none}
  .photo-film__track{animation:none}
}