/*
*   1rem = 10px
*/
html, body {
    font-size: calc(10 / 1920 * 100vw);
    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: #333333;
    --noir: #666666;
    --blue: #0182F0;
    --lightblue: #EFF8FF;
    --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 @ Poppins
    *   font weight @ Poppins
    */
    --font-pop: "Poppins";
    --pop-extralight: 200;
    --pop-light: 300;
    --pop-regular: 400;
    --pop-medium: 500;
    --pop-semibold: 600;

    /*
    *   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;
}