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

    /* color */
    --white: #FFFFFF;
    --gray: #F5F5F5;
    --darkgray: #CCCCCC;
    --black: #333333;
    --green: #009F92;
    --darkgreen: #3A5B52;
    --lightgreen: #E6FFFD;
    --ctagreen: #00B0A1;
    --blue: #0000EE;
    --red: #F01212;
    --lightorange: #FFEFE1;
    --orange: #FF7D13;
    --orange-gradation: linear-gradient(
        100deg,
        rgba(255, 125, 19, 1) 0%,
        rgba(255, 170, 101, 1) 66%,
        rgba(255, 202, 96, 1) 97%
    );
    --green-gradation: linear-gradient(
        90deg,
        rgba(0, 176, 161, 1) 0%,
        rgba(0, 204, 166, 1) 64%,
        rgba(40, 238, 208, 1) 97%
    );

    /* font family */
    --font-gothic: "Noto Sans JP";
    --font-mincho: "Shippori Mincho";
    --font-mincho-eng: "Fanwood Text";

    /* px : vw@1920px */
    --px-1: 0.0521vw;
    --px-3: 0.1563vw;
    --px-4: 0.2083vw;
    --px-5: 0.25vw;
    --px-10: 0.5208vw;
    --px-12: 0.625vw;
    --px-14: 0.7292vw;
    --px-15: 0.7813vw;
    --px-16: 0.8333333333333334vw;
    --px-19: 0.9896vw;
    --px-20: 1.0417vw;
    --px-22: 1.1458vw;
    --px-23: 1.1979166666666667vw;
    --px-24: 1.25vw;
    --px-26: 1.3542vw;
    --px-28: 1.4583vw;
    --px-29: 1.5vw;
    --px-30: 1.5625vw;
    --px-32: 1.6667vw;
    --px-34: 1.7708vw;
    --px-35: 1.8229vw;
    --px-36: 1.875vw;
    --px-38: 2vw;
    --px-45: 2.3438vw;
    --px-46: 2.4479vw;
    --px-48: 2.5vw;
    --px-50: 2.6042vw;
    --px-55: 2.8516vw;
    --px-56: 2.9167vw;
    --px-58: 3.0208vw;
    --px-60: 3.125vw;
    --px-62: 3.2292vw;
    --px-63: 3.3333vw;
    --px-66: 3.4375vw;
    --px-70: 3.6458vw;
    --px-75: 3.9063vw;
    --px-86: 4.4792vw;
    --px-90: 4.6875vw;
    --px-96: 5vw;
    --px-99: 5.1563vw;
    --px-100: 5.2083vw;
    --px-110: 5.7292vw;
    --px-113: 5.8854vw;
    --px-120: 6.25vw;
    --px-125: 6.5104vw;
    --px-130: 6.7708vw;
    --px-170: 8.8542vw;
    --px-186: 9.6875vw;
    --px-190: 9.8958vw;
    --px-200: 10.4167vw;
    --px-206: 10.7292vw;
    --px-220: 11.4583vw;
    --px-302: 15.75vw;
    --px-324: 16.875vw;
    --px-585: 30.4688vw;
    --px-615: 32.0313vw;
    --px-660: 34.375vw;
    --px-700: 36.4583vw;
    --px-730: 38.0208vw;
    --px-759: 39.4792vw;
    --px-768: 40vw;
    --px-780: 40.625vw;
    --px-845: 44.0104vw;
    --px-892: 46.4583vw;

    /* border size */
    --px-border-1-5: 0.0781vw;
    --px-border-1-25: 0.0651vw;
    /* wrapper width */
    --px-wrapper: 83vw;
    --px-inner-wrapper: 68.8542vw;
    --px-fv-image: 74.75vw;
    --px-fv-rectangle: 91vw;

    /* negative size */
    --px-negative-15: -0.7813vw; 
    --px-negative-295: -15.3646vw;
    --px-negative-468: -24.375vw; 

    /* shadow */
    --whiteshadow: 0 0.1rem 0.5rem rgba(255, 255, 255, 0.8);
    --blackshadow: 0.625rem 0.625rem 0.75rem 0 rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 480px) {
    :root {
        /* px : vw@375px */
        --px-1: .2667vw;
        --px-3: .8vw;
        --px-4: 1.0667vw;
        --px-5: 1.3333vw;
        --px-7: 1.8667vw;
        --px-10: 2.6667vw;
        --px-12: 3.2vw;
        --px-13: 3.4667vw;
        --px-14: 3.7333vw;
        --px-15: 4vw;
        --px-16: 4.2667vw;
        --px-18: 4.8vw;
        --px-19: 5.0667vw;
        --px-20: 5.3333vw;
        --px-22: 5.8667vw;
        --px-23: 6.1333vw;
        --px-24: 6.4vw;
        --px-26: 6.9333vw;
        --px-28: 7.4667vw;
        --px-29: 7.7333vw;
        --px-30: 8vw;
        --px-32: 8.5333vw;
        --px-34: 9.0667vw;
        --px-35: 9.3333vw;
        --px-36: 9.6vw;
        --px-38: 10.1333vw;
        --px-40: 10.6667vw;
        --px-44: 11.7333vw;
        --px-45: 12vw;
        --px-46: 12.2667vw;
        --px-48: 12.8vw;
        --px-50: 13.3333vw;
        --px-55: 14.6667vw;
        --px-56: 14.9333vw;
        --px-58: 15.4667vw;
        --px-60: 16vw;
        --px-62: 16.5333vw;
        --px-63: 16.8vw;
        --px-66: 17.6vw;
        --px-68: 18.1333vw;
        --px-70: 18.6667vw;
        --px-75: 20vw;
        --px-76: 20.2667vw;
        --px-78: 20.8vw;
        --px-80: 21.3333vw;
        --px-86: 22.9333vw;
        --px-90: 24vw;
        --px-96: 25.6vw;
        --px-99: 26.4vw;
        --px-100: 26.6667vw;
        --px-110: 29.3333vw;
        --px-113: 30.1333vw;
        --px-120: 32vw;
        --px-125: 33.3333vw;
        --px-130: 34.6667vw;
        --px-170: 45.3333vw;
        --px-186: 49.6vw;
        --px-190: 50.6667vw;
        --px-200: 53.3333vw;
        --px-206: 54.9333vw;
        --px-220: 58.6667vw;
        --px-244: 65.0667vw;
        --px-302: 80.5333vw;
        --px-324: 86.4vw;
        --px-585: 156vw;
        --px-615: 164vw;
        --px-660: 176vw;
        --px-700: 186.6667vw;
        --px-730: 194.6667vw;
        --px-759: 202.4vw;
        --px-768: 204.8vw;
        --px-780: 208vw;
        --px-845: 225.3333vw;
        --px-892: 237.8667vw;

        /* border size */
        --px-border-1-5: .4vw;
        --px-border-1-25: .3333vw;
        /* wrapper width */
        --px-wrapper: 100%;
        --px-inner-wrapper: 87.2%;
        --px-fv-image: 382.6667vw;
        --px-fv-rectangle: 465.8667vw;

        /* negative size */
        --px-negative-15: -4vw; 
        --px-negative-24: -6.4vw;
        --px-negative-30: -8vw; 
        --px-negative-295: -78.6667vw;
        --px-negative-468: -124.8vw;

        /* shadow */
        --whiteshadow: 0 0.1rem 0.5rem rgba(255, 255, 255, 0.8);
        --blackshadow: 0.625rem 0.625rem 0.75rem 0 rgba(0, 0, 0, 0.15);
    }
}