@charset "utf-8";
/* ============================================================
   大衆酒場 吉左右 — A案「昭和レトロ」v2
   方針：レトロ"風"の部品を貼るのをやめる。引き算でつくる。
        ・色は3つだけ（生成り／墨／朱）
        ・書体は明朝。丸ゴシックは使わない（学童っぽくなる）
        ・写真に枠と影をつけない。写真そのものを大きく置く
        ・余白を広く、縦書きを効かせる
        ・質感は「紙・粒子・にじみ」で出す。装飾では出さない
   カクつき対策：fixed に backdrop-filter を付けない／will-change を撒かない／
        アニメは transform・opacity のみ。（~/.claude/docs/ui-style.md）
   ============================================================ */

:root{
  --paper:   #ece4d3;   /* 生成り。ページの地。★motion.css の rv--wipe もこれを読む */
  --paper-rgb: 236,228,211;  /* 上の --paper と同じ色 */
  --night-rgb: 25,19,16;     /* 下の --night と同じ色。HEROの重ねに使う */
  --paper-2: #f4eee1;
  --sumi:    #2b2320;   /* 墨。主文字 */
  --sumi-dim:#7b6c60;
  --rule:    #cfc2ab;   /* 極細の罫 */
  --shu:     #bf3a2b;   /* 朱。アクセントはこれ一色だけ */
  --night:   #191310;   /* 夜の面 */
  --mint:    #6f9b86;   /* 店のタイルの色。面に使う */
  --mint-t:  #3d6a56;   /* 同系の濃い方。★生成りの地の上の文字（リンク）はこちら。
                           #6f9b86 を生成りに置くと差が2.5倍しかなく読めない（基準は4.5倍）。
                           逆に夜色の地（フッタ）では濃い方が沈むので、そこは --mint を使う */

  --min:  "Shippori Mincho B1","Shippori Mincho",'Hiragino Mincho ProN','Yu Mincho',serif;
  --got:  "Zen Kaku Gothic New","Noto Sans JP",'Hiragino Kaku Gothic ProN',sans-serif;
  --fude: "Yuji Syuku",var(--min);
  --marker:"Yomogi",var(--got);

  --pad: clamp(22px, 6vw, 80px);
  --maxw: 1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--sumi);
  font-family:var(--got); font-size:16px; line-height:1.85;
  letter-spacing:.04em; overflow-x:hidden; font-feature-settings:"palt" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* 紙の粒子。控えめに1枚だけ */
body::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.ja-phrase{display:inline-block}
.wrap{width:min(100% - var(--pad)*2, var(--maxw)); margin-inline:auto; position:relative; z-index:1}
section{position:relative; z-index:1}

/* 区切りはタイル帯をやめ、余白と極細の罫だけ */
.block{ padding: clamp(60px,10vw,120px) 0 }
.block + .block{ border-top:1px solid var(--rule) }
.block--tint{ background:var(--paper-2) }

/* ============================================================
   セクション見出し — 明朝を大きく、縦書きの札を添えるだけ
   ============================================================ */
.sec-head{ margin:0 0 clamp(26px,5vw,52px); display:flex; align-items:flex-start; gap:clamp(20px,3.6vw,38px) }
.fuda{
  flex:none; writing-mode:vertical-rl; font-family:var(--fude);
  background:#faf6ec; color:#2b2320;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(22px,3.6vw,34px) clamp(12px,2.2vw,18px);
  min-height:clamp(140px,23vw,196px);
  font-size:clamp(23px,4.6vw,34px); letter-spacing:.22em; line-height:1.35;
  box-shadow:0 3px 0 rgba(43,35,32,.06), 0 10px 22px rgba(43,35,32,.13);
  position:relative; transform:rotate(-1.4deg);
  clip-path:polygon(2% 0, 98% 1%, 100% 99%, 1% 100%);
}
/* 吊り下げの紐と、掛かっている釘 */
.fuda::before{
  content:""; position:absolute; left:50%; top:calc(-1 * clamp(26px,4.5vw,44px));
  width:1px; height:clamp(26px,4.5vw,44px);
  background:linear-gradient(180deg, rgba(169,152,132,0) 0%, #a99884 40%);
  transform:translateX(-50%);
}
.fuda::after{
  content:""; position:absolute; left:50%; top:calc(-1 * clamp(28px,4.7vw,47px));
  width:6px; height:6px; border-radius:50%; background:#8a7a68;
  transform:translateX(-50%); box-shadow:0 1px 2px rgba(43,35,32,.3);
}
.sec-head{ padding-top:clamp(16px,3vw,32px) }
.sec-head h2{
  font-family:var(--min); font-weight:600; margin:.1em 0 .45em;
  font-size:clamp(27px,6.4vw,50px); line-height:1.5; letter-spacing:.07em; color:var(--sumi);
}
.sec-head > div p{ margin:0; color:var(--sumi-dim); font-size:clamp(13.5px,2.6vw,15.5px); line-height:1.8 }
.sec-num{
  display:block; font-family:var(--min); color:var(--shu);
  font-size:12px; letter-spacing:.34em; margin-bottom:.6em;
}
/* .line-up は overflow:hidden なので行に余白を足す */
.sec-head h2.line-up > span{ padding-bottom:.14em }

/* ============================================================
   追従ヘッダー — HEROを過ぎてから出す
   1画面目はHEROの店名があるので出さない（同じ名前を二度見せない）。
   backdrop-filter は使わない／動かすのは transform だけ（ui-style.md）
   ============================================================ */
.topbar{
  position:fixed; left:0; right:0; top:0; z-index:55;
  padding:11px var(--pad);
  background:var(--paper-2); border-bottom:1px solid var(--rule);
}
.topbar a{ display:inline-flex; align-items:baseline; gap:.8em; text-decoration:none; color:var(--sumi) }
.topbar__n{ font-family:var(--min); font-weight:600; font-size:15px; letter-spacing:.2em }
.topbar__e{ font-family:var(--min); font-size:10px; letter-spacing:.3em; color:var(--sumi-dim) }

/* ============================================================
   HERO — 写真を主役に。文字は縦書きの店名と一行だけ
   ============================================================ */
.hero{
  position:relative; background:var(--night); overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:calc(100svh - 59px);
}
/* B案（b.html）のHEROは別部品。A案用の指定を巻き込まないよう戻す */
.hero--doll{ display:block; align-items:initial; min-height:0; background:var(--paper) }

@media (min-width:860px){
  .hero{ min-height:min(100svh,960px) }
  /* PCは文字の塊が横に広く低いので、上の余白を減らして写真を見せる */
  .hero__inner{ padding-block: clamp(90px,12vw,160px) clamp(34px,4vw,52px) }
}

/* 写真はHERO全面の1枚。文字はこの上に、夜色のグラデーションを挟んで載せる */
.hero__bg{ position:absolute; inset:0; overflow:hidden; background:var(--night) }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  filter:sepia(.08) saturate(.96) contrast(1.05) }
@media (min-width:860px){ .hero__bg img{ object-position:50% 42% } }
.hero__bg::after{ content:none }


.hero__inner{
  position:relative; z-index:3; width:100%;
  /* 下は紙、上へ行くほど写真が見える。文字が乗るのは不透明側だけ */
  background:linear-gradient(to top,
    rgba(var(--night-rgb),.94) 0%,
    rgba(var(--night-rgb),.90) 55%,
    rgba(var(--night-rgb),.84) 76%,
    rgba(var(--night-rgb),.30) 92%,
    rgba(var(--night-rgb),0) 100%);
  padding-block: clamp(110px,26vw,210px) clamp(26px,4vw,44px);
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  width:100%;
  display:grid; gap:clamp(16px,3vw,34px); grid-template-columns:1fr auto; align-items:start;
}
/* 紙のふち。ごく淡い影で「乗っている」ことだけ出す */
.hero__inner::before{ content:none }
.hero__eyebrow{
  font-family:var(--min); font-size:clamp(12.5px,2.8vw,14px);
  letter-spacing:.3em; color:#c9b79a; margin:0 0 14px; text-shadow:0 1px 18px rgba(0,0,0,.5);
}
.hero__catch{
  font-family:var(--min); font-weight:600; margin:0 0 22px;
  font-size:clamp(32px,8.6vw,68px); line-height:1.4; letter-spacing:.05em;
  color:#f7eeda; text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.hero__catch .kin{ color:#ef8a70 }
.hero__lead{ margin:0 0 26px; max-width:32em; color:#e4d7c0;
  font-size:clamp(15px,3.7vw,18px); line-height:1.9; letter-spacing:.04em;
  text-shadow:0 1px 20px rgba(0,0,0,.55) }

/* 店名は和紙の上に縦書きで */
.hero__name{
  position:static; writing-mode:vertical-rl; font-family:var(--min); font-weight:600;
  font-size:clamp(22px,5vw,34px); letter-spacing:.28em; line-height:1; color:#f7eeda;
  margin:0; text-shadow:0 2px 22px rgba(0,0,0,.55); align-self:start; padding-top:4px;
}
.hero__name::before{ content:none }
.hero__name small{ display:block; font-size:.4em; letter-spacing:.34em; color:#b09b80; margin-top:1.6em }
@media (max-width:560px){
  .hero__inner{ grid-template-columns:1fr; gap:0 }
  /* 店名は目印なので先頭へ。order が無いと電話ボタンの下に回り込む */
  .hero__name{ order:-1; writing-mode:horizontal-tb; font-size:16px; letter-spacing:.24em;
    color:#e0d2b9; margin:0 0 12px; padding-top:0 }
  .hero__name small{ display:inline; font-size:.8em; margin:0 0 0 .8em }
  /* 下の固定バーに同じ電話ボタンがあるので、HERO のぶんは出さない */
  .hero .btns{ display:none }
}
.hero__scroll{ display:none;
  position:absolute; left:50%; bottom:16px; z-index:3; transform:translateX(-50%);
  font-size:11px; letter-spacing:.34em; color:#b0a08c;
  writing-mode:vertical-rl; padding-bottom:40px;
}
.hero__scroll::after{
  content:""; position:absolute; left:50%; bottom:0; width:1px; height:32px;
  background:linear-gradient(#a8977f, transparent);
}

/* ============================================================
   銘柄の帯 — 夜色に朱の文字。ベタ塗りをやめる
   ============================================================ */
.ticker{
  background:var(--night); color:#e8dbc4; padding:15px 0; overflow:hidden;
}
/* ============================================================
   お知らせ（Instagram）の帯 — 1セクション使っていたのを帯にした
   ============================================================ */
.instabar{ background:var(--night); color:#e8dbc4; padding:clamp(26px,4.5vw,42px) 0; position:relative; z-index:1 }
.instabar__in{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2.6vw,30px) }
.instabar__t{ margin:0; flex:1 1 320px; font-family:var(--min);
  font-size:clamp(15px,3.2vw,19px); line-height:1.95; letter-spacing:.05em }
.instabar__t b{ display:block; color:#f6ecd9; font-weight:600 }
.instabar__id{ margin:0; font-size:12.5px; letter-spacing:.08em; color:#9d8d76 }

.ticker .marquee{overflow:hidden}
.ticker .marquee__t{display:flex;width:max-content}
.ticker span{
  font-family:var(--min); font-size:clamp(14px,2.9vw,19px);
  letter-spacing:.2em; white-space:nowrap; padding-inline:.9em;
}
.ticker span i{ color:#8e6f4e; font-style:normal; padding-inline:.55em }

/* ============================================================
   共通
   ============================================================ */
.lede{ font-family:var(--min); font-size:clamp(15.5px,3.2vw,19px); line-height:1.95;
  letter-spacing:.05em; max-width:29em; color:var(--sumi) }
.lede + .lede{ margin-top:1.2em }
.note{ color:var(--sumi-dim); font-size:13px; line-height:1.8 }

/* 写真は枠も影もつけない */
figure{margin:0}
.ph{ position:relative; overflow:hidden; background:#ddd3c0 }
.ph img{ width:100%; height:100%; object-fit:cover;
  filter:sepia(.1) saturate(.92) contrast(1.04) brightness(.99) }
.ph--16x9{aspect-ratio:16/9} .ph--4x3{aspect-ratio:4/3}
.ph--1x1{aspect-ratio:1/1}   .ph--3x4{aspect-ratio:3/4}
.cap{ margin-top:9px; font-size:13px; color:var(--sumi-dim); letter-spacing:.08em; line-height:1.8 }

/* 撮影メモ */
[data-shot]::after{
  content:"要撮影 ｜ " attr(data-shot);
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  background:rgba(191,58,43,.94); color:#fff;
  font-size:11.5px; line-height:1.65; letter-spacing:.02em; padding:8px 11px; font-family:var(--got);
}
[data-shot]::before{ content:""; position:absolute; inset:0; z-index:2; border:2px dashed rgba(191,58,43,.85) }
body.shots-off [data-shot]::after, body.shots-off [data-shot]::before{ display:none }
.shot-toggle{
  position:fixed; right:10px; bottom:70px; z-index:60;
  background:rgba(244,238,225,.95); color:var(--sumi-dim); border:1px solid var(--rule);
  font-family:var(--got); font-size:12px; letter-spacing:.04em;
  padding:7px 13px; border-radius:100px; cursor:pointer;
}
@media (min-width:860px){ .shot-toggle{ bottom:14px } }
.shot-toggle b{ color:var(--shu) }

/* ============================================================
   頼み方／豆知識 — 枠を消して、縦の細い罫だけで分ける
   ============================================================ */
.escape,.debut{ display:grid; gap:0; margin-top:clamp(40px,7vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.escape__c,.debut__c{ padding:clamp(20px,3.4vw,30px) clamp(18px,3vw,30px); border-top:1px solid var(--rule) }
@media (min-width:660px){
  .escape__c + .escape__c, .debut__c + .debut__c{ border-left:1px solid var(--rule) }
}
.escape__c .q,.debut__c p{ margin:0; color:var(--sumi-dim); font-size:13.5px; line-height:1.8 }
.escape__c .a{ margin:0 0 .6em; font-family:var(--min); font-weight:600; color:var(--shu);
  font-size:clamp(17px,3.6vw,21px); line-height:1.7; letter-spacing:.05em }
.debut__c .n{ font-family:var(--min); color:var(--shu); font-size:11px; letter-spacing:.3em }
.debut__c h4{ font-family:var(--min); font-weight:600; font-size:clamp(18px,3.8vw,23px);
  margin:.7em 0 .5em; letter-spacing:.06em; color:var(--sumi) }

.byaf{
  margin-top:clamp(32px,5.5vw,56px); padding:clamp(24px,4vw,38px) 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:var(--min); font-size:clamp(17px,3.8vw,24px); line-height:1.95;
  letter-spacing:.08em; text-align:center;
}
.byaf b{ color:var(--shu); font-weight:600 }

/* ============================================================
   札（短冊）レール
   ============================================================ */
.fuda-rail{
  margin-top:clamp(40px,7vw,64px); padding:44px 0 52px; position:relative; background:var(--night);
}
.fuda-rail .scroll-x{ display:flex; gap:16px; overflow-x:auto; padding:0 var(--pad) 8px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch }
.fuda-rail .scroll-x::-webkit-scrollbar{height:0}
.tanzaku{
  flex:none; scroll-snap-align:center; writing-mode:vertical-rl; font-family:var(--fude);
  background:#f7f1e3; color:#231c19;
  width:clamp(50px,11vw,64px); min-height:clamp(216px,43vw,288px);
  padding:22px 9px; font-size:clamp(16px,3.4vw,20px); letter-spacing:.16em; line-height:1.3;
  box-shadow:0 10px 26px rgba(0,0,0,.45); position:relative;
}
.tanzaku:nth-child(odd){transform:rotate(-1.2deg)}
.tanzaku:nth-child(even){transform:rotate(1deg)}
.tanzaku::before{
  content:""; position:absolute; left:50%; top:-24px; width:1px; height:24px;
  background:#7d6d58; transform:translateX(-50%);
}
.tanzaku small{ display:block; font-size:.6em; color:#8a7a63; letter-spacing:.1em; margin-top:1.2em }

/* ============================================================
   ホワイトボード
   ============================================================ */
.wb{
  margin-top:clamp(30px,5vw,48px);
  background:#fbfaf6; border:6px solid #b4b7ba;
  box-shadow:0 6px 22px rgba(43,35,32,.14);
  padding:clamp(22px,4vw,36px) clamp(20px,4vw,38px) clamp(26px,4.4vw,40px);
  color:#1b1b1b;
}
.wb__t{
  font-family:var(--marker); font-size:clamp(17px,3.8vw,23px); color:#1f4e8c;
  margin:0 0 .8em; letter-spacing:.04em; border-bottom:2px solid #1f4e8c;
  display:inline-block; padding-bottom:.15em;
}
.wb ul{ margin:0; padding:0; list-style:none;
  display:grid; gap:.4em clamp(16px,3vw,34px); grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
.wb li{ font-family:var(--marker); font-size:clamp(15px,3.2vw,19px); line-height:1.9;
  display:flex; align-items:baseline; gap:.5em; color:#20242a }
.wb li b{ font-weight:400; flex:none }
.wb li span{ font-family:var(--got); font-size:11.5px; color:#6b7078; letter-spacing:.04em }
.wb li.is-red{ color:#b3312a }
.wb__note{ margin:1.3em 0 0; font-family:var(--marker); font-size:clamp(13px,2.8vw,15px); color:#5c6169 }

/* ============================================================
   酒・肴のカード — 枠なし。写真を並べるだけ
   ============================================================ */
.sake-grid{ display:grid; gap:clamp(14px,2.6vw,26px) clamp(12px,2.2vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
.sake-card{ position:relative }
.sake-card .ph{ aspect-ratio:3/4 }
.sake-card .ph--4x3{ aspect-ratio:4/3 }
.sake-card img{ transition:transform .9s cubic-bezier(.22,.61,.36,1) }
@media (hover:hover){ .sake-card:hover img{ transform:scale(1.045) } }
.sake-card figcaption{ margin-top:11px; font-family:var(--min); font-weight:600;
  font-size:15px; letter-spacing:.06em; line-height:1.7; color:var(--sumi) }
.sake-card figcaption small{ display:block; font-family:var(--got); font-weight:400;
  font-size:12.5px; color:var(--sumi-dim); letter-spacing:.06em; margin-top:.3em }
.sake-card .badge{
  position:absolute; left:0; top:0; z-index:4;
  background:var(--shu); color:#fdf6e8; font-family:var(--got); font-weight:500;
  font-size:10.5px; letter-spacing:.1em; padding:4px 10px;
}
.sake-card .badge--local, .sake-card .badge--fuyu{ background:var(--shu); color:#fdf6e8 }


.jimoto{
  margin-top:clamp(36px,6vw,64px); padding:clamp(24px,4vw,38px) 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.jimoto h3{ font-family:var(--min); font-weight:600; font-size:clamp(20px,4.2vw,29px);
  margin:0 0 .8em; letter-spacing:.08em; color:var(--sumi) }
.jimoto p{margin:0 0 .9em; font-family:var(--min); line-height:1.95; letter-spacing:.05em; max-width:32em}
.jimoto p:last-child{margin-bottom:0}

/* ============================================================
   段組み
   ============================================================ */
.duo{ display:grid; gap:clamp(22px,4vw,52px); align-items:center; grid-template-columns:1fr }
@media (min-width:860px){ .duo{ grid-template-columns:1.02fr .98fr } .duo--flip .duo__txt{ order:-1 } }
.trio{ display:grid; gap:clamp(14px,2.6vw,24px); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
/* スマホは横スワイプ。写真を縦に積むと間延びして読みにくいため（2026-09-09 窪田さん）。
   ★2026-09-09 作り直し：はじめは「端で次の1枚を見切らせる」型にしたが、
     窪田さん「スクロールがわかりにくいし次の写真が半分見えていてダサく感じる」。
     → 1枚まるごと表示に変え、下に丸印（何枚あって今どれか）を付ける方式へ。
   .sake-grid＝お品書きの4枚／.trio＝地域の台所の3枚。PCは今までどおりの並び。
   JSは丸印の点灯だけ。スクロール自体はCSSのスクロールスナップ。 */
@media (max-width:640px){
  .sake-grid, .trio{
    display:flex; gap:12px;
    overflow-x:auto; overflow-y:hidden;
    overscroll-behavior-x:contain;          /* 横に振り切ってもページごと動かさない */
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sake-grid::-webkit-scrollbar, .trio::-webkit-scrollbar{ display:none }
  /* 1枚まるごと。次の写真は見せない */
  .sake-grid > .sake-card, .trio > figure{ flex:0 0 100%; scroll-snap-align:center }
  /* 横に流す枠の中では縦のずれ演出をやめる（overflow で切れるため） */
  .sake-grid.stagger > *, .trio.stagger > *{ transform:none }
}

/* 横スワイプの丸印 */
.sw-dots{ display:none }
@media (max-width:640px){
  .sw-dots{ display:flex; gap:9px; justify-content:center; margin-top:15px }
  .sw-dots span{ width:6px; height:6px; border-radius:50%; background:var(--rule);
    transition:background-color .3s ease, transform .3s ease }
  .sw-dots span.is-on{ background:var(--shu); transform:scale(1.4) }
}
@media (prefers-reduced-motion: reduce){ .sw-dots span{ transition-duration:.01ms } }


/* ============================================================
   店の情報
   ============================================================ */
.info{ display:grid; gap:clamp(24px,4vw,44px); grid-template-columns:1fr }
@media (min-width:860px){ .info{ grid-template-columns:1fr 1fr } }
.dl{ margin:0; border-top:1px solid var(--rule) }
.dl > div{ display:grid; grid-template-columns:6em 1fr; gap:0 16px;
  padding:11px 2px; border-bottom:1px solid var(--rule) }
.dl dt{ font-family:var(--min); color:var(--shu); font-size:13.5px; letter-spacing:.14em; line-height:1.85 }
.dl dd{ margin:0; font-size:14.5px; line-height:1.8 }
.dl dd b{ font-size:16.5px; letter-spacing:.04em }
.todo{ color:var(--shu); font-size:11.5px; display:block }
body.shots-off .todo{ display:none }
.dl.access dd small{ color:var(--sumi-dim); font-size:12px }

/* 情報欄の中の地図リンク（駐車場など） */
.maplink{ display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  font-family:var(--got); font-size:13px; letter-spacing:.06em; color:var(--mint-t);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px }
.maplink svg{ width:14px; height:14px; fill:currentColor; flex:none }

.map-embed{ aspect-ratio:4/3; overflow:hidden; background:#ddd3c0 }
.map-embed iframe{ width:100%; height:100%; border:0; filter:saturate(.8) }

/* ============================================================
   ボタン — 影も太枠もやめる
   ============================================================ */
.btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:216px; min-height:56px; padding:0 26px;
  font-family:var(--got); font-size:14.5px; font-weight:500; letter-spacing:.12em;
  text-decoration:none; border:1px solid var(--shu);
  transition:background .3s, color .3s;
}
.btn--main{ background:var(--shu); color:#fdf6e8 }
.btn--sub { background:transparent; color:var(--shu) }
@media (hover:hover){
  .btn--main:hover{ background:transparent; color:var(--shu) }
  .btn--sub:hover { background:var(--shu); color:#fdf6e8 }
}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}
.hero .btn--sub{ border-color:#d9c9ae; color:#f2e6d0 }
@media (hover:hover){ .hero .btn--sub:hover{ background:#f2e6d0; color:var(--sumi) } }

/* ============================================================
   固定CTA（backdrop-filter は使わない）
   ============================================================ */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--paper-2); border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(105%); transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.cta-bar.is-on{ transform:translateY(0) }
.cta-bar a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:58px; text-decoration:none;
  font-family:var(--got); font-size:14px; font-weight:500; letter-spacing:.1em;
}
.cta-bar a:first-child{ background:var(--shu); color:#fdf6e8 }
.cta-bar a:last-child { color:var(--sumi) }
.cta-bar svg{width:17px;height:17px;fill:currentColor}
body{ padding-bottom:59px }
@media (min-width:860px){ .cta-bar{display:none} body{padding-bottom:0} }

/* ============================================================
   フッタ
   ============================================================ */
/* 入口の扉が開くHERO（2026-09-26）
   元写真 real_iriguchi.jpg は 768x1024。その中の扉の位置を % で置いている。
   扉は取っ手が左＝蝶番が右なので、右端を軸に奥へ開く。動かすのは transform だけ。 */
/* 画面に貼り付けて、前半で扉が開き、後半で文字が出る */
/* 扉の画面の高さは「画面−上の帯52px−日本酒の帯（--tk、motion.js が測って入れる）」。
   止まったとき日本酒の帯を見せても扉の画面が押し上げられず、暖簾の上が上の帯に隠れない
   （2026-09-28 窪田さん「扉を開くと見切れてしまうのが嫌だ」） */
/* 高さ＝扉が開く分＋文字が出る分＋「一度止まる」位置のあとの余白（2026-09-27 170→200svh） */
.hero--door{ display:block; align-items:initial; overflow:visible; min-height:0; height:200svh }
.hero--door .hero__stick{
  position:sticky; top:52px; height:calc(100svh - 52px - var(--tk, 0px));
  overflow:hidden; display:flex; align-items:flex-end; background:var(--night);
}
@media (min-width:860px){
  .hero--door{ height:200svh }
  .hero--door .hero__stick{ height:min(calc(100svh - 52px - var(--tk, 0px)),960px) }
}
/* 文字は扉が開ききってから、奥から手前に出てくる */
.hero--door .hero__inner{
  opacity:var(--txt,0);
  transform:translateY(calc((1 - var(--txt,0)) * 44px)) scale(calc(.90 + var(--txt,0) * .10));
}
.hero--door .hero__bg{ display:flex; align-items:center; justify-content:center }
/* 写真は 768x1024＝3:4。高さから幅を出す。画面が狭いときは幅に合わせて縦も縮め、
   のれん（店名）が左右で切れないようにする */
.door-scene{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  width:calc((100svh - 52px - var(--tk, 0px)) * .75); max-width:100%;
}
@media (min-width:860px){
  .door-scene{ width:calc(min(calc(100svh - 52px - var(--tk, 0px)),960px) * .75) }
}
.door-scene > .door-bg{ position:absolute; inset:0; display:block; width:100%; height:100% }
.door-scene > .door-bg img{ width:100%; height:100%; object-fit:cover }
/* 扉の開口部：左188/768、上318/1024、幅414/768、高さ706/1024 */
.door-in{
  position:absolute; left:24.48%; top:31.84%; width:53.91%; height:68.16%;
  overflow:hidden; background:#0b0806;
}
.door-in > img{ object-position:50% 42% }
/* 扉の向こうは、外から見ると暗い。文字も読みやすくなる */
.door-in::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
    rgba(var(--night-rgb),.70) 0%, rgba(var(--night-rgb),.46) 45%, rgba(var(--night-rgb),.14) 100%);
}
/* 引き戸。右の壁の内側（戸袋）へ入る（2026-09-27 窪田さん「とびらは内側だよ、右の壁の」）。
   開口部 .door-in の中でスライドさせ、右端で隠れるようにする */
.door-leaf{
  position:absolute; inset:0; z-index:2;
  transform:translate3d(calc(var(--open,0) * 100%),0,0);
  box-shadow:-18px 0 30px rgba(0,0,0,.42);
}
/* 視差効果を減らす設定でも止めない（窪田さんの実機はON）。開き方を控えめにするだけ */
@media (prefers-reduced-motion: reduce){
  .door-leaf{ transform:translate3d(calc(var(--open,0) * 88%),0,0) }
}
/* スマホは縦長に切った写真（610x1024）を使い、画面いっぱいに近づける。
   ★この指定は .door-in の定義より後ろに置くこと。前に置くと上書きされ、
     開口部が狭いままになって扉の取っ手が外に取り残される（2026-09-27 実機で発覚） */
@media (max-width:700px){
  .door-scene{ aspect-ratio:610/1024; width:calc((100svh - 52px - var(--tk, 0px)) * 0.5957) }
  .door-in{ left:17.70%; width:67.87% }
}

/* のれん（2026-09-27 窪田さん「暖簾も扉のスライドに合わせてはためいて」）
   写真から3枚に切り出して重ね、背景側の のれん は暗く塗った下地（*_plate.jpg）に替えている。
   上端を軸に、motion.js が扉の開く速さから揺れを計算して transform だけを書き換える */
.noren{ position:absolute; inset:0; z-index:3; pointer-events:none }
.noren i{
  position:absolute; top:1.172%; height:31.055%;
  background:center / 100% 100% no-repeat; transform-origin:50% 0;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.35));
}
.noren i:nth-child(1){ left:18.750%; width:23.828%; background-image:url(../img/noren_pc_1.png) }
.noren i:nth-child(2){ left:42.188%; width:21.615%; background-image:url(../img/noren_pc_2.png) }
.noren i:nth-child(3){ left:63.281%; width:22.526%; background-image:url(../img/noren_pc_3.png) }
@media (max-width:700px){
  .noren i:nth-child(1){ left:10.492%; width:30.000%; background-image:url(../img/noren_sp_1.png) }
  .noren i:nth-child(2){ left:40.000%; width:27.213%; background-image:url(../img/noren_sp_2.png) }
  .noren i:nth-child(3){ left:66.557%; width:28.361%; background-image:url(../img/noren_sp_3.png) }
}

/* 写真の下端を暗がりに溶かす（扉の画面の下に日本酒の帯の分の余白ができるため・スマホ用。PCは下の PC の節で左右と合わせて指定） */
.door-scene::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(to top, var(--night) 0%, rgba(var(--night-rgb),0) 7%);
}

/* 締めの一枚（2026-09-26 入口ののれん） */
.shime{ padding:clamp(46px,8vw,90px) 0 clamp(40px,7vw,80px) }
.shime .ph{ max-width:420px; margin-inline:auto }

.foot{ background:var(--night); color:#d9cbb4; padding:clamp(56px,9vw,96px) 0 clamp(36px,6vw,60px) }
.foot__name{ font-family:var(--min); font-weight:600; font-size:clamp(22px,4.8vw,32px);
  letter-spacing:.24em; margin:0 0 .7em; color:#f6ecd9 }
.foot small{ color:#9d8d76; font-size:12px; line-height:2.2; letter-spacing:.05em }

/* モック注記 */
.mockbar{
  background:var(--night); color:#c9b99f; font-family:var(--got);
  font-size:12px; line-height:1.9; padding:11px var(--pad); text-align:center;
  letter-spacing:.03em; position:relative; z-index:2;
}
.mockbar b{color:#e5a04a}
.mockbar a{color:#d9c9ae}
@media (max-width:700px){ .mockbar{ font-size:12.5px; line-height:1.75 } }

/* スマホでは装飾を間引く */
@media (max-width:600px){
  body::before{opacity:.038}
  .hero__name{ font-size:27px; top:62px }
}


/* ---- HERO スライド ---- */
.hero__bg .hero__slide img{
  opacity:.95; filter:sepia(.08) saturate(.96) contrast(1.02);
  object-position:center 42%;
}
@media (min-width:860px){ .hero__bg .hero__slide img{ object-position:center 46% } }
.hero__dots{
  position:absolute; z-index:4; top:clamp(14px,3vw,26px); right:var(--pad); left:auto;
  display:flex; gap:9px; justify-content:flex-end;
}
.hero__dots button{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:rgba(246,236,217,.5); box-shadow:0 1px 3px rgba(0,0,0,.35); cursor:pointer;
  transition:background .4s, transform .4s;
}
.hero__dots button[aria-current="true"]{ background:#e5b45a; transform:scale(1.5) }

/* ---- 人形が喋る（A案・吹き出しは実物の黒板を抜いたもの） ---- */
.jimoto__grid{ display:grid; gap:clamp(22px,4vw,46px); grid-template-columns:1fr }
@media (min-width:820px){
  .jimoto__grid{ grid-template-columns:1.1fr .9fr; align-items:center }
  .jimoto__grid p{ max-width:none }
}
.dolltalk{
  display:flex; align-items:center; gap:0;
  margin:clamp(16px,2.6vw,24px) 0 0;
}
@media (min-width:820px){ .dolltalk{ margin:0 } }
.dolltalk__doll{
  flex:none; width:clamp(64px,13vw,96px); height:auto; align-self:flex-end;
  margin-right:-4px; position:relative; z-index:2;
  filter:drop-shadow(0 6px 12px rgba(43,35,32,.22));
}
.dolltalk__bubble{ position:relative; flex:1 1 auto; min-width:0 }
.dolltalk__paper{ display:block; width:100%; height:auto; overflow:visible }
.dolltalk__say{
  position:absolute; left:15%; right:9%; top:16%; bottom:18%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0; text-align:center; color:var(--sumi);
  font-family:var(--marker); font-size:clamp(13px,2.7vw,16px); line-height:1.8; letter-spacing:.02em;
}
.dolltalk__say small{
  display:block; margin-top:.6em; font-size:.74em; letter-spacing:.16em; color:var(--sumi-dim);
}

/* ---- レギュラーとその日のもの ---- */
.futatsu{
  display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:1fr;
  margin-top:clamp(30px,5vw,52px);
  padding-top:clamp(26px,4vw,40px); border-top:1px solid var(--rule);
}
@media (min-width:720px){ .futatsu{ grid-template-columns:repeat(3,1fr) } }
/* 写真のかたまりに付ける小見出し（「おすすめ」など） */
.grid-label{
  font-family:var(--min); font-weight:600; font-size:clamp(15px,3vw,18px);
  letter-spacing:.14em; color:var(--shu);
  margin:clamp(30px,5vw,48px) 0 clamp(14px,2.4vw,20px);
}

/* 定番のお品書き（2026-09-26 メニュー現物の全品。一覧なので算用数字） */
.shinagaki{ margin:clamp(14px,2.4vw,20px) 0 clamp(24px,3.8vw,32px);
  column-count:1; column-gap:clamp(30px,5vw,56px) }
@media (min-width:720px){ .shinagaki{ column-count:2 } }
.shinagaki section{ break-inside:avoid; margin:0 0 clamp(22px,3.4vw,32px) }
.shinagaki section:last-child{ margin-bottom:0 }
.shinagaki h3{ font-family:var(--min); font-weight:600; font-size:clamp(15px,3vw,17px);
  letter-spacing:.14em; color:var(--shu); margin:0 0 .45em;
  padding-bottom:.42em; border-bottom:1px solid var(--rule) }
.shinagaki h3 small{ font-weight:400; font-size:.78em; letter-spacing:.04em;
  color:var(--sumi-dim); margin-left:.7em }
.shinagaki dl{ margin:0 }
.shinagaki dl > div{ display:flex; justify-content:space-between; align-items:baseline;
  gap:1em; padding:.4em 0 }
.shinagaki dt{ font-family:var(--min); font-size:clamp(14.5px,2.9vw,16px);
  letter-spacing:.04em; line-height:1.7 }
.shinagaki dt small{ font-size:.8em; color:var(--sumi-dim); margin-left:.4em; letter-spacing:.02em }
.shinagaki dd{ margin:0; font-family:var(--min); font-size:clamp(14px,2.8vw,15.5px);
  color:var(--sumi-dim); font-variant-numeric:tabular-nums; white-space:nowrap;
  position:relative; padding-right:1.05em }
/* 「〜」は右の余白に置き、数字の右端を全行でそろえる（2026-09-27 窪田さん「値段がずれている」） */
.shinagaki dd .kara{ position:absolute; right:0; top:0 }

.futatsu__t{
  font-family:var(--min); font-weight:600; font-size:clamp(15px,3vw,18px);
  letter-spacing:.1em; color:var(--shu); margin:0 0 .7em;
}
.futatsu p:last-child{
  margin:0; font-family:var(--min); font-size:clamp(15px,3.2vw,18px);
  line-height:1.9; letter-spacing:.04em;
}

/* 狭い画面では札を控えめにして、見出しの幅を確保する */
@media (max-width:600px){
  .sec-head{ gap:14px }
  .fuda{
    font-size:18px; letter-spacing:.18em;
    min-height:118px; padding:16px 9px;
  }
  .fuda::before{ top:-20px; height:20px }
  .fuda::after{ top:-23px }
  .sec-head{ padding-top:24px }
}

/* 見出しは文節の途中で折り返さない */
.sec-head h2 .ja-phrase, .hero__catch .ja-phrase, .jimoto h3 .ja-phrase{ white-space:nowrap }
@media (max-width:600px){
  .sec-head h2{ font-size:clamp(22px,5.8vw,34px); letter-spacing:.04em }
  .jimoto h3{ font-size:clamp(18px,4.4vw,24px) }
}
@media (max-width:380px){
  .sec-head h2{ font-size:20px }
  .fuda{ font-size:16px; min-height:104px }
}

/* 文字落ち（行末に一文字だけ落ちる）を防ぐ */
.lede, .hero__lead, .sec-head > div p, .jimoto p, .note, .cap{
  text-wrap:pretty;
  line-break:strict;
  overflow-wrap:anywhere;
}
@media (max-width:430px){
  .lede, .jimoto p{ letter-spacing:.02em }
}

/* 住所・電話・時間は途中で折り返さない */
.dl dd, .foot small{ overflow-wrap:normal }

/* ============================================================
   紙の質感 ― 和紙の粒子。色だけでなく手ざわりを出す
   ============================================================ */
body{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url%28%23n%29' opacity='0.055'/></svg>");
  background-repeat:repeat;
  background-size:180px 180px;
}
.block--tint, .fuda, .futatsu, .dl, .info{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url%28%23n%29' opacity='0.055'/></svg>");
  background-repeat:repeat;
  background-size:180px 180px;
}
.block--tint{ background-color:var(--paper-2) }
.fuda{ background-color:#faf6ec }

/* 文字が出そろった所で一度止まる（motion.js の placeSnap／setArmed。最上部にいる間だけ snap-on） */
html.snap-on{ scroll-snap-type:y mandatory }
.snap-pt{ position:absolute; left:0; width:1px; height:1px; pointer-events:none; scroll-snap-align:start; scroll-snap-stop:always }

/* ============================================================
   PCのトップ（2026-09-28 窪田さん「写真が貼ってあるサイトみたいでHPだとわからない」）
   左＝店の名刺（最初から）と、扉が開いてから出る一行。右＝扉。上の帯にメニュー。
   スマホ（1023px以下）は今のまま
   ============================================================ */
.topbar__nav, .hero__card{ display:none }
@media (min-width:1024px){
  /* 帯の高さは 52px のまま（扉の貼り付き位置 top:52px と合わせている） */
  .topbar{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:52px; padding-block:0 }
  .topbar__nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); white-space:nowrap }
  .topbar__nav a{ font-family:var(--min); font-size:13.5px; letter-spacing:.16em; color:var(--sumi);
    text-decoration:none; padding:4px 0; border-bottom:1px solid transparent }
  .topbar__nav a:hover{ border-bottom-color:var(--sumi) }
  .topbar__nav .topbar__tel{ padding:3px 12px; line-height:1.6; border:1px solid var(--sumi); letter-spacing:.08em }
  .topbar__nav .topbar__tel:hover{ background:var(--sumi); color:var(--paper-2) }

  /* 高さの上限（960px）をやめ、画面の縦いっぱいに */
  .hero--door .hero__stick{ height:calc(100svh - 52px - var(--tk, 0px)) }
  .hero--door .door-scene{ width:calc((100svh - 52px - var(--tk, 0px)) * .75) }

  /* 扉は右側。写真の左右の境目は暗がりに溶かす */
  .hero--door .hero__bg{ left:auto; width:58%; justify-content:center }
  /* 写真そのものの左右の端を暗がりに溶かす（のれんは18〜86%にあるので、かからない幅で） */
  .hero--door .door-scene::after{
    content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
    background:
      linear-gradient(to right, var(--night) 0%, rgba(var(--night-rgb),0) 15%),
      linear-gradient(to left,  var(--night) 0%, rgba(var(--night-rgb),0) 12%),
      linear-gradient(to top,   var(--night) 0%, rgba(var(--night-rgb),0) 7%);
  }

  /* 左の列。名刺は最初から、一行と電話は扉が開いてから */
  .hero--door .hero__inner{
    opacity:1; transform:none; background:none; width:42%; align-self:center;
    padding:0 0 0 max(var(--pad), calc((100vw - var(--maxw)) / 2));
    position:relative;
    display:block;
  }
  .hero--door .hero__words{
    opacity:var(--txt,0);
    transform:translateY(calc((1 - var(--txt,0)) * 30px));
    margin-top:clamp(18px,3vh,36px);
  }
  .hero__card{ display:block; color:#e8dbc4 }
  .hero__card-area{ font-family:var(--min); font-size:13px; letter-spacing:.34em; color:#b8a68a; margin:0 0 14px }
  .hero__card-name{ font-family:var(--min); font-weight:600; font-size:clamp(30px,2.9vw,44px);
    line-height:1.35; letter-spacing:.18em; color:#f7eeda; margin:0 0 20px }
  .hero__card-name small{ display:block; font-size:12px; font-weight:400; letter-spacing:.5em; color:#9d8a70; margin-top:10px }
  .hero__card-info{ margin:0; display:grid; gap:6px; font-size:14px; letter-spacing:.06em }
  .hero__card-info div{ display:flex; gap:1.2em }
  .hero__card-info dt{ color:#9d8a70; font-family:var(--min) }
  .hero__card-info dd{ margin:0 }
  .hero__card-info a{ color:inherit; text-decoration:none; border-bottom:1px solid #6d5d49 }
  .hero__card{ position:relative }
  .hero__card-hint{ position:absolute; left:0; top:100%; margin:22px 0 0; font-family:var(--min); font-size:12.5px; letter-spacing:.3em; color:#8f7d64;
    opacity:calc(1 - var(--txt,0)) }
  /* 扉が開いたら、名刺は少し控えめに */
  .hero--door .hero__card{ opacity:calc(1 - var(--txt,0) * .35) }
  .hero--door .hero__eyebrow{ display:none }
  .hero--door .hero__catch{ font-size:clamp(34px,3.4vw,52px); margin-bottom:16px }
  .hero--door .hero__lead{ margin-bottom:20px }
}

/* メニューで飛んだとき、節の頭が上の帯（52px）に隠れないように */
section[id], div[id="insta"]{ scroll-margin-top:52px }

/* 幅が狭めのPCでは、上の帯から電話番号と英字を外す（はみ出して切れていた。電話は左の名刺にある） */
@media (min-width:1024px) and (max-width:1279px){
  .topbar__e, .topbar__nav .topbar__tel{ display:none }
}

/* ============================================================
   2026-09-28 午後：生成り・ぼかした写真の版は「ださくなった」ので今朝の暗い版に戻し、
   良かったものだけ残した（戸の中から一言／PCの扉の厚み）。
   「暗い」への答えは、背景ではなく戸の向こうの明かりを明るくすること
   ============================================================ */
/* 戸の向こうの店の中を明るく。明かりが漏れてくるように */
.door-in > img{ filter:brightness(1.22) saturate(1.08) }
@media (min-width:1024px){
  /* PCは文字が左にあるので、店の中にかける影は薄く */
  .door-in::after{ background:linear-gradient(to top, rgba(var(--night-rgb),.30) 0%, rgba(var(--night-rgb),0) 30%) }

  /* 一言は、開いた戸の中から小さく現れ、大きくなりながら左へ出てくる（--wdx/--wdy は motion.js が測る）。
     移動は t² で遅らせる＝出始めはしばらく戸の中にとどまり、後半で左へ出てくる */
  /* 写真の端のぼかし（z-index:5）より手前に出す。でないと出てくる途中で文字がぼかしの下をくぐる */
  .hero--door .hero__inner{ z-index:6 }
  .hero--door .hero__words{
    opacity:min(1, calc(var(--txt,0) * 2.2));
    transform:translate(calc(var(--wdx,0px) * (1 - var(--txt,0) * var(--txt,0))),
                        calc(var(--wdy,0px) * (1 - var(--txt,0) * var(--txt,0))))
              scale(calc(.12 + var(--txt,0) * .88));
    transform-origin:50% 50%;
  }

  /* 扉の厚み（PCだけ。2026-09-28 窪田さん「扉に厚みを作って」「スマホ版は厚みはいらない」）
     戸の左に木口。閉じているときは枠の外に隠れ、滑って開くと見えてくる */
  .door-leaf::before{
    content:""; position:absolute; top:0; bottom:0; right:100%; width:6%;
    background:linear-gradient(to right, #0b0806 0%, #2a1f19 18%, #5a4538 55%, #7a604e 82%, #2a1f19 94%, #120d0a 100%);
    box-shadow:inset -2px 0 0 rgba(255,236,214,.28), -6px 0 12px rgba(0,0,0,.45);
  }
  .door-leaf::after{
    content:""; position:absolute; top:0; bottom:0; left:0; width:2px;
    background:linear-gradient(to right, rgba(255,236,214,.25), rgba(255,236,214,0));
  }
  /* 入口の内側：左の柱の奥行きと鴨居の影 */
  .door-in::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(to right, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 5%, rgba(0,0,0,0) 11%),
      linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 9%);
  }
}

/* 昼飲みの節の写真（縦・2026-10-07 差し替え）。PCでは大きくなりすぎないよう幅を抑える */
@media (min-width:860px){ .hirunomi-ph{ max-width:400px; justify-self:center; width:100% } }

/* 07 よくあるご質問（2026-10-07 公開時） */
.faq{ margin:clamp(18px,3vw,28px) 0 0; border-top:1px solid var(--rule) }
.faq > div{ padding:clamp(16px,2.4vw,22px) 0; border-bottom:1px solid var(--rule) }
.faq dt{ font-family:var(--min); font-weight:600; font-size:clamp(15.5px,3.2vw,17px); line-height:1.7; margin:0 0 6px }
.faq dt::before{ content:"問"; display:inline-block; margin-right:.6em; color:var(--shu); font-size:.9em }
.faq dd{ margin:0; padding-left:1.6em; color:var(--sumi); line-height:1.95; font-size:clamp(14.5px,3vw,15.5px) }