@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; filter:brightness(0) opacity(.82); transition:filter .3s}
.page-brand:hover img{opacity:1}
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)}
.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{
  padding:clamp(6.5rem,12vw,9rem) 0 clamp(2.5rem,5vw,4rem);
  position:relative; overflow:hidden;
}
.page-head__inner{max-width:1100px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}
.breadcrumb{display:flex; flex-wrap:wrap; gap:.4em; font-size:.78rem; letter-spacing:.06em; color:#7a7568; margin-bottom:1.6rem}
.breadcrumb a{color:#7a7568; text-decoration:none; transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb [aria-current]{color:var(--text)}
.breadcrumb__sep{opacity:.5}
.page-head .tagline{font-size:.95rem; letter-spacing:.1em}
.page-title{
  font-size:clamp(2rem,5vw,3.4rem); font-weight:200; line-height:1.35; letter-spacing:.06em;
  margin:.5rem 0 0; color:var(--text-strong);
}
.page-lead{margin-top:1.4rem; max-width:44rem; line-height:2; color:var(--text)}
.page-head__deco{
  position:absolute; right:-40px; bottom:-30px; width:min(280px,32vw); opacity:.5;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   本文プロース
   -------------------------------------------------------------------------- */
.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{font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:200; letter-spacing:.04em; margin:.4rem 0 1rem; line-height:1.4}
.split__body p{line-height:2; color:var(--text)}

/* 図版 + キャプション */
.figure{margin:0; position:relative}
.figure img{width:100%; object-fit:cover; display:block}
.figure figcaption{font-size:.8rem; color:#7a7568; 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}
.menu-item__price small{color:#7a7568; 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)}
.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:#7a7568; 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}
.gallery figcaption{font-size:.76rem; color:#7a7568; 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{border-bottom:1px solid var(--rule)}
.faq__item summary{
  list-style:none; cursor:pointer; padding:1.2rem .5rem; display:flex; gap:1rem; align-items:flex-start;
  font-size:1.05rem; letter-spacing:.03em; color:var(--text-strong); position:relative;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::before{content:"Q"; color:var(--gold); font-weight:400; flex:none; width:1.4em}
.faq__item summary::after{content:"＋"; margin-left:auto; color:var(--gold); transition:transform .3s}
.faq__item[open] summary::after{content:"−"}
.faq__answer{padding:0 .5rem 1.4rem 2.9rem; line-height:2; color:var(--text)}
.faq__answer p{margin:0 0 .8em}
.faq__answer a{color:var(--gold)}

/* 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:#7a7568}
.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}

/* --------------------------------------------------------------------------
   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)}

/* --------------------------------------------------------------------------
   セクション間の店舗情報（access）は style.css を流用
   -------------------------------------------------------------------------- */
.section-access{background:var(--floral-white)}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@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}
  .page-head__deco{display:none}
}

/* モーション低減 */
@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{padding-top:6.4rem; padding-bottom:2.2rem}
  .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;
  transition:opacity .25s ease, visibility .25s;
}
.lightbox.is-open{opacity:1; visibility:visible}
.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)}
.lightbox__close{
  position:absolute; top:18px; right:18px; z-index:2;
  width:44px; height:44px; border:1px solid #fffbf480; border-radius:50%;
  background:rgba(26,28,44,.4); color:var(--white);
  font-size:22px; line-height:1; cursor:pointer;
}
body.is-lightbox-open{overflow:hidden}
.zoom-note{max-width:820px; margin:0 auto 1.2rem; text-align:center; font-size:.8rem; color:#7a7568; letter-spacing:.06em}
.zoom-note::before{content:"⌕ "; color:var(--gold)}

/* --------------------------------------------------------------------------
   お品書き（テキスト版・AI/検索向け）
   -------------------------------------------------------------------------- */
.menu-text{max-width:820px; margin:0 auto}
.menu-text > p.note{font-size:.8rem; color:#7a7568; 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:#7a7568; 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}
}