/* ============================================================
   旅館・ホテルテンプレート — site.css
   海音の宿マスター(Claude Design確定版)のデザイントークンを移植。

   マスターは固定幅1440pxのキャンバス出力(全スタイルがインライン属性)
   だったため、見た目を1:1で保ったままレスポンシブに組み直している。
   1440px幅での見えはマスターと同一。1080 / 768 / 640px で段階的に畳む。

   色・字送り・余白・角丸の数値はマスターからそのまま持ってきた値。
   勝手に変えないこと(デザイン課 CLAUDE.md 参照)。

   **このテンプレートの骨格は「写真大きめ・余白重視」**。旅館の静けさが
   世界観そのものなので、狭い画面でも余白を詰めて情報密度を上げないこと。
   角丸は全要素0px(マスターに角丸指定は無い)。
   白カードは持たない ─ ヒーローの文字は映像に直接乗る(運送・モノ系と同型)。
   ============================================================ */

:root {
  /* ブランド ─ build.py が企業ごとに上書きできる。3色だけ受ける。
     残りは build.py(values_ryokan)が relight() で階調を作る。brief には書かない */
  --surface: #F2EEE6;  /* ページの地色。生成り */
  --navy:    #1F3A4D;  /* 見出し・本文・ヘッダーの反転先。藍 */
  --accent:  #B08D57;  /* リンク・ラベル・CTA。金茶 */

  /* ↓ build.py が上の3色から作る派生色。brief には書かない */
  --navy-deep:     #16293A;  /* ヒーロー・CTAの地 */
  --navy-slot:     #22394B;  /* 濃いプレースホルダー面 */
  --surface-slot:  #DCD6C9;  /* 淡いプレースホルダー面 */
  --surface-band:  #EAE4D8;  /* 予約検索バーの地 */
  --surface-input: #F6F3EC;  /* 入力欄の地 */
  --accent-deep:   #8F6F3F;  /* リンクのhover */
  --accent-light:  #C79E62;  /* CTAボタンのhover */
  --accent-rgb:     176,141,87;
  --navy-deep-rgb:   22,41,58;

  --font-mincho: 'Shippori Mincho', serif;   /* 屋号・和文見出し */
  --font-en:     'Cormorant Garamond', serif; /* 欧文見出し・数字 */
  --font-ja:     'Noto Sans JP', sans-serif;  /* 本文 */

  /* セクション左右パディング(マスターは全セクション60px) */
  --gutter: clamp(20px, 5vw, 60px);
  /* セクション縦パディング(マスターは170〜190px) */
  --gutter-y: clamp(80px, 12vw, 190px);

  --header-h: 96px;
}

/* ── リセット ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface);
  color: var(--navy);
  font-family: var(--font-ja);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
img { max-width: 100%; display: block; }
h1, h2, h3, p, dl, dd { margin: 0; }

/* マスターは1440px固定のキャンバスだったが、**帯もの(ヒーロー・予約バー・
   予約CTA・フッター)だけは画面いっぱいに広げる**(2026-08-13 ゆい氏指示
   「ワイドスクリーンで余白がない全幅のヒーローにしたい / 予約セクションも
   サイド余白なしのパノラマで」)。
   .page の上限を外し、読み物のセクションは .page-inner が 1440px で受ける。
   **.page 側に max-width を戻さないこと** ─ 戻すと 1440px より広い画面で
   ヒーローと予約CTAの左右に地色の余白が出て、パノラマに見えなくなる */
.page {
  background: var(--surface);
  overflow-x: clip;
}

/* 読み物のセクション(コンセプト〜アクセス)を包む。マスターの見えはここが持つ */
.page-inner {
  max-width: 1440px;
  margin: 0 auto;
}

/* ── 画像スロット ─────────────────────────────────────────
   build.py の slot() が吐く。**このテンプレートだけの扱い**:
   他テンプレの灰色ハッチングではなく、マスターの地色(--surface-slot /
   --navy-slot)を交互に敷く(デザイン課の「作り込みきらない」方針の中でも、
   マスター自身が地色ブロックでモックしていたのに合わせた表現)。
   extra_class="slot-dark" を渡すと濃い面(--navy-slot)になる。 */
.slot {
  position: relative;
  background: var(--surface-slot);
  color: var(--navy);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.slot-dark { background: var(--navy-slot); color: var(--surface); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
/* **枠に高さがある画像スロットは、スロット自身も枠いっぱいに伸ばす。**
   .slot は高さ指定の無いフレックスなので、放っておくと高さが中の img で決まる。
   img の `height:100%` は親が auto height だと auto に落ちるため、
   **素材の縦横比そのままの高さになり、枠(620px など)を突き抜ける**。
   予約CTAでは 620px の枠に対して画像が 1350px に伸び、
   **下のフッターを覆っていた**(2026-08-13 ゆい氏指摘「フッターまで画像が来ている」)。
   高さが小さい枠では逆に地色の隙間が残っていた。
   .social-grid の6枚は .slot 自身が aspect-ratio:1 のグリッド要素なので対象外 */
.concept-media .slot,
.feature-media .slot,
.cuisine-media-a .slot,
.cuisine-media-b .slot,
.cta-media .slot { height: 100%; }
.slot-label {
  padding: 14px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(31, 58, 77, .5);
}
.slot-dark .slot-label { color: rgba(242, 238, 230, .6); }
.slot-wrap { display: flex; flex-direction: column; }
.slot-wrap .slot { flex: 1; }
.slot-note {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(31, 58, 77, .55);
}

/* ── ヘッダー ───────────────────────────────────────────
   マスターは fixed。スクロール120pxで transparent → surface に反転し、
   ロゴとナビの色も surface → navy に変わる(切り替えは末尾の <script>)。
   **fixed はフローから外れるので、ヒーロー側に高さの調整は要らない**
   (運送テンプレのようなヒーロー引き上げのハックはこのテンプレでは不要)。 */
.mny-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  box-shadow: none;
  transition: background .5s ease, box-shadow .5s ease;
}
.mny-header.is-scrolled {
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb), .35);
}

.mny-header-in {
  max-width: 1440px;
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mny-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--surface);
  transition: color .5s ease;
}
.mny-header.is-scrolled .mny-brand { color: var(--navy); }
.mny-brand-ja {
  font-family: var(--font-mincho);
  font-size: 24px;
  letter-spacing: .28em;
  font-weight: 500;
  white-space: nowrap;
}
.mny-brand-en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .34em;
  opacity: .75;
  white-space: nowrap;
}

.mny-nav {
  display: flex;
  align-items: center;
  gap: 38px;
  color: var(--surface);
  transition: color .5s ease;
}
.mny-header.is-scrolled .mny-nav { color: var(--navy); }
.mny-nav a {
  color: inherit;
  font-size: 13px;
  letter-spacing: .22em;
  font-weight: 400;
  white-space: nowrap;
}
.mny-nav a:hover { opacity: .65; color: inherit; }
.mny-nav-cta {
  background: var(--navy);
  color: var(--surface) !important;
  font-size: 12px;
  letter-spacing: .24em;
  padding: 15px 30px;
  border: 1px solid var(--navy);
  opacity: 1 !important;
}
.mny-header.is-scrolled .mny-nav-cta { background: var(--navy); border-color: var(--navy); }
.mny-nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff !important; }

/* ── 01 ヒーロー ────────────────────────────────────────
   マスターは 900px の箱に映像を敷き、左下に特大キャッチ。**白カードは無い**
   ─ 文字が映像に直接乗る(運送・モノ系と同型)。
   hero_type: video のときは scroll-video-hero(hero.css)が 100svh に張り替える */
.hero {
  position: relative;
  z-index: 0;
  height: 900px;
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--surface);
}

.hero-visual { position: absolute; inset: 0; z-index: 0; }

/* 静止フォールバック(hero_type: photo / 動画到着前 / reduced-motion)。
   写真が無ければ藍のグラデーションで出る */
.hero-still {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 55% 40%, #1D3548 0%, var(--navy-deep) 60%, #0F1D29 100%);
}
.hero-still.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* マスターの上下グラデーション。**文字の可読性はこの層が持つ** */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(var(--navy-deep-rgb), .62) 0%,
    rgba(var(--navy-deep-rgb), .3) 45%,
    rgba(var(--navy-deep-rgb), .7) 100%);
  pointer-events: none;
}

/* ヒーローが全幅になっても、キャッチは**下の本文と同じ左端**に立たせる。
   1440px より広い画面では余白ぶんを足して 1440px キャンバスの左端へ寄せ、
   狭い画面では従来どおり gutter で止まる(max がその切り替え) */
.hero-catch {
  position: absolute;
  left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  bottom: 110px;
  z-index: 4;
  font-family: var(--font-mincho);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: .28em;
  line-height: 1.8;
  color: var(--surface);
  pointer-events: none;
  text-wrap: pretty;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.hero-scroll-label {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .34em;
  color: var(--surface);
  opacity: .7;
}
.hero-scroll-line {
  display: block;
  width: 1px;
  height: 52px;
  background: rgba(242, 238, 230, .75);
  animation: mnyFloat 2.6s ease-in-out infinite;
}
@keyframes mnyFloat {
  0%   { transform: translateY(0);    opacity: .9; }
  50%  { transform: translateY(9px);  opacity: .45; }
  100% { transform: translateY(0);    opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line { animation: none; }
}

/* ── 動画ヒーロー(scroll-video-hero)の旅館向けチューニング ────
   template.html は site.css → hero.css の順で読み込むので、
   モジュール側が後勝ちになる。ここで上書きするのは重なりと色だけ。
   マスターのベール(.hero-veil)を活かすため、モジュールのオーバーレイは消す */
.page .svh-overlay { background: none; }

/* 環境映像モード(低メモリ端末の降格先)だけは上端スクリムを残す。
   素材の上端が明るいカットだと白いロゴ/文字が飛ぶため */
.page .svh.is-ambient .svh-overlay {
  background: linear-gradient(180deg,
    rgba(var(--navy-deep-rgb), .55) 0%, rgba(var(--navy-deep-rgb), 0) 30%);
}

/* 退場区間。**キャッチは一切薄くしない(全テンプレ共通)**。持ち上げる動きだけ足す */
.page .hero.svh-exiting .hero-catch {
  transform: translateY(calc(var(--svh-exit, 0) * -24px));
}
.page .hero.svh-exiting .hero-scroll {
  opacity: calc(1 - var(--svh-exit, 0) * 1.6);
}
@media (prefers-reduced-motion: reduce) {
  .page .hero.svh-exiting .hero-catch,
  .page .hero.svh-exiting .hero-scroll { opacity: 1; transform: none; }
}

/* ── 02 コンセプト ──────────────────────────────────────── */

.concept {
  padding: var(--gutter-y) var(--gutter) calc(var(--gutter-y) * .89);
  display: grid;
  grid-template-columns: 1fr 700px;
  gap: 90px;
  align-items: center;
}
.concept-copy {
  display: flex;
  justify-content: flex-end;
  gap: 56px;
  padding-right: 20px;
}
.concept-lead {
  max-width: 340px;
  padding-top: 16px;
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: .08em;
  font-weight: 300;
  color: rgba(31, 58, 77, .82);
  text-wrap: pretty;
}
.concept-lead p { margin: 0 0 26px; }
.concept-lead p:last-child { margin-bottom: 0; }
.concept-heading {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: .42em;
  line-height: 1.9;
  height: 420px;
  flex: none;
}
.concept-media {
  position: relative;
  height: 560px;
}

/* ── 03/04 温泉・客室(共通の .feature) ──────────────────── */

.feature {
  display: grid;
  grid-template-columns: 840px 1fr;
  align-items: center;
  gap: 0;
  padding: 0 0 var(--gutter-y);
}
.feature--media-right { grid-template-columns: 1fr 840px; }

.feature-media { position: relative; height: 640px; }

.feature-body { padding: 0 var(--gutter) 0 calc(var(--gutter) + 18px); }
.feature--text-right .feature-body {
  padding: 0 calc(var(--gutter) + 18px) 0 var(--gutter);
  text-align: right;
}

.feature-en {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 58px;
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--navy);
}
.feature-ja {
  margin: 0 0 34px;
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: .34em;
  color: var(--accent);
}
.feature-rule {
  width: 56px;
  height: 1px;
  background: var(--accent);
  margin: 0 0 34px;
}
.feature--text-right .feature-rule { margin: 0 0 34px auto; }

.feature-heading {
  margin: 0 0 26px;
  font-family: var(--font-mincho);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1.9;
}
.feature-lead {
  margin: 0 0 40px;
  font-size: 14px;
  line-height: 2.4;
  letter-spacing: .08em;
  font-weight: 300;
  color: rgba(31, 58, 77, .8);
  text-wrap: pretty;
}
.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--navy);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 10px;
}
.feature-link:hover { color: var(--accent-deep); }
.feature-arw { font-family: var(--font-en); color: var(--accent); }

/* ── 05 お料理 ─────────────────────────────────────────── */

.cuisine { padding: 0 var(--gutter) calc(var(--gutter-y) * .95); }
.cuisine-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: end;
}
.cuisine-media-a { position: relative; height: 600px; }
.cuisine-side { display: flex; flex-direction: column; gap: 48px; }
.cuisine-media-b { position: relative; height: 300px; }
.cuisine-copy .feature-ja { margin-bottom: 30px; }
.cuisine-copy .feature-rule { margin-bottom: 30px; }
.cuisine-copy .feature-lead { margin-bottom: 34px; }

/* ── 06 予約検索バー(ダミーUI) ─────────────────────────── */

.reserve-bar {
  background: var(--surface-band);
  border-top: 1px solid rgba(var(--accent-rgb), .35);
  border-bottom: 1px solid rgba(var(--accent-rgb), .35);
  padding: 64px var(--gutter);
}
/* 帯は全幅、中身は1440pxで止める */
.reserve-bar-in {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.reserve-fields {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.reserve-label { padding-bottom: 6px; }
.reserve-label-en {
  margin: 0;
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--accent);
}
.reserve-label-ja {
  margin: 6px 0 0;
  font-family: var(--font-mincho);
  font-size: 18px;
  letter-spacing: .2em;
}
.reserve-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(31, 58, 77, .7);
}
.reserve-field input,
.reserve-field select {
  padding: 13px 14px;
  border: 1px solid rgba(31, 58, 77, .28);
  background: var(--surface-input);
  color: var(--navy);
  font-family: var(--font-ja);
  font-size: 13px;
  border-radius: 0;
}
.reserve-field input { width: 180px; letter-spacing: .06em; }
.reserve-field--nights select,
.reserve-field--guests select { width: 110px; }
.reserve-field--rooms select { width: 100px; }
.reserve-submit {
  padding: 15px 34px;
  background: var(--navy);
  color: var(--surface);
  border: 0;
  font-family: var(--font-ja);
  font-size: 12px;
  letter-spacing: .24em;
  cursor: pointer;
}
.reserve-submit:hover { background: var(--accent); }
.reserve-tel {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(31, 58, 77, .7);
}
.reserve-tel-num {
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--navy);
}

/* ── 07 Instagram ──────────────────────────────────────── */

.social { padding: var(--gutter-y) var(--gutter) calc(var(--gutter-y) * .84); text-align: center; }
.social-heading {
  margin: 0 0 12px;
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1;
}
.social-handle {
  margin: 0 0 56px;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--accent);
}
.social-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.social-grid .slot { aspect-ratio: 1; min-width: 0; }
.social-more {
  display: inline-block;
  margin-top: 52px;
  padding: 15px 40px;
  border: 1px solid rgba(31, 58, 77, .35);
  color: var(--navy);
  font-size: 12px;
  letter-spacing: .24em;
}
.social-more:hover { background: var(--navy); color: var(--surface); border-color: var(--navy); }

/* ── 08 お知らせ ───────────────────────────────────────── */

.news {
  padding: 0 var(--gutter) var(--gutter-y);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
}
.news-heading {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
}
.news-ja {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: .34em;
  color: var(--accent);
}
.news-list { border-top: 1px solid rgba(31, 58, 77, .16); }
.news-item {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 28px 4px;
  border-bottom: 1px solid rgba(31, 58, 77, .16);
  color: var(--navy);
}
.news-item:hover { background: rgba(var(--accent-rgb), .07); color: var(--navy); }
.news-date {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--accent);
}
.news-title {
  font-family: var(--font-mincho);
  font-size: 16px;
  letter-spacing: .1em;
}
.news-tag { font-size: 11px; color: rgba(31, 58, 77, .45); }

/* ── 09 アクセス ───────────────────────────────────────── */

.access {
  padding: 0 var(--gutter) calc(var(--gutter-y) * .95);
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 70px;
  align-items: center;
}
/* **地図は絵ではなく情報**なので、切らずに全部見せる。
   プレースホルダー(マスターの480pxの箱)のままだと、4:3 の地図を
   1.7:1 の枠へ cover することになり、経路の凡例やガイドが切れる。
   画像が入っているときだけ枠を素材の比率へ寄せる(:has で分岐) */
.access-media { position: relative; height: 480px; }
.access-media:has(img) { height: auto; aspect-ratio: 4 / 3; }
.access-media:has(img) .slot { height: 100%; }
.access-media .slot img { object-fit: contain; background: var(--surface-slot); }
.access-heading {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
}
.access-ja {
  margin: 0 0 32px;
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: .34em;
  color: var(--accent);
}
.access-rows {
  display: grid;
  grid-template-columns: 76px 1fr;
  row-gap: 20px;
  column-gap: 20px;
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: .08em;
  font-weight: 300;
}
.access-rows dt {
  color: rgba(31, 58, 77, .55);
  font-size: 11px;
  letter-spacing: .2em;
  padding-top: 4px;
}
.access-rows dd { margin: 0; }

/* ── 10 予約CTA ────────────────────────────────────────── */

/* **画面いっぱいのパノラマ**(2026-08-13 ゆい氏指示)。左右に地色を残さない。
   .page-inner の外に置いてあるので、ここは何もしなくても全幅になる */
.cta {
  position: relative;
  height: 620px;
  overflow: hidden;          /* 画像を帯の中で閉じる(フッターへ流さない) */
  color: var(--surface);
  background: var(--navy-deep);
}
.cta-media { position: absolute; inset: 0; }
/* **写真は上を残して下を切る。** 素材(高台の露天から見下ろす海)は空と水平線が
   主役で、下端はウッドデッキ。中央合わせだと足元ばかりが帯に残るうえ、
   暗いデッキがそのまま下のフッターへ繋がって「写真がフッターまで続いている」
   ように見える(同日ゆい氏指摘)。center top で下側をトリミングする */
.cta .slot img { object-position: center 35%; }
.cta-veil {
  position: absolute;
  inset: 0;
  background: rgba(var(--navy-deep-rgb), .62);
  pointer-events: none;
}
.cta-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
  padding: 0 var(--gutter);
}
.cta-heading {
  margin: 0;
  font-family: var(--font-en);
  font-size: 64px;
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1;
}
.cta-lead {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 16px;
  letter-spacing: .22em;
  line-height: 2.2;
  opacity: .9;
  text-wrap: pretty;
}
.cta-button {
  margin-top: 14px;
  padding: 19px 56px;
  background: var(--accent);
  color: #fff !important;
  font-size: 13px;
  letter-spacing: .26em;
}
.cta-button:hover { background: var(--accent-light); color: #fff !important; }
.cta-tel { margin: 0; font-size: 12px; letter-spacing: .16em; opacity: .72; }

/* ── フッター ───────────────────────────────────────────── */

/* **フッターは生成りの地**(2026-08-13 ゆい氏指示)。
   マスターは藍(--navy)だったが、上の予約CTAが暗い写真の帯なので、
   藍のフッターが続くと**写真がフッターまで伸びているように見える**。
   地色を変えて、写真の帯を予約CTAの中で閉じる。
   **藍へ戻さないこと** ─ 戻すと同じ見え方に逆戻りする。
   文字色・罫線・SNSボタンの枠は、この地色に合わせて藍側へ振ってある */
.site-footer {
  background: var(--surface);
  color: var(--navy);
  padding: 100px var(--gutter) 40px;
  border-top: 1px solid rgba(var(--accent-rgb), .35);
}

.footer-top {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(31, 58, 77, .16);
}
.footer-name {
  margin: 0 0 8px;
  font-family: var(--font-mincho);
  font-size: 26px;
  letter-spacing: .3em;
  font-weight: 400;
}
.footer-en {
  margin: 0 0 30px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .34em;
  opacity: .7;
}
.footer-addr {
  margin: 0;
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: .1em;
  font-weight: 300;
  opacity: .8;
}
.footer-social { display: flex; gap: 12px; margin-top: 32px; }
.footer-social a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(31, 58, 77, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--navy);
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 14px 40px;
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 300;
  align-content: start;
}
.footer-nav a { color: rgba(31, 58, 77, .85); }
.footer-nav a:hover { color: var(--accent); }

.footer-bottom {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .6;
}
.footer-credit {
  display: block;
  max-width: 1440px;
  margin-inline: auto;
  margin-top: 12px;
  font-size: 11px;
  opacity: .6;
}
.footer-credit a { text-decoration: underline; color: inherit; }

/* ============================================================
   レスポンシブ
   1440px の見えはマスターと同一。ここから下は畳み方の定義。
   ============================================================ */

/* ── 1080px: 2カラムの固定pxを minmax()/fr へ ───────────── */
@media (max-width: 1080px) {
  .concept { grid-template-columns: 1fr minmax(320px, 560px); gap: 56px; }
  .concept-heading { height: 380px; }

  .feature { grid-template-columns: minmax(320px, 640px) 1fr; }
  .feature--media-right { grid-template-columns: 1fr minmax(320px, 640px); }
  .feature-media { height: 520px; }
  .feature-body,
  .feature--text-right .feature-body { padding-left: var(--gutter); padding-right: var(--gutter); }

  .cuisine-grid { grid-template-columns: 1.4fr 1fr; gap: 40px; }
  .cuisine-media-a { height: 480px; }
  .cuisine-media-b { height: 240px; }

  .access { grid-template-columns: 1fr minmax(300px, 380px); gap: 48px; }
  .access-media { height: 400px; }

  .news { grid-template-columns: 220px 1fr; gap: 40px; }

  .footer-top { gap: 48px; }
}

/* ── 768px: 1カラム化。ヘッダーはロゴ+ご予約だけ残す ───────
   hero.js の判定と揃える値(モジュール側のコメント参照)。 */
@media (max-width: 768px) {
  :root { --header-h: 72px; }

  /* ハンバーガーは作らない(2026-08-13 計画どおり)。中間のナビリンクだけ畳む */
  .mny-nav a:not(.mny-nav-cta) { display: none; }
  .mny-nav { gap: 0; }
  .mny-nav-cta { padding: 12px 22px; font-size: 11px; }
  .mny-brand-ja { font-size: 19px; }
  .mny-brand-en { display: none; }

  /* 動画ヒーローは hero.css が 100svh へ張り替える(モジュール既定)。
     静止ヒーロー(hero_type: photo)側だけここで詰める */
  .hero { height: 640px; }
  .hero-catch { left: var(--gutter); bottom: 64px; font-size: 24px; }
  .hero-scroll { display: none; }

  .concept {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 96px var(--gutter) 80px;
  }
  .concept-copy { justify-content: flex-start; padding-right: 0; gap: 32px; }
  .concept-heading { height: 280px; font-size: 26px; }
  .concept-media { height: 320px; }

  /* 画像が先・テキストが後。客室の text-align:right も left へ戻す */
  .feature {
    grid-template-columns: 1fr;
    padding-bottom: 80px;
  }
  .feature--media-right { grid-template-columns: 1fr; }
  .feature--media-right .feature-body { order: 2; }
  .feature--media-right .feature-media { order: 1; }
  .feature-media { height: 360px; }
  .feature-body,
  .feature--text-right .feature-body {
    padding: 56px var(--gutter) 0;
    text-align: left;
  }
  .feature--text-right .feature-rule { margin: 0 0 34px; }
  .feature-en { font-size: 40px; }

  .cuisine { padding-bottom: 80px; }
  .cuisine-grid { grid-template-columns: 1fr; gap: 32px; }
  .cuisine-media-a { height: 320px; }
  .cuisine-side { flex-direction: column; }
  .cuisine-media-b { height: 220px; }

  .reserve-bar { padding: 40px var(--gutter); }
  .reserve-bar-in { flex-direction: column; align-items: stretch; gap: 24px; }
  .reserve-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .reserve-label { grid-column: 1 / -1; padding-bottom: 0; }
  .reserve-field--checkin { grid-column: 1 / -1; }
  .reserve-field input,
  .reserve-field select { width: 100%; }
  .reserve-submit { grid-column: 1 / -1; width: 100%; }
  .reserve-tel { text-align: left; }

  .social { padding: 88px var(--gutter) 72px; }
  .social-heading { font-size: 34px; }
  .social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .news { grid-template-columns: 1fr; gap: 24px; padding-bottom: 88px; }
  .news-item {
    grid-template-columns: 1fr auto;
    grid-template-areas: "date tag" "title title";
    row-gap: 6px;
  }
  .news-date { grid-area: date; }
  .news-tag { grid-area: tag; }
  .news-title { grid-area: title; }

  .access { grid-template-columns: 1fr; gap: 32px; padding-bottom: 88px; }
  .access-media { height: 280px; }

  .cta { height: 480px; }
  .cta-heading { font-size: 44px; }
  .cta-lead { font-size: 14px; }
  .cta-button { padding: 16px 44px; }

  .site-footer { padding: 72px var(--gutter) 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 640px: さらに詰める ─────────────────────────────────── */
@media (max-width: 640px) {
  .hero-catch { font-size: 20px; letter-spacing: .22em; }

  .concept-lead { max-width: none; }
  .concept-media { height: 260px; }

  .feature-media { height: 280px; }
  .feature-en { font-size: 34px; }
  .feature-heading { font-size: 21px; }

  .cuisine-media-a { height: 260px; }

  .reserve-fields { grid-template-columns: 1fr; }
  .reserve-field--checkin { grid-column: auto; }

  .social-heading { font-size: 28px; }

  .news-item { padding: 22px 4px; }

  .access-media { height: 220px; }

  .footer-nav { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
}

/* ── 横持ち(高さが低い) ─────────────────────────────────
   16:9 に近い画面なので、動画ヒーローは従来どおり全面 cover のまま
   (モジュール既定に任せる。テンプレ側は下端の余白だけ詰める) */
@media (max-width: 900px) and (max-height: 480px) {
  .hero-catch { bottom: 28px; font-size: 18px; }
  .hero-scroll { display: none; }
}