:root {
  /* Colors */
  --c-gray: #D1D1D1;
  --c-gray-light: #F5F5F5;
  --c-white: #FFFFFF;
  --c-black: #0F0F0F;
  --c-black-light: #303030;
  --c-primary: #27A5C3;
  --c-primary-dark: #1D8BA3;
  --c-primary-gradient: linear-gradient(135deg, #2ACEF5, #1d2336);
  --c-secondary: #1D3339;
  --c-secondary-gradient: linear-gradient(135deg, #29444B, #256C79);
  --c-charcoal: #383838;
  --c-dark-text: #555555;

  --bg-white: var(--c-white);
  --bg-dark-blue: #1E3339;
  --bg-black: var(--c-black);
  --bg-black-light: var(--c-black-light);
  --bg-gray: var(--c-gray);
  --bg-gray-light: var(--c-gray-light);
  --bg-gray-dark: #D5D5D5;
  --bg-charcoal: var(--c-charcoal);
  --bg-secondary: var(--c-secondary);

  --belt-blue: #9CE3EA;
  --belt-brown: #D8C9BD;
  --belt-red: #CD2827;
  --belt-brown-dark: #856452;
  --belt-blue-dark: #2A3363;

  /* Fonts */
  --font-family-fallback: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;

  --base-font-size: 10px;
  --headline-font-size: 3.7rem;

  --title-font-size-sm: 1.5rem;
  --title-font-size-md: 1.8rem;
  --title-font-size-lg: 2.4rem;

  --body-font-size-xsm: 1rem;
  --body-font-size-sm: 1.2rem;
  --body-font-size-lg: 1.4rem;
  --body-font-size-xlg: 2rem;

  --caption-font-size: 1rem;

  --font-light: 300;
  --font-normal: 400;
  --font-md: 500;
  --font-semi: 600;
  --font-bold: 700;

  /* Shadows */
  --shadow-sm: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.1);
  --shadow-md: 1.5rem 4rem 5rem rgba(0, 0, 0, 0.3);

  /* Border radius */
  --rounded-sm: 1rem;
  --rounded-md: 2rem;
  --rounded-lg: 2.5rem;
  --rounded-xl: 5rem;
  --rounded-full: 50%;

  /* z-index */
  --z-index-base: 10;
  --z-index-footer: 500;
  --z-index-header: 400;

  /* Responsive */
  --breakpoint-sp: 768px;

  /* Transitions */
  --common-transition: 0.3s;

  /* Others */
  --header-height: 4rem;
  --hover-opacity: 0.8;
  --padding-x-main: 2.6rem;
  --padding-x-main-negative: -2.6rem;
}