/* ============================================================
   Creaxia Design Tokens v1.0 (2026-07-08)
   正本: CREAXIA-design-system_2026-07-08.md
   ウェブ制作時はこのファイルをそのまま読み込むか、値を移植する
   ============================================================ */

:root {
  /* --- コアカラー --- */
  --cx-cyan: #0AD9F9;        /* グラデーション起点・Lifeキーカラー（文字使用不可） */
  --cx-blue: #3F7DE8;        /* グラデーション中間・図版主色 */
  --cx-violet: #755CFB;      /* グラデーション終点・Bizキーカラー */
  --cx-navy: #0B1240;        /* 見出し文字色 */
  --cx-biz-ink: #171D2B;     /* Bizダーク背景 */
  --cx-ink: #2A303C;         /* ロゴタイプ色・ダーク面 */

  /* --- ブランドグラデーション --- */
  --cx-gradient: linear-gradient(135deg, #0AD9F9 0%, #3F7DE8 50%, #755CFB 100%);

  /* --- ニュートラル --- */
  --cx-gray-900: #333D4F;
  --cx-gray-700: #4A5468;    /* 本文 */
  --cx-gray-500: #6B7688;    /* 補足 */
  --cx-gray-400: #8A93A5;
  --cx-gray-300: #A9B2C4;
  --cx-gray-200: #DDE3EC;    /* 罫線 */
  --cx-gray-100: #E6EAF0;
  --cx-gray-50:  #F7F9FB;    /* 交互背景 */
  --cx-white:    #FFFFFF;

  /* --- ティント --- */
  --cx-tint-cyan:   #D8F3F9; /* Life面 */
  --cx-tint-blue:   #E6EEFB;
  --cx-tint-violet: #EBE7FC; /* Biz面（ライト） */

  /* --- セマンティック --- */
  --cx-link:    #1D6FB8;
  --cx-success: #12A150;
  --cx-warning: #B97D10;
  --cx-warning-bg: #FDF3DC;
  --cx-danger:  #DF3838;

  /* --- タイポグラフィ --- */
  --cx-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
  --cx-font-display: "Josefin Sans", "Noto Sans JP", sans-serif;   /* 欧文ラベル・数字 */
  --cx-font-serif: "Lora", "游明朝", "Yu Mincho", serif;            /* Lifeアクセントのみ */

  --cx-text-display: 48px;
  --cx-text-h1: 36px;
  --cx-text-h2: 28px;
  --cx-text-h3: 22px;
  --cx-text-lead: 18px;
  --cx-text-body: 16px;      /* Lifeはこれ未満禁止 */
  --cx-text-small: 14px;
  --cx-text-caption: 12px;

  --cx-leading-heading: 1.45;
  --cx-leading-body: 1.9;

  /* --- レイアウト --- */
  --cx-space-1: 8px;
  --cx-space-2: 16px;
  --cx-space-3: 24px;
  --cx-space-4: 32px;
  --cx-space-6: 48px;
  --cx-space-8: 64px;
  --cx-space-12: 96px;
  --cx-max-width: 1120px;

  --cx-radius-card: 16px;
  --cx-radius-button: 999px;
  --cx-radius-input: 8px;

  --cx-shadow-card: 0 4px 24px rgba(23, 29, 43, 0.08);
  --cx-shadow-cta: 0 8px 32px rgba(63, 125, 232, 0.24);

  --cx-border: 1px solid var(--cx-gray-200);
}

/* ============================================================
   基本要素
   ============================================================ */

.cx-body {
  font-family: var(--cx-font-sans);
  font-size: var(--cx-text-body);
  line-height: var(--cx-leading-body);
  color: var(--cx-gray-700);
  background: var(--cx-white);
}

.cx-h1, .cx-h2, .cx-h3 {
  color: var(--cx-navy);
  font-weight: 700;
  line-height: var(--cx-leading-heading);
}
.cx-h1 { font-size: var(--cx-text-h1); }
.cx-h2 { font-size: var(--cx-text-h2); }
.cx-h3 { font-size: var(--cx-text-h3); }

/* セクション英字ラベル（例: SERVICES / PROCESS） */
.cx-label {
  font-family: var(--cx-font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cx-blue);
}

/* 見出し内キーワードのグラデーション文字（1見出し1語まで） */
.cx-gradient-text {
  background: var(--cx-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* グラデーションキーライン（2〜4px、キャッチ下・章扉のみ） */
.cx-keyline {
  height: 3px;
  border: none;
  background: var(--cx-gradient);
  border-radius: 2px;
}

a.cx-link { color: var(--cx-link); text-decoration: underline; }

/* ============================================================
   ボタン
   ============================================================ */

.cx-btn-primary {
  display: inline-block;
  font-family: var(--cx-font-sans);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--cx-gradient);
  border: none;
  border-radius: var(--cx-radius-button);
  padding: 16px 40px;
  box-shadow: var(--cx-shadow-cta);
  cursor: pointer;
  transition: filter .2s, transform .2s;
}
.cx-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.cx-btn-secondary {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--cx-link);
  background: var(--cx-white);
  border: 1.5px solid var(--cx-blue);
  border-radius: var(--cx-radius-button);
  padding: 16px 40px;
  cursor: pointer;
}

/* ============================================================
   カード・バッジ
   ============================================================ */

.cx-card {
  background: var(--cx-white);
  border-radius: var(--cx-radius-card);
  box-shadow: var(--cx-shadow-card);
  padding: var(--cx-space-4);
}

.cx-badge-life {
  background: var(--cx-tint-cyan);
  color: var(--cx-navy);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
}
.cx-badge-biz {
  background: var(--cx-tint-violet);
  color: var(--cx-navy);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
}

/* ============================================================
   フォーム
   ============================================================ */

.cx-input {
  font-family: var(--cx-font-sans);
  font-size: 16px;
  color: var(--cx-gray-900);
  background: var(--cx-white);
  border: var(--cx-border);
  border-radius: var(--cx-radius-input);
  min-height: 48px;           /* Lifeは56px */
  padding: 12px 16px;
  width: 100%;
}
.cx-input:focus { outline: 2px solid var(--cx-blue); outline-offset: 1px; }
.cx-input-error { border-color: var(--cx-danger); }
.cx-error-text  { color: var(--cx-danger); font-size: 14px; }

/* ============================================================
   サービスライン別テーマ
   Life: ライト＋シアン / Biz: ダーク濃紺
   ============================================================ */

.cx-theme-life {
  --cx-accent: var(--cx-cyan);
  --cx-accent-tint: var(--cx-tint-cyan);
  background: var(--cx-white);
  color: var(--cx-gray-900);   /* 高齢者接点: コントラスト強め */
  font-size: 16px;
}

.cx-theme-biz {
  --cx-accent: var(--cx-violet);
  --cx-accent-tint: var(--cx-tint-violet);
  background: var(--cx-biz-ink);
  color: var(--cx-gray-100);
}
.cx-theme-biz .cx-h1,
.cx-theme-biz .cx-h2,
.cx-theme-biz .cx-h3 { color: var(--cx-white); }
.cx-theme-biz .cx-card { background: #1E2637; box-shadow: none; border: 1px solid #2C3550; }