/* Generated: 2026-08-01 JST  公開側の共通CSS（product.php / index.php などで共有）*/
/* ==========================================================================
   御嘉 ─ 祇園 肉料理おか
   設計方針
   ・白は背景色ではなく「余白」。写真の白ホリと地色を溶かして紙面をつくる
   ・装飾（角丸・影・カード・グラデ）を使わない。線と余白と文字組みだけで格をつくる
   ・ボタンはページ内に一つだけ。CTAを連呼しない
   ・スマホはPCの縮小ではなく別の組み方（縦組み→横組み、行長と行間を再設計）
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* 2026-09-09 デザイン提案 v5（handoff-gokka-v5.html）に合わせた。
     地色は生成りではなく白。写真は枠に収めて全幅で見せるため、
     地色に溶かす必要がなくなった（.melt は廃止） */
  --paper:      #FFFFFF;   /* v5 --paper */
  --paper-hi:   #F7F7F6;   /* v5 --paper-2  セクションを一段落とす地 */
  --ink:        #131210;   /* v5 --sumi   白地 18.7:1 */
  /* v5 --text は #312E2A。白地では足りるが、交互地 #F7F7F6 の上で
     12.60:1 と本文基準ちょうどになるため、わずかに濃くした
     （白地 13.9:1 / #F7F7F6 上 12.96:1） */
  --ink-2:      #2F2C28;
  /* v5 の --sumi-2 は #4F4C46 だが白地 8.6:1 で、補助テキストの基準
     11:1 に届かない。色味を保ったまま暗くした（白地 11.9:1 / #F7F7F6 上 11.1:1） */
  --ink-3:      #3A3732;
  --kin:        #806C3C;
  --kin-lt:     #C0AC7C;
  --shu:        #9C3A28;
  --hair:       #E4E2DD;   /* v5 --rule */
  --hair-2:     rgba(19,18,16,0.07);

  --mincho: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --serif:  'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --gothic: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --en:     'Jost', 'Helvetica Neue', sans-serif;
  --roman:  'Cormorant Garamond', 'Times New Roman', serif;

  --gutter: clamp(22px, 5.4vw, 76px);
  --rhythm: clamp(88px, 13vw, 168px);   /* セクション間の呼吸 */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink-2);
  /* v5 は本文をゴシックで組む。明朝は見出しと数字に回す */
  font-family: var(--gothic);
  font-weight: 400;
  /* v5 は 0.95rem(15.2px) だが、本文は 16px 以上とする規約に合わせて下限を 1rem に上げた */
  font-size: clamp(1rem, 4.2vw, 1.0625rem);
  line-height: 2.2;
  letter-spacing: 0.05em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

/* Cormorant の既定はオールドスタイル数字（0が小さく、6や8が上下にはみ出す）。
   雰囲気は良いが金額の誤読を招くので、数字を扱う箇所だけライニング数字に揃える */
.hero-facts .num, .order-price, .dock-p, .ft-copy {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* --- 版面 --------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }

/* 和文は 30〜36字で折り返すのが読みやすい。行長を字数で縛る */
.measure { max-width: 33em; }

/* --- 共通パーツ ---------------------------------------------------------- */
.label {
  font-family: var(--gothic);
  font-size: 0.96875rem; font-weight: 500;
  letter-spacing: 0.24em; line-height: 1;
  color: var(--kin);
  display: flex; align-items: center; gap: 14px;
}
.label::before {
  content: ''; width: 26px; height: 1px; background: var(--kin-lt);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) .1s;
}
.on .label::before, .label.on::before { transform: scaleX(1); }

.h-sec {
  text-wrap: balance;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.3125rem, 5.6vw, 2.875rem);
  line-height: 1.75;
  letter-spacing: 0.09em;
  color: var(--ink);
}
.h-sec .sm { font-size: 0.62em; letter-spacing: 0.14em; }

.body-txt { color: var(--ink-2); }
.body-txt + .body-txt { margin-top: 1.6em; }

.rule { height: 1px; background: var(--hair); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); }
.rule.on { transform: scaleX(1); }

.cap {
  margin-top: 14px;
  font-family: var(--gothic);
  font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16em; line-height: 1.9;
  color: var(--ink-3);
}

/* 落款（文字なしのロゴ） */
.rakkan {
  display: block; width: clamp(42px, 8vw, 58px); height: auto;
  margin-inline: auto;
}

/* --- 出現アニメーション（控えめに、ただし丁寧に） ------------------------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1.15s var(--ease), transform 1.15s var(--ease); }
.rv.on { opacity: 1; transform: none; }

/* 見出しは下からマスクで立ち上げる */
.rv-mask > span {
  display: block;
  clip-path: inset(0 0 105% 0);
  transform: translateY(0.36em);
  transition: clip-path 1.25s var(--ease), transform 1.25s var(--ease);
}
.rv-mask.on > span { clip-path: inset(0 0 -22% 0); transform: none; }
.rv-mask.on > span:nth-child(2) { transition-delay: .1s; }
.rv-mask.on > span:nth-child(3) { transition-delay: .2s; }
.rv-mask.on > span:nth-child(4) { transition-delay: .3s; }

/* 写真は 1.06 からゆっくり静止させる */
.ph { overflow: hidden; }
.ph img { transform: scale(1.06); opacity: 0; transition: transform 1.9s var(--ease), opacity 1.5s var(--ease); }
.ph.on img { transform: none; opacity: 1; }

/* 白ホリ写真を紙に溶かすマスク（四辺フェード） */
.melt {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-mask > span, .ph img, .rule { transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   幕開け
   ========================================================================== */
#curtain {
  position: fixed; inset: 0; z-index: 300;
  background: var(--paper);
  display: grid; place-items: center;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
}
#curtain .mark {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.625rem, 8vw, 2.5rem); letter-spacing: 0.4em;
  color: var(--ink); text-indent: 0.4em;
  opacity: 0; transform: translateY(8px);
  animation: markIn 1.5s var(--ease) .15s forwards;
}
@keyframes markIn { to { opacity: 1; transform: none; } }
#curtain.done { opacity: 0; visibility: hidden; }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 3.4vw, 30px) var(--gutter);
  transition: padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.hd.stuck {
  padding-block: 14px;
  background: rgba(244,242,238,0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--hair-2);
}
.hd-brand {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(0.9875rem, 3.5vw, 1.09375rem); letter-spacing: 0.26em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.hd-brand .sub {
  display: block; margin-top: 8px;
  font-family: var(--gothic); font-weight: 400;
  font-size: 0.875rem; letter-spacing: 0.2em; color: var(--ink-3);
}
.hd-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 38px); }
.hd-nav a {
  font-family: var(--gothic); font-size: 0.90625rem; font-weight: 500;
  letter-spacing: 0.2em; color: var(--ink-2); text-decoration: none;
  padding: 10px 0; position: relative;
}
.hd-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: var(--ink-2); transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease);
}
.hd-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* 進行を示す極細の線 */
#prog { position: fixed; top: 0; left: 0; height: 1px; width: 100%; background: var(--kin); z-index: 250; transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.hero { position: relative; padding-top: clamp(104px, 17vw, 150px); padding-bottom: clamp(40px, 8vw, 80px); }
.hero-stage { position: relative; }

.hero-photo { position: relative; }
.hero-photo img { width: 100%; }

.hero-type { font-family: var(--mincho); color: var(--ink); }
.hero-eyebrow {
  font-family: var(--gothic); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.26em; color: var(--ink-3);
}
.hero-name {
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
}
/* 読みは欧文表記ではなく、ひらがなで。「おか」は店名と同じ音で、伝える意味がある */
.hero-yomi {
  font-family: var(--mincho); font-weight: 500;
  color: var(--kin); letter-spacing: 0.3em;
}

/* ヒーロー脚注（品目・限定・価格） */
.hero-foot { margin-top: clamp(34px, 6vw, 60px); }
.hero-foot .rule { margin-bottom: clamp(20px, 3.4vw, 30px); }
.hero-facts { display: grid; gap: 22px 40px; }
.hero-facts dl { display: flex; align-items: baseline; gap: 16px; }
.hero-facts dt {
  font-family: var(--gothic); font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.24em; color: var(--kin); white-space: nowrap; min-width: 5.6em;
}
.hero-facts dd { font-family: var(--mincho); font-size: clamp(0.9875rem, 3.6vw, 1.09375rem); letter-spacing: 0.1em; color: var(--ink); }
.hero-facts .num { font-family: var(--roman); font-weight: 400; font-size: 1.34em; letter-spacing: 0.02em; }

/* ==========================================================================
   序（リード）
   ========================================================================== */
.lead { padding-block: var(--rhythm); text-align: center; }
.lead-h {
  text-wrap: balance;
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.25rem, 5.4vw, 2.5rem);
  line-height: 2; letter-spacing: 0.14em; color: var(--ink);
}
.lead-h em { font-style: normal; color: var(--shu); }
.lead-txt { margin-top: clamp(28px, 5vw, 46px); }
.lead-txt p { line-height: 2.5; }
.lead .rakkan { margin-top: clamp(34px, 6vw, 54px); }

/* ==========================================================================
   数（未使用。現行に該当する記述がないため本文からは外した）
   ========================================================================== */
.figs { padding-bottom: var(--rhythm); }
.figs-grid { display: grid; gap: 0; }
.fig { padding-block: clamp(26px, 5vw, 40px); border-top: 1px solid var(--hair-2); display: flex; align-items: baseline; gap: clamp(16px, 4vw, 34px); }
.figs-grid .fig:last-child { border-bottom: 1px solid var(--hair-2); }
.fig-n {
  font-family: var(--mincho); font-weight: 500;
  font-size: clamp(2.375rem, 11vw, 4.75rem); line-height: 1; letter-spacing: 0.02em;
  color: var(--ink); min-width: 2.6em;
}
.fig-n small { font-size: 0.32em; letter-spacing: 0.2em; margin-left: 0.5em; color: var(--ink-3); }
.fig-b h3 { font-family: var(--gothic); font-size: 0.96875rem; font-weight: 500; letter-spacing: 0.24em; color: var(--kin); margin-bottom: 8px; }
.fig-b p { font-size: clamp(0.95625rem, 3.6vw, 1.03125rem); line-height: 2.1; color: var(--ink-2); max-width: 26em; }

/* ==========================================================================
   章（写真＋文）
   ========================================================================== */
.chap { padding-bottom: var(--rhythm); }
.chap-head { margin-bottom: clamp(30px, 5vw, 48px); }
.chap-head .label { margin-bottom: clamp(20px, 3.6vw, 30px); }
.chap-txt { margin-top: clamp(28px, 5vw, 44px); }

/* 章番号（縦の細い柱） */
.chap-no {
  font-family: var(--roman); font-weight: 300; font-style: italic;
  font-size: 1.03125rem; letter-spacing: 0.2em; color: var(--kin);
}

/* 箇条（点ではなく罫線で区切る） */
.notes { margin-top: clamp(28px, 4.6vw, 40px); }
.note { padding-block: 18px; border-top: 1px solid var(--hair-2); display: grid; gap: 6px; }
.notes .note:last-child { border-bottom: 1px solid var(--hair-2); }
.note b {
  font-family: var(--mincho); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: 0.1em; color: var(--ink);
}
.note span { font-size: 0.95625rem; line-height: 2; color: var(--ink-2); }

/* ==========================================================================
   仕込み（壱・弐・参）
   ========================================================================== */
.steps { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 0; }
.step { padding-block: clamp(28px, 4.6vw, 40px); border-top: 1px solid var(--hair-2); display: grid; gap: 14px; }
.steps .step:last-child { border-bottom: 1px solid var(--hair-2); }
.step-k {
  font-family: var(--mincho); font-weight: 600; font-size: clamp(1.375rem, 6vw, 1.875rem);
  color: var(--ink); letter-spacing: 0.1em; line-height: 1;
  display: flex; align-items: baseline; gap: 14px;
}
.step-k i {
  font-family: var(--gothic); font-style: normal; font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.22em; color: var(--kin);
}
.step h3 { font-family: var(--mincho); font-weight: 600; font-size: 1.15625rem; letter-spacing: 0.12em; color: var(--ink); }
.step p { font-size: 0.9875rem; line-height: 2.1; color: var(--ink-2); max-width: 30em; }

/* ==========================================================================
   墨の章（唯一の反転面。白の連続に一度だけ間を入れる）
   ========================================================================== */
.sumi { background: var(--ink); color: rgba(255,255,255,0.82); padding-block: clamp(110px, 20vw, 200px); text-align: center; }
.sumi .wrap-narrow { max-width: 1080px; }
.sumi h2 {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.125rem, 5vw, 2.875rem); line-height: 1.95; letter-spacing: 0.1em;
  text-wrap: balance;
  color: #fff;
}
.sumi p {
  margin-top: clamp(26px, 4.4vw, 40px);
  font-family: var(--gothic); font-size: clamp(0.90625rem, 3.4vw, 0.9875rem);
  font-weight: 400; letter-spacing: 0.22em; line-height: 2.4;
  color: rgba(255,255,255,0.62);
}
.sumi .kin-rule { width: 34px; height: 1px; background: var(--kin-lt); margin: clamp(32px,5vw,46px) auto 0; }

/* ==========================================================================
   誂え（同梱一覧）
   ========================================================================== */
.incl { margin-top: clamp(28px, 4.6vw, 40px); }
.incl li { list-style: none; padding-block: 15px; border-top: 1px solid var(--hair-2); display: flex; align-items: baseline; gap: 16px; font-size: 1.01875rem; letter-spacing: 0.06em; }
.incl li:last-child { border-bottom: 1px solid var(--hair-2); }
.incl li::before { content: ''; width: 3px; height: 3px; background: var(--kin); flex: none; transform: translateY(-4px); }

/* ==========================================================================
   贈答の場面
   ========================================================================== */
.scenes { margin-top: clamp(34px, 5vw, 50px); display: grid; gap: 0; }
.scene { padding-block: clamp(22px, 3.6vw, 30px); border-top: 1px solid var(--hair-2); display: grid; gap: 8px; }
.scenes .scene:last-child { border-bottom: 1px solid var(--hair-2); }
.scene h3 { font-family: var(--mincho); font-weight: 600; font-size: clamp(1.09375rem, 4.4vw, 1.1875rem); letter-spacing: 0.12em; color: var(--ink); }
.scene p { font-size: 0.95625rem; line-height: 2; color: var(--ink-2); }

/* ==========================================================================
   承り（唯一のボタン）
   ========================================================================== */
.order { padding-block: var(--rhythm); text-align: center; }
.order-h { font-family: var(--mincho); font-weight: 600; font-size: clamp(1.5rem, 6.4vw, 2.5rem); letter-spacing: 0.14em; line-height: 1.9; color: var(--ink); }
.order-sub { margin-top: clamp(22px, 4vw, 34px); }
.order-price {
  margin-top: clamp(40px, 7vw, 64px);
  font-family: var(--roman); font-weight: 300;
  font-size: clamp(3.125rem, 15vw, 6.5rem); line-height: 1; letter-spacing: 0.01em;
  color: var(--ink);
}
.order-price sup { font-size: 0.34em; vertical-align: 0.95em; letter-spacing: 0; margin-right: 0.16em; }
.order-tax {
  margin-top: 16px;
  font-family: var(--gothic); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.3em; color: var(--ink-3);
}
/* 残数とボタンは縦に積む（インライン要素のままだと横に並んでしまう） */
.order-stock {
  margin: 30px auto 0; display: flex; width: fit-content; align-items: center; gap: 12px;
  font-family: var(--gothic); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.26em; color: var(--kin);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 12px 22px;
}

.btn {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: fit-content; margin: clamp(40px, 6vw, 58px) auto 0;
  min-width: min(420px, 100%); min-height: 66px;
  padding: 0 42px;
  background: var(--ink); color: #fff; text-decoration: none;
  font-family: var(--mincho); font-weight: 600; font-size: 1.09375rem; letter-spacing: 0.24em;
  position: relative; overflow: hidden;
  transition: color .6s var(--ease);
}
.btn span { position: relative; z-index: 1; text-indent: 0.24em; }
.btn i { position: relative; z-index: 1; font-size: 0.8125rem; color: var(--kin-lt); transition: transform .6s var(--ease); }
.btn::before {
  content: ''; position: absolute; inset: 0; background: var(--kin);
  transform: translateY(101%); transition: transform .6s var(--ease);
}
.btn:hover::before { transform: none; }
.btn:hover i { transform: translateX(6px); color: #fff; }
.cart-add-form { margin: 0; }
.cart-add-form .btn,
.cart-add-form .lu-btn,
.cart-add-form .pm-btn {
  border: 0;
  cursor: pointer;
}
.cart-add-form.rv .btn { margin-top: clamp(40px, 6vw, 58px); }
.order-note { margin-top: clamp(26px, 4vw, 34px); font-family: var(--gothic); font-size: 0.875rem; line-height: 2.3; letter-spacing: 0.08em; color: var(--ink-3); }

/* ==========================================================================
   仕様表
   ========================================================================== */
.spec { padding-bottom: var(--rhythm); }
.spec-table { width: 100%; border-collapse: collapse; margin-top: clamp(30px, 5vw, 44px); }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding-block: 18px; border-top: 1px solid var(--hair-2); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 1px solid var(--hair-2); }
.spec-table th {
  font-family: var(--gothic); font-size: 0.96875rem; font-weight: 500; letter-spacing: 0.18em;
  color: var(--kin); white-space: nowrap; padding-right: 28px; width: 8.5em; line-height: 2.6;
}
.spec-table td { font-size: 0.9875rem; line-height: 2.1; color: var(--ink-2); }

/* 問い */
.qa { margin-top: clamp(30px, 5vw, 44px); }
.qa details { border-top: 1px solid var(--hair-2); }
.qa details:last-of-type { border-bottom: 1px solid var(--hair-2); }
.qa summary {
  list-style: none; cursor: pointer;
  padding-block: 22px; padding-right: 40px; position: relative;
  font-family: var(--mincho); font-weight: 600; font-size: 1.03125rem; letter-spacing: 0.08em; color: var(--ink);
  line-height: 1.9;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after, .qa summary::before {
  content: ''; position: absolute; right: 4px; top: 50%; background: var(--kin);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.qa summary::before { width: 13px; height: 1px; transform: translateY(-50%); }
.qa summary::after  { width: 1px; height: 13px; right: 10px; transform: translateY(-50%); }
.qa details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.qa .ans { padding-bottom: 26px; font-size: 0.95625rem; line-height: 2.2; color: var(--ink-2); max-width: 40em; }

/* ==========================================================================
   店
   ========================================================================== */
.store { padding-bottom: var(--rhythm); }
.store-copy { margin-top: clamp(34px, 5.6vw, 52px); text-align: center; }
.store-h { text-wrap: balance; font-family: var(--mincho); font-weight: 600; font-size: clamp(1.125rem, 4.6vw, 2rem); letter-spacing: 0.14em; line-height: 2; color: var(--ink); }
.store-txt { margin-top: 22px; }
.link-q {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(30px, 4.6vw, 42px);
  padding-bottom: 8px; border-bottom: 1px solid var(--hair);
  font-family: var(--gothic); font-size: 0.90625rem; font-weight: 500; letter-spacing: 0.22em;
  color: var(--ink); text-decoration: none;
  transition: border-color .5s var(--ease), color .5s var(--ease);
}
.link-q i { font-size: 0.78125rem; color: var(--kin); transition: transform .5s var(--ease); }
.link-q:hover { border-color: var(--ink); }
.link-q:hover i { transform: translateX(5px); }

/* ==========================================================================
   フッター
   ========================================================================== */
/* 中央揃え。承認版（トップ・御嘉とも）がこの形 */
.ft { border-top: 1px solid var(--hair-2); padding-block: clamp(48px, 7vw, 72px) 80px; text-align: center; }
.ft-in { display: grid; justify-items: center; }
.ft-brand { font-family: var(--mincho); font-weight: 600; font-size: 1.09375rem; letter-spacing: 0.28em; color: var(--ink); }
.ft-brand .sub { display: inline-block; margin-left: 0.6em; font-family: var(--en); font-weight: 400; font-size: 1.0625rem; letter-spacing: 0.18em; color: var(--ink-3); }
.ft-info { margin-top: 12px; font-size: 0.925rem; line-height: 2.1; color: var(--ink-2); }
.ft-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-bottom: clamp(28px, 4vw, 40px); }
.ft-nav a { font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.12em; color: var(--ink-3); text-decoration: none; padding-block: 6px; }
.ft-nav a:hover { color: var(--ink); }
.ft-pay { margin-top: 18px; font-family: var(--gothic); font-size: 0.90625rem; letter-spacing: 0.08em; line-height: 2.1; color: var(--ink-3); }
/* Cormorant Garamond は数字がオールドスタイル（高さが揃わず、下に落ちる字がある）。
   年号が読みにくくなるので、ここはゴシックで組む */
.ft-copy { margin-top: clamp(28px, 4vw, 40px); font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.16em; color: var(--ink-3); }

/* ==========================================================================
   スマホ専用：下部のご注文バー
   PCには出さない。白地＋一本線だけで、アプリのような帯にしない
   ========================================================================== */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: rgba(250,249,246,0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair);
  transform: translateY(102%); transition: transform .65s var(--ease);
}
.dock.on { transform: none; }
.dock-p { font-family: var(--roman); font-size: 1.5rem; font-weight: 400; color: var(--ink); line-height: 1; }
.dock-p small { display: block; margin-top: 6px; font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.2em; color: var(--ink-3); }
.dock a {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px; background: var(--ink); color: #fff;
  font-family: var(--mincho); font-weight: 600; font-size: 0.9875rem; letter-spacing: 0.14em;
  text-decoration: none; text-indent: 0.14em; white-space: nowrap;
}
.dock a i { font-size: 0.78125rem; color: var(--kin-lt); }

/* ==========================================================================
   ── スマートフォン（〜767px）：縦組みは使わず、写真を主役に縦に流す
   ========================================================================== */
@media (max-width: 767px) {
  .hd-nav a.nav-order { display: none; }

  .hero { padding-top: 96px; }
  .hero-eyebrow { text-align: center; }
  .hero-name { font-size: clamp(3.875rem, 22vw, 6rem); text-align: center; margin-top: 22px; text-indent: 0.14em; }
  .hero-yomi { font-size: 0.925rem; text-align: center; margin-top: 14px; text-indent: 0.3em; }
  /* 写真は画面幅いっぱいに逃がす（版面から出す） */
  .hero-photo { margin-top: 26px; margin-inline: calc(var(--gutter) * -1); }
  .hero-facts { gap: 16px; }
  .hero-facts dt { min-width: 5.2em; font-size: 0.875rem; }

  .lead-h { font-size: clamp(1.3125rem, 6.2vw, 1.75rem); line-height: 2.1; }
  .lead-txt p { font-size: 1.01875rem; line-height: 2.4; }
  .lead-txt br { display: none; }  /* PC用の改行を殺してスマホで自然に折る */

  .fig { flex-direction: column; gap: 10px; align-items: flex-start; }
  .fig-n { min-width: 0; }

  .chap-photo { margin-inline: calc(var(--gutter) * -1); }
  .chap-photo .cap { padding-inline: var(--gutter); }

  .sumi h2 br { display: block; }

  .spec-table th, .spec-table td { display: block; width: auto; padding-right: 0; }
  .spec-table th { border-bottom: 0; padding-bottom: 4px; padding-top: 20px; line-height: 1.8; }
  .spec-table td { border-top: 0; padding-top: 0; padding-bottom: 20px; }
  .spec-table tr:last-child td { border-bottom: 1px solid var(--hair-2); }

  .btn { width: 100%; min-width: 0; }
  .dock { display: flex; }
  /* 承りバーに隠れないぶんの逃げ */
  .ft { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   ── タブレット以上（768px〜）
   ========================================================================== */
@media (min-width: 768px) {
  body { line-height: 2.2; }

  /* ヒーロー：写真を右に寄せ、余白に縦組みの題字を置く */
  .hero-stage { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.35fr); align-items: center; gap: clamp(20px, 4vw, 60px); }
  /* 一画面のなかに、題字・写真・価格までを収める */
  .hero { padding-top: clamp(96px, 12vw, 116px); padding-bottom: clamp(30px, 4vw, 44px); }
  .hero-stage { height: min(58svh, 520px); }
  .hero-photo { height: 100%; }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

  /* 縦組みの柱を右から左へ立てる。
     writing-mode: vertical-rl のflexでは column が「行の進む向き＝右→左」になる */
  .hero-type { writing-mode: vertical-rl; text-orientation: mixed; justify-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.4vw, 34px); height: 100%; }
  .hero-name    { order: 1; font-size: clamp(4.625rem, 9vw, 8rem); letter-spacing: 0.16em; }
  .hero-yomi    { order: 2; writing-mode: vertical-rl; font-size: 1.03125rem; letter-spacing: 0.32em; margin-top: 4px; }
  .hero-eyebrow { order: 3; writing-mode: vertical-rl; letter-spacing: 0.26em; }

  .hero-foot { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.35fr); gap: clamp(20px, 4vw, 60px); }
  .hero-foot .rule { grid-column: 1 / -1; }
  .hero-facts { grid-column: 2; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(34px, 5vw, 68px); }
  .hero-facts dl { flex-direction: column; gap: 10px; }

  .figs-grid { grid-template-columns: repeat(3, 1fr); }
  .fig { flex-direction: column; align-items: flex-start; gap: 18px; padding-right: clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--hair-2); }
  .fig:not(:last-child) { border-right: 1px solid var(--hair-2); }
  .fig + .fig { padding-left: clamp(20px, 3vw, 40px); }

  /* 章：写真と文を非対称に組む（12段）
     見出しは段幅に収まる級数まで落とす。段からはみ出すと組みが崩れる */
  .split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3.4vw, 52px); align-items: center; }
  .split .chap-photo { grid-column: 1 / span 7; }
  .split .chap-body  { grid-column: 8 / span 5; }
  .split.rev .chap-photo { grid-column: 6 / span 7; grid-row: 1; }
  .split.rev .chap-body  { grid-column: 1 / span 5; grid-row: 1; }
  .split .h-sec { font-size: clamp(1.1875rem, 2.4vw, 2.0625rem); line-height: 1.85; }
  .chap-txt { margin-top: clamp(26px, 3vw, 38px); }

  .steps { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .step { border-bottom: 1px solid var(--hair-2); padding-right: clamp(22px, 3vw, 44px); }
  .step:not(:last-child) { border-right: 1px solid var(--hair-2); }
  .step + .step { padding-left: clamp(22px, 3vw, 44px); }

  .scenes { grid-template-columns: repeat(2, 1fr); column-gap: clamp(36px, 5vw, 80px); }
  .scenes .scene:nth-last-child(2) { border-bottom: 1px solid var(--hair-2); }

}

@media (min-width: 1100px) {
  .fig-n { font-size: clamp(3.5rem, 4.6vw, 4.5rem); }
}

/* ==========================================================================
   品書メニュー
   ・線は自前の1pxで引く（既製のアイコンは太くて他の要素と釣り合わない）
   ・開くと紙一枚に切り替わる。半透明の上に重ねるとどうしても安く見える
   ・実装フェーズでは共通CSSへ切り出す
   ========================================================================== */
.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 2px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--gothic); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.2em; color: var(--ink-2);
  position: relative; z-index: 220;
  transition: color .4s var(--ease);
}
.menu-btn:hover { color: var(--ink); }
.menu-btn-lines { display: block; width: 24px; height: 11px; position: relative; flex: none; }
.menu-btn-lines i {
  position: absolute; left: 0; width: 100%; height: 1px; background: var(--ink);
  transition: transform .6s var(--ease);
}
.menu-btn-lines i:nth-child(1) { top: 0; }
.menu-btn-lines i:nth-child(2) { bottom: 0; }
body.nav-open .menu-btn-lines i:nth-child(1) { transform: translateY(5px) rotate(20deg); }
body.nav-open .menu-btn-lines i:nth-child(2) { transform: translateY(-5px) rotate(-20deg); }

.nav-panel {
  position: fixed; inset: 0; z-index: 210;
  background: var(--paper);
  display: grid; align-content: center;
  padding: max(104px, 15vh) var(--gutter) 56px;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s;
}
body.nav-open { overflow: hidden; }
body.nav-open .nav-panel { opacity: 1; visibility: visible; }

.nav-inner { width: 100%; max-width: 880px; margin-inline: auto; }
.nav-list { list-style: none; }
.nav-list li { border-top: 1px solid var(--hair-2); }
.nav-list li:last-child { border-bottom: 1px solid var(--hair-2); }
.nav-list a {
  display: flex; align-items: baseline; gap: clamp(12px, 3vw, 28px); flex-wrap: wrap;
  padding-block: clamp(19px, 3.2vw, 28px);
  text-decoration: none;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
body.nav-open .nav-list a { opacity: 1; transform: none; }
body.nav-open .nav-list li:nth-child(1) a { transition-delay: .10s; }
body.nav-open .nav-list li:nth-child(2) a { transition-delay: .17s; }
body.nav-open .nav-list li:nth-child(3) a { transition-delay: .24s; }
body.nav-open .nav-list li:nth-child(4) a { transition-delay: .31s; }
body.nav-open .nav-list li:nth-child(5) a { transition-delay: .38s; }
.nav-list .n {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.4375rem, 6.2vw, 2.0625rem); letter-spacing: 0.16em; color: var(--ink);
  transition: color .4s var(--ease);
}
.nav-list .r { font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.14em; color: var(--ink-3); }
.nav-list a:hover .n { color: var(--kin); }

.nav-foot {
  margin-top: clamp(34px, 5.4vw, 52px);
  display: grid; gap: 14px; justify-items: start;
  opacity: 0; transition: opacity .7s var(--ease) .42s;
}
body.nav-open .nav-foot { opacity: 1; }
.nav-tel {
  font-family: var(--roman); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  font-size: clamp(1.5rem, 6vw, 1.875rem); letter-spacing: 0.04em; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 12px;
}
.nav-tel i { font-size: 0.48em; color: var(--kin); }
.nav-note { font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.1em; line-height: 1.9; color: var(--ink-3); }
.nav-ext {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 11px;
  padding-bottom: 8px; border-bottom: 1px solid var(--hair);
  font-family: var(--gothic); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.18em;
  color: var(--ink); text-decoration: none;
}
.nav-ext i { font-size: 0.6875rem; color: var(--kin); }

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-list a, .nav-foot, .menu-btn-lines i { transition: none !important; }
}


/* ヘッダーは z-index でスタッキングコンテキストを作るため、
   中のボタンだけを持ち上げてもパネルの下に潜る。開いている間はヘッダーごと前へ出す */
body.nav-open .hd { z-index: 230; }
body.nav-open .hd.stuck { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ==========================================================================
   屋号の組みと、スマホのヘッダー配置
   ・「肉料理 おか PREMIUM」は改行せず一行に
   ・スマホは左にメニュー、中央に屋号（現行サイトと同じ並び）
   ========================================================================== */
.hd-brand .sub {
  display: inline-block; margin-top: 0; margin-left: 0.6em;
  font-family: var(--en); font-weight: 400;
  font-size: 1.0625rem; letter-spacing: 0.18em; color: var(--ink-3);
  vertical-align: 0.06em;
}
.ft-brand .sub {
  display: inline-block; margin-top: 0; margin-left: 0.6em;
  font-family: var(--en); font-weight: 400;
  font-size: 1.0625rem; letter-spacing: 0.18em; color: var(--ink-3);
  vertical-align: 0.06em;
}

@media (max-width: 767px) {
  /* 左：メニュー ／ 中央：屋号 ／ 右：余白（左右を 1fr で釣り合わせて中央を保つ） */
  .hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
  .hd-nav  { grid-column: 1; grid-row: 1; justify-self: start; }
  .hd-brand { grid-column: 2; grid-row: 1; justify-self: center; text-align: center; }
  /* 幅が足りないので、スマホでは線だけにする */
  .menu-btn-txt { display: none; }
  .menu-btn { gap: 0; padding: 0 6px; }
  .hd-brand { font-size: clamp(1rem, 4.6vw, 1.09375rem); letter-spacing: 0.08em; }
  .hd-brand .sub { font-size: 1rem; letter-spacing: 0.14em; margin-left: 0.55em; }
}

/* 現行の文章に合わせて足したもの */
.lead-eyebrow { font-family: var(--gothic); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.26em; color: var(--kin); margin-bottom: clamp(20px,3.4vw,30px); }
.order-eyebrow { font-family: var(--gothic); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.26em; color: var(--kin); margin-bottom: clamp(18px,3vw,26px); }
.store-eyebrow { font-family: var(--gothic); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.26em; color: var(--kin); margin-bottom: clamp(16px,2.6vw,22px); }
.hitsu-detail { margin-top: clamp(40px,6vw,64px); }
.hitsu-detail .spec-table { margin-top: 0; }
.note b { display: block; }

/* ==========================================================================
   熨斗の指定
   現行サイトと同じ項目（種類／名入れ／掛け方／数量）。
   ブラウザ標準の見た目を捨て、罫線と余白で組み直している。
   ========================================================================== */
.noshi { margin: clamp(34px,5vw,46px) auto 0; width: min(560px, 100%); border: 0; text-align: left; }
.noshi-legend { width: 100%; padding: 0; }

/* 「熨斗をつける」チェック */
.noshi-toggle {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; cursor: pointer;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding-block: 4px;
  font-family: var(--mincho); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: 0.12em; color: var(--ink);
}
.noshi-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.noshi-box {
  flex: none; width: 18px; height: 18px;
  border: 1px solid rgba(23,20,15,0.34); position: relative;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.noshi-box::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .3s var(--ease);
}
.noshi-toggle:has(input:checked) .noshi-box { background: var(--shu); border-color: var(--shu); }
.noshi-toggle:has(input:checked) .noshi-box::after { transform: rotate(45deg) scale(1); }
.noshi-toggle:has(input:focus-visible) .noshi-box { box-shadow: 0 0 0 3px rgba(156,58,40,0.18); }
.noshi-toggle .opt { font-family: var(--gothic); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.1em; color: var(--ink-3); }

/* 展開する詳細 */
.noshi-detail {
  display: grid; gap: clamp(20px,3vw,26px);
  padding-top: clamp(22px,3.4vw,30px);
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .45s var(--ease), max-height .55s var(--ease), padding-top .45s var(--ease);
}
.noshi.on .noshi-detail { opacity: 1; max-height: 900px; }
.noshi.on { }

.nf { display: grid; gap: 9px; }
.nf > label { font-family: var(--gothic); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; color: var(--ink-2); }
.nf .hint { font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.06em; color: var(--ink-3); }

/* 選択と入力：角丸も影も使わず、一本の罫線で */
.nf select, .nf input[type="text"] {
  width: 100%; min-height: 54px; padding: 12px 14px;
  background: transparent; border: 1px solid var(--hair); border-radius: 0;
  font-family: var(--serif); font-size: 1.03125rem; letter-spacing: 0.06em; color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: border-color .35s var(--ease);
}
.nf select {
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.nf select:focus, .nf input[type="text"]:focus { outline: 2px solid var(--kin); outline-offset: -1px; border-color: transparent; }
.nf input::placeholder { color: rgba(23,20,15,0.56); }

/* 数量 */
.qty { display: flex; align-items: stretch; width: fit-content; border: 1px solid var(--hair); }
.qty button {
  width: 54px; min-height: 54px; background: none; border: 0; cursor: pointer;
  font-size: 1.1875rem; line-height: 1; color: var(--ink);
  transition: background .3s var(--ease);
}
.qty button:hover { background: rgba(23,20,15,0.04); }
.qty button:disabled { color: rgba(23,20,15,0.55); cursor: default; }
.qty input {
  width: 62px; border: 0; border-inline: 1px solid var(--hair); background: transparent;
  text-align: center; font-family: var(--roman); font-variant-numeric: lining-nums;
  font-size: 1.3125rem; color: var(--ink); -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-note { margin-top: 9px; font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.06em; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .noshi-detail, .noshi-box, .noshi-box::after { transition: none !important; }
}
.order-ship { margin-top: 12px; font-family: var(--gothic); font-size: 0.875rem; line-height: 1.9; letter-spacing: 0.06em; color: var(--ink-3); }

/* ご注意（商品ごとの条件。共通ポリシーには置かない） */
.cautions { list-style: none; margin-top: clamp(24px,4vw,34px); }
.cautions li { padding-block: clamp(18px,3vw,24px); border-top: 1px solid var(--hair-2); font-size: clamp(1rem,4.1vw,1.0625rem); line-height: 2; color: var(--ink-2); }
.cautions li:last-child { border-bottom: 1px solid var(--hair-2); }
.cautions b { display: block; margin-bottom: 6px; font-family: var(--mincho); font-weight: 600; font-size: clamp(1.03125rem,4.2vw,1.125rem); letter-spacing: 0.1em; color: var(--ink); }

/* 墨の章の直後。並びで指定する。
   クラスを付ける方法だと、付け忘れた枠（お品の一覧など）で余白が消え、
   見出しが黒地に貼り付いてしまう。何が来ても効くようにしておく。 */
.sumi + section { padding-top: clamp(56px, 9vw, 96px); }

@media (max-width: 767px) {
  /* スマホでは、文章の章は写真が全幅で降りてくるので墨に直結させる。
     中途半端な白帯を作らない。
     お品の一覧は写真ではなく見出しから始まるので、余白は残す。 */
  .sumi + .chap { padding-top: 0; }
  /* スマホでは .split が縦積みになり gap が効かない。
     写真のキャプションと次の見出しが密着していた */
  .split .chap-body { margin-top: clamp(36px, 7vw, 46px); }
}

/* ==========================================================================
   複数の品を1ページに並べるとき（御嘉・竹・梅）
   ・肉の産地と部位だけが違う。共通の説明は1度しか出さない
   ・比べて選ぶものなので、並べて見せる
   ========================================================================== */

/* --- お品の一覧 ---------------------------------------------------------- */
.lineup { padding-bottom: var(--rhythm); }
.lineup-list { margin-top: clamp(34px, 5.4vw, 52px); display: grid; gap: clamp(30px, 5vw, 44px); }
.lu { display: grid; gap: clamp(16px, 2.6vw, 22px); }
.lu-photo { overflow: hidden; }
.lu-photo img { width: 100%; }
.lu-photo .slider { margin-top: 0; }
.lu-photo .slider-ctrl { margin-top: 10px; }
.lu-photo .photos { margin: 0; }
.lu-name {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.375rem, 5.6vw, 1.75rem); letter-spacing: 0.14em; line-height: 1.5; color: var(--ink);
}
.lu-name span { margin-left: 0.7em; font-size: 0.46em; font-weight: 500; letter-spacing: 0.14em; color: var(--kin); }
.lu-origin { margin-top: 10px; font-size: clamp(1rem, 4.1vw, 1.0625rem); line-height: 2; color: var(--ink-2); }
.lu-weight { font-family: var(--gothic); font-size: 0.90625rem; letter-spacing: 0.1em; color: var(--ink-3); }
.lu-price {
  margin-top: 14px; font-family: var(--roman); font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1; font-size: clamp(1.5rem, 6vw, 1.875rem); line-height: 1; color: var(--ink);
}
.lu-price small { margin-left: 12px; font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.16em; color: var(--ink-3); }
.lu-stock {
  margin-top: 14px; font-family: var(--gothic); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.18em; color: var(--kin);
}
.lu-stock.off { color: var(--shu); }
/* 文字数が増えたので字間をわずかに詰め、左右の余白を可変にする。
   「承る」は店の側の言葉で、押したら何が起きるのか伝わらなかった */
.lu-btn {
  margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 clamp(22px, 3.4vw, 34px); background: var(--ink); color: #fff; text-decoration: none;
  font-family: var(--mincho); font-weight: 600; font-size: 1.03125rem; letter-spacing: 0.16em;
  text-indent: 0.16em; white-space: nowrap;
  transition: opacity .4s var(--ease);
}
.lu-btn:hover { opacity: 0.82; }
.lu-btn i { font-size: 0.8125rem; }
.lu-more {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 11px;
  padding-bottom: 7px; border-bottom: 1px solid var(--hair);
  font-family: var(--gothic); font-size: 0.90625rem; font-weight: 500; letter-spacing: 0.18em;
  color: var(--ink); text-decoration: none; transition: border-color .5s var(--ease);
}
.lu-more i { font-size: 0.75rem; color: var(--kin); }
.lu-more:hover { border-color: var(--ink); }

/* --- 品ごとの仕様表 ------------------------------------------------------ */
/* 以前は3品を列に並べた比較表にしていた。
   狭い画面では .spec-table の th/td を display:block にして縦積みにするため、
   比較表では「品名」の見出しの下に3品ぶんの値がそのまま続き、
   どれがどの品のものか分からなくなっていた。
   品ごとに1つの表を組み、広い画面でだけ横に並べる。 */
.spec-cols { margin-top: clamp(30px, 5vw, 44px); display: grid; gap: clamp(34px, 5vw, 44px); }
.spec-col-h {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.0625rem, 4.2vw, 1.1875rem);
  letter-spacing: 0.12em; color: var(--ink); line-height: 1.6; margin: 0;
}
.spec-cols .spec-table { margin-top: 14px; }

/* 仕様表の下の承りボタン。一覧のものと同じ形で、幅だけ列いっぱいに広げる。
   ここまで読んだ方に、一覧まで戻らせないため */
.spec-col .cart-add-form { display: block; }
.spec-btn {
  margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 0 20px;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  font-family: var(--mincho); font-weight: 600; font-size: 1.03125rem; letter-spacing: 0.16em;
  text-indent: 0.16em; white-space: nowrap;
  transition: opacity .4s var(--ease);
}
.spec-btn:hover { opacity: 0.82; }
.spec-btn i { font-size: 0.8125rem; }
.spec-off {
  margin-top: 20px; font-family: var(--gothic); font-size: 0.9375rem;
  letter-spacing: 0.08em; color: var(--shu);
}

/* どの品でも同じ項目をまとめた表。品ごとの表の下に1つだけ置く */
.spec-common { margin-top: clamp(38px, 6vw, 52px); }
.spec-common .spec-table { margin-top: 14px; }

@media (min-width: 768px) {
  .spec-cols { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
}

/* 品ごとのご注意の見出し */
.caution-for {
  margin-top: clamp(30px, 5vw, 44px);
  font-family: var(--mincho); font-weight: 600; font-size: clamp(1.09375rem, 4.4vw, 1.25rem);
  letter-spacing: 0.14em; color: var(--ink);
}
.caution-for + .cautions { margin-top: 14px; }

/* --- 承りの一覧（複数の品） ---------------------------------------------- */
.order-list { margin-top: clamp(34px, 5.4vw, 50px); text-align: left; }
.or {
  display: grid; gap: 16px;
  padding-block: clamp(24px, 4vw, 34px);
  border-top: 1px solid var(--hair);
}
.order-list .or:last-child { border-bottom: 1px solid var(--hair); }
.or-name { font-family: var(--mincho); font-weight: 600; font-size: clamp(1.1875rem, 4.8vw, 1.375rem); letter-spacing: 0.14em; color: var(--ink); }
.or-origin { margin-top: 8px; font-size: 0.96875rem; line-height: 1.9; color: var(--ink-2); }
.or-limit { margin-top: 8px; font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.12em; color: var(--kin); }
.or-price {
  font-family: var(--roman); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  font-size: clamp(1.5rem, 6vw, 1.875rem); line-height: 1; color: var(--ink);
}
.or-price small { margin-left: 10px; font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.16em; color: var(--ink-3); }
.or-off {
  margin-top: 14px; font-family: var(--gothic); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.2em; color: var(--shu);
}
/* 一覧の中に置く小さい承りボタン */
.btn.sm {
  margin: 14px 0 0; min-width: 0; min-height: 54px; padding: 0 30px;
  font-size: 1rem; letter-spacing: 0.2em;
}

@media (min-width: 768px) {
  .lineup-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 44px); }
  .lu { align-content: start; }

  .or { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 48px); }
  .or-r { text-align: right; }
  .btn.sm { margin-left: auto; }
}

/* ==========================================================================
   写真を並べる章（photos）
   ・現行ページのスライダーに当たるもの。JSは使わず、並べて全部見せる
   ・竹・梅の比較写真もここに置ける
   ========================================================================== */
.photos-sec { padding-bottom: var(--rhythm); }
.photos { display: grid; gap: clamp(18px, 3vw, 30px); }
.photos .pf { margin: 0; }
.photos .ph { overflow: hidden; }
.photos img { width: 100%; }
.photos .cap {
  margin-top: 12px; font-family: var(--gothic); font-size: 0.875rem;
  letter-spacing: 0.08em; line-height: 1.9; color: var(--ink-3);
}

/* 題字の下に置く一文（現行ページのキャッチ） */
.hero-copy {
  margin-top: clamp(20px, 3.4vw, 30px); max-width: 24em;
  font-family: var(--serif); font-size: clamp(1.03125rem, 4.2vw, 1.15625rem);
  line-height: 2.2; letter-spacing: 0.06em; color: var(--ink-2);
}
/* 承りの前置き */
.order-lead {
  margin: clamp(20px, 3.4vw, 28px) auto 0; max-width: 30em;
  font-size: clamp(1.03125rem, 4.2vw, 1.125rem); line-height: 2.2; color: var(--ink-2);
}

@media (min-width: 768px) {
  .photos.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photos.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   スライダー（商品ごとの写真）
   ・グループ共通の写真は並べて全部見せる。商品ごとは品数だけ繰り返されるので、
     縦に伸びないようスライダーにする
   ・横スクロールで動く。JSが動かなくても、指でなぞれば全部見られる
   ========================================================================== */
.slider { margin-top: clamp(30px, 5vw, 44px); }
.slider-track {
  display: flex; gap: clamp(14px, 2.4vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider .sl { margin: 0; flex: 0 0 100%; scroll-snap-align: center; }
.slider .sl .ph { overflow: hidden; }
.slider .sl img { width: 100%; }
.slider .cap {
  margin-top: 12px; font-family: var(--gothic); font-size: 0.875rem;
  letter-spacing: 0.08em; line-height: 1.9; color: var(--ink-3);
}

/* 矢印は写真の上に重ねる。枠の外に一列で置くと、狭い場所では
   その行のぶんだけ写真が小さくなる。送る操作は写真の上にあるほうが迷わない。
   写真の色は一定でないので、白い下地を敷いて矢印が沈まないようにする */
.slider-stage { position: relative; }
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--hair); cursor: pointer;
  color: var(--ink); font-size: 0.875rem;
  transition: background .35s var(--ease), border-color .35s var(--ease), opacity .35s var(--ease);
}
.slider-btn.prev { left: clamp(8px, 1.6vw, 14px); }
.slider-btn.next { right: clamp(8px, 1.6vw, 14px); }
.slider-btn:hover { background: #fff; border-color: var(--ink); }
.slider-btn[disabled] { opacity: 0.38; cursor: default; }
/* 点は写真の下に、中央で */
.slider-dots {
  display: flex; justify-content: center; gap: 9px;
  margin-top: clamp(12px, 2vw, 16px);
}
.slider-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hair); transition: background .4s var(--ease);
}
.slider-dots span.on { background: var(--kin); }

/* 隣をのぞかせない。枚数が何枚でも、1枚を枠いっぱいに同じ大きさで見せる。
   続きがあることは、写真の上の矢印と下の点で示す。
   のぞかせる形は、狭い場所で主役の1枚が小さくなり、
   左右の切れ端がそろわず落ち着かなかった。画面の幅を問わず同じ扱いにする */
@media (prefers-reduced-motion: reduce) {
  .slider-track { scroll-behavior: auto; }
}

/* ==========================================================================
   品の見出し（1ページに複数の品を並べたとき）
   ・小見出しに品名を足すやり方だと、章に小見出しが無いとき点だけが残る
   ・品の変わり目は、罫線で挟んだ見出しではっきり示す
   ========================================================================== */
.prod-mark { padding-top: var(--rhythm); padding-bottom: clamp(30px, 5vw, 46px); scroll-margin-top: 90px; }
.pm {
  display: grid; gap: clamp(16px, 2.6vw, 24px);
  padding-block: clamp(26px, 4vw, 38px);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair);
}
.pm-name {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.625rem, 6.6vw, 2.375rem); letter-spacing: 0.16em; line-height: 1.4; color: var(--ink);
}
.pm-name span { margin-left: 0.8em; font-size: 0.42em; font-weight: 500; letter-spacing: 0.14em; color: var(--kin); }
.pm-origin { margin-top: 12px; font-size: clamp(1rem, 4.1vw, 1.09375rem); line-height: 2; color: var(--ink-2); }
.pm-price {
  font-family: var(--roman); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  font-size: clamp(1.625rem, 6.4vw, 2rem); line-height: 1; color: var(--ink);
}
.pm-price small { margin-left: 12px; font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.16em; color: var(--ink-3); }
.pm-btn {
  margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 clamp(22px, 3.4vw, 34px); background: var(--ink); color: #fff; text-decoration: none;
  font-family: var(--mincho); font-weight: 600; font-size: 1.03125rem; letter-spacing: 0.16em;
  text-indent: 0.16em; white-space: nowrap;
  transition: opacity .4s var(--ease);
}
.pm-btn:hover { opacity: 0.82; }
.pm-btn i { font-size: 0.8125rem; }
.pm-off { margin-top: 14px; font-family: var(--gothic); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.2em; color: var(--shu); }

/* split の写真の段に入るスライダーは、余白を段に合わせる */
.chap-photo .slider { margin-top: 0; }
.chap-photo .slider .sl { flex-basis: 100%; }
.chap-photo .photos .cap, .chap-photo .slider .cap { margin-top: 12px; }

@media (min-width: 768px) {
  .pm { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(24px, 4vw, 56px); }
  .pm-r { text-align: right; }
}

/* 工程の写真は、その説明の上に置く（現行サイトと同じ組み方）。
   まとめて下に並べると、どの写真がどの工程か結び付かない */
.steps.with-ph .step { padding-top: clamp(22px, 3.4vw, 32px); }
.step-ph { margin: 0 0 clamp(16px, 2.4vw, 22px); }
.step-ph img { width: 100%; height: auto; display: block; }

/* 章ごとの写真位置。元画像は変えず、この掲載箇所の枠内だけで移動・拡大する */
.block-photo-frame {
  aspect-ratio: var(--photo-ratio, 4 / 3);
  overflow: hidden;
  background: var(--paper);
}
.block-photo-media {
  display: block; width: 100%; height: 100%;
  transform: scale(var(--photo-z, 1));
  transform-origin: var(--photo-x, 50%) var(--photo-y, 50%);
}
.block-photo-frame img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: var(--photo-x, 50%) var(--photo-y, 50%);
}

/* ==========================================================================
   序：店内の写真に題字を重ねる（2026-09-18）

   handoff-gokka-v5 / _deploy/preview/index.html の D案に合わせた。
   ・写真は position:fixed で敷きっぱなしにし、本編がその上をせり上がる
   ・写真はスクロールに合わせて薄れ、わずかに寄る（JS で opacity と scale を動かす）
   ・白文字を写真に乗せるので、上下に黒のグラデーションを敷いて可読性を確保する
   ========================================================================== */
/* z-index を負にして、あらゆる内容より後ろに置く。
   0 にして本編を前に出す書き方だと、祖先に stacking context ができた途端に
   写真が前へ出てしまう。後ろに固定しておけば、その事故が起きない。
   地色は body ではなく .page が持つので、透けるのは opening の範囲だけになる。 */
.openshot {
  position: fixed; inset: 0; z-index: -1;
  will-change: opacity, transform; transform-origin: center 42%;
}
.openshot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
/* 白い題字を写真に乗せるための下地。
   v5 の見本より濃くしている。実寸では題字が庭の窓（写真で一番明るい場所）に
   重なり、薄い膜では白が埋もれて読めなかったため。
   ・1枚目：上下を締める縦のグラデーション
   ・2枚目：題字が置かれる右側だけを追加で落とす
   左側の炭火とカウンターは明るさを保ちたいので、全面を一律に暗くはしない。 */
.openshot::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.06) 38%, rgba(0,0,0,.46) 100%);
}

.opening {
  position: relative; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-inline: var(--gutter);
}
.opening__stack { display: flex; justify-content: flex-end; }
.opening__mark  { display: flex; flex-direction: column; align-items: center; }
.opening__title {
  writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; color: #fff;
  font-size: max(3rem, min(24vw, 22svh, 7rem)); letter-spacing: .2em; line-height: 1; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,.9), 0 2px 26px rgba(0,0,0,.8);
}
.opening__rule {
  width: 1px; height: clamp(28px, 5vh, 46px); background: rgba(255,255,255,.55); margin: 20px 0;
  opacity: 0; animation: okafade 1.2s ease 1.15s forwards;
}
.opening__sub {
  writing-mode: vertical-rl; font-family: var(--mincho); color: #fff;
  font-size: 1.0625rem; letter-spacing: .3em; white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0,0,0,.95), 0 1px 20px rgba(0,0,0,.8);
  opacity: 0; animation: okafade 1.2s ease 1.25s forwards;
}
.opening__copy {
  position: absolute; left: var(--gutter); bottom: 6rem;
  font-family: var(--mincho); font-size: 1.125rem; letter-spacing: .16em; color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.95), 0 1px 20px rgba(0,0,0,.8);
  opacity: 0; animation: okafade 1.2s ease 1.6s forwards;
}
.opening__hint {
  position: absolute; left: var(--gutter); bottom: 3.25rem;
  font-family: var(--roman); font-size: 0.875rem; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
  opacity: 0; animation: okafade 1.2s ease 2s forwards;
}
@keyframes okafade { to { opacity: 1; } }

/* 本編。地色で覆う。ここが不透明であることが、写真を隠す唯一の仕掛け */
.page { position: relative; background: var(--paper); }

/* 冒頭が写真のページでは、body の白地を外す。
   外さないと、負の z-index に置いた写真が白で塗りつぶされる */
body.has-opening { background: #17140F; }

/* フッターは <main> の外にあるため、地色を自分で持たせる。
   持たせないと、上で外した body の白地の代わりに黒地が覗く */
body.has-opening .ft { position: relative; background: var(--paper); }

/* 写真の上にいる間のヘッダー。スクロールして .stuck が付いたら元の黒文字へ戻る */
body.has-opening .hd {
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
}
body.has-opening .hd:not(.stuck) .hd-brand,
body.has-opening .hd:not(.stuck) .hd-brand .sub,
body.has-opening .hd:not(.stuck) .hd-nav a,
body.has-opening .hd:not(.stuck) .menu-btn { color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,.6); }
body.has-opening .hd:not(.stuck) .menu-btn-lines i { background: #fff; }
body.has-opening .hd:not(.stuck) .hd-nav a::after { background: #fff; }
body.has-opening .hd.stuck { background: rgba(255,255,255,0.90); }

/* 題字のすぐ下に来る「お品・価格」。冒頭が全画面になったぶん、上の余白を詰める */
body.has-opening .hero { padding-top: clamp(40px, 7vw, 72px); }
body.has-opening .hero-photo { display: none; }

@media (prefers-reduced-motion: reduce) {
  .opening__rule, .opening__sub, .opening__copy, .opening__hint { animation: none; opacity: 1; }
}