@charset "UTF-8";

:root {
  --color-white: #fff;
  --color-black: #000;

  --color-main: #111;
  --color-sub01: #ddd;
  --color-sub02: #ebebeb;
  --color-sub03: #f4f4f4;

  --color-text-default: var(--color-main);

  --font-notosans: 'Noto Sans JP';
  --font-degular: 'degular';
  --font-roboto: 'Roboto';

  --font-ja: var(--font-notosans);
  --font-en: var(--font-roboto);

  --font-main: var(--font-en), var(--font-ja), sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --transition-duration: 0.3s;
  --transition-timing-function: ease;
  --transition-default: var(--transition-duration) var(--transition-timing-function);

  --zindex-base: 1;
  --zindex-floating-element: 10;
  --zindex-header: 20;
  --zindex-hamburgermenu-bg: 30;
  --zindex-hamburgermenu-contents: 40;

  --space-padding-s: 3.8461%;
  --space-padding-m: 3.8461%;
  --space-padding-l: 3.8461%;
}

@media (min-width: 768px) {
  :root {
    --space-padding-s: 15.7142%;
    --space-padding-m: 9.2857%;
    --space-padding-l: 5.7142%;
  }
}