@font-face {
  font-family: Noto Sans JP;
  font-display: swap;
  src: url("fonts/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf") format("TrueType");
}
@font-face {
  font-family: Quicksand;
  font-display: swap;
  src: url("fonts/Quicksand/Quicksand-VariableFont_wght.ttf") format("TrueType");
}
@font-face {
  font-family: Zen Maru Gothic;
  font-display: swap;
  src: url("fonts/Zen_Maru_Gothic/ZenMaruGothic-Bold.ttf") format("TrueType"), url("../fonts/Zen_Maru_Gothic/ZenMaruGothic-Black.ttf") format("TrueType");
}

:root {
  /* color */
  --base: 0, 0, 0; /* black */
  --grey: 78, 78, 78;
  --wht: 255, 255, 255;
  --back: 252, 248, 242;
  --pink: 245, 119, 158;
  --pale_pink: 254, 237, 243;
  --beige: 211, 182, 131;
  --pale_beige: 245, 236, 223;
  --green: 68, 208, 159;
  --pale_green: 235, 249, 243;
  /* transition */
  --transition-all: all 0.3s ease-in-out;
  /* font */
  --noto: "Noto Sans JP", sans-serif;
  --num: "Quicksand", sans-serif;
  --zenmaru: "Zen Maru Gothic", serif;
}