/* =============================================================
   base.css — 全体トークン / リセット / タイポグラフィの土台
   現行(sakurashika-clinic.jp)の実測値をトークン化して1:1再現の基準にする。
   ============================================================= */

/* ---------- デザイントークン（現行実測） ---------- */
:root {
  /* メインカラー：ピンク */
  --c-pink:        #d76c94;   /* メインピンク（CTA・アクセント） */
  --c-pink-2:      #d86d91;   /* 同系ピンク */
  --c-pink-soft:   #d28fb0;   /* やわらかいピンク */
  --c-pink-100:    #f2c6cc;   /* 淡ピンク */
  --c-pink-050:    #fff6f9;   /* ごく淡いピンク背景 */
  --c-pink-040:    #fff0f4;   /* 淡ピンク背景 */
  --c-pink-tint:   #f3bfd4;   /* 差し色ピンク */
  --c-pink-tint2:  #fbd3db;   /* 差し色ピンク2 */

  /* ブラウン / ゴールド系（文字・上品な差し色） */
  --c-brown:       #5b4633;   /* 見出し・本文の濃茶 */
  --c-brown-2:     #644a2f;   /* 濃茶2 */
  --c-gold:        #977c4c;   /* ゴールド */

  /* ローズ / レッド系（差し色） */
  --c-rose:        #a6586a;
  --c-red:         #a14242;
  --c-plum:        #8b4051;

  /* 汎用 */
  --c-text:        #333333;
  --c-white:       #ffffff;
  --c-bg:          #ffffff;

  /* フォント（現行はほぼGoogle Fonts） */
  --font-serif:    'Noto Serif JP', 'Noto Serif', serif;      /* 本文・見出しの主役（明朝） */
  --font-sans:     'Noto Sans JP', 'Lato', sans-serif;         /* 補助のゴシック */
  --font-script:   'Great Vibes', cursive;                     /* 装飾スクリプト */
  --font-en-serif: 'Lora', 'Bentham', serif;                   /* 欧文セリフ */

  /* レイアウト */
  --wrap:          1200px;   /* コンテンツ最大幅（後で現行に合わせ微調整） */
  --wrap-narrow:   960px;
  --gutter:        20px;
}

/* ---------- 最小リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.8;
  font-size: 16px;
}
img, picture, video, svg { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 共通ユーティリティ ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.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;
}