@charset "UTF-8";

:root {
  /* コンテンツ幅 */
  --contents_width: 1260px;
  --contents_width_narrow: 1000px;
  --contents_width_wide: 1800px;

  /* ヘッダー */
  --header_header_y_offset: 30px;
  --header_height: 80px;

  /* サイト全体の左右の余白 */
  --side_padding: 30px;
  --side_padding_wide: 100px;

  /* メインカラー */
  --main_color: #f43a00;
  --main_color_dark: #b82b00;
  --main_color_light: #ff5724;
  --main_color_super_light: #ffd7cb;

  /* サブカラー */
  --sub_color: #ffea00;
  --sub_color_dark: #ffae00;
  --sub_color_light: #fff36b;
  --sub_color_super_light: #fff9d0;

  /* グレースケール */
  --black_color: #333;
  --gray_color: #8e8e8e;
  --gray_color_light_dark: #4d4d4d;
  --gray_color_dark: #3b3b3b;
  --gray_color_light: #ccc;
  --gray_color_super_light: #f2f2f2;

  /* 重要 */
  --important_color: #cb0000;
}

@media (max-width: 1600px) {
  :root {
    /* サイト全体の左右の余白 */
    --side_padding_wide: 60px;
  }
}
@media (max-width: 1300px) {
  :root {
    /* サイト全体の左右の余白 */
    --side_padding_wide: 40px;
  }
}
@media (max-width: 1200px) {
  :root {
    /* ヘッダー */
    --header_header_y_offset: 30px;
    --header_height: 74px;
  }
}
@media (max-width: 1000px) {
  :root {
    /* サイト全体の左右の余白 */
    --side_padding: 3%;
  }
}
@media (max-width: 990px) {
  :root {
    /* ヘッダー */
    --header_header_y_offset: 30px;
    --header_height: 64px;
  }
}
@media (max-width: 900px) {
  :root {
    /* サイト全体の左右の余白 */
    --side_padding_wide: 3%;
    /* ヘッダー */
    --header_header_y_offset: 12px;
    --header_height: 50px;
  }
}