@charset "UTF-8";
/* ==========================================================
   焼肉ひげ ドラフト  /  みかんの彩園
   メイン＝赤・黒／青は差し色（ヒーローと予約のインク1本、ラベル、番号、写真のワイプ）
   2026-09-26 トップページだけ、四つ以外のセクションを「生成りの地＋濃藍の文字」に統一
   （上野さんのご指示。ファイル末尾「配色の統一」ブロック。赤は差し色として残す）
   ========================================================== */

:root{
  --ink:      #b0121f;   /* 赤（旧：黒 → 濃藍 → スレート）。2026-09-27 赤と白を土台に。ヘッダー・フッターの地 */
  --ink-2:    #8f0e19;   /* 深い赤（画像の読み込み中の地など） */
  --ink-3:    #c8202d;   /* 明るい赤 */
  --paper:    #f6f4f0;
  --paper-2:  #ebe7e0;
  --line:     #d8d3ca;
  --txt:      #16181d;
  --txt-mute: #6c6f77;

  /* メイン＝赤・黒 */
  --red:       #b0121f;
  --red-lt:    #e02434;
  --red-deep:  #4a0810;
  --ember:     #ff6b33;
  /* 2026-09-26 インク用の鮮やかな2色（参考画像の発色だけを借りた。赤黒メイン・青差し色の配分は同じ） */
  --ink-hot:   #ff2352;   /* 朱〜紅。マゼンタ寄りの赤 */
  --ink-turq:  #2ee6f2;   /* ターコイズ */

  /* 差し色＝青（ここぞという所だけ） */
  --blue:      #1552f0;
  --blue-lt:   #4b8cff;
  --cyan:      #5fe6ff;
  --blue-deep: #08206e;

  /* 2026-09-26 暗い地の上の文字色（上野さん「文字、白以外にしてみて」→ 3便の回答で「淡い水色」に決定）。
     使う所：ヒーローの墨の札／ヘッダー／四つ（導入・熊野牛・たれ・お酒）／フッター。明るい生成りの面は --navy のまま
     ★色を変えるときは --on-dark の1行だけ書き換える（補助の文字・罫線は自動で追従する）
       採用  淡い水色  #a8e6ee  墨の上 14.5:1（補助 #88bac1 で 9.4:1）
       旧    淡金      #e2c27d  墨の上 11.7:1（2便で採用・3便で差し替え） */
  --on-dark:      #fff3ee;   /* 2026-09-27 赤の地に載せる生成りの白。#b0121f に 6.9:1（旧：水色 #a8e6ee） */
  --on-dark-mute: color-mix(in srgb, var(--on-dark) 90%, var(--ink));   /* 補助の文字。赤の上で 5.4:1 以上 */
  --on-dark-line: color-mix(in srgb, var(--on-dark) 30%, transparent);  /* 罫線・枠線 */
  --red-cta:      var(--red);  /* 水色の文字を載せる赤（ボタン・番号札）。#b0121f に水色で 5.2:1。淡金のときは #7a0b15 まで深くしていたが、水色は明るいので元の赤に戻した */

  /* 看板の毛筆。Yuji Syuku は線が細いので -webkit-text-stroke で太らせて使う。
     太らせ量は .fude-* クラスで em 指定＝文字サイズに追随する */
  --fude:   "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans:   "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --en:     "Jost", "Hiragino Sans", sans-serif;

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1180px;
  --hd-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--hd-h); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--txt);
  font-family:var(--sans); font-size:16px; line-height:1.95;
  letter-spacing:.03em; overflow-x:hidden;
  font-feature-settings:"palt";
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:800; line-height:1.55; letter-spacing:.05em; font-family:var(--mincho); }
p{ margin:0 0 1.4em; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
iframe{ border:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* 毛筆を使う見出しの共通指定。線を太らせて看板の筆に寄せる */
.hd__logo-txt, .hero__copy, .sec__head h2, .cta h2,
.ft__name, .concept__sign, .menu__cat{
  font-family:var(--fude);
  font-weight:400;
  -webkit-text-stroke:0.042em currentColor;
  paint-order:stroke fill;
}

/* ---------- 共通パーツ ---------- */
/* 2026-09-20 削除：.lb（英字ラベル＋横線）。全セクションの見出しに同じ形で載っていて、
   「どのページも同じ型で量産した感じ」の最大の原因だった。
   代わりに、見出しは役割ごとに5つの型へ振り分けた（ファイル末尾「見出しの型」ブロック）。 */

.sec{ position:relative; padding:clamp(84px,12vw,168px) 0; }
.sec__head h2{ font-size:clamp(27px,4.3vw,56px); letter-spacing:.05em; line-height:1.55; }
.sec__head{ margin-bottom:clamp(40px,6vw,76px); }
.sec__lead{ margin-top:1.6em; max-width:38em; color:var(--txt-mute); }
.sec__head--light .sec__lead{ color:rgba(255,255,255,.68); }
.sec__note{ margin-top:1.6em; font-size:13px; color:var(--txt-mute); }
.sec__note strong{ color:var(--red); }

.btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:60px; padding:.85em 2.1em; border-radius:2px;
  font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:.1em;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, color .35s;
}
.btn em{ font-style:normal; font-family:var(--en); font-size:19px; letter-spacing:.06em; margin-top:2px; }
.btn--blue{
  color:#fff; background:linear-gradient(115deg,var(--red-deep),var(--red) 52%,var(--red-lt));
  box-shadow:0 10px 34px -10px rgba(176,18,31,.85), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--blue:hover{ transform:translateY(-3px); box-shadow:0 18px 44px -12px rgba(224,36,52,.95); }
.btn--ghost{ color:#fff; border:1px solid rgba(255,255,255,.42); backdrop-filter:blur(4px); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); transform:translateY(-3px); }

/* 要確認マーカー */
.tbc{ position:relative; transition:background .3s, box-shadow .3s; }
body.show-tbc .tbc{
  background:rgba(21,82,240,.12);
  box-shadow:inset 0 0 0 1px rgba(21,82,240,.55);
  border-radius:3px;
}
body.show-tbc .tbc::after{
  content:attr(data-tbc);
  position:absolute; left:0; bottom:calc(100% + 6px); z-index:60;
  background:var(--blue); color:#fff; font-family:var(--sans);
  font-size:11px; line-height:1.6; letter-spacing:.02em;
  padding:.5em .8em; border-radius:4px; width:max-content; max-width:min(300px,72vw);
  opacity:0; pointer-events:none; transition:opacity .25s;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.5);
}
body.show-tbc .tbc:hover::after{ opacity:1; }
.sec--beef body.show-tbc .tbc,
.sec--space .tbc{ }

/* ========== 墨が水に広がる表現 ==========
   feTurbulence の乱流場に feDisplacementMap で楕円を流し込むと
   「インクが水中で滲む」形になる。乱流は静止させ、楕円だけをCSSで
   ゆっくり泳がせることで、毎フレームの再計算を避けている。 */
.inkdefs{ position:absolute; width:0; height:0; overflow:hidden; }
.inkfx{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; mix-blend-mode:screen;
}
.inkfx ellipse{
  transform-box:fill-box; transform-origin:center;
  mix-blend-mode:screen; /* 2026-09-26 重なった所が混ざって光る（赤×青→明るい桃〜白） */
  will-change:transform;
  animation:inkSwim 30s ease-in-out infinite alternate;
}
.inkfx .b1{ animation-duration:27s; }
.inkfx .b2{ animation-duration:34s; animation-delay:-8s; }
.inkfx .b3{ animation-duration:31s; animation-delay:-17s; }
.inkfx .b4{ animation-duration:23s; animation-delay:-5s; }
.inkfx .b5{ animation-duration:37s; animation-delay:-12s; }
@keyframes inkSwim{
  0%  { transform:translate(0,0)      scale(1)    rotate(0deg); }
  35% { transform:translate(9%,-11%)  scale(1.28) rotate(16deg); }
  70% { transform:translate(-8%,8%)   scale(.86)  rotate(-14deg); }
  100%{ transform:translate(5%,4%)    scale(1.16) rotate(9deg); }
}
/* 2026-09-26 鮮やかに：不透明度を上げ、彩度を少し持ち上げる（形・動きは同じ） */
.inkfx--hero{ z-index:2; opacity:.9; filter:saturate(1.25); }
.inkfx--beef{ opacity:.92; filter:saturate(1.2); }
.inkfx--cta { opacity:.62; mix-blend-mode:screen; }

/* 端末が重い場合は乱流フィルタを外し、ぼかしだけにする */
@media (max-width:820px){
  .inkfx g{ filter:none !important; }
  .inkfx{ filter:blur(38px) saturate(1.25); }
}

/* 炭火のインク（旧・ぼかし玉方式。SPACEセクションだけで使用） */
.ink{
  position:absolute; inset:-15%; pointer-events:none; z-index:1;
  mix-blend-mode:screen; filter:blur(84px) saturate(1.6);
}
.ink i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #ff8a4a 0%, var(--ink-hot) 38%, rgba(200,0,78,.5) 56%, rgba(74,0,36,0) 72%);
  will-change:transform;
  animation:inkDrift 26s ease-in-out infinite alternate;
}
/* 4番目だけ青。赤黒の中を1本の青が流れる */
.ink i:nth-child(4){
  background:radial-gradient(circle at 38% 36%, #e2fffc 0%, var(--ink-turq) 34%, rgba(10,143,216,.45) 56%, rgba(6,42,120,0) 72%);
}
/* 2026-09-26 お酒と店内は2つ目の玉をターコイズに（赤の玉と重なって混ざる。たれは赤だけのまま） */
.ink--sake i:nth-child(2),
.ink--space i:nth-child(2){
  background:radial-gradient(circle at 38% 36%, #e2fffc 0%, var(--ink-turq) 34%, rgba(10,143,216,.45) 56%, rgba(6,42,120,0) 72%);
}
.ink i:nth-child(1){ width:52vw; height:52vw; left:-8%;  top:2%;   opacity:.6;  animation-duration:24s; }
.ink i:nth-child(2){ width:40vw; height:40vw; right:-6%; top:26%;  opacity:.46; animation-duration:31s; animation-delay:-6s; }
.ink i:nth-child(3){ width:34vw; height:34vw; left:34%;  bottom:-8%; opacity:.38; animation-duration:28s; animation-delay:-13s; }
.ink i:nth-child(4){ width:26vw; height:26vw; right:16%; top:4%;   opacity:.5;  animation-duration:19s; animation-delay:-3s; }
@keyframes inkDrift{
  0%  { transform:translate3d(0,0,0) scale(1)    rotate(0deg); }
  33% { transform:translate3d(6vw,-4vh,0) scale(1.18) rotate(40deg); }
  66% { transform:translate3d(-5vw,5vh,0) scale(.9)  rotate(-30deg); }
  100%{ transform:translate3d(3vw,3vh,0) scale(1.12) rotate(18deg); }
}

/* 粒子（フィルム感） */
.grain{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* スクロール出現 */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .95s cubic-bezier(.2,.75,.2,1), transform .95s cubic-bezier(.2,.75,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
.img-wipe{ position:relative; overflow:hidden; background:var(--ink-2); }
.img-wipe img{ width:100%; transform:scale(1.14); transition:transform 1.5s cubic-bezier(.16,1,.3,1); }
.img-wipe::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(118deg,#0a3a9c,#0a8fd8 48%,var(--ink-turq));
  transform-origin:right center; transform:scaleX(1);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1);
}
.is-in .img-wipe::after{ transform:scaleX(0); }
.is-in .img-wipe img{ transform:scale(1); }

/* ==========================================================
   HEADER
   ========================================================== */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hd-h);
  display:flex; align-items:center; gap:clamp(14px,3vw,42px);
  padding-inline:var(--gut); color:#fff;
  transition:background .5s, backdrop-filter .5s, box-shadow .5s, height .4s;
}
.hd::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(176,18,31,.72), rgba(176,18,31,0));
  transition:opacity .5s; opacity:1;
}
.hd.is-stuck{ background:rgba(176,18,31,.86); backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 rgba(255,255,255,.08); height:64px; }
.hd.is-stuck::before{ opacity:0; }

.hd__logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.hd__logo-mark{
  width:26px; height:26px; border-radius:5px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--red),var(--ember));
  box-shadow:0 0 18px -2px rgba(224,36,52,.8);
  position:relative;
}
.hd__logo-mark::after{
  content:""; position:absolute; inset:6px 5px;
  border-top:2px solid rgba(255,255,255,.95);
  border-bottom:2px solid rgba(255,255,255,.95);
}
.hd__logo-txt{ font-size:20px; letter-spacing:.1em; -webkit-text-stroke-width:0.05em; }
.hd__logo-en{ font-family:var(--en); font-size:9px; letter-spacing:.3em; color:var(--cyan); align-self:flex-end; padding-bottom:5px; }

.hd__nav{ margin-left:auto; display:flex; gap:clamp(14px,2.2vw,30px); font-size:13.5px; letter-spacing:.09em; }
.hd__nav a{ position:relative; padding:6px 0; opacity:.9; }
.hd__nav a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--red-lt); transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.76,0,.24,1); }
.hd__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.hd__tel{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.5em 1.3em; border-radius:2px; line-height:1.3;
  background:linear-gradient(115deg,var(--red-deep),var(--red) 58%,var(--red-lt));
  box-shadow:0 8px 26px -12px rgba(176,18,31,.9);
  transition:transform .3s, box-shadow .3s;
}
.hd__tel:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -12px rgba(224,36,52,1); }
.hd__tel-lb{ font-size:9.5px; letter-spacing:.24em; opacity:.85; }
.hd__tel-no{ font-family:var(--en); font-size:16px; letter-spacing:.04em; font-weight:500; }

.hd__burger{ display:none; width:44px; height:44px; background:none; border:0; padding:0; cursor:pointer; position:relative; }
.hd__burger span{ position:absolute; left:11px; width:22px; height:1.5px; background:#fff; transition:.4s cubic-bezier(.76,0,.24,1); }
.hd__burger span:nth-child(1){ top:19px; }
.hd__burger span:nth-child(2){ top:25px; }
.hd.is-open .hd__burger span:nth-child(1){ top:22px; transform:rotate(45deg); }
.hd.is-open .hd__burger span:nth-child(2){ top:22px; transform:rotate(-45deg); }

/* ==========================================================
   HERO
   2026-09-26（3便） 上野さんの回答「C：写真は全面、文字だけ小さな墨の札に載せる」
   ・写真はヘッダー（墨の帯）の下から画面の下まで全面。加工なし（ヴェール・インク・グレイン・フィルター・グラデーションは戻さない）
   ・文字は写真に直接置かない。店名・コピー・リード・ボタン2つを、写真の上の「墨の札」1枚にまとめる
   ・2026-09-27 札は外した（電話予約・お品書きのボタンごと）。右下は、クーポンがあるときだけ小さなボタンが出る
   ・札の位置は3枚の写真で実測して決めた（右下＝3枚とも木の卓か皿の余白。サシの見せ場は中央〜左上に寄っている）
   ・文字の色は :root の --on-dark。末尾「暗い地の文字色」ブロック
   ========================================================== */
.hero{
  position:relative; overflow:hidden;
  height:auto; min-height:100svh;
  background:var(--ink); color:var(--on-dark);
}
/* 2026-09-29（13便） 上野さん「肉の写真、スマホだとちぎれてる／PCだとそもそも表示されてない」。
   原因＝ .hero が height:100svh の「固定の高さ」で、中身（酒の帯＋肉の帯）が育つたびに
   min-height を積み増してきた（10便・12便）ため、合計の高さが画面の高さを超える場面が増え、
   .hero__photo の overflow:clip に切り落とされていた（＝画面によっては下の肉の帯がまるごと見えない）。
   これまで「スマホだけ」直していた対策（.hero__photo を絶対配置→通常の流れに）を、
   ここでは最初から全部（PCも）同じ考え方にした：.hero__photo・.hero__inner を通常の流れに戻し、
   .hero は「最低でも画面の高さ」（min-height:100svh）は保ちつつ、中身がそれより育ったら
   ちゃんと縦に伸びる（決して切り落とさない）。フルブリードの見え方は、中身が画面に収まる
   通常の場合は変わらない。 */
.hero__photo{
  position:relative; padding-top:var(--hd-h); overflow:visible; background:var(--ink-2);
}
/* 2026-09-29（5便） 上野さん「（横長の酒の写真）を上に、下に肉を数枚横に並べて」。
   クロスフェードはやめ、縦2段の静止レイアウトにした：上＝酒の棚1枚（横長）／下＝肉5枚を横並び。
   2便で決めた「フルブリード（縁に地の色を出さない）」はそのまま守っている。
   .hero__inner がレイアウト本体（スクロールでの拡大はこちらに掛ける） */
.hero__inner{ position:relative; display:flex; flex-direction:column; }
/* 2026-09-29（15便） 上野さん「（14便は勘違い。）酒は上のまま、肉が下のまま。
   肉の写真6枚『の中で』上下（＝1行目と2行目）を入れ替えて」。
   セクションの上下（酒／肉）は14便のorder入れ替えを撤回して元に戻した（HTMLの並びどおり＝酒が上）。
   6枚の並び替えは index.html 側（.hero__strip 内の <picture> の順番）で対応 */
/* 2026-09-29（8便） 上野さん「酒、横いっぱいに表示させて」。
   7便の object-fit:contain は、画面の縦横比によっては左右に地の赤が出ることがあった。
   写真そのものを切り抜きなしで書き出し直し（2757x953→2000x691・約2.89:1）、
   その縦横比を箱（.hero__top）にそのまま持たせた＝常に幅いっぱい・ボトルが1本も切れない。
   高さは「幅 ÷ 2.89」で自動的に決まるので flex ではなく aspect-ratio を使う。
   残りの高さ（画面によって変わる）は下の .hero__strip が flex:1 で埋める */
/* 2026-09-29（10便） 上野さん「酒の写真、縦にもう少し伸ばして。上の方が見えない」。
   写真そのものはもう全部（元写真の953px高さぶん全部）使っているので、「もっと見える」ようにするには
   箱を縦に大きくして、その分だけ拡大して見せるしかない＝ここから先は左右がわずかに切れる
   （8便の「絶対に切らない」よりも「もっと大きく・上まで見える」を優先、という指示の変更として対応） */
/* 2026-10-02 上野さん「トップの酒の画像をミスジ塊の写真に差し替え、背景は黒に」。
   まな板を切り抜いて黒地に載せた写真（hero-top-misuji.webp・2000x691）に差し替え。
   箱の地も黒にして、写真は contain で表示＝画面の縦横比が変わっても肉は切れず、余りは黒が埋める */
.hero__top{ flex:none; width:100%; aspect-ratio:2000/691; min-height:34vh; margin:0; position:relative; overflow:hidden; background:#000; }
/* 2026-09-29（9便） 上野さん「肉が縦に見切れてるかも」。.hero__strip が flex:1 だけだと、
   画面が横広・縦短のときにこの帯が極端に薄くなり、cover の切り抜きで肉の上下が切れて見えていた。
   最低限の高さ（clamp）を持たせ、極端に薄くならないようにした */
.hero__strip{ flex:1 1 auto; min-height:clamp(150px,22vh,260px); display:grid; grid-template-columns:repeat(6,1fr); gap:2px; }
.hero__strip picture{ position:relative; overflow:hidden; display:block; min-width:0; }
.hero__top img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* 2026-10-02 酒の棚 ⇄ ミスジ（石皿）を交互にクロスフェード。12秒で1周＝各約5秒表示＋1秒で切り替え。
   ミスジも cover。合成写真の左右は黒い余白なので、スマホで箱が縦長になっても切れるのは余白（と皿の端）だけで、
   肉は大きく見える（contain だとスマホで肉が小さくなりすぎた） */
.hero__top .hero__slide--misuji, .hero__top .hero__slide--noren{ opacity:0; }
@media (prefers-reduced-motion: no-preference){
  /* 2026-10-05 暖簾を足して3枚に：18秒で1周（各約5秒表示＋1秒で切り替え） */
  .hero__top--fade .hero__slide--sake{ animation:heroFade3 18s ease-in-out infinite; animation-delay:-1s; }
  .hero__top--fade .hero__slide--misuji{ animation:heroFade3 18s ease-in-out infinite; animation-delay:5s; opacity:0; }
  .hero__top--fade .hero__slide--noren{ animation:heroFade3 18s ease-in-out infinite; animation-delay:11s; opacity:0; }
}
@keyframes heroFade3{ 0%{opacity:0} 5.5%,33.3%{opacity:1} 38.8%,100%{opacity:0} }
@keyframes heroFadeA{ 0%,42%{opacity:1} 50%,92%{opacity:0} 100%{opacity:1} }
@keyframes heroFadeB{ 0%,42%{opacity:0} 50%,92%{opacity:1} 100%{opacity:0} }
.hero__strip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* 2026-09-29（12便） 上野さん「下の肉、パソコンでもっと大きく。2行になってもいい」。
   6枚を1列に横並びにしていたので1枚あたりがかなり小さかった。パソコン幅だけ3列×2行にして、
   1枚の面積を大きくした。
   2026-09-29（14便） 上野さん「肉の写真パソコンもう少し縦長にして」。
   grid-auto-rows:1fr（帯の高さを2等分するだけ）だと、幅3列ぶんに対して高さが浅く、
   横長のマスになっていた。マスの縦横比を明示的に3:4（縦長）に固定＝flex:none にして
   「中身（マスの縦横比）なりの高さ」にした。13便で .hero が自動で縦に伸びる仕組みに
   なっているので、帯が前より高くなっても切れる心配はない
   2026-09-29（16便） 上野さん「PCの肉の写真デカすぎる」「上下バランスが悪い」。
   3:4 は縦長すぎて実測1マス約690px×2段＝帯だけで約1380px（画面1600pxの大半）になっていた。
   さらに3:4は元写真（1600x900=16:9）に対して幅の58%を左右トリミングする必要があり、
   トリミングが強い分、写真ごとの「肉の位置」の違い（元写真の構図の差）がそのまま拡大されて
   バランスが悪く見えていた。4:3（スマホと同じ比率）に戻すと1マスは約378px×2段に縮み、
   左右トリミングも25%程度まで減って元の構図に近くなる＝サイズもバランスも同時に直る。
   個別の object-position 調整はしていない（元写真の縦位置は概ね中央寄りで、
   トリミングを弱めるだけで十分改善したため） */
@media (min-width:641px){
  .hero__strip{ grid-template-columns:repeat(3,1fr); flex:none; min-height:0; }
  .hero__strip picture{ aspect-ratio:4/3; }
}
/* 暗幕：四隅だけ暗く落とす（写真の中身は変えず、周りを締めて落ち着いた印象に）
   2026-09-29（9便） 上野さん「酒の看板（熊野牛）が暗幕で見えなくなってる」。
   この暗幕は .hero__photo 全体（酒＋肉の合計の高さ）を基準にした1枚のグラデーションなので、
   酒の帯が画面の一番上・グラデーションの暗い側に来ると、看板のあたりがかなり暗く沈んでいた。
   中心をやや下（肉の帯側）に寄せ、暗さの最大値も弱めて、上の酒の帯が沈みすぎないようにした */
.hero__photo::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 62%, rgba(0,0,0,0) 52%, rgba(0,0,0,.38) 100%);
}
@media (max-width:640px){
  /* 2026-09-29（10便） 上野さん「肉の写真、スマホのとき横長で表示されるようにして」。
     それまでは .hero__strip が flex:1（残りの高さを埋める）＋ grid-auto-rows:1fr だったため、
     画面の縦の余り具合しだいでマスが縦長（ポートレート）に伸びてしまうことがあった。
     マスの縦横比を明示的に横長（4:3）に固定し、帯の高さは中身（マスの縦横比）から決まるようにした
     （flex:1 をやめて「必要なぶんだけ」の高さに）。
     ※ .hero・.hero__photo・.hero__inner の「通常の流れに戻す」対応は、13便でスマホ専用から
       全画面共通（上の基本ルール）に格上げしたので、ここではもう書かない */
  .hero__strip{ flex:none; grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; }
  .hero__strip picture{ aspect-ratio:4/3; }
}

/* 2026-09-27 札（電話予約・お品書き）を外した。h1（店名）は検索・読み上げ用に、見えない形で残す */
.hero__name{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
@media (max-width:820px){ .hero{ min-height:520px; } }

/* クーポンのボタン：写真の右下に小さく。有効なクーポンがあるときだけ出る（hidden を外す） */
.coupon-chip[hidden]{ display:none; }
.coupon-chip{
  position:absolute; z-index:5; right:var(--gut); bottom:clamp(28px,5.5vh,56px);
  display:flex; align-items:center; gap:.9em; padding:.85em 1.25em;
  background:#fff; color:var(--navy, #0f2350); border:1px solid var(--navy, #0f2350); border-radius:1px;
  font:inherit; font-size:14px; font-weight:700; letter-spacing:.14em; cursor:pointer;
  animation:up 1.2s .5s both cubic-bezier(.16,1,.3,1);
}
.coupon-chip__n{ padding-left:.9em; border-left:1px solid var(--navy-line, rgba(15,35,80,.28)); font-weight:500; letter-spacing:.06em; color:var(--red); }
.coupon-chip:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.coupon-chip:hover .coupon-chip__n{ color:#fff; border-color:rgba(255,255,255,.5); }
.coupon-chip:focus-visible{ outline:3px solid var(--navy, #0f2350); outline-offset:3px; }
@keyframes up{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:none; } }
@media (max-width:820px){ .coupon-chip{ bottom:calc(64px + 18px); } }   /* 画面下の電話バー（.spbar）の上 */

/* クーポンの画面：白い紙にミシン目の縁。お客様が店で見せるので、文字は大きく */
.coupon{
  width:min(440px, calc(100% - 2 * var(--gut))); max-height:calc(100svh - 48px);
  padding:0; border:0; background:transparent; color:var(--navy, #0f2350); overflow:visible;
}
.coupon::backdrop{ background:rgba(15,35,80,.55); }
.coupon__box{
  background:#fff; padding:clamp(24px,5vw,34px); border-top:6px solid var(--red);
  max-height:calc(100svh - 48px); overflow:auto;
}
.coupon__h{ font-family:var(--fude); font-weight:400; font-size:28px; letter-spacing:.1em; margin:0 0 .35em; -webkit-text-stroke:0.04em currentColor; paint-order:stroke fill; }
.coupon__lead{ margin:0 0 1.4em; font-size:13.5px; line-height:1.9; color:var(--navy-mute, #354a80); }
.coupon__list{ list-style:none; margin:0; padding:0; }
.coupon__item{ padding:1.2em 1.3em; margin:0 0 14px; border:2px dashed var(--navy, #0f2350); }
.coupon__ttl{ margin:0 0 .5em; font-family:var(--mincho); font-size:20px; font-weight:800; letter-spacing:.06em; line-height:1.5; }
.coupon__detail{ margin:0 0 .6em; font-size:16px; line-height:1.85; white-space:pre-line; }
.coupon__cond{ margin:0; font-size:13px; line-height:1.9; color:var(--navy-mute, #354a80); white-space:pre-line; }
.coupon__end{ margin:.8em 0 0; font-size:13px; font-weight:700; color:var(--red); letter-spacing:.06em; }
.coupon__close{
  display:block; width:100%; margin-top:.4em; padding:.9em; font:inherit; font-size:14px; letter-spacing:.14em;
  background:var(--navy, #0f2350); color:#fff; border:0; border-radius:1px; cursor:pointer;
}
.coupon__close:hover{ background:#0a1a3e; }
.coupon__close:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }

/* ==========================================================
   CONCEPT
   ========================================================== */
.sec--concept{ background:var(--paper); }
/* 2026-09-26 右上の赤とターコイズのにじみ（::before）を削除。
   上野さん「背景、焼肉ひげの4つ以外は同じに」→ 背景は末尾「配色の統一」ブロックの1色だけにした */
.sec--concept .wrap{ position:relative; z-index:2; }
/* 2026-09-29 上野さん「写真と文字のバランスが悪い。文字の高さに写真を合わせて」（→ 今後も同じ考え方で組む）。
   写真の縦横比を固定（4:5）していたせいで、文字が短いと写真だけ下に長く伸びて見えた。
   CSSのstretchだけだと写真自身の縦横比が効いてしまい揃わないことがあるため、
   実測して高さを合わせる処理を assets/js/main.js に入れた（.pair-match が目印）。
   ここでは JS が効くまでの下敷きとして、素直な縦横比だけ指定しておく */
.concept__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:stretch; }
.concept__txt p{ font-size:clamp(14.5px,1.5vw,16.5px); line-height:2.3; }
.concept__txt strong{ font-weight:700; color:var(--red); }
.concept__sign{ font-size:17px; letter-spacing:.12em; color:var(--txt-mute); margin-top:2.4em; -webkit-text-stroke-width:0.03em; }
.concept__fig{ margin:0; display:flex; flex-direction:column; }
.concept__fig figcaption{ margin-top:.9em; font-size:12px; letter-spacing:.12em; color:var(--txt-mute); }
.concept__fig .img-wipe{ flex:1 1 auto; aspect-ratio:4/5; min-height:0; }
.concept__fig img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================
   熊野牛
   ========================================================== */
.sec--beef{ background:var(--ink); color:#fff; overflow:hidden; }
.beef__bg{ position:absolute; inset:0; z-index:0; opacity:.42; }
.beef__bg .duo{ position:relative; width:100%; height:100%; }
.beef__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.45) brightness(.62); }
.beef__bg .duo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(150deg,#3a0016,#e0103f 46%,#ff5a2a);
  mix-blend-mode:color;
}
.beef__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--ink) 0%, rgba(176,18,31,.3) 30%, rgba(176,18,31,.45) 62%, var(--ink) 100%);
}
.sec--beef .wrap{ position:relative; z-index:5; }
/* 墨の上でも文字が沈まないように、内容の裏に薄い暗幕を敷く */
.sec--beef .wrap::before{
  content:""; position:absolute; z-index:-1;
  inset:-4% -6%;
  background:radial-gradient(60% 55% at 30% 34%, rgba(4,5,8,.72), rgba(4,5,8,.28) 62%, transparent 82%);
  pointer-events:none;
}
.sec--beef h2,.sec--beef h3{ color:#fff; text-shadow:0 3px 18px rgba(0,0,0,.7); }

/* 2026-09-20 .pillars（青い 01/02/03 の等幅3列）を廃止し .claims に差し替えた。
   ・3項目は手順でも順番でもないので、番号を振るのが間違いだった
   ・いちばん強い事実（県内でただ一軒）を大きく置き、残り2つを右に小さく添える
   ・右の2つ目は縦にずらして、3つが横一線に並ばないようにしている */
.claims{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  column-gap:clamp(26px,5vw,84px); align-items:start;
  margin-bottom:clamp(48px,7vw,92px);
}
.claims__lead{
  grid-column:1; grid-row:1 / span 2; align-self:start;
  padding-left:clamp(14px,1.8vw,26px); border-left:2px solid var(--red-lt);
}
.claims__lead h3{
  font-size:clamp(22px,3.1vw,38px); font-weight:800;
  line-height:1.5; letter-spacing:.05em; margin-bottom:.65em;
}
.claims__lead p{
  font-size:clamp(14.5px,1.5vw,16px); line-height:2.2; margin:0; max-width:24em;
  color:rgba(255,255,255,.9); text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.claims__sub{ padding-top:18px; border-top:1px solid rgba(255,255,255,.2); }
.claims > .claims__sub:nth-child(2){ grid-column:2; grid-row:1; }
.claims > .claims__sub:nth-child(3){ grid-column:2; grid-row:2; margin-top:clamp(26px,3.6vw,52px); }
.claims__sub h3{ font-size:clamp(15.5px,1.6vw,17.5px); font-weight:800; margin-bottom:.6em; letter-spacing:.07em; }
.claims__sub p{ font-size:13.5px; line-height:2.05; color:rgba(255,255,255,.78); margin:0; text-shadow:0 2px 10px rgba(0,0,0,.6); }

.beef__shots{
  display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(14px,2.2vw,28px);
  grid-auto-rows:clamp(230px,32vw,430px);
}
.beef__shots figure{ margin:0; display:grid; }
.beef__shots .img-wipe{ height:100%; }
.beef__shots img{ height:100%; object-fit:cover; }

body.show-tbc .sec--beef .tbc{ background:rgba(95,230,255,.16); box-shadow:inset 0 0 0 1px rgba(95,230,255,.6); }

/* ==========================================================
   MENU
   ========================================================== */
.sec--menu{ background:var(--paper-2); }
.menu__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); }
.menu__cat{
  font-size:clamp(21px,2.4vw,28px); letter-spacing:.1em; margin-bottom:1.1em; -webkit-text-stroke-width:0.035em;
  padding-bottom:.55em; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:1em;
}
.menu__cat em{ font-family:var(--en); font-style:normal; font-size:10px; letter-spacing:.3em; color:var(--red); }
.menu__list li{
  display:flex; align-items:baseline; gap:.6em;
  padding:.62em 0; font-size:15px; border-bottom:1px dotted rgba(0,0,0,.14);
}
.menu__list li span{ flex:1 1 auto; }
.menu__list li b{ font-family:var(--en); font-weight:400; font-size:15.5px; letter-spacing:.03em; color:var(--txt); }

.menu__shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px); margin-top:clamp(44px,6vw,84px); }
.menu__shots figure{ margin:0; }
.menu__shots .img-wipe{ aspect-ratio:1/1; }
.menu__shots img{ height:100%; object-fit:cover; }
.menu__shots figcaption{ margin-top:.7em; font-size:12px; letter-spacing:.14em; color:var(--txt-mute); }

.drink{
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,60px); align-items:center;
  margin-top:clamp(52px,7vw,100px); padding-top:clamp(40px,5vw,70px); border-top:1px solid var(--line);
}
.drink__fig{ margin:0; }
.drink__fig .img-wipe{ aspect-ratio:5/4; }
.drink__fig img{ height:100%; object-fit:cover; }
.drink__txt p{ font-size:15px; line-height:2.2; color:var(--txt-mute); }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags li{
  font-size:12px; letter-spacing:.1em; padding:.45em 1em; border-radius:99px;
  border:1px solid rgba(176,18,31,.35); color:var(--red); background:rgba(176,18,31,.05);
}

/* ==========================================================
   SPACE
   ========================================================== */
.sec--space{ background:var(--ink-2); color:#fff; overflow:hidden; }
.ink--space{ opacity:.6; }
.sec--space .wrap{ position:relative; z-index:5; }
.sec--space h2{ color:#fff; }
.space__gal{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.8vw,24px); align-items:start;
}
.space__gal figure{ margin:0; }
.space__gal img{ width:100%; height:100%; object-fit:cover; }
.space__gal figcaption{ margin-top:.65em; font-size:11.5px; letter-spacing:.16em; color:rgba(255,255,255,.55); }
.space__gal-a{ grid-column:1 / -1; }
.space__gal-a .img-wipe{ aspect-ratio:21/9; }
.space__gal-b .img-wipe,
.space__gal-c .img-wipe,
.space__gal-d .img-wipe{ aspect-ratio:4/3; }

.specs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(40px,5vw,72px); background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.13);
}
.specs li{ background:var(--ink-2); padding:clamp(18px,2.4vw,30px); }
.specs b{ display:block; font-family:var(--mincho); font-size:clamp(17.5px,2.1vw,22px); font-weight:800; letter-spacing:.08em; margin-bottom:.3em; }
.specs span{ font-size:12.5px; color:rgba(255,255,255,.6); letter-spacing:.05em; }

/* ==========================================================
   CTA
   ========================================================== */
.cta{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  padding:clamp(76px,10vw,140px) 0;
  background:linear-gradient(140deg,#5c0620 0%, #8f0e19 40%, #c8103a 78%, #ff2f55 100%);
}
.ink--cta{ opacity:.42; mix-blend-mode:soft-light; }
.cta__inner{ position:relative; z-index:5; }
.cta h2{ font-size:clamp(26px,3.8vw,48px); color:#fff; margin-bottom:.7em; letter-spacing:.06em; }
.cta__lead{ color:rgba(255,255,255,.82); font-size:14.5px; line-height:2.1; }
.cta__tel{
  display:inline-block; font-family:var(--en); font-weight:300;
  font-size:clamp(36px,7vw,80px); letter-spacing:.03em; line-height:1.15;
  margin:.35em 0 .3em; text-shadow:0 8px 40px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.cta__tel:hover{ transform:scale(1.03); }
.cta__hours{ font-size:13px; color:rgba(255,255,255,.75); letter-spacing:.06em; margin:0; }

/* ==========================================================
   INFO
   ========================================================== */
.sec--info{ background:var(--paper); }
.info__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,64px); align-items:start; }
.info__dl > div{ display:grid; grid-template-columns:6.5em 1fr; gap:1.2em; padding:1.05em 0; border-bottom:1px solid var(--line); }
.info__dl dt{ font-family:var(--mincho); font-size:14px; font-weight:800; letter-spacing:.14em; color:var(--red); }
.info__dl dd{ margin:0; font-size:14.5px; line-height:1.95; line-break:strict; } /* 2026-09-23 overflow-wrap:anywhere を外した（語の途中で折る原因） */
.info__dl dd small{ font-size:12px; color:var(--txt-mute); }
.info__dl dd a{ border-bottom:1px solid rgba(176,18,31,.45); }
.info__map{ position:relative; }
/* 2026-09-29 地図の上に、外観の実写を1枚添える（来店時の目印） */
/* 2026-09-29（2便） 縁（下が見切れる）の原因＝書き出した写真は4:3なのに、ここは16:9指定で
   ブラウザがもう一段切り抜いていた（二重の切り抜き）。写真の比率（4:3）に合わせて直した */
.info__photo{ margin:0 0 12px; }
.info__photo .img-wipe{ aspect-ratio:4/3; }
.info__map iframe{ width:100%; aspect-ratio:4/3; filter:grayscale(.35) contrast(1.05); }
.info__map-link{ display:inline-block; margin-top:.9em; font-size:13px; letter-spacing:.08em; color:var(--red); }
.info__map-link:hover{ text-decoration:underline; }

/* ==========================================================
   FOOTER
   ========================================================== */
.ft{ background:var(--ink); color:rgba(255,255,255,.72); padding:clamp(52px,7vw,84px) 0 34px; font-size:13.5px; }
.ft__inner{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,4vw,60px); align-items:start; }
.ft__brand .hd__logo-mark{ margin-bottom:12px; }
.ft__name{ font-size:22px; letter-spacing:.11em; color:#fff; margin:0 0 .2em; -webkit-text-stroke-width:0.05em; }
.ft__en{ font-family:var(--en); font-size:9.5px; letter-spacing:.3em; color:var(--cyan); margin:0; }
.ft__meta p{ margin:0 0 .4em; letter-spacing:.05em; }
.ft__meta a{ border-bottom:1px solid rgba(255,255,255,.3); }
.ft__nav{ display:flex; flex-direction:column; gap:.55em; font-size:13px; text-align:right; }
.ft__nav a:hover{ color:var(--red-lt); }
.ft__copy{ text-align:center; margin:clamp(38px,5vw,60px) 0 0; font-family:var(--en); font-size:11px; letter-spacing:.24em; color:rgba(255,255,255,.4); }
.ft__draft{ text-align:center; margin:.8em 0 0; font-size:11px; letter-spacing:.06em; color:rgba(95,230,255,.6); }

/* スマホ用 固定電話バー */
.spbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:95;
  align-items:center; justify-content:center; gap:.8em; padding:.85em 1em;
  color:#fff; background:linear-gradient(115deg,var(--red-deep),var(--red) 58%,var(--red-lt));
  box-shadow:0 -8px 26px -10px rgba(0,0,0,.6);
}
.spbar span{ font-size:11.5px; letter-spacing:.14em; opacity:.85; }
.spbar b{ font-family:var(--en); font-weight:500; font-size:20px; letter-spacing:.03em; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1024px){
  .claims{ grid-template-columns:1fr; }
  .claims__lead{ grid-column:1; grid-row:auto; margin-bottom:clamp(26px,4vw,40px); }
  .claims > .claims__sub:nth-child(2),
  .claims > .claims__sub:nth-child(3){ grid-column:1; grid-row:auto; margin-top:22px; }
  .specs{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  :root{ --hd-h:62px; }
  .hd__nav{
    position:fixed; inset:0; z-index:-1; margin:0;
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.5em;
    padding:0 12vw; font-size:21px; font-family:var(--fude); font-weight:400;
    -webkit-text-stroke:0.04em currentColor; letter-spacing:.1em;
    background:linear-gradient(150deg,#c8103a,#b0121f 50%,#7d0d18);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .5s, visibility .5s, transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .hd.is-open .hd__nav{ opacity:1; visibility:visible; transform:none; z-index:-1; }
  .hd.is-open{ background:transparent; }
  .hd__burger{ display:block; margin-left:auto; }
  .hd__tel{ display:none; }
  .hd__logo-en{ display:none; }

  .concept__grid,
  .info__grid,
  .drink{ grid-template-columns:1fr; }
  .concept__fig{ order:-1; }
  .concept__fig .img-wipe{ aspect-ratio:16/10; }
  .menu__grid{ grid-template-columns:1fr; }
  .space__gal{ grid-template-columns:repeat(2,1fr); }
  .space__gal-a{ grid-column:1 / -1; }
  .space__gal-a .img-wipe{ aspect-ratio:16/9; }
  .beef__shots{ grid-template-columns:1fr; grid-auto-rows:clamp(220px,54vw,340px); }
  .ft__inner{ grid-template-columns:1fr; }
  .ft__nav{ flex-direction:row; flex-wrap:wrap; gap:.9em 1.4em; text-align:left; }
  .info__dl > div{ grid-template-columns:1fr; gap:.3em; }
  .info__dl dt{ font-size:12px; }

  .spbar{ display:flex; }
  .ft{ padding-bottom:88px; }
}

@media (max-width:480px){
  .menu__shots{ grid-template-columns:1fr 1fr; }
  .menu__shots figure:nth-child(3){ grid-column:span 2; }
  .menu__shots figure:nth-child(3) .img-wipe{ aspect-ratio:16/9; }
  .specs{ grid-template-columns:1fr; }
  .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  /* 2026-09-20 千鳥出現（main.js が付ける inline の transition-delay）もここで打ち消す */
  .reveal{ opacity:1; transform:none; transition-delay:0s !important; }
  .img-wipe::after{ transform:scaleX(0); }
  .img-wipe img{ transform:none; }
  .inkfx ellipse{ animation:none; }
}

@media print{
  .hd,.spbar,#demobar{ display:none !important; }
  body{ background:#fff; }
}

/* ==========================================================
   SUB PAGE（下層ページ：お品書き）
   ヒーローが無いページはヘッダーが透明のままだと白文字が読めないので、
   body.is-sub のときは最初から背景を出しておく。
   ========================================================== */
.is-sub .hd{ background:rgba(176,18,31,.9); backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 rgba(255,255,255,.08); }
.is-sub .hd::before{ opacity:0; }
.hd__nav a[aria-current="page"]{ opacity:1; color:var(--red-lt); }
.hd__nav a[aria-current="page"]::after{ transform:scaleX(1); }

.phero{
  position:relative; overflow:hidden; background:var(--ink); color:#fff;
  padding:calc(var(--hd-h) + clamp(44px,7vw,88px)) 0 clamp(44px,6vw,84px);
}
.phero .wrap{ position:relative; z-index:2; }
.phero h1{
  font-family:var(--fude); font-weight:400;
  -webkit-text-stroke:0.042em currentColor; paint-order:stroke fill;
  font-size:clamp(28px,4.6vw,54px); letter-spacing:.06em; line-height:1.5; margin:0;
}
.phero__lead{ margin:1.5em 0 0; max-width:40em; font-size:14.5px; line-height:2.1; color:rgba(255,255,255,.72); }
.phero__note{ margin:1.3em 0 0; font-size:12.5px; letter-spacing:.02em; color:rgba(95,230,255,.85); }
.phero .inkfx{ opacity:.6; }

/* 下層ページ本体（お品書き） */
.sec--menupage{ background:var(--paper-2); padding-top:clamp(56px,7vw,104px); }

/* トップページの「お品書き」抜粋 → 別ページへの導線 */
.menu-teaser__cta{ margin-top:clamp(34px,5vw,58px); display:flex; }
.btn--dark{ color:#fff; background:linear-gradient(115deg,#0f2350,#1f3f7a); box-shadow:0 10px 30px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14); }
.btn--dark:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -14px rgba(0,0,0,.7); }

/* 下層ページ末尾の戻り導線 */
.pagenav{ background:var(--paper); padding:clamp(44px,6vw,78px) 0; text-align:center; }
.pagenav a{ display:inline-flex; align-items:center; gap:.7em; font-size:14px; letter-spacing:.1em; border-bottom:1px solid var(--line); padding-bottom:.45em; }
.pagenav a:hover{ color:var(--red); border-color:var(--red); }

@media (max-width:820px){
  .menu-teaser__cta .btn{ flex:1 1 auto; }
}

/* ==========================================================
   2026-09-04 追加ブロック（金曜アポでの榎本様のご要望）
   ① 予約の空き状況 ② 秘伝のたれ ③ 熟成塩カルビ ④ お酒
   既存セレクタは書き換えず、末尾に足すだけにしている。
   明暗の並び：熊野牛(暗) → 空き状況(明) → たれ(暗) → 熟成塩カルビ(明) → お酒(暗) → お品書き(明)
   ========================================================== */

/* ---------- ① 予約の空き状況 ---------- */
.sec--vacancy{ background:var(--paper-2); } /* 2026-09-26 並べ替えで前後（お知らせ・店舗情報）が紙になったので、紙2に */

.vac{ margin-top:clamp(8px,2vw,20px); }

/* データが無い／古いときに残る表示。うその空席を出さないための保険 */
.vac__fallback{
  border:1px solid var(--line); background:#fff;
  padding:clamp(28px,4vw,44px); text-align:center; border-radius:3px;
}
.vac__fallback-lb{ font-family:var(--en); font-size:11px; letter-spacing:.36em; color:var(--red); margin:0 0 1em; }
.vac__fallback-txt{ font-family:var(--mincho); font-size:clamp(17px,2.2vw,21px); font-weight:800; letter-spacing:.06em; margin:0 0 1.5em; }

/* 本日 */
.vac__today{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(18px,3vw,44px);
  padding:clamp(24px,3.4vw,40px) clamp(24px,3.6vw,46px);
  background:#fff; border:1px solid var(--line); border-radius:3px;
  box-shadow:0 18px 46px -30px rgba(0,0,0,.45);
}
.vac__today::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--red-lt),var(--red));
}
.vac__today.vac--few::before{ background:linear-gradient(180deg,#e8901c,#c9700a); }
.vac__today.vac--full::before,
.vac__today.vac--off::before{ background:linear-gradient(180deg,#8c8f97,#5c5f66); }

.vac__today-lb{
  grid-column:1 / -1; margin:0 0 -.4em;
  font-family:var(--en); font-size:12px; letter-spacing:.3em; color:var(--red);
}
.vac__today-lb::first-letter{ letter-spacing:.3em; }
.vac__today-mark{
  grid-row:2 / span 2; align-self:center;
  font-family:var(--mincho); font-size:clamp(48px,7vw,86px); font-weight:800;
  line-height:1; margin:0; color:var(--red);
}
.vac--few .vac__today-mark{ color:#c9700a; }
.vac--full .vac__today-mark,
.vac--off  .vac__today-mark{ color:#7b7e86; }

.vac__today-txt{
  font-family:var(--mincho); font-size:clamp(20px,2.8vw,28px); font-weight:800;
  letter-spacing:.08em; margin:0;
}
.vac__today-note{
  grid-column:2; margin:.5em 0 0; font-size:13.5px; line-height:1.9; color:var(--txt-mute);
}
.vac__today-btn{ grid-row:2 / span 2; grid-column:3; }

/* 1週間 */
.vac__week{
  display:grid; grid-template-columns:repeat(7,1fr); gap:clamp(6px,1vw,12px);
  margin-top:clamp(14px,2vw,22px);
}
.vac__week li{
  display:flex; flex-direction:column; align-items:center; gap:.15em;
  padding:clamp(12px,1.6vw,18px) 4px;
  background:#fff; border:1px solid var(--line); border-radius:3px;
  text-align:center;
}
.vac__week li.is-today{ border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); }
.vac__wd{ font-family:var(--mincho); font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--txt-mute); }
.vac__wd.is-sun{ color:var(--red); }
.vac__wd.is-sat{ color:var(--blue); }
.vac__day{ font-family:var(--en); font-size:13px; letter-spacing:.04em; color:var(--txt-mute); }
.vac__mark{
  font-family:var(--mincho); font-size:clamp(22px,3vw,30px); font-weight:800;
  line-height:1.3; color:var(--red);
}
.vac--few .vac__mark{ color:#c9700a; }
.vac--full .vac__mark, .vac--off .vac__mark, .vac--none .vac__mark{ color:#9a9da4; }
.vac__label{ font-size:10.5px; letter-spacing:.02em; color:var(--txt-mute); line-height:1.5; }

/* 凡例・更新日 */
.vac__legend{
  display:flex; flex-wrap:wrap; gap:.6em 1.4em;
  margin-top:clamp(14px,2vw,20px); font-size:12px; color:var(--txt-mute);
}
.vac__legend li{ display:flex; align-items:baseline; gap:.4em; }
.vac__legend b{ font-family:var(--mincho); font-size:14px; font-weight:800; }
.vac__legend .vac--ok{ color:var(--red); }
.vac__legend .vac--few{ color:#c9700a; }
.vac__legend .vac--full,
.vac__legend .vac--off{ color:#7b7e86; }
.vac__stamp{ margin:.9em 0 0; font-size:11.5px; letter-spacing:.02em; color:var(--txt-mute); }

.vac__caution{
  margin:clamp(20px,3vw,30px) 0 0; font-size:13px; line-height:2; color:var(--txt-mute);
  padding-left:1em; border-left:2px solid var(--line);
}
.vac__caution strong{ color:var(--red); font-weight:700; }

@media (max-width:820px){
  .vac__today{ grid-template-columns:auto 1fr; text-align:left; }
  .vac__today-btn{ grid-row:auto; grid-column:1 / -1; width:100%; }
  .vac__week{ grid-template-columns:repeat(4,1fr); }
  .vac__label{ font-size:10px; }
}
@media (max-width:480px){
  /* 7日を3列にすると 3+3+1 で最終行が寂しくなるので、4列（4+3）にする */
  .vac__week{ grid-template-columns:repeat(4,1fr); gap:5px; }
  .vac__week li{ padding:10px 2px; min-width:0; }
  .vac__day{ font-size:12px; }
  .vac__label{ font-size:9.5px; letter-spacing:0; }
  .vac__legend{ gap:.5em 1em; font-size:11.5px; }
}

/* ---------- ② 秘伝のたれ ---------- */
.sec--tare{ background:var(--ink-2); color:#fff; overflow:hidden; }
.ink--tare{ opacity:.44; }
.sec--tare .wrap{ position:relative; z-index:5; }
.sec--tare h2{ color:#fff; }
.sec__note--light{ color:rgba(255,255,255,.6); }
.sec__note--light strong{ color:var(--cyan); }

.tare__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px);
}
.tare__grid li{
  position:relative; padding:clamp(26px,3vw,38px) clamp(20px,2.2vw,28px);
  border:1px solid rgba(255,255,255,.14); border-radius:3px;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
}
.tare__no{
  display:block; font-family:var(--fude); font-size:clamp(26px,3.2vw,38px);
  line-height:1; color:var(--red-lt); margin-bottom:.5em;
  -webkit-text-stroke:0.03em currentColor; paint-order:stroke fill;
}
.tare__grid h3{
  font-family:var(--mincho); font-size:clamp(16px,1.9vw,19px); font-weight:800;
  letter-spacing:.06em; color:#fff; margin:0 0 .9em;
}
.tare__grid p{ margin:0; font-size:13.5px; line-height:2.05; color:rgba(255,255,255,.68); }
body.show-tbc .sec--tare .tbc{ background:rgba(95,230,255,.16); box-shadow:inset 0 0 0 1px rgba(95,230,255,.6); }

@media (max-width:1024px){ .tare__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .tare__grid{ grid-template-columns:1fr; } }

/* ---------- ③ 熟成塩カルビ ---------- */
.sec--karubi{ background:var(--paper); }
.karubi__grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4.5vw,72px); align-items:center;
}
.karubi__fig{ margin:0; }
.karubi__fig .img-wipe{ aspect-ratio:4/3; }
.karubi__fig img{ height:100%; object-fit:cover; }
.karubi__fig figcaption{ margin-top:.85em; font-size:12px; letter-spacing:.12em; color:var(--txt-mute); }

.karubi__catch{
  font-family:var(--fude); font-weight:400;
  -webkit-text-stroke:0.038em currentColor; paint-order:stroke fill;
  font-size:clamp(22px,3.2vw,34px); letter-spacing:.08em; line-height:1.6;
  margin:0 0 1em; color:var(--red);
}
.karubi__txt p{ font-size:15px; line-height:2.15; color:var(--txt); }
.karubi__num{ font-family:var(--en); font-size:1.05em; letter-spacing:.03em; }

.karubi__spec{ margin:2em 0 2.2em; }
.karubi__spec > div{
  display:grid; grid-template-columns:7em 1fr; gap:1em;
  padding:.85em 0; border-bottom:1px solid var(--line);
}
.karubi__spec > div:first-child{ border-top:1px solid var(--line); }
.karubi__spec dt{ font-family:var(--mincho); font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--red); }
.karubi__spec dd{ margin:0; font-size:15px; letter-spacing:.03em; }
.karubi__spec dd small{ font-size:12px; color:var(--txt-mute); margin-left:.3em; }

@media (max-width:820px){
  .karubi__grid{ grid-template-columns:1fr; }
  .karubi__fig .img-wipe{ aspect-ratio:16/10; }
  .karubi__spec > div{ grid-template-columns:1fr; gap:.25em; }
  .karubi__spec dt{ font-size:12px; }
}

/* ---------- ④ お酒 ---------- */
.sec--sake{ background:var(--ink-3); color:#fff; overflow:hidden; }
.ink--sake{ opacity:.55; }
.sec--sake .wrap{ position:relative; z-index:5; }
.sec--sake h2{ color:#fff; }

.sake__grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(26px,4.2vw,68px); align-items:center;
}
.sake__fig{ margin:0; }
.sake__fig .img-wipe{ aspect-ratio:4/5; }
.sake__fig img{ height:100%; object-fit:cover; }
.sake__lead-ttl{
  font-family:var(--mincho); font-size:clamp(19px,2.5vw,25px); font-weight:800;
  letter-spacing:.08em; color:#fff; margin:0 0 1em;
}
.sake__txt p{ font-size:14.5px; line-height:2.2; color:rgba(255,255,255,.72); }
.sake__tags{ margin:2em 0 1.6em; }
.sake__tags li{
  border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.055);
}
.sake__note{ font-size:13px !important; color:rgba(255,255,255,.58) !important; margin-bottom:1.8em !important; }
body.show-tbc .sec--sake .tbc{ background:rgba(95,230,255,.16); box-shadow:inset 0 0 0 1px rgba(95,230,255,.6); }

@media (max-width:820px){
  .sake__grid{ grid-template-columns:1fr; }
  .sake__fig{ order:-1; }
  .sake__fig .img-wipe{ aspect-ratio:16/10; }
}

/* ==========================================================
   2026-09-05 追加ブロック
   ① お知らせ（news.html）
   ② ナビ項目が10本に増えたことへの対応（横幅の詰まり）
   既存セレクタは書き換えず、末尾に足すだけにしている。
   ========================================================== */

/* ---------- ① お知らせ ---------- */
.sec--newspage{ background:var(--paper-2); padding-top:clamp(56px,7vw,104px); }

.news__list{ list-style:none; margin:0 auto; padding:0; max-width:48em; }
.news__list[hidden]{ display:none; }

.news__item{
  display:grid; grid-template-columns:11em 1fr; gap:clamp(12px,2.4vw,32px);
  padding:clamp(24px,3.4vw,40px) 0; border-bottom:1px solid var(--line);
}
.news__item:first-child{ border-top:1px solid var(--line); }

.news__meta{ display:flex; flex-direction:column; align-items:flex-start; gap:.7em; padding-top:.35em; }
.news__meta time{
  font-family:var(--en); font-size:14px; letter-spacing:.1em; color:var(--red); font-weight:500;
}
.news__tag{
  font-size:11px; letter-spacing:.14em; line-height:1;
  padding:.55em .9em; border:1px solid rgba(176,18,31,.32);
  color:var(--red); background:rgba(176,18,31,.05);
}

.news__body h2{
  font-family:var(--mincho); font-size:clamp(17px,2.1vw,21px); font-weight:800;
  letter-spacing:.05em; line-height:1.75; margin:0 0 .9em;
}
.news__body p{ font-size:14.5px; line-height:2.15; color:var(--txt-mute); margin:0 0 .8em; }
.news__body p:last-child{ margin-bottom:0; }

/* データが無いときに残る表示 */
.news__empty{
  max-width:48em; margin-inline:auto; text-align:center;
  padding:clamp(40px,6vw,72px) clamp(20px,4vw,44px);
  border:1px solid var(--line); background:#fff;
}
.news__empty-lb{ font-family:var(--en); font-size:11px; letter-spacing:.36em; color:var(--red); margin:0 0 1em; }
.news__empty-txt{ font-family:var(--mincho); font-size:clamp(17px,2.2vw,21px); font-weight:800; letter-spacing:.06em; margin:0 0 1.2em; }
.news__empty-note{ font-size:13.5px; line-height:2; color:var(--txt-mute); margin:0; }
.news__empty-note a{ color:var(--red); border-bottom:1px solid rgba(176,18,31,.4); }

@media (max-width:820px){
  .news__item{ grid-template-columns:1fr; gap:.9em; }
  .news__meta{ flex-direction:row; align-items:center; gap:.9em; padding-top:0; }
  .news__meta time{ font-size:13px; }
}

/* ---------- ② ナビ（項目が10本になったので詰める） ---------- */
/* 2026-09-20「よくある質問」を足して11本になった。1280pxで1行に収めるため、さらに詰めて
   ハンバーガーへの切り替えを 1080px → 1200px に上げた（1100〜1200pxで折り返すのを防ぐ）。 */
.hd__nav{ gap:clamp(10px,1.25vw,22px); font-size:clamp(11.5px,.98vw,13px); letter-spacing:.06em; }
.hd__nav a{ white-space:nowrap; }

/* 1200px 以下は入りきらないので、820px を待たずにハンバーガーへ切り替える。
   このあいだの幅では電話ボタンは残す（予約導線を消さない）。 */
@media (max-width:1200px){
  .hd__nav{
    position:fixed; inset:0; z-index:-1; margin:0;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:clamp(.85em,2.1vh,1.5em);
    padding:calc(var(--hd-h) + 18px) 12vw 28px;
    overflow-y:auto; overscroll-behavior:contain;
    font-size:clamp(17px,4.4vw,21px); font-family:var(--fude); font-weight:400;
    -webkit-text-stroke:0.04em currentColor; letter-spacing:.1em;
    background:linear-gradient(150deg,#c8103a,#b0121f 50%,#7d0d18);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .5s, visibility .5s, transform .5s cubic-bezier(.2,.8,.2,1);
  }
  /* 項目が多いと画面に収まらないので、上下は auto マージンで中央寄せにする。
     入りきらないときは auto が 0 になり、上が切れずにスクロールできる。
     （justify-content:center のままだと、あふれたぶんが画面の上に隠れて押せなくなる） */
  .hd__nav{ justify-content:flex-start; }
  .hd__nav a:first-child{ margin-top:auto; }
  .hd__nav a:last-child{ margin-bottom:auto; }

  .hd.is-open .hd__nav{ opacity:1; visibility:visible; transform:none; z-index:-1; }

  /* ★重要：backdrop-filter が付いている要素は、その中の position:fixed の基準になる
     （＝メニューがヘッダーの高さに閉じ込められて出てこない）。
     お品書き・お知らせページ（body.is-sub）とスクロール後（.is-stuck）で起きるので、
     メニューを開いているあいだだけ backdrop-filter を外す。 */
  .hd.is-open,
  .hd.is-open.is-stuck,
  .is-sub .hd.is-open{
    background:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }

  .hd__burger{ display:block; }
  .hd__tel{ margin-left:auto; }
  .hd__nav a::after{ display:none; }
}

/* ==========================================================
   2026-09-05 追加ブロック（第2便：構成の組み替え）
   ① トップの「店内」「お品書き」を抜粋（ティザー）にして別ページへ送る
   ② トップに「お知らせ」の抜粋を新設（店舗情報の直前）
   ③ 店内ページ（interior.html）の「お席のご案内」
   既存セレクタは書き換えず、末尾に足すだけにしている。

   セクションの明暗（トップページ）：
   コンセプト明 → 熊野牛暗 → 熟成塩カルビ明 → たれ暗 → お品書き明
   → お酒暗 → 予約明 → 店内暗 → 予約CTA赤 → お知らせ明 → 店舗情報明
   ========================================================== */

/* ---------- ① 抜粋（ティザー）の写真並び ---------- */
.teaser__shots{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.8vw,24px); margin-top:clamp(30px,4vw,54px);
}
.teaser__shots figure{ margin:0; }
.teaser__shots .img-wipe{ aspect-ratio:4/3; }
.teaser__shots img{ width:100%; height:100%; object-fit:cover; }
.teaser__shots figcaption{ margin-top:.65em; font-size:11.5px; letter-spacing:.16em; color:rgba(255,255,255,.55); }

/* 抜粋なので、上下の余白はふつうのセクションより少し詰める */
.sec--space-teaser,
.sec--menu-teaser{ padding:clamp(72px,10vw,140px) 0; }
.sec--space-teaser .sec__head,
.sec--menu-teaser .sec__head{ margin-bottom:clamp(30px,4vw,52px); }

/* 暗い面の導線ボタンは中央でなく左そろえのまま（他セクションと同じ） */
.sec--space-teaser .menu-teaser__cta{ margin-top:clamp(30px,4vw,52px); }

/* ---------- ② トップページの「お知らせ」抜粋 ---------- */
.sec--news-teaser{ background:var(--paper); } /* 2026-09-26 直前がお品書き（紙2）になったので、紙に */

.newst__list{ list-style:none; margin:0; padding:0; max-width:52em; }
.newst__list[hidden]{ display:none; }

.newst__item{ border-bottom:1px solid var(--line); }
.newst__item:first-child{ border-top:1px solid var(--line); }

.newst__link{
  display:grid; grid-template-columns:15em 1fr; align-items:baseline;
  gap:clamp(10px,2.2vw,28px); padding:clamp(18px,2.4vw,26px) 0;
  transition:color .3s, background .3s;
}
.newst__link:hover{ color:var(--red); background:rgba(176,18,31,.035); }
.newst__meta{ display:flex; align-items:center; gap:.9em; }
/* 日付とタグは折り返させない（「営業のご案内」が2行になっていた） */
.newst__meta time,
.newst__meta .news__tag{ white-space:nowrap; }
.newst__meta time{
  font-family:var(--en); font-size:14px; letter-spacing:.1em; color:var(--red); font-weight:500;
}
.newst__ttl{
  margin:0; font-family:var(--mincho); font-weight:800;
  font-size:clamp(15.5px,1.8vw,18px); letter-spacing:.04em; line-height:1.8;
  display:flex; align-items:baseline; gap:.7em;
}
.newst__ttl::after{
  content:"→"; font-family:var(--en); font-weight:400; font-size:13px;
  color:var(--red); opacity:0; transform:translateX(-4px);
  transition:opacity .3s, transform .3s;
}
.newst__link:hover .newst__ttl::after{ opacity:1; transform:none; }

.newst__empty{
  max-width:52em; padding:clamp(28px,4vw,44px) clamp(20px,3vw,36px);
  border:1px solid var(--line); background:#fff;
}
.newst__empty[hidden]{ display:none; }
.newst__empty-txt{ font-family:var(--mincho); font-size:clamp(16px,2vw,19px); font-weight:800; letter-spacing:.06em; margin:0 0 .9em; }
.newst__empty-note{ font-size:13.5px; line-height:2; color:var(--txt-mute); margin:0; }
.newst__empty-note a{ color:var(--red); border-bottom:1px solid rgba(176,18,31,.4); }

.sec--news-teaser .menu-teaser__cta{ margin-top:clamp(28px,3.6vw,46px); }

/* トップからお知らせページの記事へ飛んだとき、ヘッダーに隠れないようにする */
.news__item{ scroll-margin-top:calc(var(--hd-h) + 24px); }

/* ---------- ③ 店内ページ（interior.html） ---------- */
.sec--interiorpage{ padding-top:clamp(56px,7vw,104px); }
.sec--seats{ background:var(--paper); }

.seats__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.seats__card{ background:var(--paper); padding:clamp(24px,3.4vw,44px); }
.seats__card h3{
  font-family:var(--mincho); font-size:clamp(18px,2.2vw,23px); letter-spacing:.08em; margin:0 0 .5em;
}
.seats__no{
  font-family:var(--en); font-size:14px; letter-spacing:.14em; color:var(--red);
  margin:0 0 1.1em; padding-bottom:.9em; border-bottom:1px solid var(--line);
}
.seats__card p:last-child{ margin:0; font-size:14.5px; line-height:2.1; color:var(--txt-mute); }
.sec--seats .menu-teaser__cta{ margin-top:clamp(34px,4.4vw,56px); }

/* ---------- 画面が狭いとき ---------- */
@media (max-width:820px){
  .newst__link{ grid-template-columns:1fr; gap:.55em; align-items:start; }
  .newst__meta time{ font-size:13px; }
  .seats__grid{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  .teaser__shots{ grid-template-columns:1fr 1fr; }
  .teaser__shots figure:nth-child(3){ grid-column:span 2; }
  .teaser__shots figure:nth-child(3) .img-wipe{ aspect-ratio:16/9; }
}

/* ==========================================================
   2026-09-07 追加ブロック
   「焼肉ひげの四つ」＝ 熊野牛 / 熟成塩カルビ / たれ / お酒
   4つがバラバラに見えるとのご指摘への対応。既存セレクタは書き換えず、
   末尾に足すだけにしている（明暗の交互・赤黒メイン／青差し色は維持）。

   ① .pride-intro  … 4つの手前に置く導入。黒地で熊野牛セクションへ直結する
   ② 通し番号 … 2026-09-20 に末尾の「見出しの型」①序（.sec__head--serial）へ移した
   ③ .sec--pride   … 4セクション共通の「つなぎ」。上辺に同じ位置の栞（しおり）を出す
   ④ .pride-end    … お酒の最後に置く締めの一行
   ========================================================== */

/* ---------- ① 導入 ---------- */
.pride-intro{
  position:relative; background:var(--ink); color:#fff;
  padding:clamp(64px,9vw,120px) 0 clamp(40px,5vw,64px);
  overflow:hidden;
}
/* 上のコンセプト（紙）から黒へ落ちる境目をやわらげる */
.pride-intro::before{
  content:""; position:absolute; left:0; right:0; top:0; height:clamp(40px,6vw,90px);
  background:linear-gradient(180deg, rgba(246,244,240,.14), transparent);
  pointer-events:none;
}
.pride-intro .wrap{ position:relative; z-index:3; }
.pride-intro .sec__head{ margin-bottom:clamp(28px,3.6vw,44px); }
.pride-intro h2{ color:#fff; }
.pride-intro .sec__lead{ max-width:34em; }

/* 2026-09-26 4つの名前を大きな毛筆にした（下の一言は削除）。
   均等な4列をやめ、1つずつ「左からの寄せ幅」を変えて縦に段違いで並べる（2便で大きさは4つ同じにした）。
   番号の赤い札は名前の左上に小さく添える */
.pride-nav{
  display:block;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:clamp(20px,2.6vw,34px);
}
.pride-nav li{ display:block; }
.pride-nav li + li{ margin-top:clamp(4px,1vw,14px); }
.pride-nav li:nth-child(2){ margin-left:21%; }
.pride-nav li:nth-child(3){ margin-left:8%; }
.pride-nav li:nth-child(4){ margin-left:39%; }
.pride-nav a{
  display:inline-flex; align-items:flex-start; gap:clamp(10px,1.3vw,18px);
  position:relative; padding:0 0 .12em;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s;
}
.pride-nav a:hover{ transform:translateX(6px); }
.pride-nav__no{
  flex:0 0 auto; display:inline-block; font-family:var(--en); font-size:12px; font-weight:500;
  line-height:1; letter-spacing:.06em; margin-top:1.1em;
  padding:.42em .6em .34em; border-radius:2px;
  background:var(--red-lt); color:#fff;
}
.pride-nav__tx{
  display:block; font-family:var(--fude); font-weight:400; color:#fff;
  -webkit-text-stroke:0.042em currentColor; paint-order:stroke fill;
  font-size:var(--pride-fs); line-height:1.3; letter-spacing:.06em;
  white-space:nowrap;   /* 名前は語の途中で折らない（いちばん長い「熟成塩カルビ」でも1行に収まる大きさに上限を掛けている） */
  text-shadow:0 4px 30px rgba(0,0,0,.45);
}
/* 2026-09-26（2便） 上野さん「4つのところ、サイズ一緒にしてほしい」。
   4つとも同じ大きさ（前回いちばん大きかった熊野牛の clamp(46px,8.4vw,118px)）にそろえた。
   ただし狭い画面では「熟成塩カルビ」（6字）が1行に入る大きさを上限にする（4つとも同じだけ縮む）。
   大きさの差はやめ、左からの寄せ幅だけで段違いにしている */
.pride-nav{
  --pride-fs: min(clamp(46px,8.4vw,118px), calc((100vw - 2 * var(--gut) - 70px) / 6.6));
}
.pride-nav a::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:var(--red-lt); transform:scaleX(0); transform-origin:right;
  transition:transform .45s cubic-bezier(.76,0,.24,1);
}
.pride-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- ② 通し番号 ---------- */
/* 2026-09-20 小さな赤い札（.pride-no）＋英字ラベルをやめ、
   ファイル末尾の見出しの型「① 序（.sec__head--serial / .serial）」に移した。 */

/* ---------- ③ 4セクション共通の「つなぎ」 ---------- */
/* 上辺の同じ位置（本文の左端）から短い縦線を下ろし、四角で止める。
   4セクションすべてで同じ形・同じ位置なので、1本の糸で綴じられて見える */
.sec--pride{ position:relative; }
.sec--pride::before{
  content:""; position:absolute; z-index:6; top:0;
  left:calc(50% - min(100%, var(--maxw)) / 2 + var(--gut));
  width:1px; height:clamp(28px,4vw,52px);
  background:linear-gradient(180deg, var(--red-lt), rgba(224,36,52,0));
  pointer-events:none;
}
.sec--pride::after{
  content:""; position:absolute; z-index:6;
  top:clamp(25px,3.7vw,49px);
  left:calc(50% - min(100%, var(--maxw)) / 2 + var(--gut) - 2px);
  width:5px; height:5px; background:var(--red-lt); transform:rotate(45deg);
  pointer-events:none;
}
/* 熊野牛は導入の直下なので、黒と黒がそのままつながる。線だけ出す */
.sec--beef.sec--pride{ padding-top:clamp(64px,9vw,120px); }

/* たれ（暗）→ お酒（暗）が並ぶので、境目をグラデーションでつなぎ、
   2つで1つの流れに見せる。お酒は少しだけ明るい黒に着地させる */
.sec--sake.sec--pride{
  background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink-3) 26%, var(--ink-3) 100%);
}

/* ---------- ④ 締めの一行 ---------- */
.pride-end{
  margin-top:clamp(48px,6.5vw,88px);
  padding-top:clamp(32px,4.2vw,52px);
  border-top:1px solid rgba(255,255,255,.16);
  text-align:center;
}
.pride-end__ttl{
  font-family:var(--fude); font-weight:400;
  -webkit-text-stroke:0.038em currentColor; paint-order:stroke fill;
  font-size:clamp(19px,2.9vw,32px); line-height:1.75; letter-spacing:.07em;
  color:#fff; margin:0 0 .9em;
}
.pride-end__sub{
  margin:0; font-size:13.5px; letter-spacing:.06em; color:rgba(255,255,255,.5);
}

/* ---------- 画面が狭いとき ---------- */
@media (max-width:640px){
  /* 大きさが揃ったので、長い「熟成塩カルビ」は寄せを小さく、短い「たれ」「お酒」を大きく寄せて段違いを残す */
  .pride-nav li:nth-child(2){ margin-left:6%; }
  .pride-nav li:nth-child(3){ margin-left:22%; }
  .pride-nav li:nth-child(4){ margin-left:44%; }
  .pride-nav__no{ font-size:11px; margin-top:.9em; }
}
@media (max-width:480px){
  .sec--pride::before{ height:24px; }
  .sec--pride::after{ top:22px; }
}

/* ==========================================================
   お品書きページ 実データ版（2026-09-15）
   写真付きカードグリッド＋ページ内サブナビ
   ========================================================== */

/* ---------- ページ内サブナビ（追従） ---------- */
.menunav{
  position:sticky; top:var(--hd-h); z-index:60;
  background:rgba(176,18,31,.96); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.menunav__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  padding-inline:max(12px, calc(var(--gut) - 14px));
}
.menunav__inner::-webkit-scrollbar{ display:none; }
.menunav a{
  flex:0 0 auto; padding:14px; font-size:12.5px; letter-spacing:.09em;
  color:rgba(255,255,255,.62); white-space:nowrap; position:relative;
  transition:color .25s;
}
.menunav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:9px; height:1px;
  background:var(--red-lt); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.menunav a:hover{ color:#fff; }
.menunav a:hover::after{ transform:scaleX(1); }
html{ scroll-padding-top:calc(var(--hd-h) + 50px); }

/* ---------- 税抜の断り書き ---------- */
.menu__taxnote{
  margin:0 0 clamp(30px,4vw,52px); padding:.95em 1.25em;
  font-size:13px; line-height:1.95; color:var(--txt-mute);
  background:rgba(255,255,255,.66); border-left:2px solid var(--red);
}
.menu__taxnote strong{ color:var(--red); font-weight:700; }

/* ---------- 大分類 ---------- */
.mgroup{ padding-top:clamp(46px,6vw,86px); }
.mgroup + .mgroup{ margin-top:clamp(40px,5.5vw,76px); border-top:1px solid var(--line); }
.mgroup__head{ margin-bottom:clamp(26px,3.4vw,44px); }
.mgroup__head h2{
  font-family:var(--fude); font-weight:400;
  -webkit-text-stroke:0.04em currentColor; paint-order:stroke fill;
  font-size:clamp(25px,3.8vw,42px); letter-spacing:.07em; line-height:1.5;
}
.mgroup__lead{ margin:1.1em 0 0; max-width:40em; font-size:14px; line-height:2.05; color:var(--txt-mute); }

/* ---------- 大分類の開閉（2026-09-15） ---------- */
.mgroup--fold > summary{
  list-style:none; cursor:pointer; user-select:none;
  transition:color .25s;
}
.mgroup--fold > summary::-webkit-details-marker{ display:none; }
.mgroup--fold > summary::marker{ content:""; }
.mgroup--fold > summary:hover h2,
.mgroup--fold > summary:focus-visible h2{ color:var(--red); }
.mgroup--fold > summary h2{
  display:flex; align-items:center; flex-wrap:wrap; gap:.1em .62em;
  transition:color .25s;
}
.mgroup__n{
  font-family:var(--en); font-weight:400; font-size:11.5px; letter-spacing:.14em;
  -webkit-text-stroke:0; color:var(--txt-mute); align-self:center;
}
.mgroup__ic{
  flex:0 0 auto; width:15px; height:15px; position:relative; align-self:center;
  -webkit-text-stroke:0;
}
.mgroup__ic::before, .mgroup__ic::after{
  content:""; position:absolute; left:0; top:7px; width:15px; height:1.6px;
  background:var(--red); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.mgroup__ic::after{ transform:rotate(90deg); }
.mgroup--fold[open] > summary .mgroup__ic::after{ transform:rotate(0); }
.mgroup__hint{
  margin:.9em 0 0; font-family:var(--en); font-size:10.5px; letter-spacing:.2em;
  color:var(--red);
}
.mgroup--fold[open] > summary .mgroup__hint{ visibility:hidden; }
.mgroup--fold[open] > summary{ margin-bottom:clamp(26px,3.4vw,44px); }
.mgroup--fold:not([open]) > summary{ margin-bottom:0; padding-bottom:clamp(10px,1.4vw,18px); }
.mgroup--fold:not([open]){ padding-bottom:clamp(8px,1.2vw,16px); }
/* 閉じたまま並ぶときは余白を詰める（全部閉じた初期表示がスカスカになるため） */
.mgroup--fold:not([open]) + .mgroup{
  margin-top:clamp(16px,2.2vw,30px); padding-top:clamp(22px,3vw,42px);
}

/* ---------- カテゴリ ---------- */
.mcat{ margin-top:clamp(28px,3.6vw,50px); }
.mcat .menu__cat{ margin-bottom:.95em; }

/* ---------- 品目カード ---------- */
.mcards{
  display:grid; gap:clamp(12px,1.7vw,22px);
  grid-template-columns:repeat(auto-fill, minmax(178px, 1fr));
}
.mcard{ margin:0; }
.mcard .img-wipe{ aspect-ratio:4/3; border-radius:2px; }
.mcard--tall .img-wipe,
.mcards--tall .img-wipe{ aspect-ratio:3/4; }
.mcard img{ height:100%; object-fit:cover; display:block; }
.mcard figcaption{
  margin-top:.62em; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em .7em;
}
.mcard__badge{
  flex:0 0 100%; font-size:10px; letter-spacing:.16em; color:var(--red);
  margin-bottom:.1em;
}
.mcard__name{
  flex:1 1 auto; font-size:13.5px; line-height:1.6; letter-spacing:.02em; color:var(--txt);
  font-family:var(--mincho); font-weight:600;
}
.mcard__price{
  flex:0 0 auto; font-family:var(--en); font-weight:400; font-size:14px;
  letter-spacing:.03em; color:var(--txt-mute);
}

/* ---------- お酒の折りたたみ ---------- */
.mdet{ border-bottom:1px solid var(--line); }
.mdet:first-of-type{ border-top:1px solid var(--line); }
.mdet > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:baseline; gap:.9em;
  padding:1.05em .2em; transition:color .25s;
}
.mdet > summary::-webkit-details-marker{ display:none; }
.mdet > summary:hover{ color:var(--red); }
.mdet__ttl{
  font-family:var(--mincho); font-weight:800; font-size:clamp(17px,1.9vw,21px);
  letter-spacing:.09em;
}
.mdet__ttl, .mdet > summary em{ }
.mdet > summary em{
  font-family:var(--en); font-style:normal; font-size:10px;
  letter-spacing:.28em; color:var(--red);
}
.mdet__n{ margin-left:auto; font-size:11.5px; letter-spacing:.1em; color:var(--txt-mute); }
.mdet__ic{
  flex:0 0 auto; width:11px; height:11px; position:relative; align-self:center;
}
.mdet__ic::before, .mdet__ic::after{
  content:""; position:absolute; left:0; top:5px; width:11px; height:1.4px; background:var(--txt);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.mdet__ic::after{ transform:rotate(90deg); }
.mdet[open] .mdet__ic::after{ transform:rotate(0); }
.mdet[open] > summary{ color:var(--red); }
.mdet .mcat{ margin-top:0; padding-bottom:clamp(22px,3vw,38px); }

/* ---------- 画面が狭いとき ---------- */
@media (max-width:760px){
  .mcards{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:11px; }
  .mcard__name{ font-size:12.5px; }
  .mcard__price{ font-size:13px; }
  .menunav a{ padding:12px 11px; font-size:12px; }
  .menunav a::after{ left:11px; right:11px; bottom:7px; }
}
@media (max-width:420px){
  .mcards{ grid-template-columns:repeat(2, 1fr); }
}

/* ==========================================================
   英語ページ（en.html）まわり　2026-09-16 追加
   既存セレクタは1つも書き換えていない。末尾への追記だけ。
   ========================================================== */

/* フッターの「English」。日本語のお客様の邪魔にならないよう、色は落として置く */
.ft__nav-en{
  font-family:var(--en); font-size:11px; letter-spacing:.2em;
  color:rgba(255,255,255,.5); margin-top:.35em;
}
.ft__nav-en:hover{ color:var(--cyan); }

/* 英語ページ本文。日本語ページの .info__dl / .specs をそのまま流用し、
   欧文で詰まって見えないように行間と字送りだけ英語向けに上書きする */
.en-body{ font-family:var(--en),"Zen Kaku Gothic New",sans-serif; }
.en-body .phero__lead,
.en-body .sec__lead{ letter-spacing:.01em; }
.en-body .info__dl > div{ grid-template-columns:11em 1fr; }
.en-body .info__dl dt{ letter-spacing:.08em; font-family:var(--en); font-size:12px; }
.en-body .info__dl dd{ font-size:14.5px; line-height:1.9; }
.en-body .specs b{ font-family:var(--en); letter-spacing:.04em; }
.en-body .sec__head h2{ font-size:clamp(25px,3.6vw,44px); letter-spacing:.02em; line-height:1.4; }
.en-body h1{ letter-spacing:.04em; }

/* 代表的な品の一覧（全品英訳はしない。1ページに収める分量だけ） */
.en-dish{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.en-dish li{
  display:flex; align-items:baseline; gap:1em;
  padding:.95em 0; border-bottom:1px solid var(--line);
}
.en-dish .en-dish__n{ flex:1 1 auto; font-size:15px; }
.en-dish .en-dish__jp{ display:block; font-size:12px; color:var(--txt-mute); letter-spacing:.06em; }
.en-dish .en-dish__p{ flex:0 0 auto; font-family:var(--en); font-size:15px; color:var(--red); }
.en-note{ margin:1.4em 0 0; font-size:12.5px; line-height:1.9; color:var(--txt-mute); }

/* 言語切り替え（英語ページのヘッダー右） */
.en-switch{
  font-family:var(--en); font-size:11px; letter-spacing:.18em;
  color:rgba(255,255,255,.62); border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:.25em; white-space:nowrap;
}
.en-switch:hover{ color:var(--cyan); border-color:var(--cyan); }

/* 写真と品名リストの高さが違うので、写真を上に揃える（下に大きな余白が出ないように） */
.en-body .karubi__grid{ align-items:start; }
/* ACCESSは4項目。3列だと4つ目の右に空きマスが2つできるので2列に固定する */
.en-body .specs{ grid-template-columns:repeat(2,1fr); }

@media (max-width:760px){
  .en-body .info__dl > div{ grid-template-columns:1fr; gap:.3em; }
  .en-body .specs{ grid-template-columns:1fr; }
  /* 品名が長いと折り返すので、flexではなくgridで「名前｜価格」の2列を固定する */
  .en-dish li{ display:grid; grid-template-columns:1fr auto; gap:.15em 1em; align-items:baseline; }
}

/* ==========================================================
   2026-09-20 追加ブロック（第4便）：よくあるご質問（#faq）
   ・置き場所：店内（暗）→ ★FAQ（明）→ 予約CTA（赤）。
     「迷っていることを消してから電話に送る」並びにしたいので、CTAの直前に入れた。
   ・見た目は既存の赤黒に合わせ、カードも影も角丸も使わない（罫線だけ）。
     問いの頭の赤いひし形は、四つの売り（01/04〜04/04）で使っている印と同じ形。
   ・質問は <h3> にそのまま書く（AI検索に拾わせるため。デザイン品質ルール5章）。
   既存セレクタは書き換えず、末尾に足すだけ。
   ========================================================== */

.sec--faq{ background:var(--paper); }
/* 2026-09-26 上辺の「赤92px＋灰」の罫（::before）を削除。セクション間の罫は
   末尾「配色の統一」ブロックの共通の罫（.sec--plain + .sec--plain::before）に一本化した */

/* 2026-09-20 改修：左に見出し・右に縦積みQ&Aの2分割をやめた。
   ・いちばん電話で聞かれる「営業時間」だけを上に大きく出す（問と答を横並びに）
   ・残りは2段組にして、右の段を下へずらす（千鳥）。上から順に均一に並べない
   ・問の頭にあった赤いひし形は、意味のない反復装飾なので削除。
     代わりに答のほうへ細い縦罫を引き、「上の問に対する答」という関係だけを示す */
.faq__item{ padding:clamp(16px,2vw,22px) 0; border-top:1px solid var(--line); }
.faq__q{
  font-family:var(--mincho); font-weight:800;
  font-size:clamp(15.5px,1.45vw,18px); line-height:1.75; letter-spacing:.04em;
  color:#14161b; margin:0;
}
.faq__a{
  margin:.8em 0 0; padding-left:clamp(12px,1.2vw,18px);
  border-left:1px solid var(--line);
  font-size:14.5px; line-height:1.95; color:#2b2e35;
}
.faq__a p{ margin:0 0 .7em; }
.faq__a p:last-child{ margin-bottom:0; }
.faq__a a{ color:var(--red); border-bottom:1px solid rgba(176,18,31,.45); }
.faq__a a:hover{ color:var(--red-lt); border-color:var(--red-lt); }
.faq__a small{ font-size:13px; color:#41454d; }

/* いちばん多いおたずね。ここだけ大きく、問と答を横に並べる */
.faq__item--top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(14px,3vw,52px); align-items:baseline;
  border-top:2px solid var(--red); border-bottom:1px solid var(--line);
  padding:clamp(20px,2.6vw,32px) 0 clamp(22px,3vw,34px);
  margin-bottom:clamp(26px,4vw,58px);
}
.faq__item--top .faq__q{ font-size:clamp(19px,2.4vw,30px); line-height:1.6; }
.faq__item--top .faq__a{
  margin:0; padding-left:0; border-left:0;
  font-size:clamp(14.5px,1.5vw,16.5px); line-height:2.1;
}

/* 残りの問答。右の段を落として横一線にしない */
.faq__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(30px,5vw,80px); align-items:start; }
.faq__col--drop{ margin-top:clamp(12px,2.4vw,40px); }   /* 2026-09-27 内容が減って右の列のほうが短くなったため、下げ幅を詰めた */

/* 問答のあと、電話へ渡す一行 */
.faq__tail{
  margin-top:clamp(22px,2.8vw,36px); padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--line);
  font-size:14px; color:#2b2e35;
}
.faq__tel{
  display:inline-block; font-family:var(--en); font-weight:500; font-size:17px; letter-spacing:.04em;
  color:var(--red); margin-left:.4em; border-bottom:1px solid rgba(176,18,31,.45);
}
.faq__tel:hover{ color:var(--red-lt); border-color:var(--red-lt); }

@media (max-width:860px){
  .faq__item--top{ grid-template-columns:1fr; gap:.9em; }
  .faq__cols{ grid-template-columns:1fr; }
  .faq__col--drop{ margin-top:0; }
}

/* ==========================================================
   2026-09-20 追加ブロック（第5便）：見出しの型
   ----------------------------------------------------------
   直す前は、index / menu / interior / news / en のすべての見出しが
   「英字ラベル（青・字間広め）＋46pxの横線 → 毛筆の大見出し → 説明文」
   という一字一句同じ形だった。同じ型を十数回くり返すこと自体が
   「どこかで見た量産サイト」に見える最大の原因だったので、
   英字ラベル（.lb）を全廃し、見出しを中身の役割で5つに振り分けた。

     ① 序  .sec__head--serial … 「焼肉ひげの四つ」の 01〜04。
            番号が本当に順番を意味している所だけ、番号を大きく使う。
            極細（Jost 200）の数字 × 毛筆の見出しで太さの差を出す。
     ② 札  （2026-09-26 廃止）
     ③ 罫  .sec__head--rule   … 実用（お品書き・お知らせ・店舗情報）。
            見出しを左、説明文を右に置いて1行にし、下に全幅の罫を引く。
            縦積みから外れるのはここ。
     ④ 柱  .sec__head--bar    … 四つの導入。左に赤い縦棒だけ。
     ⑤ 寄  .sec__head--push   … 店内。右へ寄せて右揃えにする。左右を崩す。

   下層ページの大見出し（.phero h1）とCTAはラベルを外し、
   毛筆1本／電話番号1本だけが立つようにしている。
   ========================================================== */

/* ---------- ① 序：通し番号のある見出し ---------- */
.sec__head--serial{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(16px,2.6vw,36px);
}
.sec__head--serial > .serial{
  grid-column:1; grid-row:1 / span 20; align-self:start;
  margin:0; display:flex; flex-direction:column; align-items:center;
}
.sec__head--serial > *:not(.serial){ grid-column:2; }
.serial em{
  font-style:normal; font-family:var(--en); font-weight:200;
  font-size:clamp(44px,6.6vw,88px); line-height:.78; letter-spacing:-.03em;
  color:var(--red);
}
.serial i{
  font-style:normal; font-family:var(--mincho); font-weight:400;
  font-size:10.5px; letter-spacing:.2em; line-height:1;
  writing-mode:vertical-rl; text-orientation:upright;
  margin-top:1.05em; color:var(--txt-mute);
}
.sec__head--light .serial em{ color:var(--red-lt); text-shadow:0 3px 18px rgba(0,0,0,.6); }
.sec__head--light .serial i{ color:rgba(255,255,255,.58); }

/* ---------- ② 札 ---------- */
/* 2026-09-26 廃止（上野さん「ダサい」）。CONCEPT・空き状況・FAQ・店内ページのお席の4か所を
   罫・寄・柱に振り替え、.sec__head--tate / .tate のCSSも削除した。 */

/* ---------- ③ 罫：見出し左・説明文右、下に全幅の罫 ---------- */
.sec__head--rule{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  column-gap:clamp(22px,4vw,64px); align-items:end;
  padding-bottom:clamp(14px,1.9vw,24px);
  border-bottom:1px solid var(--line);
}
.sec__head--rule > h2{ grid-column:1; }
.sec__head--rule > .sec__lead{ grid-column:2; margin:0 0 .45em; max-width:32em; font-size:13.5px; line-height:2; }
.sec__head--rule > .sec__note{ grid-column:1 / -1; margin-top:1.1em; }
.sec__head--light.sec__head--rule{ border-bottom-color:rgba(255,255,255,.24); }

/* ---------- ④ 柱：左に赤い縦棒 ---------- */
.sec__head--bar{ padding-left:clamp(16px,2.2vw,32px); border-left:2px solid var(--red-lt); }

/* ---------- ⑤ 寄：右へ寄せる ---------- */
.sec__head--push{ width:min(100%,44em); margin-left:auto; text-align:right; }
.sec__head--push > .sec__lead{ margin-left:auto; }

/* ---------- 下層ページの大見出し（ラベルを外した分だけ大きく） ---------- */
.phero h1{ font-size:clamp(32px,5.6vw,68px); }

@media (max-width:860px){
  .sec__head--rule{ grid-template-columns:1fr; }
  .sec__head--rule > h2,
  .sec__head--rule > .sec__lead{ grid-column:1; }
  .sec__head--rule > .sec__lead{ margin:1.3em 0 0; }
}
@media (max-width:700px){
  .sec__head--push{ width:100%; margin-left:0; text-align:left; }
  .sec__head--push > .sec__lead{ margin-left:0; }
}
@media (max-width:640px){
  .sec__head--serial{ display:block; }
  .sec__head--serial > .serial{ flex-direction:row; align-items:baseline; gap:.7em; margin-bottom:.45em; }
  .serial em{ font-size:44px; }
  .serial i{ writing-mode:horizontal-tb; text-orientation:mixed; margin:0; }
}

/* ==========================================================
   ロゴ・ハンコ（2026-09-23）
   榎本様ご提供の3点を SVG 化して使用。形・色・比率は変えない。
   ・ひげのおじさんの横顔（クリーム）…ヘッダー。ヘッダーは常に暗い地なのでそのまま置ける
   ・YAKINIKU＋ひげ＋骨（クリーム）…フッター（黒地）
   ・ひげハンコ（赤）…favicon と、CONCEPT の署名の後ろ（押印の位置）
   クリーム色のロゴは明るい地に置かない。
   ========================================================== */
.hd__logo-img{ display:block; height:36px; width:auto; flex:0 0 auto; }
.ft__logo{ display:block; width:clamp(88px,9vw,120px); height:auto; margin:0 0 16px; }
.concept__hanko{ display:inline-block; width:44px; height:44px; margin-left:.5em; vertical-align:-.9em; }
@media (max-width:760px){
  .hd__logo-img{ height:30px; }
}

/* ==========================================================
   改行を自然にする（2026-09-23）
   「先にまと｜めました」のような語の途中での改行をなくす。
   ・Chrome/Edge … word-break:auto-phrase（日本語を文節で折る）
   ・Safari など  … HTML に埋めた <wbr>（_tools/add_wbr.py が BudouX で入れる）と
                    word-break:keep-all で「<wbr>・句読点・空白でだけ折る」（<wbr> を含む要素だけ）
   ・overflow-wrap:break-word は、1語が枠より長いときだけの非常口（anywhere は使わない）
   ・見出し・短いコピーは text-wrap:balance で行の長さをそろえる
   ========================================================== */
body{ overflow-wrap:break-word; line-break:strict; text-wrap:pretty; }
/* keep-all は <wbr> を埋めた文と商品名にだけ掛ける（下）。全体に掛けると格子や横並びの中身が横にはみ出す */
@supports (word-break:auto-phrase){
  body{ word-break:auto-phrase; }
}
h1, h2, h3, .hero__sub, .sec__lead, .phero__lead, .mgroup__lead,
.karubi__catch, .sake__lead-ttl, figcaption{ text-wrap:balance; }
/* <wbr> を埋めた文は、Chrome でも <wbr> の位置で折る（ブラウザ間で改行位置をそろえ、
   「定休日」「熊野牛」など割らない語のリストも効かせるため）。
   auto-phrase が効くのは、JSで後から入る文（お知らせ・空き状況）だけになる */
:where(p, li, dd, dt, h1, h2, h3, figcaption, summary, span, a, strong, em, small, div):has(> wbr){ word-break:keep-all; }
/* 商品名は空白と記号のところでだけ折る（auto-phrase は「生もとのどぶ に｜ごり酒」のように割ることがある） */
.mcard__name{ word-break:keep-all; }
/* keep-all だと格子の中身が「いちばん長い語」の幅まで広がって横にはみ出すので、縮めてよいと明示する */
.mcards > *, .mcard figcaption > *, .news__item > *{ min-width:0; }
/* 英語ページは通常どおり */
html[lang="en"] body{ word-break:normal; }

/* ==========================================================
   フッターのSNSリンク（2026-09-26）
   URLは assets/js/social-data.js。1つも無ければ #ft-sns は hidden のまま＝何も出ない
   ========================================================== */
.ft__sns[hidden]{ display:none; }
.ft__sns{ margin-top:clamp(30px,4vw,48px); padding-top:clamp(18px,2.4vw,26px); border-top:1px solid rgba(255,255,255,.12); }
.ft__sns-list{ display:flex; flex-wrap:wrap; gap:.6em 1.6em; }
.ft__sns-list a{
  display:inline-flex; align-items:center; gap:.55em; padding:.4em 0;
  font-size:13px; letter-spacing:.08em; color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.22); transition:color .25s, border-color .25s;
}
.ft__sns-list a:hover{ color:#fff; border-color:var(--red-lt); }
.ft__sns-list svg{ fill:none; stroke:currentColor; stroke-width:1.5; }
.ft__sns-list svg .dot{ fill:currentColor; stroke:none; }

/* ==========================================================
   スクロール連動の動き（2026-09-26・トップページ body.is-top だけ）
   ----------------------------------------------------------
   参考にしたサイトは外部ライブラリ（スクロール演出用のJSと慣性スクロール）で動かしていたが、
   ここでは依存を増やさず CSS の scroll-driven animations だけで作る（JSは足していない）。
   ・動かすのは transform 系（translate / scale / transform）と opacity だけ＝レイアウトは揺れない
   ・スクロールそのものには一切触らない（スナップ・慣性・overflow固定・preventDefault なし）
   ・非対応ブラウザ（Firefox など）は @supports で丸ごと外れ、今までどおりの表示（内容は全部見える）
   ・prefers-reduced-motion: reduce では動かさない
   動きは5つ：
   ① ヒーロー … 抜けていくあいだ、写真はゆっくり寄り、墨の札は先に上へ抜ける（2026-09-26 3便：写真は全面・文字は札）
   ② 写真 … 枠の中で、スクロールより少し遅れて上下にずれる（奥行き）
   ③ 四つの名前 … 1つずつ、左右から寄ってきて定位置に収まる（大きい順・段違いの並びをそのまま使う）
   ④ 通し番号 01〜04 … 見出しより少し遅れて動く（極細の大きな数字だけが浮いて見える）
   ⑤ セクションのインク … 画面を通り過ぎるあいだに、下から上へ流れて少し広がる
   ========================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ★overflow:hidden の箱は「スクロールコンテナ」扱いになり、中の view() がその箱を基準にして
       止まってしまう（2026-09-26 実測）。はみ出しを切るだけの overflow:clip に置き換える
       （見た目は hidden と同じ。clip は対応ブラウザすべてで使える） */
    /* 2026-09-26 店内（.sec--space）と電話CTA（.cta）は、配色の統一でインクを外したので
       ここから外し、末尾「配色の統一」ブロックの .sec--plain{ overflow:clip } に移した */
    .is-top .pride-intro,
    .is-top .sec--beef,
    .is-top .sec--tare,
    .is-top .sec--sake{ overflow:clip; }

    /* ① ヒーロー（.hero を名前付きのタイムラインにして、中の要素がそれに合わせて動く） */
    /* 2026-09-26（3便） 写真は全面・文字は墨の札。写真が寄る・札が先に上へ抜ける、の2つだけ。
       写真は枠 .hero__photo（ヘッダーの帯の下〜画面の下・overflow:clip）の中で寄る。
       SCROLL の目印（.hero__scroll）は写真の上に文字を置かない方針に合わせてHTMLごと外した */
    .is-top .hero{ view-timeline: --hero block; }
    .is-top .hero__inner,
    .is-top .coupon-chip{
      animation-timing-function:linear; animation-fill-mode:both;
      animation-timeline:--hero; animation-range:exit 0% exit 100%;
    }
    /* 2026-09-29（5便） 写真の構成が .hero__slides（1枚ずつ重なる）→ .hero__inner（上下2段の合成）に変わったので、
       スクロールで寄る対象もここに合わせた（.hero__photo自身に掛けると overflow:clip の枠まで拡大してしまうため、
       一段内側の .hero__inner に掛けている） */
    .is-top .hero__inner{ animation-name:sdHeroZoom; }
    .is-top .coupon-chip{ animation-name:sdHeroLift; animation-range:exit 0% exit 75%; }

    /* ② 写真（枠 .img-wipe をタイムラインにし、中の写真を少しだけ大きくして上下に流す） */
    .is-top .img-wipe{ view-timeline: --ph block; }
    .is-top .img-wipe > img{
      scale:1.1;
      animation:sdPhoto linear both;
      animation-timeline:--ph; animation-range:cover 0% cover 100%;
    }

    /* ③ 四つの名前（千鳥の出現は無効にして、スクロール位置に合わせて寄せる） */
    .is-top .pride-nav li.reveal{ opacity:1; transform:none; transition:none; }
    .is-top .pride-nav li{
      --sd-dx:-10vw;
      animation:sdSlideIn linear both;
      animation-timeline:view(); animation-range:entry 0% cover 42%;
    }
    .is-top .pride-nav li:nth-child(even){ --sd-dx:10vw; }

    /* ④ 通し番号 */
    .is-top .serial em{
      animation:sdSerial linear both;
      animation-timeline:view(); animation-range:cover 0% cover 100%;
    }

    /* ⑤ セクションのインク（2026-09-26 配色の統一で、トップでインクが残るのは四つ＝熊野牛・たれ・お酒だけ。
       電話CTAの .inkfx--cta と店内の .ink--space はトップのHTMLから外したので、ここからも外した） */
    .is-top .inkfx--beef,
    .is-top .ink{
      animation:sdInkRise linear both;
      animation-timeline:view(); animation-range:cover 0% cover 100%;
    }

    /* スマホは振れ幅を半分ほどに */
    @media (max-width:640px){
      .is-top .pride-nav li{ --sd-dx:-6vw; }
      .is-top .pride-nav li:nth-child(even){ --sd-dx:6vw; }
      .is-top .img-wipe > img{ scale:1.06; animation-name:sdPhotoSm; }
      .is-top .serial em{ animation-name:sdSerialSm; }
    }
  }
}
@keyframes sdHeroZoom{ to{ transform:translateY(5%) scale(1.06); } }
@keyframes sdHeroLift{ to{ transform:translateY(-16vh); opacity:0; } }
@keyframes sdPhoto   { from{ translate:0 -4%; } to{ translate:0 4%; } }
@keyframes sdPhotoSm { from{ translate:0 -2.5%; } to{ translate:0 2.5%; } }
@keyframes sdSlideIn { from{ translate:var(--sd-dx) 0; opacity:0; } to{ translate:0 0; opacity:1; } }
@keyframes sdSerial  { from{ translate:0 48px; } to{ translate:0 -48px; } }
@keyframes sdSerialSm{ from{ translate:0 20px; } to{ translate:0 -20px; } }
@keyframes sdInkRise { from{ transform:translateY(10%) scale(.94); } to{ transform:translateY(-10%) scale(1.08); } }

/* ==========================================================
   配色の統一（2026-09-26・トップページ body.is-top だけ）
   ----------------------------------------------------------
   上野さん「背景、焼肉ひげの4つ以外は同じにしてほしい。文字、濃い青をベースに」
   ・対象：index.html で .sec--plain を付けた8つ
       CONCEPT / お品書き / お知らせ / 予約の空き状況 / 電話CTA / 店舗情報 / 店内 / よくあるご質問
   ・背景は --plain-bg の1色だけ。インク・グラデーション・にじみは外した（HTMLからも削除）
   ・文字は --navy（濃藍）。この中でだけ --txt / --txt-mute / --line を差し替えるので、
     既存のルールの var() がそのまま藍になる（個別に色を書き直したのは、色を直書きしていた所だけ）
   ・赤は差し色として残す：電話番号・予約ボタン・見出し「柱」の縦棒・FAQの一番上の罫・強調語
   ・対象外：ヒーロー／ヘッダー／四つ（.pride-intro・.sec--pride）／フッター／他4ページ
   ・もし逆（背景を藍・文字を白）だった場合は、下の :root の4つを入れ替えれば寄せられる
   ========================================================== */
:root{
  --navy:      #0f2350;               /* 濃藍（こいあい）。代替案：瑠璃紺 #19448e */
  --navy-mute: #354a80;               /* 補助の文字（説明文・キャプション・日付）。生成りの上で 6.3:1 */
  --navy-line: rgba(15,35,80,.22);    /* 罫線 */
  --plain-bg:  var(--paper-2);        /* 生成り #ebe7e0 */
}

.is-top .sec--plain{
  --txt: var(--navy);
  --txt-mute: var(--navy-mute);
  --line: var(--navy-line);
  background:var(--plain-bg); color:var(--txt);
  /* 店内の写真のスクロール連動（.img-wipe の view-timeline）を止めないよう hidden ではなく clip */
  overflow:clip;
}
.is-top .sec--plain :is(h2,h3){ color:var(--navy); text-shadow:none; }

/* ---------- 区切り：同じ地が続くので、本文幅の細い罫を1本だけ ---------- */
.is-top .sec--plain + .sec--plain::before{
  content:""; position:absolute; top:0; z-index:1; height:1px;
  left:calc(50% - min(100%, var(--maxw)) / 2 + var(--gut));
  right:calc(50% - min(100%, var(--maxw)) / 2 + var(--gut));
  background:var(--navy-line); pointer-events:none;
}
/* 空き状況 → 電話CTA は「予約」の1つの塊なので、罫を引かずに詰めてつなぐ */
.is-top .sec--vacancy + .cta.sec--plain::before{ content:none; }

/* ---------- 余白のリズム（同じ地が続いても単調にならないよう、広い・狭いを交互に） ---------- */
.is-top .sec--menu.sec--plain{ padding:clamp(96px,13vw,184px) 0 clamp(72px,9vw,124px); } /* 暗いお酒から明ける所は広く */
.is-top .sec--news-teaser.sec--plain{ padding:clamp(60px,7.5vw,104px) 0; }                   /* 実用の抜粋は詰める */
.is-top .sec--vacancy.sec--plain{ padding-bottom:clamp(20px,3vw,40px); }
.is-top .cta.sec--plain{ padding:clamp(28px,4vw,56px) 0 clamp(88px,12vw,164px); }
.is-top .sec--info.sec--plain{ padding:clamp(72px,9vw,128px) 0; }
.is-top .sec--space.sec--plain{ padding:clamp(88px,12vw,168px) 0; }
.is-top .sec--faq.sec--plain{ padding:clamp(72px,9vw,128px) 0 clamp(96px,12vw,168px); }

/* ---------- ボタン（この8セクションの中だけ） ---------- */
.is-top .sec--plain .btn--dark{
  color:#fff; background:var(--navy);
  box-shadow:0 12px 30px -16px rgba(15,35,80,.75);
}
.is-top .sec--plain .btn--dark:hover{ background:#0a1a3e; box-shadow:0 18px 38px -16px rgba(15,35,80,.85); }
.is-top .sec--plain .btn--ghost{
  color:var(--navy); border-color:var(--navy);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.is-top .sec--plain .btn--ghost:hover{ color:#fff; background:var(--navy); }

/* ---------- 電話CTA：赤いグラデの面をやめ、大きな赤い電話番号1本だけを立てる ---------- */
.is-top .cta.sec--plain{ color:var(--navy); }
.is-top .cta.sec--plain .cta__lead{ color:var(--navy); }
.is-top .cta.sec--plain .cta__tel{ color:var(--red); text-shadow:none; font-weight:400; }
.is-top .cta.sec--plain .cta__tel:hover{ color:var(--red-lt); }
.is-top .cta.sec--plain .cta__hours{ color:var(--navy-mute); }

/* ---------- 店内：暗い面の白文字を藍に ---------- */
.is-top .sec--space.sec--plain .sec__lead{ color:var(--navy-mute); }
.is-top .sec--space.sec--plain .teaser__shots figcaption{ color:var(--navy-mute); }

/* ---------- 店舗情報：ラベルとリンクを藍に（赤は電話ボタン側に残す） ---------- */
.is-top .sec--info.sec--plain .info__dl dt{ color:var(--navy); }
.is-top .sec--info.sec--plain .info__dl dd a{ border-bottom-color:rgba(15,35,80,.5); }
.is-top .sec--info.sec--plain .info__map-link{ color:var(--navy); border-bottom:1px solid rgba(15,35,80,.5); }
.is-top .sec--info.sec--plain .info__map-link:hover{ text-decoration:none; color:var(--red); border-color:var(--red); }

/* ---------- お知らせ：日付・種別の札を藍に ---------- */
.is-top .sec--news-teaser.sec--plain .newst__meta time{ color:var(--navy); }
.is-top .sec--news-teaser.sec--plain .news__tag{ color:var(--navy); border-color:rgba(15,35,80,.4); background:transparent; }
.is-top .sec--news-teaser.sec--plain .newst__empty-note a{ color:var(--navy); border-bottom-color:rgba(15,35,80,.5); }

/* ---------- 予約の空き状況：灰色の文字を藍の補助色に（仕様・表示条件は触らない） ---------- */
.is-top .sec--vacancy.sec--plain :is(.vac--full,.vac--off) .vac__today-mark,
.is-top .sec--vacancy.sec--plain :is(.vac--full,.vac--off,.vac--none) .vac__mark,
.is-top .sec--vacancy.sec--plain .vac__legend :is(.vac--full,.vac--off){ color:var(--navy-mute); }
.is-top .sec--vacancy.sec--plain .vac__legend .vac--few{ color:#9a5200; } /* 小さい凡例だけ、橙を濃くして 4.5:1 以上に */

/* ---------- よくあるご質問：直書きしていた黒・灰を藍に ---------- */
.is-top .sec--faq.sec--plain .faq__q{ color:var(--navy); }
.is-top .sec--faq.sec--plain .faq__a,
.is-top .sec--faq.sec--plain .faq__tail{ color:var(--navy); }
.is-top .sec--faq.sec--plain .faq__a small{ color:var(--navy-mute); }
.is-top .sec--faq.sec--plain .faq__a a{ color:var(--navy); border-bottom-color:rgba(15,35,80,.5); }
.is-top .sec--faq.sec--plain .faq__a a:hover{ color:var(--red); border-color:var(--red); }

/* ==========================================================
   暗い地の文字色（2026-09-26・2便）
   ----------------------------------------------------------
   上野さん「文字、白以外にしてみて」。暗い地の上の白い文字を --on-dark に替える（2便＝淡金 → 3便＝淡い水色 #a8e6ee）。
   ・ヘッダー・フッター … 全ページ共通の部品なので全ページで同じ色（他4ページも見た目が揃う）
   ・四つ（導入・熊野牛・たれ・お酒） … トップだけ（body.is-top）。英語ページの熊野牛（.sec--beef）は触らない
   ・ヘッダーの電話ボタン（赤）と、スマホ下の電話バー（赤）は白文字のまま（押す所の目印として残す）
   ・明るい地（熟成塩カルビ・生成りの8面）は触らない
   ・ヒーローは上の「HERO」ブロックで直接指定している
   ========================================================== */

/* ---------- ヘッダー（全ページ） ---------- */
.hd{ color:var(--on-dark); }
.hd__tel{ color:#fff; }
.hd__nav a{ opacity:1; }
.hd__burger span{ background:var(--on-dark); }
/* トップ：ヘッダーは常に不透明な墨の単色の帯（写真はこの帯の下から）。
   スクロール後（.is-stuck）も半透明・ぼかしにしない＝写真の上でもナビが読める。
   スマホのメニューを開いた状態（.is-open）は従来どおり全面のメニュー側の背景に任せる */
.is-top .hd::before{ content:none; }
.is-top .hd:not(.is-open){ background:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* ---------- 四つ（トップだけ） ---------- */
.is-top .pride-intro,
.is-top .sec--beef,
.is-top .sec--tare,
.is-top .sec--sake{ color:var(--on-dark); }
.is-top .pride-intro h2,
.is-top .sec--beef :is(h2,h3),
.is-top .sec--tare h2,
.is-top .tare__grid h3,
.is-top .sake__lead-ttl,
.is-top .sec--sake h2,
.is-top .pride-end__ttl,
.is-top .pride-nav__tx{ color:var(--on-dark); }
.is-top .claims__lead p{ color:var(--on-dark); }
.is-top :is(.pride-intro,.sec--beef,.sec--tare,.sec--sake) :is(.sec__head--light .sec__lead, .sec__head--light .serial i, .sec__note--light){ color:var(--on-dark-mute); }
.is-top .claims__sub p,
.is-top .tare__grid p,
.is-top .sake__txt p,
.is-top .pride-end__sub{ color:var(--on-dark-mute); }
.is-top .sake__note{ color:var(--on-dark-mute) !important; }
.is-top .sake__tags li{ color:var(--on-dark); border-color:var(--on-dark-line); background:transparent; }
.is-top .sec--sake .btn--ghost{ color:var(--on-dark); border-color:var(--on-dark-line); }
.is-top .sec--sake .btn--ghost:hover{ background:color-mix(in srgb, var(--on-dark) 10%, transparent); }
.is-top .pride-nav,
.is-top .pride-end,
.is-top .claims__sub{ border-top-color:var(--on-dark-line); }
.is-top .tare__grid li{ border-color:var(--on-dark-line); }
.is-top .pride-nav__no{ background:var(--red-cta); color:var(--on-dark); }

/* ---------- フッター（全ページ） ---------- */
.ft{ color:var(--on-dark-mute); }
.ft__name{ color:var(--on-dark); }
.ft__meta a{ border-bottom-color:var(--on-dark-line); }
.ft__copy,
.ft__nav-en{ color:var(--on-dark-mute); }      /* 旧：白40%・50%（墨の上 3.6:1 で足りていなかった）→ 7.3:1 */
.ft__sns{ border-top-color:var(--on-dark-line); }
.ft__sns-list a{ color:var(--on-dark); border-bottom-color:var(--on-dark-line); }
.ft__sns-list a:hover{ color:var(--on-dark); border-color:var(--red-lt); }

/* ---------- 熊野牛の面だけの手当て（トップだけ） ----------
   熊野牛の地は赤いインクが明るく（最も明るい所 #ff2352 前後）、淡金・水色はもちろん元の白でも 4.5:1 を割る所があった。
   インクの形と動きは残し、文字の裏に元からある薄い暗幕（.wrap::before）を少し濃く・広くして、補助の文字も主の色にする。
   ※ヒーロー（写真）には暗幕を戻していない。これは熊野牛の面の、インクの上だけの話 */
.is-top .sec--beef .wrap::before{
  inset:-6% -8% 30% -8%;
  background:
    radial-gradient(75% 60% at 28% 22%, rgba(4,5,8,.9), rgba(4,5,8,.72) 55%, rgba(4,5,8,0) 88%),
    radial-gradient(55% 60% at 78% 34%, rgba(4,5,8,.82), rgba(4,5,8,0) 85%);
}
/* 2026-09-26（3便） 水色は淡金より明るいので、インクの不透明度は .72 → 元の .92 に戻した（実測で文字は最小 6.1:1）。
   暗幕は元に戻すと 2.7:1 まで割るので、濃く広くした形のまま残す */
.is-top .claims__sub p,
.is-top .sec--beef .serial i{ color:var(--on-dark); }
@media (max-width:1024px){
  /* 1列に積むと文字が縦に長くなるので、暗幕も縦に伸ばす */
  .is-top .sec--beef .wrap::before{
    inset:-4% -8% 26% -8%;
    background:radial-gradient(95% 62% at 40% 42%, rgba(4,5,8,.9), rgba(4,5,8,.74) 62%, rgba(4,5,8,0) 92%);
  }
}


/* ==========================================================
   四つの面を「淡い地・濃藍の文字」に（2026-09-26・4便）
   ----------------------------------------------------------
   上野さん「青だと食欲なくなるかも。グレーとか、もっと淡い青に」。
   ・導入＝淡いグレー／熊野牛＝淡い青／たれ＝明るいグレー／お酒＝淡い水色。熟成塩カルビは元の生成りのまま
   ・文字は --on-dark をこの面の中だけ濃藍に差し替える（前の便で全部 --on-dark 経由にしてあるので、ほぼ自動で反転する）
   ・ヘッダー・フッターは中間のスレートグレー（--ink）、ヒーローの札は淡い地
   ・トップだけ（英語ページ・下層ページの熊野牛は触らない）
   ========================================================== */
.is-top .pride-intro,
.is-top .sec--beef,
.is-top .sec--tare,
.is-top .sec--sake{
  --on-dark:      #0f2350;
  --on-dark-mute: #354a80;
  --on-dark-line: rgba(15,35,80,.28);
}
.is-top .pride-intro{ background:#e4e8ee; }
.is-top .sec--beef{ background:#d6e3f0; }
.is-top .sec--tare{ background:#e3e5e9; }
.is-top .sec--sake,
.is-top .sec--sake.sec--pride{ background:linear-gradient(180deg,#e3e5e9 0%,#d4e4f2 26%,#d4e4f2 100%); }

/* 熊野牛：写真は淡く敷くだけ。暗幕はやめる（墨の面の手当てだったので不要） */
.is-top .sec--beef .beef__bg{ opacity:.22; }
.is-top .sec--beef .beef__bg::after{
  background:linear-gradient(180deg,#d6e3f0 0%, rgba(214,227,240,.35) 30%, rgba(214,227,240,.5) 62%, #d6e3f0 100%);
}
.is-top .sec--beef .wrap::before{ content:none; }
.is-top .sec--beef :is(h2,h3){ text-shadow:none; }
.is-top .claims__lead p{ text-shadow:none; }
.is-top .pride-nav__no{ background:var(--red-cta); color:#fff; }

/* ヒーローの札：淡い地・藍の文字。赤のボタンは白文字（7:1）、もう一方は藍の枠 */
/* 淡い地では文字の影（暗い地で読みやすくするためのもの）を全部外す。「仮の内容」の水色は赤に */
.is-top :is(.pride-intro,.sec--beef,.sec--tare,.sec--sake) :is(h2,h3,p,em,i,span,.serial em,.pride-nav__tx){ text-shadow:none; }
.is-top :is(.pride-intro,.sec--tare,.sec--sake) .sec__note--light strong{ color:var(--red); }
.is-top .tare__grid li{ background:rgba(255,255,255,.5); }

/* ==========================================================
   四つ：写真が左・文字が右（2026-09-27・5便）
   ----------------------------------------------------------
   上野さん「四つの内容を、写真が左・文字が右の形に。大きく並べた名前の画面はいらない（見出しだけでいい）」。
   ・導入は見出し「焼肉ひげの、四つ。」だけ。熊野牛と同じ淡い青で続けて、境目をなくした
   ・4つとも同じ型：左に大きな写真（PCでは文字を読んでいる間、画面に残る）／右に番号・見出し・本文
   ・写真は実写（熊野牛＝上バラ／熟成塩カルビ／たれ＝お品書きの1枚／お酒＝ハイボールのボトル）
   ・写真を「その場で残す」ため、この4面は overflow:hidden をやめて clip にする（hidden だと sticky が効かない）
   ・トップだけ（.four は index.html にしか無い）
   ========================================================== */
.is-top .pride-intro{ background:#d6e3f0; padding:clamp(72px,10vw,132px) 0 0; }
.is-top .pride-intro::before{ content:none; }
.is-top .pride-intro .sec__head{ margin-bottom:0; }
.is-top .sec--pride{ overflow:clip; }

.four{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(32px,6vw,104px); align-items:start;
}
.four__fig{ margin:0; position:sticky; top:calc(var(--hd-h) + clamp(20px,3vw,40px)); }
.four__fig .img-wipe{ aspect-ratio:5/6; }
.four__fig img{ width:100%; height:100%; object-fit:cover; }
.four__body{ padding-top:clamp(0px,2vw,24px); min-width:0; }
.four .sec__head{ margin-bottom:clamp(26px,3.2vw,42px); }
/* 右の列は幅が半分なので、番号を見出しの左でなく上に置く（スマホと同じ積み方）。見出しが1文字ずつ折れないように */
.four .sec__head--serial{ display:block; }
.four .sec__head--serial > .serial{ flex-direction:row; align-items:baseline; gap:.7em; margin-bottom:.6em; }
.four .serial i{ writing-mode:horizontal-tb; text-orientation:mixed; margin:0; }
.four .sec__head--serial h2{ font-size:clamp(28px,3.4vw,44px); }

/* 熊野牛：3つの主張を、右の1列に縦に */
.four .claims{ display:block; margin:0; }
.four .claims__lead{ margin:0 0 clamp(26px,3.2vw,40px); }
.four .claims__sub{ margin-top:clamp(20px,2.6vw,30px); }

/* たれ：4つのカードをやめ、罫で区切った縦の一覧に（壱〜四の字は左に） */
.is-top .four .tare__grid{ display:block; margin:0; padding:0; }
.is-top .four .tare__grid li{
  display:grid; grid-template-columns:auto 1fr; column-gap:clamp(16px,2vw,26px); align-items:baseline;
  padding:clamp(16px,2vw,22px) 0; margin:0;
  border:0; border-top:1px solid var(--on-dark-line); border-radius:0; background:none;
}
.is-top .four .tare__grid li:last-child{ border-bottom:1px solid var(--on-dark-line); }
.four .tare__no{ grid-row:1 / span 2; margin:0; font-size:clamp(24px,2.6vw,32px); }
.four .tare__grid h3{ margin:0 0 .5em; }

/* 熟成塩カルビ・お酒：左の写真の型に合わせ、文字側の余白だけ整える */
.four .karubi__txt > :first-child,
.four .sake__txt > :first-child{ margin-top:0; }

@media (max-width:900px){
  .four{ grid-template-columns:1fr; row-gap:clamp(26px,5vw,40px); }
  .four__fig{ position:static; }
  .four__fig .img-wipe{ aspect-ratio:4/3; }
  .four__body{ padding-top:0; }
}


/* ==========================================================
   赤と白を土台に、濃藍は差し色と文字（2026-09-27・6便）
   ----------------------------------------------------------
   上野さん「やっぱりヘッダーとか含め、ベースは赤系か白系。赤と白の焼肉のイメージを強く出しつつ、差し色や文字で濃紺」。
   ・赤の面：ヘッダー・フッター・たれ。上の文字は生成りの白 --on-dark（赤 #b0121f に 6.9:1）
   ・白の面：ヒーローの札・導入・熊野牛・お酒（お酒は薄い赤み）。上の文字は濃藍（前の便のまま）
   ・濃藍：本文・見出し・お品書きボタンなど、白い面の上の文字とボタン
   ・下の「淡い地」ブロック（4便）のうち、色だけをここで上書きする
   ========================================================== */
.is-top .pride-intro,
.is-top .sec--beef{ background:#fff; }
.is-top .sec--sake,
.is-top .sec--sake.sec--pride{ background:linear-gradient(180deg,#fff 0%,#fbeceb 30%,#fbeceb 100%); }
.is-top .sec--tare{
  --on-dark:      #fff3ee;
  --on-dark-mute: #fbe0dc;
  --on-dark-line: rgba(255,243,238,.42);
  background:var(--red);
}
.is-top .sec--tare .ink--tare{ display:none; }                 /* 赤の面の上に、にじみは重ねない */
.is-top .sec--tare .serial em,
.is-top .four .tare__no{ color:var(--on-dark); }
.is-top .sec--tare .sec__note--light strong{ color:var(--on-dark); text-decoration:underline; text-underline-offset:.2em; }

/* ヘッダー（赤）：電話ボタンは白地・赤文字。英字と現在地の色は水色・赤から生成りへ */
.hd__tel{ background:#fff; color:var(--red); box-shadow:none; }
.hd__tel:hover{ box-shadow:0 12px 26px -14px rgba(0,0,0,.5); }
.hd__logo-en,
.ft__en{ color:var(--on-dark-mute); }
.hd__nav a::after{ background:var(--on-dark); }
.hd__nav a[aria-current="page"]{ color:var(--on-dark); }
.ft__nav a:hover,
.ft__nav-en:hover{ color:var(--on-dark); }
.ft__sns-list a:hover{ border-color:var(--on-dark); }
.ft__draft{ color:var(--on-dark-mute); }
.phero__note{ color:var(--on-dark-mute); }
.en-switch:hover{ color:var(--on-dark); border-color:var(--on-dark); }


/* ==========================================================
   たれ（4つの写真つきカード）／お酒（ウイスキーの棚の写真）（2026-09-27・7便）
   ・たれ：1・2を大きく（写真4:3・名前24px）、3・4を普通（写真と文字を横に並べる・名前18px）。赤の面の上
   ・お酒：文と印を上に、横長の棚の写真を下に（1枚は横いっぱい、あとの2枚は並べる）。白〜薄い赤みの面の上
   ========================================================== */
.tare2{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,4vw,56px) clamp(22px,3.4vw,52px);
}
.tcard{ margin:0; min-width:0; }
.tcard__fig{ margin:0; }
.tcard__fig .img-wipe{ aspect-ratio:4/3; }
.tcard__fig img{ width:100%; height:100%; object-fit:cover; }
.tcard__txt{ padding-top:clamp(14px,1.8vw,22px); }
.tcard__no{ display:block; font-family:var(--fude); font-size:clamp(24px,2.6vw,32px); line-height:1; color:var(--on-dark); margin-bottom:.4em; -webkit-text-stroke:0.03em currentColor; paint-order:stroke fill; }
.tcard__name{ font-family:var(--mincho); font-weight:800; letter-spacing:.06em; line-height:1.5; margin:0 0 .6em; color:var(--on-dark); }
.tcard__price{ display:inline-block; margin-left:.9em; padding:.15em .7em; font-family:var(--mincho); font-size:.6em; font-weight:700; letter-spacing:.04em; color:var(--red); background:var(--on-dark); border-radius:1px; vertical-align:.18em; white-space:nowrap; }
.tcard__txt p{ margin:0; color:var(--on-dark-mute); line-height:2.05; }
.tcard--l .tcard__name{ font-size:clamp(20px,2.2vw,26px); }
.tcard--l .tcard__txt p{ font-size:clamp(14px,1.4vw,15.5px); }
.tcard--s{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:clamp(14px,2vw,24px); align-items:start; }
.tcard--s .tcard__fig .img-wipe{ aspect-ratio:1/1; }
.tcard--s .tcard__txt{ padding-top:0; }
.tcard--s .tcard__name{ font-size:clamp(16px,1.6vw,18px); }
.tcard--s .tcard__price{ display:table; margin:.5em 0 0; font-size:.7em; }
.tcard--s .tcard__txt p{ font-size:13.5px; margin-top:.7em; }
/* 2026-10-03 たれを5つに：上段＝1・2（大）、下段＝3〜5（小を3つ並べる）。6列の格子で 3+3 / 2+2+2。
   下段は3つ並ぶと横並び（写真｜文字）では狭いので、写真を上・文字を下の縦型にする */
@media (min-width:901px){
  .tare2{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .tcard--l{ grid-column:span 3; }
  .tcard--s{ grid-column:span 2; display:block; }
  .tcard--s .tcard__fig .img-wipe{ aspect-ratio:4/3; }
  .tcard--s .tcard__txt{ padding-top:clamp(12px,1.4vw,18px); }
}
@media (min-width:761px) and (max-width:900px){
  .tcard--s{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .tare2{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .tcard--s{ grid-template-columns:1fr; }
  .tcard--s .tcard__fig .img-wipe{ aspect-ratio:4/3; }
  .tcard--s .tcard__txt{ padding-top:14px; }
}

/* 2026-09-27（11便） 写真の配置を元（横長1枚を大きく＋下に2枚）へ戻した（上野さんのご指示。
   7便で試した「右列に写真＋ボタン」は撤回）。文字とボタンは縦1列（sake2 のグリッドは使わない） */
.sake2__cta{ margin-top:clamp(20px,3vw,32px); max-width:280px; }

.sake__shelf{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.8vw,22px); margin-top:clamp(28px,4vw,48px); }
.sake__shelf figure{ margin:0; }
.sake__shelf-wide{ grid-column:1 / -1; }
.sake__shelf img{ width:100%; height:auto; display:block; }
.sake__shelf .img-wipe{ aspect-ratio:auto; }
/* 下の2枚（横長パノラマではないほう）は元の写真の縦横比がそれぞれ違うので、高さを揃える */
.sake__shelf figure:not(.sake__shelf-wide) .img-wipe{ aspect-ratio:16/8; }
.sake__shelf figure:not(.sake__shelf-wide) img{ height:100%; object-fit:cover; object-position:50% 70%; }
@media (max-width:560px){
  .sake__shelf{ grid-template-columns:1fr; }
}


/* ==========================================================
   予約の空き状況：1か月カレンダー（2026-09-27・8便）
   ・7列（日〜土）。各マスは 日付・記号。一言のある日は小さな赤い点、押すと下に出る
   ・記号の色は既存（○＝赤／△＝橙／×・休＝灰）を使う。濃藍は文字
   ========================================================== */
.vac__cal-lb{ margin:1.6em 0 .6em; font-family:var(--mincho); font-size:14px; font-weight:800; letter-spacing:.08em; }
.vac__cal{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px;
}
.vac__cal-wd{ text-align:center; font-family:var(--mincho); font-size:12px; font-weight:800; letter-spacing:.1em; padding:.4em 0; color:var(--txt-mute); }
.vac__cal-wd.is-sun{ color:var(--red); }
.vac__cal-wd.is-sat{ color:var(--navy, #0f2350); }
.vac__cell{ margin:0; min-width:0; }
.vac__cell-b{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15em;
  width:100%; min-height:clamp(52px,7.4vw,76px); padding:.35em 0;
  background:#fff; border:1px solid var(--line, rgba(15,35,80,.22)); border-radius:1px;
  font:inherit; color:inherit;
}
button.vac__cell-b{ cursor:pointer; }
button.vac__cell-b:hover{ border-color:var(--navy, #0f2350); }
button.vac__cell-b:focus-visible{ outline:3px solid var(--navy, #0f2350); outline-offset:2px; }
.vac__cell-b.is-sel{ border-color:var(--navy, #0f2350); box-shadow:inset 0 0 0 1px var(--navy, #0f2350); }
.vac__cell-d{ font-family:var(--en); font-size:12px; letter-spacing:.02em; color:var(--txt-mute); line-height:1; }
.vac__cell .vac__mark{ font-size:clamp(17px,2.4vw,24px); line-height:1.1; }
.vac__cell.is-today .vac__cell-b{ border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); }
.vac__cell.is-blank{ min-height:0; }
.vac__cell.is-blank .vac__cell-d{ display:block; text-align:center; padding-top:.9em; opacity:.45; }
.vac__cell-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--red); }
.vac__cell-b .vac__cell-dot{ position:absolute; top:5px; right:5px; }
.vac__detail{ margin:.9em 0 0; min-height:2.2em; font-size:13.5px; line-height:1.9; color:var(--navy, #0f2350); }
.vac__detail .vac__cell-dot{ position:static; vertical-align:.1em; }
@media (max-width:560px){
  .vac__cal{ gap:3px; }
  .vac__cell-d{ font-size:11px; }
}


/* ==========================================================
   9便（2026-09-27）
   ・ヒーロー：拡大しすぎ（美味しそうに見えない）への対応。①切り抜きを広げた（皿の縁が少し入る）②ゆっくり寄る動きを 1.16→1.05 に
     ③写真に色調のフィルターだけを掛ける（彩度・コントラストを少し上げ、明るさを少し落とす＝赤身に締まりが出る）。
     ※上に重ねる暗幕・グラデは入れない方針のまま（filter は写真そのものの色調で、重ねものではない）
   ・見出しを1行で描き切る（.h2-oneline）。文字の大きさを画面幅に合わせて縮める
   ・お酒の見出しの積み方（番号を上・見出しを下）
   ========================================================== */
/* 2026-09-29 「黒っぽいフィルターを」への対応。明るさをさらに落とし、コントラストを上げて締まりを出す（彩度は維持） */
.hero__top img, .hero__strip img{ filter:saturate(1.14) contrast(1.14) brightness(.82); }
.sec__head h2.h2-oneline{ white-space:nowrap; font-size:clamp(13px,4.2vw,44px); letter-spacing:.04em; }

/* 2026-09-27（11便） 予約の空き状況のリード文だけ左寄せに（上野さんのご指示。見出しはそのまま右寄せ＝寄のまま） */
.sec__head--push > .sec__lead.sec__lead--left{ margin-left:0; text-align:left; }

/* 2026-10-03 お品書きの価格を「〇〇円（税込〇〇円）」に。税込の部分は一回り小さく */
.mcard__tax{ font-size:.82em; letter-spacing:0; margin-left:.1em; white-space:nowrap; }

/* 2026-10-03 お店の指示：価格は必ず商品名の下の行に（名前と同じ行に並べない） */
.mcard__name{ flex:0 0 100%; }
.mcard__price{ flex:0 0 100%; }

/* 2026-10-03 熊野牛（ミスジ）の画像は暗い店内で作ってあるので、写真共通の暗めフィルターを外す（肉がくすむため） */
.hero__top img.hero__slide--misuji{ filter:none; }

/* 2026-10-03 お店の指示：お品書きの「※価格は…」の注記を、上のリード文と同じ書体・大きさ・色に */
.phero .phero__note{ font-family:inherit; font-size:14.5px; font-weight:400; line-height:2.1; letter-spacing:normal; color:rgba(255,255,255,.72); }

/* 2026-10-07 暖簾：「赤が強すぎる」→ 画像側で彩度を下げ（_tools/hero_noren_soft.py）、共通フィルター（彩度1.14）は外す。熊野牛はお店の実写に差し替え（_tools/hero_kumano_sign.py） */
.hero__top img.hero__slide--noren{ filter:none; }

/* ==========================================================
   2026-10-09 お店の指摘への対応（上野さん経由・一度にまとめて）
   ① ロゴ文字（ヘッダー・フッター・店主の署名）を勘亭流の画像に（.wm）。ヘッダーの文字を PC で少し大きく
   ② ヒーロー：4枚の順番固定（暖簾→創業52年→ミスジ→酒）／下の肉は6枚1列・切り取らない
   ③ コンセプトの写真を熊野牛の看板つきの1枚に（横長のまま見せる）
   ④ 焼肉ひげの5大名物（白・赤・白・赤・白）
   ⑤ キャプションを全体に大きく　⑥ 電話は15時以降の注記
   ========================================================== */

/* ---------- ① 勘亭流のロゴ文字（画像を mask にして、文字色に追従させる） ---------- */
.wm{
  display:inline-block; background-color:currentColor; vertical-align:middle;
  aspect-ratio:1123 / 307; width:auto; font-size:0; line-height:0;
  -webkit-mask:url(../img/logo/wordmark-hige.webp) center / contain no-repeat;
          mask:url(../img/logo/wordmark-hige.webp) center / contain no-repeat;
  -webkit-text-stroke:0; paint-order:normal;
}
.hd__logo-txt.wm{ height:clamp(27px,2.7vw,38px); }
.ft__name.wm{ display:block; height:clamp(36px,4vw,52px); margin:0 0 .5em; }
.concept__sign .wm--sign{ height:clamp(30px,3.2vw,40px); margin-right:.2em; transform:translateY(-.08em); }
/* 2026-10-09 ヘッダーの文字（PC）を少し大きく：ナビ 13px→15.5px、電話番号 16→18px。12本が1行に入る幅だけ「KUMANO BEEF」の小さい英字を隠す */
.hd__nav{ font-size:clamp(13px,1.02vw,15.5px); }
.hd__tel-lb{ font-size:11px; letter-spacing:.14em; }
.hd__tel-no{ font-size:18px; }
@media (min-width:1201px) and (max-width:1499px){ .hd__logo-en{ display:none; } }
@media (max-width:1200px){ .hd__nav{ font-size:clamp(17px,4.4vw,21px); } }

/* ---------- ② ヒーロー ---------- */
.hero__top .hero__slide{ opacity:0; }
.hero__top .hero__slide--noren{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .hero__top--fade .hero__slide--noren { animation:heroFade4 24s ease-in-out infinite; animation-delay:-1s; opacity:0; }
  .hero__top--fade .hero__slide--sogyo { animation:heroFade4 24s ease-in-out infinite; animation-delay:5s;  opacity:0; }
  .hero__top--fade .hero__slide--misuji{ animation:heroFade4 24s ease-in-out infinite; animation-delay:11s; opacity:0; }
  .hero__top--fade .hero__slide--sake  { animation:heroFade4 24s ease-in-out infinite; animation-delay:17s; opacity:0; }
}
@keyframes heroFade4{ 0%{opacity:0} 4.5%,24%{opacity:1} 29%,100%{opacity:0} }
.hero__top img.hero__slide--sogyo{ filter:none; }
/* 下の肉：6枚を1列（16:9のまま・切り取らない）。スマホは3列×2行 */
.hero__strip{ grid-template-columns:repeat(6,1fr); gap:2px; flex:none; min-height:0; }
.hero__strip img{ position:static; inset:auto; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; display:block; }
/* 2026-10-09（2便）スマホも6枚を1列に（上野さん指示。小さくなるが、切り取りはしない） */
/* スマホは3列×2段（1枚が大きすぎない） */
@media (max-width:760px){ .hero__strip{ grid-template-columns:repeat(3,1fr); } }
.hero__strip{ gap:1px; }

/* ---------- ③ コンセプトの写真（熊野牛の看板つき・横長のまま） ---------- */
.concept__grid--k{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); align-items:center; }
.concept__grid--k .concept__fig .img-wipe{ flex:none; aspect-ratio:1800 / 965; }
.concept__grid--k .concept__fig img{ height:100%; object-fit:cover; }
@media (max-width:820px){ .concept__grid--k{ grid-template-columns:1fr; } .concept__grid--k .concept__fig .img-wipe{ aspect-ratio:1800 / 965; } }

/* ---------- ④ 焼肉ひげの5大名物 → 末尾の「5大名物（2便）」ブロックに作り直した ---------- */

/* ---------- ⑤ キャプションを全体に大きく ---------- */
.concept__fig figcaption,.menu__shots figcaption,.space__gal figcaption,.karubi__fig figcaption,.teaser__shots figcaption{
  font-size:clamp(14px,1.3vw,18px); letter-spacing:.1em; margin-top:.7em;
}
.mcard__name{ font-size:15.5px; }
.mcard__price{ font-size:16px; }
.mcard__badge{ font-size:12px; }
@media (max-width:760px){ .mcard__name{ font-size:14px; } .mcard__price{ font-size:14.5px; } }

/* ---------- ⑥ 電話は15時以降 ---------- */
.cta__call-note{ margin:-.6em 0 1.4em; font-size:clamp(15px,1.5vw,19px); letter-spacing:.06em; color:var(--navy); }
.cta__call-note strong{ color:var(--red); font-weight:800; }

/* ---------- 2026-10-09 臨時休業の表示（予約の空き状況） ---------- */
.vac__rinji{ margin:0 0 clamp(20px,3vw,32px); padding:1em 1.3em 1.1em; border:2px solid var(--red); background:#fff; color:var(--navy); }
.vac__rinji-ttl{ margin:0 0 .4em; font-family:var(--mincho); font-weight:800; font-size:clamp(17px,1.8vw,22px); color:var(--red); letter-spacing:.08em; }
.vac__rinji ul{ margin:0; padding:0; list-style:none; }
.vac__rinji li{ font-size:clamp(15px,1.4vw,18px); line-height:1.9; }
.vac__rinji b{ font-weight:800; }
.closure-bar{
  position:fixed; z-index:60; left:0; right:0; top:var(--hd-h); margin:0; padding:.6em var(--gut);
  background:#16181d; color:#fff; text-align:center; font-weight:700; font-size:clamp(13.5px,1.3vw,16px); letter-spacing:.05em; line-height:1.6;
}

/* 2026-10-09 ヒーローは中身の高さだけ（下の肉を1列にして低くなったので、画面いっぱいの最低の高さを外した。外さないと下に赤い空きができる） */
.hero{ min-height:0; }
@media (max-width:820px){ .hero{ min-height:0; } }

/* ==========================================================
   5大名物（2便・2026-10-09）  上野さん「デザインが野暮ったい」への作り直し
   ----------------------------------------------------------
   野暮ったかった理由（分析）と、いまの直し方
   ① 5つとも「見出し→左に写真・右に文字」の同じ型で、左右を入れ替えただけ → 構図をセクションごとに変えた
   ② 書体が3系統ばらばら（極細の英数字／太い筆＋縁取り／極小の明朝）で、いちばん目立つのが細い「1」＝弱い
      → 番号は漢数字（壱弐参と同じ筆）、見出しは太い明朝（Shippori 800）、数字は特大の太い明朝、本文はゴシック。役割ごとに固定
   ③ 写真が全部同じ大きさ・同じ縦横比の四角で、文字と交わらない → 端まで出す・文字を重ねる・段をずらす
   ④ 余白がどの区切りも同じ → 広い所と詰めた所をつけた
   ⑤ 赤地にオレンジ系の写真（机）を直置きして濁っていた → 写真に生成りの縁（印画紙のような白い枠）
   ⑥ 操作の飾り（輪郭だけの箱のナビ・表のような種類数）が汎用UIの見た目 → 漢数字＋罫線のナビ、種類数は特大の数字
   ========================================================== */
.mb-intro{ background:#fbfaf7; color:var(--navy); padding:clamp(64px,8vw,112px) 0 clamp(36px,4.5vw,64px); border-top:1px solid var(--navy-line); }
.mb-intro__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:end; }
.mb-intro__ttl{ margin:0; line-height:1; color:var(--navy); }
.mb-intro__lead{ display:block; font-family:var(--mincho); font-weight:600; font-size:clamp(15px,1.6vw,20px); letter-spacing:.3em; margin-bottom:.6em; color:var(--navy-mute); }
.mb-intro__row{ display:flex; align-items:baseline; gap:.08em; font-family:var(--fude); font-weight:400; font-size:clamp(46px,9.5vw,132px); -webkit-text-stroke:.035em currentColor; paint-order:stroke fill; letter-spacing:.02em; white-space:nowrap; }
.mb-intro__row em{ font-family:var(--mincho); font-style:normal; font-weight:800; font-size:1.35em; line-height:.8; color:var(--red); -webkit-text-stroke:0; letter-spacing:-.04em; }
.mb-nav{ margin:0; padding:0; list-style:none; border-top:2px solid var(--navy); }
.mb-nav li{ border-bottom:1px solid var(--navy-line); }
.mb-nav a{ display:flex; align-items:baseline; gap:.9em; padding:.7em .2em .65em; color:var(--navy); transition:padding .3s, color .3s; }
.mb-nav a i{ font-style:normal; font-family:var(--fude); font-size:1.5em; line-height:1; color:var(--red); -webkit-text-stroke:.03em currentColor; paint-order:stroke fill; }
.mb-nav a span{ font-family:var(--mincho); font-weight:800; font-size:clamp(16px,1.6vw,21px); letter-spacing:.08em; }
.mb-nav a:hover{ padding-left:.9em; color:var(--red); }

.mb{ position:relative; overflow:clip; }
.mb--white{ background:#fbfaf7; color:var(--navy); --mb-mute:var(--navy-mute); --mb-accent:var(--red); --mb-line:var(--navy-line); }
.mb--red{ background:var(--ink); color:var(--on-dark); --mb-mute:var(--on-dark-mute); --mb-accent:var(--on-dark); --mb-line:var(--on-dark-line);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>"); }
.mb h2,.mb h3{ color:inherit; text-shadow:none; }
.mb__body p{ font-size:clamp(16px,1.45vw,18.5px); line-height:2.05; margin:0 0 1.2em; color:inherit; }
.mb__body h3{ font-family:var(--mincho); font-weight:800; font-size:clamp(20px,2.1vw,27px); line-height:1.55; letter-spacing:.05em; margin:1.9em 0 .5em; padding-top:.8em; border-top:2px solid currentColor; }
.mb__kicker{ font-family:var(--mincho); font-weight:800; font-size:clamp(14px,1.3vw,17px); letter-spacing:.34em; color:var(--mb-accent); margin:0 0 .6em !important; }
.mb__lead{ margin:.5em 0 0; font-size:clamp(16px,1.6vw,21px); line-height:1.9; color:inherit; }
.mb .btn{ margin-top:.8em; }
.mb--red .btn--dark{ background:#fff; color:var(--red); box-shadow:none; }
.mb--red .btn--ghost{ color:var(--on-dark); border-color:var(--on-dark); }

/* 番号：「名物」を縦に小さく、漢数字を特大の筆で */
.mb__no{ margin:0; display:inline-flex; align-items:flex-end; gap:.25em; line-height:1; color:var(--mb-accent); }
.mb__no span{ writing-mode:vertical-rl; text-orientation:upright; font-family:var(--mincho); font-weight:800; font-size:clamp(14px,1.4vw,19px); letter-spacing:.3em; padding-bottom:.4em; }
.mb__no em{ font-style:normal; font-family:var(--fude); font-weight:400; font-size:clamp(88px,13vw,190px); line-height:.8; -webkit-text-stroke:.035em currentColor; paint-order:stroke fill; }

/* ---- 一 熊野牛：写真を左の端まで。見出しは写真の黒い所に重ねる ---- */
.mb--beef{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:stretch; }
.mb-beef__photo{ position:relative; margin:0; background:#000; aspect-ratio:1600 / 1760; }  /* 画像まるごと（まな板まで）見せる。切らない */
.mb-beef__photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%; }
/* 見出しは写真の上の黒い所（画像の上32%）に収める：番号と見出しを横に並べる。肉に重ならないので白で読める */
.mb-beef__head{ position:relative; z-index:2; display:flex; align-items:flex-end; gap:clamp(14px,2.4vw,32px); padding:clamp(24px,4vw,60px) clamp(20px,5vw,72px) 0; color:#fff; --mb-accent:#fff; }
.mb-beef__head .mb__no em{ font-size:clamp(70px,10vw,150px); }
.mb-beef__head h2{ margin:0; font-family:var(--mincho); font-weight:800; font-size:clamp(28px,4.3vw,64px); line-height:1.15; letter-spacing:.03em; color:#fff; }
.mb-beef__photo figcaption{ position:absolute; z-index:2; left:clamp(20px,5vw,72px); bottom:clamp(14px,2vw,28px); font-family:var(--mincho); font-weight:800; font-size:clamp(17px,1.7vw,24px); letter-spacing:.2em; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.8); }
.mb-beef__body{ align-self:center; padding:clamp(40px,6vw,96px) clamp(20px,5vw,72px) clamp(40px,6vw,96px) clamp(24px,4.5vw,64px); max-width:40em; }

/* ---- 二 タレ：見出しの左に大きな「二」、5枚は段違い、写真は生成りの縁つき ---- */
.mb--tare{ padding:clamp(64px,8vw,112px) 0 clamp(72px,9vw,128px); }
.mb-tare__head{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,3.5vw,48px); align-items:end; margin-bottom:clamp(36px,5vw,72px); }
.mb-tare__head h2{ margin:0; font-family:var(--mincho); font-weight:800; font-size:clamp(30px,5vw,68px); line-height:1.2; letter-spacing:.04em; }
.mb--tare .tare2{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(26px,3.6vw,52px) clamp(16px,2.4vw,36px); align-items:start; }
.mb--tare .tcard--l:nth-child(1){ grid-column:1 / span 7; }
.mb--tare .tcard--l:nth-child(2){ grid-column:8 / span 5; margin-top:clamp(40px,7vw,110px); }
.mb--tare .tcard--s{ display:block; grid-column:span 4; }
.mb--tare .tcard--s:nth-child(4){ margin-top:clamp(24px,3.6vw,56px); }
.mb--tare .tcard--s:nth-child(5){ margin-top:clamp(48px,7.2vw,112px); }
.mb--tare .tcard__fig .img-wipe{ aspect-ratio:4 / 3; border:clamp(5px,.7vw,9px) solid #fff3ee; background:#fff3ee; box-shadow:0 14px 30px -14px rgba(40,0,6,.8); }
.mb--tare .tcard--s .tcard__fig .img-wipe{ aspect-ratio:4 / 3; }
.mb--tare .tcard--s .tcard__txt{ padding-top:clamp(12px,1.4vw,18px); }
.mb--tare .tcard__no{ font-size:clamp(34px,3.6vw,52px); }
.mb--tare .tcard--l .tcard__name{ font-size:clamp(22px,2.4vw,31px); }
.mb--tare .tcard--s .tcard__name{ font-size:clamp(18px,1.8vw,22px); }
.mb--tare .tcard--l .tcard__txt p{ font-size:clamp(15px,1.35vw,17.5px); }
.mb--tare .tcard--s .tcard__txt p{ font-size:clamp(14.5px,1.25vw,16.5px); line-height:2; }

/* ---- 三 焼鳥と焼トン：写真を右の端まで。種類数を特大の数字で ---- */
.mb--yaki{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:stretch; }
.mb-yaki__body{ padding:clamp(56px,7vw,104px) clamp(20px,4.5vw,64px) clamp(56px,7vw,104px) var(--gut); justify-self:end; width:100%; max-width:calc(var(--maxw) / 2 + var(--gut)); }
.mb__head-solo h2{ margin:.35em 0 0; font-family:var(--mincho); font-weight:800; font-size:clamp(28px,4.2vw,58px); line-height:1.25; letter-spacing:.04em; }
.mb-yaki__lead{ margin:1.6em 0 .4em; font-size:clamp(16px,1.5vw,19px); line-height:1.9; }
.mb-yaki__note{ margin:1.2em 0 .6em; font-size:clamp(15.5px,1.4vw,18px); line-height:2; }
.mb-yaki__photo{ position:relative; margin:0; background:#000; min-height:clamp(320px,44vw,640px); }
.mb-yaki__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mb-yaki__photo figcaption{ position:absolute; right:clamp(16px,3vw,40px); bottom:clamp(12px,2vw,24px); font-family:var(--mincho); font-weight:800; font-size:clamp(16px,1.6vw,22px); letter-spacing:.2em; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.85); }
.mb-big{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:2px solid currentColor; }
.mb-big > div{ display:flex; flex-direction:column-reverse; padding:.4em .2em .8em; border-bottom:1px solid var(--mb-line); }
.mb-big > div + div{ border-left:1px solid var(--mb-line); padding-left:clamp(14px,2vw,28px); }
.mb-big dt{ font-family:var(--mincho); font-weight:800; font-size:clamp(14px,1.35vw,18px); letter-spacing:.1em; }
.mb-big dd{ margin:0; display:flex; align-items:baseline; gap:.2em; }
.mb-big b{ font-family:var(--mincho); font-weight:800; font-size:clamp(64px,9vw,128px); line-height:.95; letter-spacing:-.04em; color:var(--mb-accent); }
.mb-big small{ font-family:var(--mincho); font-weight:800; font-size:clamp(14px,1.4vw,19px); letter-spacing:.08em; }

/* ---- 四 熟成塩カルビ：見出しを縦書き。写真は上の白い地に食い込ませる ---- */
.mb--karubi{ padding:clamp(64px,8vw,112px) 0; }
.mb-karubi__grid{ display:grid; grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:start; }
.mb-karubi__title{ display:flex; flex-direction:column; gap:clamp(14px,2vw,28px); align-items:flex-start; }
.mb-karubi__title .mb__no em{ font-size:clamp(70px,9vw,128px); }
.mb-karubi__v{ margin:0; writing-mode:vertical-rl; font-family:var(--fude); font-weight:400; font-size:clamp(34px,5.2vw,72px); line-height:1.25; letter-spacing:.12em; -webkit-text-stroke:.035em currentColor; paint-order:stroke fill; }
.mb-karubi__photo{ position:relative; margin:0; }
.mb-karubi__photo img{ width:100%; height:auto; display:block; border:clamp(6px,.8vw,12px) solid #fff3ee; box-shadow:0 24px 44px -18px rgba(30,0,6,.85); }
.mb-karubi__photo figcaption{ margin-top:.8em; font-family:var(--mincho); font-weight:800; font-size:clamp(15px,1.5vw,20px); letter-spacing:.18em; color:var(--on-dark); }
.mb-karubi__body{ padding-top:0; }
.mb-karubi__lead{ font-family:var(--mincho); font-weight:800; font-size:clamp(17px,1.65vw,21px) !important; line-height:1.9 !important; }

/* ---- 五 お酒：横長の大きな写真に見出しを重ね、種類数は特大の数字 ---- */
.mb--sake{ padding:0 0 clamp(64px,8vw,112px); }
.mb-sake__hero{ position:relative; margin:0; }
.mb-sake__hero img{ width:100%; height:auto; display:block; filter:brightness(.72) saturate(1.05); }
.mb-sake__hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,4,4,.78) 0%, rgba(10,4,4,0) 62%); pointer-events:none; }
.mb-sake__head{ position:absolute; z-index:2; left:var(--gut); right:var(--gut); bottom:clamp(18px,3.4vw,52px); max-width:var(--maxw); margin-inline:auto; color:#fff; --mb-accent:#fff; display:flex; align-items:flex-end; gap:clamp(14px,2.4vw,32px); }
.mb-sake__head h2{ margin:0; font-family:var(--mincho); font-weight:800; font-size:clamp(24px,4.4vw,62px); line-height:1.2; letter-spacing:.04em; padding-bottom:.1em; }
.mb-sake__intro{ display:grid; grid-template-columns:minmax(0,1.6fr) auto; gap:clamp(20px,4vw,56px); align-items:center; padding:clamp(32px,4.5vw,64px) 0 clamp(24px,3vw,40px); }
.mb-sake__intro p{ margin:0; font-size:clamp(16px,1.5vw,19px); line-height:2; }
.mb-sake__intro .btn{ margin:0; }
.mb-big--six{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mb-big--six > div{ padding-top:.6em; }
.mb-big--six > div:nth-child(3n+1){ border-left:0; padding-left:.2em; }
.mb-big--six > div:nth-child(n+2){ border-left:1px solid var(--mb-line); padding-left:clamp(14px,2vw,28px); }
.mb-big--six > div:nth-child(3n+1){ border-left:0; padding-left:.2em; }
.mb-sake__shelf{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(12px,2vw,24px); margin-top:clamp(32px,4vw,56px); align-items:start; }
.mb-sake__shelf figure{ margin:0; }
.mb-sake__shelf figure:nth-child(2){ margin-top:clamp(24px,4vw,64px); }
.mb-sake__shelf img{ width:100%; height:auto; display:block; }

/* ---- スマホ ---- */
@media (max-width:820px){
  .mb-intro__grid{ grid-template-columns:1fr; align-items:start; }
  .mb--beef{ grid-template-columns:1fr; }
  .mb-beef__photo{ aspect-ratio:1600 / 1760; }
  .mb-beef__body{ padding:32px var(--gut) 56px; max-width:none; }
  .mb-tare__head{ grid-template-columns:auto minmax(0,1fr); align-items:center; }
  .mb--tare .tare2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb--tare .tcard--l:nth-child(1),.mb--tare .tcard--l:nth-child(2){ grid-column:1 / -1; margin-top:0; }
  .mb--tare .tcard--s{ grid-column:span 1; margin-top:0 !important; }
  .mb--tare .tcard--s:nth-child(5){ grid-column:1 / -1; }
  .mb--yaki{ grid-template-columns:1fr; }
  .mb-yaki__body{ max-width:none; padding:56px var(--gut) 40px; }
  .mb-yaki__photo{ min-height:0; aspect-ratio:4 / 3; }
  .mb-karubi__grid{ grid-template-columns:auto minmax(0,1fr); }
  .mb-karubi__photo{ grid-column:1 / -1; grid-row:2; margin:0; }
  .mb-karubi__title{ grid-column:1 / -1; padding-top:48px; }
  .mb-karubi__body{ grid-column:1 / -1; grid-row:3; padding-top:24px; }
  .mb-karubi__v{ writing-mode:horizontal-tb; font-size:clamp(32px,9vw,48px); letter-spacing:.06em; }
  .mb-sake__hero img{ aspect-ratio:3 / 2; object-fit:cover; }
  .mb-sake__intro{ grid-template-columns:1fr; }
  .mb-big--six{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-big--six > div:nth-child(n){ border-left:0; padding-left:.2em; }
  .mb-big--six > div:nth-child(even){ border-left:1px solid var(--mb-line); padding-left:14px; }
  .mb-sake__shelf{ grid-template-columns:1fr; }
  .mb-sake__shelf figure:nth-child(2){ margin-top:0; }
}

/* 2026-10-09（2便）スマホ：スライドの箱の縦横比を、スマホ用画像（2400x1764）に合わせて固定。
   以前は「画面の高さの34%」で箱が決まり、機種によって画像が切れていた（暖簾の幅が合わない原因） */
@media (max-width:820px){ .hero__top{ aspect-ratio:1.45; min-height:0; } }

/* 2026-10-09（2便）スマホで文が右にはみ出す対策：<wbr> の間が長い文節（例「和歌山県新宮市。熊野の山あいで育った黒毛和牛、」）は
   keep-all のままだと折り返せず箱の外へ出る。まず <wbr> で折り、入りきらないときだけ文字の途中で折る */
.concept__txt p, .mb p, .mb h2, .mb h3, .mb li, .mb dt, .faq__item p, .cta p, .sec__lead, .vac__fallback-txt{ overflow-wrap:anywhere; }

/* ========== 2026-10-10 トップ：3枚（暖簾→創業52年（酒の棚の上）→ミスジ）、18秒で1周 ========== */
@media (prefers-reduced-motion: no-preference){
  .hero__top--fade .hero__slide--noren { animation:heroFade3 18s ease-in-out infinite; animation-delay:-1s; opacity:0; }
  .hero__top--fade .hero__slide--sogyo { animation:heroFade3 18s ease-in-out infinite; animation-delay:5s;  opacity:0; }
  .hero__top--fade .hero__slide--misuji{ animation:heroFade3 18s ease-in-out infinite; animation-delay:11s; opacity:0; }
}

/* ========== 2026-10-10 スマホのトップを締め直す（上野さん「野暮ったい」） ==========
   原因：①最初の画面が弱い ②小さい字＋広い余白 ③wbr で短く折れて行がそろわない ④左揃えの縦並びで強弱がない ⑤色が多い（ベージュ・濃紺・赤・黒）⑥署名が小さい
   直し：写真を大きく／見出し・本文を一回り大きく／行を詰めて折り返し／写真は左右いっぱい（ブリード）／コンセプトの地を白に（色を減らす）／署名を大きく */
@media (max-width:820px){
  .hero__top{ aspect-ratio:2; }
  .sec--concept.sec--plain{ background:#fbfaf7; padding:44px 0 56px; }
  .sec--concept .sec__head h2.h2-oneline{ white-space:normal; font-size:clamp(25px,7.4vw,34px); line-height:1.5; letter-spacing:.04em; }
  .sec--concept .sec__head{ margin-bottom:24px; }
  .concept__grid--k{ gap:22px; }
  .concept__fig{ margin-inline:calc(-1 * var(--gut)); }
  .concept__fig .img-wipe{ aspect-ratio:1800 / 965; }
  .concept__txt p{ font-size:16.5px; line-height:1.95; letter-spacing:.02em; }
  .concept__txt p, .mb p, .tcard__txt p{ word-break:normal !important; line-break:strict; text-wrap:pretty; }
  .concept__txt p wbr{ display:none; }
  .concept__sign{ margin-top:1.6em; display:flex; align-items:center; gap:.5em; }
  .concept__sign .wm--sign{ height:44px; }
  .concept__hanko{ width:52px; height:52px; }
  .mb-intro{ padding:52px 0 28px; }
  .mb-intro__row{ font-size:clamp(54px,17vw,84px); }
  .mb-nav a span{ font-size:17px; }
  .mb__body p, .mb-yaki__lead, .mb-yaki__note, .mb-sake__intro p, .tcard__txt p{ font-size:16px; line-height:1.95; }
  .mb p wbr, .tcard__txt p wbr{ display:none; }
  .mb-beef__head h2{ font-size:clamp(30px,8.6vw,40px); }
}

/* 2026-10-10 スマホのトップ画像はPCに近い横長（2:1）。暖簾は元写真を幅いっぱいに・上下は黒 */
@media (max-width:820px){ .hero__top{ aspect-ratio:2; } }

/* ==========================================================
   2026-10-10 スマホ：5大名物の「バラバラ」をそろえる（上野さん「スマホのトップもバラバラでダサい」）
   バラバラだった所：①番号と見出しの並びが5つで違う（横並び・縦積み・写真に重ね） ②見出しの書体がセクションごとに違う（筆・明朝・太明朝）
   ③写真の見せ方が違う（全幅・白い縁つき・影つき・重ね文字） ④ボタンの色が3種類（紺・白枠・白）⑤余白がまちまち
   → 全セクション共通の型：［名物・漢数字］→［見出し（太い明朝）］→［写真（左右いっぱい・縁なし・4:3）］→［本文16px］→［ボタン（白地は赤・赤地は白）］
   ========================================================== */
@media (max-width:820px){
  .mb, .mb--karubi, .mb--tare, .mb--sake{ padding:56px 0; }
  .mb--beef, .mb--yaki{ display:block; padding:56px 0 0; }
  /* 番号＋見出し（全部同じ型：左寄せ・縦積み） */
  .mb__no{ display:flex; align-items:baseline; gap:.5em; margin:0 0 .35em; }
  .mb__no span{ writing-mode:horizontal-tb; text-orientation:mixed; font-size:15px; letter-spacing:.3em; padding:0; }
  .mb__no em{ font-size:64px; line-height:1; }
  .mb-beef__head, .mb-tare__head > div, .mb__head-solo, .mb-karubi__title, .mb-sake__head{ padding-inline:var(--gut); }
  .mb h2, .mb-beef__head h2, .mb-tare__head h2, .mb__head-solo h2, .mb-karubi__v, .mb-sake__head h2{
    font-family:var(--mincho); font-weight:800; font-size:28px; line-height:1.4; letter-spacing:.04em; -webkit-text-stroke:0; writing-mode:horizontal-tb; margin:0 0 20px; color:inherit;
  }
  .mb-tare__head{ display:block; margin-bottom:24px; padding:0; }
  .mb-tare__head .mb__no{ padding-inline:var(--gut); }
  .mb-tare__head .mb__lead{ margin-top:0; font-size:16px; }
  .mb-karubi__title{ display:block; padding-top:0; }
  /* 熊野牛：見出しを写真の上へ（黒地への重ねをやめる）。写真は左右いっぱい */
  .mb-beef__photo{ display:flex; flex-direction:column; aspect-ratio:auto; background:transparent; min-height:0; }
  .mb-beef__photo > img{ position:static; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; object-position:50% 100%; order:2; }
  .mb-beef__head{ order:1; position:static; display:block; padding-top:0; padding-bottom:0; color:var(--navy); --mb-accent:var(--red); }
  .mb-beef__head .mb__no em{ font-size:64px; }
  .mb-beef__photo figcaption{ order:3; position:static; padding:10px var(--gut) 0; font-size:14px; color:var(--navy-mute); text-shadow:none; }
  .mb-beef__body{ padding:24px var(--gut) 56px; }
  /* 焼鳥：写真を本文の上へ（他と同じ並び：見出し→写真→本文） */
  .mb--yaki{ display:flex; flex-direction:column; }
  .mb-yaki__body{ display:contents; }
  .mb__head-solo{ order:1; }
  .mb-yaki__photo{ order:2; margin:0; min-height:0; aspect-ratio:4 / 3; }
  .mb-yaki__lead{ order:3; padding-inline:var(--gut); margin:20px 0 0; }
  .mb-big{ order:4; margin-inline:var(--gut); }
  .mb-yaki__note{ order:5; padding-inline:var(--gut); }
  .mb--yaki .btn{ order:6; margin:8px var(--gut) 56px; }
  /* タレ：写真の白い縁・影をやめる */
  .mb--tare .tcard__fig .img-wipe, .mb-karubi__photo img{ border:0; box-shadow:none; }
  /* 熟成塩カルビ：写真を左右いっぱい */
  .mb-karubi__grid{ display:block; padding:0; }
  .mb-karubi__title{ padding-inline:var(--gut); }
  .mb-karubi__photo{ margin:0 0 20px; }
  .mb-karubi__photo figcaption{ padding:10px var(--gut) 0; font-size:14px; }
  .mb-karubi__body{ padding:0 var(--gut); }
  .mb-karubi__lead{ font-size:16px !important; font-family:var(--sans); font-weight:400; line-height:1.95 !important; }
  /* お酒：見出しを写真の上へ */
  .mb-sake__hero{ display:flex; flex-direction:column; }
  .mb-sake__hero::after{ display:none; }
  .mb-sake__head{ position:static; order:1; display:block; color:var(--navy); --mb-accent:var(--red); padding-bottom:0; max-width:none; margin:0; }
  .mb-sake__hero img{ order:2; filter:none; aspect-ratio:4 / 3; object-fit:cover; }
  /* ボタン：白地は赤、赤地は白（紺をやめる） */
  .mb .btn{ width:calc(100% - var(--gut) * 2); margin-inline:var(--gut); background:var(--red); color:#fff; border:0; box-shadow:none; justify-content:center; }
  .mb--red .btn, .mb--red .btn--ghost{ background:#fff; color:var(--red); border:0; }
  .mb-sake__intro .btn{ margin-inline:0; width:100%; }
  .mb-karubi__body .btn{ margin-inline:0; width:100%; }
  /* 本文は全部 16px */
  .mb__body p, .mb-yaki__lead, .mb-yaki__note, .mb-sake__intro p, .tcard__txt p, .mb__lead{ font-size:16px; line-height:1.95; }
}

/* ===== 2026-10-10（2便）PC：コンセプトの文章を大きく／写真を列いっぱいに ===== */
@media (min-width:821px){
  .concept__grid--k{ grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:clamp(32px,4vw,64px); }
  .concept__txt p{ font-size:clamp(17px,1.5vw,20px); line-height:2.1; }
  .concept__sign .wm--sign{ height:48px; }
  .concept__fig .img-wipe{ aspect-ratio:1800 / 965; }
}

/* ===== スマホの縦の間延びを詰める ===== */
@media (max-width:820px){
  .mb, .mb--karubi, .mb--tare, .mb--sake{ padding:40px 0; }
  .mb--beef, .mb--yaki{ padding-top:40px; }
  .mb-beef__body{ padding:18px var(--gut) 40px; }
  .mb-intro{ padding:40px 0 20px; }
  .mb-nav a{ padding:.5em .2em .45em; }
  .sec--concept.sec--plain{ padding:32px 0 40px; }
  .concept__grid--k{ gap:16px; }
  .concept__txt p{ line-height:1.8; margin-bottom:1em; }
  .mb__body p, .mb-yaki__lead, .mb-yaki__note, .mb-sake__intro p, .tcard__txt p, .mb__lead{ line-height:1.8; margin-bottom:.9em; }
  .mb__body h3{ margin:1.2em 0 .4em; padding-top:.6em; }
  .mb h2, .mb-beef__head h2, .mb-tare__head h2, .mb__head-solo h2, .mb-karubi__v, .mb-sake__head h2{ margin-bottom:14px; }
  .mb__no em{ font-size:52px; }
  .mb__no{ margin-bottom:.2em; }
  /* 写真は 4:3 → 3:2（低く） */
  .mb-beef__photo > img, .mb-yaki__photo, .mb-sake__hero img{ aspect-ratio:3 / 2; }
  .mb--tare .tare2{ gap:20px 12px; }
  .mb--tare .tcard--l .tcard__fig .img-wipe, .mb--tare .tcard--s:nth-child(5) .tcard__fig .img-wipe{ aspect-ratio:3 / 2; }
  .mb--tare .tcard--s:nth-child(5){ grid-column:1 / -1; }
  .mb--tare .tcard__txt{ padding-top:10px; }
  .mb-karubi__photo{ margin-bottom:14px; }
  .mb-karubi__photo img{ aspect-ratio:3 / 2; object-fit:cover; }
  .mb-big b{ font-size:56px; }
  .mb-sake__shelf{ gap:10px; margin-top:20px; }
  .mb-sake__shelf figure:nth-child(2){ margin-top:0; }
  .mb-sake__intro{ padding:20px 0 14px; gap:14px; }
  .mb-big--six > div{ padding-bottom:.4em; }
}
@media (min-width:821px){
  .concept__grid--k{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:stretch; }
  .concept__txt p{ font-size:clamp(18px,1.6vw,21px); line-height:2; }
  .concept__txt p wbr{ display:none; }
  .concept__txt p{ word-break:normal; line-break:strict; text-wrap:pretty; }
  .concept__grid--k .concept__fig{ height:auto; }
  .concept__grid--k .concept__fig .img-wipe{ flex:1 1 auto; aspect-ratio:auto; min-height:0; height:100%; }
  .concept__grid--k .concept__fig img{ height:100%; object-fit:cover; object-position:62% 50%; }
}
@media (min-width:821px){
  .concept__grid--k{ grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); gap:clamp(28px,3.5vw,52px); }
  .concept__txt p{ font-size:clamp(18px,1.55vw,20px); }
  .concept__grid--k .concept__fig img{ object-position:30% 50%; }
}
@media (min-width:821px){
  .concept__grid--k{ grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); }
  .concept__grid--k .concept__fig img{ object-position:55% 50%; }
}

/* 2026-10-10 トップ：暖簾→熊野牛はうまい→創業52年 の順（上野さん指示）。熊野牛が5秒、創業52年が11秒 */
@media (prefers-reduced-motion: no-preference){
  .hero__top--fade .hero__slide--misuji{ animation-delay:5s; }
  .hero__top--fade .hero__slide--sogyo { animation-delay:11s; }
}
/* 2026-10-10 スマホ：クラシタの文字を黒に */
@media (max-width:820px){ .mb-beef__photo figcaption{ color:#000; } }
/* 2026-10-10 スマホ：熊野牛は文字を大きく見せるため箱を少し縦長（1.7:1）に。暖簾・創業52年は2:1の絵なので、切らずに全体を入れる（上下は黒） */
@media (max-width:820px){
  .hero__top{ aspect-ratio:1.7; }
  .hero__top img.hero__slide--noren, .hero__top img.hero__slide--sogyo{ object-fit:contain; }
}

/* 2026-10-11 スマホ：トップの箱を 1.3:1 に（熊野牛の文字を大きく）。暖簾・創業52年も同じ比の画像に作り直したので、切らずに cover */
@media (max-width:820px){
  .hero__top{ aspect-ratio:2400 / 1846; }
  .hero__top img.hero__slide--noren, .hero__top img.hero__slide--sogyo{ object-fit:cover; }
}
/* 2026-10-11 パソコン：コンセプトの「看板と熊野牛」の写真は元の比（1800:965）で全体を出す。以前は縦に引き伸ばした箱で切り取られ、肉がほとんど写っていなかった */
@media (min-width:821px){
  .concept__grid--k{ grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:clamp(28px,3.5vw,56px); align-items:center; }
  .concept__grid--k .concept__txt p{ font-size:clamp(16px,1.3vw,19px); }
  .concept__grid--k .concept__fig{ height:auto; }
  .concept__grid--k .concept__fig .img-wipe{ flex:none; height:auto; aspect-ratio:1800 / 965; }
  .concept__grid--k .concept__fig img{ height:100%; object-fit:cover; object-position:50% 50%; }
}

/* ========== 2026-10-11 オープニング：ロゴ → 創業52年 → いつものトップ（約3秒・1回の訪問で1度） ==========
   head の小さなスクリプトが <html> に .has-op を付けたときだけ出る（JS無し・2回目以降・動きを減らす設定では出ない） */
.opening{ display:none; }
.has-op body{ overflow:hidden; }
.has-op .opening{
  display:flex; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center;
  background:#14100e; color:var(--on-dark,#fff3ee); cursor:pointer;
  transition:opacity .8s ease, visibility .8s;
}
.op-out .opening{ opacity:0; visibility:hidden; }
.opening__in{ display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.4vh,26px); }
.opening__face{ width:clamp(84px,9vw,128px); height:auto; opacity:0; animation:opUp .9s .15s cubic-bezier(.2,.7,.2,1) forwards; }
.opening__name, .opening__52{ display:block; background-color:currentColor; -webkit-mask:center / contain no-repeat; mask:center / contain no-repeat; }
.opening__name{ width:clamp(200px,26vw,360px); aspect-ratio:900 / 247; -webkit-mask-image:url(../img/logo/wordmark-hige.webp); mask-image:url(../img/logo/wordmark-hige.webp); opacity:0; animation:opUp .9s .45s cubic-bezier(.2,.7,.2,1) forwards; }
.opening__line{ display:block; width:clamp(120px,14vw,200px); height:1px; background:rgba(255,243,238,.45); transform:scaleX(0); animation:opLine .8s 1.1s ease forwards; }
.opening__52{ width:clamp(180px,22vw,300px); aspect-ratio:900 / 250; color:#d8b26a; -webkit-mask-image:url(../img/logo/wordmark-52.webp); mask-image:url(../img/logo/wordmark-52.webp); opacity:0; animation:opUp .9s 1.4s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes opUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes opLine{ to{ transform:scaleX(1); } }

/* 2026-10-11 トップの入れ替わりは2枚（暖簾→熊野牛）、12秒で1周 */
@keyframes heroFade2{ 0%{opacity:0} 8%,50%{opacity:1} 58%,100%{opacity:0} }
@media (prefers-reduced-motion: no-preference){
  .hero__top--fade .hero__slide--noren { animation:heroFade2 12s ease-in-out infinite; animation-delay:-1s; opacity:0; }
  .hero__top--fade .hero__slide--misuji{ animation:heroFade2 12s ease-in-out infinite; animation-delay:5s;  opacity:0; }
}

/* ==========================================================================
   2026-10-11 お店の修正（上野さん経由）
   ========================================================================== */
/* 改行：文章は文節ごとに折らず、ふつうの日本語の折り返し（行頭に「、。」を出さない禁則つき）。
   見出し・ボタンなど短いものは <wbr> の位置で折る（index.html 側で <p> の <wbr> を外した） */
p{ word-break:normal; line-break:strict; text-wrap:pretty; }

/* PC・スマホ共通 ---------------------------------------------------------- */
/* 下の6枚の写真：スクロールで寄って（拡大して）端が切れて見えるのをやめる */
.is-top .hero__inner{ animation:none !important; transform:none !important; }
/* コンセプトの写真：お店からメールでもらった元の写真（2000x1006）をそのまま */
.concept__grid--k .concept__fig .img-wipe, .concept__fig .img-wipe{ aspect-ratio:2000 / 1006 !important; }
.concept__grid--k .concept__fig img{ object-position:50% 50% !important; }
/* 焼鳥と焼トン：文字を区切る紺の線をなくす */
.mb--yaki .mb-big, .mb--yaki .mb-big > div{ border:0 !important; }
.mb--yaki .mb-big > div + div{ padding-left:clamp(20px,3vw,40px); }
/* お酒：数の下の2枚を横に並べ、高さをそろえる（列の幅を写真の縦横比 2.56 : 2.02 にすると高さが同じになる） */
.mb-sake__shelf{ grid-template-columns:minmax(0,2.56fr) minmax(0,2.02fr) !important; align-items:start; }
.mb-sake__shelf figure:nth-child(2){ margin-top:0 !important; }
/* フッター：住所と電話・営業時間を大きく */
.ft__meta p{ font-size:clamp(16px,1.25vw,19px); line-height:1.8; }
.ft__meta a{ font-size:1.12em; font-weight:700; }

/* PC だけ ---------------------------------------------------------------- */
@media (min-width:821px){
  .concept__grid--k{ grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr) !important; }
  /* 5大名物の一〜五：見出し（焼肉ひげの5大名物）の上端から下端までに、5行を同じ高さで並べる */
  .mb-intro__grid{ align-items:stretch; }
  .mb-nav{ display:flex; flex-direction:column; }
  .mb-nav li{ flex:1 1 0; display:flex; }
  .mb-nav a{ flex:1; align-items:center; padding-top:0; padding-bottom:0; }
  /* 名物四：縦書きの見出しが長く、写真と文の下が空いて見える → 写真を大きく・縦書きを少し小さく・上下中央にそろえる */
  .mb-karubi__grid{ grid-template-columns:auto minmax(0,1.75fr) minmax(0,1fr); align-items:center; }
  .mb-karubi__v{ font-size:clamp(32px,4vw,56px); }
}

/* スマホ ------------------------------------------------------------------ */
@media (max-width:820px){
  /* 文字を全体に少し小さく */
  .sec p, .mb p, .sec li, .sec dd, .faq__a p{ font-size:14.5px !important; line-height:1.85 !important; }
  .sec h2, .sec__head h2{ font-size:clamp(22px,6.4vw,28px) !important; }
  .sec--concept .sec__head h2.h2-oneline{ font-size:clamp(21px,6vw,27px) !important; }
  .mb h2, .mb-tare__head h2, .mb__head-solo h2, .mb-sake__head h2, .mb-karubi__v{ font-size:clamp(22px,6.4vw,28px) !important; }
  .mb h3, .tcard__name{ font-size:16px !important; }
  .faq__q{ font-size:15px !important; }
  /* 縦の間延びを詰める */
  .sec{ padding:40px 0 !important; }
  .sec__head{ margin-bottom:20px !important; }
  .mb, .mb--karubi, .mb--tare, .mb--sake{ padding:32px 0 !important; }
  .mb--beef, .mb--yaki{ padding-top:32px !important; }
  .mb-intro{ padding:32px 0 14px !important; }
  .mb-intro__row{ font-size:clamp(46px,14vw,64px) !important; }
  .cta{ padding:40px 0 !important; }
  .cta__tel{ font-size:clamp(34px,10vw,44px) !important; }

  /* 名物一：「名物 一 THE 熊野牛」を横一列に */
  .mb-beef__head{ display:flex !important; align-items:center; gap:10px; flex-wrap:nowrap; }
  .mb-beef__head .mb__no{ margin:0 !important; }
  .mb-beef__head .mb__no em{ font-size:44px !important; }
  .mb-beef__head h2{ white-space:nowrap; margin:0 !important; }
  .mb-beef__head h2 br{ display:none; }
  .mb-beef__head h2::first-line{ letter-spacing:.03em; }
  /* クラシタ（写真の名前）は写真の右下に小さく、「その特徴とは」は左に大きく → 上下に同じ大きさで並ばない */
  .mb-beef__photo figcaption{ text-align:right; font-size:12px !important; letter-spacing:.18em; padding:6px var(--gut) 0 !important; color:#000; }
  .mb-beef__body{ padding-top:10px !important; }
  .mb-beef__body .mb__kicker{ font-size:16px !important; letter-spacing:.2em; }
  /* その特徴とは：2つを横に並べる */
  .mb-beef__pts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .mb-beef__pt h3{ font-size:14.5px !important; line-height:1.5; margin:0 0 .5em !important; padding-top:.6em; border-top:1px solid var(--navy-line); }
  .mb-beef__pt p{ font-size:13px !important; line-height:1.75 !important; margin:0 !important; }

  /* 5大名物：縦に5つ並べず、横にスクロール（次の名物が右端に少し見える） */
  .mb-rail{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; align-items:flex-start; }
  .mb-rail::-webkit-scrollbar{ display:none; }
  .mb-rail > .mb{ flex:0 0 90%; width:90%; min-width:0; scroll-snap-align:start; }
  .mb-rail > .mb + .mb{ border-left:1px solid rgba(15,35,80,.12); }
  /* 箱の中ではタレの5枚を2列の小さなカードに（1枚目だけ横いっぱい） */
  .mb-rail .mb--tare .tare2{ grid-template-columns:1fr 1fr !important; gap:14px 10px !important; }
  .mb-rail .mb--tare .tcard{ grid-column:span 1 !important; margin-top:0 !important; }
  .mb-rail .mb--tare .tcard:first-child{ grid-column:1 / -1 !important; }
  .mb-rail .mb--tare .tcard__txt p{ font-size:12.5px !important; line-height:1.7 !important; }
  .mb-rail .mb--tare .tcard__name{ font-size:14px !important; }
  .mb-rail .mb--tare .tcard__no{ font-size:24px !important; }
  .mb-rail .mb--tare .tcard--s .tcard__fig .img-wipe, .mb-rail .mb--tare .tcard--l .tcard__fig .img-wipe{ aspect-ratio:4 / 3 !important; }
  .mb-rail .mb-big b{ font-size:44px !important; }
  /* 横スクロールの案内（5大名物の一覧の下） */
  .mb-intro::after{ content:"← 横にスワイプして5つの名物を見る →"; display:block; margin:12px var(--gut) 0; font-size:12px; letter-spacing:.12em; color:var(--navy-mute); text-align:center; }
}
@media (max-width:820px){ .mb-rail{ transition:height .35s ease; } }
/* 2026-10-11 PC：5大名物の一覧は見出しの上下中央に（行の高さはそろったまま） */
@media (min-width:821px){
  .mb-intro__grid{ align-items:center !important; }
  .mb-nav{ display:block; }
  .mb-nav li{ display:block; }
  .mb-nav a{ padding:.7em .2em .65em; align-items:baseline; }
  /* 名物四：縦書きをやめ、「名物 四 熟成塩カルビ」を上に横書き → 下に写真（大きく）と文 */
  .mb-karubi__grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) !important; align-items:center !important; }
  .mb-karubi__title{ grid-column:1 / -1; flex-direction:row !important; align-items:center !important; }
  .mb-karubi__v{ writing-mode:horizontal-tb !important; font-size:clamp(34px,4vw,56px) !important; letter-spacing:.06em !important; }
}
/* 2026-10-11 英語ページ（en.html は index.html から自動で作る）：英語は長いので、1行固定・字間・縦書きの札をゆるめる */
html[lang="en"] .h2-oneline{ white-space:normal !important; }
html[lang="en"] .sec__head h2, html[lang="en"] .mb h2{ letter-spacing:.02em !important; }
html[lang="en"] .mb-intro__row{ font-size:clamp(40px,6.4vw,92px) !important; letter-spacing:0 !important; gap:.18em; -webkit-text-stroke:0; font-family:var(--mincho); font-weight:800; }
html[lang="en"] .mb__no span{ writing-mode:horizontal-tb !important; letter-spacing:.05em !important; }
html[lang="en"] .mb-karubi__v{ writing-mode:horizontal-tb !important; }
html[lang="en"] .mb-nav a span{ letter-spacing:.02em; }
html[lang="en"] p{ text-wrap:pretty; }
html[lang="en"] .mb__no span{ white-space:nowrap; }
@media (max-width:820px){ html[lang="en"] .mb-intro::after{ content:"\2190  Swipe to see all five  \2192"; } }

/* 2026-10-11（2便）改行：文章も文節（BudouX）の <wbr> で折る。語の途中（「出／回る」など）では切らない */
p:has(> wbr){ word-break:keep-all; overflow-wrap:anywhere; }
@media (max-width:820px){
  .concept__txt p, .mb p, .tcard__txt p, p:has(> wbr){ word-break:keep-all !important; }
  .concept__txt p wbr, .mb p wbr, .tcard__txt p wbr{ display:inline !important; }
}
/* コンセプトの文：1文ごとに改行（文の途中は文節で折る） */
.concept__lead{ line-height:2.1 !important; }
@media (min-width:821px){ .concept__grid--k{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) !important; } }
/* 看板と熊野牛の写真：スクロールで拡大・上下に流す動きを外し、写真の全体（端まで）を見せる */
.is-top .concept__fig .img-wipe > img{ scale:1 !important; translate:none !important; animation:none !important; transform:none !important; }
/* お酒の2枚：実際の画像の比率（1400x537＝2.607、1400x717＝1.953）で列幅を決め、上下の端をそろえる */
.mb-sake__shelf{ grid-template-columns:minmax(0,2.607fr) minmax(0,1.953fr) !important; }
.mb-sake__shelf figure{ transform:none !important; }
.mb-sake__shelf figure.reveal{ transition-delay:0s !important; }
/* 2026-10-11（2便）PC側にも「wbr を隠す・normal」の古い指定が残っていたので、全画面幅で上書き */
.concept__txt p, .mb p, .tcard__txt p, p:has(> wbr){ word-break:keep-all !important; }
.concept__txt p wbr, .mb p wbr, .tcard__txt p wbr, p wbr{ display:inline !important; }

/* 2026-10-11 オープニングの見直し（上野さん「アイコンと創業52年の色を変えて、間の線はいらない」）：
   地を黒→紅（中央をわずかに明るく）、ロゴは生成り、「焼肉ひげ」は白、「創業52年」は淡い金で少し大きく。線は消した */
.has-op .opening{ background:radial-gradient(ellipse at 50% 45%, #c41a26 0%, #a3141e 55%, #7a0e16 100%); }
.opening__line{ display:none !important; }
.opening__in{ gap:clamp(16px,2.6vh,30px); }
.opening__face{ width:clamp(96px,10vw,140px); filter:drop-shadow(0 4px 14px rgba(60,0,6,.35)); }
.opening__name{ color:#fff; }
.opening__52{ color:#f6dfae; width:clamp(200px,24vw,330px); animation-delay:1.05s; }

/* ========== 2026-10-12 上野さんの指示 ========== */
/* トップの下の肉6枚は外した（HTMLもコメントアウト） */
.hero__strip{ display:none !important; }
/* スマホ：暖簾は上下を黒に（画像側で黒地。箱は 2400x1846） */
@media (max-width:820px){ .hero__top img.hero__slide--noren{ object-fit:cover; } }

/* オープニングを墨（黒）×金×紅で：ひげの顔 → 焼肉ひげ（白） → 創業52年（金のグラデーション） → 紅のハンコが押される。最後は幕が上がるように消える */
.has-op .opening{ background:#0f0c0b url(../img/sumi.webp); }
.has-op .opening::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 45% at 50% 50%, rgba(163,20,30,.28), rgba(163,20,30,0) 70%); pointer-events:none; }
.op-out .opening{ opacity:1; visibility:visible; transform:translateY(-100%); transition:transform .9s cubic-bezier(.76,0,.24,1), visibility 0s .9s; }
.opening__in{ position:relative; gap:clamp(14px,2.2vh,26px) !important; }
.opening__face{ width:clamp(90px,9vw,128px) !important; filter:drop-shadow(0 0 22px rgba(255,220,160,.18)) !important; }
.opening__name{ color:#f7f1e6 !important; clip-path:inset(0 100% 0 0); opacity:1 !important; animation:opWipe .9s .55s cubic-bezier(.65,0,.35,1) forwards !important; }
.opening__52{ color:transparent !important; background:linear-gradient(100deg,#9a7432 0%,#f3dca0 35%,#fff6d8 50%,#e7c780 65%,#a07a36 100%) !important; background-size:220% 100% !important;
  animation:opUp .8s 1.25s cubic-bezier(.2,.7,.2,1) forwards, opShine 1.6s 1.6s ease-in-out forwards !important; }
.opening__hanko{ position:absolute; right:-14%; bottom:-6%; width:clamp(38px,4vw,54px); height:auto; opacity:0; transform:scale(1.8) rotate(-8deg); animation:opStamp .35s 1.9s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes opWipe{ to{ clip-path:inset(0 0 0 0); } }
@keyframes opShine{ from{ background-position:100% 0; } to{ background-position:0 0; } }
@keyframes opStamp{ to{ opacity:1; transform:scale(1) rotate(-8deg); } }

/* スマホの5大名物：縦に並べる形（?mb=a、または横の自動送りが終わったあと） */
@media (max-width:820px){
  .mb-v .mb-rail{ display:block !important; overflow:visible !important; height:auto !important; transition:none; }
  .mb-v .mb-rail > .mb{ width:auto !important; }
  .mb-v .mb-rail > .mb + .mb{ border-left:0 !important; }
  .mb-v .mb-intro::after{ display:none !important; }
}
/* 2026-10-12 スマホ：トップの枠の高さを写真ごとに変える（JSが .is-js を付けて高さを入れる） */
@media (max-width:820px){
  .hero__top.is-js{ aspect-ratio:auto !important; transition:height .9s cubic-bezier(.65,0,.35,1); }
  .hero__top.is-js .hero__slide{ animation:none !important; opacity:0 !important; transition:opacity .9s ease; }
  .hero__top.is-js .hero__slide.is-on{ opacity:1 !important; }
  .hero__top.is-js img.hero__slide{ object-fit:cover; object-position:50% 50%; }
}
/* 2026-10-12（2）PCもトップの枠の高さを写真ごとに（暖簾 2800x880／焼肉 2800x1867） */
.hero__top.is-js{ aspect-ratio:auto !important; min-height:0 !important; transition:height .9s cubic-bezier(.65,0,.35,1); }
.hero__top.is-js .hero__slide{ animation:none !important; opacity:0 !important; transition:opacity .9s ease; }
.hero__top.is-js .hero__slide.is-on{ opacity:1 !important; }
.hero__top.is-js img.hero__slide{ object-fit:cover; object-position:50% 50%; filter:none !important; }

/* 2026-10-12 見出し「焼肉店で唯一の熊野牛指定料理店」の出典の注記 */
.concept__src{ margin:.9em 0 0; font-size:12px; line-height:1.7; letter-spacing:.06em; color:var(--navy-mute,#354a80); }
@media (max-width:820px){ .concept__src{ font-size:11px; margin-top:.7em; } }

/* 2026-10-12 見出しの折り返しを「焼肉店で唯一の／熊野牛指定料理店」の切れ目に固定 */
.nb{display:inline-block}

/* 2026-10-14 スマホ：五 お酒の写真は左右を切らず、元の写真（横長 約2.9:1）のまま全部見せる（上野さん指示） */
@media (max-width:820px){
  .mb-sake__hero img{ aspect-ratio:auto !important; object-fit:fill !important; height:auto !important; }
}