@charset "UTF-8";

:root {
  --ff-noto: "Noto Sans JP", sans-serif;
  --ff-noto-serif: "Noto Serif JP", serif;
  --ff-sans-serif: var(--ff-noto);
  --ff-serif: var(--ff-noto-serif);
  --fontFamily-base: var(--ff-sans-serif);
  --fontSize-base: 1rem;
  --fontWeight-base: 400;
  --lineHeight-base: 2;
  --backgroundColor-base: var(--color-bg-base);
  --sec: 0.5s;
  --sec-a: 1s;
  --opacity: 0.6;
  --zoom: 1.1;
  --radius: 10px;
  --header-size: 0;
  --scroll-adjust: var(--header-size);
  --site-width: 1100px;
  --space-inline: 30px;
  --min-device-width: 360px;
  --vw100: max(calc(100vw - var(--scrollbar-width, 0)), var(--min-device-width));
  --vw: calc(var(--vw100) / 100);
  --color-base: #222222;
  --color-outline: #222222;
  --color-bg-base: #ffffff;
  --color-light: #ffffff;
  --color-dark: #000000;
  --color-blue-base: #E0ECF5;
  --color-blue-light: #99BFDE;
  --color-blue-dark: #005EAD;
  --color-orange-base: #FDF4E0;
  --color-orange-light: #F8D999;
  --color-orange-dark: #EDA000;
}
@media (width <= 828px) {
  :root {
    --header-size: 0;
  }
}
@media (width <= 1100px) {
  :root {
    --space-inline: 20px;
  }
}

html {
  scrollbar-gutter: stable;
}