@charset "utf-8";
/* ==========================================================================
   若狭湾天然活魚料理 大将 — 下層ページ共通スタイル
   TOP（style.css）のデザイン言語を踏襲。生成り × 明朝 × 金のタグライン。
   ========================================================================== */

/* 下層は明るい背景なので、メニューピルを墨色反転に */
.page .menu-button{color:var(--text-strong); border-color:#1f202288; background:rgba(255,251,244,.55)}
.page .menu-button:hover{background:rgba(255,251,244,.85)}
.page .menu-button[aria-expanded="true"]{color:var(--white); border-color:#fffbf4b3; background:rgba(26,28,44,.6)}

/* --------------------------------------------------------------------------
   下層のブランドロゴ（左上・常時表示）
   -------------------------------------------------------------------------- */
.page-brand{position:fixed; top:20px; left:40px; z-index:1090; display:block; width:100px}
.page-brand img{width:100%; height:auto; opacity:.92; filter:drop-shadow(0 2px 10px rgba(10,11,20,.35)) brightness(1); transition:filter .3s, opacity .3s}
.page-brand:hover img{opacity:1}
/* 本文（明るい背景）では黒ロゴへ。filter関数列を揃えて補間可能にする */
body.is-past-head .page-brand img{filter:drop-shadow(0 2px 10px rgba(10,11,20,0)) brightness(0); opacity:.82}
body.is-past-head .page-brand:hover img{opacity:1}
/* JS無効環境は常時黒（旧挙動フォールバック） */
html:not(.js) .page-brand img{filter:brightness(0); opacity:.82}
body.is-nav-open .page-brand img{filter:none}
@media (max-width:767px){ .page-brand{left:20px; width:84px} }

/* --------------------------------------------------------------------------
   コンテナ / セクション
   -------------------------------------------------------------------------- */
.container{max-width:1100px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}
.container--wide{max-width:1300px}
.section{padding:clamp(3rem,7vw,6rem) 0}
.section--tint{background:var(--floral-white); position:relative}
.section--tint::before{content:""; position:absolute; inset:0; z-index:0; background:url("../assets/img/washi-bg.jpg") center/cover; opacity:.3; mix-blend-mode:multiply; pointer-events:none}
.section--tint > *{position:relative; z-index:1}
.section-head{max-width:820px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center}
.section-head .tagline{font-size:.9rem; letter-spacing:.06em}
.section-head .h2{margin-top:.6rem}
.section-head__lead{margin-top:1.2rem; line-height:1.9; color:var(--text)}

/* --------------------------------------------------------------------------
   ページヘッダー
   -------------------------------------------------------------------------- */
/* 下層ページヘッダー：関連写真＋黒フィルター＋白文字＋魚線画の透かし（高級感） */
.page-head{
  position:relative; overflow:hidden;
  min-height:clamp(320px,46vh,520px);
  display:flex; align-items:flex-end;
  background:#1a1c2c center/cover no-repeat;
  color:var(--white);
}
.page-head::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,16,26,.26) 0%, rgba(15,16,26,.5) 55%, rgba(15,16,26,.82) 100%);
}
.page-head__fish{
  position:absolute; right:-3%; bottom:-8%; width:min(44vw,420px); z-index:1;
  opacity:.12; filter:brightness(0) invert(1); pointer-events:none;
}
.page-head__inner{
  position:relative; z-index:2; width:100%;
  max-width:1120px; margin:0 auto;
  padding:0 clamp(1.25rem,4vw,2.6rem) clamp(1.9rem,4vw,3.4rem);
}
.breadcrumb{display:flex; flex-wrap:wrap; gap:.4em; font-size:.78rem; letter-spacing:.06em; color:rgba(255,255,255,.72); margin-bottom:1.2rem}
.breadcrumb a{color:rgba(255,255,255,.72); text-decoration:none; transition:color .2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb [aria-current]{color:rgba(255,255,255,.92)}
.breadcrumb__sep{opacity:.5}
.page-head .tagline{font-size:.9rem; letter-spacing:.2em; color:#e6d6a0}
.page-title{
  font-size:clamp(2rem,4.6vw,3.2rem); font-weight:400; line-height:1.32; letter-spacing:.06em;
  margin:.6rem 0 0; color:var(--white); text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.page-lead{margin-top:1.2rem; max-width:42rem; line-height:2; color:rgba(255,255,255,.9)}
.page-lead em{color:#e6d6a0; font-style:normal}

/* --------------------------------------------------------------------------
   本文プロース
   -------------------------------------------------------------------------- */
.prose{max-width:44rem; line-height:2.05}
.prose p{margin:0 0 1.3em}
.prose em{font-style:normal; color:var(--gold); font-weight:400}
.lead-line{font-size:1.25rem; font-weight:200; line-height:1.8; letter-spacing:.06em; color:var(--text-strong)}

/* 画像 + 文章の交互スプリット */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; margin:clamp(2rem,5vw,3.5rem) 0}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.split__body .tagline{font-size:.85rem}
.split__body h3,.split__body h2.split__body-title--sm,.split__body-title{font-weight:200; letter-spacing:.04em; margin:.4rem 0 1rem; line-height:1.4}
.split__body h3,.split__body h2.split__body-title--sm{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.split__body-title{font-size:clamp(1.4rem,2.6vw,2rem)}
.split__body-title--lg{font-size:clamp(1.5rem,2.8vw,2.2rem); margin:.4rem 0 1.1rem}
.split__body p{line-height:2; color:var(--text)}
.split__body em{font-style:normal; color:var(--gold); font-weight:400}
/* 文字入り写真など、切り抜くと成立しない図版は原寸比率のまま出す */
.split__media--natural img{aspect-ratio:auto}

/* 図版 + キャプション */
.figure{margin:0; position:relative}
.figure img{width:100%; object-fit:cover; display:block}
.figure figcaption{font-size:.8rem; color:var(--muted); margin-top:.7rem; letter-spacing:.04em}
.figure--frame img{border:1px solid var(--rule)}

/* --------------------------------------------------------------------------
   献立リスト（コース・単品）
   -------------------------------------------------------------------------- */
.menu-list{display:flex; flex-direction:column; gap:clamp(2rem,4vw,3.5rem)}
.menu-item{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(1.2rem,3vw,2.5rem);
  align-items:center; padding-bottom:clamp(2rem,4vw,3.5rem); border-bottom:1px solid var(--rule);
}
.menu-item:last-child{border-bottom:0}
.menu-item:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.menu-item:nth-child(even) .menu-item__media{order:2}
.menu-item__media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.menu-item__name{font-size:clamp(1.3rem,2.4vw,1.75rem); font-weight:400; letter-spacing:.04em; margin:0 0 .3rem; line-height:1.4}
.menu-item__price{font-size:1.05rem; color:var(--gold); margin:0 0 1rem; letter-spacing:.04em}
.menu-item__price .yen{font-weight:400}
/* --muted(#7a7568)はtint背景#e5e1d5で3.5:1とAA(4.5:1)未満。価格補足は少し暗い#625d4b(約5:1)で可読性確保 */
.menu-item__price small{color:#625d4b; font-size:.82rem; margin-left:.4em}
.menu-item__desc{line-height:1.95; color:var(--text); margin:0}
.tags{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem}
.tag{
  font-size:.72rem; letter-spacing:.08em; color:var(--navy);
  border:1px solid #b7b1a0; border-radius:100px; padding:.25em .9em;
}

/* --------------------------------------------------------------------------
   鍋コース表（横スクロール可）
   -------------------------------------------------------------------------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.5rem 0; border:1px solid var(--rule)}
/* 表が画面幅を超える端末では横スクロールできることを示す（stickyで常に左端に見える） */
@media (max-width:620px){
  .table-wrap::after{
    content:"※ 表は横にスクロールできます";
    position:sticky; left:0; display:inline-block;
    padding:.5rem .9rem .55rem; font-size:.72rem; letter-spacing:.06em; color:var(--muted);
  }
  :lang(en) .table-wrap::after{content:"Swipe sideways to see the full table"}
  :lang(zh-Hant) .table-wrap::after{content:"※ 表格可左右滑動"}
}
.price-table{width:100%; border-collapse:collapse; min-width:560px; font-size:.92rem}
.price-table caption{text-align:left; padding:.9rem 1rem; font-size:.85rem; color:var(--muted); caption-side:bottom}
.price-table th,.price-table td{padding:.85rem 1rem; text-align:center; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule)}
.price-table thead th{background:var(--navy); color:var(--white); font-weight:400; letter-spacing:.04em}
.price-table tbody th{text-align:left; background:var(--floral-white); font-weight:400; white-space:nowrap}
.price-table td:last-child,.price-table th:last-child{border-right:0}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:0}
.price-table .num{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   ギャラリー
   -------------------------------------------------------------------------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.5rem,1.5vw,1rem)}
.gallery--2{grid-template-columns:repeat(2,1fr)}
.gallery figure{margin:0}
.gallery img{width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--floral-white)}
.gallery--wide img{aspect-ratio:4/3}
/* メニュー表は読ませるための画像。3/4 に切ると横が47%欠けて品名も価格も読めなくなるので、
   画像本来の比率のまま全面を出す（.gallery img の aspect-ratio を打ち消す） */
.gallery--board img{aspect-ratio:auto; height:auto; object-fit:contain}
.gallery figcaption{font-size:.76rem; color:var(--muted); margin-top:.5rem}

/* --------------------------------------------------------------------------
   店内・席カード
   -------------------------------------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2rem)}
.card{display:flex; flex-direction:column}
.card__media{position:relative; overflow:hidden}
.card__media img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__name{font-size:1.2rem; font-weight:400; letter-spacing:.04em; margin:1rem 0 .5rem}
.card__desc{font-size:.9rem; line-height:1.9; color:var(--text); margin:0}

/* --------------------------------------------------------------------------
   FAQ（AI/Gemini対策：質問に明快に答える）
   -------------------------------------------------------------------------- */
.faq{max-width:820px; margin:0 auto}
/* .faq__item 系の基本スタイルは style.css に集約（TOPの .top-faq と共通） */

/* FAQ：集約ページへの導線 */
.faq__more{max-width:820px; margin:1.8rem auto 0; text-align:center}
.faq__more a{color:var(--gold); text-decoration:none; font-size:.92rem; letter-spacing:.06em; border-bottom:1px solid var(--gold); padding-bottom:.2em; transition:opacity .2s}
.faq__more a:hover{opacity:.7}

/* FAQ：カテゴリ見出し＋ページ内目次（/faq 集約ページ） */
.faq-toc{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; max-width:820px; margin:0 auto clamp(2rem,4vw,3rem)}
.faq-toc a{
  font-size:.82rem; letter-spacing:.06em; color:var(--navy); text-decoration:none;
  border:1px solid #b7b1a0; border-radius:100px; padding:.4em 1.1em; transition:background-color .2s,color .2s;
}
.faq-toc a:hover{background:var(--navy); color:var(--white); border-color:var(--navy)}
.faq-cat{max-width:820px; margin:clamp(2.5rem,5vw,4rem) auto 0}
.faq-cat:first-of-type{margin-top:0}
.faq-cat__title{
  display:flex; align-items:baseline; gap:1rem;
  font-size:1.2rem; font-weight:400; letter-spacing:.1em; color:var(--text-strong); margin:0 0 .6rem;
}
.faq-cat__title .tagline{font-size:.75rem}
.faq-cat__title::after{content:""; flex:1; height:1px; background:var(--rule); align-self:center}

/* インフォ表（アクセス・予約の基本情報） */
.info-list{max-width:820px; margin:0 auto; border-top:1px solid var(--rule)}
.info-list > div{display:grid; grid-template-columns:9.5em 1fr; gap:1rem; padding:1.15rem .4rem; border-bottom:1px solid var(--rule)}
.info-list dt{font-size:.82rem; letter-spacing:.14em; color:var(--gold); padding-top:.2em}
.info-list dd{margin:0; line-height:1.95; color:var(--text)}
.info-list dd a{color:var(--gold)}
.info-list dd strong{font-weight:400; color:var(--text-strong)}
@media (max-width:640px){
  .info-list > div{grid-template-columns:1fr; gap:.2rem}
}

/* 地図埋め込み */
.map-embed{position:relative; width:100%; aspect-ratio:16/9; border:1px solid var(--rule); margin:0 0 2rem}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media (max-width:640px){ .map-embed{aspect-ratio:4/3} }

/* 手順リスト（予約の流れ） */
.steps{max-width:820px; margin:0 auto; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:1.4rem; list-style:none}
.steps li{counter-increment:step; display:flex; gap:1.2rem; align-items:flex-start}
.steps li::before{
  content:counter(step,decimal-leading-zero); flex:none;
  width:2.4em; height:2.4em; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:var(--gold); letter-spacing:.04em; margin-top:.15em;
}
.steps h3{font-size:1.05rem; font-weight:400; letter-spacing:.05em; margin:0 0 .3rem; color:var(--text-strong)}
.steps p{margin:0; line-height:1.9; color:var(--text); font-size:.95rem}

/* お知らせ一覧 */
.news-list{max-width:780px; margin:0 auto; border-top:1px solid var(--rule)}
.news-item{display:block; padding:1.4rem .4rem; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit; transition:background-color .2s}
a.news-item:hover{background:var(--floral-white)}
.news-item__meta{display:flex; gap:1rem; align-items:center; margin-bottom:.4rem}
.news-item__date{font-size:.82rem; letter-spacing:.08em; color:var(--muted)}
.news-item__cat{font-size:.72rem; letter-spacing:.08em; color:var(--navy); border:1px solid #b7b1a0; border-radius:100px; padding:.2em .9em}
.news-item__title{font-size:1.1rem; font-weight:400; letter-spacing:.04em; line-height:1.6; margin:0}
.news-item__excerpt{font-size:.9rem; line-height:1.9; color:var(--text); margin:.4rem 0 0}
/* 本日のおすすめ バナー（wakasa メニュー表の上） */
.today-banner{max-width:760px; margin:0 auto 2.6rem; padding:clamp(1.6rem,3.5vw,2.6rem); text-align:center; background:#fff; border:1px solid var(--rule); border-radius:10px}
.today-banner .h2{margin:.2rem 0 0}
.today-banner__status{display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin:.9rem 0 .2rem; font-size:.98rem; letter-spacing:.05em; color:var(--text-strong)}
.today-banner__badge{background:var(--navy); color:#fff; font-size:.7rem; letter-spacing:.14em; padding:.24em .85em; border-radius:100px}
.today-banner__lead{max-width:34em; margin:.4rem auto 1.5rem; font-size:.9rem; line-height:1.9; color:var(--muted)}
.today-banner__cta{margin:0 auto}
#menu-board{scroll-margin-top:84px}
#menu-board-grid{scroll-margin-top:84px}

/* --------------------------------------------------------------------------
   CTA バンド（予約）
   -------------------------------------------------------------------------- */
.cta{background:var(--navy); color:var(--white); text-align:center; padding:clamp(2.5rem,6vw,4.5rem) 1.25rem}
.cta .tagline{color:#c9c3a6; font-size:.85rem}
.cta__title{font-size:clamp(1.5rem,3vw,2.2rem); font-weight:200; letter-spacing:.06em; margin:.6rem 0 1.2rem; line-height:1.4}
.cta__tel{display:inline-block; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:.04em; color:var(--white); text-decoration:none}
.cta__tel:hover{opacity:.85}
.cta__note{font-size:.85rem; color:#c9c3a6; margin-top:.8rem; line-height:1.8}
.cta__actions{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:1.6rem}
.button{
  display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.8rem;
  border:1px solid var(--white); color:var(--white); text-decoration:none; font-size:.9rem; letter-spacing:.06em;
  transition:background-color .25s, color .25s;
}
.button:hover{background:var(--white); color:var(--navy)}
.button--fill{background:var(--white); color:var(--navy)}
.button--fill:hover{opacity:.85}

/* --------------------------------------------------------------------------
   メディア（記事）
   -------------------------------------------------------------------------- */
.article{max-width:780px; margin:0 auto clamp(2.5rem,5vw,4rem); padding-bottom:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--rule)}
.article:last-child{border-bottom:0}
.article__kicker{font-size:.82rem; letter-spacing:.1em; color:var(--gold); margin-bottom:.6rem}
.article h3{font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:200; line-height:1.45; letter-spacing:.03em; margin:0 0 1.2rem}
.article p{line-height:2.05; margin:0 0 1.1em}
.article blockquote{margin:1.4rem 0; padding:1rem 1.4rem; border-left:2px solid var(--gold); background:var(--floral-white); font-size:.92rem; line-height:2; color:#4a4740}
.article a{color:var(--gold)}
.video-embed{max-width:780px; margin:1.6rem auto; aspect-ratio:16/9; background:#000; overflow:hidden}
.video-embed iframe{width:100%; height:100%; border:0; display:block}
.article__photo{margin:1.6rem 0 0}
.article__photo img{width:100%; height:auto; display:block}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .split,.menu-item,.menu-item:nth-child(even){grid-template-columns:1fr; gap:1.2rem}
  .split--rev .split__media,.menu-item:nth-child(even) .menu-item__media{order:0}
  .cards{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .gallery,.gallery--2{grid-template-columns:1fr 1fr}
}

/* モーション低減 */
@media (prefers-reduced-motion:reduce){
  .card__media img{transition:none}
}


/* --------------------------------------------------------------------------
   下層の演出：reveal ステガー＋パララックス下地
   -------------------------------------------------------------------------- */
.js .cards .card.js-reveal:nth-child(2){transition-delay:.09s}
.js .cards .card.js-reveal:nth-child(3){transition-delay:.18s}
.js .gallery figure.js-reveal:nth-child(3n+2){transition-delay:.08s}
.js .gallery figure.js-reveal:nth-child(3n+3){transition-delay:.16s}
.js .faq-toc.js-reveal a{transition:inherit}

/* パララックス対象は必ずマスクする（ずらし分は scale(1.12) で吸収） */
.split__media,.menu-item__media,.figure--frame{overflow:hidden}
img[data-plx]{will-change:transform; transform:scale(1.12)}
@media (prefers-reduced-motion:reduce){ img[data-plx]{transform:none} }

/* --------------------------------------------------------------------------
   モバイル磨き込み（下層）
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  .page-head{min-height:clamp(260px,52vh,400px)}
  .page-head__fish{width:min(70vw,300px); opacity:.1}
  .breadcrumb{font-size:.72rem; margin-bottom:1.2rem}
  .page-head .tagline{font-size:.85rem}
  .page-title{letter-spacing:.045em}
  .page-lead{font-size:.95rem; line-height:1.95; margin-top:1.1rem}
  .section{padding:3.2rem 0}
  .section-head{margin-bottom:1.9rem}
  .section-head__lead{font-size:.92rem; margin-top:.9rem}
  .cards{gap:1.6rem}
  .card__name{font-size:1.1rem}
  .menu-list{gap:2.4rem}
  .menu-item{padding-bottom:2rem; gap:1rem}
  .menu-item__name{font-size:1.25rem}
  .faq__item summary{font-size:.98rem; padding:1.05rem .2rem; gap:.7rem}
  .faq__answer{padding:0 .2rem 1.2rem 2.1rem; line-height:1.95}
  .faq-cat__title{font-size:1.08rem}
  .faq-toc{gap:.4rem}
  .faq-toc a{font-size:.76rem; padding:.38em .95em}
  .price-table{font-size:.85rem; min-width:520px}
  .price-table th,.price-table td{padding:.7rem .7rem}
  .table-wrap{margin:1.1rem 0}
  .steps{gap:1.1rem}
  .steps li{gap:.9rem}
  .steps h3{font-size:1rem}
  .info-list dd{font-size:.95rem; line-height:1.85}
  .info-list > div{padding:.95rem .2rem}
  .news-item{padding:1.15rem .2rem}
  .article{margin-bottom:2rem; padding-bottom:1.6rem}
  .cta{padding:2.8rem 1.25rem}
  .cta__tel{font-size:2rem}
  .cta__actions{margin-top:1.2rem}
  .faq__more{margin-top:1.4rem}
}
@media (max-width:479px){
  .page-title{font-size:1.72rem}
  .gallery,.gallery--2{gap:.5rem}
  .cta__actions .button{padding:.8rem 1.4rem; font-size:.85rem}
}


/* --------------------------------------------------------------------------
   ライトボックス（画像の全画面表示）
   -------------------------------------------------------------------------- */
.is-zoomable{cursor:zoom-in}
.lightbox{
  position:fixed; inset:0; z-index:1300;
  background:rgba(15,16,26,.94);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s;
  overscroll-behavior:contain;   /* スワイプがブラウザの戻る操作に化けないように */
}
.lightbox.is-open{opacity:1; visibility:visible; pointer-events:auto}
.lightbox img{
  max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-out;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.8);
  opacity:0; transition:opacity .18s ease;
}
.lightbox img.is-in{opacity:1}
/* 複数枚のグループは左右ボタンと枚数表示のぶん余白を広げる */
.lightbox.is-multi{padding-inline:clamp(4rem,10vw,6.5rem); padding-bottom:clamp(3.2rem,7vw,4.5rem)}
.lightbox__close,.lightbox__nav{
  position:absolute; z-index:2;
  border:1px solid #fffbf480; border-radius:50%;
  background:rgba(26,28,44,.42); color:var(--white);
  display:grid; place-items:center; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(26,28,44,.85); border-color:#fffbf4cc}
.lightbox__close{top:18px; right:18px; width:44px; height:44px}
.lightbox__nav{top:50%; transform:translateY(-50%); width:clamp(44px,6vw,54px); height:clamp(44px,6vw,54px)}
.lightbox__nav--prev{left:clamp(.5rem,2.5vw,2rem)}
.lightbox__nav--next{right:clamp(.5rem,2.5vw,2rem)}
.lightbox svg{
  width:22px; height:22px;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.lightbox__counter{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(.7rem,2.5vw,1.6rem); margin:0;
  color:#fffbf4cc; font-size:.8rem; letter-spacing:.14em; font-variant-numeric:tabular-nums;
}
/* 1枚だけのグループでは送りボタンと枚数表示を出さない（判定は is-multi 一本） */
.lightbox:not(.is-multi) .lightbox__nav,
.lightbox:not(.is-multi) .lightbox__counter{display:none}
/* スマホは送りボタンを下に集約。メニュー表を大きく読ませたいので左右の余白を削る */
@media (max-width:767px){
  .lightbox.is-multi{padding-inline:.8rem; padding-bottom:4.6rem}
  .lightbox__nav{top:auto; bottom:.8rem; transform:none}
  .lightbox__nav--prev{left:calc(50% - 96px)}
  .lightbox__nav--next{right:calc(50% - 96px)}
  .lightbox__counter{bottom:1.75rem}
}
body.is-lightbox-open{overflow:hidden}
.zoom-note{max-width:820px; margin:0 auto 1.2rem; text-align:center; font-size:.8rem; color:var(--muted); letter-spacing:.06em}
.zoom-note::before{content:"⌕ "; color:var(--gold)}

/* ランチメニュー表：平日・土曜／日曜・祝日の見出し付きグループ */
.menu-board-group + .menu-board-group{margin-top:2.4rem}
.menu-board-group__label{text-align:center; font-size:1.05rem; letter-spacing:.14em; margin:0 0 1rem; color:var(--text-strong)}
.menu-board-group__label::before,.menu-board-group__label::after{content:""; display:inline-block; width:2.2rem; height:1px; background:var(--gold); vertical-align:middle; margin:0 .8rem}

/* ランチ：日替わりをInstagramストーリーズで、の告知コールアウト */
.insta-lunch{
  display:flex; align-items:center; gap:.9rem 1.3rem; flex-wrap:wrap;
  max-width:860px; margin:0 auto; padding:1.25rem 1.6rem;
  border:1px solid var(--gold); background:var(--floral-white);
  text-decoration:none; color:var(--text); transition:background-color .2s, transform .2s;
}
.insta-lunch:hover{background:#fff; transform:translateY(-1px)}
.insta-lunch__icon{flex:none; width:34px; height:34px}
.insta-lunch__text{flex:1 1 280px; line-height:1.85; font-size:.95rem}
.insta-lunch__text b{color:var(--text-strong); letter-spacing:.02em}
.insta-lunch__cta{flex:none; color:var(--gold); letter-spacing:.04em; white-space:nowrap; font-size:.92rem}
@media (max-width:600px){ .insta-lunch{padding:1.1rem 1.2rem} .insta-lunch__cta{width:100%} }

/* --------------------------------------------------------------------------
   お品書き（テキスト版・AI/検索向け）
   -------------------------------------------------------------------------- */
.menu-text{max-width:820px; margin:0 auto}
.menu-text > p.note{line-height:1.9; margin:1rem 0 0}
.menu-text details{border:1px solid var(--rule); background:var(--floral-white); margin-bottom:.8rem}
.menu-text summary{
  list-style:none; cursor:pointer; padding:1.05rem 1.25rem;
  display:flex; align-items:baseline; gap:1rem;
  font-size:1.02rem; letter-spacing:.06em; color:var(--text-strong);
}
.menu-text summary::-webkit-details-marker{display:none}
.menu-text summary::after{content:"＋"; margin-left:auto; color:var(--gold)}
.menu-text details[open] summary::after{content:"−"}
.price-list{padding:.2rem 1.25rem 1.15rem; margin:0}
.price-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.55rem 0; border-bottom:1px dashed var(--rule)}
.price-row:last-child{border-bottom:0}
.price-row .name{color:var(--text-strong)}
.price-row .desc{display:block; font-size:.78rem; color:var(--muted); margin-top:.2rem; line-height:1.7}
.price-row .price{flex:none; color:var(--gold); letter-spacing:.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:767px){
  .menu-text summary{font-size:.95rem; padding:.9rem 1rem}
  .price-list{padding:.2rem 1rem 1rem}
  .price-row .name{font-size:.95rem}
}

/* --------------------------------------------------------------------------
   コース：季節でセクション順を自動切替（11〜3月=冬の味覚を上／他=通年を上）
   DOMは動かさず CSS order のみで入れ替える（.js-reveal を壊さない）
   -------------------------------------------------------------------------- */
.course-seasons{display:flex; flex-direction:column}
.course-season--winter{order:2}
.course-season--annual{order:1}
.is-winter .course-season--winter{order:1}
.is-winter .course-season--annual{order:2}

.season-badge{
  display:inline-block; margin:.9rem 0 .1rem; padding:.32rem 1.1rem;
  background:var(--navy); color:var(--white);
  font-size:.8rem; letter-spacing:.14em;
}
.menu-item__eyebrow{font-size:.82rem; letter-spacing:.08em; color:var(--gold); margin:0 0 .35rem}

.h3-sub{font-size:clamp(1.2rem,2.2vw,1.6rem); font-weight:400; letter-spacing:.04em; line-height:1.45; margin:0; color:var(--text-strong)}
.section-head--sub{margin-top:clamp(2.6rem,5vw,3.8rem); margin-bottom:clamp(1.4rem,3vw,2rem)}

/* 鍋コース */
.nabe{margin-top:clamp(2.6rem,5vw,4rem)}
.nabe__head{max-width:820px; margin:0 auto clamp(1.5rem,3vw,2.2rem); text-align:center}
.nabe__head .tagline{font-size:.9rem; letter-spacing:.06em}
.nabe__head .h3-sub{margin-top:.5rem}
.nabe__note-inline{
  display:inline-block; font-size:.7rem; letter-spacing:.08em;
  color:var(--white); background:var(--gold);
  padding:.18em .7em; vertical-align:middle; margin-left:.3em;
}
.nabe-tiers{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.2rem);
}
.nabe-tier{border:1px solid var(--rule); padding:1.5rem 1.2rem; text-align:center; background:var(--white)}
.nabe-tier__label{display:inline-block; font-size:.72rem; letter-spacing:.1em; color:var(--gold); margin:0 0 .55rem}
.nabe-tier__name{font-size:1.06rem; font-weight:400; letter-spacing:.03em; margin:0 0 .55rem}
.nabe-tier__price{font-size:1.18rem; color:var(--gold); margin:0 0 .7rem; letter-spacing:.03em; font-variant-numeric:tabular-nums}
.nabe-tier__price small{color:var(--muted); font-size:.72rem; margin-left:.15em}
.nabe-tier__desc{font-size:.85rem; line-height:1.8; color:var(--text); margin:0}
.nabe__foot{max-width:820px; margin:1rem auto 0; font-size:.85rem; color:var(--muted); line-height:1.8; text-align:center}
.annual__foot{text-align:center; margin:clamp(2rem,4vw,3rem) auto 0; color:var(--text); line-height:1.9}
.sourcing-map{max-width:780px; margin:0 auto clamp(2rem,4vw,3rem)}
@media (max-width:767px){
  .nabe-tiers{grid-template-columns:1fr}
}

/* CTA：ネット予約（トレタ）を主導線に、電話は補助 */
.cta__reserve{
  display:inline-block; margin:0 0 1.1rem;
  background:var(--gold); color:var(--white); text-decoration:none;
  padding:1em 2.6em; border-radius:100px;
  font-size:1.05rem; letter-spacing:.06em;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6);
  transition:opacity .25s, transform .25s;
}
.cta__reserve:hover{opacity:.9; transform:translateY(-1px)}
.cta__or{font-size:.82rem; color:#c9c3a6; margin:0 0 .5rem; letter-spacing:.04em}
.cta__or a{color:var(--white); text-decoration:underline; text-underline-offset:2px}
.cta .cta__tel{font-size:clamp(1.3rem,2.6vw,1.7rem)}

/* --------------------------------------------------------------------------
   共通ユーティリティ（inline style の置き換え先）
   -------------------------------------------------------------------------- */
.link-gold{color:var(--gold)}
.note{font-size:.8rem; color:var(--muted)}
.button--dark{border-color:var(--navy); color:var(--navy)}
.button--dark.button--fill{background:var(--navy); border-color:var(--navy); color:var(--white)}