/*
*   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 */
    --header-white: rgb(255, 255, 255, 0.8);
    --white: #FFFFFF;
    --gray: #F5F5F5;
    --border-gray:#D2D2D2;
    --border-darkgray: #818894;
    --black: #333333;
    --gold: #A48A1B;
    --blue: #00205B;
    --circle-blue:  rgb(0, 32, 91, 0.1);
    --blue-gradation: linear-gradient(
        100deg,
        #00205B 0%,
        #073791 100%
    );

    /* font family */
    --font-gothic: "Noto Sans JP"; /* 100-900 */
    --font-mincho: "Noto Serif JP"; /* 200-900 */

    /* weight @ Noto Sans JP */
    --gothic-regular: 400;
    --gothic-medium: 500;
    --gothic-semibold: 600;
    /* weight @ Noto Serif JP */
    --mincho-semibold: 500;
    --mincho-bold: 600;

    /* shadow */
    --box-blackshadow: 0.6rem 0.6rem 1rem 0 rgba(0, 0, 0, 0.4);
    --bottom-blackshadow: 0 0.1rem 0.1rem -0.6rem rgba(0, 0, 0, 0.3);
    --box-whiteshadow: 0.6rem 0.6rem 1rem 0 rgba(255, 255, 255, 0.4);
    --bottom-whiteshadow: 0 0.1rem 0.1rem -0.6rem rgba(255, 255, 255, 0.3);
}
*, *:after, *:before {
    box-sizing: border-box;
}