@media screen and (min-width: 981px) {

    /* typography tokens */
    :root {
        /* PC */
        /* number */
        --font-size-footnote: 12px;
        --font-size-body-3: 15px;
        --font-size-body-2: 18px;
        --font-size-body-1: 21px;
        --font-size-head-5: 28px;
        --font-size-sub-head: 28px;
        --font-size-head-4: 36px;
        --font-size-head-3: 40px;
        --font-size-date-2: 48px;
        --font-size-head-2: 48px;
        --font-size-date-1: 72px;
        --font-size-head-1: 72px;
        --font-size-large-title: 108px;
        --spacing-head-l1: 50px;
        --spacing-head-l2: 40px;
        --spacing-head-l3: 30px;
        --spacing-head-m1: 25px;
        --spacing-head-m2: 20px;
        --spacing-head-m3: 15px;
        --spacing-head-s1: 10px;
        --spacing-head-s2: 5px;
        --spacing-head-s3: 2px;
    }
}

@media screen and (max-width: 980px) {

    /* typography tokens */
    :root {
        /* WAP */
        /* number */
        --font-size-footnote: 0.5em;
        --font-size-body-3: 0.75em;
        --font-size-body-2: 0.8em;
        --font-size-body-1: 0.95em;
        --font-size-sub-head: 1em;
        --font-size-head-5: 1.1em;
        --font-size-head-4: 1.2em;
        --font-size-head-3: 1.4em;
        --font-size-date-2: 1.4em;
        --font-size-head-2: 1.5em;
        --font-size-date-1: 2em;
        --font-size-head-1: 2em;
        --font-size-large-title: 2.25em;
        --spacing-head-l1: 1.5em;
        --spacing-head-l2: 1.25em;
        --spacing-head-l3: 1em;
        --spacing-head-m1: 0.75em;
        --spacing-head-m2: 0.6em;
        --spacing-head-m3: 0.5em;
        --spacing-head-s1: 0.4em;
        --spacing-head-s2: 0.25em;
        --spacing-head-s3: 0.1em;
    }
}

/* color tokens */
.cbcn-section.wt {
    /* light */
    /* color */
    --background-l1: #ffffff;
    --background-l2: #f2f2f2;
    --background-l3: #ebebeb;
    --background-l4: #e0e0e0;
    --background-l5: #ffffff;
    --bottom-bg-l1: #000000;
    --bottom-bg-l2: #00000026;
    --bottom-bg-l3: #00000014;
    --bottom-bg-l4: #0000000d;
    --icon-l1: #000000e5;
    --icon-l2: #00000099;
    --icon-l3: #00000066;
    --icon-l4: #0000004d;
    --icon-on-surface-l1: #fffffff2;
    --icon-on-surface-l2: #ffffffa6;
    --icon-on-surface-l3: #ffffff80;
    --icon-on-surface-l4: #ffffff59;
    --line-l1: #000000;
    --line-l2: #b3b3b3;
    --line-l3: #cccccc;
    --text-l1: #000000e5;
    --text-l2: #00000099;
    --text-l3: #00000066;
    --text-l4: #0000004d;
    --text-on-surface-l1: #fffffff2;
    --text-on-surface-l2: #ffffffa6;
    --text-on-surface-l3: #ffffff80;
    --text-on-surface-l4: #ffffff59;
}

.cbcn-section.bk {
    /* dark */
    /* color */
    --background-l1: #000000;
    --background-l2: #0d0d0d;
    --background-l3: #141414;
    --background-l4: #1f1f1f;
    --background-l5: #ffffff;
    --bottom-bg-l1: #ffffff;
    --bottom-bg-l2: #ffffff40;
    --bottom-bg-l3: #ffffff26;
    --bottom-bg-l4: #ffffff1f;
    --icon-l1: #fffffff2;
    --icon-l2: #ffffffa6;
    --icon-l3: #ffffff80;
    --icon-l4: #ffffff59;
    --icon-on-surface-l1: #000000e5;
    --icon-on-surface-l2: #00000099;
    --icon-on-surface-l3: #00000066;
    --icon-on-surface-l4: #0000004d;
    --line-l1: #ffffff;
    --line-l2: #4d4d4d;
    --line-l3: #333333;
    --text-l1: #fffffff2;
    --text-l2: #ffffffa6;
    --text-l3: #ffffff80;
    --text-l4: #ffffff59;
    --text-on-surface-l1: #000000e5;
    --text-on-surface-l2: #00000099;
    --text-on-surface-l3: #00000066;
    --text-on-surface-l4: #0000004d;
}