@charset "UTF-8";
/* =============================================================
   base.css — デザイントークン / リセット / 共通ユーティリティ
   色・フォントは :root の変数に集約し、各CSSは変数だけを参照する（値の直書き禁止）。
   値は new-theme.js が project.json の brand.colors / brand.fonts から置換する。
   ============================================================= */
:root {
  /* ---- 色（案件の brand.colors） ---- */
  --fs-primary: #007a96;   /* メインカラー：ナビ・見出しバー・ボタン */
  --fs-accent:  #00a6cc;    /* アクセント：CTA・ライン・アイコン */
  --fs-text:    #221815;      /* 本文 */
  --fs-heading: #2f4434;   /* 見出し */

  /* ---- 派生色（自動。手で足すのは可） ---- */
  --fs-primary-soft: #f3f6f9;                                        /* color-mix 非対応ブラウザ用フォールバック */
  --fs-primary-soft: color-mix(in srgb, var(--fs-primary) 8%, #fff); /* 淡い背景（帯・表ヘッダー） */
  --fs-accent-soft:  #f7f3f0;
  --fs-accent-soft:  color-mix(in srgb, var(--fs-accent) 12%, #fff);
  --fs-muted:  #7a8792;   /* 補足・日付 */
  --fs-line:   #dbe2e9;   /* 罫線 */
  --fs-line-2: #eef2f6;   /* 薄い罫線・背景 */
  --fs-white:  #fff;
  --fs-line-color: #06c755; /* LINE ボタン（ブランド指定色） */

  /* ---- 共通パーツの色（本番から採取。ヘッダー/ヒーロー/パンくず/フッター/追従CTA） ---- */
  --fs-catch:      #1e110d;  /* ヘッダー左上のキャッチ文 */
  --fs-nav-text:   #350a11;  /* グローバルナビ（和文） */
  --fs-nav-en:     #cba277;  /* グローバルナビ（英字） */
  --fs-nav-hover:  #221815;  /* ナビのホバー地色／ドロップダウン地色 */
  --fs-nav-sub-hover: #796661; /* ドロップダウン項目のホバー地色 */
  --fs-nav-line:   #ccc;     /* ナビの仕切り罫 */
  --fs-hero-en:    #38231a;  /* ヒーローの英字 */
  --fs-crumb-sep:  #777;     /* パンくずの区切り「›」 */
  --fs-footer-bg:  #272727;  /* フッター地色 */
  --fs-cta-tel:    #6b4920;  /* 追従CTA：電話予約 */
  --fs-cta-web:    #efeae4;  /* 追従CTA：WEB予約 */
  --fs-cta-label:  #c2a686;  /* 追従CTA：文字色 */

  /* ---- フォント（案件の brand.fonts）。個別要素で font-family を指定せず、ここからの継承を基本にする ---- */
  --fs-font-base:  'Noto Serif JP', serif;   /* 本文 */
  --fs-font-serif: 'Noto Serif JP', serif;  /* 見出し（明朝など） */
  --fs-font-en:    'Lato', sans-serif;     /* 欧文ラベル・数字 */

  /* ---- レイアウト ---- */
  --fs-wrap:        1170px;  /* コンテンツ最大幅（本番の Brizy コンテナと同じ） */
  --fs-wrap-narrow: 960px;
  --fs-gutter:      15px;
  --fs-header-h:    138px;   /* sticky ヘッダーの高さ（アンカー位置の補正に使う） */
}
@media screen and (max-width: 991px) {
  :root { --fs-header-h: 87px; }
}

/* ---------- 最小リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--fs-header-h); }
body {
  margin: 0;
  font-family: var(--fs-font-base);
  color: var(--fs-text);
  background: var(--fs-white);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  /* 横はみ出し対策は overflow-x: hidden ではなく clip を使う。
     hidden は body/html をスクロールコンテナにしてしまい、position: sticky のヘッダーが効かなくなる。
     clip はスクロールコンテナを作らないので sticky と両立する。 */
  overflow-x: clip;
}
img, picture, video, svg { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--fs-font-serif); color: var(--fs-heading); font-weight: 600; line-height: 1.5; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
i[class*="fa-"] { font-style: normal; } /* FontAwesome の <i> は font-family をアイコンフォントに保つ（親から継承させない） */

/* ---------- 共通ユーティリティ ---------- */
.wrap        { max-width: var(--fs-wrap); margin-inline: auto; padding-inline: var(--fs-gutter); }
.wrap-narrow { max-width: var(--fs-wrap-narrow); margin-inline: auto; padding-inline: var(--fs-gutter); }
.section     { padding-block: 60px; }
.fs-center   { text-align: center; margin-top: 34px; }
.fs-empty    { text-align: center; color: var(--fs-muted); padding: 40px 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 汎用ボタン（一覧へ戻る・もっと見る） */
.btn-more {
  display: inline-block; min-width: 240px; padding: 14px 32px;
  background: var(--fs-primary); color: var(--fs-white); font-weight: 600; text-align: center;
  transition: filter .2s, transform .2s;
}
.btn-more:hover { filter: brightness(1.1); transform: translateY(-2px); }
@media (max-width: 767px) {
  .section { padding-block: 40px; }
  .btn-more { min-width: 80%; }
}