@charset "UTF-8";
/* =============================================================
   base.css — デザイントークン / リセット / 共通ユーティリティ
   色・フォントは :root の変数に集約し、各CSSは変数だけを参照する（値の直書き禁止）。
   値は new-theme.js が project.json の brand.colors / brand.fonts から置換する。
   ============================================================= */
:root {
  /* ---- 色（本番サイトの実測値。Brizy のグローバルカラーと同じ） ---- */
  --fs-primary: #ff7d81;   /* メインカラー：カレンダー見出し・ボタン */
  --fs-accent:  #ffb0aa;   /* アクセント：小見出し・パンくず・ページトップ */
  --fs-text:    #666666;   /* 本文 */
  --fs-heading: #1c1c1c;   /* 見出し */

  /* ---- 本番固有の色（ロゴ・電話・フッターなど） ---- */
  --fs-logo-1:    #fe9a9d;  /* ロゴ欧文の頭文字 */
  --fs-logo-2:    #ffbdbd;  /* ロゴ欧文の小文字 */
  --fs-name:      #4c4c4c;  /* 医院名 */
  --fs-tel:       #ed9a91;  /* 電話番号 */
  --fs-brown:     #584325;  /* 住所・フッター見出し */
  --fs-salmon:    #ff8a8d;  /* 完全予約制 */
  --fs-cal-head:  #bd635b;  /* 休診カレンダー見出し */
  --fs-pale:      #f5d4d1;  /* 歯アイコン・細線 */
  --fs-pink-pale: #fddde6;  /* 休診日セル */
  --fs-prefooter: #fff5f1;  /* フッター上段の背景 */
  --fs-copy-bg:   #f2f3f5;  /* コピーライト帯の背景 */
  --fs-spbar:     #f9d9e2;  /* SP固定ナビの背景 */
  --fs-spbar-2:   #f3b8c7;  /* SP固定ナビの罫線・ホバー */

  /* ---- 派生色（自動。手で足すのは可） ---- */
  --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:  #666666;   /* 補足・日付 */
  --fs-line:   #ebebeb;   /* 罫線（Brizy global color6） */
  --fs-line-2: #f3f3f3;   /* 薄い罫線・背景 */
  --fs-white:  #fff;
  --fs-line-color: #06c755; /* LINE ボタン（ブランド指定色） */

  /* ---- フォント ----
   *  本番は本文に 'Noto Sans Javanese'（ジャワ文字用）が指定されており、日本語は端末既定の
   *  ゴシックへフォールバックしていた。'Noto Sans JP' の選択ミスとみて置き換えている。
   */
  --fs-font-base:  'Noto Sans JP', sans-serif;      /* 本文 */
  --fs-font-serif: 'Noto Serif JP', serif;          /* 見出し（明朝） */
  --fs-font-en:    'Montserrat', 'Lato', sans-serif; /* ロゴ・キャッチ・住所などの欧文 */

  /* ---- レイアウト（本番の実測コンテナ幅） ---- */
  --fs-wrap:        1160px;  /* ヘッダー */
  --fs-wrap-narrow: 1022px;  /* フッター上段 */
  --fs-wrap-crumb:  1170px;  /* パンくず */
  --fs-gutter:      20px;
  --fs-header-h:    86px;    /* 追従ヘッダーの高さ（アンカー位置の補正に使う） */
}

/* ---------- 最小リセット ---------- */
*, *::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%; }
}