@charset "UTF-8";
/* _colors */
:root {
  --color-primary: #005BAC;
  --color-secondary: #3AAFC5;
  --color-navy : #101D32;
  --color-red : #D8562B;
  --color-yellow : #F8E977;
  --color-white : #FFFFFF;
  --color-black : #000000;
  --color-gray-1200 : #222222;
  --color-gray-900 : #606060;
  --color-gray-800 : #7D7D7D;
  --color-gray-500 : #CDCDCD;
  --color-gray-100 : #F5F5F5;

  --color-gradient: linear-gradient(90deg, #005BAC 0%, #3AAFC5 100%);
}

/* _typography */
:root {
  --typo-fz-10: 10px;
  --typo-fz-12: 12px;
  --typo-fz-14: 14px;
  --typo-fz-16: 16px;
  --typo-fz-18: 18px;
  --typo-fz-20: 20px;
  --typo-fz-24: 24px;
  --typo-fz-28: 26px;
  --typo-fz-32: 32px;
  --typo-fz-34: 34px;
  --typo-fz-36: 36px;
  --typo-fz-38: 38px;
  --typo-fz-40: 40px;
  --typo-fz-42: 42px;
  --typo-fz-44: 44px;
  --typo-fz-46: 46px;
  --typo-fz-48: 48px;
  --typo-fz-56: 56px;
  --typo-fz-64: 64px;
  --typo-fz-84: 84px;

  --din-font-r: "D-DIN-PRO-Regular", "Noto Sans CJK JP", "Noto Sans JP",
    sans-serif !important;
  --din-font-m: "D-DIN-PRO-Medium", "Noto Sans CJK JP", "Noto Sans JP",
    sans-serif !important;
  --din-font-bold: "D-DIN-PRO-ExtraBold", "Noto Sans CJK JP", "Noto Sans JP",
    sans-serif !important;

  @media screen and (max-width:1079px) {
  --typo-fz-10: 10px;
  --typo-fz-12: 12px;
  --typo-fz-14: 14px;
  --typo-fz-16: 16px;
  --typo-fz-18: 16px;
  --typo-fz-20: 18px;
  --typo-fz-24: 20px;
  --typo-fz-28: 26px;
  --typo-fz-32: 28px;
  --typo-fz-34: 30px;
  --typo-fz-36: 32px;
  --typo-fz-38: 34px;
  --typo-fz-40: 36px;
  --typo-fz-42: 38px;
  --typo-fz-44: 40px;
  --typo-fz-46: 42px;
  --typo-fz-48: 48px;
  --typo-fz-56: 56px;
  --typo-fz-84: 84px;
  }

  @media screen and (max-width:768px) {
  --typo-fz-10: 10px;
  --typo-fz-12: 12px;
  --typo-fz-14: 14px;
  --typo-fz-16: 14px;
  --typo-fz-18: 16px;
  --typo-fz-20: 18px;
  --typo-fz-24: 20px;
  --typo-fz-28: 22px;
  --typo-fz-32: 24px;
  --typo-fz-34: 26px;
  --typo-fz-36: 28px;
  --typo-fz-38: 30px;
  --typo-fz-40: 32px;
  --typo-fz-42: 36px;
  --typo-fz-44: 38px;
  --typo-fz-46: 40px;
  --typo-fz-48: 48px;
  --typo-fz-56: 42px;
  --typo-fz-84: 42px;
  }
}

/* _spacing */
:root {
  --spacing-0_5: 4px;    /* 0.5x */
  --spacing-0_25: 2px;   /* 0.25x */
  --spacing-1: 8px;      /* base spacing */
  --spacing-1_5: 12px;   /* 1.5x */
  --spacing-2: 16px;     /* 2x */
  --spacing-3: 24px;     /* 3x */
  --spacing-4: 32px;     /* 4x */
  --spacing-5: 40px;     /* 5x */
  --spacing-6: 48px;     /* 6x */
  --spacing-7: 56px;     /* 7x */
  --spacing-8: 64px;     /* 8x */
  --spacing-9: 72px;     /* 9x */
  --spacing-10: 80px;    /* 10x */
}

/* _radius */
:root {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-counter: 80px;
  --radius-xl: 88px;
  --radius-xxl: 240px;
  --radius-xxxl: 256px;
  --radius-xxxxl: 280px;
  @media screen and (max-width:1200px) {
  --radius-xxl: 100px;
  --radius-xxxl: 100px;
  --radius-xxxxl: 100px;
  }
  @media screen and (max-width:767px) {
    --radius-xl:40px;
    --radius-xxl: 40px;
    --radius-xxxl: 40px;
    --radius-xxxxl: 40px;
  }
}

/* _shadows */
:root {
  --shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.12);
  --shadow-md: 0px 2px 6px 1px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0px 4px 8px 2px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0px 8px 12px 4px rgba(0, 0, 0, 0.12);
}