:root {
    /* Font families */
    --font-family-noto-sans-jp: "Noto Sans JP", sans-serif;
    --font-family-figtree: "Figtree", sans-serif;

    /* Colors */
    --color-black-1: #000000;
    --color-black-2: #434343;
    --color-gray-1: #888888;
    --color-gray-2: #989898;
    --color-gray-3: #B5B7BA;
    --color-navy-1: #02486A;
    --color-navy-2: #003D56;
    --color-navy-3: #001E2B;
    --color-white-1: #FFFFFF;
    --color-gold-1: #C28E0F;
    --color-gold-2: #B98A16;
    --color-gold-3: #B39E6A;

    /* Border radius */
    --radius-2: 2px;
    --radius-3: 3px;
    --radius-5: 5px;
    --radius-10: 10px;

    /* Typography tokens
        Note: CSS letter-spacing does not accept percentages, so 10% is stored as 0.1em. */
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-32: 32px;
    --font-size-36: 36px;
    --font-size-80: 80px;

    --font-weight-500: 500;
    --font-weight-700: 700;

    --line-height-100: 100%;
    --line-height-160: 160%;
    --line-height-25: 25px;
    --line-height-28: 28px;
    --line-height-30: 30px;
    --line-height-33: 33px;
    --line-height-45: 45px;
    --line-height-87: 87px;

    --letter-spacing-0: 0;
    --letter-spacing-10: 0.1em;

    /* Layout */
    --container-max-width: 1440px;
    --container-padding-inline: 50px;
    --lower-sidebar-width: 240px;
    --lower-layout-gap: 67px;

    /* Z-index */
    --z-index-above: 1;
    --z-index-dropdown: 10;
    --z-index-header: 100;
}

@media screen and (max-width: 768px) {
    :root {
        --container-padding-inline: 15px;
        --lower-layout-gap: 40px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
    :root {
        --container-padding-inline: 32px;
        --lower-layout-gap: 48px;
    }
}