/*
*   1rem = 10px
*/
html, body {
    font-size: min(calc(10 / 1920 * 100vw), 10px);
    width: 100%;
}
@media screen and (max-width: 480px) {
    html, body {
        font-size: calc(10 / 375 * 100vw);
        width: 100%;
    }
}

/*
*   valiable settings
*   [example] background-color: var(--black);
*/ 
:root {
    /* dark mode > disabled */
    color-scheme: light;

    /* color */
    --white: #FFFFFF;
    --gray: #EAEAEA;
    --lightgray: #F9F9F9;
    --border-gray: #EAEAEA;
    --border-darkgray: #E0E0E0;
    --black: #000000;
    --noir: #666666;
    --blue: #2f8fe9;
    --orange: #ec701c;
    --red: #db0000;
    --accentblue: #2f8fe9;
    --lightblue: #EFF8FF;
    --blue-gradation-x: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(1, 130, 240, 0.15) 27%,
        rgba(1, 130, 240, 0.15) 100%
    );
    --blue-gradation: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(1, 130, 240, 0.15) 67%,
        rgba(1, 130, 240, 0.15) 100%
    );

    /*
    *   font family, font-weight @ Sawarabi Gothic : 400
    */
    --font-pop: "Sawarabi Gothic";

    /*
    *   font family, font-weight @ Noto sans JP
    */
    --font-gothic: "Noto Sans JP";
    --gothic-thin: 100;
    --gothic-extralight: 200;
    --gothic-light: 300;
    --gothic-regular: 400;
    --gothic-medium: 500;
    --gothic-semibold: 600;
    --gothic-bold: 700;

    /*
    *   font family, font-weight @ Zen Kaku Gothic New
    */
    --font-zen: "Zen Kaku Gothic New";
    --zen-light: 300;
    --zen-regular: 400;
    --zen-medium: 500;
    --zen-bold: 700;

    /* box-shadow */
    --box-blackshadow: 0.8rem 0.8rem 3rem 0 rgba(0, 0, 0, 0.11);
    --box-whiteshadow: 0.8rem 0.8rem 3rem 0 rgba(255, 255, 255, 0.11);
}

*, *:after, *:before {
    box-sizing: border-box;
}