:root {
  /* プリミティブ（定義用） */
  /* color */
  --color-blue-100: #f0f2f8;
  --color-blue-200: #f0f4ff;
  --color-blue-300: #d3dbf7;
  --color-blue-400: #bbc6eb;
  --color-blue-500: #2c5dff;
  --color-blue-600: #0133d8;
  --color-blue-700: #485b97;
  --color-blue-800: #001350;
  --color-red-100: #ffe1e1;
  --color-red-200: #ffc7c7;
  --color-red-300: #ffa1a1;
  --color-red-400: #ff6a6a;
  --color-red-500: #ea280e;
  --color-red-600: #d92912;
  --color-red-700: #c1240e;
  --color-white-100: #ffffff;
  --color-white-200: #e6e6e6;
  --color-white-300: #d3d5da;
  /* number */
  --numbers-num-0: 0px;
  --numbers-num-2: 2px;
  --numbers-num-4: 4px;
  --numbers-num-8: 8px;
  --numbers-num-12: 12px;
  --numbers-num-14: 14px;
  --numbers-num-16: 16px;
  --numbers-num-18: 18px;
  --numbers-num-20: 20px;
  --numbers-num-24: 24px;
  --numbers-num-32: 32px;
  --numbers-num-40: 40px;
  --numbers-num-48: 48px;
  --numbers-num-60: 60px;
  --numbers-num-100: 100px;

  /* color */
  --color-container-border-attention: var(--color-red-600);
  --color-container-border-primary-500: var(--color-blue-500);
  --color-container-border-primary-600: var(--color-blue-600);
  --color-container-border-secondary: var(--color-red-500);
  --color-container-border-tertiary-300: var(--color-blue-300);
  --color-container-border-tertiary-700: var(--color-blue-700);
  --color-container-border-tertiary-800: var(--color-blue-800);
  --color-container-surface-disable: var(--color-white-200);
  --color-container-surface-elevation-1: var(--color-blue-100);
  --color-container-surface-elevation-2: var(--color-white-100);
  --color-container-surface-elevation-3: var(--color-blue-200);
  --color-container-surface-elevation-4: var(--color-blue-300);
  --color-container-surface-elevation-5: var(--color-blue-800);
  --color-container-surface-focus: var(--color-blue-500);
  --color-divider-on-surface-eval-1: var(--color-blue-400);
  --color-divider-on-surface-eval-2: var(--color-blue-300);
  --color-divider-on-surface-eval-3: var(--color-white-100);
  --color-divider-secondary: var(--color-red-400);
  --color-icon-primary-500: var(--color-blue-500);
  --color-icon-primary-600: var(--color-blue-600);
  --color-icon-quaternary: var(--color-blue-400);
  --color-icon-secondary: var(--color-red-500);
  --color-icon-tertiary-700: var(--color-blue-700);
  --color-icon-tertiary-800: var(--color-blue-800);
  --color-shadow-primary-10: #2c5dff1a;
  --color-shadow-primary-20: #2c5dff33;
  --color-shadow-primary-30: #2c5dff4d;
  --color-shadow-secondary-40: #ea280e66;
  --color-shadow-secondary-50: #ea280e80;
  --color-text-attention: var(--color-red-700);
  --color-text-emphasis-primary-500: var(--color-blue-500);
  --color-text-emphasis-secondary-400: var(--color-red-400);
  --color-text-emphasis-secondary-500: var(--color-red-500);
  --color-text-on-surface-elevation-5: var(--color-white-100);
  --color-text-on-surface-focus: var(--color-white-100);
  --color-text-plane-primary: var(--color-blue-800);
  --color-text-plane-secondary: var(--color-blue-700);

  /* gradient */
  --primary-gradient: linear-gradient(97deg, #656AFA -1.78%, #2C5DFF 102.02%);
  --secondary-gradient: linear-gradient(92deg, #FC7F6E 0%, #E62525 100%);

  /* Typography */
  --typography-font-size-xs: var(--numbers-num-12);
  --typography-font-size-small: var(--numbers-num-14);
  --typography-font-size-medium: var(--numbers-num-16);
  --typography-font-size-large: var(--numbers-num-18);
  --typography-font-size-xl: var(--numbers-num-20);
  --typography-font-size-2xl: var(--numbers-num-24);
  --typography-font-size-3xl: var(--numbers-num-32);
  --typography-font-size-4xl: var(--numbers-num-40);
  --typography-letter-spacing-xs: 0px;
  --typography-letter-spacing-small: 0.4000000059604645px;
  --typography-letter-spacing-medium: 0.6000000238418579px;
  --typography-letter-spacing-large: 0.800000011920929px;
  --typography-line-height-xs: 1px;
  --typography-line-height-small: 1.2999999523162842px;
  --typography-line-height-medium: 1.399999976158142px;
  --typography-line-height-large: 1.5px;
  --typography-line-height-xl: 1.600000023841858px;

  /* string */
  --typography-font-family-Nimbus-Sans: nimbus-sans, sans-serif;
  --typography-font-family-Noto-Sans-CJK-JP: noto-sans-cjk-jp, sans-serif;
  --typography-font-weight-black: Black;
  --typography-font-weight-black-italic: Black Italic;
  --typography-font-weight-bold: Bold;
  --typography-font-weight-regular: Regular;

  /* Spacing */
  --spacing-divider-small: var(--numbers-num-12);
  --spacing-divider-medium: var(--numbers-num-40);
  --spacing-divider-large: var(--numbers-num-60);
  --spacing-heading-h2-bottom: var(--numbers-num-32);
  --spacing-heading-h2-top: var(--numbers-num-48);
  --spacing-heading-h3-bottom: var(--numbers-num-32);
  --spacing-module-3xs: var(--numbers-num-2);
  --spacing-module-2xs: var(--numbers-num-4);
  --spacing-module-xs: var(--numbers-num-8);
  --spacing-module-small: var(--numbers-num-12);
  --spacing-module-medium: var(--numbers-num-16);
  --spacing-module-large: var(--numbers-num-20);
  --spacing-module-xl: var(--numbers-num-24);
  --spacing-module-2xl: var(--numbers-num-32);
  --spacing-module-3xl: var(--numbers-num-40);
  --spacing-section-xs: var(--numbers-num-24);
  --spacing-section-small: var(--numbers-num-32);
  --spacing-section-medium: var(--numbers-num-40);
  --spacing-section-large: var(--numbers-num-48);
  --spacing-section-xl: var(--numbers-num-60);
  --spacing-serial-module-3xs: var(--numbers-num-2);
  --spacing-serial-module-2xs: var(--numbers-num-4);
  --spacing-serial-module-xs: var(--numbers-num-8);
  --spacing-serial-module-small: var(--numbers-num-12);
  --spacing-serial-module-medium: var(--numbers-num-16);
  --spacing-side-margin-medium: var(--numbers-num-16);
  --spacing-side-margin-large: var(--numbers-num-32);

  /* Radius */
  --radius-small: var(--numbers-num-4);
  --radius-medium: var(--numbers-num-8);
  --radius-large: var(--numbers-num-20);
  --radius-xl: var(--numbers-num-48);
  --radius-2xl: var(--numbers-num-100);

  /* Shadow */
  --shadow-blur-small: var(--numbers-num-4);
  --shadow-blur-medium: var(--numbers-num-8);
  --shadow-blur-large: var(--numbers-num-12);
  --shadow-blur-xl: var(--numbers-num-20);
  --shadow-spreed-small: var(--numbers-num-0);
  --shadow-spreed-medium: var(--numbers-num-2);
  --shadow-xy-small: var(--numbers-num-0);
  --shadow-xy-medium: var(--numbers-num-2);
  --shadow-xy-large: var(--numbers-num-4);
  --shadow-xy-xl: var(--numbers-num-8);

  /* Window-Size */
  --pc-header-size: 104px;
  --desktop-sidemenu-max-width: 430px;
  --tablet-inner-width: 464px;
  --tablet-wrapper-width: 704px;
  --desktop-content-inner-width: 770px;
  --screen-height: 832px;
  --desktop-inner-width: 1200px;
  --break-point-mobile-max-width: 767px;
  --break-point-tablet-min-width: 768px;
  --break-point-pc-min-width: 1200px;

    /* z-index */
    --z-index-header: 200;
    --z-index-modal: 300;
    --z-index-cta: 100;
}