@layer tokens {
  :root {
    --color-base: #404040;
    --color-white: #fff;
    --color-black: #000;
    --color-light-bg: #edebe2;
    --color-primary: #004098;
    --color-gray: #5f5f5f;
    --color-light-gray: #ebebeb;
    --color-lighter-gray: #e0e0e0;
    --color-lighter-gray-02: #ddd;
    --color-dark-brown: #231815;
  }
}

@layer tokens {
  :root {
    --font-family-base: "Lato", "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --font-family-noto: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --font-size-base: 1rem;
  }
}

@layer tokens {
  :root {
    --max-width-xxl: 1512px;
    --max-width-xl: 1136px;
    --max-width-l: 944px;
    --max-width-m: 752px;
  }
}

@layer tokens {
  :root {
    --transition-duration: 0.3s;
    --transition-timing-function: ease-out;
    --transition-default: var(--transition-duration) var(--transition-timing-function);
  }
}