@charset "utf-8";
/* ==========================================================================
   若狭湾天然活魚料理 大将 — TOP
   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;
  --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}

: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}

.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:.72em 1.5em;
  color:var(--white);
  background:rgba(26,28,44,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:11px; letter-spacing:.3em; 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)}

/* --------------------------------------------------------------------------
   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 0 auto;
  z-index:1000;
  padding:30px 0 100px;
  background-image:linear-gradient(#000000e3,#000000e3), 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}

.global-nav__inner{
  max-width:1600px;
  margin:0 auto;
  padding:60px 40px 0;
  margin-top:60px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.nav-columns{
  display:grid;
  grid-template-columns:auto auto auto;
  column-gap:60px;
  row-gap:40px;
}
.nav-column{display:flex; flex-direction:column; align-items:flex-start}
.nav-link{
  color:var(--white);
  padding:.5rem 0;
  font-size:14px;
  line-height:16px;
  text-decoration:none;
  transition:opacity .2s;
}
.nav-link:hover{opacity:.6}

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

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

.fv-video{
  position:absolute;
  inset:0;
  height:100vh;
  z-index:-1;
  overflow:hidden;
}
.fv-video video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.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;
  background-image:linear-gradient(90deg,#000 5%,#0000008c 52%,#fff0);
}
.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}

.underline-link{
  display:inline-block;      /* 下線の幅をテキスト幅に揃える（元サイト同様） */
  color:var(--white);
  text-decoration:none;
  transition:opacity .3s;
}
.underline-link:hover{opacity:.5}
.underline-link__text{display:block; padding:.5rem 0}
.underline-link__mask{display:block; overflow:hidden}
.underline-link__line{
  display:block;
  height:1px;
  background-color:var(--white);
  transform:translate3d(-101%,0,0);   /* -100% だとサブピクセルが残る */
  transition:transform .4s var(--ease);
}
.underline-link:hover .underline-link__line,
.underline-link:focus-visible .underline-link__line{transform:translate3d(0,0,0)}

.fv-social{
  width:80%;
  margin-bottom:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--white);
}

.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;
}

/* --------------------------------------------------------------------------
   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}
.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:60px;
  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:auto; padding-top:.5rem}

.footer__divider{
  border:0; height:1px; width:100%;
  background-color:var(--divider);
  margin:2rem 0 1rem;
}
.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 20px 0; margin-top:0; flex-direction:column; gap:2rem}
  .nav-columns{column-gap:36px}

  .fv-side{width:100vw; padding-left:40px; padding-right:40px}
  .fv-side__bar{position:relative}
  .fv-side__logo{z-index:1; padding:0 10px 10px}

  .underline-link{padding-left:5px; padding-right:5px}

  .fv-social{
    display:flex; flex-direction:column;
    justify-content:flex-start; align-items:flex-start;
    width:150px;
  }

  .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になり消えていたため、比率を与えて表示する */
  .access__map{aspect-ratio:16/10; height:auto}
  .access__body{padding-left: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:60px}
  .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}

  .kodawari__bg{height:60vh}
  .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}
  .insta-grid{grid-template-columns:repeat(3,150px); grid-template-rows:repeat(3,150px); height:auto}

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

  /* sticky を解除し、各ブロックに画像を差し込む */
  .dishes__pad{padding:0}
  .dishes__grid{grid-template-columns:1fr; row-gap:3rem; padding:8rem 0 4rem}
  .dishes__sticky{display:none}
  .dishes__content{
    display:grid;
    grid-template-columns:1fr;
    gap:6rem;
    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;
  }

  .nav-columns{grid-template-columns:auto auto; column-gap:32px; row-gap:26px}

  .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}
  .footer__divider{margin-top:60px}
}

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

  .fixed-ui{right:20px}

  .fv-wrap{height:100svh; padding:0}
  .fv-side{padding:0; background-image:linear-gradient(#00000080,#00000080)}
  .fv-side__bar{width:100vw; justify-content:space-between; align-items:center}
  .fv-side__logo{display:none}
  .fv-nav{display:none}
  .fv-social{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{grid-template-columns:repeat(3,33vw); grid-template-rows:repeat(3,33vw); 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}

  .footer__columns{grid-template-columns:1fr; row-gap:0}
  .footer__bottom{justify-content:center; text-align:center}
  .footer__column{align-items:center}
  .footer__social{margin-top:1rem}
  .footer__divider{margin-top:20px}
}

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