@charset "UTF-8";

/**
 * VISION24 デザイントークン（サイト共通）
 *
 * 分岐点は @media 条件に CSS 変数を使えないため、参照用として定義し
 * 各 CSS 内では同じ数値を直書きする。
 */
:root {
  /* --- レスポンシブ分岐点（参照用） --- */
  --bp-sp-max: 768px;
  --bp-tablet-max: 1024px;
  --bp-sp-sm-max: 480px;

  /* --- レイアウト: トップ（rem 基準 1920px → 1rem = 10px） --- */
  --top-rem-base: 10px;
  --top-design-pc: 1920px;
  --top-design-sp: 750px;
  --top-content-wide: 165rem;
  --top-content-narrow: 108rem;
  --top-header-width: var(--biz-content-width);

  /* --- レイアウト: 法人（px 固定） --- */
  --biz-content-width: 1200px;
  --biz-header-height: 116px;
  --biz-side-padding-pc: 40px;
  --biz-side-padding-tablet: 24px;
  --biz-side-padding-sp: 16px;

  /* --- テキスト色 --- */
  --color-text: #1a1a1a;
  --color-text-secondary: #555555;
  --color-text-muted: #888888;
  --color-text-placeholder: #aaaaaa;
  --color-text-dark: #333333;
  --color-text-inverse: #ffffff;

  /* --- ブランド・アクセント --- */
  --color-brand-yellow: #fee801;
  --color-brand-red: #d81919;
  --color-gold: #daaf08;
  --color-gold-light: #fee9a0;
  --color-gold-dark: #b67b03;
  --gradient-gold: linear-gradient(45deg, #b67b03 0%, #daaf08 45%, #fee9a0 70%, #daaf08 85%, #b67b03 100%);
  --color-accent-pink: #e8467f;
  --color-accent-pink-alt: #ec4870;

  /* --- 面・背景 --- */
  --color-white: #ffffff;
  --color-dark: #1c1c1c;
  --color-dark-blue: #0e1a30;
  --color-gray-ui: #999999;
  --color-gray-bg: #ededed;
  --color-gray-bg-alt: #e5e5e5;
  --color-gray-bg-soft: #f2f2f2;
  --color-gray-bg-light: #f5f5f5;
  --color-gray-bg-highlight: #fffde6;
  --color-gray-bg-disabled: #d5d5d5;
  --color-line: #acab97;

  /* --- ボーダー --- */
  --color-border: #cccccc;
  --color-border-pale: #e0e0e0;
  --color-border-dashed: #b5b5b5;
  --color-border-ui-muted: #bdbdb5;

  /* --- 状態色 --- */
  --color-success: #46b450;

  /* --- フォント（トップ新デザイン） --- */
  --font-ja: "Noto Sans JP", sans-serif;
  --font-latin: "Roboto", sans-serif;

  /* --- 互換エイリアス（旧トークン名） --- */
  --color-text-strict: var(--color-text);
  --color-text-disabled: var(--color-text-muted);
  --color-text-tab-inactive: var(--color-text-secondary);
  --color-text-subtle: var(--color-text-muted);
  --color-gray-mid: var(--color-text-secondary);
  --color-gray-bg-pale: var(--color-gray-bg-soft);
  --color-gray-bg-faint: var(--color-gray-bg-light);
  --color-gray-bg-panel: var(--color-gray-bg-soft);
  --color-border-light: var(--color-gray-bg-alt);
  --color-border-mid: var(--color-border);
  --color-border-ui: var(--color-border);
  --color-border-ui-alt: var(--color-border);
  --color-ui-gray: var(--color-gray-ui);
  --color-black: var(--color-text);

  /* --- 法人互換エイリアス --- */
  --biz-color-yellow: var(--color-brand-yellow);
  --biz-color-black: var(--color-text);
  --biz-color-white: var(--color-white);
  --biz-color-dark: var(--color-dark);
  --biz-color-line: var(--color-line);
  --biz-color-red: var(--color-brand-red);
  --biz-color-gray-bg: var(--color-gray-bg);
  --biz-side-padding: var(--biz-side-padding-pc);
}