/* ============================================================
   Bar Elizabeth — 西麻布 会員制バー
   Remix: A「扉」体験 × B エディトリアル巨大タイポ × C 覗きギャラリー
   Tech: CSS scroll-driven animations (+IO fallback) / @property /
         fluid type clamp() / text-wrap: balance
   ============================================================ */

:root{
  --bg:        #0a0a0b;
  --bg-2:      #101012;
  --line:      rgba(201,162,90,.24);
  --gold:      #c9a25a;
  --gold-lite: #e8cf94;
  --gold-deep: #9a7534;
  --ivory:     #ece7dd;
  --mute:      #6f6b62;
  --serif-en:  "Instrument Serif", serif;
  --serif-ja:  "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --sans-ja:   "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
}

/* 金の光量をアニメーション可能にする登録プロパティ */
@property --glow {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.5;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--sans-ja);
  font-weight:300;
  line-height:1.9;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.eyebrow{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:1.05rem;
  letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:1.2rem;
}

.btn{
  display:inline-block;
  border:1px solid var(--gold);
  color:var(--gold-lite);
  padding:1em 2.6em;
  font-family:var(--serif-ja);
  font-size:.9rem;
  letter-spacing:.22em;
  transition:background .4s ease, color .4s ease;
}
.btn:hover{ background:var(--gold); color:#141008; }
.btn--lg{ font-size:1.05rem; padding:1.1em 3em; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem clamp(1.2rem,4vw,3rem);
  transition:background .5s ease, border-color .5s ease, padding .5s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(9,9,10,.82);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
  padding-block:.85rem;
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; }
.nav__brand img{ width:32px; }
.nav__brand span{
  font-family:var(--serif-en); font-style:italic; font-size:1.2rem;
}
.nav__links{ display:flex; align-items:center; gap:clamp(1.4rem,2.6vw,2.4rem); }
.nav__links a{
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--mute); transition:color .3s;
}
.nav__links a:hover{ color:var(--gold-lite); }
.nav__links .nav__tel{ color:var(--gold); letter-spacing:.18em; }

.nav__toggle{
  display:none; flex-direction:column; gap:7px; justify-content:center;
  width:36px; height:30px; background:none; border:none; cursor:pointer; z-index:60;
}
.nav__toggle span{ height:1.5px; width:100%; background:var(--gold-lite); transition:.4s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); }

/* ---------- 1. The Door ---------- */
.door{
  min-height:100vh; /* svh非対応ブラウザ用フォールバック */
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
/* C案: 闇の奥に微かに店内が見える */
.door__bg{
  position:absolute; inset:0;
  background:url("../assets/img/lion-wide.jpg") center/cover;
  filter:brightness(.5) saturate(.85);
}
.door__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 50% 46%, rgba(10,10,11,.55) 0%, rgba(10,10,11,.93) 68%, var(--bg) 100%),
    linear-gradient(180deg, rgba(10,10,11,.75), transparent 40%, rgba(10,10,11,.9));
}
/* C案: 金のヘアライン額縁 */
.door__frame{
  position:absolute; inset:26px;
  border:1px solid rgba(201,162,90,.28);
  pointer-events:none;
}
.door__frame::before,
.door__frame::after{
  content:""; position:absolute; width:28px; height:28px; border:1px solid var(--gold);
}
.door__frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.door__frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.door__glow{
  position:absolute; width:min(44vw,340px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,90,calc(.14 * var(--glow))), transparent 65%);
  animation:breathe 5.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ --glow:0.5; transform:scale(.92); }
  50%{ --glow:1; transform:scale(1); }
}
.door__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:2rem;
}
.door__knocker{
  width:clamp(56px,6.5vw,72px);
  filter:drop-shadow(0 0 22px rgba(201,162,90,.4));
}
.door__name{
  font-family:var(--serif-en); font-style:italic; font-weight:400;
  font-size:clamp(2.6rem,6vw,4.4rem);
  letter-spacing:.04em; line-height:1;
  text-wrap:balance;
}
.door__knock{
  font-family:var(--serif-ja);
  font-size:.82rem; letter-spacing:.55em; text-transform:uppercase;
  color:var(--mute); padding-left:.55em;
}
.door__line{
  position:absolute; bottom:26px; width:1px; height:72px;
  background:linear-gradient(var(--gold), transparent);
  animation:drop 2.4s ease-in-out infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
  40%{ transform:scaleY(1); opacity:1; }
  100%{ opacity:0; }
}

/* ---------- 2. Entry ---------- */
.entry{
  min-height:100svh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:4vw;
  padding:12vh 6vw;
  position:relative;
}
.entry__img{
  overflow:hidden; position:relative; height:min(74vh,720px);
}
.entry__img img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.78) saturate(.92);
}
.entry__img::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 120px 40px var(--bg);
}
.entry__tate{
  position:absolute; top:14vh; right:4.5vw;
  writing-mode:vertical-rl;
  font-family:var(--serif-ja); font-size:1.02rem; letter-spacing:.42em;
  color:var(--ivory);
  border-left:1px solid var(--line);
  padding-left:1.3rem; height:42vh;
}
.entry__copy{ max-width:30rem; padding-right:clamp(0px,6vw,90px); }
.entry__eyebrow{
  font-family:var(--serif-en); font-style:italic;
  color:var(--gold); letter-spacing:.12em; font-size:1.05rem;
  margin-bottom:1.4rem;
}
.entry__title{
  font-family:var(--serif-ja); font-weight:500;
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  line-height:1.7; letter-spacing:.1em;
  margin-bottom:1.7rem;
  text-wrap:balance;
}
.entry__text{
  color:#b9b4aa; font-size:.95rem; line-height:2.3; letter-spacing:.05em;
  margin-bottom:2.4rem;
}

/* ---------- 3. Index ---------- */
.index{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-block:1px solid var(--line);
}
.index__item{
  padding:3.2rem 2.6rem;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:1rem;
  transition:background .5s;
}
.index__item:last-child{ border-right:none; }
.index__item:hover{ background:rgba(201,162,90,.05); }
.index__no{
  font-family:var(--serif-en); font-style:italic;
  color:var(--gold); font-size:1.25rem;
}
.index__item h3{
  font-family:var(--serif-ja); font-weight:500;
  font-size:1.15rem; letter-spacing:.12em;
}
.index__item p{ font-size:.84rem; color:var(--mute); line-height:2; }

/* ---------- 4. Peek Gallery ---------- */
.gallery{ padding:clamp(5rem,11vw,9rem) clamp(1.2rem,4vw,3rem); max-width:1240px; margin:0 auto; }
.gallery__head{ margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.gallery__title{
  font-family:var(--serif-ja); font-weight:500;
  font-size:clamp(1.8rem,4.4vw,2.8rem);
  letter-spacing:.08em; line-height:1.5;
}
.gallery__hint{
  font-family:var(--serif-ja);
  color:var(--mute); font-size:.85rem; letter-spacing:.2em; margin-top:1rem;
}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:230px;
  gap:12px;
}
.peek{ position:relative; overflow:hidden; grid-column:span 3; }
.peek--tall{ grid-column:span 2; grid-row:span 2; }
.peek--wide{ grid-column:span 4; }
.peek img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.34) saturate(.8);
  transition:filter .8s ease, transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.peek:hover img,
.peek.lit img{
  filter:brightness(.92) saturate(1);
  transform:scale(1.04);
}
.peek figcaption{
  position:absolute; bottom:1.1rem; left:1.3rem;
  font-family:var(--serif-en); font-style:italic;
  color:var(--gold); font-size:1.08rem; letter-spacing:.06em;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}

/* ---------- 4.5 Queen — 三幕のエディトリアル ---------- */
.queen{ padding-top:clamp(5rem,11vw,9rem); overflow:hidden; }
.queen__head{
  max-width:1240px; margin:0 auto clamp(1rem,3vw,2rem);
  padding:0 clamp(1.2rem,4vw,3rem);
}
.queen__title{
  font-family:var(--serif-ja); font-weight:500;
  font-size:clamp(1.8rem,4.4vw,2.8rem);
  letter-spacing:.08em; line-height:1.5;
}

/* --- 幕I: ポスターの切替ステージ ---
   data-mode="sq" (Special Queen/実写) = 氷青のムード
   data-mode="qn" (Queen of the Night/アニメ) = 蝋燭の金のムード */
.qs1{
  --qa:#a9c3e8;               /* ステージのアクセント色（sq: 氷青） */
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:1fr auto;
  align-items:center;
  min-height:100vh;
  padding:4vh 0 6vh;
}
.qs1[data-mode="qn"]{ --qa:var(--gold-lite); }
.qs1__poster{
  grid-column:1/7; grid-row:1/3;
  position:relative; overflow:hidden;
  height:min(92vh,880px);
}
.qs1__pimg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.82) saturate(.95);
  opacity:0;
  transition:opacity 1.4s ease;
}
.qs1__pimg.is-active{ opacity:1; }
.qs1__pimg--qn{ object-position:50% 25%; }
.qs1__poster::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 14%, transparent 55%, var(--bg) 99%),
    linear-gradient(180deg, var(--bg) 0%, transparent 12%, transparent 86%, var(--bg) 100%);
}
.qs1__word{
  grid-column:4/13; grid-row:1;
  z-index:2; align-self:center;
  font-family:var(--serif-en); font-style:italic; font-weight:400;
  font-size:clamp(6rem,16vw,15rem);
  line-height:.8; white-space:nowrap;
  color:var(--ivory);
  text-shadow:0 10px 60px rgba(0,0,0,.85);
  transform:translateY(-4%);
}
.qs1__word em{ color:var(--qa); font-style:italic; transition:color 1s ease; }
.qs1__tate{
  position:absolute; top:8%; right:4vw; z-index:3;
  writing-mode:vertical-rl;
  font-family:var(--serif-ja); font-weight:500;
  font-size:1.05rem; letter-spacing:.42em; line-height:1;
  color:var(--ivory);
  border-left:1px solid var(--line);
  padding-left:1.3rem;
  max-height:52vh;
  transition:opacity .4s ease;
}
.qs1__meta{
  grid-column:7/12; grid-row:2;
  z-index:3; justify-self:start;
  display:flex; flex-direction:column; gap:1.3rem;
  padding-top:3vh;
}
.qs1__tabs{ display:flex; gap:1.8rem; }
.qs1__tab{
  background:none; border:none; cursor:pointer;
  font-family:var(--serif-en); font-style:italic;
  font-size:.98rem; letter-spacing:.1em;
  color:var(--mute);
  padding:0 0 .35em;
  border-bottom:1px solid transparent;
  transition:color .6s ease, border-color .6s ease;
}
.qs1__tab.is-active{ color:var(--qa); border-bottom-color:var(--qa); }
.qs1__meta-line{
  font-family:var(--serif-en); font-style:italic;
  color:var(--qa); letter-spacing:.14em; font-size:1.02rem;
  transition:color 1s ease;
}
.qs1__note{
  font-family:var(--serif-ja);
  font-size:.88rem; color:#b9b4aa;
  letter-spacing:.1em; line-height:2.1;
}

/* --- 幕II: 肖像 × 薄い背景に乾杯の残像 --- */
.qs2{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  align-items:center;
  min-height:100vh;
  margin-top:6vh;
  padding:10vh 0;
  overflow:hidden;
}
/* ボトルを傾ける写真は「残像」として薄く敷く */
.qs2__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  opacity:.16;
  filter:grayscale(.4) brightness(.55) saturate(.9);
}
.qs2::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%);
  pointer-events:none;
}
/* 白背景の写真はモノトーンに落として世界観に統一。触れる/スクロールで色が灯る */
.qs2 .peek img{
  filter:grayscale(.55) brightness(.58) sepia(.14) contrast(1.04);
}
.qs2 .peek:hover img,
.qs2 .peek.lit img{
  filter:grayscale(.15) brightness(.76) sepia(.06) contrast(1.02);
}
.qs2__big{
  grid-column:6/11; grid-row:1;
  position:relative; z-index:2;
  overflow:visible;
  height:min(76vh,720px);
}
.qs2__big img{
  width:100%; height:100%; object-fit:cover; object-position:50% 15%;
}
/* ずらした金のハイライン額 */
.qs2__big::before{
  content:""; position:absolute; inset:-16px 16px 16px -16px;
  border:1px solid var(--line);
  pointer-events:none; z-index:2;
}
.qs2__word{
  position:absolute; top:6%; left:4%;
  z-index:3;
  font-family:var(--serif-en); font-style:italic; font-weight:400;
  font-size:clamp(3.2rem,8vw,7.5rem);
  line-height:.9; white-space:nowrap;
  color:var(--ivory);
  text-shadow:0 10px 50px rgba(0,0,0,.85);
}
.qs2__word em{ color:var(--gold); font-style:italic; }
.qs2__copy{
  grid-column:2/6; grid-row:1;
  align-self:end; z-index:2;
  padding-bottom:4vh;
}
.qs2__eyebrow{
  font-family:var(--serif-en); font-style:italic;
  color:var(--gold-lite); font-size:1.15rem; letter-spacing:.14em;
  margin-bottom:1.1rem;
}
.qs2__lead{
  font-family:var(--serif-ja); font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:.18em; line-height:2;
  text-shadow:0 4px 30px rgba(0,0,0,.9);
}

/* 視差は撤去（ポスターはクロスフェード演出に一本化。
   アプリ内ブラウザ含め全環境で確実に描画されることを優先） */

/* ---------- 5. Plan ---------- */
.plan{ padding:clamp(4rem,9vw,7rem) 1.4rem; display:grid; place-items:center; }
.plan__card{
  width:min(560px,100%);
  text-align:center;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(201,162,90,.06), transparent 60%), var(--bg-2);
  padding:clamp(2.8rem,6vw,3.8rem) clamp(1.6rem,5vw,3rem);
  position:relative;
}
.plan__card::before,
.plan__card::after{
  content:""; position:absolute; width:24px; height:24px; border:1px solid var(--gold);
}
.plan__card::before{ top:14px; left:14px; border-right:none; border-bottom:none; }
.plan__card::after{ bottom:14px; right:14px; border-left:none; border-top:none; }
.plan__price{
  display:flex; align-items:baseline; justify-content:center; gap:.4rem;
  margin-bottom:1.6rem;
}
.plan__price span{ font-size:.9rem; color:var(--mute); align-self:center; }
.plan__price b{
  font-family:var(--serif-en);
  font-size:clamp(3rem,9vw,4.2rem); font-weight:400;
  color:var(--gold-lite); letter-spacing:.01em;
}
.plan__price em{ font-style:normal; font-size:1.5rem; color:var(--ivory); }
.plan__note{ font-size:.88rem; color:var(--mute); line-height:2.1; margin-bottom:2rem; }

/* ---------- 6. Information ---------- */
.info{ max-width:1100px; margin:0 auto; padding:clamp(4rem,9vw,7rem) clamp(1.4rem,4vw,3rem); }
.info__head{ margin-bottom:clamp(2rem,4vw,3rem); }
.info__head h2{
  font-family:var(--serif-ja); font-weight:500;
  font-size:clamp(1.7rem,4vw,2.5rem); letter-spacing:.1em;
}
.info__grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
.info__list div{
  display:grid; grid-template-columns:120px 1fr; gap:1rem;
  padding:1.3rem 0; border-bottom:1px solid var(--line);
}
.info__list div:first-child{ border-top:1px solid var(--line); }
.info__list dt{
  font-family:var(--serif-en); font-style:italic;
  color:var(--gold); font-size:1rem; padding-top:.1em;
}
.info__list dd{ font-size:1rem; }
.info__list dd small{
  display:block; color:var(--mute); font-size:.8rem; letter-spacing:.06em; margin-top:.3rem;
}
.info__list dd a{ border-bottom:1px solid var(--line); transition:.3s; }
.info__list dd a:hover{ color:var(--gold-lite); border-color:var(--gold); }

.info__sns{
  border:1px solid var(--line); padding:2rem;
  display:flex; flex-direction:column; gap:.7rem;
}
.info__sns-lead{
  font-family:var(--serif-en); font-style:italic;
  color:var(--gold); letter-spacing:.1em; margin-bottom:.8rem; font-size:1.05rem;
}
.sns{
  display:flex; align-items:center; gap:.9rem;
  border:1px solid var(--line);
  padding:.9rem 1.1rem;
  font-size:.9rem; letter-spacing:.06em; color:#b9b4aa;
  transition:.4s;
}
.sns svg{ width:19px; height:19px; fill:var(--gold); flex-shrink:0; }
.sns:hover{ border-color:var(--gold); color:var(--gold-lite); background:rgba(201,162,90,.05); }
.sns--soon{ opacity:.45; pointer-events:none; }
.sns--soon small{ margin-left:auto; font-size:.68rem; color:var(--mute); }

/* ---------- 7. Finale — 巨大タイポ ---------- */
.finale{
  position:relative; overflow:hidden;
  padding:clamp(6rem,14vw,10rem) 4vw 0;
  text-align:center;
  border-top:1px solid var(--line);
}
.finale__lead{
  font-family:var(--serif-ja); font-weight:500;
  font-size:clamp(1.5rem,3.6vw,2.2rem); letter-spacing:.24em;
  margin-bottom:2.2rem;
}
.finale__giant{
  font-family:var(--serif-en); font-style:italic; font-weight:400;
  font-size:clamp(6rem,19vw,17rem);
  line-height:.72;
  letter-spacing:-.01em;
  white-space:nowrap;
  color:var(--ivory);
  margin-top:clamp(3rem,7vw,5rem);
  transform:translateY(.14em);
  user-select:none;
}
.finale__giant em{ color:var(--gold); font-style:italic; }

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line);
  background:var(--bg-2);
  text-align:center;
  padding:2.6rem 1.4rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.footer__meta{
  font-family:var(--serif-en); font-size:.76rem; letter-spacing:.32em;
  color:var(--gold); text-transform:uppercase;
}
.footer__company{ font-size:.88rem; color:#b9b4aa; letter-spacing:.1em; }
.footer__copy{ font-size:.72rem; color:var(--mute); letter-spacing:.1em; }

/* ============================================================
   Scroll-driven reveal
   最新: CSS scroll-driven animations / fallback: IntersectionObserver
   ============================================================ */
.sd-fade{ opacity:0; transform:translateY(30px); }
.sd-fade.in{
  opacity:1; transform:none;
  transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1);
}
.sd-reveal{ opacity:0; transform:scale(.96); }
.sd-reveal.in{
  opacity:1; transform:none;
  transition:opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.7,.3,1);
}

/* ネイティブ scroll-driven animations 対応ブラウザは CSS だけで動かす */
@supports (animation-timeline: view()) {
  .sd-fade, .sd-reveal{ opacity:1; transform:none; }
  .sd-fade{
    animation:sdFade linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
  }
  .sd-reveal{
    animation:sdReveal linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 70%;
  }
  @keyframes sdFade{
    from{ opacity:0; transform:translateY(34px); }
    to{ opacity:1; transform:none; }
  }
  @keyframes sdReveal{
    from{ opacity:0; transform:scale(.94); filter:brightness(.4); }
    to{ opacity:1; transform:none; filter:brightness(1); }
  }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .entry{ grid-template-columns:1fr; padding:9vh 6vw; gap:2.6rem; }
  .entry__img{ height:48vh; }
  .entry__tate{ display:none; }
  .entry__copy{ padding-right:0; max-width:none; }
  .index{ grid-template-columns:1fr; }
  .index__item{ border-right:none; border-bottom:1px solid var(--line); padding:2.2rem 1.8rem; }
  .index__item:last-child{ border-bottom:none; }
  .info__grid{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:1fr; grid-auto-rows:minmax(220px,32vh); }
  .peek, .peek--tall, .peek--wide{ grid-column:span 1; grid-row:auto; }
  /* タッチ端末はスクロールで .lit が付いて点灯する（JS）ため、基準は暗めのまま */
  .peek img{ filter:brightness(.45) saturate(.85); }
  .peek.lit img{ filter:brightness(.92) saturate(1); transform:scale(1.02); }
  /* Queen 三幕: モバイルは重なりを保ちつつ縦に流す */
  .qs1{ display:block; min-height:0; padding:2vh 0 4vh; }
  .qs1__poster{ height:66vh; }
  .qs1__poster::after{
    background:
      linear-gradient(180deg, var(--bg) 0%, transparent 8%, transparent 60%, var(--bg) 99%),
      linear-gradient(90deg, var(--bg) 0%, transparent 7%, transparent 93%, var(--bg) 100%);
  }
  .qs1__word{
    margin:-16vw 0 0 5vw;
    font-size:clamp(4.2rem,21vw,7rem);
    position:relative; display:block;
  }
  .qs1__tate{ display:none; }
  .qs1__meta{ padding:5vw 5vw 0; }
  .qs2{ display:block; min-height:0; padding:8vh 5vw; margin-top:10vh; }
  .qs2__word{ position:relative; top:auto; left:auto; margin:0 0 1.6rem 0; font-size:clamp(2.6rem,11vw,4rem); z-index:2; }
  .qs2__big{ height:56vh; margin-right:16px; }
  .qs2__copy{ margin-top:2.4rem; position:relative; z-index:2; }
}

@media (max-width:680px){
  .nav{ padding:1rem 1.2rem; }
  .nav__links{
    position:fixed; inset:0; z-index:55;
    flex-direction:column; justify-content:center; gap:2.2rem;
    background:rgba(8,8,9,.97);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    transform:translateX(100%); transition:transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .nav__links.open{ transform:none; }
  .nav__links a{ font-size:1.05rem; }
  .nav__toggle{ display:flex; }
  .door__frame{ inset:14px; }
  .door__frame::before, .door__frame::after{ width:20px; height:20px; }
  .entry__title{ font-size:clamp(1.5rem,6.4vw,1.9rem); }
  .info__list div{ grid-template-columns:88px 1fr; gap:.8rem; }
  .info__sns{ padding:1.4rem; }
  .plan__card::before{ top:10px; left:10px; }
  .plan__card::after{ bottom:10px; right:10px; }
  .finale{ padding-inline:2vw; }
  .finale__giant{ font-size:clamp(4.2rem,21vw,7rem); }
  .footer__meta{ letter-spacing:.2em; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .sd-fade, .sd-reveal{ opacity:1 !important; transform:none !important; }
}