@charset "UTF-8";
/* ============================================================
   tokens.css ― きれい矯正歯科
   出典：handoff/REBUILD_SPEC.md 4章（実測値。目視推定なし）
   ⚠ ここに無い色・余白を各CSSに直値で書かないこと。
      足りない値が出たら、勝手に足さずに理由と一緒に相談する。
   ============================================================ */

:root {
  /* --- 4-1. 地色 ------------------------------------------- */
  --c-base:         #FAF7F2;  /* ページ全体の地色 */
  --c-base-header:  #FDFBF7;  /* ヘッダー・お知らせ帯・サイドナビ・SPメニュー・下部固定バー・症状カード */
  --c-base-alt:     #F5EEE4;  /* 交互に敷く地色・料金の「お支払いについて」枠 */
  --c-card:         #FFFFFF;  /* カード面・写真の上の札・料金表の行・フォームの入力欄 */
  --c-footer:       #2A1810;  /* フッターの地色 */

  /* --- 4-2. 文字色（背景と必ず対で使う。単独で選ばない） ----- */
  --c-ink-strong:   #2E2019;  /* 見出し・フォームのラベル        base上 14.70:1 */
  --c-ink:          #3B2E26;  /* 本文・入力欄の文字              base上 12.25:1 */
  --c-ink-mid:      #5A4B3F;  /* 説明文                          base上  7.82:1 */
  --c-ink-sub:      #6D5D50;  /* カード内の補足                  base上  5.90:1 */
  --c-ink-weak:     #7E6F61;  /* 日付・受付時間・注記            base上  4.53:1 */
  --c-mute:         #776F67;  /* 診療時間表の「−」（休診）       card上  4.94:1 */
  --c-brand:        #7C3D26;  /* リンク・枠線ボタン・料金の金額  base上  7.70:1 */
  --c-brand-hover:  #A06248;  /* リンクのホバー                  base上  4.53:1 */
  --c-gold-info:    #886D4C;  /* 診療時間表の「△」・症状カードのかな  card上 4.84:1 */

  /* --- 4-3. ブランド色・グラデーション ---------------------- */
  --c-brand-light:  #8A4A2F;  /* CTAグラデ明側 */
  --c-brand-dark:   #5E2A18;  /* CTAグラデ暗側・ページヘッダー帯暗側 */
  --c-gold:         #B08D63;  /* ★装飾専用。薄地の上で2.87:1。情報に使わない */
  --c-gold-light:   #D8B98F;  /* ★装飾専用。カードの番号・歯の飾り・グラデ線 */
  --c-gold-on-brand:#E5D0B4;  /* 濃い茶の帯の上の英字ラベル・パンくず */
  --c-gold-pale:    #F3E4D2;  /* 濃色面の上の文字（STEP丸バッジ・診療時間表ヘッダー） */
  --c-on-dark:      #F9F3EC;  /* CTAボタンの文字 */

  --grad-cta:        linear-gradient(135deg, #8A4A2F 0%, #7C3D26 55%, #5E2A18 100%);
  --grad-cta-side:   linear-gradient(160deg, #8A4A2F 0%, #7C3D26 55%, #5E2A18 100%);
  --grad-pageheader: linear-gradient(135deg, #5E2A18 0%, #7C3D26 55%, #8A4A2F 100%);
  --grad-reserve:    linear-gradient(135deg, #5E2A18 0%, #7C3D26 48%, #8A4A2F 100%);

  /* --- 罫線 ------------------------------------------------- */
  --c-line:         #EFE6D9;  /* カード・入力欄 */
  --c-line-header:  #EAE0D3;  /* ヘッダー系 */

  /* --- 書き出しHTMLに実在した派生色（4章の表に無い実測値） --- */
  --c-hero-ink:     #FBF6EF;  /* ヒーローの見出し */
  --c-hero-body:    #F0E3D4;  /* ヒーローの本文 */
  --c-on-brand-body:#E8D6C4;  /* 予約CTA帯の本文 */
  --c-footer-ink:   #CBB9A8;  /* フッター本文        footer上 7.29:1 */
  --c-footer-strong:#F3EAE0;  /* フッター院名・リンクホバー */
  --c-footer-weak:  #958072;  /* フッター最下部      footer上 4.60:1 */
  --c-gold-line:    #C9A876;  /* セクション見出しの装飾線（aria-hidden） */
  --c-base-hover:   #F7F1E8;  /* お知らせ行のホバー地色・メガメニューのグラデ暗側 */
  --c-tooth-dark:   #4E2212;  /* 歯の飾りの最も濃い側 */

  /* --- 4-4. 書体 -------------------------------------------- */
  --f-mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  --f-gothic: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --f-latin:  'Cormorant Garamond', serif;

  /* 字間（4-4の決まり）
     明朝＝0.12〜0.16em ／ 英字＝0.26em以上 */
  --ls-mincho:      0.12em;
  --ls-mincho-wide: 0.16em;
  --ls-latin:       0.26em;
  --lh-body:        2.1;      /* 本文の行間は2.1以上 */

  /* --- 4-5. 余白・角丸 -------------------------------------- */
  --w-content: 1360px;  /* 標準 */
  --w-narrow:  1100px;  /* 2カラム */
  --w-read:     880px;  /* 読み物・フォーム */
  --pad-x:       24px;  /* 左右padding */
  --radius:       2px;  /* 角丸は全面共通2px。円のみ50% */
  --border: 1px solid var(--c-line);

  /* セクションの縦余白（書き出しの clamp をそのまま） */
  --sp-section:     clamp(64px, 9vw, 120px);
  --sp-section-btm: clamp(56px, 8vw, 110px);
  --sp-band:        clamp(56px, 8vw, 110px);
  --sp-news:        clamp(48px, 6vw, 80px);
  /* 下層ページ本文の縦余白（引き渡しの全10ファイルから実測）
     上は2種類ある。Features / Treatment / Flow だけ 110px、他7ページは 100px。
     下は10ページとも 130px で共通。 */
  --sp-page-top:    clamp(56px, 8vw, 100px);
  --sp-page-top-lg: clamp(56px, 8vw, 110px);
  --sp-page-btm:    clamp(72px, 9vw, 130px);

  /* --- ヘッダー高さ（2章。1024pxで切り替わる） -------------- */
  --h-header:  96px;
  --h-bottombar: 64px;   /* 1024px未満の下部固定バーの高さ */

  /* --- 5. モーション ---------------------------------------- */
  --t-in:   0.3s ease;   /* ホバーに入る */
  --t-out:  1s ease;     /* ホバーから離れる */
  --ease-zoom: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- 影 --------------------------------------------------- */
  --sh-header:  0 8px 28px rgba(46, 32, 25, 0.10);
  --sh-card:    0 6px 18px rgba(46, 32, 25, 0.10);
  --sh-hover:   0 10px 28px rgba(124, 61, 38, 0.12);
  --sh-cta:     0 4px 14px rgba(124, 61, 38, 0.28);
  --sh-mega:    0 24px 40px rgba(46, 32, 25, 0.12);
  --sh-rail:    -6px 8px 28px rgba(46, 32, 25, 0.14);
  --sh-bottombar: 0 -8px 24px rgba(46, 32, 25, 0.10);
}

/* 1024px未満：ヘッダーが72pxに縮む（REBUILD_SPEC 2章）
   ⚠ SiteHeader と SiteFooter が別々に持っていた 1024 を、ここ1箇所に集約した。 */
@media (max-width: 1023px) {
  :root { --h-header: 72px; }
}

/* ------------------------------------------------------------
   ブレークポイント（REBUILD_SPEC 2章。HTMLにもCSSにも出ていなかった値）
   ⚠ メディアクエリは var() を使えないため、下記の値を直接書く。
      この3つ以外のブレークポイントを増やさないこと。

   max-width: 1023px  … ヘッダー/フッターの narrow（96→72px・ハンバーガー・下部固定バー）
   max-width: 1239px  … ヘッダー右の電話番号ブロックを隠す（tight）
   max-width: 1319px  … ヒーロー右上の縦書きコピー／SCROLL表示を隠す
   ------------------------------------------------------------ */