/* CSS Variables */
:root {
  --color-red: #ff0000;
  --color-primary: #ff7b00;
  --color-dark-orange: #ff3800;
  --color-orange: #fb6112;
  --color-blue: #0171c1;
  --color-blue-2: #0000c2;
  --color-gray: #828282;
  --color-gray-2: #eceae7;
  --color-gray-3: #f1f0ef;
  --color-gray-4: #d9d9d9;
  --color-gray-5: #8f8f8f;
  --color-white: #fff;
  --color-black: #000;
  --color-black-2: #0c0c0c;
  --color-black-3: #222;
  --color-black-4: #1e1e1e;
  --color-cream: #fffffa;
  --color-cream-2: #e7e7cf7a;
  --color-cream-3: #fff2dc;
  --color-cream-4: #f5f3f1;
  --color-brown: #541800;
  --color-marker-yellow: #ffeb91;
  --color-marker-red: #ffcdd2;
  --color-marker-blue: #c9efff;

  --ff-montserrat: "Montserrat", sans-serif;
  --ff-zen-kaku-gothic-new: "Zen Kaku Gothic New", sans-serif;
  --ff-zen-kaku-gothic-antique: "Zen Kaku Gothic Antique", sans-serif;
  --ff-vt323: "VT323", monospace;
  --ff-noto-sans-jp: "Noto Sans JP", sans-serif;
  --ff-hiragino-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --ff-lato: "Lato", sans-serif;
  --ff-albert-sans: "Albert Sans", sans-serif;
}

/* Utility */
.sp-br {
  display: block;
}
@media (width >= 768px) {
  .sp-br {
    display: none;
  }
}
.pc-br {
  display: none;
}
@media (wid th >= 1024px) {
  .pc-br {
    display: block;
  }
}