@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root {
  /* Brand colors */
  --color-primary: #0099E0;
  --color-borderColor: #004C70;
  --color-primary-dark: #24598F;
  --color-primary-mid: #1AA2E6;
  --color-primary-foreground: #fff;
  --color-secondary: #E3EFF8;
  --color-background: #fff;
  --color-foreground: #333333;
  --color-card: #fff;
  --color-muted-foreground: #666666;
  --color-gray: #444554;
  --color-border: #DAEDF6;
  --color-lp-bg-light: #E3EFF8;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-hero-bg: #4d4d4d;

  /* Pricing plan colors */
  --color-price-1: #7CD2F4;
  --color-price-2: #2CA9E2;
  --color-price-3: #0099E0;

  /* Layout */
  --radius: 0.5rem;
  --container-max: 1100px;
  --container-pad: 1.25rem;

  /* Fonts */
  --font-noto-sans: 'Noto Sans', sans-serif;
  --font-zen-kaku-gothic-new: 'Zen Kaku Gothic New', sans-serif;


  /* ===== Typography Scale ===== */

--fs-copyright:  clamp(12px, 2.5vw, 13px);  /* コピーライト・注釈          */
--fs-nav:        clamp(13px, 2.5vw, 14px);  /* ナビ・小ラベル・フッターリンク */
--fs-body:       clamp(14px, 2.5vw, 16px);  /* 本文・カード本文             */
--fs-lead-responsive: clamp(14px, 2.5vw, 20px);  /* リード文・説明文・サブタイトル             */
--fs-lead:       clamp(15px, 2.5vw, 18px);  /* リード文・説明文・サブタイトル */
--fs-problem-text: clamp(15px, 2.5vw, 18px); /* problemカードのテキスト（PC: 18px） */
--fs-card-tagline: clamp(16px, 2.5vw, 22px); /* カードタグライン               */
--fs-section-sub: clamp(16px, 2.5vw, 24px); /* セクションサブ見出し         */
--fs-usecase-card-title: clamp(16px, 2.5vw, 20px); /* Use Caseカード見出し（PC上限 20px） */
--fs-usecase-card-title-sp: 1.125rem;              /* Use Caseカード見出し スマホ */
--fs-flow-step-card-sp: clamp(16px, 5.3vw, 20px);  /* Flowステップカード span スマホ */
--fs-flow-step-num: clamp(24px, 2.5vw, 28px);      /* Flowステップ番号（スマホ24px〜PC28px） */
--fs-section-h:  clamp(20px, 3.75vw, 32px);  /* セクション見出し             */
--fs-hero-h:     clamp(22px, 2.5vw, 36px);  /* Heroメイン見出し             */
--fs-hero-h-responsive: clamp(24px, 2.5vw, 36px);  /* Heroメイン見出し             */
--fs-price:      clamp(28px, 2.5vw, 56px);  /* 価格・装飾数字               */

/* 価格・装飾数字のレスポンシブ上書き用トークン追加 */
--fs-price-responsive: clamp(18px, 2.5vw, 36px); /* Pricing 3カラム時の価格数字 */
--fs-plan-header: clamp(14px, 2.2vw, 24px); /* Pricing プラン名帯（狭い画面〜PCで最大24px） */

}