:root {
  /* fonts */
  --font-yugothic: YuGothic;
  --title: "Noto Sans JP";
  --font-noto-serif-jp: "Noto Serif JP";
  --font-tbs-gothic-tp: "TBS Gothic TP";
  --font-tbs-sans-tp: "TBS Sans TP";
  --font-material-icons: "Material Icons";
  --font-roboto: Roboto;
  --font-inter: Inter;

  /* font sizes */
  --font-size-2xs: 10px;
  --font-size-xs: 12px;
  --txt-size: 14px;
  --font-size-base: 16px;
  --font-size-lg: 17px;
  --title-size: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 32px;
  --font-size-6xl: 35px;
  --font-size-7xl: 40px;
  --font-size-8xl: 48px;
  --font-size-9xl: 60px;

  /* Colors */
  --color-darkgoldenrod-100: #b48216;
  --color-darkgoldenrod-200: #9a6d1a;
  --base-bright: #fff;
  --color-black: #000;
  --fonts-dark1: #3b3f4a;
  --color-darkslategray-200: #333;
  --color-linen: #f2efe9;
  --color-darkgray-100: #a8a8a8;
  --color-darkgray-200: #999;
  --color-aliceblue: #f2f6ff;
  --border-bright1: #e5e6e9;
  --neutral-gray-40: #e5e5e5;
  --color-gainsboro-300: #e5e3df;
  --border-light: #d9dbe0;
  --color-gainsboro-500: #d9d9d9;
  --base-primary1: #0050ff;
  --color-mediumblue-200: #0014c8;
  --color-royalblue-100: #3278ff;
  --color-royalblue-200: #1a73e8;
  --fonts-light: #ebebf5;
  --base-light1: rgba(235, 235, 245, 0.3);
  --border-middle: #81899c;
  --color-gray-100: #858e93;
  --default: #778187;
  --color-gray-300: #758085;
  --base-dark: #171c26;
  --color-gray-500: #1a1a1a;
  --color-dimgray-100: #666;
  --color-dimgray-200: #636363;
  --color-orangered: #ff3c1e;
  --color-lightcoral: #d37272;
  --color-cornflowerblue: #0064b6;
  --color-yellowgreen-100: #c3d82d;
  --primary1: #c3d72c;
  --color-whitesmoke: rgba(245, 245, 245, 0.7);
  --color-lightyellow: #f9fcde;

  /* Gaps */
  --gap-9xs: 2px;
  --gap-8xs: 3px;
  --gap-7xs: 4px;
  --gap-6xs: 5px;
  --gap-5xs: 6px;
  --gap-4xs: 7px;
  --gap-3xs: 8px;
  --gap-2xs: 10px;
  --gap-xs: 12px;
  --gap-sm: 16px;
  --gap-md: 20px;
  --gap-lg: 23px;
  --gap-xl: 24px;
  --gap-2xl: 32px;
  --gap-3xl: 36px;
  --gap-4xl: 40px;
  --gap-5xl: 48px;
  --gap-6xl: 56px;
  --gap-7xl: 64px;
  --gap-8xl: 120px;

  /* Paddings */
  --padding-9xs: 0.40625px;
  --padding-8xs: 1px;
  --padding-7xs: 2px;
  --padding-6xs: 3px;
  --padding-5xs: 4px;
  --padding-4xs: 8px;
  --padding-3xs: 12px;
  --padding-2xs: 14px;
  --padding-xs: 15px;
  --padding-sm: 16px;
  --padding-md: 20px;
  --padding-lg: 40px;
  --padding-xl: 44px;
  --padding-2xl: 44.5px;
  --padding-3xl: 48px;
  --padding-4xl: 50.890625px;
  --padding-5xl: 64px;
  --padding-6xl: 68px;
  --padding-7xl: 105px;
  --padding-8xl: 169.5px;
  --padding-9xl: 276px;

  /* border radiuses */
  --br-xs: 2px;
  --br-sm: 5px;
  --br-md: 6px;
  --br-lg: 10px;
  --br-xl: 44px;
}