html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: normal;
}

:root {
  /* Color */
  --color-white: #fff;
  --color-steelblue: #0089d0;
  --grayscale-gray800: #a0afc3;
  --BG-Gray-100-50: rgba(241, 243, 246, 0.5);
  --grayscale-gray900: #8a9db5;
  --Blue-400: #15315c;
  --Grayscale-Gray-500: #d2d8e2;
  --Black: #222;
  --Grayscale-Gray-100: #f1f3f6;
  --white: #fff;
  --Grayscale-black: #222;
  --grayscale-gray700: #c2cbd8;
  --grayscale-white: #fff;
  --Grayscale-White: #fff;
  --logo-gray: #494949;
  --bluescale-blue800: #0089d0;
  --BG-blue-200: #ecf5fd;
  --grayscale-gray500: #d2d8e2;
  --BG-blue-100: #f5fbff;
  --bluescale-800: #0089d0;
  --grayscale-gray300: #e1e6ec;
  --grayscale-black: #222;

  /* Gap */
  --gap-2: 2px;
  --gap-4: 4px;
  --gap-6: 6px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-20: 20px;
  --gap-30: 30px;
  --gap-40: 40px;
  --gap-60: 60px;

  /* Padding */
  --padding-4: 4px;
  --padding-5: 5px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-14: 14px;
  --padding-15: 15px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-24: 24px;
  --padding-28: 28px;
  --padding-30: 30px;
  --padding-40: 40px;
  --padding-60: 60px;
  --padding-80: 80px;

  /* BorderRadius */
  --br-6: 6px;
  --br-8: 8px;
  --br-12: 12px;
  --br-100: 100px;

  /* Font */
  --font-noto-sans-jp: Noto Sans JP;
  --font-poppins: Poppins;

  /* FontSize */
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-32: 32px;

  --card-dropshadow-Dark: 0px 13px 30px rgba(0, 65, 110, 0.2);
  --card-dropshadow-Light: 0px 13px 30px rgba(0, 65, 110, 0.1);
  --btn-default: 0px 13px 30px rgba(0, 65, 110, 0.1);

  /* Figma Variables */

  /* Spacing */
  --font-p-size: 18px;
  --font-h2-size: 32px;
  --breakpoints: 360px;
  --Screen-width: 1440px;

  /* Color */
  --Color-black: #000;
  --Color-white: #fff;
}