/* build 20260721 — モバイル磨き込み（ナビ1画面化・メニューピル反転・グリッド/フッター圧縮ほか） */
@charset "utf-8";
/* ==========================================================================
   若狭湾天然活魚料理 大将 — 共通ベース + TOP（FAQ様式・言語別フォント等の全ページ共有ルールを含む）
   Webflow / jQuery / IX2 / Relume 非依存。素の HTML + CSS + 最小 JS。
   デザイントークン・レイアウト値はすべて既存サイトから抽出したものを踏襲。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root{
  --bg:            #e5e1d5;
  --text:          #333;
  --text-strong:   #1f2022;
  --navy:          #1a1c2c;   /* footer / shop / button */
  --gold:          #625b12;   /* 英字タグライン */
  --white:         #fff;
  --floral-white:  #fffbf4;
  --rule:          #615e5e4d;
  --divider:       #e4ebf3;
  --branding-filter: #ffbf001a;
  --muted:#7a7568;
  --tint:          #d1ccb8;   /* 濃いめの生成り。dishes セクションの背景切替に使う */

  --ease: cubic-bezier(.22,.61,.36,1);
  --reveal-duration: .9s;
}

/* --------------------------------------------------------------------------
   2. リセット / ベース
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{height:100%; scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  background-color:var(--bg);
  color:var(--text);
  font-family:"Noto Serif JP", serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.08em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
iframe{border:0}
h1,h2,h3{margin:0; font-weight:400}
p{margin:0 0 10px}
ul{margin:0; padding:0; list-style:none}
dl,dd,dt{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

[id]{scroll-margin-top:2rem}

.u-visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--navy); color:var(--white); padding:.75rem 1.25rem; text-decoration:none;
}
.skip-link:focus{left:0}
/* skip-link の着地点。tabindex="-1" は focus を受けるためだけなので枠は出さない */
[tabindex="-1"]:focus{outline:none}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* --------------------------------------------------------------------------
   3. 共通パーツ
   -------------------------------------------------------------------------- */
.tagline{
  color:var(--gold);
  letter-spacing:.04em;
  text-transform:capitalize;
  font-weight:200;
  margin:0;
  display:inline-block;
}
.tagline--white{color:var(--white)}

.h2{
  font-size:2.5rem;
  font-weight:200;
  line-height:1.4;
  text-indent:-4px;
  margin:0;
}
.h2--indent{margin-left:1rem}

.h3{
  color:var(--text-strong);
  text-align:center;
  max-width:740px;
  margin:0 auto;
  font-size:1.5rem;
  font-weight:200;
  line-height:120%;
}

.text-medium{font-size:1rem; margin:0}

.spacer-xsmall{padding-top:1rem}
.spacer-small{padding-top:1.5rem}
.spacer-2rem{height:2rem}

.branding-filter{
  position:absolute; inset:0;
  background-color:var(--branding-filter);
  pointer-events:none;
}

.rule{
  border:0; height:1px; width:100%; margin:0;
  background-color:var(--rule);
}
.rule--mobile{display:none}

/* 下線が左から伸びる矢印リンク */
.arrow-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  padding:.8rem .4rem .8rem 0;
  border-bottom:1px solid var(--text);
  color:var(--text);
  text-decoration:none;
  transition:opacity .2s;
}
.arrow-link:hover{opacity:.6}
.arrow-link:hover .arrow-link__icon{transform:translateX(6px)}
.arrow-link__icon{transition:transform .3s var(--ease)}
.arrow-link--white{border-bottom-color:var(--white); color:var(--white)}

.social-link{
  display:flex; align-items:center;
  margin:0 2px;
  transition:opacity .2s;
}
.social-link:hover{opacity:.5}
.social-link img{height:30px; width:auto}
.social-link--line{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 .8em; border-radius:8px;
  background:#06C755; color:#fff; text-decoration:none;
  font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1;
  transition:opacity .2s;
}
.social-link--line:hover{opacity:.82}

/* フッター／ナビ（暗背景）のSNSはモノクロ白に統一（ブランド色は強すぎるため） */
.footer__social .social-link img,
.nav-social .social-link img{filter:brightness(0) invert(1); opacity:.9}
.footer__social .social-link:hover img,
.nav-social .social-link:hover img{opacity:1}
.footer__social .social-link--line,
.nav-social .social-link--line{background:transparent; border:1px solid #fffbf473; color:var(--floral-white); font-weight:400; letter-spacing:.12em}
.footer__social .social-link--line:hover,
.nav-social .social-link--line:hover{opacity:1; border-color:#fffbf4b3}

.round-button{
  background-color:var(--navy);
  color:var(--white);
  border-radius:30px;
  width:50px; height:50px;
  margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:opacity .2s;
}
.round-button:hover{opacity:.8}

/* --------------------------------------------------------------------------
   4. reveal（IX2 の fadeIn 置き換え）
   -------------------------------------------------------------------------- */
/* JS が無効な環境では常に表示（.js は head のインラインスクリプトで付与） */
.js .js-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--reveal-duration) var(--ease),
             transform var(--reveal-duration) var(--ease);
  will-change:opacity, transform;
}
.js .js-reveal.is-visible{opacity:1; transform:none}

/* --------------------------------------------------------------------------
   5. 固定UI（ホーム / ハンバーガー）
   -------------------------------------------------------------------------- */
.fixed-ui{
  position:fixed;
  inset:40px 40px auto auto;
  z-index:1100;
  display:flex; align-items:center; justify-content:flex-end;
  gap:1rem;
}
.menu-button{
  position:relative;
  z-index:1;
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid #fffbf499;
  border-radius:100px;
  padding:1.05em 1.8em;
  color:var(--white);
  background:rgba(26,28,44,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:13.5px; letter-spacing:.2em; line-height:1;
  cursor:pointer;
  transition:background-color .25s, border-color .25s, color .25s;
}
.menu-button:hover{background:rgba(26,28,44,.55)}
.menu-button__lines{
  display:flex; flex-direction:column; gap:4px;
}
.menu-button__lines i{
  display:block; width:16px; height:1px; background:currentColor;
  transition:transform .3s var(--ease), width .3s var(--ease);
}
.menu-button__lines i:last-child{width:10px}
.menu-button__label{display:block; padding-left:.3em}
.menu-button[aria-expanded="true"]{background:rgba(26,28,44,.6); border-color:#fffbf4b3; color:var(--white)}
.menu-button[aria-expanded="true"] .menu-button__lines i:first-child{transform:translateY(2.5px) rotate(22deg)}
.menu-button[aria-expanded="true"] .menu-button__lines i:last-child{width:16px; transform:translateY(-2.5px) rotate(-22deg)}

/* ヒーロー／ページヘッダーを過ぎたら（body.is-past-head）明るい本文の上でも
   読めるように墨色反転にする（.page はpages.cssで同スタイルを常時適用） */
body.is-past-head .menu-button{color:var(--text-strong); border-color:#1f202288; background:rgba(255,251,244,.55)}
body.is-past-head .menu-button:hover{background:rgba(255,251,244,.85)}
body.is-past-head .menu-button[aria-expanded="true"]{color:var(--white); border-color:#fffbf4b3; background:rgba(26,28,44,.6)}

/* --------------------------------------------------------------------------
   5a. ページ遷移演出（活魚水槽トラックがコマ撮りで走る）
   -------------------------------------------------------------------------- */
.pt{
  position:fixed; inset:0; z-index:1400;
  background:var(--bg);
  overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s;
}
.pt.is-active{opacity:1; visibility:visible; pointer-events:auto}
.pt__scene{
  position:absolute; left:50%; top:50%;
  width:min(320px,72vw);
  transform:translate(-50%,-55%);
  text-align:center;
}
.pt__truck{display:block; width:100%; height:auto}
/* 車体はコマ撮りで小さく揺れる（2コマ） */
.pt.is-active .pt__truck-body{animation:pt-bob .44s steps(1,end) infinite}
@keyframes pt-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
/* タイヤは3コマで回る */
.pt__wheel{transform-box:fill-box; transform-origin:center}
.pt.is-active .pt__wheel{animation:pt-spin .55s steps(3) infinite}
@keyframes pt-spin{to{transform:rotate(360deg)}}
/* 道 */
.pt__road{height:2px; background:#2b2a26; opacity:.85; margin-top:-4px}
.pt__caption{
  margin:16px 0 0; font-size:13px; letter-spacing:.18em; color:#2b2a26; line-height:1.8;
}
@media (prefers-reduced-motion:reduce){ .pt{display:none} }

/* --------------------------------------------------------------------------
   5b. 言語スイッチャー（全ページ共通）
   -------------------------------------------------------------------------- */
.lang-switch{display:flex; gap:.2rem; align-items:center; font-size:.8rem; letter-spacing:.08em}
.lang-switch a,.lang-switch span{color:inherit; text-decoration:none; padding:.3em .6em; opacity:.75; transition:opacity .2s}
.lang-switch a:hover{opacity:1}
.lang-switch .is-current{opacity:1; border-bottom:1px solid currentColor}
.lang-switch .lang-sep{opacity:.35; padding:0}
.global-nav .lang-switch{color:var(--white)}
.footer .lang-switch{color:var(--white)}

/* ナビ最下段（電話＋言語） */
.global-nav__foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap;
  margin-top:2.4rem; padding-top:20px; border-top:1px solid #fffbf42e; max-width:680px;
}
.global-nav__tel{font-size:12.5px; letter-spacing:.08em; color:#c9c3a6; margin:0}
.global-nav__tel a{color:var(--white); text-decoration:none; font-size:19px; letter-spacing:.06em; margin-left:.5em}
.global-nav__tel a:hover{opacity:.8}

/* --------------------------------------------------------------------------
   6. グローバルナビ（オーバーレイ）
   -------------------------------------------------------------------------- */
.global-nav{
  position:fixed;
  inset:0;
  overflow-y:auto;
  /* visibility の遷移中は used value が visible のままなので、
     pointer-events を切らないと閉じた直後の350msクリックを吸ってしまう */
  pointer-events:none;
  z-index:1000;
  padding:30px 0 60px;
  background-image:linear-gradient(#000000e6,#000000e6), url("../assets/img/footer-bg.webp");
  background-position:0 0, 50%;
  background-size:auto, cover;
  visibility:hidden;
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.global-nav.is-open{visibility:visible; opacity:1; transform:none; pointer-events:auto}

.global-nav__inner{
  max-width:1240px;
  margin:70px auto 0;
  padding:40px 40px 0;
  display:block;
}
.nav-columns{
  display:grid;
  grid-template-columns:auto auto auto minmax(230px,300px);
  column-gap:clamp(1.5rem,3vw,2.75rem);
  row-gap:40px;
}
.nav-columns--3{grid-template-columns:auto auto minmax(230px,300px)}
.nav-column{display:flex; flex-direction:column; align-items:flex-start}
.nav-heading{font-size:.72rem; letter-spacing:.2em; color:#e6d6a0; margin:0 0 .8rem}
.nav-link{
  color:var(--white);
  padding:.42rem 0;
  font-size:14px;
  line-height:1.5;
  text-decoration:none;
  transition:opacity .2s;
}
.nav-link:hover{opacity:.6}
.nav-link--home{margin-top:.7rem; font-size:12px; color:#c9c3a6}
/* 情報カラム（フッター相当） */
.nav-column--info{max-width:320px}
.nav-column--info .global-nav__reserve{margin:0 0 1.3rem}
.nav-info__tel{margin:0}
.nav-info__tel a{color:var(--white); text-decoration:none; font-size:22px; letter-spacing:.04em}
.nav-info__tel a:hover{opacity:.8}
.nav-info__text{font-size:12px; line-height:1.95; color:#c9c3a6; margin:.5rem 0 1.2rem}
.nav-social,.footer__social{display:flex; align-items:center; gap:12px}
.nav-social{margin:0 0 1.3rem}

/* body スクロールロック */
body.is-nav-open{overflow:hidden}

/* --------------------------------------------------------------------------
   7. ヒーロー
   -------------------------------------------------------------------------- */
.fv{position:relative}

.fv-video{
  position:absolute;
  inset:0;
  height:100vh;
  z-index:-1;
  overflow:hidden;
  /* preload="none" の <video> は load() を呼ぶまで poster を描かない。
     動画はアイドルまで遅らせているので、その間ヒーローが真っ白になり、
     白抜きのロゴ・文字が白地に乗って何も見えなくなる（実測でFCP 2.2秒）。
     poster は CSS 背景として先に出す。動画が再生されると上に重なって隠れる。 */
  background:#1a1c2c url("../assets/video/taisho-poster.jpg") center/cover no-repeat;
}
.fv-video video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* 下辺の営業情報・スクロール表示が動画の明るい部分に重なっても読めるように */
.fv-video::after{
  content:"";
  position:absolute; inset:auto 0 0;
  height:30%;
  background:linear-gradient(180deg, rgba(10,11,16,0), rgba(10,11,16,.55));
  pointer-events:none;
}

.fv-wrap{
  position:relative;
  z-index:10;
  height:100vh;
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fv-logo{margin:0; display:flex; align-items:center; justify-content:center}
.fv-logo img{height:280px; max-height:280px; width:auto}

/* 左レール */
.fv-side{
  position:absolute;
  inset:0 auto 0 0;
  width:35vw;
  padding:40px 5vw 0;
  display:flex;
  flex-direction:column;
}
/* 暗幕はレール本体の背景ではなく擬似要素に敷く:
   フェード終端をレール幅と独立に動かせるので、狭幅（≤991px）で
   「ナビ・横ロゴの背後は暗く保ちつつ中央ロゴ側へは伸ばさない」調整が
   ブレークポイント側の上書きだけで済む（≤991px・≤479pxの各上書き参照） */
.fv-side::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(90deg,#000 5%,#0000008c 52%,#fff0);
  pointer-events:none;
}
.fv-side__bar{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
}
/* ナビは残余スペースの縦中央（下辺インフォと干渉させない） */
.fv-side__bar .fv-nav{margin:auto 0; padding-bottom:5.5rem}
.fv-side__logo{
  display:flex; align-items:center; justify-content:center;
  margin-left:-25px;
  text-decoration:none;
}
.fv-side__logo img{width:160px; height:auto}

.fv-nav{display:flex; flex-direction:column; align-items:flex-start; list-style:none}
.fv-nav a{display:flex; align-items:baseline; gap:12px; color:var(--white); text-decoration:none; padding:.52rem 0}
.fv-nav__no{font-size:10px; letter-spacing:.18em; color:#a99f5e}
.fv-nav__ja{font-size:16px; letter-spacing:.14em; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .25s}
.fv-nav a:hover .fv-nav__ja{border-color:var(--white)}
.fv-nav__cta .fv-nav__ja{border-bottom-color:#a99f5e}

.fv-baseline{
  position:absolute; inset:auto 44px 26px 44px; z-index:30;
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
}
.fv-baseline__info{font-size:13px; letter-spacing:.08em; color:#fffbf4d9; line-height:1.9}
.fv-baseline__info b{font-weight:400; color:var(--white)}
.fv-shop-pill{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  border:1px solid #fffbf480; border-radius:100px;
  padding:.65em 1.4em; color:var(--white); text-decoration:none;
  font-size:12px; letter-spacing:.12em; line-height:1;
  background:rgba(26,28,44,.25); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background-color .25s;
}
.fv-shop-pill:hover{background:rgba(26,28,44,.55)}
.fv-scroll{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:29;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:8.5px; letter-spacing:.3em; color:#fffbf4bf; text-transform:uppercase;
}
.fv-scroll::after{content:""; width:1px; height:36px; background:linear-gradient(#fffbf4cc,transparent)}

/* --------------------------------------------------------------------------
   8. こだわり（縦書き）
   -------------------------------------------------------------------------- */
.kodawari{position:relative; z-index:1}
.kodawari__clip{position:relative; overflow:hidden}

.kodawari__bg{
  position:absolute;
  inset:0 0 auto;
  z-index:0;
  width:120vw;
  height:100%;
  margin-left:-10vw;
  background-image:url("../assets/img/washi-bg.jpg");
  background-position:50%;
  background-size:cover;
  background-attachment:fixed;
  border-radius:0 0 70% 70%;
}
.kodawari__inner{
  position:relative;
  z-index:20;
  max-width:1600px;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-direction:column;
}
.kodawari__vertical{
  writing-mode:vertical-rl;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  margin:60px 0 100px;
  font-size:18px;
  line-height:2;
}
.kodawari__title{
  align-self:flex-start;
  margin:0 0 0 60px;
  font-size:28px;
  font-weight:200;
  line-height:1.5;
}
.kodawari__text{
  margin:40px 18px 0 40px;
  font-weight:200;
}
.kodawari__link{
  display:flex;
  align-items:center;
}
.kodawari__link-text{
  color:var(--text);
  margin:40px 0 16px;
  font-weight:200;
  text-decoration:none;
}
.kodawari__link-text:hover{opacity:.7}

.kodawari__fish{
  position:absolute;
  inset:auto 0 -91px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
}
.kodawari__fish img{max-width:250px; height:auto}

.deco-wave{
  width:100%;
  margin-top:150px;
  object-fit:cover;
}

/* --------------------------------------------------------------------------
   9. 最新情報 / Instagram
   -------------------------------------------------------------------------- */
.news{position:relative; z-index:2}
.news__inner{
  position:relative;
  max-width:1400px;
  margin:0 auto;
  padding:60px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.news__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.news__lead{
  text-align:center;
  max-width:820px;
  margin:1.5rem 0 1rem;
  font-size:1rem;
  line-height:165%;
}
.insta-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  text-decoration:none;
  color:inherit;
}
.insta-link img{width:100px; height:auto}
.insta-link__row{display:flex; align-items:center; gap:1rem}
.insta-link__arrow{
  width:30px; height:30px;
  border-radius:50px;
  background-color:var(--text-strong);
  color:var(--white);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.3px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease);
}
.insta-link:hover .insta-link__arrow{transform:translateX(4px)}

.insta-grid{
  display:grid;
  grid-template-columns:repeat(3, 300px);
  grid-template-rows:repeat(3, 300px);
  gap:3px;
  justify-content:center;
  margin:3rem 0 40px;
  padding-top:10px;
  overflow:hidden;
}
.insta-grid li{overflow:hidden}
.insta-grid img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.insta-grid li:hover img{transform:scale(1.04)}

.news__fish{
  position:absolute;
  inset:auto 0 -4% auto;
  width:500px;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   10. コース料理 / ランチ / 単品料理（sticky クロスフェード）
   -------------------------------------------------------------------------- */
.dishes{position:relative}

/* 追従背景。3枚の切替と同期して色＋魚の線画が入れ替わる（元CSSの
   background-layer / deco-sakana-img-1 を復活。元は opacity:0 のまま未発火だった） */
.dishes__bg{display:none}

@media screen and (min-width:768px){
  .dishes__bg{display:block}
  .dishes__scene{
    position:fixed;
    inset:0;                 /* 100vw だとスクロールバー分はみ出すので使わない */
    z-index:-1;
    opacity:0;
    transition:opacity .8s var(--ease);
    pointer-events:none;
  }
  .dishes__scene.is-tint{background-color:var(--tint)}
  .dishes__scene.is-active{opacity:1}

  .dishes__fish{
    position:absolute;
    width:300px;
    height:auto;
  }
  .dishes__fish--1{right:0;    bottom:0}
  .dishes__fish--2{right:20%;  bottom:20%}
  .dishes__fish--3{right:10%;  bottom:20%}
}

.dishes__pad{padding-right:40px}
.dishes__grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  column-gap:5rem;
  row-gap:4rem;
  width:100%;
  margin:0 auto;
}

.dishes__sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dishes__img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s var(--ease);
}
.dishes__img.is-active{opacity:1}
/* 枠は 0.73 の縦長、素材は 1.25〜1.50 の横長。写真ごとに切り位置を決める */
.dishes__img[data-dish-image="course-meal"]{object-position:52% 50%}
.dishes__img[data-dish-image="lunch"]     {object-position:50% 48%}
.dishes__img[data-dish-image="ala-carte"] {object-position:44% 55%}

.dish{
  position:relative;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-top:1rem;
}
/* 元サイトの余白差をそのまま踏襲（コースのみタグライン直下3px、他は1rem） */
.dish .tagline + .h2{margin-top:1rem}
#course-meal .tagline + .h2{margin-top:3px}
.dish__mobile-image{display:none}

/* --------------------------------------------------------------------------
   11. オンラインショップ
   -------------------------------------------------------------------------- */
.shop{background-color:var(--navy)}
.shop__split{
  display:flex;
  flex-direction:row-reverse;
  color:var(--white);
}
.shop__media{width:50%}
.shop__media img{width:100%; height:100%; object-fit:cover}
.shop__body{
  width:50%;
  padding:3.4rem 3.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

/* --------------------------------------------------------------------------
   11b. よくあるご質問（TOP・抜粋）
   -------------------------------------------------------------------------- */
.top-faq{background-color:var(--floral-white); padding:clamp(3rem,7vw,5.5rem) 1.25rem}
.top-faq__inner{max-width:820px; margin:0 auto; text-align:center}
.top-faq__list{margin-top:clamp(1.6rem,4vw,2.4rem); text-align:left}
/* FAQ アコーディオン（TOP・/faq 共通の基本。ページ差分は各所で上書き） */
.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)}
.top-faq__more{margin-top:1.6rem}
.top-faq__more a{
  color:var(--gold); text-decoration:none; font-size:.92rem; letter-spacing:.06em;
  border-bottom:1px solid var(--gold); padding-bottom:.2em;
}
.top-faq__more a:hover{opacity:.7}
@media (max-width:767px){
  .top-faq .faq__item summary{font-size:.95rem; padding:1rem .2rem; gap:.7rem}
  .top-faq .faq__answer{padding:0 .2rem 1.2rem 2.1rem; line-height:1.95}
}

/* --------------------------------------------------------------------------
   12. 店舗情報
   -------------------------------------------------------------------------- */
.access__inner{
  max-width:1600px;
  margin:0 auto;
  padding:60px 40px;
  position:relative;
}
/* 店舗情報はコンテナ全幅を使い、地図とテキストで分割する */
.access__grid{width:100%}
.access__wrap{
  display:grid;
  grid-template-columns:1fr 1.1fr;   /* 地図：テキスト。テキスト側を少し広く */
  gap:3rem;
  align-items:stretch;
}
.access__wrap > *{min-width:0}   /* min-content で 1fr トラックが膨らむのを防ぐ */

.access__map{position:relative; width:100%; min-height:520px}
.access__map iframe{position:absolute; inset:0; width:100%; height:100%}

.access__body{padding-left:0}

.access__row{display:flex; align-items:flex-start}
.access__label,
.access__value,
.access__tel,
.access__note{
  margin:1.5rem 1rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.5em;
}
.access__label--bold{font-weight:700}
/* dl直下にはdt/dd/divしか置けない（a11y）ため、区切りのhr/slashをdivで包み
   display:contents で従来どおりflexアイテムとして参加させる（見た目は不変） */
.access__sep{display:contents}
.access__slash{margin:25px 0; line-height:1.5em}
.access__tel a{color:inherit}
.access__tel a:hover{opacity:.7}
.access__value a{color:inherit}

/* --------------------------------------------------------------------------
   13. フッター
   -------------------------------------------------------------------------- */
.footer{
  position:relative;
  color:var(--white);
  background-image:linear-gradient(#000000d9,#000000d9), url("../assets/img/footer-bg.webp");
  background-position:0 0, 50%;
  background-size:auto, cover;
  border-bottom:1px solid var(--divider);
  padding:0 0 1rem;
}
.footer__inner{
  max-width:1600px;
  margin:0 auto;
  padding:20px 40px;
}
.footer__top{
  display:grid;
  grid-template-columns:200px 1fr 300px;
  gap:48px;
  align-items:start;
}
.footer__heading{
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:#a99f5e; padding:.5rem 0 8px; margin-bottom:10px;
  border-bottom:1px solid #fffbf429;
}
.footer__info{
  font-size:12.5px; line-height:2.1; color:#d9d4c2;
  border-left:1px solid #fffbf429; padding-left:28px;
}
.footer__info b{font-weight:400; color:var(--white); font-size:18px; letter-spacing:.06em}
.footer__info a{color:inherit}
.footer__info b a{text-decoration:none}
.footer__maplink{display:inline-block; margin-top:6px; color:#a99f5e; text-decoration:none; border-bottom:1px solid #a99f5e; padding-bottom:.1em; font-size:12px}
.footer__maplink:hover{opacity:.7}
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:40px; padding-top:16px; border-top:1px solid #fffbf429;
}
.footer__brand img{width:160px; height:auto}
.footer__columns{
  display:grid;
  grid-template-columns:auto auto auto;
  column-gap:42px;
  row-gap:40px;
}
.footer__column{display:flex; flex-direction:column; align-items:flex-start}
.footer__link{
  color:var(--white);
  padding:.5rem 0;
  font-size:14px;
  line-height:16px;
  text-decoration:none;
  transition:opacity .2s;
}
.footer__link:hover{opacity:.6}
.footer__social{margin-top:14px}

.footer__copyright{
  text-align:center;
  font-size:14px;
  line-height:16px;
  margin:0;
}
.footer__muted{opacity:.7}
.footer__credit{color:var(--white); opacity:.6; text-decoration:none}
.footer__credit:hover{opacity:1}

/* ==========================================================================
   ブレークポイント（元サイト踏襲: 1920 / 1440 / 991 / 767 / 479）
   ========================================================================== */

/* ---------- ≥1920px ---------- */
@media screen and (min-width:1920px){
  body{font-size:20px}
  .news__inner{max-width:1600px; padding-top:100px; padding-bottom:100px}
  .access__inner{max-width:1700px; padding-top:100px; padding-bottom:100px}
  .footer__inner{max-width:1700px}
  .global-nav__inner{max-width:1700px}
}

/* ---------- ≥1440px ---------- */
@media screen and (min-width:1440px){
  .news__inner{max-width:1100px}
  .access__inner{max-width:1400px}
  .footer__inner{max-width:1400px}
  .global-nav__inner{max-width:1400px}
}

/* ---------- ≤991px ---------- */
@media screen and (max-width:991px){
  .h2{font-size:1.8rem}
  .h3{font-size:1.3rem}
  .text-medium{font-size:.8rem}

  .rule--pc{display:none}
  .rule--mobile{display:block}

  .menu-button{padding:12px}

  .global-nav{background-color:transparent}
  .global-nav__inner{padding:40px 24px 0; margin-top:24px}
  .nav-columns{grid-template-columns:1fr 1fr; column-gap:36px}

  /* 幅は35vwのまま広げない。100vwにすると暗幕の勾配が全幅に伸び、中央ロゴまで黒がかかる。
     min-width:max-content で、35vwにナビが収まらない狭い幅（≲750px）ではレールを
     内容幅まで広げ、ナビの折り返しを防ぐ */
  .fv-side{padding-left:40px; padding-right:40px; min-width:max-content}
  /* レールが内容幅まで縮むため、基準の勾配（52%で減衰開始）だとナビ・横ロゴの
     右端が透明域に乗って動画の明部で読めなくなる。レール右端まで暗さを保ち、
     レールの外側100pxだけでフェードアウトさせる（中央ロゴ側へ大きく伸ばさない） */
  .fv-side::before{
    inset:0 -100px 0 0;
    background-image:linear-gradient(90deg,#000 5%,#0000008c calc(100% - 100px),#fff0);
  }
  /* pointer-events:none 必須: ロゴの矩形が480〜720px幅でナビ04〜06に重なり、
     z-index:2で上に来るためタップを奪う。ロゴはリンクではないので無効化してよい */
  .fv-logo{position:relative; z-index:2; pointer-events:none}
  .fv-side__logo{z-index:1; padding:0 10px 10px}

  .fv-baseline{inset:auto 20px 18px 20px; flex-direction:column; align-items:flex-start; gap:10px}
  .fv-scroll{display:none}

  .kodawari__title{margin-left:0}
  .kodawari__text{line-height:1.8}

  .news__inner{padding:40px 40px; display:block}
  .insta-grid{grid-template-columns:repeat(3,200px); grid-template-rows:repeat(3,200px)}
  .news__fish{bottom:-7%}

  .dishes__grid{column-gap:3rem}

  .access__inner{padding:40px; display:block}
  .access__grid{grid-template-columns:1fr}
  .access__wrap{grid-template-columns:1fr}
  /* 元サイトではSPでマップが高さ0になり消えていたため、比率を与えて表示する
     （min-height:520pxのままだと縦長になりすぎるため解除） */
  .access__map{aspect-ratio:16/10; height:auto; min-height:0}
  .access__row{flex-direction:column; margin-bottom:10px}
  .access__label,.access__value,.access__tel,.access__note{margin-top:10px; margin-bottom:5px}
  .access__label--bold{margin-top:0}
  .access__slash{display:none}

  .footer__columns{column-gap:42px}
  .footer__top{grid-template-columns:1fr}
  .footer__info{border-left:0; padding-left:0; border-top:1px solid #fffbf429; padding-top:20px}
  .footer__copyright{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.35em}
}

/* ---------- ≤767px ---------- */
@media screen and (max-width:767px){
  .h2{font-size:2rem}
  .text-medium{font-size:1rem}

  /* 固定UIを上に寄せて画面を広く使う（下層の.page-brandと高さを揃える） */
  .fixed-ui{inset:18px 20px auto auto}

  /* iOS Safari は background-attachment:fixed が正しく描画されないため解除 */
  .kodawari__bg{height:60vh; background-attachment:scroll}
  .kodawari__title{font-size:23px}
  .kodawari__text{margin-left:15px; margin-right:15px; font-size:14px}
  .kodawari__link{font-size:13px}
  .round-button{width:40px; height:40px}

  .news__inner{padding:40px 20px}
  /* 固定pxだと端末幅からはみ出すため、コンテナにフィットする正方形3列にする */
  .insta-grid{grid-template-columns:repeat(3,1fr); grid-template-rows:auto; width:100%; height:auto}
  .insta-grid li{aspect-ratio:1/1}

  .arrow-link{margin-bottom:2rem}

  /* sticky を解除し、各ブロックに画像を差し込む */
  .dishes__pad{padding:0}
  .dishes__grid{grid-template-columns:1fr; row-gap:3rem; padding:4.5rem 0 3rem}
  .dishes__sticky{display:none}
  .dishes__content{
    display:grid;
    grid-template-columns:1fr;
    gap:4.5rem;
    padding:0 2rem;
  }
  .dish{grid-column:1; height:auto}
  .dish__mobile-image{
    display:block;
    position:relative;
    width:100%;
  }
  .dish__mobile-image img{
    width:100%;
    max-height:350px;
    object-fit:cover;
  }

  /* ナビはスクロールなしで1画面に収める：リンク2列＋下段に予約・電話・SNS・言語を圧縮
     （住所・営業時間はフッターにあるためナビでは出さない） */
  .global-nav{padding:0; display:flex; flex-direction:column}
  /* margin-block:auto = 余裕のある端末では縦センター、収まらない端末では通常フロー（スクロール可） */
  .global-nav__inner{width:100%; margin-block:auto; padding:78px 22px 16px}
  .nav-columns{grid-template-columns:1fr 1fr; column-gap:22px; row-gap:1rem}
  .nav-heading{margin-bottom:.45rem}
  .nav-link{padding:.3rem 0; font-size:13.5px}
  .nav-link--home{margin-top:.4rem}
  .nav-column--info{
    grid-column:1 / -1; max-width:none; margin-top:.2rem; padding-top:1.05rem;
    border-top:1px solid #fffbf42e;
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:.7rem 1rem;
  }
  .nav-column--info .global-nav__reserve{grid-column:1 / -1; margin:0; text-align:center; padding:.9em 1.5em; font-size:14px}
  .nav-info__tel a{font-size:20px}
  .nav-info__text{display:none}
  .nav-social{margin:0; justify-self:end}
  .nav-column--info .lang-switch{grid-column:1 / -1}

  .shop__split{flex-direction:column}
  .shop__media{width:100%}
  .shop__body{width:100%; padding:2rem}

  .access__inner{padding:31px 20px}
  .access__grid{display:flex; flex-direction:column}

  .footer{padding:20px 15px 1rem}
  .footer__inner{padding:0}
  .footer__top{flex-direction:column; align-items:center}
  .footer__columns{grid-template-columns:1fr 1fr; column-gap:26px; row-gap:26px; margin-top:36px}
  .footer__column{align-items:flex-start}
}

/* ---------- ≤479px ---------- */
@media screen and (max-width:479px){
  .h2--indent{margin-left:0}
  .h3{margin-bottom:1rem}

  .fixed-ui{right:20px}

  .fv-wrap{height:100svh; padding:0}
  /* この幅ではナビ・縦ロゴとも非表示＝レールに中身が無いので暗幕も敷かない
     （敷くと中央ロゴに黒フィルターがかかるだけ。下辺の営業情報は .fv-video::after が担保） */
  .fv-side{padding:0}
  .fv-side::before{display:none}
  .fv-side__bar{width:100vw; justify-content:space-between; align-items:center}
  .fv-side__logo{display:none}
  .fv-nav{display:none}
  .fv-baseline__info{font-size:10.5px}

  .kodawari__vertical{margin-top:20px}
  .kodawari__title{margin-right:0; font-size:20px; line-height:1.3}
  .kodawari__text{margin-left:.5em; margin-right:.5em; line-height:1.4}
  .kodawari__link{line-height:1}
  .kodawari__fish{bottom:-70px}
  .round-button{width:30px; height:30px; margin:0}

  .news__inner{padding-bottom:0; padding-right:20px}
  .news__lead{display:none}
  .insta-grid{margin-bottom:0}
  .news__fish{bottom:-15%; right:9%}

  .dishes__content{padding:0 1rem}
  .dish__mobile-image img{max-height:210px}
  .dish__mobile-image{order:-1; margin-bottom:1.5rem}

  .shop__body{padding-left:1rem; padding-right:1rem}

  .access__inner{padding:30px 20px}
  .access__label,.access__value,.access__tel,.access__note{margin-left:0; margin-right:0}

  /* 1列縦積みだとフッターだけで2画面以上になるため、2列のまま圧縮する */
  .footer__columns{grid-template-columns:1fr 1fr; column-gap:20px; row-gap:20px; margin-top:28px}
  .footer__link{padding:.38rem 0; font-size:13px}
  .footer__bottom{justify-content:center; text-align:center}
  .footer__social{margin-top:.8rem}
}

/* --------------------------------------------------------------------------
   14. モーション低減
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-reveal{opacity:1; transform:none}
  .kodawari__bg{background-attachment:scroll}
  .dishes__img,.dishes__scene{transition:none}
}

/* --------------------------------------------------------------------------
   ネット予約ボタン（トレタ）＝最優先導線
   .reserve-fab       … 右上固定UI（全ページ・MENUの隣）
   .global-nav__reserve … オーバーレイメニュー下部
   -------------------------------------------------------------------------- */
.reserve-fab{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  border:1px solid var(--gold); border-radius:100px;
  padding:1.05em 2.1em;
  background:var(--gold); color:var(--white); text-decoration:none;
  font-size:13.5px; letter-spacing:.18em; line-height:1; white-space:nowrap; font-weight:400;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.55);
  transition:opacity .25s, transform .25s;
}
.reserve-fab::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--white); opacity:.9}
.reserve-fab:hover{opacity:.9; transform:translateY(-1px)}
.global-nav__reserve{
  display:inline-block; margin:0 0 1.1rem;
  background:var(--gold); color:var(--white); text-decoration:none;
  padding:.9em 2.1em; border-radius:100px;
  font-size:15px; letter-spacing:.08em;
  transition:opacity .25s;
}
.global-nav__reserve:hover{opacity:.88}
/* ヒーロー下部のネット予約ピル（トップ最上部の予約導線） */
.fv-baseline__actions{display:flex; gap:10px; flex:none; flex-wrap:wrap; justify-content:flex-end}
.fv-shop-pill--reserve{background:var(--gold); border-color:var(--gold); color:var(--white)}
.fv-shop-pill--reserve:hover{background:var(--gold); opacity:.88}
@media (max-width:767px){
  .reserve-fab{padding:.9em 1.5em; letter-spacing:.12em; font-size:12px}
  .fixed-ui{gap:.55rem}
  .fv-baseline__actions{justify-content:flex-start}
}

/* 言語別フォント（繁體中文は Noto Serif TC を優先。各ページの inline style を集約） */
html[lang="zh-Hant"] body{font-family:"Noto Serif TC","Noto Serif JP",serif}