/* 乃音：赤提灯と、町の灯り。
   基本の形は動かなくても読めるように書き、動く時の形は .motion の下に書く */

:root {
  --enji: #7e1a2a;       /* 地の臙脂 */
  --enji-hi: #9a2638;
  --enji-lo: #5c1220;
  --beni: #c41f3e;       /* ロゴの紅 */
  --shiro: #f3f1ec;      /* 白練 */
  --kami: #faf8f4;       /* 品書きの紙 */
  --sumi: #23201f;       /* 墨 */
  --sumi-soft: #6a625d;
  --ki: #b8773a;         /* 木。細い線にだけ */
  --yoi: #1d1718;        /* 夕暮れの墨 */
  --rule: rgba(35, 32, 31, .16);

  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --gutter: clamp(20px, 6vw, 64px);
  --dock-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--shiro);
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
  overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 16px; padding-bottom: 0; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
small { display: block; font-size: .8em; color: var(--sumi-soft); letter-spacing: .03em; }
:focus-visible { outline: 2px solid var(--beni); outline-offset: 4px; }

/* 写真の色味をそろえる */
.shot, .plate img, .strip img {
  filter: saturate(1.04) contrast(1.06) sepia(.06) brightness(1.01);
}

/* 夕暮れの地。下の方に町の灯りの赤みが残る。うっすら粒子を重ねる */
.dusk {
  position: relative;
  background: radial-gradient(130% 70% at 50% 108%, #4a1f26 0%, #2b1c1e 48%, var(--yoi) 100%);
  color: var(--shiro);
  isolation: isolate;
}
.dusk::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .1;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* 音の線 */
.wave { display: block; width: 100%; overflow: visible; }
.wave path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

/* 字がせり上がる時の窓 */
.mask { display: inline-block; overflow: hidden; vertical-align: top; }
.mask > .ch { display: inline-block; }

/* ── 赤提灯（入口・終わりで使う） ─────────── */
/* 置き場所（.hero-lantern / .outro-lantern）に高さを決めると、幅は 2:3 で決まる */
.chochin { position: absolute; inset: 0; transform-origin: 50% 0; }
.chochin svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .4)); }
.cord {
  position: absolute; left: 50%; bottom: 97.6%;
  width: 1.5px; height: var(--cord, 80px); margin-left: -.75px;
  background: linear-gradient(rgba(243, 241, 236, 0), rgba(243, 241, 236, .5));
}
.c-paper { fill: #3a1519; }
.c-lit { fill: url(#chochin-lit); }
.c-ribs path { fill: none; stroke: rgba(70, 8, 20, .42); stroke-width: 1.6; }
.c-name text { font-family: var(--mincho); font-weight: 800; font-size: 66px; text-anchor: middle; fill: rgba(28, 10, 12, .84); }
.c-cap { fill: url(#chochin-cap); }
.c-hook { fill: none; stroke: #2a2524; stroke-width: 3; }
/* 灯の周りの光 */
.glow {
  position: absolute; left: -75%; right: -75%; top: -32%; bottom: -32%;
  background: radial-gradient(closest-side, rgba(244, 86, 92, .55), rgba(196, 31, 62, .2) 45%, rgba(196, 31, 62, 0) 100%);
  pointer-events: none;
}

/* 町の灯り：ぼけた小さな灯 */
.lights { position: absolute; inset: 0; pointer-events: none; }
.lights i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #f1c27f;
  box-shadow: 0 0 calc(var(--s) * 1.8) calc(var(--s) * .5) rgba(241, 170, 96, .35);
  filter: blur(1px);
  opacity: .55;
}
.lights i:nth-child(3n) { background: #f4e6cf; box-shadow: 0 0 calc(var(--s) * 1.8) calc(var(--s) * .4) rgba(244, 230, 207, .25); }
.lights i:nth-child(4n) { background: #ea8a72; box-shadow: 0 0 calc(var(--s) * 1.8) calc(var(--s) * .5) rgba(234, 120, 100, .3); }

/* ── 常に出す帯 ─────────────────────────── */
.dock {
  position: fixed; z-index: 60;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding: 0 max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 4px;
  background: rgba(243, 241, 236, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  color: var(--sumi);
}
.dock-brand { display: none; }
.dock-status {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .02em;
}
.lamp { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #a39a93; }
.dock-status[data-state="open"] .lamp { background: var(--beni); box-shadow: 0 0 0 4px rgba(196, 31, 62, .16); animation: lamp 2.4s ease-in-out infinite; }
@keyframes lamp { 50% { box-shadow: 0 0 0 7px rgba(196, 31, 62, 0); } }
.dock-actions { display: flex; align-items: center; gap: 2px; }
.dock-link {
  width: 50px; height: var(--dock-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 10px; font-weight: 700; text-decoration: none; letter-spacing: .08em;
}
.dock-link svg { width: 20px; height: 20px; fill: currentColor; }
.dock-cta {
  margin-left: 6px;
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 18px;
  background: var(--beni); color: #fff;
  border-radius: 2px;
  font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: .1em;
}
@media (min-width: 900px) {
  .dock {
    top: 0; bottom: auto; height: 68px;
    padding: 0 var(--gutter); gap: 28px;
    background: transparent; border-top: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--shiro);
    transition: background-color .4s, color .4s, border-color .4s;
    border-bottom: 1px solid transparent;
  }
  .dock.on-paper {
    background: rgba(243, 241, 236, .92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: var(--sumi); border-bottom-color: var(--rule);
  }
  .dock-brand { display: block; font-family: var(--mincho); font-weight: 800; font-size: 22px; text-decoration: none; letter-spacing: .14em; }
  .dock-status { justify-content: center; }
  .dock-link { flex-direction: row; width: auto; height: auto; gap: 6px; padding: 0 10px; font-size: 13px; }
  .dock-link svg { width: 16px; height: 16px; }
}

/* ── 入口 ─────────────────────────────── */
/* スマホは上に紅の地とロゴ・下に店先。パソコンは左に紅の地とロゴ・右に店先
   --k：紅の地が引いた割合（0〜1。スクロールで JS が動かす）。--split：紅の地のはじめの高さ（スマホ） */
.hero {
  --k: 0;
  --split: 46svh;
  --logo: min(74vw, 38svh);
  height: 100svh; min-height: 600px;
  overflow: hidden;
  background: var(--yoi);
  color: var(--shiro);
}
@media (min-width: 900px) { .hero { --logo: min(32vw, 58vh); } }

/* 店先の絵 */
.scene { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--split) * (1 - var(--k))); z-index: 0; overflow: hidden; }
@media (min-width: 900px) { .scene { top: 0; left: calc(50% * (1 - var(--k))); } }
.scene-still, .scene-gl, .scene-ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-still { object-fit: cover; object-position: 60% 46%; }
.scene-gl, .scene-ink { opacity: 0; visibility: hidden; }
/* 字が読めるよう、下だけ少し暗く */
.scene-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(20, 16, 18, 0) 55%, rgba(20, 16, 18, .55));
}

/* 乃音の紅の地：ロゴと同じ、紅に桃色の光沢が斜めに入る */
.brand {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: calc(var(--split) * (1 - var(--k)));
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0) 30%, rgba(255, 214, 220, .3) 50%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(120% 90% at 30% 20%, #b0303f, #8f1a22 55%, #761219);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
@media (min-width: 900px) { .brand { bottom: 0; height: auto; right: auto; width: calc(50% * (1 - var(--k))); } }
.brand::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .1; mix-blend-mode: overlay;
}
/* スマホ：紅の地の下の縁を、お店の赤い幕のように四つの山にする */
.brand::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 20px;
  background: radial-gradient(ellipse 50% 100% at 50% 0, #7a141b 97%, transparent 100%) 0 0 / 25% 100% repeat-x;
  /* 紅の地が引き切ったら、山の縁も画面の上へ消す */
  transform: translateY(calc(var(--k) * -110%));
}
@media (min-width: 900px) { .brand::after { display: none; } }

/* ロゴ：紅の地の縁に付いて動く（地が引くと、一緒に画面の外へ出る） */
.logo {
  position: absolute; margin: 0;
  width: var(--logo); height: var(--logo);
  left: 50%; bottom: calc(var(--split) / 2 - var(--logo) / 2 + 6px);
  transform: translateX(-50%);
}
@media (min-width: 900px) {
  .logo { left: auto; bottom: auto; top: 50%; right: calc(25vw - var(--logo) / 2); transform: translateY(-50%); }
}
.logo img {
  width: 100%; height: 100%;
  /* 筆で円を描くように見せる：--a の角度まで見せる */
  -webkit-mask: conic-gradient(from -60deg, #000 var(--a, 360deg), transparent 0);
  mask: conic-gradient(from -60deg, #000 var(--a, 360deg), transparent 0);
}

/* 灯が点いていく間の言葉 */
.captions { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cap {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--dock-h) + 9svh);
  font-family: var(--mincho); font-weight: 600; font-size: clamp(22px, 6.2vw, 34px); line-height: 1.8; letter-spacing: .12em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.motion .cap { visibility: hidden; }
.cap-2 { text-align: right; }
@media (min-width: 900px) {
  .cap { left: calc(var(--gutter) + 3vw); right: auto; width: 40vw; bottom: 14vh; text-align: left; }
}
/* 動く時：行の脇に紅の細い線を引き、字は1字ずつ出す（main.js の capIn） */
.motion .cap { padding-left: 20px; }
.motion .cap::before {
  content: ""; position: absolute; left: 0; top: .5em; bottom: .5em; width: 2px;
  background: #e0485a; box-shadow: 0 0 10px rgba(224, 72, 90, .6);
  transform: scaleY(var(--rule, 1)); transform-origin: 50% 0;
}
/* 字を1字ずつ包むと「、」の前でも折り返すので、行の中では折り返さない */
.cap-line { display: block; white-space: nowrap; }
@media (max-width: 899px) { .motion .cap { font-size: clamp(19px, 5.6vw, 30px); } }
.cap .ch { display: inline-block; }
@media (max-width: 899px) {
  .motion .cap-2 { padding-left: 0; padding-right: 20px; }
  .motion .cap-2::before { left: auto; right: 0; }
}

/* 自動で進む所の「関」：ページがここで止まり、下へ送り続ける（輪が満ちる）か押すと、自動で進む */
.gate {
  position: fixed; left: 50%; z-index: 40; translate: -50% 0;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 22px);
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px 8px 8px; border: 0; border-radius: 999px;
  background: rgba(20, 16, 18, .55); color: #f3f1ec;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: inherit; cursor: pointer; visibility: hidden;
}
@media (min-width: 900px) { .gate { bottom: 40px; } }
.gate.is-light { background: rgba(251, 248, 241, .9); color: var(--sumi); box-shadow: 0 0 0 1px rgba(35, 32, 31, .15); }
.gate svg { width: 44px; height: 44px; flex: none; rotate: -90deg; }
.gate circle { fill: none; stroke-width: 2.5; }
.gate-track { stroke: currentColor; opacity: .25; }
.gate-fill { stroke: #e0485a; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--g, 0)); }
/* 再生の三角（押すと進む）。輪ごと -90° 回してあるので、三角は +90° 戻す。押してほしい印として、ゆっくり脈打つ */
.gate-arrow { fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; rotate: 90deg; transform-origin: 24px 24px; animation: gate-nudge 1.6s ease-in-out infinite; }
@keyframes gate-nudge { 50% { scale: 1.12; } }
.gate-text { display: grid; text-align: left; line-height: 1.3; }
.gate-text b { font-family: var(--mincho); font-weight: 800; font-size: 16px; letter-spacing: .16em; }
.gate-text small { font-size: 11px; letter-spacing: .12em; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .gate-arrow { animation: none; } }
/* 関を勢いで越えた時、ほんの少しの間ページのスクロールを止めて、スマホの惰性を切る（main.js の holdAt） */
html.gate-lock, html.gate-lock body { overflow: hidden; }
/* 動かない時は、言葉は出さない（紅の地とロゴだけを見せる） */
html:not(.motion) .captions { display: none; }
/* 入口が止まっている間に場面が進む長さ */
.motion main { margin-top: 475svh; }
.frame { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); z-index: 5; pointer-events: none; }
.frame rect { fill: none; stroke: rgba(243, 241, 236, .3); stroke-width: 1; }
.hero-inner {
  position: relative; z-index: 4;
  height: 100%;
  padding: max(30px, env(safe-area-inset-top)) var(--gutter) 0;
  transform-origin: 50% 30%;
  pointer-events: none;
}
.hero-inner a { pointer-events: auto; }
@media (min-width: 900px) { .hero-inner { padding-top: 96px; } }
.hero-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 500; letter-spacing: .3em;
  opacity: .8;
}
.hero-side {
  position: absolute; left: 22px; top: 50%;
  writing-mode: vertical-rl; transform: translateY(-50%);
  font-family: var(--mincho); font-size: 10px; letter-spacing: .5em;
  opacity: .55;
}
@media (max-width: 899px) { .hero-side { display: none; } }

/* 目次の短冊：木の桟から紙の札が下がる。押すとその章へ。
   スマホは暖簾（紅の地）の下の縁から下がる小さな札、パソコンは壁の左下 */
.fuda { display: none; }
@media (max-width: 899px) {
  .motion .fuda {
    position: absolute; left: 50%; top: calc(var(--split) + 8px); translate: -50% 0;
    display: flex; gap: 7px;
    list-style: none; margin: 0; padding: 6px 8px 0;
    border-top: 2px solid rgba(184, 119, 58, .85);
  }
  .motion .fuda li { transform-origin: 50% -8px; }
  .motion .fuda a {
    display: block; position: relative;
    width: 31px; height: 122px; padding: 9px 0;
    writing-mode: vertical-rl;
    background: rgba(250, 248, 244, .94); color: var(--sumi);
    font-family: var(--mincho); font-weight: 600; font-size: 12px; letter-spacing: .1em; line-height: 31px;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .7);
  }
  /* 札を吊る糸 */
  .motion .fuda a::before { content: ""; position: absolute; left: 50%; top: -8px; width: 1px; height: 8px; background: rgba(184, 119, 58, .85); }
  .motion .fuda i { font-style: normal; color: var(--beni); margin-block-end: .4em; }
}
@media (min-width: 900px) {
  .fuda {
    position: absolute; left: calc(var(--gutter) + 3vw); bottom: 52px;
    display: flex; gap: 10px;
    list-style: none; margin: 0; padding: 10px 6px 0;
    border-top: 2px solid rgba(184, 119, 58, .75);
  }
  .fuda li { transform-origin: 50% -10px; }
  .fuda a {
    display: block;
    width: 38px; height: 168px; padding: 14px 0;
    writing-mode: vertical-rl;
    background: var(--kami); color: var(--sumi);
    font-family: var(--mincho); font-weight: 600; font-size: 14px; letter-spacing: .2em; line-height: 38px;
    text-decoration: none;
    box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6);
    transition: transform .3s;
  }
  .fuda a:hover { transform: translateY(4px); }
  .fuda i { font-style: normal; color: var(--beni); margin-block-end: .5em; }
}

/* ── 区切りの共通の形 ─────────────────────── */
main { position: relative; z-index: 2; background: var(--shiro); }
.sec { max-width: 1120px; margin: 0 auto; padding: clamp(96px, 20vw, 176px) var(--gutter) 0; }
.sec-head {
  display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start;
  gap: 20px;
  margin-bottom: clamp(36px, 8vw, 64px);
}
.v-title {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--mincho); font-weight: 800;
  font-size: clamp(30px, 8.6vw, 54px);
  line-height: 1.1; letter-spacing: .14em;
  white-space: nowrap;
  position: relative;
  padding-left: 14px;
  margin-top: 46px;
}
.v-title::after { content: ""; position: absolute; left: 0; top: .2em; width: 1px; height: 2.2em; background: var(--ki); }
/* 区切りの番号：お品書きの番号のように、小さな漢数字 */
.v-title[data-no]::before {
  content: attr(data-no);
  position: absolute; top: -38px; right: 0;
  width: 1em; text-align: center;
  font-family: var(--mincho); font-weight: 600; font-size: 15px; letter-spacing: 0; line-height: 1;
  color: var(--beni);
}
.head-left { flex: 1; min-width: 0; padding-top: 50px; }
.lead { font-family: var(--mincho); font-weight: 600; font-size: clamp(17px, 4.6vw, 22px); line-height: 2.05; letter-spacing: .08em; }
.note { font-size: 12.5px; color: var(--sumi-soft); }
.sec-body > .note { margin-top: 20px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.btn {
  flex: 1 1 200px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 24px;
  border: 1px solid var(--sumi); border-radius: 2px;
  font-weight: 700; font-size: 14px; letter-spacing: .14em;
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.btn:hover { background: var(--sumi); color: var(--shiro); }
.btn-main { background: var(--beni); border-color: var(--beni); color: #fff; }
.btn-main:hover { background: var(--enji); border-color: var(--enji); }
.btn-tel b { font-family: var(--mincho); font-weight: 800; font-size: 16px; letter-spacing: .06em; }

.facts { margin: 0; border-top: 1px solid var(--sumi); }
.facts > div { display: grid; grid-template-columns: 6.2em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 12.5px; font-weight: 700; color: var(--sumi-soft); letter-spacing: .12em; padding-top: 2px; }
.facts dd { margin: 0; font-weight: 500; }

/* ── A1 今日のお店 ─────────────────────── */
.today { padding-top: clamp(56px, 12vw, 112px); }
.clock { display: flex; align-items: baseline; gap: 12px; }
.clock-label { font-family: var(--mincho); font-weight: 600; font-size: 14px; letter-spacing: .2em; color: var(--sumi-soft); }
.clock-time { font-family: var(--mincho); font-weight: 800; font-size: clamp(60px, 18vw, 104px); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.clock-time i { font-style: normal; animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.today-status { margin-top: 14px; font-family: var(--mincho); font-weight: 800; font-size: clamp(18px, 4.8vw, 24px); line-height: 1.6; letter-spacing: .06em; }
.today-status[data-state="open"] { color: var(--beni); }
.countdown { margin-top: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--sumi-soft); }
.today [hidden] { display: none !important; }
/* お店が書いた、その日だけのお知らせ */
.today-note {
  margin-top: 14px; padding: 8px 12px; border-left: 3px solid var(--beni); width: fit-content; max-width: 32em;
  background: rgba(196, 31, 62, .06); font-size: 13.5px; font-weight: 700; line-height: 1.7; letter-spacing: .06em;
}
/* いまの席 */
.seats { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.seats-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--sumi-soft); }
.seats-state { font-family: var(--mincho); font-weight: 800; font-size: 17px; letter-spacing: .08em; }
.seats-time { font-size: 11px; color: var(--sumi-soft); font-variant-numeric: tabular-nums; }
.seats-note { flex-basis: 100%; font-size: 12.5px; color: var(--sumi-soft); }
.seats-note:empty { display: none; }

/* 今日のおすすめ */
.osusume { border-top: 1px solid var(--sumi); padding-top: 14px; }
.osusume-h { margin: 0 0 6px; font-family: var(--mincho); font-weight: 800; font-size: 15px; letter-spacing: .2em; color: var(--beni); }
.osusume ul { list-style: none; margin: 0; padding: 0; }
.osusume li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.osusume li b { font-family: var(--mincho); font-weight: 800; font-size: 17px; letter-spacing: .06em; }
.osusume-price { font-family: var(--mincho); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.osusume li small { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.7; color: var(--sumi-soft); }

.today-body { display: grid; gap: 40px; }
.hours { padding-top: 26px; }
.hours-bar { position: relative; height: 1px; background: var(--sumi); }
.hours-bar::before {
  /* 開いている間の時間を紅で塗る */
  content: ""; position: absolute; left: 0; top: -1px; height: 3px;
  width: var(--fill, 0%); background: var(--beni);
}
.hours-tick { position: absolute; left: var(--at); top: -5px; width: 1px; height: 11px; background: var(--sumi); }
.hours-tick span { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-size: 10px; line-height: 1.3; text-align: center; white-space: nowrap; color: var(--sumi-soft); font-style: normal; }
.hours-now {
  position: absolute; left: var(--now, 0%); top: -6px;
  width: 13px; height: 13px; margin-left: -6px; border-radius: 50%;
  background: var(--shiro); border: 2px solid var(--beni);
  display: none;
}
.hours-now.on { display: block; }
.hours-ends { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--mincho); font-weight: 800; font-size: 15px; }

.week { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--rule); }
.week li { position: relative; display: grid; place-items: center; height: 72px; font-family: var(--mincho); font-weight: 800; font-size: 18px; }
.week li.off span { color: #b5aca6; }
/* 休みの判子 */
.week li.off::after {
  content: "休";
  position: absolute; left: 52%; top: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--beni); color: var(--beni);
  display: grid; place-items: center;
  font-size: 11px; line-height: 1;
  transform: rotate(-14deg);
  background: rgba(250, 248, 244, .6);
}
/* その日だけ開く時刻が違う時 */
.week li small { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-family: var(--gothic, inherit); font-weight: 700; font-size: 9.5px; color: var(--beni); font-variant-numeric: tabular-nums; }
.week li.is-today span { position: relative; color: var(--beni); }
.week li.is-today::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 1px solid var(--beni);
}
@media (min-width: 900px) {
  .today-body { grid-template-columns: 1fr 1fr; column-gap: 72px; row-gap: 48px; }
  .today .osusume, .today .hours, .today .week { grid-column: 1; }
  .today .facts-cell { grid-column: 2; grid-row: 1 / span 3; }
}

/* ── A2 乃音のこと：起こし絵（動かない時は、席の札を縦に並べる） ─────────── */
.oko { position: relative; margin-top: clamp(96px, 20vw, 176px); padding: 0 var(--gutter); max-width: 1120px; margin-left: auto; margin-right: auto; }
.oko-title { margin: 0 0 32px auto; }
.oko-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.oko-card { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; }
.oko-card img { width: 112px; height: 112px; object-fit: cover; display: block; }
.oko-kind { margin: 0; font-family: var(--mincho); font-weight: 800; font-size: 12px; letter-spacing: .16em; color: var(--beni); }
.oko-h { margin: 2px 0 4px; font-family: var(--mincho); font-weight: 800; font-size: 22px; letter-spacing: .12em; }
.oko-text { margin: 0; font-size: 13.5px; line-height: 1.9; }
.oko-parts { display: none; }

/* 動く時の形：今日のお店の表（.facts-pin）が画面の真ん中に止まり、その表が床の紙になる。
   見出し・札・白い円（.oko）は、画面に重ねる層にする */
.motion .facts-pin { perspective: 1400px; }
.facts-floor { position: relative; }
.motion .facts-floor {
  /* --cy・--cz：カメラの上下と前後、--sz：高さの大きさ（唄うへ入る時、模型の中の目線の高さまで降りるのに使う。
     scale は床の縦横だけを大きくし、壁の高さは変えないので、中に入る時は高さも合わせる） */
  --x: 0px; --rx: 0deg; --rz: 0deg; --s: 1; --sz: 1; --tx: 0%; --ty: 0%; --cy: 0px; --cz: 0px;
  transform-style: preserve-3d;
  transform: translateX(var(--x)) translate3d(0, var(--cy), var(--cz)) rotateX(var(--rx)) rotateZ(var(--rz)) scale3d(var(--s), var(--s), var(--sz)) translate(var(--tx), var(--ty));
}
.motion .oko-parts { display: block; position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.oko-folds i { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(35, 32, 31, .45); }
.oko-folds { position: absolute; inset: 0; opacity: 0; }
/* 紙の部品：床に平らに置いてあり、折り目（蝶番）で起き上がる。
   位置と大きさは main.js の MADORI（本人が描いた間取り、単位 m）から buildRoom が px で入れる */
/* 紙の質感：全部の部品に、紙の繊維（ごく薄いノイズ）を重ねる。--k は 1m あたりの px（buildRoom が入れる） */
.oko-room {
  position: absolute; inset: 0; transform-style: preserve-3d;
  --k: 40px;
  --ink: rgba(52, 38, 30, .55);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.oko-p { position: absolute; transform-style: preserve-3d; background-color: #fbf8f1; border: 1px solid var(--ink); }
/* 壁：写真のような、明るい木の縦の板張り。根元に濃い幅木。板の向きは、起き上がった時に縦になる向き */
.oko-wall-back {
  transform-origin: 50% 100%; background-color: #ead6b6;
  background-image: var(--grain),
    linear-gradient(transparent calc(100% - var(--k) * .1), #6e4a2f 0),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--k) * .3 - 1px), rgba(120, 78, 40, .2) 0 calc(var(--k) * .3)),
    linear-gradient(#e2cba6, #f0dfc3);
}
.oko-wall-left {
  transform-origin: 100% 50%; background-color: #e2cba6;
  background-image: var(--grain),
    linear-gradient(90deg, transparent calc(100% - var(--k) * .1), #6e4a2f 0),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--k) * .3 - 1px), rgba(120, 78, 40, .2) 0 calc(var(--k) * .3)),
    linear-gradient(90deg, #d8bf97, #e7d2b0);
}
.oko-wall-right {
  transform-origin: 0 50%; background-color: #e6d0ad;
  background-image: var(--grain),
    linear-gradient(270deg, transparent calc(100% - var(--k) * .1), #6e4a2f 0),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--k) * .3 - 1px), rgba(120, 78, 40, .2) 0 calc(var(--k) * .3)),
    linear-gradient(270deg, #dcc39c, #ecd8b8);
}
/* カラオケの画面：黒い縁と、少し光る青 */
.oko-screen { position: absolute; background: linear-gradient(160deg, #3d74b8, #24467a 60%, #1b355c); border: 2px solid #1d1a1a; border-radius: 1px; }
/* 乃音の幕（写真の、桃色に白い字の幕） */
.oko-pink {
  position: absolute; display: grid; place-items: center; overflow: hidden;
  background: #ec7b93 var(--grain); border: 1px solid var(--ink);
  font-family: var(--mincho); font-weight: 800; font-size: calc(var(--k) * .28); line-height: 1; letter-spacing: .1em; color: rgba(255, 255, 255, .92);
}
/* 窓：桟の十字 */
.oko-window {
  position: absolute; border: 2px solid #7a5a3e;
  background: linear-gradient(90deg, transparent calc(50% - 1px), #7a5a3e 0 calc(50% + 1px), transparent 0),
    linear-gradient(transparent calc(50% - 1px), #7a5a3e 0 calc(50% + 1px), transparent 0),
    linear-gradient(rgba(200, 222, 232, .85), rgba(170, 200, 214, .6));
}
/* 四隅の印（大きさ0）：画面は、唄うで画面がこの四隅から広がる（main.js の screenCorners）。壁は、試作 ?sing=2 で歌詞を刷る */
.oko-screen b, .oko-p .wm { position: absolute; width: 0; height: 0; }
.oko-screen b:nth-of-type(1), .oko-p .wm:nth-of-type(1) { left: 0; top: 0; }
.oko-screen b:nth-of-type(2), .oko-p .wm:nth-of-type(2) { right: 0; top: 0; }
.oko-screen b:nth-of-type(3), .oko-p .wm:nth-of-type(3) { right: 0; bottom: 0; }
.oko-screen b:nth-of-type(4), .oko-p .wm:nth-of-type(4) { left: 0; bottom: 0; }
/* 厨房の床：白いタイル */
.oko-kitchen {
  position: absolute; border: 1px solid var(--ink); opacity: 0;
  background-color: #eef0ec;
  background-image: var(--grain),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--k) * .3 - 1px), rgba(60, 70, 70, .14) 0 calc(var(--k) * .3)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--k) * .3 - 1px), rgba(60, 70, 70, .14) 0 calc(var(--k) * .3));
}
/* 箱の物（カウンター・テーブル・長椅子・棚）：天板（.oko-top）が持ち上がり、四方の板（.oko-side）が起き上がる。
   板は向きで明るさを変える（入口の側が明るく、奥が暗い） */
.oko-box { position: absolute; transform-style: preserve-3d; }
.oko-top { position: absolute; inset: 0; border: 1px solid var(--ink); background-image: var(--grain); }
.oko-side { position: absolute; border: 1px solid var(--ink); background-image: var(--grain); }
.oko-side.s-left { background-image: linear-gradient(rgba(40, 25, 15, .1), rgba(40, 25, 15, .1)), var(--grain); }
.oko-side.s-right { background-image: linear-gradient(rgba(40, 25, 15, .2), rgba(40, 25, 15, .2)), var(--grain); }
.oko-side.s-top { background-image: linear-gradient(rgba(40, 25, 15, .28), rgba(40, 25, 15, .28)), var(--grain); }
/* カウンター：天板は明るい木（木目と、手前の縁の明るい線）、腰は濃い木 */
.oko-counter .oko-top {
  background-color: #dcb27c;
  background-image: var(--grain), repeating-linear-gradient(var(--grain-dir, 0deg), transparent 0 3px, rgba(120, 70, 30, .1) 3px 4px, transparent 4px 9px);
  box-shadow: inset 0 0 0 2px rgba(255, 236, 205, .45);
}
.oko-counter .oko-side { background-color: #a5743f; }
.oko-table .oko-top {
  background-color: #8a5a36;
  background-image: var(--grain), repeating-linear-gradient(var(--grain-dir, 0deg), transparent 0 3px, rgba(40, 20, 10, .14) 3px 4px, transparent 4px 8px);
  box-shadow: inset 0 0 0 2px rgba(255, 220, 180, .18);
}
/* 長椅子：赤い座面、背もたれは壁の側 */
.oko-bench .oko-top { background-color: #b9554a; box-shadow: inset 0 0 0 2px rgba(255, 210, 200, .25); }
.oko-bench .oko-side { background-color: #943f37; }
/* 食器棚・物置：生成りの箱に、戸の枠 */
.oko-other .oko-top { background-color: #efe7d8; }
.oko-other .oko-side { background-color: #e6dcc9; }
.oko-other .oko-side::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(52, 38, 30, .28); }
/* 脚（細い紙）：テーブル・椅子・カウンターの椅子。2枚を十字に組んで、どこから見ても見えるようにする */
.oko-leg { position: absolute; transform-origin: 50% 100%; background: #3a2c24; }
.oko-legs { position: absolute; transform-style: preserve-3d; }
/* カウンターの椅子：丸い座面が持ち上がる */
.oko-stool { position: absolute; transform-style: preserve-3d; }
.oko-seat { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink); background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%); }
/* 椅子：座面と、背もたれ（起き上がる板） */
.oko-chair { position: absolute; transform-style: preserve-3d; }
.oko-chair .oko-seat { border-radius: 2px; --c: #cf8a4c; background: var(--c) var(--grain); }
.oko-chair .oko-side { background-color: #b87742; }
/* 床に落ちる影と、壁の根元の暗がり（灯がともると出る） */
.oko-shade { position: absolute; background: radial-gradient(closest-side, rgba(60, 34, 18, .34), rgba(60, 34, 18, .14) 60%, transparent); opacity: 0; }
.oko-ao { position: absolute; opacity: 0; }
/* 入口のガラス戸と暖簾。床に寝ている時の下の端が、起き上がると上の端 */
.oko-front {
  transform-origin: 50% 0; background-color: transparent;
  background-image: linear-gradient(90deg, transparent calc(50% - 1px), #5b4636 0 calc(50% + 1px), transparent 0),
    linear-gradient(rgba(190, 215, 225, .55), rgba(190, 215, 225, .3));
  border: 2px solid #5b4636;
}
.oko-front::before {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 32%;
  background: repeating-linear-gradient(90deg, var(--beni) 0 calc(25% - 1px), #7e1424 0 25%);
  border: 1px solid var(--ink);
}
/* 灯の色だまり（位置は buildRoom がテーブルとカウンターに合わせる） */
.oko-glow { position: absolute; inset: 0; opacity: 0; }

/* ── 試作（index.html?sing=1 / ?sing=2）：唄うへの入り方 ── */
/* 1：部屋の灯りが落ち、カラオケの画面の光だけが残る（光の中心と大きさは main.js が画面の位置から入れる） */
.oko-dark {
  position: absolute; inset: 0;
  --lx: 50%; --ly: 40%; --lr: 120px; --flick: 0;
  background: radial-gradient(circle at var(--lx) var(--ly),
    rgba(120, 170, 255, calc(.08 + var(--flick) * .08)) 0,
    rgba(30, 45, 85, calc(.5 - var(--flick) * .08)) calc(var(--lr) * .75),
    rgba(12, 10, 16, .9) calc(var(--lr) * 1.6),
    rgba(8, 6, 10, .96) calc(var(--lr) * 3));
}
/* 部屋の中のカラオケの画面（四隅を模型の画面に合わせて貼る） */
.oko-tv {
  position: absolute; left: 0; top: 0; width: 320px; height: 180px; transform-origin: 0 0;
  padding: 16px 20px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #1d3a66, #0b1630 70%);
  box-shadow: 0 0 40px rgba(110, 160, 255, .6);
  color: #f3f1ec; font-family: var(--mincho);
}
.oko-tv .tv-price { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: rgba(243, 241, 236, .85); }
.oko-tv .tv-price b { font-size: 18px; color: #ff8a98; }
.oko-tv .tv-lyric { margin: 0; align-self: center; font-weight: 800; font-size: 21px; letter-spacing: .1em; line-height: 1.8; }
.oko-tv .tv-lyric span {
  --p: 0%; display: block; width: fit-content;
  background: linear-gradient(90deg, #ff8a98 0 var(--p), #f3f1ec var(--p) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oko-tv .tv-lyric span + span { margin-left: auto; }
.oko-tv .tv-note { margin: 0; justify-self: end; font-family: var(--gothic); font-size: 8px; letter-spacing: .12em; color: rgba(243, 241, 236, .6); }
/* 2：カラオケの壁に刷る歌詞（四隅を模型の壁に合わせて貼る。壁の真ん中は画面と幕があるので、左右に分けて刷る） */
.oko-print {
  /* 縦横の比は、正面から見た時の壁と同じ（床の長さ 344 × 1.2 : 高さ 120 × 1.8）。違うと字が伸びる */
  position: absolute; left: 0; top: 0; width: 861px; height: 450px; transform-origin: 0 0;
  font-family: var(--mincho); font-weight: 800; color: var(--sumi);
}
.oko-print p { position: absolute; margin: 0; }
/* 縦書き。画面の右の行（先に読む）と、左の行を少し下げて */
.oko-print .pr-l1, .oko-print .pr-l2 { writing-mode: vertical-rl; font-size: 30px; letter-spacing: .14em; line-height: 1; white-space: nowrap; }
.oko-print .pr-l1 { left: 66%; top: 8%; }
.oko-print .pr-l2 { left: 24%; top: 16%; }
.oko-print span {
  --p: 0%;
  background: linear-gradient(180deg, #c8432e 0 var(--p), rgba(35, 32, 31, .78) var(--p) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oko-print .pr-price { left: 37%; bottom: 2%; display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; background: var(--beni); color: #fff; border-radius: 3px; }
.oko-print .pr-price i { font-style: normal; font-size: 20px; letter-spacing: .1em; }
.oko-print .pr-price b { font-size: 34px; }
/* 唄うの画面は使わず、線（.k-line）だけで三品へつなぐ */
.sing-trial.motion .sing { height: 100svh; }
.sing-trial.motion .sing-inner > :not(.k-line) { display: none; }

/* 重ねる層 */
.motion .oko { position: fixed; inset: 0; z-index: 3; margin: 0; padding: 0; max-width: none; pointer-events: none; visibility: hidden; }
.motion .oko-title { position: absolute; right: var(--gutter); top: max(9svh, 96px); margin: 0; opacity: 0; }
.motion .oko-cards { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--dock-h) + 16px); }
.motion .oko-card { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background: #fbf8f1; border: 1px solid var(--sumi); box-shadow: 0 14px 40px rgba(35, 32, 31, .2); grid-template-columns: 104px 1fr; gap: 14px; opacity: 0; visibility: hidden; }
.motion .oko-card img { width: 104px; height: 104px; }
@media (min-width: 900px) {
  .motion .oko-cards { left: 6vw; right: auto; bottom: auto; top: 50%; width: 400px; }
  .motion .oko-card { bottom: auto; top: 0; margin-top: -90px; grid-template-columns: 150px 1fr; padding: 14px; }
  .motion .oko-card img { width: 150px; height: 150px; }
}

/* ── 唄う：白い地で、1つの要素として ─────────── */
.sing { position: relative; overflow: hidden; background: var(--shiro); color: var(--sumi); }
.sing-inner {
  position: relative;
  max-width: 1120px; margin: 0 auto;
  min-height: 100svh;
  padding: clamp(80px, 14svh, 140px) var(--gutter) calc(var(--dock-h) + 40px);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  column-gap: 20px;
}
@media (min-width: 900px) { .sing-inner { padding-bottom: 72px; } }
.sing .v-title { grid-column: 2; grid-row: 1 / span 2; margin-top: 46px; }
.sing-price { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; font-family: var(--mincho); font-weight: 800; line-height: 1; margin-top: 40px; }
.sing-num { font-size: clamp(88px, 26vw, 200px); letter-spacing: -.02em; color: var(--beni); }
.sing-unit { font-size: clamp(18px, 5vw, 34px); font-weight: 600; white-space: nowrap; }
.sing-unit:first-child { writing-mode: vertical-rl; margin-right: 8px; letter-spacing: .2em; align-self: center; }
.sing-lyric { grid-column: 1 / -1; grid-row: 2; margin-top: 28px; font-family: var(--mincho); font-weight: 800; font-size: clamp(22px, 6vw, 40px); letter-spacing: .08em; line-height: 1.6; }
.sing-lyric span {
  display: block; width: fit-content;
  --p: 100%;
  background: linear-gradient(90deg, var(--sumi) 0 var(--p), rgba(35, 32, 31, .22) var(--p) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.sing-wave { grid-column: 1 / -1; grid-row: 3; align-self: center; height: clamp(80px, 22vw, 160px); margin: 12px 0; color: var(--beni); }
.sing-note { grid-column: 1 / -1; grid-row: 4; justify-self: end; font-size: 12px; letter-spacing: .14em; color: var(--sumi-soft); text-align: right; }

/* 動く時：カラオケの画面。画面に重ねる層（main.js の「唄う」が出し入れし、広がりと縮みを付ける）。
   乃音のことの模型の画面（.oko-screen）と同じ青で、近づくと夜の画面の濃い青になる */
.k-panel, .k-line { display: none; }
.motion .sing { height: 260svh; background: transparent; overflow: visible; }
.motion .sing-inner {
  position: fixed; inset: 0; z-index: 4; max-width: none; margin: 0; min-height: 0;
  padding: clamp(84px, 13svh, 130px) var(--gutter) calc(var(--dock-h) + 28px);
  align-content: space-between;
  color: var(--shiro); visibility: hidden; pointer-events: none;
}
.motion .k-panel {
  display: block; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    radial-gradient(130% 85% at 50% 42%, #2f63a3, #1a3b6c 52%, #0d1f3d);
  box-shadow: inset 0 0 120px rgba(4, 10, 24, .7);
  transform-origin: 50% var(--line-y);
}
/* 画面が縮んだ後に残る線。看板の三品のカウンターの線（.counter-line）と同じ高さ・同じ形に着く */
.motion .k-line {
  display: block; position: absolute; left: 0; right: 0; top: var(--line-y); height: 7px; margin-top: -3px;
  border-top: 1px solid var(--ki); border-bottom: 1px solid rgba(184, 119, 58, .4);
  opacity: 0;
}
.motion .k-line::after {
  content: ""; position: absolute; inset: -3px 0; background: #eaf3ff;
  box-shadow: 0 0 24px 6px rgba(140, 190, 255, .8);
  opacity: var(--glow, 1);
}
.motion .sing-inner { --line-y: 47%; }
@media (min-width: 900px) { .motion .sing-inner { --line-y: 50%; } }
.motion .sing .v-title { color: var(--shiro); }
.motion .sing-num { color: #ff6f80; text-shadow: 0 0 24px rgba(255, 111, 128, .35); }
.motion .sing-wave { display: none; }
/* 字幕：上の行は左、下の行は右に寄せ、薄い字に左から色が入る */
.motion .sing-lyric { grid-row: 3; align-self: end; margin: 0 0 4svh; font-size: clamp(24px, 6.8vw, 46px); line-height: 2; }
.motion .sing-lyric span {
  background: linear-gradient(90deg, #fff6e6 0 var(--p), rgba(243, 241, 236, .3) var(--p) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255, 214, 170, .25));
}
.motion .sing-lyric span + span { margin-left: auto; }
.motion .sing-note { color: rgba(243, 241, 236, .7); }

/* 数字が回って止まる */
.odo { display: inline-flex; align-items: flex-end; }
/* 明朝の数字は字の高さが1emより少し大きいので、1字分を1.2emにして隣の数字がのぞかないようにする */
.odo-d { display: inline-block; height: 1.2em; overflow: hidden; line-height: 1.2; margin: -.1em 0; }
.odo-col { display: flex; flex-direction: column; }
.odo-col span { display: block; height: 1.2em; line-height: 1.2; }

/* ── A4 看板の三品（動かない時は縦に並べる） ──────── */
.dishes { position: relative; padding-top: clamp(96px, 20vw, 176px); }
.dishes-pin { position: relative; }
.counter-line { display: none; }
.dishes-track { display: grid; gap: 64px; padding: 0 var(--gutter); max-width: 1120px; margin: 0 auto; }
.dishes-intro { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 20px; }
.dishes-intro .lead { padding-top: 50px; }
.dish { display: grid; gap: 24px; justify-items: start; }
.plate {
  width: min(72vw, 420px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 9px #fff, 0 0 0 10px rgba(35, 32, 31, .08), 0 38px 50px -24px rgba(60, 30, 20, .45);
}
.plate { position: relative; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate-wrap { position: relative; }

/* 湯気：細い線の一部が、下から上へ流れて消える */
.steam, .drops { display: none; }
.motion .steam {
  display: block; position: absolute; left: 24%; width: 52%; bottom: 26%; height: 86%;
  overflow: visible; pointer-events: none;
  filter: blur(3.5px);
}
.steam path {
  fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: .42 1.4; stroke-dashoffset: .42;
  opacity: 0;
  animation: steam 4.2s ease-in-out infinite paused;
}
.steam path:nth-child(2) { animation-delay: 1.4s; stroke-width: 11; }
.steam path:nth-child(3) { animation-delay: 2.8s; }
@keyframes steam {
  0% { stroke-dashoffset: .42; opacity: 0; }
  20% { opacity: .95; }
  70% { opacity: .6; }
  100% { stroke-dashoffset: -1.1; opacity: 0; }
}
/* 水滴：グラスに付いた粒が、ときどき伝って落ちる */
.motion .drops { display: block; position: absolute; inset: 0; pointer-events: none; }
.drops i {
  position: absolute; left: var(--x); top: var(--y);
  width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .95) 0 16%, rgba(255, 255, 255, .3) 42%, rgba(255, 255, 255, .06) 72%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  opacity: 0;
  animation: drip 5.6s ease-in var(--d) infinite paused;
}
@keyframes drip {
  0% { opacity: 0; transform: translateY(0) scale(.5); }
  14% { opacity: .95; transform: translateY(0) scale(1); }
  55% { transform: translateY(5px) scale(1); }
  100% { opacity: 0; transform: translateY(80px) scale(.9, 1.3); }
}
.dish.is-warm .steam path, .dish.is-warm .drops i { animation-play-state: running; }
.dish-name { margin: 0; font-family: var(--mincho); font-weight: 800; font-size: clamp(26px, 7vw, 40px); letter-spacing: .12em; line-height: 1.3; white-space: nowrap; }
.dish-price { font-family: var(--mincho); font-weight: 800; font-size: 24px; color: var(--beni); line-height: 1.6; }
.dish-price span { font-size: .55em; margin-left: .15em; }
.dish-desc { max-width: 20em; font-size: 14px; }

.motion .dishes { padding-top: 0; }
.motion .dishes-pin { height: 100svh; overflow: hidden; }
.motion .counter-line {
  display: block; position: absolute; left: 0; right: 0; top: 47%;
  height: 7px; border-top: 1px solid var(--ki); border-bottom: 1px solid rgba(184, 119, 58, .4);
  opacity: .7;
}
.motion .dishes-track {
  display: flex; align-items: center; gap: 0;
  height: 100%; width: max-content; max-width: none; margin: 0;
  padding: 0 0 var(--dock-h);
  will-change: transform;
}
.motion .dishes-intro { width: 100vw; padding: 0 var(--gutter); flex: none; }
.motion .dish { width: 92vw; flex: none; padding: 0 0 0 8vw; align-content: center; }
.motion .dish:last-child { width: 100vw; }
@media (min-width: 900px) {
  .motion .dishes-intro { width: 46vw; padding-left: 10vw; }
  .motion .dish { width: 52vw; grid-template-columns: auto 1fr; align-items: center; gap: 48px; padding-left: 4vw; }
  .motion .dish:last-child { width: 62vw; }
  .motion .counter-line { top: 50%; }
  .plate { width: min(36vw, 440px); }
}

/* ── ひと息：徳利と盃 ─────────────────────── */
.pour { display: none; }
.motion .pour { display: grid; place-items: center; align-content: center; gap: 20px; height: 90svh; }
.pour-art { width: min(72vw, 340px); overflow: visible; }
.t-body { fill: var(--kami); stroke: var(--sumi); stroke-width: 1.4; stroke-linejoin: round; }
.t-band { fill: none; stroke: var(--beni); stroke-width: 3; }
.p-stream { fill: none; stroke: #d6c08a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.p-cup { fill: var(--sumi); }
.p-rim { fill: #3a3433; }
.p-inner { fill: #f6f3ec; }
.p-janome { fill: none; stroke: #2f4f8a; stroke-width: 2.2; }
.p-sake { fill: rgba(222, 198, 136, .55); }
.p-ripple { fill: none; stroke: rgba(150, 120, 60, .6); stroke-width: 1; opacity: 0; }
.pour-text { font-family: var(--mincho); font-weight: 800; font-size: clamp(18px, 4.8vw, 22px); letter-spacing: .4em; padding-left: .4em; }

/* ── 四 お品書き ─────────────────────── */
.tabs { position: relative; display: flex; gap: 28px; margin-bottom: 14px; }
.tabs button {
  padding: 4px 0 8px; background: none; border: 0;
  font: inherit; font-family: var(--mincho); font-weight: 800; font-size: 20px; letter-spacing: .14em;
  color: #a9a09a; cursor: pointer; transition: color .3s;
}
.tabs button[aria-selected="true"] { color: var(--sumi); }
.tabs-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 2.4em; background: var(--beni); }
.sheet {
  position: relative;
  background: var(--kami);
  padding: clamp(28px, 7vw, 56px) clamp(20px, 6vw, 56px) clamp(12px, 3vw, 24px);
  box-shadow: 0 1px 0 rgba(35, 32, 31, .05), 0 30px 60px -36px rgba(60, 30, 20, .45);
}
.seal {
  border-radius: 50%; background: var(--beni);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(243, 241, 236, .35), 0 0 0 5px var(--beni);
}
.seal span { writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 800; color: #fff; letter-spacing: .08em; }
.seal-sm { position: absolute; top: -18px; right: 18px; width: 50px; height: 50px; transform: rotate(8deg); box-shadow: 0 0 0 2px var(--kami), 0 0 0 3px rgba(196, 31, 62, .5); }
.seal-sm span { font-size: 14px; }
.panel { columns: 2 320px; column-gap: 64px; }
.mgroup { break-inside: avoid; margin-bottom: 36px; }
.mgroup h3 { margin: 0 0 6px; font-family: var(--mincho); font-weight: 800; font-size: 16px; letter-spacing: .14em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mgroup h3 small { display: inline; font-family: var(--gothic); font-weight: 500; font-size: 11px; }
.mgroup ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sumi); }
.mgroup li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); line-height: 1.6; }
.mgroup li span { flex: 1; }
.mgroup li b { font-family: var(--mincho); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mgroup li b i { font-style: normal; font-weight: 600; font-size: 13px; color: var(--sumi-soft); }
/* 写真のある料理は、小さな丸い写真を添える */
.mgroup li.with-photo { align-items: center; padding: 8px 0; }
.thumb {
  flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rule);
}

/* お品書きと宴会コースの区切り：墨の細い線が二本、真ん中に紅の菱と、その両脇に小さな墨の菱 */
.divider { display: flex; align-items: center; justify-content: center; gap: 12px; width: min(calc(100% - 2 * var(--gutter)), 640px); margin: clamp(88px, 18vw, 150px) auto 0; }
.dv-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(35, 32, 31, 0), rgba(35, 32, 31, .55)); }
.dv-line:last-child { background: linear-gradient(270deg, rgba(35, 32, 31, 0), rgba(35, 32, 31, .55)); }
.dv-line:first-child { transform-origin: 100% 50%; }
.dv-line:last-child { transform-origin: 0 50%; }
.dv-dot { width: 5px; height: 5px; background: var(--sumi); rotate: 45deg; }
.dv-mark { width: 13px; height: 13px; background: var(--beni); rotate: 45deg; box-shadow: 0 0 0 3px var(--shiro), 0 0 0 4px rgba(196, 31, 62, .45); }
.sing-seat.motion .divider { position: relative; z-index: 2; }
.divider + .sec { padding-top: clamp(64px, 14vw, 120px); }

/* ── B2 宴会コース ─────────────────────── */
.course-name { font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--sumi-soft); }
.course-price { display: flex; align-items: baseline; font-family: var(--mincho); font-weight: 800; font-size: clamp(60px, 17vw, 112px); line-height: 1.05; letter-spacing: -.01em; }
.course-price .yen { font-size: .3em; margin-left: .15em; letter-spacing: .1em; }
.course-points { list-style: none; margin: 0; padding: 0; max-width: 640px; }
.course-points li { position: relative; display: grid; grid-template-columns: 6.2em 1fr; gap: 16px; padding: 14px 0; }
.course-points li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform-origin: 0 0; transform: scaleX(var(--s, 1)); }
.course-points li:first-child::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--sumi); transform-origin: 0 0; transform: scaleX(var(--s, 1)); }
.course-points span { font-size: 12.5px; font-weight: 700; color: var(--sumi-soft); letter-spacing: .12em; padding-top: 2px; }
.course .actions { max-width: 640px; }

/* ── B3 店内 ─────────────────────────── */
.gallery { max-width: none; padding-left: 0; padding-right: 0; }
.gallery .sec-head { max-width: 1120px; margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }
.strip { overflow-x: auto; }
.motion .strip { overflow: hidden; }
.strip-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; width: max-content; will-change: transform; }
.strip li { width: clamp(150px, 42vw, 280px); }
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.strip-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

/* 写真を大きく見る。元の写真が 480px なので、それより大きくしない */
.viewer {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--shiro);
}
.viewer[open] { display: grid; place-items: center; }
.viewer::backdrop { background: rgba(23, 19, 20, .86); }
.viewer-fig { margin: 0; width: min(calc(100vw - 40px), 480px); }
.viewer-fig img { width: 100%; height: auto; }
.viewer-fig figcaption { margin-top: 12px; font-size: 13px; letter-spacing: .1em; opacity: .85; }
.viewer-close {
  position: fixed; top: max(16px, env(safe-area-inset-top)); right: 16px;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(23, 19, 20, .5); border: 1px solid rgba(243, 241, 236, .4); color: var(--shiro);
  cursor: pointer;
}
.viewer-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html:has(.viewer[open]) { overflow: hidden; }

/* ── B4 行き方 ─────────────────────────── */
.address { font-family: var(--mincho); font-weight: 800; font-size: clamp(22px, 6vw, 32px); line-height: 1.55; letter-spacing: .08em; }
.access-list { list-style: none; margin: 16px 0 0; padding: 0; font-size: 14px; }
.access-list li::before { content: ""; display: inline-block; width: 12px; height: 1px; background: var(--ki); vertical-align: middle; margin-right: 10px; }
.map { position: relative; aspect-ratio: 4 / 3; background: #e4e0d8; }
@media (min-width: 900px) { .map { aspect-ratio: 21 / 9; } .access .actions { max-width: 320px; } }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.35) contrast(1.02); }
.map-pulse { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.map-pulse::before, .map-pulse::after {
  content: ""; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px;
  border-radius: 50%; border: 2px solid var(--beni);
  animation: pulse 2.6s cubic-bezier(.2, .7, .3, 1) infinite;
}
.map-pulse::after { animation-delay: 1.3s; }
@keyframes pulse { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ── 終わり ─────────────────────────── */
.outro {
  margin-top: clamp(112px, 22vw, 200px);
  padding: clamp(80px, 16vw, 140px) var(--gutter) 48px;
  text-align: center;
  display: grid; justify-items: center;
}
.outro-scene { position: relative; width: 100%; max-width: 960px; height: clamp(320px, 84vw, 460px); }
.outro-lantern {
  --lh: 72%;
  --cord: 64px;
  position: absolute; left: 50%; top: 16%;
  height: var(--lh); aspect-ratio: 2 / 3;
  transform: translateX(-50%);
}
.outro-text { margin-top: 28px; font-family: var(--mincho); font-weight: 600; font-size: clamp(18px, 4.8vw, 24px); line-height: 2; letter-spacing: .12em; }
.seal-stamp { width: 84px; height: 84px; margin: 40px 0; transform: rotate(-8deg); }
.seal-stamp span { font-size: 22px; }
.outro-links { display: flex; gap: 28px; font-size: 13px; letter-spacing: .14em; }
.outro-links a { text-decoration: none; border-bottom: 1px solid rgba(243, 241, 236, .3); padding-bottom: 2px; }
.outro-copy { margin-top: 36px; font-size: 11px; letter-spacing: .2em; opacity: .6; }

/* 画面の外にある間は、くり返す動きを止める */
.offscreen *, .offscreen *::before, .offscreen *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .lamp, .clock-time i, .map-pulse::before, .map-pulse::after { animation: none !important; }
}

/* ── 客席から唄う → カウンターの料理 → 注ぐ一杯 → お品書きの紙（index.html の既定。main.js の SING_V "3"） ── */
.sing-seat.motion .sing { height:0; min-height:0; }
.sing-seat.motion .sing-inner { display:none; }
/* 看板の三品と前のひと息の場面は使わない（料理は部屋の模型のカウンターの上で見せる） */
.sing-seat.motion .dishes, .sing-seat.motion .pour { display:none; }

/* 奥の壁の画面：紅の暗い地に、桃色と金の灯りがゆっくり流れる。上に曲名、真ん中に歌詞、下に進みの帯 */
.sing-seat .oko-screen { background-image:none; transform-style:preserve-3d; overflow:hidden; }
.seat-tv { position:absolute; left:0; top:0; width:320px; height:180px; padding:14px 18px 16px; transform-origin:0 0; display:flex; flex-direction:column; color:#fbeef0; overflow:hidden; font-style:normal;
  background:linear-gradient(160deg, #3a0c18, #24070f 70%); }
.tv-glow { position:absolute; inset:-20%; background:
  radial-gradient(40% 55% at 30% 40%, rgba(236,123,147,.45), transparent 70%),
  radial-gradient(35% 50% at 70% 65%, rgba(230,184,110,.28), transparent 70%);
  background-size:160% 160%, 160% 160%; }
.tv-head { position:relative; margin:0; font-family:var(--gothic); font-size:10px; letter-spacing:.2em; color:rgba(251,238,240,.7); }
.tv-head b { color:#ec7b93; margin-right:6px; font-weight:700; }
.tv-lyric { position:relative; margin:auto 0; font-family:var(--mincho); font-weight:700; font-size:22px; line-height:1.75; letter-spacing:.06em; white-space:nowrap; }
.tv-lyric span { display:block; --p:0%; background:linear-gradient(90deg, #ffd6df 0 var(--p), rgba(251,238,240,.55) var(--p) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tv-lyric span + span { padding-left:1.5em; }
.tv-bar { position:relative; display:block; height:2px; background:rgba(251,238,240,.18); }
.tv-bar b { position:absolute; inset:0; background:linear-gradient(90deg, #c41f3e, #ec7b93); transform-origin:0 50%; box-shadow:0 0 6px rgba(236,123,147,.8); }

/* 左上の言葉：紅の細い線と小見出し、題は1字ずつ、値段の数字は紅 */
.seat-note { position:absolute; top:76px; left:var(--gutter); color:var(--sumi); }
.sn-kicker { display:flex; align-items:center; gap:10px; margin:0 0 10px; font-family:var(--gothic); font-weight:700; font-size:12px; letter-spacing:.3em; color:var(--beni); }
.sn-kicker i { display:block; width:28px; height:1px; background:var(--beni); transform-origin:0 50%; }
.sn-title { margin:0; font-family:var(--mincho); font-weight:800; font-size:clamp(26px, 7.4vw, 40px); letter-spacing:.14em; line-height:1.3; white-space:nowrap; }
.sn-price { margin:14px 0 0; display:flex; align-items:baseline; gap:4px; font-family:var(--mincho); font-weight:700; font-size:15px; letter-spacing:.1em; }
.sn-price b { font-size:34px; color:var(--beni); letter-spacing:0; margin:0 2px; }
.sn-price small { display:inline; margin-left:12px; font-family:var(--gothic); font-weight:400; font-size:11px; letter-spacing:.06em; color:var(--sumi-soft); }

/* 料理と器の絵：画面に重ねる層。位置と大きさは main.js が、模型の中の印（.fmark）から毎コマ決める */
.food-layer { position:fixed; inset:0; z-index:4; pointer-events:none; overflow:hidden; visibility:hidden; }
.food-layer .food { position:absolute; left:0; top:0; height:auto; max-width:none; visibility:hidden; filter:drop-shadow(4px 7px 6px rgba(60,30,10,.32)); }
.food-layer .food-tokkuri { transform-origin:50% 50%; }
.food-fx { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
/* 注ぐ酒：透けた流れ（形は main.js の drawPour が毎コマ描く）、中を流れ落ちる光の筋、酒の面の波紋と小さなしぶき */
.food-fx { visibility:hidden; }
.sake-stream { filter:drop-shadow(0 0 2px rgba(255,240,200,.6)); }
.sake-shine { fill:none; stroke:rgba(255,255,255,.85); stroke-linecap:round; stroke-dasharray:.16 .3; }
.sake-ripple { fill:none; stroke:rgba(255,248,226,.95); stroke-width:1.2; }
.sake-drop { fill:rgba(255,250,236,.95); }
.fmark { position:absolute; width:0; height:0; }
/* 品の札：カウンターに置いた紙の札 */
.food-layer .dish-text { position:absolute; left:0; top:0; width:min(64vw, 280px); margin:0; background:#fbf8f1; padding:12px 16px 10px; box-shadow:2px 6px 12px rgba(60,30,10,.25); }
.food-layer .dish-text .dish-name { font-size:clamp(18px, 5vw, 26px); }
.food-layer .dish-text .dish-price { font-size:20px; line-height:1.5; }
.food-layer .dish-text .dish-desc { font-size:12px; margin:2px 0 0; }
/* まずは、一杯。 */
.first-cup { position:absolute; left:0; right:0; top:15svh; margin:0; text-align:center; font-family:var(--mincho); font-weight:800; font-size:clamp(24px, 6.6vw, 36px); letter-spacing:.4em; padding-left:.4em; color:var(--sumi); text-shadow:0 0 18px rgba(251,248,241,.9); }

/* 空中の札：乃音の紅の和紙が厨房の手前に浮かぶ。上下に濃い紅の軸、桃色の灯がにじむ。掛け軸のように上から下へ開く（--open） */
.air-panel { position:absolute; left:0; top:0; width:600px; height:400px; transform-origin:0 0; --open:0%; }
.air-inner {
  position:absolute; inset:0; display:flex; flex-direction:row-reverse; align-items:center; justify-content:center; gap:56px;
  clip-path:inset(0 0 calc(100% - var(--open)) 0);
  background:
    linear-gradient(rgba(196,31,62,.80), rgba(168,22,52,.72)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .88 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-top:7px solid #6e1224; border-bottom:7px solid #6e1224;
  box-shadow:0 0 70px rgba(236,123,147,.55), inset 0 0 50px rgba(255,190,205,.35);
}
.air-title { margin:0; writing-mode:vertical-rl; font-family:var(--mincho); font-weight:800; font-size:50px; letter-spacing:.12em; line-height:1.1; color:#fff; text-shadow:0 0 16px rgba(255,200,212,.7); position:relative; padding-left:16px; }
.air-title::after { content:""; position:absolute; left:0; top:.2em; width:2px; height:2.2em; background:rgba(255,226,232,.85); }
.air-head { display:flex; flex-direction:column; align-items:flex-end; }
.air-head i { font-style:normal; font-family:var(--mincho); font-weight:600; font-size:22px; color:#ffd2dc; margin-bottom:10px; padding-right:.3em; }
.air-lead { margin:0; font-family:var(--mincho); font-weight:600; font-size:26px; line-height:2; letter-spacing:.14em; color:#ffeef2; }

/* お品書きの紙：カウンターの奥に置いてある。下の半分は白いまま（最後にカメラがそこへ降り、ページの地につながる） */
.menu-paper { position:absolute; left:0; top:0; width:560px; height:440px; transform-origin:0 0; visibility:hidden; background:var(--shiro);
  box-shadow:0 0 0 1px rgba(35,32,31,.08), 6px 10px 18px rgba(60,30,10,.25); padding:34px 40px 0; display:flex; flex-direction:row-reverse; gap:36px; }
.mp-head { display:flex; flex-direction:column; align-items:center; }
.mp-head i { font-style:normal; font-family:var(--mincho); font-weight:600; font-size:18px; color:var(--beni); margin-bottom:8px; }
.mp-head p { margin:0; writing-mode:vertical-rl; font-family:var(--mincho); font-weight:800; font-size:44px; letter-spacing:.14em; color:var(--sumi); }
.menu-paper ul { list-style:none; margin:0; padding:0; flex:1; height:200px; border-top:2px solid var(--sumi); }
.menu-paper li { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(35,32,31,.15); font-family:var(--mincho); font-size:22px; letter-spacing:.1em; }
.menu-paper li b { font-weight:700; }

/* 動きを減らす時の看板の三品：三つ目の猪口（真上から見た絵に、注いだ酒） */
.plate.cup { box-shadow:none; border-radius:0; overflow:visible; }
.choko { display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(4px 8px 7px rgba(60,30,10,.3)); }
.c-ripple, .c-shine { fill:none; opacity:0; }
.cup-shadow, .cup-wall, .pour-line { display:none; }

/* 自動の印：画面の右上の小さな丸（字は出さない）。自動の間は3本線が揺れて輪が満ちる（押すと手動）。
   手動の間は紅の●（押すと続きから自動）。パソコンは上の帯の下 */
.auto-badge { position:fixed; right:12px; top:calc(env(safe-area-inset-top) + 12px); z-index:65; width:34px; height:34px; padding:0; border:0; border-radius:50%;
  background:rgba(23,19,20,.5); color:#fbf8f1; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; display:grid; place-items:center; cursor:pointer; font:inherit; }
/* 指で押しやすいよう、押せる所は見た目より広く */
.auto-badge::before { content:""; position:absolute; inset:-8px; border-radius:50%; }
@media (min-width: 900px) { .auto-badge { right:20px; top:84px; } }
.ab-dot { grid-area:1/1; display:none; width:12px; height:12px; border-radius:50%; background:var(--beni); box-shadow:0 0 0 0 rgba(196,31,62,.45); animation:ab-dot 1.8s ease-out infinite; }
@keyframes ab-dot { 0% { box-shadow:0 0 0 0 rgba(196,31,62,.5); } 70%, 100% { box-shadow:0 0 0 9px rgba(196,31,62,0); } }
.auto-badge.is-hand .ab-dot { display:block; }
.auto-badge.is-hand .ab-prog { opacity:.45; }
.auto-badge.is-light { background:rgba(251,248,241,.88); color:var(--sumi); box-shadow:0 0 0 1px rgba(35,32,31,.12), 0 4px 12px rgba(35,32,31,.12); }
.auto-badge svg { position:absolute; inset:0; width:100%; height:100%; rotate:-90deg; }
.ab-track { fill:none; stroke:currentColor; stroke-width:2; opacity:.18; }
.ab-prog { fill:none; stroke:var(--beni); stroke-width:2; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; }
.ab-wave, .ab-pause { grid-area:1/1; display:none; align-items:flex-end; gap:2px; height:12px; }
.ab-wave b { display:block; width:2.5px; height:4px; border-radius:2px; background:var(--beni); animation:ab-wave .9s ease-in-out infinite; }
.ab-wave b:nth-child(2) { animation-delay:.15s; }
.ab-wave b:nth-child(3) { animation-delay:.3s; }
@keyframes ab-wave { 0%, 100% { height:4px; } 50% { height:12px; } }
.ab-pause b { display:block; width:3px; height:11px; border-radius:1px; background:currentColor; }
.ab-pause { gap:3px; align-items:center; }
.auto-badge.is-auto .ab-wave { display:flex; }
@media (prefers-reduced-motion: reduce) { .ab-wave b, .ab-dot { animation:none !important; } .ab-wave b { height:8px; } }

/* お品書きの紙の判子：カメラが紙の真上で止まると押される。--ink で、押した後に墨（朱肉）が少しにじむ */
.mp-seal { position:absolute; left:64px; top:300px; width:96px; height:96px; border-radius:50%; display:grid; place-items:center; --ink:0;
  background:var(--beni); box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(196,31,62,.7), 0 0 calc(var(--ink) * 18px) calc(var(--ink) * 4px) rgba(196,31,62,.25); opacity:0; }
.mp-seal span { writing-mode:vertical-rl; font-family:var(--mincho); font-weight:800; font-size:30px; letter-spacing:.06em; color:#fff; }

/* 立体のお品書き（客席から入る形）：紙は重ねた束。下の辺に紙の厚みの段が見え、机に影が落ちる */
.sing-seat.motion .menu .sec-body { perspective:1300px; perspective-origin:50% 20%; }
.sing-seat.motion .sheet { transform-style:preserve-3d; will-change:transform;
  box-shadow:0 1px 0 #efe9de, 0 3px 0 #e6dfd2, 0 5px 0 #ddd4c5, 0 7px 0 #d3c9b8, 0 30px 46px -22px rgba(60,30,20,.5); }

/* 今日のお店の区切りは、模型の場面の間ずっと止まる（main.js の pin）。pin が終わると店の場面ごと上へ流れ、
   下からお品書きが上に重なって上がってくる（お品書きを手前に。横の余白も同じ地で塗る） */
.sing-seat.motion .today { position:relative; z-index:1; }
.sing-seat.motion .menu { position:relative; z-index:2; background:var(--shiro); box-shadow:0 0 0 100vmax var(--shiro); clip-path:inset(0 -100vmax); }
/* お品書きの表紙：お品書きの区切りの頭に、画面いっぱいで重なる。右の綴じを軸に開く（.mc-face を回す）。
   --turn（開いた分）で、下の頁に落ちる綴じ目の影が薄れていく */
.menu-cover { position:absolute; left:50%; top:0; z-index:5; width:100vw; height:100svh; margin-left:-50vw; pointer-events:none; --turn:0; perspective:1700px; }
.menu-cover::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(270deg, rgba(60,35,20,calc((1 - var(--turn)) * .4)), rgba(60,35,20,0) 45%); opacity:calc(var(--turn) * 4); }
.mc-face { position:absolute; inset:0; transform-origin:100% 50%; transform-style:preserve-3d; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:
    linear-gradient(90deg, rgba(60,35,20,.10), rgba(60,35,20,0) 6%, rgba(60,35,20,0) 94%, rgba(60,35,20,.16)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #f6f2ea;
  box-shadow:-18px 0 40px rgba(60,30,20,.18); }
/* 表紙の裏：少し濃い和紙。真横を過ぎるとこちらが見える */
.mc-face::after { content:""; position:absolute; inset:0; transform:rotateY(180deg); backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(270deg, rgba(60,35,20,.18), rgba(60,35,20,.04) 30%), #e9e1d1; }
.mc-face > * { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.mc-head { display:flex; flex-direction:column; align-items:center; }
.mc-head i { font-style:normal; font-family:var(--mincho); font-weight:600; font-size:18px; color:var(--beni); margin-bottom:12px; }
.mc-head p { margin:0; writing-mode:vertical-rl; font-family:var(--mincho); font-weight:800; font-size:clamp(48px, 13vw, 76px); letter-spacing:.16em; color:var(--sumi); }
.mc-sub { margin:0; font-family:var(--mincho); font-size:14px; letter-spacing:.4em; color:var(--sumi-soft); }
.mc-seal { position:absolute; left:50%; top:50%; margin:calc(-1 * clamp(48px, 13vw, 76px) * 1.2) 0 0 clamp(48px, 13vw, 76px); width:76px; height:76px; border-radius:50%; display:grid; place-items:center; --ink:0;
  background:var(--beni); box-shadow:0 0 0 3px var(--shiro), 0 0 0 5px rgba(196,31,62,.7), 0 0 calc(var(--ink) * 16px) calc(var(--ink) * 4px) rgba(196,31,62,.25); }
.mc-seal span { writing-mode:vertical-rl; font-family:var(--mincho); font-weight:800; font-size:22px; color:#fff; }

/* 立体のお品書きの紙：和紙の繊維と、左上から当たる灯り。端は少し厚く、右下の角がめくれて「裏は飲み物」 */
.sing-seat.motion .sheet {
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%, rgba(120,90,60,.05) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .32 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--kami);
  padding-bottom:72px; touch-action:pan-y; }
.sheet-corner { display:none; }
.sing-seat.motion .sheet-corner { display:block; position:absolute; right:0; bottom:0; width:120px; height:64px; border:0; padding:0; cursor:pointer; background:none; font:inherit; color:var(--sumi); }
/* めくれた角：右下の三角が折り返って、裏の色（少し濃い紙）が見える */
.sing-seat.motion .sheet-corner::before { content:""; position:absolute; right:0; bottom:0; width:46px; height:46px;
  background:linear-gradient(135deg, #e9e1d1 0 50%, var(--shiro) 50%); box-shadow:-3px -3px 6px rgba(60,30,20,.18); border-top-left-radius:4px;
  transform-origin:100% 100%; animation:corner-lift 2.4s ease-in-out infinite; }
@keyframes corner-lift { 50% { transform:scale(1.18); } }
.sing-seat.motion .sheet-corner span { position:absolute; right:56px; bottom:14px; font-family:var(--mincho); font-size:12px; letter-spacing:.14em; color:var(--sumi-soft); white-space:nowrap; }
.sing-seat.motion .sheet-corner b { color:var(--beni); font-weight:700; margin-left:.3em; }
@media (prefers-reduced-motion: reduce) { .sing-seat.motion .sheet-corner::before { animation:none; } }

/* 宴の二時間（客席から入る形）：卓に皿が置かれていき、下の帯を紅の線が「乾杯 0:00」から「お開き 2:00」へ伸びる。最後に「宴」の判子 */
.course-stage { position:relative; width:min(100%, 560px); margin:0 0 44px; cursor:pointer; --bar:1; }
.course-stage svg { display:block; width:100%; height:auto; overflow:visible; }
.cs-k { font-family:var(--gothic); font-weight:700; font-size:11px; letter-spacing:.14em; fill:var(--sumi-soft); }
.cs-v { font-family:var(--mincho); font-weight:800; font-size:16px; letter-spacing:.08em; fill:var(--sumi); }
.cs-board { fill:#e9d3b0; stroke:#b8773a; stroke-width:1.5; filter:drop-shadow(0 10px 14px rgba(60,30,10,.18)); }
.cs-plate circle { fill:#fbfaf6; stroke:rgba(35,32,31,.25); stroke-width:1; filter:drop-shadow(1px 3px 3px rgba(60,30,10,.3)); }
.cs-plate circle.cs-in { fill:none; stroke:#2f4f8a; stroke-width:1.3; filter:none; }
.cs-plate circle.cs-sweet { fill:#fde9ee; }
.cs-plate text { font-family:var(--mincho); font-weight:800; font-size:12px; text-anchor:middle; fill:var(--sumi); }
.cs-track { stroke:rgba(110,70,30,.2); stroke-width:6; stroke-linecap:round; }
/* stroke-dashoffset は CSS の変数で（GSAP で直に動かすと px の整数に丸められる） */
.cs-bar { stroke:var(--beni); stroke-width:6; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:var(--bar); }
.cs-ticks line { stroke:rgba(35,32,31,.45); stroke-width:1.5; stroke-linecap:round; }
.cs-head { fill:#fff; stroke:var(--beni); stroke-width:3; }
.cs-t { font-family:var(--mincho); font-weight:800; font-size:14px; text-anchor:middle; fill:var(--sumi); font-variant-numeric:tabular-nums; }
.cs-s { font-family:var(--mincho); font-weight:600; font-size:12px; letter-spacing:.2em; text-anchor:middle; fill:var(--sumi-soft); }
/* 判子は「2時間」の行の右（卓と帯の間の空き）。線が「お開き」に着くと押される */
.cs-seal { position:absolute; right:2%; top:calc(100% * 128 / 226); margin-top:-22px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--beni); opacity:0;
  box-shadow:0 0 0 3px var(--shiro), 0 0 0 5px rgba(196,31,62,.7); }
.cs-seal span { font-family:var(--mincho); font-weight:800; font-size:21px; color:#fff; }

/* 七 行き方（動く時）：店先から上へ引いて町の俯瞰へ、店に紅の印、地図に替わる。画面いっぱいの舞台を止めて進める */
.access-stage { position:relative; width:100vw; height:100svh; margin-left:calc(50% - 50vw); overflow:hidden; background:var(--yoi); }
.as-view { position:absolute; inset:0; overflow:hidden; }
.as-ground, .as-front { position:absolute; max-width:none; will-change:transform; }
.as-ground img { width:100%; height:100%; }
.as-shade { position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(rgba(29,23,24,.35), rgba(29,23,24,0) 30%, rgba(29,23,24,0) 62%, rgba(29,23,24,.6)); }
/* 印：先の尖った紅の印。先が店の位置（画面の真ん中）に来る */
.as-pin { position:absolute; left:50%; top:50%; width:0; height:0; transform-origin:0 0; }
.as-pin svg { position:absolute; left:-17px; top:-44px; width:34px; height:44px; overflow:visible; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.as-pin path { fill:var(--beni); stroke:#fff; stroke-width:2; }
.as-pin circle { fill:#fff; }
.as-pin b { position:absolute; left:22px; top:-40px; padding:3px 10px 4px; background:var(--shiro); color:var(--sumi); font-family:var(--mincho); font-weight:800; font-size:15px; letter-spacing:.2em; white-space:nowrap; box-shadow:0 4px 10px rgba(0,0,0,.3); }
.as-ring { position:absolute; left:-36px; top:-14px; width:72px; height:28px; border-radius:50%; border:2px solid #ff8a9a; opacity:0; }
.as-pin.is-on .as-ring { animation:as-ring 2.2s cubic-bezier(.2, .7, .3, 1) infinite; }
.as-pin.is-on .as-ring + .as-ring { animation-delay:1.1s; }
@keyframes as-ring { from { transform:scale(.2); opacity:1; } to { transform:scale(1.8); opacity:0; } }
.as-cap { position:absolute; left:var(--gutter); bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 28px); margin:0; color:var(--shiro);
  font-family:var(--mincho); font-weight:800; font-size:clamp(20px, 5.6vw, 30px); line-height:1.7; letter-spacing:.1em; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.as-cap span { display:block; }
@media (min-width: 900px) { .as-cap { bottom:56px; } }
.access-stage .map { position:absolute; inset:0; z-index:2; aspect-ratio:auto; pointer-events:none; }
.access-stage.is-map .map { pointer-events:auto; }
@media (prefers-reduced-motion: reduce) { .as-pin.is-on .as-ring { animation:none; } }

/* 七 行き方（既定）：手描きの略図。和紙が真ん中から開き（--open）、墨の線が引かれ（各線の --d）、紅の点線の道が伸びる（--route）。
   乃音に判子が押され、輪が広がる。形と動きは main.js の .ryaku */
.ryaku { position: relative; width: min(100%, 460px); margin: 0 auto 36px; cursor: pointer; --open: 0; --route: 1;
  background:
    linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%, rgba(120,90,60,.06)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .32 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--kami);
  box-shadow: 0 1px 0 #efe9de, 0 3px 0 #e6dfd2, 0 26px 44px -26px rgba(60,30,20,.5);
  clip-path: inset(0 calc(50% * (1 - var(--open))) 0 calc(50% * (1 - var(--open)))); }
.ryaku svg { display: block; width: 100%; height: auto; }
.rk-ink { fill: none; stroke: var(--sumi); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--d, 1); }
.rk-thin { stroke-width: 1.4; }
.rk-light { stroke: rgba(35, 32, 31, .42); }
.rk-noren { fill: var(--beni); }
.rk-tag { font-family: var(--gothic); font-weight: 700; font-size: 11px; letter-spacing: .3em; fill: var(--sumi-soft); }
.rk-label { font-family: var(--mincho); font-weight: 800; font-size: 17px; letter-spacing: .1em; text-anchor: middle; fill: var(--sumi); }
.rk-pmark { fill: none; stroke: rgba(35, 32, 31, .45); stroke-width: 1.4; }
.rk-p { font-family: var(--mincho); font-weight: 800; font-size: 15px; text-anchor: middle; fill: var(--sumi-soft); }
.rk-small { font-family: var(--gothic); font-size: 11px; letter-spacing: .14em; text-anchor: middle; fill: var(--sumi-soft); }
/* 道：紅の点（丸い端の短い線）。頭から伸びるのはマスクの線（--route）で */
.rk-route { fill: none; stroke: var(--beni); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: .1 9; }
.rk-route-reveal { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1 1; stroke-dashoffset: var(--route, 1); }
.rk-walker { fill: var(--beni); stroke: #fff; stroke-width: 2.5; opacity: 0; }
.rk-walk { font-family: var(--mincho); font-weight: 800; font-size: 14px; letter-spacing: .14em; fill: var(--beni); }
.rk-walk-b { font-size: 28px; letter-spacing: .04em; }
.rk-seal { position: absolute; left: 60%; top: 86%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; opacity: 0;
  background: var(--beni); box-shadow: 0 0 0 3px var(--kami), 0 0 0 5px rgba(196, 31, 62, .6); }
.rk-seal span { writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 800; font-size: 15px; letter-spacing: .06em; color: #fff; }
.rk-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--beni); opacity: 0; }
.rk-seal.is-on .rk-ring { animation: rk-ring 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.rk-seal.is-on .rk-ring + .rk-ring { animation-delay: 1.2s; }
@keyframes rk-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rk-seal.is-on .rk-ring { animation: none; } }

/* 店の BGM の切り替え（帯の中）：流れている間は4本の線が揺れる。止めている間は線が低く止まり、斜めの線が入る */
.dock-sound { border: 0; background: none; color: inherit; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 0; cursor: pointer; }
.dock-sound[hidden] { display: none; }
.snd-bars { position: relative; display: flex; align-items: flex-end; gap: 2px; width: 20px; height: 20px; padding: 3px 1px; }
.snd-bars i { flex: 1; height: 3px; border-radius: 1px; background: currentColor; transition: height .3s; }
.dock-sound[aria-pressed="true"] .snd-bars i { background: var(--beni); animation: snd 1s ease-in-out infinite; }
.dock-sound[aria-pressed="true"] .snd-bars i:nth-child(2) { animation-delay: .25s; }
.dock-sound[aria-pressed="true"] .snd-bars i:nth-child(3) { animation-delay: .5s; }
.dock-sound[aria-pressed="true"] .snd-bars i:nth-child(4) { animation-delay: .12s; }
@keyframes snd { 0%, 100% { height: 3px; } 50% { height: 14px; } }
.dock-sound[aria-pressed="false"] .snd-bars::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.5px; background: currentColor; rotate: -40deg; }
@media (min-width: 900px) { .dock-sound { display: flex; flex-direction: row; width: auto; height: auto; gap: 6px; padding: 0 10px; font-size: 13px; } .snd-bars { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { .dock-sound[aria-pressed="true"] .snd-bars i { animation: none; height: 9px; } }