/* ============================================================
   POOL CAFE 共通スタイル (pool_hair.css から業態色差替+CAFE専用装置を末尾追加) — トンマナ『紙から光へ』(docs/61)
   和文: Noto Serif JP (ミニマル寄せ・Mare FB 2026-08-14)
   欧文: Cormorant Garamond ／ ロゴのみ Comfortaa
   ============================================================ */
:root {
  --paper: #fbf8f3;
  --paper-in: #fdfbf7;
  --mat: #fffdf9;
  --ink: #3b3a33;
  --ink-2: #6b6555;
  --mute: #97907d;
  --rule: rgba(59, 58, 51, .14);
  --bc: #75844e;
  --band: #ece9dd;
  --serif-jp: YakuHanJP, "Noto Serif JP", "Noto Serif JP fallback", "Hiragino Mincho ProN", serif;
  --serif-en: "Cormorant Garamond", "Noto Serif JP", "Noto Serif JP fallback", serif;
  --ease-out: cubic-bezier(.215, .61, .355, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; scroll-behavior: smooth; }
@media (max-width: 900px) { html { font-size: 2.66666vw; } }
body {
  font-family: var(--serif-jp);
  background: var(--paper-in);
  color: var(--ink);
  letter-spacing: .02em;
  font-feature-settings: "palt";
  -webkit-tap-highlight-color: transparent;
  /* 日本語組版: 禁則強化 (長音符・拗音の行頭禁止) + 文節折り + 孤立行回避 */
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
  /* auto-phrase は文節内を割らないため、器より長い文節は溢れる → 収まらない時だけ割る安全弁 */
  overflow-wrap: break-word;
  overflow-x: hidden;
}
::selection { background: rgba(117, 132, 78, .18); }
img { user-select: none; -webkit-user-drag: none; }
a { color: inherit; }
/* Cormorant の既定はオールドスタイル数字 → 沈むためライニングに統一 */
.en, .no, .scr, .ft-r, .price, .lnum { font-variant-numeric: lining-nums; font-feature-settings: "palt", "lnum"; }

/* ---------- W17: 紙grain (TOP=0.68 → 業態=0.28) ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0 0.86 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- W56: フォント読込ゲート ---------- */
.gate-word { display: inline-block; opacity: 0; transform: translateY(34px); filter: blur(7px); }
body.fonts-ready .gate-word {
  opacity: 1; transform: translateY(0); filter: blur(0);
  transition: opacity 1.7s var(--ease-out), transform 1.7s var(--ease-out), filter 1.7s var(--ease-out);
  transition-delay: var(--gd, 0s);
}

/* ---------- ヘッダ ---------- */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.4vh, 24px) clamp(20px, 3.4vw, 44px);
  pointer-events: none;
}
header > * { pointer-events: auto; }
header.scrolled { background: rgba(253, 251, 247, .82); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: baseline; gap: 1.1em; text-decoration: none; }
.brand .logo { font-family: "Comfortaa", sans-serif; font-weight: 600; font-size: 2.1rem; letter-spacing: .04em; }
.brand .bizname { font-family: var(--serif-en); font-size: 1.25rem; letter-spacing: .3em; color: var(--ink-2); }
.gnav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.gnav .nlink {
  position: relative; text-decoration: none;
  font-family: var(--serif-en); font-size: 1.3rem; letter-spacing: .22em; color: var(--ink-2);
  padding-bottom: .5em; font-variant-numeric: lining-nums;
}
.gnav .nlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--bc); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.gnav .nlink:hover::after, .gnav .nlink.current::after { transform: scaleX(1); transform-origin: left; }
.gnav .nlink.current { color: var(--ink); }
.bookpill {
  font-family: var(--serif-jp); font-size: 1.3rem; letter-spacing: .2em; text-decoration: none;
  border: 1px solid var(--ink); border-radius: 999px; padding: .72em 1.9em .68em;
  background: rgba(253, 251, 247, .72); backdrop-filter: blur(6px);
  transition: background .3s, color .3s;
}
.bookpill:hover { background: var(--ink); color: var(--paper-in); }

/* SP メニューボタン + 全画面紙メニュー */
#menuBtn { display: none; }
@media (max-width: 900px) {
  .gnav { display: none; }
  #menuBtn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: .55em;
    width: 4.4rem; height: 4.4rem; padding: 1.3rem 1rem;
    background: rgba(253, 251, 247, .72); backdrop-filter: blur(6px);
    border: 1px solid var(--rule); border-radius: 50%; cursor: pointer;
  }
  #menuBtn i { display: block; height: 1px; background: var(--ink); transition: transform .4s var(--ease-out), opacity .3s; }
  body.menu-open #menuBtn i:nth-child(1) { transform: translateY(.32rem) rotate(20deg); }
  body.menu-open #menuBtn i:nth-child(2) { transform: translateY(-.32rem) rotate(-20deg); }
}
#spmenu {
  position: fixed; inset: 0; z-index: 28; background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; padding: 0 11vw;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s;
}
body.menu-open #spmenu { opacity: 1; visibility: visible; transition: opacity .5s ease; }
#spmenu .mlink {
  display: flex; align-items: baseline; gap: 1.6em; text-decoration: none;
  padding: 1.9rem 0; border-bottom: 1px solid var(--rule);
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .8s var(--ease-out);
}
body.menu-open #spmenu .mlink { opacity: 1; transform: none; }
body.menu-open #spmenu .mlink:nth-child(1) { transition-delay: .1s; }
body.menu-open #spmenu .mlink:nth-child(2) { transition-delay: .16s; }
body.menu-open #spmenu .mlink:nth-child(3) { transition-delay: .22s; }
body.menu-open #spmenu .mlink:nth-child(4) { transition-delay: .28s; }
body.menu-open #spmenu .mlink:nth-child(5) { transition-delay: .34s; }
body.menu-open #spmenu .mlink:nth-child(6) { transition-delay: .4s; }
#spmenu .mlink .en { font-family: var(--serif-en); font-size: 2.5rem; letter-spacing: .2em; }
#spmenu .mlink .jp { font-size: 1.15rem; letter-spacing: .22em; color: var(--mute); }
#spmenu .mext { margin-top: 3.4rem; display: flex; gap: 2.6em; font-size: 1.2rem; letter-spacing: .16em; color: var(--ink-2); opacity: 0; transition: opacity .6s ease .5s; }
body.menu-open #spmenu .mext { opacity: 1; }
#spmenu .mext a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .4em; }

/* ---------- 下層ページヒーロー ---------- */
.page-hero { padding: clamp(120px, 18vh, 190px) clamp(20px, 3.4vw, 44px) clamp(36px, 6vh, 64px); max-width: 1160px; margin: 0 auto; }
.page-hero .en { font-family: var(--serif-en); font-size: 1.25rem; letter-spacing: .34em; color: var(--mute); text-transform: uppercase; }
.page-hero .en .fl { color: var(--bc); margin-right: 1.2em; }
.page-hero h1 { margin-top: 2rem; font-size: clamp(2.6rem, 3vw, 3.8rem); font-weight: 500; letter-spacing: .2em; line-height: 1.8; }
.page-hero .sub { margin-top: 2rem; max-width: 38em; font-size: 1.3rem; line-height: 2.3; letter-spacing: .1em; color: var(--ink-2); }
.page-hero .hr { margin-top: clamp(28px, 4.5vh, 48px); height: 1px; background: var(--rule); position: relative; }
.page-hero .hr::after { content: ""; position: absolute; left: 0; top: 0; width: 7rem; height: 1px; background: var(--bc); }

/* ---------- セクション共通 ---------- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 44px); }
section.block { padding: clamp(76px, 11vh, 130px) 0; }
section.block.band { background: var(--band); }
.sec-head { display: flex; align-items: baseline; gap: 2.2rem; }
.sec-head .no { font-family: var(--serif-en); font-size: 1.2rem; letter-spacing: .3em; color: var(--mute); }
.sec-head .no b { font-weight: 400; color: var(--bc); font-style: normal; }
.sec-head .enlab { font-family: var(--serif-en); font-size: clamp(2.4rem, 2.6vw, 3.4rem); letter-spacing: .24em; font-weight: 400; }
.sec-lede { margin-top: 2.4rem; max-width: 37em; font-size: 1.35rem; line-height: 2.4; letter-spacing: .1em; color: var(--ink-2); }

/* W47: 着色リビール */
.w47 h2, .w47 .h { margin-top: 3.4rem; font-size: clamp(2.1rem, 2.2vw, 2.8rem); font-weight: 500; line-height: 2; letter-spacing: .18em; }
.w47 h2 span, .w47 .h span { color: #ded5c0; transition: color 1s linear; }
.w47.fInview--enter h2 span, .w47.fInview--enter .h span { color: var(--ink); }
.w47.fInview--enter h2 span:nth-child(1), .w47.fInview--enter .h span:nth-child(1) { transition-delay: .1s; }
.w47.fInview--enter h2 span:nth-child(2), .w47.fInview--enter .h span:nth-child(2) { transition-delay: .5s; }
.w47.fInview--enter h2 span:nth-child(3), .w47.fInview--enter .h span:nth-child(3) { transition-delay: .9s; }

/* W05: rise */
.rise { opacity: 0; transform: translateY(26px); transition: opacity 1.1s ease var(--rd, 0s), transform 1.35s var(--ease-out) var(--rd, 0s); }
.fInview--enter .rise, .rise.fInview--enter { opacity: 1; transform: none; }

/* ---------- 写真: 白マット + W67通過マスク + W32金薄膜 ---------- */
.mat { background: var(--mat); border: 1px solid var(--rule); padding: clamp(8px, .9vw, 13px); }
.fig { position: relative; overflow: hidden; background: var(--mat); }
.fig img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.94) contrast(.97) brightness(1.02) sepia(.04);
  transition: transform 1.2s var(--ease-out);
}
.fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--bc); opacity: .1; mix-blend-mode: multiply;
  transition: opacity .7s ease;
}
a .fig::after, figure.hov:hover .fig::after { }
.hov:hover .fig::after { opacity: 0; }
.hov:hover .fig img { transform: scale(1.03); }
/* W67 幕 (rvl配下の .fig) */
.rvl .fig img { opacity: 0; }
.rvl .fig::before { content: ""; position: absolute; inset: 0; z-index: 2; opacity: 0; background: #e9e1d0; transform: translate3d(-101%, 0, 0); }
.rvl.dir-r .fig::before { transform: translate3d(101%, 0, 0); }
.rvl.dir-d .fig::before { transform: translate3d(0, -101%, 0); }
.fInview--enter .rvl .fig::before, .rvl.fInview--enter .fig::before { animation: sweepL .84s cubic-bezier(.04, .435, .315, .9) var(--d, 0s) forwards; }
.fInview--enter .rvl.dir-r .fig::before, .rvl.dir-r.fInview--enter .fig::before { animation-name: sweepR; }
.fInview--enter .rvl.dir-d .fig::before, .rvl.dir-d.fInview--enter .fig::before { animation-name: sweepD; }
.fInview--enter .rvl .fig img, .rvl.fInview--enter .fig img { animation: show50 .01s linear calc(var(--d, 0s) + .42s) forwards; }
@keyframes sweepL { 0% { transform: translate3d(-101%, 0, 0); opacity: 1; } 50% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(101%, 0, 0); opacity: 1; } }
@keyframes sweepR { 0% { transform: translate3d(101%, 0, 0); opacity: 1; } 50% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(-101%, 0, 0); opacity: 1; } }
@keyframes sweepD { 0% { transform: translate3d(0, -101%, 0); opacity: 1; } 50% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(0, 101%, 0); opacity: 1; } }
@keyframes show50 { to { opacity: 1; } }
.cap { margin-top: 1.4rem; font-size: 1.2rem; letter-spacing: .14em; color: var(--ink-2); display: flex; align-items: baseline; gap: 1em; }
.cap .en { font-family: var(--serif-en); letter-spacing: .2em; color: var(--mute); white-space: nowrap; }

/* ---------- W52: ブラケットCTA ---------- */
.cta-row { display: flex; align-items: center; gap: 3.2rem; margin-top: clamp(44px, 6vh, 72px); flex-wrap: wrap; }
.w52btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1.6em;
  min-width: 22rem; padding: 1.7em 2.6em; text-decoration: none; cursor: pointer;
  font-family: var(--serif-jp); font-size: 1.35rem; letter-spacing: .16em; color: var(--ink);
  background: none; border: 0;
  transition: letter-spacing .5s cubic-bezier(.25, .1, .25, 1);
}
.w52btn .en { font-family: var(--serif-en); font-size: .95em; letter-spacing: .26em; color: var(--mute); transition: color .5s; }
.w52btn::before, .w52btn::after { content: ""; position: absolute; width: 20px; height: 20px; transition: width .5s cubic-bezier(.25, .1, .25, 1), height .5s cubic-bezier(.25, .1, .25, 1); }
.w52btn::before { top: 4px; left: 4px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.w52btn::after { bottom: 4px; right: 4px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.w52btn:hover { letter-spacing: .21em; }
.w52btn:hover .en { color: var(--bc); }
.w52btn:hover::before, .w52btn:hover::after { width: 15px; height: 38px; }
@media (hover: none) {
  .cta-row.fInview--enter .w52btn::before, .cta-row.fInview--enter .w52btn::after { animation: w52pulse 1.1s cubic-bezier(.25, .1, .25, 1) 1 .3s; }
}
@keyframes w52pulse { 45% { width: 15px; height: 38px; } 100% { width: 20px; height: 20px; } }

/* ---------- メニュー表 (誌面の1px罫線) ---------- */
.menucat { margin-top: clamp(40px, 6vh, 64px); }
.menucat .mc-head { display: flex; align-items: baseline; gap: 1.8rem; border-bottom: 1px solid var(--ink); padding-bottom: 1.4rem; }
.menucat .mc-head .en { font-family: var(--serif-en); font-size: 1.9rem; letter-spacing: .22em; }
.menucat .mc-head .jp { font-size: 1.2rem; letter-spacing: .2em; color: var(--mute); }
.menurow { display: flex; align-items: baseline; gap: 2rem; padding: 1.9rem .2rem; border-bottom: 1px solid var(--rule); }
.menurow .nm { font-size: 1.35rem; letter-spacing: .12em; }
.menurow .nt { font-size: 1.1rem; letter-spacing: .1em; color: var(--mute); }
.menurow .dots { flex: 1; border-bottom: 1px dotted rgba(59, 58, 51, .25); transform: translateY(-.35em); }
.menurow .price { font-family: var(--serif-en); font-size: 1.45rem; letter-spacing: .08em; white-space: nowrap; }
.menunote { margin-top: 2.2rem; font-size: 1.15rem; line-height: 2.1; letter-spacing: .08em; color: var(--mute); }

/* ---------- FAQ ---------- */
.faq { margin-top: clamp(36px, 5vh, 56px); border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1.8rem;
  padding: 2.4rem .2rem; font-size: 1.4rem; letter-spacing: .12em; line-height: 1.9;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font-family: var(--serif-en); font-size: 1.3rem; letter-spacing: .2em; color: var(--bc); }
.faq summary .pm { margin-left: auto; position: relative; width: 1.4rem; height: 1.4rem; flex: none; align-self: center; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; background: var(--ink-2); transition: transform .4s var(--ease-out); }
.faq summary .pm::before { left: 0; right: 0; top: 50%; height: 1px; }
.faq summary .pm::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.faq details[open] summary .pm::after { transform: scaleY(0); }
.faq .a { display: flex; gap: 1.8rem; padding: 0 .2rem 2.6rem; }
.faq .a .al { font-family: var(--serif-en); font-size: 1.3rem; letter-spacing: .2em; color: var(--mute); }
.faq .a p { font-size: 1.3rem; line-height: 2.3; letter-spacing: .1em; color: var(--ink-2); max-width: 44em; }

/* ---------- スタッフ ---------- */
.staffgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: clamp(44px, 6vh, 72px); }
.staffcard { text-decoration: none; display: block; }
.staffcard .fig { aspect-ratio: 5 / 6; }
.staffcard .nm { margin-top: 1.8rem; display: flex; align-items: baseline; gap: 1.2em; }
.staffcard .nm .ja { font-size: 1.6rem; letter-spacing: .18em; }
.staffcard .nm .en { font-family: var(--serif-en); font-size: 1.15rem; letter-spacing: .22em; color: var(--mute); }
.staffcard .rl { margin-top: .7rem; font-size: 1.15rem; letter-spacing: .16em; color: var(--ink-2); }
.staffcard .pr { margin-top: 1.2rem; font-size: 1.2rem; line-height: 2.1; letter-spacing: .08em; color: var(--ink-2); }
.staffcard .ig { display: inline-block; margin-top: 1.3rem; font-family: var(--serif-en); font-size: 1.15rem; letter-spacing: .12em; color: var(--mute); border-bottom: 1px solid var(--rule); padding-bottom: .5em; }
.staffcard.hov:hover .ig { color: var(--bc); }

/* ---------- Facts / アクセス ---------- */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 6vh, 64px); }
.facts .def { font-size: 1.35rem; line-height: 2.4; letter-spacing: .1em; color: var(--ink-2); max-width: 34em; }
.factrow { display: flex; gap: 2rem; padding: 1.6rem .2rem; border-bottom: 1px solid var(--rule); font-size: 1.3rem; letter-spacing: .1em; }
.factrow:first-child { border-top: 1px solid var(--ink); }
.factrow .k { width: 9em; flex: none; color: var(--mute); letter-spacing: .18em; }
.factrow .v { color: var(--ink); line-height: 2; }
.factrow .v a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .45em; }
.factrow .v .sm { display: block; font-size: .88em; color: var(--mute); margin-top: .5em; }

/* ---------- フッター ---------- */
footer { border-top: 1px solid var(--rule); padding: clamp(48px, 7vh, 80px) clamp(20px, 3.4vw, 44px) clamp(110px, 16vh, 150px); }
.ft-inner { max-width: 1160px; margin: 0 auto; }
.ft-top { display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.ft-l .nm { display: flex; align-items: baseline; gap: 1.2em; }
.ft-l .nm .logo { font-family: "Comfortaa", sans-serif; font-weight: 600; font-size: 1.9rem; }
.ft-l .nm .lab { font-size: 1.2rem; letter-spacing: .2em; color: var(--ink-2); }
.ft-l .fact { margin-top: 1.8rem; font-size: 1.2rem; line-height: 2.2; letter-spacing: .1em; color: var(--ink-2); }
.ft-nav { display: flex; flex-direction: column; gap: 1.1em; font-family: var(--serif-en); font-size: 1.2rem; letter-spacing: .2em; }
.ft-nav a { text-decoration: none; color: var(--ink-2); }
.ft-nav a:hover { color: var(--ink); }
.ft-r { text-align: right; font-size: 1.15rem; letter-spacing: .14em; color: var(--mute); }
.ft-r a { text-decoration: none; display: inline-block; margin-top: 1em; border-bottom: 1px solid var(--rule); padding-bottom: .35em; transition: border-color .3s; }
.ft-r a:hover { border-color: var(--ink); }
.ft-btm { margin-top: clamp(36px, 5vh, 56px); padding-top: 2.2rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; font-size: 1.05rem; letter-spacing: .14em; color: #b0a892; }
.ft-btm .en { font-family: var(--serif-en); }

/* ---------- W14: 追従予約バー (SP) ---------- */
#stickybook {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: none; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule);
  transform: translateY(110%); transition: transform .55s var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
#stickybook.on { transform: translateY(0); }
#stickybook a { flex: 1; display: flex; align-items: center; justify-content: center; gap: .8em; padding: 1.55em .6em 1.45em; text-decoration: none; font-size: 1.35rem; letter-spacing: .16em; background: rgba(253, 251, 247, .92); backdrop-filter: blur(8px); white-space: nowrap; }
#stickybook .hpb { background: var(--ink); color: var(--paper-in); }
#stickybook .hpb .en { font-family: var(--serif-en); font-size: .85em; letter-spacing: .24em; opacity: .65; }
#stickybook .tel .en { font-family: var(--serif-en); letter-spacing: .1em; }

/* ---------- スマホ ---------- */
@media (max-width: 900px) {
  #stickybook { display: flex; }
  .bookpill { display: none; }
  header { gap: 1.2rem; }
  .facts { grid-template-columns: 1fr; }
  .staffgrid { grid-template-columns: 1fr; gap: 40px; }
  .factrow .k { width: 7.5em; }
  .ft-r { text-align: left; }
  .ft-r a { font-size: 1.05rem; letter-spacing: .08em; line-height: 2; }
  .w52btn { min-width: 100%; padding: 1.4em 2em; }
  .menurow { flex-wrap: wrap; gap: .8rem 1.6rem; }
  .menurow .dots { display: none; }
  .menurow .price { margin-left: auto; }
  footer { padding-bottom: 150px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gate-word { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; transition: none; }
  .rvl .fig img { opacity: 1; animation: none !important; }
  .rvl .fig::before { display: none; }
  .w47 h2 span, .w47 .h span { color: var(--ink); transition: none; }
}

/* fix: page-hero 直下の .sub/.hr は gate-word(inline-block) でも block を維持
   (inline-block化すると .hr が幅0に潰れ、.sub の行末に金線だけが浮く) */
.page-hero .sub, .page-hero .hr { display: block; }

/* ============================================================
   CAFE 専用装置 (docs/61 §5.3 体温ダイヤル)
   ============================================================ */

/* ---------- W07(簡易版): ja/en トグル ---------- */
.tr .en-t { display: none; }
body.lang-en .tr .ja-t { display: none; }
body.lang-en .tr .en-t { display: inline; }
body.lang-en .tr .en-t { letter-spacing: .04em; }
#langBtn {
  font-family: var(--serif-en); font-size: 1.2rem; letter-spacing: .2em;
  border: 1px solid var(--rule); border-radius: 999px; background: rgba(253, 251, 247, .72);
  backdrop-filter: blur(6px); color: var(--ink-2); padding: .6em 1.4em; cursor: pointer;
  transition: border-color .3s, color .3s; font-variant-numeric: lining-nums;
}
#langBtn:hover { border-color: var(--bc); color: var(--bc); }
main.lang-fade { animation: langfade .45s ease; }
@keyframes langfade { 0% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- W76: steps() スプライト — 湯気のパラパラ漫画 (装飾) ---------- */
.steam { width: 2.2rem; height: 2.8rem; overflow: hidden; display: inline-block; vertical-align: baseline; opacity: .8; }
.steam svg { display: block; width: 2.2rem; height: 11.2rem; animation: steamflip 1.2s steps(4) infinite; }
@keyframes steamflip { to { transform: translateY(-11.2rem); } }
@media (prefers-reduced-motion: reduce) { .steam svg { animation: none; } }

/* ---------- メニュー写真カード ---------- */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 36px); margin-top: clamp(36px, 5vh, 56px); }
.mgrid .fig { aspect-ratio: 1 / 1; }
.mcard .cap { justify-content: space-between; }
.mcard .cap .nm { display: flex; flex-direction: column; gap: .5em; }
.mcard .cap .nm .en2 { font-family: var(--serif-en); font-size: .95em; letter-spacing: .18em; color: var(--mute); }
.mcard .cap .price { font-family: var(--serif-en); font-size: 1.35rem; letter-spacing: .06em; white-space: nowrap; font-variant-numeric: lining-nums; }
@media (max-width: 900px) {
  .mgrid { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  /* 2列カードは名前と価格を同じ行に置くと商品名が中途半端に折れる → 縦積みで名前に全幅を与える */
  .mcard .cap { flex-direction: column; align-items: flex-start; gap: .55em; }
  .mcard .cap .price { align-self: flex-start; }
}

/* ---------- ルール/ご利用について ---------- */
.rulerow .k { width: 11em; }
@media (max-width: 900px) { .rulerow .k { width: 8.5em; } }

/* 価格の無い行 (店頭ボード案内) は点線リーダーを引かない — 「未記入」に見えるのを防ぐ */
.menurow .dots:last-child { display: none; }

/* ============================================================
   組版ユーティリティ (磨き込みパス 2026-08-15)
   ============================================================ */
/* 分断してはいけない語句 (固有名詞・時刻レンジ・電話・ハンドル) を包む */
.nb { white-space: nowrap; }
/* 本文中の下線リンクはディセンダが線に触れないよう余白を確保 */
.lede a, .sec-lede a, .menunote a, .page-hero .sub a, .prose a { padding-bottom: .4em; }

/* EN表示で「Full menu MENU」のように英字ラベルが重複するボタンは、英字側を隠す */
body.lang-en .w52btn .dup-en { display: none; }

/* auto-phrase は文節を割らないので min-content が伸び、grid/flex 項目が器を押し広げることがある。
   本文を持つグリッドの子は min-width:0 にして器の幅に従わせる (溢れる時だけ overflow-wrap が割る) */
.facts > *, .mgrid > *, .staffgrid > *, .accessgrid > *, .colgrid > *, .concept-grid > *,
.dog-grid > *, .gallery > *, .person > *, .rec-grid > *, .space-grid > *, .space-ph > *,
.stylegrid > *, .wgal > *, .workgrid > *, .flowlist > *, .menucat > * { min-width: 0; }

/* SP追従バー: 横1行だと業態によって英字ラベルが折れる/見切れるため、ラベルと英字を上下2段に積む */
@media (max-width: 560px) {
  #stickybook a { flex-direction: column; gap: .3em; padding: 1.15em .6em 1.05em; line-height: 1.35; }
}