{
 "name": "ファミリーファーストクリニック",
 "version": 1,
 "color": {
  "themes": [
   {
    "id": "light",
    "name": "ライト"
   },
   {
    "id": "dark",
    "name": "ダーク"
   }
  ],
  "tokens": [
   {
    "name": "paper",
    "value": {
     "light": "#F5F2EC",
     "dark": "#1B1F21"
    },
    "usage": "ページの地色（あたたかい紙の色）。ウェブ・ポスター・SNS投稿の基本の背景。"
   },
   {
    "name": "paper-2",
    "value": {
     "light": "#FBFAF7",
     "dark": "#22272A"
    },
    "usage": "交互に使うセクション帯（診療時間・アクセス、院長ごあいさつ）とトップの曲線帯。"
   },
   {
    "name": "surface",
    "value": {
     "light": "#FFFFFF",
     "dark": "#2A3033"
    },
    "usage": "paper の上に載せる面：診療時間表、診療案内カード、お知らせ枠、一覧の行、白ボタン。"
   },
   {
    "name": "line",
    "value": {
     "light": "#E3DDD3",
     "dark": "#3A4145"
    },
    "usage": "細罫、表の罫線、お知らせ一覧の区切り、ニュートラルなタグの枠線。"
   },
   {
    "name": "ink",
    "value": {
     "light": "#2B3236",
     "dark": "#ECE8E1"
    },
    "usage": "本文の文字色。paper・paper-2・surface・primary-soft の上で使用（ライト11:1以上、ダーク12:1以上）。"
   },
   {
    "name": "ink-2",
    "value": {
     "light": "#5B6469",
     "dark": "#B2B8BB"
    },
    "usage": "補足の文字：リード文、キャプション、日付、住所、カード本文。paper・paper-2・surface の上で使用（ライト5.4:1以上、ダーク7:1以上）。"
   },
   {
    "name": "primary",
    "value": {
     "light": "#2A6B8C",
     "dark": "#7DB8D8"
    },
    "usage": "FFCブルー。ロゴの空色を文字・塗り用に深めた色。塗りボタン、リンク、選択状態、見出しマークの1つ目の点、キャッチの強調語。paper・surface・primary-soft 上の文字としても使用可（両テーマ5:1以上）。"
   },
   {
    "name": "on-primary",
    "value": {
     "light": "#FFFFFF",
     "dark": "#10222C"
    },
    "usage": "primary の塗りの上の文字・アイコン（ネット予約ボタン、トップのタグ、スマホ下部バー）。"
   },
   {
    "name": "primary-soft",
    "value": {
     "light": "#E4EEF4",
     "dark": "#23343D"
    },
    "usage": "primary の文字の下に敷く淡い地：分類タグ（痛みを改善する治療）、情報の囲み。"
   },
   {
    "name": "sun",
    "value": {
     "light": "#E9A12E",
     "dark": "#E9A12E"
    },
    "usage": "FFCオレンジ。装飾専用：見出しマークの2つ目の点、行頭記号、アイコンの差し色、表紙やポスターの色面。明るい地の上で文字には使わない（2.2:1）。"
   },
   {
    "name": "sun-ink",
    "value": {
     "light": "#8F5600",
     "dark": "#F2BE66"
    },
    "usage": "文字や意味のある印としてオレンジを読ませる場合の色。paper・surface 上で使用（ライト5.3:1以上、ダーク7.9:1以上）。キーボードのフォーカスリングにも使用。"
   },
   {
    "name": "leaf",
    "value": {
     "light": "#86B33F",
     "dark": "#86B33F"
    },
    "usage": "FFCグリーン。装飾専用：見出しマークの3つ目の点、ポスターやSNSの差し色。明るい地の上で文字には使わない（2.5:1）。"
   },
   {
    "name": "leaf-ink",
    "value": {
     "light": "#4C6E1B",
     "dark": "#A9D46A"
    },
    "usage": "文字や意味のある印として緑を読ませる場合の色。paper・surface 上で使用（ライト5.8:1以上、ダーク7.9:1以上）。"
   },
   {
    "name": "logo-blue-top",
    "value": "#96CCEE",
    "usage": "グラデーションロゴ：青い人物の上端色。ロゴ本体と印刷・サインの大きな色面のみ。文字には使わない。"
   },
   {
    "name": "logo-blue-bottom",
    "value": "#599DCE",
    "usage": "グラデーションロゴ：青い人物の下端色。ロゴ本体、大きな色面、表紙の色面。"
   },
   {
    "name": "logo-orange-top",
    "value": "#F3B64C",
    "usage": "グラデーションロゴ：オレンジの人物の上端色。ロゴ本体と大きな色面のみ。"
   },
   {
    "name": "logo-orange-bottom",
    "value": "#E28B20",
    "usage": "グラデーションロゴ：オレンジの人物の下端色。ロゴ本体と大きな色面のみ。"
   },
   {
    "name": "logo-green-top",
    "value": "#9EC957",
    "usage": "グラデーションロゴ：緑の人物の上端色。ロゴ本体と大きな色面のみ。"
   },
   {
    "name": "logo-green-bottom",
    "value": "#6FA238",
    "usage": "グラデーションロゴ：緑の人物の下端色。ロゴ本体と大きな色面のみ。"
   },
   {
    "name": "logo-tile-top",
    "value": "#D8EBF6",
    "usage": "グラデーションロゴ：十字の角丸タイルの上端色。"
   },
   {
    "name": "logo-tile-bottom",
    "value": "#A8C7E0",
    "usage": "グラデーションロゴ：十字の角丸タイルの下端色。十字そのものは白。"
   },
   {
    "name": "logo-ink",
    "value": "#37474F",
    "usage": "グラデーションロゴのワードマーク（Family First Clinic／ファミリーファーストクリニック）の色。ロゴ本体のみ。本文は ink か ink-2 を使う。"
   },
   {
    "name": "alert",
    "value": {
     "light": "#C0473A",
     "dark": "#F08A7D"
    },
    "usage": "「重要」：お知らせ枠の線と見出し、重要タグ、診療時間表の日曜列。surface・paper 上の文字として使用（5:1以上）。ライトテーマの alert-soft 上では4.4:1のため、19px太字以上のみ。"
   },
   {
    "name": "alert-soft",
    "value": {
     "light": "#FBEDEA",
     "dark": "#3A2826"
    },
    "usage": "緊急の囲み（休診、臨時のお知らせ）の淡い地。その上の本文は ink。"
   },
   {
    "name": "focus",
    "value": "{sun-ink}",
    "usage": "キーボードのフォーカスリング：3px実線、オフセット2px。ウェブサイトの sun（白地で2.2:1、WCAG不適合）に代えて sun-ink を使い、オレンジの印象を保ちつつ5:1以上を確保。"
   },
   {
    "name": "link",
    "value": "{primary}",
    "usage": "文中のリンク。primary の別名。"
   }
  ]
 },
 "type": {
  "fonts": [],
  "families": {
   "display": "\"Zen Maru Gothic\", \"Hiragino Maru Gothic ProN\", \"Noto Sans JP\", sans-serif",
   "body": "\"Noto Sans JP\", \"Hiragino Sans\", \"Yu Gothic\", sans-serif"
  },
  "groups": [
   {
    "name": "見出し",
    "family": "display",
    "note": "Zen Maru Gothic（Google Fonts、500/700）。丸みのある端がロゴの丸いシルエットと呼応します。見出し・キャッチコピー・電話番号・氏名に。段落には使いません。",
    "styles": [
     {
      "name": "catch",
      "fontSize": "34px",
      "lineHeight": 1.8,
      "fontWeight": 700,
      "letterSpacing": "0.22em",
      "sample": "健康な時から何でも相談できる",
      "usage": "トップのキャッチコピー。広い画面では縦書き（writing-mode: vertical-rl）、スマホでは26px・字間0.1emの横書き。1ページに1回。"
     },
     {
      "name": "title",
      "fontSize": "24px",
      "lineHeight": 1.5,
      "fontWeight": 700,
      "sample": "首・肩・腰などの慢性的な痛みに",
      "usage": "特集の見出し、ポスターのタイトル（A4印刷では約2倍）。"
     },
     {
      "name": "section",
      "fontSize": "21px",
      "lineHeight": 1.5,
      "fontWeight": 700,
      "sample": "診療時間",
      "usage": "セクション見出し。必ず3つの点の見出しマークと組み合わせる。"
     },
     {
      "name": "quote",
      "fontSize": "19px",
      "lineHeight": 1.7,
      "fontWeight": 500,
      "sample": "「家族の一員のような存在でありたく、その家族達を一番に思う」",
      "usage": "院長の言葉や引用。色は primary。"
     },
     {
      "name": "card-title",
      "fontSize": "17px",
      "lineHeight": 1.5,
      "fontWeight": 700,
      "sample": "内科",
      "usage": "診療科名、特集カードの見出し、名札。"
     },
     {
      "name": "tel",
      "fontSize": "26px",
      "lineHeight": 1.3,
      "fontWeight": 700,
      "letterSpacing": "0.06em",
      "sample": "048-777-3000",
      "usage": "電話番号の表示。必ず等幅数字（tabular-nums）。"
     }
    ]
   },
   {
    "name": "本文",
    "family": "body",
    "note": "Noto Sans JP（Google Fonts、400/500/700）。高齢の方にも読みやすいよう、行送り1.9・字間0.04emとゆったり組みます。",
    "styles": [
     {
      "name": "body",
      "fontSize": "15px",
      "lineHeight": 1.9,
      "fontWeight": 400,
      "letterSpacing": "0.04em",
      "sample": "体の内側からのさまざまな病気や不調を診断・治療します。",
      "usage": "本文。1行は全角34〜40字程度に。"
     },
     {
      "name": "body-sm",
      "fontSize": "13.5px",
      "lineHeight": 1.9,
      "fontWeight": 400,
      "letterSpacing": "0.04em",
      "sample": "部位や原因がはっきりしない症状、全身の不調もご相談ください。",
      "usage": "カード本文、ナビ、フッターのリンク。色は ink-2。"
     },
     {
      "name": "button",
      "fontSize": "14px",
      "lineHeight": 1.4,
      "fontWeight": 700,
      "letterSpacing": "0.08em",
      "sample": "ネット予約",
      "usage": "ボタンやCTAのラベル。"
     },
     {
      "name": "caption",
      "fontSize": "12.5px",
      "lineHeight": 1.8,
      "fontWeight": 400,
      "letterSpacing": "0.04em",
      "sample": "2026/09/18　※受付は各診療時間終了の30分前までです",
      "usage": "日付、表の下の注記、写真のキャプション。色は ink-2。"
     },
     {
      "name": "label",
      "fontSize": "11px",
      "lineHeight": 1.4,
      "fontWeight": 500,
      "letterSpacing": "0.2em",
      "sample": "CLINIC HOURS",
      "usage": "日本語見出しに添える英字ラベル（大文字）。色は ink-2。"
     }
    ]
   }
  ]
 },
 "spacing": {
  "tokens": [
   {
    "name": "space-1",
    "value": "4px",
    "usage": "極細の間隔、小さなチップ内のアイコンと文字の間。"
   },
   {
    "name": "space-2",
    "value": "8px",
    "usage": "リスト項目の間隔、タグの内側余白。"
   },
   {
    "name": "space-3",
    "value": "12px",
    "usage": "ボタングリッドの間隔、一覧の行間。"
   },
   {
    "name": "space-4",
    "value": "16px",
    "usage": "スマホの最小左右余白、小さなカードの内側余白。"
   },
   {
    "name": "space-5",
    "value": "20px",
    "usage": "カードの内側余白（診療時間表、リンク）。"
   },
   {
    "name": "space-6",
    "value": "24px",
    "usage": "お知らせ枠の内側余白、特集グリッドの間隔。"
   },
   {
    "name": "space-8",
    "value": "32px",
    "usage": "セクション見出しと内容の間、診療案内グリッドの間隔。"
   },
   {
    "name": "space-10",
    "value": "40px",
    "usage": "PCの左右余白、フッターの列間。"
   },
   {
    "name": "space-14",
    "value": "56px",
    "usage": "スマホのセクション上下余白、大きなグリッドの間隔。"
   },
   {
    "name": "space-24",
    "value": "96px",
    "usage": "PCのセクション上下余白。"
   }
  ]
 },
 "radius": {
  "tokens": [
   {
    "name": "radius-xs",
    "value": "4px",
    "usage": "濃い色の状態ピル（日曜・祝日休診）。"
   },
   {
    "name": "radius-sm",
    "value": "6px",
    "usage": "リンクタイル、名札、室名札。"
   },
   {
    "name": "radius-md",
    "value": "10px",
    "usage": "特集のサムネイル、カード内のリスト項目。"
   },
   {
    "name": "radius-lg",
    "value": "14px",
    "usage": "カード、写真、イラスト、お知らせ枠、名刺モックアップの角。"
   },
   {
    "name": "radius-pill",
    "value": "999px",
    "usage": "すべてのボタン・タグ・CTA。FFCのボタンは必ずピル型。"
   }
  ]
 },
 "shadow": {
  "tokens": [
   {
    "name": "shadow-card",
    "value": {
     "light": "0 1px 2px rgba(60,50,30,.05), 0 8px 24px rgba(60,50,30,.06)",
     "dark": "0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25)"
    },
    "usage": "paper の上の surface カード（診療時間表、診療案内カード、もっと見るリンク）。やわらかく暖かい影。2重にしない。"
   }
  ]
 },
 "size": {
  "tokens": [
   {
    "name": "content-max",
    "value": "1120px",
    "usage": "ページ内容の最大幅。"
   },
   {
    "name": "header-h",
    "value": "72px",
    "usage": "固定ヘッダーの高さ。"
   },
   {
    "name": "touch-min",
    "value": "50px",
    "usage": "主要ボタンの最小の高さ（高齢の方や手袋をした手でも押しやすく）。"
   }
  ]
 }
}