@layer tokens {
  :root {
    /* fonts */
    --font-family-base: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --font-family-serif-jp: "Noto Serif JP", sans-serif, sans-serif;
    --font-size-base: 100%;

    /* color */
    --color-base: #13334e;
    --color-black: #000;
    --color-grey: #f5f7fa;
    --color-grey-02: #ecf0f5;
    --color-grey-03: #8ba2b4;
    --color-grey-04: #d3d9e0;
    --color-grey-05: #e2e8eb;
    --color-grey-06: #eceff0;
    --color-grey-07: #d6d5d1;
    --color-grey-08: #ebeff3;
    --color-grey-09: #e0e0e0;
    --color-grey-10: #b0b0b0;
    --color-grey-11: #fafbfc;
    --color-grey-12: #706d5e;
    --color-grey-13: #f2f5fa;
    --color-white: #fff;
    --color-yellow: #e6c300;
    --color-yellow-02: #fffdf0;
    --color-blue: #2d4a62;
    --color-blue-02: #627789;
    --color-blue-03: #476075;
    --color-blue-04: #96a4b0;
    --color-blue-05: #27445d;
    --color-blue-06: #0a1a27;
    --color-blue-07: #2b4860;
    --color-red: #e22645;
    --color-red-02: #c21b46;

    /* transition */
    --transition-all: all 0.25s ease;
    --transition: opacity 0.25s ease;

    /* z-index */
    --z-index-header: 10;
    --z-index-header-overlay: 9;
    --z-index-modal: 20;
  }
}