/* ============================================================
   スナックテンプレ（スナック 白宵）v2 — CLAUDE.md参照
   レイアウト: フルスクリーン縦スナップの紙芝居（1画面=1話）。
   基調: 夜黒×真鍮の金。ネオンの店名と明朗会計カードは継続。
   ============================================================ */
:root{
  --yoru:#17141F; --fuka:#201B2C; --kinu:#F2EDE3; --kin:#C9A24B; --usu:#9A93A6;
  --line:rgba(242,237,227,.16);
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--gothic);color:var(--kinu);background:var(--yoru);line-height:1.9;font-size:15px;letter-spacing:.03em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--kin);outline-offset:2px}

/* ---------- 固定ヘッダー（最小限のオーバーレイ） ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:16px 22px;background:linear-gradient(rgba(23,20,31,.85),rgba(23,20,31,0))}
.topbar .brand{font-family:var(--serif);font-size:14px;letter-spacing:.2em}
.topbar .brand strong{color:var(--kin);margin-left:4px}
.topbar nav{display:flex;gap:18px;font-size:12.5px;letter-spacing:.14em}
.topbar nav a{padding:6px 2px;border-bottom:1px solid transparent}
.topbar nav a:hover{border-bottom-color:var(--kin);color:var(--kin)}

/* ---------- 縦スナップの紙芝居（このテンプレの骨格） ---------- */
.deck{height:100vh;height:100svh;overflow-y:auto;scroll-snap-type:y proximity;scroll-behavior:smooth}
.panel{min-height:100vh;min-height:100svh;scroll-snap-align:start;display:grid;place-items:center;padding:90px 22px 70px;position:relative}
.panel-inner{max-width:680px;width:100%;text-align:center}
.panel-no{position:absolute;top:84px;left:26px;font-size:11px;letter-spacing:.4em;color:var(--kin);opacity:.85}
.panel:nth-child(even){background:#14111C}

/* パネル用ドットナビ */
.deck-dots{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:12px}
.deck-dots button{width:9px;height:9px;border-radius:50%;border:1px solid var(--usu);background:transparent;cursor:pointer;padding:0}
.deck-dots button.active{background:var(--kin);border-color:var(--kin);box-shadow:0 0 8px rgba(201,162,75,.8)}

/* ---------- 各話 ---------- */
.neon{font-family:var(--serif);font-size:clamp(44px,9vw,84px);letter-spacing:.3em;color:var(--kin);text-shadow:0 0 10px rgba(201,162,75,.95),0 0 34px rgba(201,162,75,.5),0 0 80px rgba(201,162,75,.3)}
.neon-sub{font-family:var(--serif);font-size:clamp(15px,2.4vw,20px);letter-spacing:.3em;margin-top:18px}
.neon-note{font-size:12px;color:var(--usu);letter-spacing:.14em;margin-top:12px}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.4em;color:var(--usu)}
.scroll-hint::after{content:"";display:block;width:1px;height:34px;background:var(--kin);margin:8px auto 0;animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes flicker{0%,93%,100%{opacity:1}94%{opacity:.55}96%{opacity:1}98%{opacity:.7}}
.neon.flicker{animation:flicker 7s linear infinite}
@media (prefers-reduced-motion:reduce){
  .neon.flicker{animation:none}
  .scroll-hint::after{animation:none;transform:none}
  .deck{scroll-behavior:auto}
}

.panel-title{font-family:var(--serif);font-size:clamp(20px,3.4vw,27px);letter-spacing:.26em;margin-bottom:34px}
.panel-title small{display:block;font-size:11px;letter-spacing:.44em;color:var(--kin);margin-bottom:12px;font-family:var(--gothic)}

.yakusoku{display:grid;gap:14px;text-align:left}
.yakusoku li{list-style:none;background:var(--fuka);border:1px solid var(--line);padding:18px 22px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.yakusoku .num{font-family:var(--serif);color:var(--kin);font-size:20px}
.yakusoku h3{font-size:15px;letter-spacing:.1em;margin-bottom:4px}
.yakusoku p{font-size:13px;color:#CFC8D6}

.price-card{background:var(--fuka);border:1px solid var(--kin);padding:38px 30px}
.price-card .pc-label{font-size:12px;letter-spacing:.4em;color:var(--kin);margin-bottom:12px}
.price-card .pc-price{font-family:var(--serif);font-size:clamp(38px,7vw,54px);letter-spacing:.02em}
.price-card .pc-price small{font-size:14px;letter-spacing:.1em;margin-left:6px;color:var(--usu)}
.price-card .pc-note{font-size:13px;margin-top:14px;color:#CFC8D6}

.mama{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center;text-align:left}
.mama-note{font-size:13.5px;color:#CFC8D6}
.sign{font-family:var(--serif);letter-spacing:.2em;margin-top:14px;color:var(--kin)}

.info-dl{max-width:440px;margin:0 auto;text-align:left}
.info-dl div{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.info-dl dt{width:6.5em;color:var(--usu);flex-shrink:0}

.ph{background:#241F30;border:1px dashed #4A415C;position:relative}
.ph::after{content:attr(data-note);position:absolute;inset:auto 8px 8px 8px;font-size:11px;color:#A79DB8;background:rgba(23,20,31,.85);padding:4px 8px}
.sq-ph{aspect-ratio:3/4}
.wide-ph{aspect-ratio:16/9}

.btn{display:inline-block;background:var(--kin);color:#1A1622;padding:14px 34px;font-size:14px;font-weight:700;letter-spacing:.14em;border:1px solid var(--kin);transition:.2s;cursor:pointer}
.btn:hover{filter:brightness(1.12)}
.btn-ghost{background:transparent;color:var(--kinu);border:1px solid rgba(242,237,227,.5);font-weight:400}
.btn-ghost:hover{border-color:var(--kin);color:var(--kin)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.foot-line{font-size:11px;color:var(--usu);margin-top:34px;letter-spacing:.1em}
.foot-line a{text-decoration:underline}

/* ---------- 下層ページ（通常スクロール・ダーク） ---------- */
.page{min-height:100vh;padding:120px 22px 90px}
.page-inner{max-width:680px;margin:0 auto}
.page h1{font-family:var(--serif);font-size:24px;letter-spacing:.3em;text-align:center;margin-bottom:8px}
.page .en{display:block;text-align:center;font-size:10px;letter-spacing:.5em;color:var(--kin);margin-bottom:44px}
.menu-group{margin-bottom:44px}
.menu-group h2{font-family:var(--serif);font-size:17px;letter-spacing:.24em;margin-bottom:16px;color:var(--kin)}
.menu-list{list-style:none}
.menu-list li{display:flex;align-items:baseline;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line)}
.menu-name{font-family:var(--serif);letter-spacing:.06em}
.menu-dots{flex:1;border-bottom:1px dotted currentColor;opacity:.35;transform:translateY(-4px)}
.menu-price{font-variant-numeric:tabular-nums}
.menu-note{font-size:12px;color:var(--usu);margin-top:12px}
.page p.body{font-size:13.5px;color:#CFC8D6}

/* フォーム（ダーク） */
.form-row{margin-bottom:22px;text-align:left}
.form-row label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.form-row .req{color:var(--kin);font-size:11px;margin-left:6px}
input[type=text],input[type=tel],input[type=email],select,textarea{width:100%;padding:12px;border:1px solid #4A415C;background:var(--fuka);color:var(--kinu);font:inherit}
textarea{min-height:150px}
select option{color:#1A1622}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:12px;color:var(--usu);margin-bottom:22px}
.form-note a{color:var(--kin)}
.form-result{margin-top:18px;font-size:14px;display:none;padding:14px;border:1px solid var(--line);background:var(--fuka)}
.center{text-align:center}

.fade{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.fade.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}

@media (max-width:760px){
  .deck-dots{right:8px;gap:10px}
  .mama{grid-template-columns:1fr;text-align:center}
  .mama .ph{max-width:240px;margin:0 auto}
  .mama-note,.yakusoku{text-align:left}
  .panel{padding:84px 18px 60px}
  .panel-no{top:74px;left:18px}
  .topbar nav{gap:12px;font-size:11.5px}
}