/* =========================================================
   つきじ治作 — dish（お料理一覧）ページ固有スタイル
   抽出元: dish/index.html の <style>
   命名: 旧 rs-* → dish-* / body.dish-day → body.page-dish
   url(): css/pages/ 基準（../../images/...）
   ========================================================= */
/* ════════════════════════════════════════════════════════════
   ヘッダー — dish ページ専用色オーバーライド（スクロール前 = 黒系）
   ════════════════════════════════════════════════════════════ */
body.page-dish{background:#f4efe3;}
/* ローダー — dish ページの和紙背景に合わせる */
body.page-dish .loader{background:#f4efe3 !important;}
body.page-dish .loader .loader__logo-img{filter:brightness(0);animation-name:loaderLogoBlurInBlack;}
body.page-dish .loader .loader__line{background:#1f1b16 !important;}
body.page-dish .header:not(.is-scrolled){
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}
body.page-dish .header:not(.is-scrolled)::before,
body.page-dish .header:not(.is-scrolled)::after{display:none !important;}
body.page-dish .header:not(.is-scrolled) .header-tel,
body.page-dish .header:not(.is-scrolled) .header-nav-link,
body.page-dish .header:not(.is-scrolled) .lang-en,
body.page-dish .header:not(.is-scrolled) .lang-select-v2__toggle,
body.page-dish .header:not(.is-scrolled) .header-sns a{
  color:#1f1b16 !important;
}
body.page-dish .header:not(.is-scrolled) svg{stroke:#1f1b16;}
body.page-dish .header:not(.is-scrolled) svg[fill="currentColor"]{fill:#1f1b16;}
body.page-dish .header:not(.is-scrolled) .menu-toggle span{background:#1f1b16 !important;}
body.page-dish .header:not(.is-scrolled) .header__logo-img{filter:brightness(0) saturate(100%);}
body.page-dish .header:not(.is-scrolled) .lang-select-v2__caret{border-top-color:#1f1b16;}

/* スクロール時ヘッダー — クリーム調 (lifeevent/wedding と同じ方針) */
body.page-dish .header.is-scrolled{
  background:rgba(244,239,227,.82) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  backdrop-filter:blur(14px) !important;
}
/* スクロール時もテキスト・ロゴをダークに保持（クリーム背景上で読める色） */
body.page-dish .header.is-scrolled .header-tel,
body.page-dish .header.is-scrolled .header-nav-link,
body.page-dish .header.is-scrolled .lang-en,
body.page-dish .header.is-scrolled .lang-select-v2__toggle,
body.page-dish .header.is-scrolled .header-sns a{color:#1f1b16 !important;}
body.page-dish .header.is-scrolled svg{stroke:#1f1b16;}
body.page-dish .header.is-scrolled svg[fill="currentColor"]{fill:#1f1b16;}
body.page-dish .header.is-scrolled .menu-toggle span{background:#1f1b16 !important;}
body.page-dish .header.is-scrolled .header__logo-img{filter:brightness(0) saturate(100%);}
body.page-dish .header.is-scrolled .lang-select-v2__caret{border-top-color:#1f1b16;}
/* フッター — クリーム調 (wedding 準拠) */
body.page-dish .footer{
  background:#ebe3cf;
  color:#1f1b16;
  border-top:.5px solid rgba(120,100,70,.26);
  margin-top:0;
}
body.page-dish .footer__brand .since{color:#6e665b;}
body.page-dish .footer__brand .vert{color:#1f1b16;}
body.page-dish .footer__logo-img{filter:brightness(0) saturate(100%);}
body.page-dish .footer h5{
  color:#1f1b16;
  border-bottom-color:rgba(120,100,70,.26);
}
body.page-dish .footer li{color:#2a251f;}
body.page-dish .footer li a{color:inherit;}
body.page-dish .footer li a:hover{color:#b89665;}
body.page-dish .footer__bottom{
  color:#6e665b;
  border-top-color:rgba(120,100,70,.18);
}
/* Footer cream-mode — new elements (address / CTA cells / SNS) */
body.page-dish .footer__address{color:#2a251f;}
body.page-dish .footer__cta{border-color:rgba(120,100,70,.32);}
body.page-dish .footer__cell{color:#1f1b16;border-bottom-color:rgba(120,100,70,.22);}
body.page-dish .footer__cell:hover{background:rgba(184,150,101,.10);color:#b89665;}
body.page-dish .footer__cell-icon{color:#b89665;}
body.page-dish .footer__cell:hover .footer__cell-icon{color:#8e6e3f;}
body.page-dish .footer__cell-sub{color:#6e665b;}
body.page-dish .footer__sns > a[aria-label]{color:#2a251f;border-color:rgba(120,100,70,.36);}
body.page-dish .footer__sns > a[aria-label]:hover{color:#b89665;border-color:#b89665;background:rgba(184,150,101,.08);}
/* Follow-nav — ダークネイビー (SNS クラスタ + メインバー両方) */
body.page-dish .follow-nav__sns a,
body.page-dish .follow-nav__bar{
  background:#1a2638;
}
/* Menu modal — 地色はページと同じクリーム。配色は style.css の --mm-* が持つ */

/* ════════════════════════════════════════════════════════════
   dish page — Renewed in Ryosaku style (.dish-* scope)
   - 既存 .ds-* / .dn-* は使用しない（全廃棄）
   - パフォーマンス: mask-image / mix-blend-mode / multi-layer gradient 不使用
   - 装飾は最小限・静的・GPU 影響なし
   ════════════════════════════════════════════════════════════ */
.dish-page{
  --dish-bg:#f4efe3;
  --dish-bg-alt:#ebe3cf;
  --dish-bg-warm:#f8f3e5;
  --dish-ink:#1f1b16;
  --dish-sub:#6e665b;
  --dish-line:rgba(120,100,70,.26);
  --dish-line-soft:rgba(120,100,70,.14);
  --dish-gold:#b89665;
  --dish-navy:#243349;
  --dish-navy-deep:#1a2638;
  /* Aligned with top-level index.html (style.css :root tokens) */
  --dish-serif-display:var(--serif-display);
  --dish-serif:var(--serif);
  --dish-en:var(--en-serif);
  --dish-en-sans:var(--en-serif);
  --dish-sec-py:clamp(120px,14vw,200px);
  --dish-wrap:1440px;
  --dish-gutter:clamp(24px,8vw,120px);
  background-color:var(--dish-bg);
  /* 和紙テクスチャ — 微細なノイズを CSS で生成（軽量、外部画像不要） */
  background-image:
    radial-gradient(circle at 23% 17%,rgba(120,95,55,.04) 0,transparent 1px),
    radial-gradient(circle at 67% 43%,rgba(120,95,55,.035) 0,transparent 1.2px),
    radial-gradient(circle at 38% 78%,rgba(120,95,55,.04) 0,transparent 1px),
    radial-gradient(circle at 81% 88%,rgba(120,95,55,.03) 0,transparent 1.4px),
    radial-gradient(circle at 12% 62%,rgba(120,95,55,.035) 0,transparent 1.1px);
  background-size:7px 7px,11px 11px,9px 9px,13px 13px,8px 8px;
  color:var(--dish-ink);
  font-family:var(--dish-serif);
  font-weight:400;
  line-height:1.9;
  letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}
.dish-page *{box-sizing:border-box;}
.dish-page a{color:inherit;text-decoration:none;}
.dish-page img{display:block;max-width:100%;}

/* ── Wrap & section base ── */
.dish-sec{padding:var(--dish-sec-py) 0;position:relative;overflow:hidden;}
.dish-wrap{max-width:var(--dish-wrap);margin:0 auto;padding:0 var(--dish-gutter);position:relative;z-index:2;}
.dish-sec--warm{background:var(--dish-bg-warm);}


/* ── 装飾画像 — 各セクション背景に配置（静的、軽量） ── */
.dish-bgdeco{
  position:absolute;
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  z-index:1;
  opacity:.7;
}
/* 実サイズに合わせた正しいアスペクト比 */
.dish-bgdeco--momiji{width:clamp(180px,22vw,320px);aspect-ratio:155/186;background-image:url('../../images/bg/bg-1.png');}
.dish-bgdeco--koi{width:clamp(160px,18vw,280px);aspect-ratio:225/131;background-image:url('../../images/bg/bg-2.png');}
.dish-bgdeco--willow{width:clamp(200px,24vw,360px);aspect-ratio:253/112;background-image:url('../../images/bg/bg-3.png');}
/* 配置 variants */
.dish-bgdeco--tl{top:32px;left:-20px;}
.dish-bgdeco--tr{top:48px;right:-30px;}
.dish-bgdeco--bl{bottom:32px;left:-20px;}
.dish-bgdeco--br{bottom:32px;right:-30px;}


/* bg-1 (momiji) は画面端から始まる配置 */
.dish-bgdeco--momiji.dish-bgdeco--tl,
.dish-bgdeco--momiji.dish-bgdeco--bl{left:0;}
.dish-bgdeco--momiji.dish-bgdeco--tr,
.dish-bgdeco--momiji.dish-bgdeco--br{right:0;}
/* 180度回転 */
.dish-bgdeco--flip{transform:rotate(180deg);}
.dish-bgdeco--flip.dish-bgdeco--cr{transform:translateY(-50%) rotate(180deg);}
.dish-bgdeco--flip.dish-bgdeco--cl{transform:translateY(-50%) rotate(180deg);}
@media(max-width:767px){.dish-bgdeco{opacity:.4;}}

/* ── Section head (title + en + optional more link) ── */
.dish-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:clamp(48px,6vw,80px);}
.dish-head__title{margin:0;font-family:var(--dish-serif-display);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:.22em;color:var(--dish-ink);line-height:1.6;display:flex;align-items:baseline;gap:14px;}
.dish-head__title::before{content:"";width:28px;height:.5px;background:var(--dish-gold);display:inline-block;margin-right:4px;flex-shrink:0;align-self:center;}
.dish-head__en{display:block;margin-top:10px;font-family:var(--dish-en);font-style:italic;font-size:13px;letter-spacing:.2em;color:var(--dish-navy);text-transform:uppercase;font-weight:400;}
.dish-head__more{font-family:var(--dish-serif);font-size:13px;letter-spacing:.18em;color:var(--dish-ink);padding-bottom:6px;border-bottom:.5px solid var(--dish-line);transition:border-color .35s ease,color .35s ease;white-space:nowrap;align-self:flex-end;}
.dish-head__more:hover{color:var(--dish-gold);border-bottom-color:var(--dish-gold);}
.dish-head__more .arrow{margin-left:10px;display:inline-block;transition:transform .35s ease;}
.dish-head__more:hover .arrow{transform:translateX(4px);}
.dish-lead{font-family:var(--dish-serif);font-weight:300;font-size:14px;line-height:2.1;letter-spacing:.08em;color:var(--dish-sub);margin:-32px 0 clamp(40px,5vw,72px);}

/* ════════════════════════════════════════════════════════════
   HERO — 左に縦書き大見出し+リード+CTA、右に大きな料理写真
   ════════════════════════════════════════════════════════════ */
.dishlist-hero{
  min-height:780px;
  height:100vh;
  position:relative;
  padding-top:clamp(90px,10vw,130px);
  overflow:hidden;
  background-image:url('../../images/hero_mizutaki.png');
  background-size:auto 100%;          /* 高さフル */
  background-position:right center;   /* 右寄せ */
  background-repeat:no-repeat;
}
/* 鍋の底直下に伸びる影 — 右に長い楕円の一部（水彩風モノクロ） */
.dishlist-hero::before{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:1;
  right:0;
  bottom:7%;
  width:72%;
  height:3%;
  background:
    radial-gradient(ellipse 90% 100% at 78% 50%,
      rgba(15,10,5,.42) 0%,
      rgba(20,14,8,.28) 22%,
      rgba(25,18,12,.16) 45%,
      rgba(30,22,16,.06) 72%,
      transparent 100%);
  filter:blur(8px);
}
/* 画像の左側を背景クリーム色にフェード — テキストエリアと自然に繋ぐ */
.dishlist-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    /* 左→右へ和紙色フェード */
    linear-gradient(90deg,
      rgba(244,239,227,.92) 0%,
      rgba(244,239,227,.6) 14%,
      rgba(244,239,227,.2) 28%,
      rgba(244,239,227,0) 42%),
    /* 右上に光のハイライト — 右からの照明感 */
    radial-gradient(ellipse 28% 45% at 88% 30%,rgba(255,248,232,.18) 0%,rgba(255,248,232,0) 70%);
}
.dishlist-hero__inner{
  max-width:none;
  width:100%;
  margin:0;
  padding:0 0 0 clamp(60px,8vw,110px);
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  height:100%;
  position:relative;
  z-index:2;
}
.dishlist-hero__copy{position:relative;}
.dishlist-hero__crumb{font-family:var(--dish-en);font-style:italic;font-size:11px;letter-spacing:.32em;color:var(--dish-sub);margin-bottom:36px;text-transform:uppercase;}
.dishlist-hero__crumb a{color:var(--dish-sub);}
.dishlist-hero__crumb .sep{margin:0 10px;color:var(--dish-sub);}
/* 縦書き多列見出し */
.dishlist-hero__title{
  margin:0 0 40px;
  font-family:var(--dish-serif-display);
  font-weight:500;
  color:var(--dish-ink);
  display:flex;
  flex-direction:row-reverse;   /* 右→左 */
  justify-content:flex-end;
  gap:clamp(8px,1.4vw,22px);
  height:auto;
}
.dish-vline{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:clamp(28px,3.2vw,42px);
  letter-spacing:.32em;
  line-height:1.4;
}
.dish-vline .em{color:var(--dish-ink);}
.dishlist-hero__lead{font-family:var(--dish-serif);font-weight:300;font-size:13px;line-height:2.2;letter-spacing:.12em;color:var(--dish-sub);margin:0 0 32px;max-width:360px;}
.dishlist-hero__cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 28px;
  background:transparent;
  border:.5px solid var(--dish-gold);
  font-family:var(--dish-serif);font-size:13px;letter-spacing:.22em;color:var(--dish-ink);
  transition:background .35s ease,color .35s ease,gap .35s ease;
  text-decoration:none;
}
.dishlist-hero__cta:hover{background:var(--dish-gold);color:#fff;gap:20px;}


/* 鍋の底に水彩のモノクロ影（画像下端付近に重ねる） */


/* スマホ用 HERO 画像（テキストの下に配置） — デフォルト非表示、SP のみ表示 */
.dishlist-hero__mobile-photo{display:none;}

@media(max-width:900px){
  .dishlist-hero{height:auto;min-height:0;padding-top:100px;padding-bottom:80px;}
  .dishlist-hero__inner{grid-template-columns:1fr;gap:48px;padding-left:var(--dish-gutter);padding-right:var(--dish-gutter);}
  .dishlist-hero__title{flex-direction:column;align-items:flex-start;gap:8px;}
  .dish-vline{writing-mode:horizontal-tb;text-orientation:mixed;font-size:clamp(22px,6vw,30px);letter-spacing:.16em;}
}

@media(max-width:767px){
  .dishlist-hero{
    height:auto;
    min-height:0;
    padding-top:clamp(96px,22vw,120px);
    padding-bottom:0;
    background-image:none;                /* PC/タブ用の背景画像を消す */
  }
  .dishlist-hero::before,.dishlist-hero::after{display:none;}  /* 影と overlay も消す */
  .dishlist-hero__inner{
    grid-template-columns:1fr;
    gap:32px;
    padding:0;
    width:100%;
    max-width:none;
  }
  .dishlist-hero__copy{
    padding:0 var(--dish-gutter);
    width:100%;
    box-sizing:border-box;
  }
  /* スマホ用の画像（テキストの上に配置） */
  .dishlist-hero__mobile-photo{
    display:block;
    width:100%;
    aspect-ratio:4/3;
    background-image:url('../../images/hero_mizutaki.png');
    background-size:contain;
    background-position:center bottom;
    background-repeat:no-repeat;
    margin-bottom:clamp(24px,5vw,40px);
    order:1;                              /* テキストの上に */
  }
  .dishlist-hero{display:flex;flex-direction:column;}
  .dishlist-hero__inner{order:2;}
}

/* ════════════════════════════════════════════════════════════
   ABOUT — 左に料理写真、右にタイトル+テキスト+リンク
   ════════════════════════════════════════════════════════════ */
.dish-about{padding:clamp(100px,12vw,160px) 0;position:relative;overflow:hidden;}
.dish-about__inner{max-width:var(--dish-wrap);margin:0 auto;padding:0 var(--dish-gutter);display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;}
.dish-about__photo{aspect-ratio:16/10;background-size:cover;background-position:center;}
.dish-about__copy{padding-right:clamp(0px,3vw,40px);}
/* 本文が背景装飾（葉）に被って読みにくくならないよう、内容を装飾より前面に */
.dish-about__inner{position:relative;z-index:2;}
.dish-about .dish-bgdeco{opacity:.25;}
.dish-about__title{margin:0 0 24px;font-family:var(--dish-serif-display);font-weight:500;font-size:clamp(22px,2.4vw,32px);letter-spacing:.22em;color:var(--dish-ink);line-height:1.6;}
.dish-about__en{display:block;font-family:var(--dish-en);font-style:italic;font-size:12px;letter-spacing:.24em;color:var(--dish-navy);margin-bottom:14px;text-transform:uppercase;}
.dish-about__text{font-family:var(--dish-serif);font-weight:300;font-size:14px;line-height:2.2;letter-spacing:.08em;color:var(--dish-sub);margin:0 0 32px;}


.dish-about__link:hover .arrow{transform:translateX(4px);}
.dish-about__link .arrow{transition:transform .35s ease;}
@media(max-width:900px){
  .dish-about__inner{grid-template-columns:1fr;gap:48px;}
  .dish-about__photo{aspect-ratio:16/10;}
}

/* ════════════════════════════════════════════════════════════
   おすすめ会席 — 3カラム
   ════════════════════════════════════════════════════════════ */
.dish-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,64px);}
.dish-course{display:flex;flex-direction:column;}
.dish-course__photo{aspect-ratio:4/3;background-size:cover;background-position:center;margin-bottom:clamp(20px,2vw,28px);transition:opacity .4s ease;}
.dish-course:hover .dish-course__photo{opacity:.88;}
/* 名前と金額は必ず上下に分ける。横に並べると、名前の短いコースだけ金額が同じ行に残る
   （御祝会席が1枚だけ揃わない状態になっていた。2026-09-06 ご指示） */
.dish-course__row{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:14px;}
.dish-course__name{margin:0;font-family:var(--dish-serif-display);font-weight:500;font-size:17px;letter-spacing:.18em;color:var(--dish-ink);}
.dish-course__price{font-family:var(--dish-serif);font-size:15px;letter-spacing:.06em;color:var(--dish-ink);}
.dish-course__price small{font-size:11px;color:var(--dish-sub);margin-left:4px;letter-spacing:.06em;}
.dish-course__desc{font-family:var(--dish-serif);font-weight:300;font-size:13px;line-height:2;letter-spacing:.06em;color:var(--dish-sub);margin:0 0 20px;}
.dish-course__link{align-self:flex-start;margin-top:auto;font-family:var(--dish-serif);font-size:12px;letter-spacing:.2em;color:var(--dish-ink);padding-bottom:6px;border-bottom:.5px solid var(--dish-line);transition:border-color .35s ease,color .35s ease;}
.dish-course__link:hover{color:var(--dish-gold);border-bottom-color:var(--dish-gold);}
.dish-course__link .arrow{margin-left:8px;}
@media(max-width:900px){.dish-courses{grid-template-columns:1fr;gap:48px;}}

/* ════════════════════════════════════════════════════════════
   会席の流れ 7工程
   ════════════════════════════════════════════════════════════ */











/* ════════════════════════════════════════════════════════════
   3カラム横長カード（一品料理・お飲み物・お部屋 相当）
   ════════════════════════════════════════════════════════════ */
/* 3カラム横長カード — 各カードが左テキスト+右写真の2分割 */


.dish-sec--warm .dish-pillar{background:#fbf6e8;}








.dish-pillar__link .arrow{margin-left:6px;}


/* ════════════════════════════════════════════════════════════
   詳細コース — 左右レイアウト（写真 + 詳細）
   ════════════════════════════════════════════════════════════ */
.dish-detail{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:center;margin-bottom:clamp(64px,8vw,128px);}
.dish-detail:last-child{margin-bottom:0;}
.dish-detail--reverse{grid-template-columns:1.1fr 1fr;}
.dish-detail--reverse .dish-detail__photo{order:2;}
.dish-detail--reverse .dish-detail__body{order:1;}
.dish-detail__photo{aspect-ratio:4/3;background-size:cover;background-position:center;}
.dish-detail__body{padding:0 clamp(0px,2vw,24px);}
.dish-detail__kicker{display:block;font-family:var(--dish-en);font-style:italic;font-size:12px;letter-spacing:.22em;color:var(--dish-navy);margin-bottom:14px;text-transform:uppercase;}
.dish-detail__name{margin:0 0 20px;font-family:var(--dish-serif-display);font-weight:500;font-size:clamp(20px,2.2vw,28px);letter-spacing:.2em;color:var(--dish-ink);line-height:1.55;}
.dish-detail__price{font-family:var(--dish-serif);font-size:18px;letter-spacing:.06em;color:var(--dish-ink);margin:0 0 8px;}
.dish-detail__price small{font-size:12px;color:var(--dish-sub);margin-left:6px;letter-spacing:.06em;}
.dish-detail__tiers{margin:0 0 22px;}
.dish-detail__tier{display:flex;align-items:baseline;gap:16px;padding:8px 0;border-bottom:.5px dotted var(--dish-line-soft);}
.dish-detail__tier:last-child{border-bottom:none;}
.dish-detail__tier-label{font-family:var(--dish-serif);font-size:12px;letter-spacing:.1em;color:var(--dish-sub);min-width:80px;}
.dish-detail__tier-price{font-family:var(--dish-serif);font-size:16px;color:var(--dish-ink);}
.dish-detail__desc{font-family:var(--dish-serif);font-weight:300;font-size:13px;line-height:2.1;letter-spacing:.06em;color:var(--dish-sub);margin:0 0 18px;}
.dish-detail__menu{font-family:var(--dish-serif);font-weight:300;font-size:12px;line-height:2;letter-spacing:.08em;color:var(--dish-sub);padding:14px 0;border-top:.5px solid var(--dish-line-soft);border-bottom:.5px solid var(--dish-line-soft);margin:0 0 18px;}
.dish-detail__menu small{font-size:11px;opacity:.85;}
.dish-detail__duration{display:inline-block;padding:4px 14px;font-family:var(--dish-serif);font-size:11px;letter-spacing:.12em;color:var(--dish-sub);border:.5px solid var(--dish-line);margin-bottom:18px;}
.dish-detail__link{display:inline-block;font-family:var(--dish-serif);font-size:12px;letter-spacing:.2em;color:var(--dish-ink);padding-bottom:6px;border-bottom:.5px solid var(--dish-line);transition:color .35s ease,border-color .35s ease;}
.dish-detail__link:hover{color:var(--dish-gold);border-bottom-color:var(--dish-gold);}
.dish-detail__link .arrow{margin-left:8px;}
@media(max-width:900px){
  .dish-detail,.dish-detail--reverse{grid-template-columns:1fr;gap:32px;}
  .dish-detail--reverse .dish-detail__photo{order:0;}
  .dish-detail--reverse .dish-detail__body{order:0;}
}

/* ════════════════════════════════════════════════════════════
   全幅画像（インタースティシャル）
   ════════════════════════════════════════════════════════════ */
.dish-fullphoto{width:100%;height:clamp(280px,48vw,560px);background-size:cover;background-position:center;}

/* ════════════════════════════════════════════════════════════
   テーブル（追加料理・お飲物）
   ════════════════════════════════════════════════════════════ */
.dish-table{width:100%;border-collapse:collapse;}
.dish-table tr{border-bottom:.5px dotted var(--dish-line);}
.dish-table tr:first-child{border-top:.5px solid var(--dish-line);}
.dish-table th,.dish-table td{padding:18px 16px;text-align:left;font-family:var(--dish-serif);font-size:13px;letter-spacing:.06em;vertical-align:top;}
.dish-table th{color:var(--dish-ink);font-weight:500;width:200px;}
.dish-table td{color:var(--dish-sub);font-weight:300;}
.dish-table td:last-child{text-align:right;color:var(--dish-ink);white-space:nowrap;font-family:var(--dish-en);font-style:italic;font-size:15px;}
.dish-table__cat td{padding:32px 0 8px;font-family:var(--dish-en);font-style:italic;font-size:12px;letter-spacing:.22em;color:var(--dish-gold);text-transform:uppercase;font-weight:400;}
.dish-table__cat{border-bottom:none;}
.dish-table__note td{padding:8px 0 24px;font-size:11px;color:var(--dish-sub);font-style:italic;}
.dish-table__note{border-bottom:none;}

/* ════════════════════════════════════════════════════════════
   お土産 3カラム
   ════════════════════════════════════════════════════════════ */
.dish-souvenirs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,56px);}
.dish-souvenir{text-align:left;}
.dish-souvenir__name{margin:0 0 10px;font-family:var(--dish-serif-display);font-weight:500;font-size:15px;letter-spacing:.18em;color:var(--dish-ink);}
.dish-souvenir__desc{font-family:var(--dish-serif);font-weight:300;font-size:13px;line-height:2;letter-spacing:.06em;color:var(--dish-sub);margin:0 0 14px;}
.dish-souvenir__price{font-family:var(--dish-serif);font-size:13px;color:var(--dish-gold);letter-spacing:.06em;}
.dish-souvenidish-after{text-align:center;margin-top:clamp(40px,5vw,64px);}
.dish-souvenidish-after a{font-family:var(--dish-serif);font-size:12px;letter-spacing:.2em;color:var(--dish-ink);padding-bottom:6px;border-bottom:.5px solid var(--dish-line);transition:color .35s ease,border-color .35s ease;}
.dish-souvenidish-after a:hover{color:var(--dish-gold);border-bottom-color:var(--dish-gold);}
@media(max-width:900px){.dish-souvenirs{grid-template-columns:1fr;gap:40px;}}

/* ════════════════════════════════════════════════════════════
   利用案内 + 予約 2カラム（料金注記を統合）
   ════════════════════════════════════════════════════════════ */
.dish-info{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);align-items:stretch;}
.dish-info__card{background:rgba(255,255,255,.5);border:.5px solid var(--dish-line);padding:clamp(36px,4vw,56px);}
.dish-info__title{margin:0 0 28px;font-family:var(--dish-serif-display);font-weight:500;font-size:16px;letter-spacing:.22em;color:var(--dish-ink);text-align:center;}
.dish-info__rows{display:flex;flex-direction:column;gap:0;}
.dish-info__row{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:14px 0;border-bottom:.5px dotted var(--dish-line-soft);font-family:var(--dish-serif);font-size:13px;letter-spacing:.08em;}
.dish-info__row:last-child{border-bottom:none;}
.dish-info__row dt{color:var(--dish-sub);font-weight:400;display:flex;align-items:center;gap:10px;}
.dish-info__row dt .ico{width:14px;height:14px;display:inline-block;color:var(--dish-navy);flex-shrink:0;}
.dish-info__row dd{margin:0;color:var(--dish-ink);font-weight:300;}




.dish-reserve{background:var(--dish-bg-alt);border:.5px solid var(--dish-line);padding:clamp(36px,4vw,56px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.dish-reserve__title{margin:0 0 14px;font-family:var(--dish-serif-display);font-weight:500;font-size:16px;letter-spacing:.22em;color:var(--dish-ink);}
.dish-reserve__lead{font-family:var(--dish-serif);font-weight:300;font-size:13px;line-height:2;letter-spacing:.08em;color:var(--dish-sub);margin:0 0 24px;}
.dish-reserve__tel{display:inline-flex;align-items:center;gap:14px;font-family:var(--dish-en);font-style:italic;font-size:clamp(28px,2.8vw,38px);color:var(--dish-ink);text-decoration:none;margin-bottom:12px;}
.dish-reserve__tel svg{color:var(--dish-navy);}
.dish-reserve__hours{font-family:var(--dish-serif);font-size:12px;letter-spacing:.08em;color:var(--dish-sub);margin-bottom:28px;}
.dish-reserve__btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:18px clamp(28px,3vw,48px);background:transparent;color:var(--dish-ink);font-family:var(--dish-serif);font-size:13px;letter-spacing:.24em;border:.5px solid var(--dish-gold);transition:background .35s ease,color .35s ease,gap .35s ease;text-decoration:none;}
.dish-reserve__btn:hover{background:var(--dish-gold);color:#fff;gap:20px;border-color:var(--dish-gold);}
.dish-reserve__btn .arrow{transition:transform .35s ease;}
.dish-reserve__btn:hover .arrow{transform:translateX(4px);}
@media(max-width:900px){.dish-info{grid-template-columns:1fr;}}
@media(max-width:560px){.dish-info__row{grid-template-columns:1fr;gap:4px;}}

/* ════════════════════════════════════════════════════════════
   ネイビー差し色セクション (bg-4.png 背景)
   ════════════════════════════════════════════════════════════ */
.dish-quote{
  position:relative;
  overflow:hidden;
  padding:clamp(120px,15vw,200px) 0;
  background-color:var(--dish-navy-deep);
  background-image:url('../../images/bg/bg-4.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  text-align:center;
}
.dish-quote::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(20,28,42,.15) 0%,rgba(26,38,56,.25) 60%,rgba(26,38,56,.4) 100%);
  z-index:1;
  pointer-events:none;
}
.dish-quote__inner{
  position:relative;
  z-index:2;
  max-width:720px;
  margin:0 auto;
  padding:0 var(--dish-gutter);
}
.dish-quote__en{
  display:block;
  font-family:var(--dish-en);
  font-style:italic;
  font-size:14px;
  letter-spacing:.28em;
  color:var(--dish-gold-soft,#d6ba85);
  margin-bottom:22px;
  text-transform:uppercase;
}
.dish-quote__title{
  margin:0 0 24px;
  font-family:var(--dish-serif-display);
  font-weight:500;
  font-size:clamp(22px,2.6vw,32px);
  letter-spacing:.22em;
  line-height:1.75;
  color:#f4efe3;
}
.dish-quote__text{
  font-family:var(--dish-serif);
  font-weight:300;
  font-size:14px;
  line-height:2.2;
  letter-spacing:.1em;
  color:rgba(244,239,227,.78);
  margin:0 0 32px;
}
.dish-quote__link{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding-bottom:6px;
  border-bottom:.5px solid #d6ba85;
  font-family:var(--dish-serif);
  font-size:13px;
  letter-spacing:.24em;
  color:#d6ba85;
  text-decoration:none;
  transition:color .35s ease,border-color .35s ease,gap .35s ease;
}
.dish-quote__link:hover{color:#f4efe3;border-bottom-color:#f4efe3;gap:20px;}

/* ════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════ */
.dish-faq{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,80px);row-gap:0;}
.dish-faq__item{border-bottom:.5px solid var(--dish-line);}
.dish-faq__item:nth-child(-n+2){border-top:.5px solid var(--dish-line);}
@media(max-width:767px){
  .dish-faq{grid-template-columns:1fr;}
  .dish-faq__item:nth-child(-n+2){border-top:none;}
  .dish-faq__item:first-child{border-top:.5px solid var(--dish-line);}
}
.dish-faq__item summary{
  list-style:none;cursor:pointer;
  padding:24px 60px 24px 24px;
  position:relative;
  font-family:var(--dish-serif);font-size:14px;letter-spacing:.1em;color:var(--dish-ink);
}
.dish-faq__item summary::-webkit-details-marker{display:none;}
.dish-faq__item summary::before{
  content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-family:var(--dish-en-sans);font-size:18px;color:var(--dish-navy);font-weight:300;
  transition:transform .35s ease;
}
.dish-faq__item[open] summary::before{content:"−";}
.dish-faq__item .ans{margin:0;padding:0 24px 28px;font-family:var(--dish-serif);font-weight:300;font-size:13px;line-height:2.1;letter-spacing:.08em;color:var(--dish-sub);}

/* ════════════════════════════════════════════════════════════
   CTA
   ════════════════════════════════════════════════════════════ */
.dishlist-cta{padding:clamp(120px,14vw,200px) 0;text-align:center;background:var(--dish-bg-alt);position:relative;overflow:hidden;}
.dishlist-cta__en{display:block;font-family:var(--dish-en);font-style:italic;font-size:14px;letter-spacing:.24em;color:var(--dish-navy);text-transform:uppercase;margin-bottom:18px;}
.dishlist-cta__title{margin:0 0 24px;font-family:var(--dish-serif-display);font-weight:500;font-size:clamp(22px,2.6vw,32px);letter-spacing:.22em;color:var(--dish-ink);line-height:1.7;}
.dishlist-cta__lead{font-family:var(--dish-serif);font-weight:300;font-size:14px;line-height:2.2;letter-spacing:.08em;color:var(--dish-sub);margin:0 auto 36px;max-width:560px;}
.dishlist-cta__btn{display:inline-flex;align-items:center;gap:14px;padding:18px 40px;background:transparent;color:var(--dish-ink);font-family:var(--dish-serif);font-size:13px;letter-spacing:.24em;text-decoration:none;border:.5px solid var(--dish-gold);transition:background .35s ease,color .35s ease,gap .35s ease,border-color .35s ease;}
.dishlist-cta__btn:hover{background:var(--dish-gold);color:#fff;gap:20px;border-color:var(--dish-gold);}
.dishlist-cta__btn .arrow{transition:transform .35s ease;}
.dishlist-cta__btn:hover .arrow{transform:translateX(4px);}

/* ════════════════════════════════════════════════════════════
   ※ 装飾 (.dish-bgdeco) は冒頭で定義済み (images/bg/bg-1〜3.png)
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   タブレット (768〜1024px) — 3カラム/詳細レイアウトを再構成
   ════════════════════════════════════════════════════════════ */
@media (min-width:768px) and (max-width:1024px){
  .dish-page{--dish-sec-py:clamp(96px,12vw,160px);}

  /* HERO */
  .dishlist-hero{
    min-height:680px;
    background-size:auto 50%;                              /* タブレットでは画像 50% サイズ */
    background-position:100% clamp(96px,14vw,128px);       /* 右上から、ヘッダー下端に合わせる */
  }
  .dishlist-hero__inner{grid-template-columns:1fr 1.2fr;padding-left:clamp(40px,6vw,80px);}
  .dish-vline{font-size:clamp(22px,3.4vw,34px);letter-spacing:.26em;}
  .dishlist-hero__lead{font-size:12px;}
  /* 影も画像位置に合わせて調整：ヘッダー下 + 画像高さ50% の鍋底直下 */
  .dishlist-hero::before{right:6%;top:calc(clamp(96px,14vw,128px) + 50% - 22px);bottom:auto;width:42%;height:2.2%;}

  /* ABOUT */
  .dish-about__inner{grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,56px);}
  .dish-about__title{font-size:clamp(20px,2.6vw,26px);}

  /* セクション head */
  .dish-head__title{font-size:clamp(20px,2.6vw,26px);}
  .dish-head{margin-bottom:clamp(36px,5vw,60px);}

  /* おすすめ会席 3 → 2 カラム（3番目は中央寄せの幅50%） */
  .dish-courses{grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,48px);}
  .dish-courses > .dish-course:nth-child(3){grid-column:1 / -1;max-width:60%;margin-left:auto;margin-right:auto;}

  /* 詳細コース：早めに 1カラム化 */
  .dish-detail,.dish-detail--reverse{grid-template-columns:1fr;gap:clamp(28px,4vw,40px);margin-bottom:clamp(48px,6vw,80px);}
  .dish-detail--reverse .dish-detail__photo{order:0;}
  .dish-detail--reverse .dish-detail__body{order:0;}
  .dish-detail__name{font-size:clamp(18px,2.4vw,24px);}

  /* 横長 3 → 1 カラム（既存 max-width:1100 と整合） */
  

  /* お土産 3 → 2 カラム */
  .dish-souvenirs{grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,40px);}
  .dish-souvenirs > .dish-souvenir:nth-child(3){grid-column:1 / -1;max-width:55%;margin-left:auto;margin-right:auto;}

  /* テーブル：横スクロール対応 */
  .dish-table th,.dish-table td{padding:14px 12px;font-size:12px;}
  .dish-table th{width:auto;}

  /* 利用案内 2 → 1 カラム + dt 幅縮小 */
  .dish-info{grid-template-columns:1fr;gap:clamp(28px,4vw,40px);}
  .dish-info__row{grid-template-columns:130px 1fr;gap:14px;}
  .dish-info__card,.dish-reserve{padding:clamp(28px,4vw,40px);}

  /* FAQ 2 → 1 カラム（768pxより手前で切替） */
  .dish-faq{grid-template-columns:1fr;column-gap:0;}
  .dish-faq__item:nth-child(-n+2){border-top:none;}
  .dish-faq__item:first-child{border-top:.5px solid var(--dish-line);}

  /* ネイビーセクション */
  .dish-quote{padding:clamp(96px,12vw,160px) 0;}
  .dish-quote__title{font-size:clamp(20px,2.8vw,28px);}

  /* CTA */
  .dishlist-cta{padding:clamp(96px,12vw,160px) 0;}
  .dishlist-cta__title{font-size:clamp(20px,2.8vw,28px);}

  /* 装飾 (bgdeco) を少し小さく */
  .dish-bgdeco--momiji{width:clamp(150px,18vw,260px);}
  .dish-bgdeco--koi{width:clamp(130px,15vw,220px);}
  .dish-bgdeco--willow{width:clamp(170px,20vw,280px);}
}

/* ════════════════════════════════════════════════════════════
   Reveal (re-use existing .reveal class — keep light)
   ════════════════════════════════════════════════════════════ */
.dish-page .reveal{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease;}
.dish-page .reveal.is-in{opacity:1;transform:none;}
/* Remove footer top margin (defaults to 120px in style.css) */
.footer{margin-top:0;}
/* セクション下部の中央CTAボタン（例: 水たき会席の詳細を見る） */
.dish-more{text-align:center; margin-top:44px;}
.dish-more__btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--dish-serif); font-size:13px; letter-spacing:.18em; color:var(--dish-ink); padding:14px 42px; border:.5px solid var(--dish-line); transition:color .35s ease,border-color .35s ease,background .35s ease;}
.dish-more__btn:hover{color:var(--dish-gold); border-color:var(--dish-gold);}
.dish-more__btn .arrow{display:inline-block; transition:transform .35s ease;}
.dish-more__btn:hover .arrow{transform:translateX(4px);}

/* ════════════════════════════════════════════════════════════
   品書き帯 — HERO 直下のセクションアンカー
   縦書きの品書きに見立てた 5 パネル。hover で料理写真＋金罫が伸びる
   ════════════════════════════════════════════════════════════ */
.dish-shinagaki{
  position:relative;
  border-top:.5px solid var(--dish-line);
  border-bottom:.5px solid var(--dish-line);
  background:var(--dish-bg-warm);
}
.dish-shinagaki__list{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--dish-wrap);
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.dish-shinagaki__item{position:relative;}
.dish-shinagaki__item + .dish-shinagaki__item{border-left:.5px solid var(--dish-line-soft);}

.dish-shinagaki__link{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  padding:clamp(30px,3.6vw,46px) 10px clamp(26px,3vw,38px);
  color:var(--dish-ink);
  text-decoration:none;
}
/* 背後の料理写真（和紙色のヴェールを重ねて可読性を確保） */
.dish-shinagaki__photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity .6s ease, transform .9s ease;
}
.dish-shinagaki__photo::after{
  content:""; position:absolute; inset:0;
  /* 文字が乗る中央帯をいちばん濃く。上下は薄めにして写真の気配を残す */
  background:linear-gradient(180deg,rgba(248,243,229,.84) 0%,rgba(248,243,229,.9) 26%,rgba(248,243,229,.9) 74%,rgba(248,243,229,.84) 100%);
}
/* 短冊の両端を上から下へ伸びる金罫 — 品書きの罫線を引く所作 */
.dish-shinagaki__link::before,
.dish-shinagaki__link::after{
  content:""; position:absolute; z-index:1;
  top:0; width:.5px; height:0;
  background:var(--dish-gold);
  transition:height .55s var(--bezier-quart);
}
.dish-shinagaki__link::before{left:0;}
.dish-shinagaki__link::after{right:0;}
.dish-shinagaki__num,
.dish-shinagaki__ja,
.dish-shinagaki__en{position:relative; z-index:2;}

.dish-shinagaki__num{
  font-family:var(--dish-serif-display);
  font-size:12px; letter-spacing:.2em;
  color:var(--dish-sub);
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:.5px solid var(--dish-line-soft);
  transition:color .35s ease, border-color .35s ease;
}
.dish-shinagaki__ja{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--dish-serif-display); font-weight:500;
  font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.26em; line-height:1.5;
  height:clamp(140px,15vw,196px);   /* 文字数が違っても高さを揃える（縦書きなので height が縦幅） */
  text-align:center;                /* 縦書きでは列内の縦方向センタリング */
  transition:letter-spacing .35s ease;
}
.dish-shinagaki__en{
  margin-top:18px;
  font-family:var(--dish-en); font-style:italic;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dish-sub);
  transition:color .35s ease;
}

/* ── hover ── */
.dish-shinagaki__link:hover .dish-shinagaki__photo{opacity:1; transform:scale(1);}
.dish-shinagaki__link:hover::before,
.dish-shinagaki__link:hover::after{height:100%;}
.dish-shinagaki__link:hover .dish-shinagaki__num{color:var(--dish-gold); border-bottom-color:var(--dish-gold);}
.dish-shinagaki__link:hover .dish-shinagaki__ja{letter-spacing:.3em;}
.dish-shinagaki__link:hover .dish-shinagaki__en{color:var(--dish-gold);}
.dish-shinagaki__link:focus-visible{outline:1px solid var(--dish-gold); outline-offset:-4px;}

/* ── アンカー先が固定ヘッダーに潜らないように（rooms.css の scroll-margin-top に倣う） ── */
.dish-page section[id]{scroll-margin-top:clamp(100px,11vw,140px);}
/* .dish-sec は上下に大きな padding を持つため、そのぶん相殺して「見出し」が画面上部に来るようにする */
.dish-page .dish-sec[id]{scroll-margin-top:calc(clamp(100px,11vw,140px) - var(--dish-sec-py));}

/* ── タブレット ── */
@media(max-width:900px){
  .dish-shinagaki__link{padding:clamp(24px,3vw,32px) 6px clamp(20px,2.4vw,28px);}
  .dish-shinagaki__ja{font-size:clamp(14px,2vw,17px); letter-spacing:.2em; height:clamp(120px,17vw,160px);}
  .dish-shinagaki__num{margin-bottom:12px; padding-bottom:10px;}
  .dish-shinagaki__en{margin-top:14px;}
}

/* ── SP：横スクロールの短冊ストリップ ── */
@media(max-width:767px){
  /* HERO は SP で padding-bottom:0 なので、帯との間に余白をつくる */
  .dish-shinagaki{overflow:hidden; margin-top:clamp(28px,7vw,44px);}
  .dish-shinagaki__list{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 var(--dish-gutter);
  }
  .dish-shinagaki__list::-webkit-scrollbar{display:none;}
  /* 4枚目が少し覗く幅にして「横に続く」ことを示す */
  .dish-shinagaki__item{flex:0 0 clamp(88px,26vw,120px); scroll-snap-align:center;}
  .dish-shinagaki__link{padding:26px 4px 22px;}
  /* hover が無いので写真を薄く常設 */
  .dish-shinagaki__photo{opacity:.16; transform:none;}
  .dish-shinagaki__ja{font-size:15px; letter-spacing:.18em; height:118px;}
  .dish-shinagaki__en{margin-top:14px; font-size:9px;}
  /* 右端フェードでスクロール可能を示唆 */
  .dish-shinagaki::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:52px;
    pointer-events:none; z-index:3;
    background:linear-gradient(90deg,rgba(248,243,229,0),rgba(248,243,229,.92) 70%,rgba(248,243,229,.98));
  }
  /* 横スクロールのヒント — 金の二重山形が右へすっと流れて消える。
     style.css の .table-scroll::before と同じ二重山形を、帯に合わせて細い金線に落とした */
  .dish-shinagaki::before{
    content:"";
    position:absolute;
    top:50%; right:9px;
    width:30px; height:30px;
    margin-top:-15px;
    pointer-events:none; z-index:4;
    /* 山形の下に和紙色のハローを敷く。短冊が途中で切れて文字に重なっても濁らない */
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b89665' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M7 5l7 7-7 7'/><path d='M14 5l7 7-7 7'/></svg>") no-repeat center/20px 20px,
      radial-gradient(circle at 50% 50%,rgba(248,243,229,.98) 0 46%,rgba(248,243,229,0) 76%);
    opacity:0;
    animation:dishShinagakiHint 3.4s var(--bezier-quart) infinite;
  }
  /* 一巡したら長く休む — 常時ちらつかせず、思い出したように一度流れる */
  @keyframes dishShinagakiHint{
    0%  {opacity:0;   transform:translateX(-7px);}
    12% {opacity:.9;  transform:translateX(0);}
    34% {opacity:0;   transform:translateX(10px);}
    100%{opacity:0;   transform:translateX(10px);}
  }
}

@media(prefers-reduced-motion:reduce){
  .dish-shinagaki__photo,
  .dish-shinagaki__link::before,
  .dish-shinagaki__link::after,
  .dish-shinagaki__ja{transition:none;}
  .dish-shinagaki::before{animation:none; opacity:.9; transform:none;}
}


/* ════════════════════════════════════════════════════════════
   HERO 新デザイン「流線」 — body.page-dish.dish-hero-stream のときだけ効く
   2026-09-05 追加。切り替えは サイト共通設定 › デザイン
   （このクラスが付かないときは上の従来デザインがそのまま出る）

   和紙クリームの地に、右上から左下へ一本の流れ。その形に写真を切り抜き、
   水たきの鍋は置かない。写真を四角いパネルとして置くのではなく写真自体を
   マスクするのが要で、クリームと写真の間に直線の切り口が生まれない。

   マークアップは従来と同一。鍋と接地の影を使わない案なので、
   空いた2つの面をそのまま流用している：
     .dishlist-hero          自身の背景 … 左の和装飾（柳・紅葉・縦罫）
     .dishlist-hero::before  … 流線に切り抜いた写真（従来は鍋の影）
     .dishlist-hero::after   … 和紙フェード（従来のまま）
   ════════════════════════════════════════════════════════════ */
body.page-dish.dish-hero-stream .dishlist-hero{
  /* 鍋を外し、左の和装飾に差し替える。
     素材はページ下部の .dish-bgdeco と同じ（柳・紅葉）で意匠を揃える。 */
  background-image:
    url('../../images/bg/bg-3.png'),                 /* 柳 — 左下 */
    url('../../images/bg/bg-1.png'),                 /* 紅葉 — 左上 */
    linear-gradient(180deg,                          /* 本文の左に縦罫を一本 */
      transparent 0%,
      rgba(120,100,70,.24) 15%,
      rgba(120,100,70,.24) 74%,
      transparent 100%);
  background-size:
    clamp(210px,23vw,350px) auto,
    clamp(120px,14vw,200px) auto,
    1px 100%;
  background-position:
    -44px 88%,
    -28px 5%,
    clamp(26px,3vw,44px) 0;
  background-repeat:no-repeat;
}
/* 流線に切り抜いた写真（従来は鍋の影） */
body.page-dish.dish-hero-stream .dishlist-hero::before{
  right:auto;bottom:auto;
  inset:0;
  width:auto;height:auto;
  filter:brightness(1.06) saturate(.92) contrast(1.02);
  background:
    url('../../images/bg/dish-hero-chef.jpg') no-repeat;
  /* 主役は板前の手元と器。原画では手と皿が下寄り（縦 56〜85%）にあり、
     帯のベタな面は右上に来るので、拡大したうえで写真を上へ送り、
     箸と皿が帯の中央〜右上に乗るところで止める。顔は帯の外（上）。 */
  background-size:180% auto;
  background-position:52% 100%;
  /* 流線の形（SVG）と、左下へ向かうフェードを掛け合わせる。
     帯が左下までベタで届くとリード文と CTA に被って読めなくなる。 */
  -webkit-mask-image:
    url('../../images/bg/stream-mask.svg'),
    linear-gradient(225deg,#000 0%,#000 42%,rgba(0,0,0,.45) 66%,transparent 84%);
  mask-image:
    url('../../images/bg/stream-mask.svg'),
    linear-gradient(225deg,#000 0%,#000 42%,rgba(0,0,0,.45) 66%,transparent 84%);
  -webkit-mask-size:cover,cover;
  mask-size:cover,cover;
  -webkit-mask-position:center,center;
  mask-position:center,center;
  -webkit-mask-repeat:no-repeat,no-repeat;
  mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* タブレット — HERO が低く横長になるため流線の対角が寝て、帯が画面の
   大半を覆う。デスクトップ用の 225deg フェードでは左下が抜けきらず
   リード文と CTA が写真に乗るので、横方向のフェードに差し替える。 */
@media (min-width:768px) and (max-width:1024px){
  body.page-dish.dish-hero-stream .dishlist-hero::before{
    top:0;
    -webkit-mask-image:
      url('../../images/bg/stream-mask.svg'),
      linear-gradient(100deg,transparent 0%,transparent 48%,rgba(0,0,0,.4) 63%,#000 80%);
    mask-image:
      url('../../images/bg/stream-mask.svg'),
      linear-gradient(100deg,transparent 0%,transparent 48%,rgba(0,0,0,.4) 63%,#000 80%);
  }
  body.page-dish.dish-hero-stream .dishlist-hero{
    background-size:
      clamp(180px,23vw,260px) auto,
      clamp(105px,13vw,155px) auto,
      1px 100%;
    background-position:
      -26px 90%,
      -14px 4%,
      clamp(18px,2.4vw,30px) 0;
  }
}

/* SP — 従来は ::before / ::after を消して __mobile-photo（鍋）だけ出す。
   新デザインは鍋を置かないので、::before（流線）を復活させ、
   __mobile-photo は画像だけ消して「箱」を余白として残す。
   箱ごと消すと本文が帯の中まで繰り上がり、見出しが写真に重なる。 */
@media(max-width:767px){
  body.page-dish.dish-hero-stream .dishlist-hero::before{display:block;}
  body.page-dish.dish-hero-stream .dishlist-hero__mobile-photo{background-image:none;}
  body.page-dish.dish-hero-stream .dishlist-hero::before{
    /* __bg 相当の帯（写真の箱）に高さを合わせ、下端は和紙に溶かす */
    inset:0 0 auto 0;
    height:calc(clamp(96px,22vw,120px) + 75vw);
    -webkit-mask-image:
      url('../../images/bg/stream-mask.svg'),
      linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.45) 88%,transparent 100%);
    mask-image:
      url('../../images/bg/stream-mask.svg'),
      linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.45) 88%,transparent 100%);
  }
  body.page-dish.dish-hero-stream .dishlist-hero{
    /* 左の装飾は本文の真後ろに来るので薄く */
    background-size:
      clamp(150px,40vw,210px) auto,
      clamp(92px,25vw,130px) auto,
      1px 100%;
    background-position:
      -22px 94%,
      -12px 3%,
      clamp(12px,3.4vw,18px) 0;
  }
}