@charset "UTF-8";

:root {
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1440px;
}

:root {
  --color-black: #171717;
  --color-white: #fff;
  --color-gray-100: #fcfcfc;
  --color-gray-200: #f8f8f8;
  --color-gray-300: #ebebeb;
  --color-gray-400: #e6e6e6;
  --color-gray-500: #e2e2e2;
  --color-gray-600: #d9d9d9;
  --color-gray-700: #cbcbcb;
  --color-gray-800: #bfbfbf;
  --color-gray-900: #a09c93;
  --color-gray-1000: #898989;
  --color-gray-1100: #454545;
  --color-red: #ff0000;
}

:root {
  --font-family-base: "Mulish", "Hiragino Sans", "Meiryo", sans-serif;
}

:root {
  --font-size-5xs: 10px;
  --font-size-4xs: 11px;
  --font-size-3xs: 12px;
  --font-size-2xs: 13px;
  --font-size-xs: 14px;
  --font-size-sm: 15px;
  --font-size-md: 16px;
  --font-size-lg: 17px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 22px;
  --font-size-4xl: 28px;
  --font-size-5xl: 30px;
  --font-size-6xl: 32px;
  --font-size-7xl: 36px;
  --font-size-8xl: 52px;
}

:root {
  --font-weight-sm: 400;
  --font-weight-md: 500;
  --font-weight-lg: 600;
  --font-weight-xl: 700;
}

:root {
  --letter-spacing-none: 0;
  --letter-spacing-sm: .01em;
  --letter-spacing-md: .02em;
  --letter-spacing-lg: .03em;
  --letter-spacing-xl: .04em;
  --letter-spacing-2xl: .07em;
  --letter-spacing-3xl: .1em;
  --letter-spacing-4xl: .11em;
  --letter-spacing-5xl: .14em;
}

:root {
  --line-height-none: 1;
  --line-height-sm: 1.5;
  --line-height-md: 2;
}

:root {
  --content-width-sm: 800px;
  --content-width-md: 900px;
  --content-width-lg: 1120px;
  --content-width-xl: 1240px;
  --content-padding-side: 100px;

  @media (max-width: 768px) {
    --content-padding-side: 13px;
  }
}

:root {
  --border-radius-full: calc(infinity * 1px);
}

:root {
  --duration: .3s;
  --easing: ease;
}