@charset "UTF-8";
/* =============================================================
   base.css — デザイントークン / リセット / 共通ユーティリティ
   色・フォントは :root の変数に集約し、各CSSは変数だけを参照する（値の直書き禁止）。
   値は new-theme.js が project.json の brand.colors / brand.fonts から置換する。
   ============================================================= */
:root {
  /* ---- 色（案件の brand.colors） ---- */
  --fs-primary: #c38b8d;   /* メインカラー：くすみピンク（CTA・コピーライト帯・ボタン） */
  --fs-accent:  #c38b8d;    /* アクセント：英字ラベル・アイコン・ライン */
  --fs-text:    #333333;      /* 本文 */
  --fs-heading: #222222;   /* 見出し（明朝・ほぼ黒） */

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

  /* ---- 本番サイトから採取した配色（キャプチャ実測） ---- */
  --fs-ivory:     #fffdf9;  /* お知らせ帯などの温かい白 */
  --fs-pink-soft: #fef3f5;  /* 婦人科セクションの淡いピンク */
  --fs-beige-soft:#fdf3ec;  /* 内科セクションの淡いベージュ */
  --fs-footer-bg: #f8f1f1;  /* フッター背景 */
  --fs-btn-web:   #e7c2ab;  /* 追従CTA：WEB予約（ベージュ） */
  --fs-btn-tel:   #d6acaa;  /* 追従CTA：電話予約（ピンク） */
  --fs-table-th:  #ebebeb;  /* 診療時間表のヘッダー行 */
  --fs-mark:      #d2a3a0;  /* 診療時間表の●印 */
  --fs-font-sans: 'Noto Sans JP', sans-serif; /* 補足・小さい文字でゴシックを使う場合 */

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

  /* ---- レイアウト ---- */
  --fs-wrap:        1120px;  /* コンテンツ最大幅 */
  --fs-wrap-narrow: 960px;
  --fs-gutter:      20px;
  --fs-header-h:    72px;    /* sticky ヘッダーの高さ（アンカー位置の補正に使う） */
}

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