/*
  Izumi-LLC 共通トークン + 基本タイポグラフィ(colors.css + base.css を統合)。
  destyle.css の後に読み込むこと。
  box-sizing・body の margin リセットは destyle.css 側で対応済みのためここでは重複させない。
*/

:root {
  /* ブランドパレット */
  --color-primary: #0D3B66;    /* ネイビー: ロゴ外周・手 */
  --color-secondary: #5BA3E0;  /* スカイブルー: ロゴ水滴 */
  --color-accent: #1FBFAE;     /* ターコイズグリーン: ロゴ手 */
  --color-bg: #F7F9FA;         /* オフホワイト: 背景 */
  --color-text: #1A2B3C;       /* チャコールネイビー: テキスト */

  /* 見出し・本文テキスト */
  --color-text-heading: var(--color-primary);
  --color-text-body: var(--color-text);
  --color-text-muted: #5C6B7A;
  --color-text-inverse: #FFFFFF;

  /*
    CTAボタン
    背景はターコイズグリーンを基調。文字色は白ではなく --color-text を採用。
    turquoise(#1FBFAE) x 白文字はコントラスト比 約2.3:1 でWCAG AA基準(4.5:1)を満たさないため、
    チャコールネイビー文字(約6.3:1)に変更している。
  */
  --color-cta-bg: var(--color-accent);
  --color-cta-bg-hover: #17A695; /* accentを約12%暗くした色 */
  --color-cta-text: var(--color-text);

  /*
    セカンダリボタン(枠線のみ、控えめな導線用)
    枠線はスカイブルー(#5BA3E0)だとオフホワイト系の背景でコントラストが弱く
    視認性が低かったため、テキストと同じネイビーに変更している。
  */
  --color-btn-secondary-border: var(--color-primary);
  --color-btn-secondary-text: var(--color-primary);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-bg-hover: #EEF5FB;

  /* 背景の使い分け */
  --color-bg-page: var(--color-bg);          /* 基本の背景(オフホワイト) */
  --color-bg-section-alt: #EEF3F8;           /* セクションを交互に分けるための淡いスカイブルー */
  --color-bg-card: #FFFFFF;                  /* カード背景は白でセクションから浮かせる */
  --color-border-card: #E1E7EC;              /* カードの枠線 */

  /* ヘッダー / フッター */
  --color-bg-header: #FFFFFF;
  --color-text-header: var(--color-text);
  --color-bg-footer: var(--color-primary);
  --color-text-footer: #FFFFFF;
}

/* ---------- 基本タイポグラフィ ---------- */
body {
  background-color: var(--color-bg-page);
  color: var(--color-text-body);
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
  font-weight: 700;
  line-height: 1.4;
}

h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 20px; }

p {
  color: var(--color-text-body);
}

img {
  max-width: 100%;
  display: block;
}

.text-muted {
  color: var(--color-text-muted);
  font-size: 16px;
}

@media (max-width: 768px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 16px; }
}