@charset "UTF-8";

:root {
  /* color */
  --color-text: #333333;
  --color-text-muted: #555555;
  --color-white: #ffffff;
  --color-bg: #FEF9EB;
  --color-beige: #FEF9EB;
  --color-border: #A3A3A3;
  --color-accent: #238D6E;
  --color-midashi: #00a283;
  --color-accent2: #FDD002;
  --color-overlay: rgba(0, 0, 0, 0.2);
  --color-side-shiryo: #1b4f8c;
  --color-side-nyushi: #238D6E;
  --color-side-open: #FDD002;
  --color-side-event: #3b9ad8;

  --color-deps1-back: #FFEB8E;
  --color-deps1-key: #F38200;
  --color-deps2-back: #CDDF74;
  --color-deps2-key: #6EB175;
  --color-deps3-back: #A7DEE0;
  --color-deps3-key: #2BADD7;

  /* font */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-rounded: "Zen Maru Gothic", "Noto Sans JP",  sans-serif;
  --font-lato: "Lato", sans-serif;
  --font-garamond: "EB Garamond", "Times New Roman", serif;
  --font-size-root: 18px;

  /* layout */
  --wrapper-max: 1300px;
  --wrapper2-max: 1200px;
  --wrapper-width: 90%;

  /* breakpoint
     ※ @media 内では var() が使えないため、値の正としてここに置く */
  --bp-tab: 1024px;
  --bp-sp: 600px;

  /* motion */
  --duration: 0.3s;
  --duration-slow: 0.7s;
}