/* =====================================================================
   スナックいわき — style.css  (v2 : 夜の海グラデーション)
   ロゴブルー #025D94 から 深い夜の海 #03131f へ、一続きに沈む。
   文字はオフホワイト、灯りはアンバー。Mobile-first。
   ===================================================================== */

:root{
  --off:#F7F6F2;
  --dim:rgba(247,246,242,.66);
  --faint:rgba(247,246,242,.34);
  --line:rgba(247,246,242,.18);
  --amber:#F6D79A;
  --amber-soft:rgba(246,215,154,.5);
  --amber-glow:rgba(246,215,154,.28);

  /* 海の深さスケール（同一色相で深くなる） */
  --sea-surface:#0A6FAA;
  --sea-1:#025D94;
  --sea-2:#064F80;
  --sea-3:#083E64;
  --sea-4:#072E4C;
  --sea-5:#05213A;
  --sea-6:#03131f;

  --serif-jp:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --serif-en:"Cormorant Garamond","Noto Serif JP",serif;
  --round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(22px,6vw,80px);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  color:var(--off);
  /* 夜の海へ沈んでいく一続きのグラデーション（ページ全体） */
  /* 早めに濃紺へ沈む：最初のセクションが始まる頃には深い青 */
  background:linear-gradient(180deg,
    var(--sea-surface) 0%,
    var(--sea-1) 4%,
    var(--sea-3) 10%,
    var(--sea-4) 16%,
    var(--sea-5) 26%,
    var(--sea-6) 42%,
    var(--sea-6) 100%) no-repeat;
  background-color:var(--sea-6);
  font-family:var(--serif-jp);
  font-weight:400;line-height:1.9;letter-spacing:.04em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,p,ul,ol,dl,dd{margin:0;}
ul,ol{list-style:none;padding:0;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}

.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--sea-6);color:var(--off);padding:10px 16px;border-radius:0 0 6px 0;font-size:.8rem;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px;}

section{position:relative;}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.15s;}
.reveal[data-delay="2"]{transition-delay:.3s;}

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);color:var(--off);
  opacity:0;transform:translateY(-12px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  pointer-events:none;
}
.site-header::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--sea-2),transparent);opacity:.5;z-index:-1;}
.site-header.is-visible{opacity:1;transform:none;pointer-events:auto;}
.wordmark-sm{display:block;width:clamp(128px,15vw,158px);height:auto;}
.site-header__cta{display:inline-block;color:var(--amber);border:1px solid var(--amber-soft);
  padding:9px 20px;border-radius:30px;font-size:.85rem;letter-spacing:.14em;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease);}
.site-header__cta:hover,.site-header__cta:focus-visible{background:var(--amber);color:var(--sea-6);}

/* =====================================================================
   星・波（夜の海の装飾レイヤー）
   ===================================================================== */
.join,.ending{isolation:isolate;}
.join__inner{position:relative;z-index:1;}
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--off);opacity:0;animation:twinkle 6s ease-in-out infinite;}

/* =====================================================================
   01 OPENING
   ===================================================================== */
.opening{min-height:100svh;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center;padding:12vh var(--pad);}
.opening::before{content:"";position:absolute;left:50%;top:34%;width:min(90vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.10),transparent 60%);pointer-events:none;}
.opening__stage{position:relative;width:min(680px,88vw);text-align:center;}
.opening__logo{width:100%;height:auto;opacity:0;animation:fadeOnly 2s var(--ease) .3s forwards, floaty 9s ease-in-out 2.2s infinite;filter:drop-shadow(0 18px 44px rgba(0,0,0,.28));}
.opening__tag{margin-top:clamp(20px,4vw,34px);font-family:var(--serif-en);font-size:clamp(.7rem,2.4vw,.82rem);letter-spacing:.32em;color:var(--off);opacity:0;animation:fadeUp 1.6s var(--ease) 1.4s forwards;}
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.gull{position:absolute;width:clamp(30px,4vw,58px);height:auto;opacity:0;overflow:visible;}
.gull path{fill:var(--off);}
.gull--1{top:15%;animation:glide1 30s ease-in-out .6s infinite;}
.gull--2{top:23%;animation:glide2 40s ease-in-out 3.4s infinite;}
.gull--3{top:11%;animation:glide3 34s ease-in-out 7s infinite;}
/* 羽ばたき */
.wing{transform-box:view-box;transform-origin:30px 15px;}
.wing-l{animation:flapL .62s ease-in-out infinite;}
.wing-r{animation:flapR .62s ease-in-out infinite;}
.gull--2 .wing-l,.gull--2 .wing-r{animation-duration:.74s;}
.gull--3 .wing-l,.gull--3 .wing-r{animation-duration:.52s;}

.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--off);opacity:0;animation:fadeUp 1.4s var(--ease) 2s forwards;z-index:2;}
.scroll-cue__text{font-family:var(--serif-en);font-size:.68rem;letter-spacing:.34em;opacity:.75;}
.scroll-cue__line{width:1px;height:52px;background:linear-gradient(rgba(247,246,242,.8),transparent);position:relative;overflow:hidden;}
.scroll-cue__line::after{content:"";position:absolute;inset:0;background:var(--off);animation:drip 2.4s var(--ease) infinite;}

/* =====================================================================
   ENTRANCE  (点灯した看板 + 開く扉)
   ===================================================================== */
.entrance{padding:clamp(90px,18vh,180px) var(--pad);text-align:center;overflow:hidden;position:relative;}
.entrance__inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}

/* 店先（線画・小さめ＋余白）＋ 扉の開閉 ＋ ガス灯ゆらぎ */
.storefront2{position:relative;width:min(640px,92vw);margin:0 auto clamp(30px,6vw,52px);perspective:1700px;}
.storefront2__img{width:100%;height:auto;display:block;}

/* 中からこぼれる灯り（扉が開くと ほわん と現れる。閉じている間は消灯）*/
.sf2-bloom{position:absolute;left:21.2%;top:9.3%;width:22.3%;height:76.5%;
  border-radius:50% 50% 4% 4% / 22% 22% 3% 3%;
  background:radial-gradient(ellipse at 50% 46%, rgba(255,200,124,.95), rgba(243,152,72,.55) 46%, rgba(150,80,30,.16) 74%, transparent 100%);
  opacity:0;transform:scale(.92);transition:opacity 2.8s var(--ease) 2.4s, transform 2.8s var(--ease) 2.4s;
  filter:blur(5px);pointer-events:none;}
#storefront.is-open .sf2-bloom{opacity:1;transform:scale(1);}

/* 扉の葉（通常は閉。スクロールで右ヒンジで開く。開いた状態のまま残す）*/
.sf2-doorleaf{position:absolute;left:21.2%;top:7.52%;width:22.3%;height:auto;
  transform-origin:left center;transform:rotateY(0deg);
  transition:transform 3.4s var(--ease) 1.3s;backface-visibility:hidden;
  filter:drop-shadow(-6px 0 14px rgba(0,0,0,.4));pointer-events:none;}
#storefront.is-open .sf2-doorleaf{transform:rotateY(-72deg);}

/* ガス灯：中がぼんやり揺れるオレンジの灯 */
.sf2-flame{position:absolute;left:51.5%;top:24.4%;width:9%;height:15%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 50% 50%, rgba(255,190,100,1), rgba(244,150,60,.6) 42%, rgba(240,140,55,.16) 66%, transparent 78%);
  mix-blend-mode:screen;filter:blur(4px);pointer-events:none;animation:flameGlow 2.6s ease-in-out infinite;}

.entrance__copy{font-size:clamp(1.15rem,4vw,1.6rem);letter-spacing:.08em;color:var(--off);}
.entrance__sub{margin-top:14px;font-size:clamp(.85rem,2.6vw,1rem);color:var(--dim);letter-spacing:.06em;}

/* =====================================================================
   02 CATCH
   ===================================================================== */
.catch{padding:clamp(120px,26vh,240px) var(--pad);}
.catch__inner{max-width:var(--maxw);margin:0 auto;}
.catch__title{font-size:clamp(2.6rem,12vw,6rem);font-weight:500;line-height:1.28;letter-spacing:.06em;}
.catch__title span{display:block;}
.catch__title span:nth-child(2){margin-left:1.2em;}
.catch__lead{margin-top:clamp(30px,6vw,54px);font-size:clamp(1.05rem,3.4vw,1.5rem);line-height:2;color:var(--off);}
.catch__note{margin-top:22px;font-size:clamp(.85rem,2.6vw,1rem);color:var(--dim);letter-spacing:.1em;}

/* =====================================================================
   03 GLASS  (自動でかき混ぜる)
   ===================================================================== */
.glass{padding:clamp(60px,14vh,140px) var(--pad) clamp(90px,18vh,180px);text-align:center;}
.glass__inner{max-width:640px;margin:0 auto;}
.glass__hint{font-size:.9rem;letter-spacing:.16em;color:var(--dim);margin-bottom:clamp(24px,5vw,44px);}
.glass__stage{position:relative;display:inline-block;width:min(820px,94vw);}
/* カウンターで飲む人々（輪郭アイボリー・一部だけ実際に動く）*/
.ppl{position:relative;width:100%;}
.ppl__still{width:100%;height:auto;display:block;}
.ppl__part{position:absolute;height:auto;pointer-events:none;will-change:transform;backface-visibility:hidden;}
.ppl-glow{position:absolute;width:7%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,198,112,.85), rgba(244,150,60,.4) 42%, rgba(240,140,55,.12) 66%, transparent 78%);
  mix-blend-mode:screen;filter:blur(6px);pointer-events:none;animation:lampGlow 3.6s ease-in-out infinite;}
.ppl-glow--1{left:17.58%;top:32.1%;}
.ppl-glow--2{left:42.97%;top:32.1%;animation-delay:-1.3s;}
.ppl-glow--3{left:68.36%;top:32.1%;animation-delay:-2.4s;}
@keyframes lampGlow{0%,100%{opacity:.58;transform:translate(-50%,-50%) scale(1);}34%{opacity:.9;transform:translate(-50%,-51%) scale(1.07);}66%{opacity:.72;transform:translate(-50%,-49.5%) scale(.97);}}
/* F2：持っているグラス＋前腕を、肘を軸にゆっくり口元へ持ち上げて戻す（0〜4秒）*/
.ppl-arm{left:43.75%;top:54.688%;width:4.362%;transform-origin:41.8% 97.6%;animation:mvArm 10s ease-in-out infinite;}
/* F3：頬杖の人が、上半身をほんの少し隣（左）へ傾けて戻す（2〜6秒）*/
.ppl-lean{left:51.43%;top:48.05%;width:14.97%;transform-origin:50% 98.5%;animation:mvLean 10s ease-in-out infinite;}
/* F4：眼鏡の人が、頭を小さくうなずく（5〜8秒）*/
.ppl-nod{left:74.87%;top:44.824%;width:20.703%;transform-origin:26.1% 99.5%;animation:mvNod 10s ease-in-out infinite;}
@keyframes mvArm{0%{transform:rotate(0)}12%{transform:rotate(-9deg)}26%{transform:rotate(-9.5deg)}40%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes mvLean{0%,20%{transform:rotate(0)}34%{transform:rotate(-1.4deg)}48%{transform:rotate(-1.4deg)}62%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes mvNod{0%,50%{transform:rotate(0)}57%{transform:rotate(1.8deg)}66%{transform:rotate(0)}72%{transform:rotate(0.9deg)}80%{transform:rotate(0)}100%{transform:rotate(0)}}
.glass__caption{margin-top:clamp(30px,6vw,52px);font-size:clamp(1rem,3vw,1.3rem);letter-spacing:.08em;color:var(--off);}

/* =====================================================================
   04 CONCEPT
   ===================================================================== */
.concept{padding:clamp(120px,24vh,240px) var(--pad);}
.concept__inner{max-width:820px;margin:0 auto;display:grid;gap:clamp(52px,11vh,120px);}
.concept__line{font-size:clamp(1.3rem,5vw,2.15rem);line-height:1.95;letter-spacing:.05em;}
.concept__line--group{font-size:clamp(1.15rem,4.2vw,1.7rem);color:var(--dim);line-height:2.4;}
.concept__line--em{color:var(--amber);}

/* =====================================================================
   05 FLOW
   ===================================================================== */
.flow{padding:clamp(110px,22vh,220px) var(--pad);}
.flow__inner{max-width:760px;margin:0 auto;}
.flow__title{font-size:clamp(2rem,8vw,3.4rem);font-weight:500;letter-spacing:.08em;margin-bottom:clamp(48px,10vh,96px);}
.flow__list{display:grid;gap:clamp(30px,6vw,52px);position:relative;}
.flow__list::before{content:"";position:absolute;left:26px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--amber-soft),transparent 92%);}
@media(max-width:520px){.flow__list::before{left:18px;}}
.flow__step{display:flex;gap:clamp(18px,5vw,30px);align-items:baseline;position:relative;}
.flow__num{font-family:var(--serif-en);font-size:1.05rem;letter-spacing:.1em;color:var(--off);width:34px;flex:none;position:relative;z-index:1;}
.flow__num::before{content:"";position:absolute;left:-8px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--sea-3);border:1.5px solid var(--amber);}
@media(max-width:520px){.flow__num{width:22px;}.flow__num::before{left:-16px;}}
.flow__text{font-size:clamp(1.02rem,3.6vw,1.35rem);line-height:1.85;}
.flow__loop{margin-top:clamp(60px,12vh,120px);display:flex;flex-direction:column;align-items:center;gap:14px;}
.flow__loop svg{width:88px;height:88px;animation:spinSlow 40s linear infinite;}
.flow__loop-label{font-size:.9rem;letter-spacing:.2em;color:var(--dim);}

/* =====================================================================
   06 EVENT
   ===================================================================== */
.event{padding:clamp(80px,16vh,160px) var(--pad) clamp(110px,22vh,220px);}
.event__inner{max-width:680px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(46px,8vw,72px) 0;}
.event__eyebrow{font-family:var(--serif-en);letter-spacing:.3em;font-size:.8rem;color:var(--amber);opacity:.85;}
.event__title{font-size:clamp(1.8rem,7vw,2.9rem);font-weight:500;letter-spacing:.06em;margin:14px 0 18px;}
.event__note{font-size:clamp(.95rem,3vw,1.1rem);line-height:1.9;color:var(--dim);}
.nights{margin-top:clamp(30px,6vw,50px);display:grid;}
.night{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,4vw,30px);align-items:center;padding:22px 2px;border-top:1px solid var(--line);}
.night:last-child{border-bottom:1px solid var(--line);}
.night__no{font-family:var(--serif-en);font-size:clamp(1.8rem,6vw,2.4rem);color:var(--amber);line-height:1;display:flex;align-items:baseline;gap:5px;}
.night__no small{font-family:var(--serif-jp);font-size:.62rem;color:var(--dim);letter-spacing:.12em;}
.night__date{font-size:clamp(1rem,3.4vw,1.15rem);letter-spacing:.04em;}
.night__meta{font-size:.85rem;color:var(--dim);margin-top:5px;line-height:1.7;}
.night__cta{white-space:nowrap;border:1px solid var(--amber-soft);color:var(--amber);padding:11px 24px;border-radius:30px;font-size:.9rem;letter-spacing:.12em;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);}
.night__cta:hover,.night__cta:focus-visible{background:var(--amber);color:var(--sea-6);transform:translateY(-2px);}
.night__media{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:14px;}
.night__media img,.night__media video{width:100%;height:auto;border-radius:8px;display:block;}
.event__apply{margin-top:clamp(40px,8vw,64px);text-align:center;font-size:clamp(.85rem,2.9vw,.98rem);line-height:2.4;letter-spacing:.08em;color:var(--faint);}
.event__apply-lead{color:var(--dim);font-size:clamp(1rem,3.4vw,1.2rem);letter-spacing:.1em;}
@media(max-width:560px){
  .night{grid-template-columns:auto 1fr;gap:12px 16px;padding:20px 2px;}
  .night__cta{grid-column:1 / -1;justify-self:start;margin-top:8px;}
}

/* =====================================================================
   07 IWAKI
   ===================================================================== */
.iwaki{text-align:center;padding:clamp(120px,24vh,240px) var(--pad);}
.iwaki__inner{max-width:700px;margin:0 auto;}
.iwaki__drink{position:relative;width:min(430px,86vw);margin:0 auto clamp(34px,7vw,56px);}
.drink2__base{width:100%;height:auto;display:block;}
.drink2__hand{position:absolute;left:22.5%;top:56.73%;width:14.297%;height:auto;transform-origin:110.38% 54.66%;will-change:transform;backface-visibility:hidden;animation:stirOrbit 13s linear infinite;}
.drink2__lantern{position:absolute;left:9.5%;bottom:2.3%;width:5.6%;pointer-events:none;}
.drink2__candle{width:100%;height:auto;display:block;}
.drink2__flame{position:absolute;left:50%;top:26%;width:132%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,196,110,.9), rgba(244,150,60,.42) 40%, rgba(240,140,55,.12) 64%, transparent 78%);
  mix-blend-mode:screen;filter:blur(5px);animation:lampGlow 3.2s ease-in-out infinite;}
@keyframes stirOrbit{0%{transform:rotate(0.000deg) scale(1.0000)}2.5%{transform:rotate(1.202deg) scale(1.0038)}5%{transform:rotate(1.700deg) scale(1.0130)}7.5%{transform:rotate(1.202deg) scale(1.0222)}10%{transform:rotate(0.000deg) scale(1.0260)}12.5%{transform:rotate(-1.202deg) scale(1.0222)}15%{transform:rotate(-1.700deg) scale(1.0130)}17.5%{transform:rotate(-1.202deg) scale(1.0038)}20%{transform:rotate(0.000deg) scale(1.0000)}22.5%{transform:rotate(1.202deg) scale(1.0038)}25%{transform:rotate(1.700deg) scale(1.0130)}27.5%{transform:rotate(1.202deg) scale(1.0222)}30%{transform:rotate(0.000deg) scale(1.0260)}32.5%{transform:rotate(-1.202deg) scale(1.0222)}35%{transform:rotate(-1.700deg) scale(1.0130)}37.5%{transform:rotate(-1.202deg) scale(1.0038)}40%{transform:rotate(0.000deg) scale(1.0000)}42.5%{transform:rotate(1.202deg) scale(1.0038)}45%{transform:rotate(1.700deg) scale(1.0130)}47.5%{transform:rotate(1.202deg) scale(1.0222)}50%{transform:rotate(0.000deg) scale(1.0260)}52.5%{transform:rotate(-1.202deg) scale(1.0222)}55%{transform:rotate(-1.700deg) scale(1.0130)}57.5%{transform:rotate(-1.202deg) scale(1.0038)}60%{transform:rotate(0.000deg) scale(1.0000)}62.5%{transform:rotate(1.202deg) scale(1.0038)}65%{transform:rotate(1.700deg) scale(1.0130)}67.5%{transform:rotate(1.202deg) scale(1.0222)}70%{transform:rotate(0.000deg) scale(1.0260)}72.5%{transform:rotate(-1.202deg) scale(1.0222)}75%{transform:rotate(-1.700deg) scale(1.0130)}77.5%{transform:rotate(-1.202deg) scale(1.0038)}80%{transform:rotate(0.000deg) scale(1.0000)}100%{transform:rotate(0deg) scale(1)}}
.iwaki__title{font-size:clamp(2rem,8vw,3.4rem);font-weight:500;line-height:1.4;letter-spacing:.06em;}
.iwaki__lead{margin-top:clamp(28px,6vw,44px);font-size:clamp(1.15rem,4vw,1.6rem);color:var(--amber);letter-spacing:.06em;}
.iwaki__body{margin-top:26px;font-size:clamp(1rem,3.4vw,1.25rem);line-height:2.2;color:var(--dim);}
.iwaki__soon{margin-top:clamp(34px,7vw,52px);font-size:.85rem;letter-spacing:.08em;color:var(--faint);}

/* =====================================================================
   08 JOIN
   ===================================================================== */
.join{text-align:center;padding:clamp(120px,24vh,240px) var(--pad);}
.join__inner{max-width:820px;margin:0 auto;}
.join__copy{font-size:clamp(1.8rem,7vw,2.7rem);font-weight:500;letter-spacing:.06em;}
.join__sub{margin-top:18px;font-size:clamp(1.05rem,3.6vw,1.4rem);color:var(--amber);letter-spacing:.1em;}
.btn{display:inline-block;font-family:var(--serif-jp);letter-spacing:.14em;padding:16px 40px;border-radius:40px;font-size:1.02rem;transition:transform .4s var(--ease),background .4s,color .4s,box-shadow .4s;}
.btn--amber{margin-top:clamp(40px,8vw,60px);background:var(--amber);color:var(--sea-6);font-weight:500;box-shadow:0 8px 30px rgba(246,215,154,.25);}
.btn--amber:hover,.btn--amber:focus-visible{transform:translateY(-3px);box-shadow:0 14px 40px rgba(246,215,154,.4);}
.btn--ghost{border:1px solid var(--line);color:var(--off);}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--off);color:var(--sea-6);transform:translateY(-2px);}
.join__links{margin-top:clamp(44px,9vw,68px);display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;font-family:var(--serif-en);letter-spacing:.14em;font-size:.95rem;}
.join__links a{opacity:.7;padding:4px 2px;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s;}
.join__links a:hover,.join__links a:focus-visible{opacity:1;border-color:var(--amber);}

/* =====================================================================
   ENDING  (最も深い夜 + 月)
   ===================================================================== */
.ending{text-align:center;padding:clamp(56px,10vh,110px) var(--pad) clamp(90px,18vh,160px);display:flex;flex-direction:column;align-items:center;overflow:hidden;}
.ending__moon{position:absolute;left:50%;top:12%;width:120px;height:120px;transform:translateX(-50%);pointer-events:none;}
.ending__moon .disc{fill:var(--off);opacity:.9;}
.ending__moon .halo{fill:none;stroke:var(--amber-soft);}
.ending__mama{width:min(300px,74vw);opacity:.96;animation:floaty 9s ease-in-out infinite;position:relative;z-index:1;}
.ending__mama img{width:100%;height:auto;}
.ending__copy{margin-top:clamp(28px,6vw,44px);font-size:clamp(1.3rem,5vw,2rem);letter-spacing:.08em;color:var(--off);position:relative;z-index:1;}
.ending__sea{position:absolute;left:0;right:0;bottom:0;width:100%;pointer-events:none;opacity:.5;}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{text-align:center;padding:0 var(--pad) 56px;border-top:1px solid var(--line);}
.site-footer .wordmark-sm{margin:48px auto 0;opacity:.92;}
.site-footer__note{margin-top:12px;font-size:.9rem;letter-spacing:.14em;color:var(--dim);}
.site-footer__org{margin-top:26px;font-size:.8rem;line-height:2;letter-spacing:.08em;color:var(--dim);}
.site-footer__org a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-soft);}
.site-footer__copy{margin-top:22px;font-family:var(--serif-en);font-size:.72rem;letter-spacing:.24em;opacity:.4;}

/* =====================================================================
   KEYFRAMES
   ===================================================================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes fadeOnly{from{opacity:0;}to{opacity:1;}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
/* カモメの滑空（緩急・上下の揺らぎ・フェード）*/
@keyframes glide1{
  0%{opacity:0;transform:translate(-14vw,0) scale(.92) rotate(-2deg);}
  12%{opacity:.9;}
  38%{transform:translate(34vw,-5vh) scale(.92) rotate(2deg);}
  62%{transform:translate(58vw,3vh) scale(.92) rotate(-1deg);}
  88%{opacity:.9;}
  100%{opacity:0;transform:translate(116vw,-3vh) scale(.92) rotate(1deg);}
}
@keyframes glide2{
  0%{opacity:0;transform:translate(-12vw,0) scale(.64) rotate(1deg);}
  15%{opacity:.75;}
  45%{transform:translate(40vw,4vh) scale(.64) rotate(-2deg);}
  70%{transform:translate(66vw,-3vh) scale(.64) rotate(2deg);}
  90%{opacity:.75;}
  100%{opacity:0;transform:translate(115vw,2vh) scale(.64) rotate(0);}
}
@keyframes flame{0%,100%{transform:scale(1);opacity:.9;}30%{transform:scale(1.12,1.18);opacity:1;}60%{transform:scale(.92,1.06);opacity:.85;}}
@keyframes flameGlow{0%,100%{opacity:.68;transform:translate(-50%,-50%) scale(1);}30%{opacity:.98;transform:translate(-50.5%,-51%) scale(1.08);}60%{opacity:.78;transform:translate(-49.5%,-49.5%) scale(.97);}}
@keyframes flapL{0%,100%{transform:rotate(10deg);}50%{transform:rotate(-20deg);}}
@keyframes flapR{0%,100%{transform:rotate(-10deg);}50%{transform:rotate(20deg);}}
@keyframes glide3{
  0%{opacity:0;transform:translate(-10vw,0) scale(.8) rotate(2deg);}
  14%{opacity:.85;}
  50%{transform:translate(46vw,-6vh) scale(.8) rotate(-2deg);}
  78%{transform:translate(72vw,1vh) scale(.8) rotate(1deg);}
  92%{opacity:.85;}
  100%{opacity:0;transform:translate(118vw,-2vh) scale(.8) rotate(0);}
}
@keyframes drip{0%{transform:translateY(-100%);}60%{transform:translateY(120%);}100%{transform:translateY(120%);}}
@keyframes spinSlow{to{transform:rotate(360deg);}}
@keyframes flicker{0%,100%{opacity:.85;}45%{opacity:.6;}70%{opacity:1;}}
@keyframes signPulse{0%,100%{box-shadow:0 0 34px var(--amber-glow),inset 0 0 26px rgba(246,215,154,.12);}50%{box-shadow:0 0 46px rgba(246,215,154,.4),inset 0 0 30px rgba(246,215,154,.2);}}
@keyframes twinkle{0%,100%{opacity:0;}50%{opacity:.8;}}
@keyframes stir{to{transform:rotate(360deg);}}
@keyframes iceBob{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-3px) rotate(-1.2deg);}}
@keyframes liquidShimmer{0%,100%{transform:scaleX(1);opacity:.82;}50%{transform:scaleX(.985);opacity:1;}}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(min-width:900px){.catch__title span:nth-child(2){margin-left:2em;}}

/* =====================================================================
   MOTION 配慮
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
  .opening__logo,.opening__tag,.scroll-cue{opacity:1;animation:none;}
  .door.is-open .door__panel{transform:rotateY(-78deg);}
}

/* =====================================================================
   APPLY FORM  (form.html / thanks.html)
   ===================================================================== */
.subbar{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;justify-content:center;padding:20px var(--pad);pointer-events:none;}
.subbar a{pointer-events:auto;display:inline-block;}
.subbar .wordmark-sm{width:clamp(120px,14vw,150px);opacity:.9;}

.apply{min-height:100vh;padding:clamp(96px,15vh,158px) var(--pad) clamp(72px,12vh,120px);}
.apply__inner{max-width:560px;margin:0 auto;}
.apply__eyebrow{font-family:var(--serif-en);letter-spacing:.32em;font-size:.82rem;color:var(--amber);opacity:.85;text-align:center;}
.apply__title{font-size:clamp(1.9rem,7vw,2.7rem);font-weight:500;letter-spacing:.06em;text-align:center;margin:14px 0 0;line-height:1.4;}
.apply__night{text-align:center;margin-top:14px;color:var(--amber);letter-spacing:.14em;font-size:1.05rem;}
.apply__lead{text-align:center;font-size:clamp(.9rem,3vw,1.02rem);line-height:2.2;color:var(--dim);letter-spacing:.05em;margin-top:20px;}

.apply-form{margin-top:clamp(40px,7vw,60px);display:grid;gap:clamp(22px,4vw,30px);}
.field{display:grid;gap:9px;}
.field > label{font-size:.9rem;letter-spacing:.08em;color:var(--off);}
.field .req{color:var(--amber);font-size:.68rem;margin-left:9px;letter-spacing:.12em;}
.field .opt{color:var(--faint);font-size:.68rem;margin-left:9px;letter-spacing:.12em;}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--serif-jp);font-size:1rem;color:var(--off);letter-spacing:.04em;
  background:rgba(247,246,242,.04);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;transition:border-color .3s var(--ease),background .3s var(--ease);}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber-soft);background:rgba(247,246,242,.07);}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber-soft) 50%),linear-gradient(135deg,var(--amber-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px;}
.field select option{background:#0a2033;color:var(--off);}
.apply-note{font-size:.78rem;line-height:2;letter-spacing:.05em;color:var(--faint);text-align:center;}
.apply-submit{justify-self:center;margin-top:10px;border:1px solid var(--amber-soft);color:var(--amber);background:transparent;
  padding:14px 44px;border-radius:32px;font-size:.95rem;letter-spacing:.16em;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);}
.apply-submit:hover,.apply-submit:focus-visible{background:var(--amber);color:var(--sea-6);transform:translateY(-2px);}
.apply-back{display:block;text-align:center;margin-top:36px;color:var(--dim);font-size:.85rem;letter-spacing:.1em;}
.apply-back:hover,.apply-back:focus-visible{color:var(--amber);}

.thanks{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(96px,15vh,158px) var(--pad);}
.thanks__inner{max-width:560px;}

/* 参加希望の夜：複数選択（チェックボックス） */
.field__caption{font-size:.9rem;letter-spacing:.08em;color:var(--off);}
.field__hint{color:var(--faint);font-size:.72rem;letter-spacing:.08em;margin-left:8px;}
.nights-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;}
.nights-choice > input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;}
.nights-choice > label{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;padding:13px 6px;cursor:pointer;font-size:.95rem;letter-spacing:.06em;color:var(--dim);transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);}
.nights-choice > label:hover{border-color:var(--amber-soft);color:var(--off);}
.nights-choice > input:checked + label{background:var(--amber);border-color:var(--amber);color:var(--sea-6);}
.nights-choice > input:focus-visible + label{outline:2px solid var(--amber);outline-offset:2px;}
.nights-error{color:var(--amber);font-size:.8rem;letter-spacing:.05em;margin-top:2px;}
@media(max-width:400px){.nights-choice{grid-template-columns:repeat(2,1fr);}}

/* =====================================================================
   SOUND TOGGLE（♪ 任意再生）
   ===================================================================== */
.sound-toggle{position:fixed;left:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:95;
  display:flex;align-items:center;gap:8px;padding:9px 15px 9px 11px;border-radius:30px;
  border:1px solid var(--amber-soft);background:rgba(3,19,31,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--amber);cursor:pointer;opacity:.82;transition:background .35s var(--ease),opacity .4s var(--ease);}
.sound-toggle:hover,.sound-toggle:focus-visible{opacity:1;background:rgba(3,19,31,.72);}
.sound-toggle__label{font-family:var(--serif-en);font-size:.74rem;letter-spacing:.16em;}
.sound-ic{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.sound-ic .sp{fill:currentColor;stroke:none;}
.sound-ic .w1,.sound-ic .w2{opacity:0;transition:opacity .35s var(--ease);}
.sound-ic .slash{opacity:.9;transition:opacity .35s var(--ease);}
body.sound-on .sound-ic .w1,body.sound-on .sound-ic .w2{opacity:1;}
body.sound-on .sound-ic .slash{opacity:0;}
body.sound-on .sound-toggle{background:rgba(246,215,154,.16);opacity:1;}

/* 受付終了の回 */
.night.is-closed{opacity:.5;}
.night__cta--closed{white-space:nowrap;border:1px solid var(--line);color:var(--faint);
  padding:11px 24px;border-radius:30px;font-size:.9rem;letter-spacing:.12em;cursor:default;}
.nights-choice > input:disabled + label{opacity:.4;cursor:not-allowed;border-style:dashed;flex-direction:column;gap:2px;}
.nights-choice > label.is-closed small{font-family:var(--serif-jp);font-size:.58rem;letter-spacing:.06em;color:var(--faint);}
.apply-note--notice{color:var(--amber);letter-spacing:.06em;}