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

    /* typography tokens */
    :root {
        /* PC */
        /* number */
        --font-size-large-title: 106px;
        --font-size-head-1: 74px;
        --font-size-head-2: 42px;
        --font-size-head-3: 36px;
        --font-size-head-4: 32px;
        --font-size-head-5: 28px;
        --font-size-sub-head: 32px;
        --font-size-date-1: 74px;
        --font-size-date-2: 42px;
        --font-size-body-1: 20px;
        --font-size-body-2: 18px;
        --font-size-body-3: 15px;
        --font-size-footnote: 12px;
        --spacing-head-l: 50px;
        --spacing-head-m: 40px;
        --spacing-head-r: 30px;
        --spacing-head-s: 15px;
        --spacing-date-m: 5px;
        --spacing-date-s: 2px;
    }
}

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

    /* typography tokens */
    :root {
        /* WAP */
        /* number */
        --font-size-large-title: 2.3em;
        --font-size-head-1: 2em;
        --font-size-head-2: 1.6em;
        --font-size-head-3: 1.4em;
        --font-size-head-4: 1.2em;
        --font-size-head-5: 1.1em;
        --font-size-sub-head: 1.2em;
        --font-size-date-1: 2em;
        --font-size-date-2: 1.2em;
        --font-size-body-1: 0.9em;
        --font-size-body-2: 0.8em;
        --font-size-body-3: 0.75em;
        --font-size-footnote: 0.5em;
        --spacing-head-l: 1.5em;
        --spacing-head-m: 1.2em;
        --spacing-head-r: 0.75em;
        --spacing-head-s: 0.5em;
        --spacing-date-m: 5px;
        --spacing-date-s: 2px;
    }
}

/* color tokens */
.cbcn-section.wt {
    /* light */
    /* color */
    --background-l1: #ffffff;
    --background-l2: #f2f2f2;
    --background-l3: #ebebeb;
    --background-l4: #e0e0e0;
    --background-l5: #FAFAFA;
    --bottom-bg-l1: #000000;
    --bottom-bg-l2: rgba(0, 0, 0, 0.15);
    --bottom-bg-l3: rgba(0, 0, 0, 0.08);
    --bottom-bg-l4: rgba(0, 0, 0, 0.05);
    --icon-l1: rgba(0, 0, 0, 0.9);
    --icon-l2: rgba(0, 0, 0, 0.6);
    --icon-l3: rgba(0, 0, 0, 0.4);
    --icon-l4: rgba(0, 0, 0, 0.3);
    --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: rgba(0, 0, 0, 0.9);
    --text-l2: rgba(0, 0, 0, 0.6);
    --text-l3: rgba(0, 0, 0, 0.4);
    --text-l4: rgba(0, 0, 0, 0.3);
    --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: #121212;
    --bottom-bg-l1: #ffffff;
    --bottom-bg-l2: rgba(255, 255, 255, 0.25);
    --bottom-bg-l3: rgba(255, 255, 255, 0.15);
    --bottom-bg-l4: rgba(255, 255, 255, 0.12);
    --icon-l1: rgba(255, 255, 255, 0.95);
    --icon-l2: rgba(255, 255, 255, 0.65);
    --icon-l3: rgba(255, 255, 255, 0.50);
    --icon-l4: rgba(255, 255, 255, 0.35);
    --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: rgba(255, 255, 255, 0.95);
    --text-l2: rgba(255, 255, 255, 0.65);
    --text-l3: rgba(255, 255, 255, 0.50);
    --text-l4: rgba(255, 255, 255, 0.35);
    --text-on-surface-l1: #000000e5;
    --text-on-surface-l2: #00000099;
    --text-on-surface-l3: #00000066;
    --text-on-surface-l4: #0000004d;
}