@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: #262626;
    --color-white: #fff;
    --color-yellow-01: #fffbe6;
    --color-yellow-02: #ffd800;
    --color-yellow-03: #bfb600;
    --color-yellow-04: #fffad3;
    --color-yellow-05: #fffddb;
    --color-yellow-06: #fff200;
    --color-gray-01: #dfdfdf;
    --color-gray-02: #4d4d4d;
    --color-gray-03: rgb(242 248 253 / 20%);
    --color-gray-04: #767676;
    --color-gray-05: #737373;
    --color-gray-06: rgb(0 0 0 / 10%);
    --color-gray-07: #ebebeb;
    --color-gray-08: #f6f6f6;
    --color-black-01: #012b55;
    --color-black-02: #292200;
    --color-blue-01: #007ebf;
    --color-blue-02: #036dd6;
    --color-blue-03: #f0faff;
    --color-blue-04: #e9eff6;
    --color-blue-05: #185add;
    --color-blue-06: #f2f8fd;
    --color-blue-07: #dbf3ff;
    --color-blue-08: #f7fafe;
    --color-blue-09: #007bbb;
    --color-blue-10: #0362c0;
    --color-red-01: #d32121;
    --color-red-02: #ff8e8e;

    /* 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;
  }
}