@charset "utf-8";

/*
CSS Variables
*/
:root {
    --color-black: #000;
    --color-white: #fff;
    --color-text-primary: #4e4e4e;
    --color-text-secondary: #646464;
    --color-theme: #4ba53a;

    --color-border: #e2e2e2;
    --color-background: #ffffff;
    --color-background-alt: #fafafa;
    --color-surface-notice: #fafafa;

    --color-header-sp: rgb(0 0 0 / 0.8);
    --color-header-pc: #202020;
    --size-header-sp: 56px;
    --size-header-tb: 76px;
    --size-header-pc: 100px;

    --color-footer-background: #333333;
    --color-footer-object-default: #cccccc;
    --color-footer-object-active: #ffffff;

    --color-button-primary: #646464;
    --color-button-secondary: #ececec;

    --color-toc-background: #ececec;

    --font-size-sp-base: 16px;
    --font-size-sp-small: 12px;
    --font-size-sp-header-1: 36px;
    --font-size-sp-header-2: 24px;

    --font-size-pc-base: 16px;
    --font-size-pc-small: 12px;
    --font-size-pc-header-1: 36px;
    --font-size-pc-header-2: 24px;

    --z-index-header: 8888;
}
body.__is_app {
    --color-background: #fafafa;
    --color-surface-notice: #eeeeee;
}
/*
for Darkmode color palette
*/

/* @media (prefers-color-scheme: dark) {
    :root {
        --color-black: #f8f8f8;
        --color-white: #333333;
        --color-text: #f8f8f8;
        --color-background: #333333;
        --color-theme: #4ba53a;

        --color-button-primary: #ffffff;
        --color-button-secondary: #4e4e4e;
    }
    body.__is_app {
        --color-background: #444444;
        --color-surface-notice: #333333;
    }
} */

/*
by Languages
*/
:lang(en) {
}
:lang(ja) {
}
:lang(ko) {
}