/* tokens.css — デザイントークン（桃寿苑 TOP モックアップ実測値）
 *
 * カラー       : --color-{role}（記述的・案件ごとに値を差し替える）
 * フォントサイズ: html{font-size:62.5%}（1rem=10px）前提の --fs-* スケール（規範的）
 * レイアウト   : 繰り返す寸法を -pc/-sp で持つ
 *
 * font-size と色は直書きせず、必ずこのトークンを参照する（my-web-style 規約）。
 */

html {
  /* 1rem = 10px（font-size は rem、余白は px で書くための基準） */
  font-size: 62.5%;
}

:root {
  /* ── Color roles（モックアップPNG実測）───────────────────────── */
  --color-primary: #ff5b87;
  /* メインピンク: 見出し・ボタン文字・カード枠・ナビ文字 */
  --color-secondary: #ff6399;
  /* 濃ピンク: フッターbg・ピルボタン枠・プライバシー下線 */
  --color-tertiary: #45cc9f;
  /* グリーン: ヒーローキャッチ・ショートステイ */
  --color-quaternary: #19b4df;
  /* ブルー: 訪問リハビリテーション */
  --color-font: #333;
  --color-border: #d9d9d9;
  /* お知らせ一覧の罫線 */
  --color-alternate: #ffeff3;
  /* 淡ピンクのセクション背景（about/医療/アクセス） */
  --color-gray: #4b4b4b;
  --color-white: #fff;
  --color-selection-bg: var(--color-primary);
  --color-selection-text: var(--color-white);
  --color-hr: #e6e6e6;
  --color-red: #d93b3b;
  /* エラー表示（CF7のバリデーション文言・エラー項目の枠） */
  --color-bg-red: #fdeaea;
  /* エラーメッセージの背景 */

  /* 案件特有色（記述的に追加） */
  --color-nav-band: #ffc9dc;
  /* グローバルナビ帯 */
  --color-nav-active: #ff88b1;
  /* ナビ active/hover 帯 */
  --color-cta: #ffb2cd;
  /* CTAセクション背景（左端） */
  --color-cta-end: #ffd4e8;
  /* CTAセクション背景（右端。左→右グラデ） */
  --color-table-stripe: #f4f4f4;
  /* 公表テーブルの縞背景 */
  --color-bg-green: #ecfaf5;
  /* サービスカード背景（ショートステイ） */
  --color-bg-blue: #e8f8fc;
  /* サービスカード背景（訪問リハビリ） */
  --color-line-blue: #62d0ee;
  /* サービスカード区切り線（青。緑は heading-line-green） */
  --color-cell-cream: #fffbee;
  /* 料金表の見出しセル背景 */
  --color-cell-pink2: #ffe0eb;
  /* 料金表 2割負担セル */
  --color-btn-more-hover: #ffe6ed;
  /* 「詳しく見る」ボタン hover 背景 */
  --color-cell-pink3: #ffd1e1;
  /* 料金表 3割負担セル */
  --color-heading-line: #ff88b6;
  /* セクション見出し下線 */
  --color-heading-line-green: #70dda2;
  /* 見出し下線（桃だよりのみ緑） */
  --color-grad-pink-start: #ff699e;
  /* 塗りボタングラデ */
  --color-grad-pink-end: #ffa7ce;
  --color-grad-green-start: #44cc9f;
  /* メールボタングラデ */
  --color-grad-green-end: #a6f2a5;
  --color-momo-start: #c6efe2;
  /* 桃だよりボックス背景グラデ */
  --color-momo-end: #e7fce4;
  --color-btn-shadow: #ffa5c8;
  /* ボタンのソリッド影 */
  --color-panel: rgba(255, 255, 255, 0.92);
  /* メガメニューパネル背景（写真に重なるため半透明） */
  --color-veil-strong: rgba(255, 255, 255, 0.9);
  /* 下層ページヘッダーの白オーバーレイ（左端） */
  --color-veil-weak: rgba(255, 255, 255, 0.1);
  /* 同（右端） */

  /* ── Font size scale（規範的・1rem=10px。直書き禁止）─────────── */
  --fs-xxs: 1rem;
  /* 10px：コピーライト */
  --fs-xs: 1.4rem;
  /* 14px：プライバシーポリシー */
  --fs-sm: 1.6rem;
  /* 16px：お知らせ一覧・受付時間・フッターナビ */
  --fs-base: 1.8rem;
  /* 18px（19px統合）：本文・ナビ・ボタン・アクセス */
  --fs-md: 2.2rem;
  /* 22px：CTAメールボタン */
  --fs-lg: 2.4rem;
  /* 24px：CTAリード */
  --fs-xl: 2.8rem;
  /* 28px（29/30px統合）：カード見出し・ヒーローサブ */
  --fs-2xl: 3.4rem;
  /* 34px（36px統合）：セクション見出し・ヘッダー電話 */
  --fs-3xl: 4.5rem;
  /* 45px：ヒーローキャッチ */
  --fs-4xl: 5.2rem;
  /* 52px：CTA電話番号 */
  --fs-5xl: 11.5rem;
  /* 115px：ご利用までの流れのステップ番号 */

  /* ── Motion（シグネチャモーション）───────────────────────────
   * 動き(開閉・移動)は --ease-move、色・不透明度の変化は既定の ease でよい。 */
  --duration: 0.3s;
  --duration-slow: 0.6s;
  /* 大きな動き・強調 */
  --ease-move: cubic-bezier(0.77, 0, 0.18, 1);

  /* ── Z-index bands（2つの帯で運用。9999禁止）───────────────── */
  --z-content: 1;
  /* コンテンツ内の前後 */
  --z-sticky: 10;
  /* sticky・メガメニュー */
  --z-header: 11;
  /* header */
  --z-nav: 12;
  /* nav-toggle・モバイルパネル */

  /* ── Layout tokens（px・-pc/-sp でレスポンシブ差分）─────────── */
  --container: min(1000px, 100% - 66px);
  /* コンテンツ幅（実測 x140-1140）。ビューポートが狭いときは左右33pxの余白を確保して見切れを防ぐ */
  --wrapper: min(726px, 100% - 66px);
  /* お知らせ一覧の幅（実測724を5.5グリッドに丸め）。狭いときの扱いは --container と同じ */

  --header-pc: 121px;
  /* 実測120 */
  --header-sp: 66px;

  --nav-band: 44px;
  /* グローバルナビ帯高さ（実測47） */

  --logo-pc: 77px;
  --logo-sp: 44px;

  --gap-pc: 66px;
  /* カード3列のgap（実測64） */
  --gap-sp: 22px;
  --gap-mobile: 44px;

  --menu-size: 66px;
  --menu-space: 8px;
  --menu-line: 4px;
}