:root {
  /* font */
  --FONT_FAMILY: "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif;
  --FONT_FAMILY_HEADING: "Hiragino Kaku Gothic Std", Arial, Meiryo, sans-serif;
  --FONT_FAMILY_NOTO: "Noto Sans JP", Arial, Meiryo, sans-serif;

  /* color */
  --COLOR_TEXT: #000;
  --COLOR_LINK: #0041FC;
  --COLOR_WHITE: #FFF;
  --COLOR_PINK: #FF4384;
  --COLOR_PINK_ACCENT: #FFEDF3 ;
  --COLOR_BACKGROUND_SKYBLUE: #CBEDFF;
  --COLOR_BACKGROUND_DARKBLUE: #F2F5F8;
  --COLOR_BACKGROUND_FOOTER: #CBEDFF;

  /* font-size */
  --FONT_SIZE: 0.875rem;

  /* font-weight */
  --FONT_WEIGHT_NORMAL: 400;
  --FONT_WEIGHT_BOLD: 700;
  --FONT_WEIGHT_BLACK: 800;

  /* line-height */
  --LINE_HEIGHT: 1.5;

  /* padding, margin */
  --GAP_SSS: 4px;
  --GAP_SS: 8px;
  --GAP_S: 12px;
  --GAP_M: 16px;
  --GAP_L: 24px;
  --GAP_XL: 32px;
  --GAP_2XL: 40px;
  --GAP_3XL: 80px;

  /* border-radius */
  --BORDER_RADIUS_S: 4px;
  --BORDER_RADIUS_M: 24px;

  /* box-shadow */
  --BOX_SHADOW: 0 4px 16px 0 rgba(0, 0, 0, 0.20);
}

@media screen and (768px < width) {
  :root {
    /* font-size */
    --FONT_SIZE: 1rem;

    /* padding, margin */
    --GAP_SSS: 8px;
    --GAP_SS: 16px;
    --GAP_S: 16px;
    --GAP_M: 24px;
    --GAP_L: 32px;
    --GAP_XL: 40px;
    --GAP_2XL: 64px;
    --GAP_3XL: 120px;

    /* border-radius */
    --BORDER_RADIUS_S: 12px;
    --BORDER_RADIUS_M: 32px;
  }
}