/* BEER GIRLS 2027 来場者向けLP B案（web/lp-b.html）。style.css・lp-base.css（LP共通の土台と選定バー）の後に読む。しぶきの色は style.css。色・書体は style.css の :root、仕様は DESIGN.md。
   組み方は「一杯のジョッキ」：泡の層（クリーム）→注がれた金（炭酸が昇る）→底の夜の乾杯。
   動きは炭酸の1系統（canvas＋泡のボタン）。角丸は泡・粒だけ。影・光彩なし */
.lp-b {
  --gr: var(--g);                /* 右の余白（1024px以上は目盛りの分だけ広げる。.wrap が使う） */
  --liq: clamp(190px, 28svh, 300px); /* ヒーローの液面の高さ（ヒーロー全体の約3割） */
  --gold-soft: color-mix(in srgb, var(--gold) 55%, var(--paper));
  /* このページだけのビールの色（DESIGN.md の --gold は小さな差し色に残す）。液体の面は hi→beer→deep。
     茶の文字（--ink）とのコントラスト：hi 8.3、beer 6.0、deep 4.7。文字の後ろは deep より暗くしない */
  --beer-hi: #FFE08A;   /* 泡のすぐ下 */
  --beer: #F5B82E;      /* 本体 */
  --beer-deep: #E0A020; /* いちばん深いところ */
  --shine: 255 246 214; /* 光の筋・グラスの映り込み（#FFF6D6） */
  --ease: cubic-bezier(.16, 1, .3, 1);
  scrollbar-color: var(--beer) var(--paper);
}
.lp-b ::selection { background: var(--ink); color: var(--paper); }

.lp-b main :is(p, dd, dt, h2, h3) { word-break: auto-phrase; }
.lp-b .night :is(p, h2) { word-break: auto-phrase; }
.lp :is(.hero-copy, .voices li, .origin) { word-break: normal; } /* 折り返しは句の箱の間だけ */

/* ── 泡の層と液面：液面がヒーローを横切る。上（クリームの泡）はロゴと特大のコピー、下（金）にサブコピー・行動・会期が沈む ───────────────────────────── */
.hero {
  --H: max(700px, calc(100svh - var(--picker-h)));
  --gh: calc(var(--H) * .58); /* 売り子の高さ。太ももあたりが液面 */
  /* 重なりの段（奥→手前）。売り子の太ももから下は液面の後ろに沈み、泡の山は液面と同じ段で売り子の前に出る */
  --z-deco: 1; --z-girl: 2; --z-liquid: 3; --z-fizz: 4; --z-text: 5; --z-bubbles: 6; --z-char: 7;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(calc(var(--H) * .57), auto) minmax(calc(var(--H) * .43), auto);
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}
.foam { position: relative; display: grid; grid-template-rows: minmax(130px, auto) 1fr; padding-bottom: 70px; /* 下の70pxは泡のボタンの置き場 */ }
.hero-logo, .hero-main { position: relative; z-index: var(--z-text); }
.hero-logo { padding: 28px var(--g) 0; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(26px, 2.6vw, 40px); line-height: 1; letter-spacing: .02em; }
.hero-main { align-self: center; max-width: 64%; padding: 8px 0 0 var(--g); }
.hero-copy { color: var(--accent); font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(44px, min(6.5vw, 12svh), 104px); line-height: 1.06; letter-spacing: -.01em; }
.nb { white-space: nowrap; }

/* 金の液面：上ほど明るく、下ほど深い琥珀。文字は明るい側に置く */
.liquid {
  grid-area: 2 / 1; position: relative; z-index: var(--z-liquid);
  background: linear-gradient(180deg, var(--beer-hi) 0, var(--beer) 55%, color-mix(in srgb, var(--beer) 50%, var(--beer-deep)) 100%); /* 下端は次の面の上端と同じ色（継ぎ目なし） */
}
.liquid-copy { grid-area: 2 / 1; position: relative; z-index: var(--z-text); max-width: 62%; padding: 76px 0 72px var(--g); }
.hero-sub { font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.5; word-break: auto-phrase; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 28px 0 32px;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: var(--display-weight); font-size: 20px; text-decoration: none;
  transition: background-color .2s;
}
.hero-cta svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.hero-cta:hover { background: var(--sub); }
.hero-cta:hover svg { transform: translateY(3px); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-top: 24px; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.6; }
.hero-date { font-family: var(--display); font-weight: var(--display-weight); font-size: 24px; letter-spacing: .01em; }
.hero-date small { margin: 0 2px 0 3px; font-size: 14px; }

/* 売り子：太ももまで見え、太ももから下は泡の山と液面の後ろへ沈む（重なりの段は .hero の --z-*） */
.hero-girl { --girl-from: -9%; --girl-rest: -5%; position: absolute; z-index: var(--z-girl); right: 14%; bottom: calc(var(--gh) * -.1); width: auto; height: var(--gh); max-width: none; pointer-events: none; transform: translateY(var(--girl-rest)); animation: girl-settle 3.6s cubic-bezier(.35, .05, .25, 1) .4s both; }
/* 売り子の太ももまわりの泡（.girl-foam）。売り子と同じ幅で液面の上に置き、泡の丸が1つずつ下から膨らむ。
   売り子は少し高い位置から、泡が盛り上がるのに合わせてゆっくり沈み、太ももまで泡に埋まって止まる */
/* 泡の丸は、中心が紙色・ふちがうすい金。丸どうしの重なりに細い線が出て、泡の粒の集まりに見える */
.girl-foam { --gw-now: calc(var(--gh) * 562 / 1086); position: absolute; z-index: var(--z-liquid); right: calc(14% - var(--gw-now) * .15); bottom: calc(var(--gw-now) * -.18); width: calc(var(--gw-now) * 1.3); height: auto; overflow: visible; fill: url(#gf-fill); stroke: color-mix(in srgb, var(--beer-deep) 32%, transparent); stroke-width: .7; pointer-events: none; transform-origin: 50% 100%; }
.girl-foam .gf-breathe > circle { transform-box: fill-box; transform-origin: 50% 100%; animation: billow 2.8s cubic-bezier(.16, 1, .3, 1) calc(.5s + var(--i) * .24s) both; }
.gf-breathe { animation: bob 6s ease-in-out 4s infinite; }
.gf-rings circle { fill: none; stroke: color-mix(in srgb, var(--beer-deep) 45%, transparent); stroke-width: 1; opacity: 0; animation: ring-in .8s ease-out 3.4s both; }
@keyframes girl-settle { from { transform: translateY(var(--girl-from)); } to { transform: translateY(var(--girl-rest)); } }
@keyframes billow { from { transform: translateY(35%) scale(.18); } 70% { transform: translateY(-2%) scale(1.05); } to { transform: none; } }
@keyframes ring-in { to { opacity: 1; } }

/* 泡の縁（クリームの丸が重なる。ゆっくり上下する）。液面の下向きと、上向きのかたまり */
.lip { position: absolute; inset: 0 0 auto; width: 100%; height: 56px; fill: var(--paper); overflow: hidden; }
.lip-up { position: absolute; inset: auto -90px calc(100% - 14px) 0; width: calc(100% + 90px); height: 56px; fill: var(--paper); transform: scaleY(-1); overflow: hidden; }
#foam-row circle { animation: bob 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes bob { 50% { transform: translateY(4px); } }
.fizz { position: absolute; display: block; pointer-events: none; }
.fizz-hero { z-index: var(--z-fizz); inset: 0; width: 100%; height: 100%; }
/* 金の面の炭酸：画面の高さの canvas を面の中で貼りつけ（sticky）、粒は面の座標で昇らせる（lp-b.js） */
.fizz-pour { position: sticky; top: 0; width: 100%; height: 100svh; margin-bottom: -100svh; }

/* 今日の乾杯（1024px未満）：液面にまたがる四角い紙の札 */
.puh { display: none; position: absolute; z-index: var(--z-bubbles); left: var(--g); bottom: -44px; gap: 2px; padding: 8px 14px 10px; border: 1px solid var(--ink); background: var(--paper); }
.puh-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.puh-digits { margin: 0; font-family: var(--display); font-weight: var(--display-weight); font-size: 44px; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.puh-note { color: var(--sub); font-size: 13px; line-height: 1.3; }

/* 泡のボタン：丸い泡。押すと弾ける（.fb-body が拡大して消え、1.2秒後に戻る） */
.foam-bubbles { position: absolute; inset: 0; z-index: var(--z-bubbles); pointer-events: none; }
.fb {
  position: absolute; left: var(--x); top: var(--y); bottom: var(--b, auto); width: var(--s); height: var(--s); min-width: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; pointer-events: auto;
  animation: float 6s ease-in-out infinite; animation-delay: var(--d);
}
.fb-body {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--beer-deep) 45%, transparent);
  background: var(--bubble);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.fb-body::after { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 2px solid transparent; border-top-color: rgb(255 255 255 / .95); border-left-color: rgb(255 255 255 / .95); transform: rotate(-14deg); }
/* 飾りの泡：押せない。文字より下に描き、縁のまわりに寄せて泡の層を密にする */
.foam-deco { position: absolute; inset: 0; z-index: var(--z-deco); pointer-events: none; }
.foam-deco i { position: absolute; left: var(--x); bottom: var(--b); top: var(--t, auto); width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--beer-deep) 40%, transparent); background: var(--bubble); }
/* 泡の見え方（押せる泡・飾りの泡）：体はほぼ透明で、ふちに向かって色づく。左上に光の点、内側に明るい縁 */
.fb-body, .foam-deco i {
  --bubble:
    radial-gradient(circle at 31% 27%, #fff 0 6%, rgb(255 255 255 / 0) 12%),
    radial-gradient(circle at 66% 72%, rgb(255 255 255 / 0) 0 58%, rgb(255 255 255 / .8) 64% 68%, rgb(255 255 255 / 0) 73%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .04) 0 40%, color-mix(in srgb, var(--beer) 16%, transparent) 72%, color-mix(in srgb, var(--beer-deep) 34%, transparent) 100%);
}
/* 「押してみて」：手書き風の矢印つき */
.hint { position: absolute; left: calc(30% + 110px); top: 78px; display: flex; align-items: center; gap: 4px; transform: rotate(-4deg); color: var(--ink); font-family: var(--display); font-weight: var(--display-weight); font-size: 15px; white-space: nowrap; pointer-events: none; }
.hint svg { width: 54px; height: 34px; overflow: visible; }
.hint .hint-m { display: none; }
/* 弾けたときのひと言（ありがとう！ など）：泡から出て60px昇りながら消える */
.puh-word { position: absolute; z-index: var(--z-bubbles); transform: translate(-50%, -50%); color: var(--accent); font-family: var(--display); font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none; }
/* ときどき、液面から顔を出すキャラクター（lp-b.js）。枠の下端が液面で、そこより下は切り、下端22pxはぼかして泡に沈んで見せる。
   文字より手前（1.8秒だけ） */
.pop-char { position: absolute; z-index: var(--z-char); padding-top: 56px; transform: translate(-50%, -100%); overflow-x: visible; overflow-y: clip; pointer-events: none; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22px); mask-image: linear-gradient(to top, transparent 0, #000 22px); }
.pop-char-body { position: relative; transform: translateY(calc(100% + 64px)); }
.pop-char img { display: block; width: auto; height: clamp(110px, 13vw, 180px); max-width: none; }
.pop-say { position: absolute; left: 50%; bottom: calc(100% + 6px); display: flex; align-items: center; gap: 4px; margin: 0; padding: 4px 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.3; white-space: nowrap; transform: translateX(-50%); opacity: 0; }
.pop-run { position: absolute; z-index: var(--z-char); left: 0; pointer-events: none; transform: translate(-200%, -100%); }
.pop-run-body { position: relative; transform-origin: 50% 100%; }
.pop-run img { display: block; width: auto; height: clamp(90px, 10vw, 140px); max-width: none; scale: -1 1; } /* 絵は左向き。右へ走るので裏返す */
.pop-run .pop-say { opacity: 0; }
.pop-trail { position: absolute; z-index: var(--z-bubbles); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--beer-deep) 45%, transparent); background: var(--bubble); pointer-events: none; }
.pop-trail { --bubble: radial-gradient(circle at 31% 27%, #fff 0 8%, rgb(255 255 255 / 0) 16%), radial-gradient(circle at 50% 50%, rgb(255 255 255 / .1) 0 45%, color-mix(in srgb, var(--beer) 30%, transparent) 100%); }
.pop-say .heart { width: 14px; height: 13px; color: var(--accent); }
.fb:hover .fb-body { transform: scale(1.06); }
.fb:active .fb-body { transform: scale(.94); }
.fb.is-pop .fb-body { transform: scale(1.7); opacity: 0; transition-duration: .28s; }
.fb.is-reform .fb-body { transform: scale(.3); opacity: 0; transition: none; }
@keyframes float { 50% { transform: translateY(-9px); } }

/* ── 金の面：仲間の言葉と、5つのこと ───────────────────────────── */
.pour { position: relative; overflow: clip; background: linear-gradient(180deg, color-mix(in srgb, var(--beer) 50%, var(--beer-deep)) 0, var(--beer-deep) 42%, var(--beer) 80%, var(--beer-hi) 100%); }
/* 2杯目の金：泡（.lace）のすぐ下が hi。文字のない下の帯（安心の下の余白）だけ deep より暗くして夜へつなぐ */
.pour2 { background: linear-gradient(180deg, var(--beer-hi) 0, var(--beer) 16%, var(--beer-deep) calc(100% - 300px), color-mix(in srgb, var(--beer-deep) 50%, var(--night-mid)) calc(100% - 120px), var(--night-top) 100%); }
/* 液体の光：斜めの光の筋（::before）と、ジョッキの壁に映る縦の光（::after）。どちらも文字の後ろで、ごく薄く */
.liquid::before, .pour::before {
  content: ""; position: absolute; z-index: 0; inset: 0 -30%; pointer-events: none;
  background: linear-gradient(112deg, transparent 10%, rgb(var(--shine) / .16) 15%, transparent 21%, transparent 33%, rgb(var(--shine) / .1) 37%, transparent 42%, transparent 56%, rgb(var(--shine) / .18) 63%, transparent 71%, transparent 82%, rgb(var(--shine) / .09) 86%, transparent 90%);
}
.liquid::before { -webkit-mask-image: linear-gradient(#000 35%, transparent 92%); mask-image: linear-gradient(#000 35%, transparent 92%); animation: shafts 28s ease-in-out infinite alternate; }
.pour::before { -webkit-mask-image: linear-gradient(transparent 0, #000 260px, #000 calc(100% - 200px), transparent); mask-image: linear-gradient(transparent 0, #000 260px, #000 calc(100% - 200px), transparent); } /* 面の継ぎ目で光の筋が切れて見えないように、上下を薄くする */
@keyframes shafts { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
.liquid::after, .pour::after {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, rgb(var(--shine) / .34) clamp(5px, 1.2%, 18px), transparent clamp(18px, 3.6%, 54px), transparent calc(100% - clamp(22px, 4.2%, 62px)), rgb(var(--shine) / .26) calc(100% - clamp(8px, 1.6%, 24px)), transparent 100%);
}
.pour2::after { -webkit-mask-image: linear-gradient(#000 calc(100% - 320px), transparent calc(100% - 140px)); mask-image: linear-gradient(#000 calc(100% - 320px), transparent calc(100% - 140px)); }
.pour2::before { -webkit-mask-image: linear-gradient(transparent 0, #000 200px, #000 calc(100% - 320px), transparent calc(100% - 140px)); mask-image: linear-gradient(transparent 0, #000 200px, #000 calc(100% - 320px), transparent calc(100% - 140px)); }
.pour > section { position: relative; z-index: 1; }
.words { padding: clamp(64px, 8vw, 110px) 0 clamp(16px, 2vw, 28px); }
.origin { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(30px, 5.6vw, 84px); line-height: 1.22; letter-spacing: -.02em; max-width: 14.5em; text-wrap-style: balance; }
.words-body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(32px, 6vw, 96px); margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--ink); }
.words-story, .words-lead { font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; line-height: 1.8; }
/* 仲間の声：左右に振り、見えたところから泡のように昇って着く。いちばん大きいのは「やろう！」 */
.voices { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 3.2vw, 46px); margin-top: clamp(28px, 3.4vw, 52px); }
.voices li { display: block; max-width: 22em; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(22px, 2.6vw, 38px); line-height: 1.4; word-break: auto-phrase; text-wrap-style: balance; }
.voices .r { justify-self: end; text-align: right; }
.voices .l2 { margin-left: clamp(0px, 8vw, 140px); font-size: clamp(20px, 2.2vw, 32px); }
.voices .yarou { max-width: none; font-size: clamp(28px, 4vw, 60px); line-height: 1.3; }
/* 「やろう！」だけ大きく（面や色は足さない）。閉じの」も同じ大きさの箱に入れる */
.foam-patch { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 1.7em; line-height: 1.1; letter-spacing: -.01em; }
/* 仲間の声は、泡のかたまりから生まれて昇る。書き出しの下に小さな粒を寄せる */
.voices li { position: relative; }
.voices li::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: calc(100% - 10px); width: 76px; height: 48px;
  --f: color-mix(in srgb, var(--paper) 62%, transparent); --r: color-mix(in srgb, var(--paper) 90%, transparent);
  background:
    radial-gradient(circle at 14px 34px, var(--f) 0 8px, transparent 8.6px),
    radial-gradient(circle at 38px 26px, transparent 0 5.2px, var(--r) 5.6px 6.6px, transparent 7px),
    radial-gradient(circle at 26px 12px, var(--f) 0 4px, transparent 4.6px),
    radial-gradient(circle at 8px 10px, transparent 0 3px, var(--r) 3.4px 4.2px, transparent 4.6px),
    radial-gradient(circle at 54px 8px, var(--f) 0 3px, transparent 3.6px),
    radial-gradient(circle at 60px 34px, transparent 0 3.2px, var(--r) 3.6px 4.4px, transparent 4.8px);
}
.voices .r::before { left: auto; right: 0; transform: scaleX(-1); }
.rise-ready li { opacity: 0; transform: translateY(72px); }
.rise-ready li.in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.3s var(--ease); }
.rise-ready li:nth-child(even).in { transition-delay: .12s; }

.things { padding: clamp(24px, 3vw, 44px) 0 clamp(80px, 10vw, 150px); }
.things-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.things-head { display: grid; gap: 16px; }
.things-head h2 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(34px, 4.6vw, 64px); line-height: 1.15; }
.things-head p { font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; }
/* 1本の泡の道：下の小さな粒から、上の大きな泡へ。線は泡の中心を通る */
.stream { display: grid; gap: 44px; }
.stream li { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.stream li:not(:last-child)::before {
  /* 泡と泡のあいだ：小さな泡の粒が連なって昇る（同じ泡の絵を7pxで並べ、3つに1つだけ見せて間をあける） */
  content: ""; position: absolute; left: 34.5px; width: 7px; top: calc(14px + var(--s)); bottom: -38px; /* 泡の絵は透けるので、線は泡の下から次の泡の上まで */
  background: url(img/bubble-c.png) center top / 7px 7px repeat-y; opacity: .8;
  -webkit-mask-image: repeating-linear-gradient(#000 0 7px, transparent 7px 21px); mask-image: repeating-linear-gradient(#000 0 7px, transparent 7px 21px);
}
.sb { position: relative; z-index: 1; grid-row: 1 / 3; justify-self: center; width: var(--s); height: var(--s); max-width: none; margin-top: 6px; rotate: var(--r, 0deg); }
.stream h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; }
.stream p { margin-top: 4px; }
.aside { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; }
.things-close { grid-column: 1 / -1; margin-top: clamp(8px, 2vw, 24px); padding-top: 24px; border-top: 1px solid var(--ink); font-size: clamp(19px, 1.9vw, 26px); font-weight: 700; }

/* ── 2杯目：飲めても、飲めなくても（クリームの面） ───────────────────────────── */
.drinks { position: relative; padding: clamp(96px, 11vw, 150px) 0 clamp(56px, 7vw, 96px); background: var(--paper); }
.rise-edge { position: absolute; inset: -55px 0 auto; width: 100%; height: 56px; fill: var(--paper); pointer-events: none; transform: scaleY(-1); }
.drinks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drink { position: relative; display: grid; justify-items: start; align-content: start; gap: 10px; padding: 0 clamp(24px, 4vw, 64px); }
.drink:first-child { padding-left: 0; }
.drink + .drink { padding-right: 0; border-left: 1px solid var(--line); }
.lp .drink-h { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(40px, 5vw, 76px); line-height: 1.1; letter-spacing: -.02em; text-wrap: nowrap; }
.drink-h.soft { color: var(--accent); }
.drink-btn { position: relative; display: block; width: min(100%, 420px); margin: 12px 0 8px; padding: 0; border: 0; background: none; cursor: pointer; }
.drink-btn img { width: 100%; height: auto; margin: 0; aspect-ratio: 3 / 2; object-fit: contain; }
/* 押すとグラスがぶつかる：夜の乾杯（style.css の .night、web/toast.js）と同じ仕掛けを、この面だけに当てる（lp-b.js） */
.drink-btn .glass { position: absolute; inset: 0; pointer-events: none; }
.drink-btn .piece { position: absolute; inset: 0; height: 100%; visibility: hidden; }
.drink-btn.clinking .whole { visibility: hidden; }
.drink-btn.clinking .piece { visibility: visible; }
.drink-btn .carbonation { position: absolute; overflow: hidden; pointer-events: none; }
.drink-btn .carbonation i { position: absolute; left: var(--x); bottom: -8%; width: var(--size); aspect-ratio: 1; border-radius: 50%; border: .6px solid rgb(255 249 220 / .8); background: radial-gradient(circle at 30% 25%, #fff9df 0 12%, transparent 45%); opacity: 0; animation: beer-rise var(--duration) linear var(--delay) infinite paused; }
.drinks-grid.carbonating .carbonation i { animation-play-state: running; }
.drink-btn:focus-visible { outline-offset: 4px; }
.splashes { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.splashes > * { position: absolute; display: block; max-width: none; }
/* 液面で跳ねる小さな粒（.pop）も、しぶきと同じ色 */
.drink-btn .pop { position: absolute; border-radius: 50%; pointer-events: none; }
.drink h3 { font-size: 22px; font-weight: 700; line-height: 1.4; }
.drink p:not(.drink-h) { color: var(--sub); max-width: 26em; }
.drinks-note { margin-top: 40px; font-size: 15px; }

/* ── 目印とコースター（金の面） ───────────────────────────── */
.find { position: relative; padding: clamp(80px, 9vw, 120px) 0 clamp(72px, 9vw, 120px);  scroll-margin-top: var(--picker-h); }
.lace { position: absolute; inset: 0 0 auto; width: 100%; height: 56px; fill: var(--paper); transform: scaleY(.62); transform-origin: top; pointer-events: none; }
.find-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.find-img { width: 100%; height: auto; border: 1.5px solid var(--ink); }
.find-text { display: grid; gap: 24px; }
.find-text h2 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(40px, 5.4vw, 80px); line-height: 1.12; letter-spacing: -.02em; }
.find-text p { font-size: 17px; font-weight: 700; }
/* 吊り下げの黒板メニュー：釘から2本のひもで下がり、少し傾いて止まる。触れると振り子のように揺れて落ち着く（lp-b.js） */
.menu-hang { --tilt: -3deg; position: relative; width: min(100%, 700px); margin: clamp(40px, 5vw, 72px) 0 56px auto; padding-top: 72px; transform-origin: 50% 0; transform: rotate(var(--tilt)); }
.nail { position: absolute; top: 0; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.strings { position: absolute; top: 6px; left: 4%; width: 92%; height: 68px; color: var(--ink); overflow: visible; }
.menu-board {
  position: relative; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px) 132px;
  border: 3px solid color-mix(in srgb, var(--sub) 65%, var(--gold)); background: var(--ink); color: var(--paper);
}
.menu-title { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; }
.chalk-line { display: block; width: min(320px, 70%); height: 12px; margin: 4px 0 12px; color: var(--line); }
.menu-rows > div { display: flex; align-items: baseline; gap: 4px 10px; padding: 9px 0; }
.menu-rows dt { display: flex; flex: 1 1 auto; align-items: baseline; gap: 8px; min-width: 0; color: var(--line); font-size: 15px; font-weight: 700; white-space: nowrap; }
.menu-rows dt::after { content: ""; flex: 1 1 16px; min-width: 16px; border-bottom: 2px dotted color-mix(in srgb, var(--paper) 55%, transparent); transform: translateY(-4px); }
.menu-rows dd { flex: 0 1 auto; max-width: 62%; text-align: right; font-size: 16px; }
.menu-rows .undecided dd { color: var(--gold); font-size: 15px; font-weight: 700; }
/* 予約：黒板の角にとめた紙の札。逆向きに少し傾ける */
.menu-tag { position: absolute; right: 18px; bottom: -34px; display: grid; gap: 10px; width: min(340px, calc(100% - 36px)); padding: 16px 18px 18px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); transform: rotate(7deg); overflow: hidden; }
.menu-tag::before { content: ""; position: absolute; top: -8px; left: 50%; width: 56px; height: 18px; margin-left: -28px; background: color-mix(in srgb, var(--gold) 55%, transparent); transform: rotate(-4deg); }
.menu-tag > * { position: relative; }
.reserve-btn { min-height: 48px; padding: 0 22px; border: 1.5px dashed var(--sub); background: transparent; color: var(--sub); font-family: var(--display); font-weight: var(--display-weight); font-size: 19px; cursor: not-allowed; }
.reserve-note { color: var(--ink); font-size: 14px; line-height: 1.7; }

/* ── 安心：金が深くなり、夜の底へ。文字は金の上（茶）に置き、深くなる帯には文字を置かない ───────────────────────────── */
.safe { padding: clamp(56px, 7vw, 96px) 0 260px;  border-top: 1px solid var(--ink); }
.safe-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 80px); }
.safe-grid h2 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(28px, 3vw, 40px); line-height: 1.3; }
.safe-rows > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 4px 20px; padding: 16px 0; border-top: 1px solid var(--ink); }
.safe-rows > div:last-child { border-bottom: 1px solid var(--ink); }
.safe-rows dt { font-size: 17px; font-weight: 700; }
.safe-rows dd { font-weight: 700; }

/* ── ジョッキの底：夜の乾杯。夜の紙面（style.css）を帯の中央に置き、下に乾杯の数 ───────────────────────────── */
.lp-night-band { position: relative; background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 55%, var(--night-floor) 100%); }
.lp-night-band :focus-visible { outline-color: var(--gold); }
.lp-night { max-width: 1440px; margin: 0 auto; }
.lp-night .foot { display: none; }
.tally { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; padding: 22px var(--g) 30px; background: var(--night-floor); color: var(--paper); }
.tally-title { margin: 0; color: var(--line); font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.tally-digits { margin: 0; color: var(--gold); font-family: var(--display); font-weight: var(--display-weight); font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tally-note { margin: 0; color: var(--line); font-size: 14px; }
.lp .night .hope { font-size: max(calc(19 * var(--u)), 16px); }
.lp .night .sign { font-size: max(calc(14 * var(--u)), 12px); }
.lp .night :is(h2, .headline) { word-break: auto-phrase; }
.lp .night .headline { margin-top: calc(-22 * var(--u)); }

/* 炭酸の一時停止（JSが動くときだけ出る） */
.fizz-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 14px 0 12px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font: 700 14px/1 var(--body); white-space: nowrap; cursor: pointer;
}
.fizz-toggle[hidden] { display: none; }
.fizz-toggle svg { width: 16px; height: 16px; }
.fizz-toggle .i-play, .fizz-toggle[aria-pressed="true"] .i-pause { display: none; }
.fizz-toggle[aria-pressed="true"] .i-play { display: inline; }
.fizz-toggle:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); }
.fizz-toggle:focus-visible { outline-offset: 3px; }
.is-paused #foam-row circle, .is-paused .fb, .is-paused .hero-girl, .is-paused .girl-foam circle, .is-paused .girl-foam g, .is-paused .liquid::before, .is-paused .gauge-beer i, .is-paused .lp-b .carbonation i, .is-paused .drinks-grid.carbonating .carbonation i { animation-play-state: paused; }

/* 読んだぶんだけ注がれるジョッキ：右端に固定（1024px以上）。--p（0〜1）はスクロールの進み具合。
   背の高いビールグラス。85%で満杯になり（液面にはいつも泡の層）、そこから泡がふちにかぶさってあふれ、外側を垂れる。角は0（泡と粒だけ丸い） */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.gauge { display: none; }
@media (min-width: 1024px) {
  .lp-b { --gr: max(var(--g), 84px); }
  .gauge { display: block; position: fixed; z-index: 15; right: 16px; top: calc(50% + 70px); width: 64px; height: min(38svh, 340px); transform: translateY(-50%); opacity: var(--o, 1); pointer-events: none; }
  .gauge-glass { --fill: min(1, calc(var(--p) / .85)); --level: calc(var(--fill) * (100% - 18px)); position: absolute; inset: 0 0 0 auto; width: 46px; border: 1.5px solid var(--ink); border-top: 0; border-bottom-width: 6px; background: rgb(255 255 255 / .55); }
  .gauge-beer { position: absolute; inset: auto 0 0; height: var(--level); overflow: hidden; background: linear-gradient(180deg, var(--beer-hi), var(--beer) 45%, var(--beer-deep)); }
  .gauge-beer i { position: absolute; left: var(--x); bottom: -6px; width: 4px; height: 4px; border-radius: 50%; border: 1px solid rgb(var(--shine) / .9); animation: gauge-rise 3.2s linear infinite; animation-delay: var(--d); }
  .gauge-head {
    position: absolute; left: 0; right: 0; bottom: calc(var(--level) - 3px); height: calc(12px + var(--fill) * 6px); opacity: min(1, calc(var(--p) * 12));
    background: radial-gradient(circle at 5px 6px, var(--paper) 5px, transparent 5.5px) 0 0 / 10px 12px repeat-x, linear-gradient(var(--paper), var(--paper)) 0 6px / 100% 8px no-repeat;
    border-bottom: 1px solid color-mix(in srgb, var(--beer-deep) 40%, transparent);
  }
  .gauge-spill { position: absolute; left: 0; top: 0; opacity: clamp(0, calc((var(--p) - .83) * 14), 1); }
  .gauge-spill i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--beer-deep) 45%, transparent); background: var(--paper); transform: scale(clamp(.3, calc((var(--p) - .82) * 9), 1)); }
  .gauge-spill .drip { top: calc(var(--y) + clamp(0px, calc((var(--p) - .87) * 500px), 26px)); } /* 外側を少し垂れる */
  .gauge-count { position: absolute; right: 0; bottom: calc(100% + 34px); display: grid; justify-items: end; padding: 6px 10px 8px; border: 1px solid var(--ink); background: var(--paper); text-align: right; white-space: nowrap; }
  .gauge-count-t { font-size: 12px; font-weight: 700; line-height: 1.3; }
  .gauge-count-n { font-family: var(--display); font-weight: var(--display-weight); font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .gauge-count-s { color: var(--sub); font-size: 12px; line-height: 1.3; }
  @supports (animation-timeline: scroll()) {
    .gauge { animation: gauge-pour linear both, gauge-out linear both; animation-timeline: scroll(root), scroll(root); }
  }
}
@keyframes gauge-pour { to { --p: 1; } }
@keyframes gauge-rise { to { transform: translateY(-120px); opacity: 0; } }
@keyframes gauge-out { 0%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* タブレット：構成はそのまま、売り子を小さく。乾杯の数は液面の札に */
@media (min-width: 720px) and (max-width: 1023px) {
  .hero { --H: min(max(640px, calc(100svh - var(--picker-h))), 760px); }
  .hero-main { max-width: 60%; }
  .hero-copy { font-size: clamp(44px, 6.2vw, 64px); }
  .hero-girl { right: 6%; }
  .girl-foam { right: calc(6% - var(--gw-now) * .15); }
  .liquid-copy { max-width: 66%; }
  .puh { display: grid; }
  .fb:nth-child(2), .fb:nth-child(3), .fb:nth-child(6), .foam-deco i:nth-child(n+9) { display: none; }
}
@media (max-width: 1023px) {
  .things-grid { grid-template-columns: minmax(0, 1fr); }
  .things-head { position: static; }
  .words-body { grid-template-columns: minmax(0, 1fr); }
  .find-grid { grid-template-columns: minmax(0, 1fr); }
  .find-text { order: -1; }
}

/* スマートフォン：コピーの下がすぐ液面。売り子は小さめにして見出しと重ねない。胸の下から泡に沈む（場所が足りないため） */
@media (max-width: 719px) {

  .hero { --gw: clamp(112px, 32vw, 150px); grid-template-rows: auto auto; }
  .foam { grid-template-rows: auto auto; padding-bottom: 176px; }
  .hero-logo { padding: 20px var(--g) 0; font-size: 24px; }
  .hero-main { max-width: none; padding: 14px var(--g) 0; }
  .hero-copy { font-size: clamp(32px, 9.8vw, 60px); }
  .hero-girl { right: 4%; width: var(--gw); height: auto; bottom: calc(var(--gw) * -.46); }
  .girl-foam { --gw-now: var(--gw); right: calc(4% - var(--gw-now) * .15); }
  .liquid-copy { max-width: none; padding: 76px var(--g) 52px; }
  .hero-sub { font-size: 18px; }
  .hero-cta { min-height: 52px; padding: 0 18px 0 20px; font-size: 18px; }
  .hero-meta { flex-direction: column; gap: 2px; font-size: 13px; }
  .hero-date { font-size: 18px; }
  .puh { display: grid; bottom: -40px; padding: 6px 12px 8px; }
  .puh-title, .puh-note { font-size: 12px; white-space: nowrap; }
  .puh-digits { font-size: 36px; }
  .foam-bubbles, .foam-deco { inset: auto 0 0 0; height: 176px; }
  .foam-deco i:nth-child(n+7), .foam-deco i.t { display: none; }
  .hint { left: calc(6% + 58px); top: 8px; align-items: flex-start; }
  .hint .hint-d { display: none; }
  .hint .hint-m { display: block; width: 36px; height: 44px; margin-left: -40px; margin-right: 6px; }
  .fb { top: auto; }
  /* 位置と大きさはHTMLの style（--x・--s）に書いてあるので、スマートフォン幅は別の名前（--xm・--sm）で置き直す */
  .fb { left: var(--xm); width: var(--sm); height: var(--sm); }
  .fb:nth-child(1) { --xm: 6%; --sm: 56px; bottom: 66px; }
  .fb:nth-child(2) { --xm: 28%; --sm: 48px; bottom: 72px; }
  .fb:nth-child(4) { --xm: 44%; --sm: 50px; bottom: 66px; }
  .fb:nth-child(3), .fb:nth-child(5), .fb:nth-child(6) { display: none; }

  .voices li { font-size: 20px; }
  .voices .l2 { margin-left: 1em; font-size: 18px; }
  .voices .yarou { font-size: clamp(24px, 7.6vw, 36px); }
  .stream { gap: 36px; }
  .stream li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; }
  .stream li:not(:last-child)::before { left: 24.5px; top: calc(10px + var(--s) * .8); bottom: -32px; }
  .sb { transform: scale(.8); transform-origin: top center; }
  .drinks-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .drink { padding: 0; }
  .drink + .drink { border-left: 0; border-top: 1px solid var(--line); padding-top: 40px; }
  .lp .drink-h { font-size: clamp(38px, 11vw, 64px); }
  .drink-btn { width: min(92%, 380px); }
  .menu-hang { --tilt: -1.5deg; margin-left: 0; margin-bottom: 72px; }
  .menu-board { padding-bottom: 168px; }
  .menu-rows > div { flex-wrap: wrap; }
  .menu-rows dt::after { display: none; }
  .menu-rows dd { flex: 1 1 100%; max-width: none; text-align: left; }
  .menu-tag { right: 12px; width: calc(100% - 24px); }
  .safe-grid { grid-template-columns: minmax(0, 1fr); }
  .safe-rows > div { grid-template-columns: minmax(0, 1fr); }
  .lp .night .headline { font-size: min(calc(40 * var(--u)), 9.2vw); }
  .tally-digits { font-size: 32px; }
}

/* 動きを減らす設定：粒はJSが止め、泡のゆらぎ・縁の上下・昇る言葉は止める */
@media (prefers-reduced-motion: reduce) {
  #foam-row circle, .fb { animation: none; }
  .gauge-beer i { display: none; }
  .liquid::before, .hero-girl, .girl-foam * { animation: none !important; }
  .gf-rings circle { opacity: 1; }
  .fb-body, .hero-cta, .hero-cta svg { transition: none; }
  .drink-btn .carbonation { display: none; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  .gauge, .fizz-toggle, .fizz, .foam-bubbles, .foam-deco { display: none !important; }
  .hero { min-height: 0; }
  .rise-ready li { opacity: 1; transform: none; }
}