/*
 * サイト全体の基本設定、CSS変数、body、基本フォント、基本見出し用
 */

/* ======================================

  フォント・基本カラー設定

========================================= */

:root {
  /* サイト全体で使う基本フォント */
  --font-sans: "IBM Plex Sans JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  /* フォーム・規約・表など読みやすさ重視のフォント */
  --font-readable: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  /* 英字ラベル・サブタイトル用フォント */
  --font-en: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* POS-COMの基本ブランドカラー */
  --poscom-navy: #0B2C5E;
  --poscom-deep-navy: #061B3A;

  --poscom-red: #D71920;
  --poscom-red-deep: #A8171D;

  --poscom-green: #228E38;
  --poscom-green-light: #8DC21F;

  --poscom-beige: #E9DCC8;
  --poscom-beige-light: #F6EFE7;
  --poscom-craft: #C8A06F;
  --poscom-brown: #6B4A2D;

  --poscom-gray: #6F7B86;
  --poscom-gray-light: #EEF2F5;

  --poscom-text: #222A33;
  --poscom-muted: #66727F;
  --poscom-border: #DDE5EC;
  --poscom-bg: #F7FAFC;
  --poscom-white: #FFFFFF;

  /* リンク・CTAで使う意味付きカラー */
  --poscom-link: var(--poscom-navy);
  --poscom-link-hover: var(--poscom-red);
  --poscom-cta: var(--poscom-red);
}

/* サイト全体の本文フォント・文字色・背景色 */
body {
  font-family: var(--font-sans);
  color: var(--poscom-text);
  background: var(--poscom-white);
}

/* 英字ラベル・英字サブタイトルに英字フォントを適用 */
.poscom-en,
.poscom-section-label,
.c-pageTitle__subTitle {
  font-family: var(--font-en);
}

/* 可読性を優先したいエリアに補助フォントを適用 */
.poscom-readable,
.poscom-form,
.company-page table,
.privacy-page {
  font-family: var(--font-readable);
}