@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap');

:root {
  /**
    * pxtovmin
    *
    * @example 16px相当を算出する場合
    *   body {
    *     font-size: calc(var(--pxtovmin) * 16);
    *   }
  */
  --device-criteria: 390;
  --pxtovmin: calc(100 / var(--device-criteria) * 1vmin);

  /**
   * Colors
   */
  --color-primary: #BA5D00;
  --color-primary-light: #C87D33;
  --color-900: #000;
  --color-800: #1A1A1A;
  /* --color-700: #2C2C2C;
  --color-600: #444; */
  --color-500: #666;
  /* --color-400: #777; */
  --color-300: #8f8f8f;
  /* --color-200: #BBB; */
  --color-100: #F2F2F2;
  --color-000: #fff;

  /**
   * Font Sizes
   */
  --font-size-base: 16px;
  --font-size-2xl: 48px;
  --font-size-xl: 32px;
  --font-size-lg: 28px;
  --font-size-md: 24px;
  --font-size-sm: 20px;
  --font-size-xs: 14px;
  --font-size-2xs: 12px;

  @media screen and (max-width: 640px) {
    --font-size-2xl: 32px;
    --font-size-xl: 24px;
    --font-size-lg: 22px;
    --font-size-md: 20px;
    --font-size-sm: 18px;
    --font-size-xs: 14px;
    --font-size-2xs: 11px;
  }

  @media screen and (max-width: 390px) {
    --font-size-base: calc(var(--pxtovmin) * 16);
    --font-size-2xl: calc(var(--pxtovmin) * 32);
    --font-size-xl: calc(var(--pxtovmin) * 24);
    --font-size-lg: calc(var(--pxtovmin) * 22);
    --font-size-md: calc(var(--pxtovmin) * 20);
    --font-size-sm: calc(var(--pxtovmin) * 18);
    --font-size-xs: calc(var(--pxtovmin) * 14);
    --font-size-2xs: calc(var(--pxtovmin) * 11);
  }

  /**
   * Font Family
   */
  --font-family-primary:
    "Noto Sans JP",
    "游ゴシック体",
    yugothic,
    "游ゴシック Medium",
    "Yu Gothic Medium",
    "游ゴシック",
    "Yu Gothic",
    -apple-system,
    "BlinkMacSystemFont",
    "Helvetica Neue",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Meiryo",
    sans-serif;

  /**
   * Width
   */
  --width-content-base: 978px;
  --width-content-wide: calc(var(--width-content-base) + (116px * 2));
  --width-content-max: 1440px;

  /**
   * Guuters
   */
  --gutter-base: 24px;
  --gutter-2xl: 116px;
  --gutter-xl: 80px;
  --gutter-lg: 56px;
  --gutter-md: 40px;
  --gutter-sm: 16px;
  --gutter-xs: 8px;
  --gutter-2xs: 4px;
}