/*
    出し方例：
    h1{
        color: var(--main-color);
    }

    button{
        background: var(--accent-color);
    }
*/

/* - font-family
    font-family: 'M PLUS Rounded 1c', sans-serif; // 日本語ノーマル
    font-family: 'Monomaniac One', sans-serif; // 日本語テクノ
    font-family: 'Bebas Neue', sans-serif; // 英字テクノ
    font-family: "Kaisei Opti", serif; // 日本語おしゃれ
*/

:root{
    /* Font Awesome */
    --fa6: 'Font Awesome 6 Free';

    --shadow: 0 2px 4px -2px rgba(0, 0, 0, .8);

    /* Font Family */
    --mplus: 'M PLUS Rounded 1c', sans-serif;
    --neue: 'Bebas Neue', sans-serif;
    --mono: 'Monomaniac One', sans-serif;
    --kaise: 'Kaisei Opti', serif;

    /* Base Color */
    --white: #fff;

    --black: #444;
    --str-black: rgba(0, 0, 0, .7);
    --mid-black: rgba(0, 0, 0, .5);

    --gray: #aaa;
    --mid-gray: #ccc;
    --pal-gray: #f6f6f6;

    --red: rgb(242, 21, 51);
    --pal-red: rgba(242, 21, 51, .1);
    --sha-red: 0 2px 4px -2px rgba(242, 21, 51, .8);
    --mil-red: rgba(242, 21, 51, .3);
    --mid-red: rgba(242, 21, 51, .5);

    --navy: rgba(11, 63, 185, 1);
    --pal-navy: rgba(11, 63, 185, .1);
    --mid-navy: rgba(11, 63, 185, .5);
    --mil-navy: rgba(11, 63, 185, .3);
    --sha-navy: 0 2px 4px -2px rgba(11, 63, 185, .8);


    --pink: rgba(255, 57, 245, 1);
    --pal-pink: rgba(255, 57, 245, .1);
    --sha-pink: 0 2px 4px -2px rgba(255, 57, 245, .8);
    --mid-pink: rgba(255, 57, 245, .5);
    --mil-pink: rgba(255, 57, 245, .3);

    --pale: rgba(229, 80, 201, 1);
    --pal-pale: rgba(2229, 80, 201, .1);
    --sha-pale: 0 2px 4px -2px rgba(2229, 80, 201, .8);
    --mid-pale: rgba(2229, 80, 201, .5);
    --mil-pale: rgba(2229, 80, 201, .3);

    --blue: rgba(100, 96, 253, 1);
    --pal-blue: rgba(100, 96, 253, .1);
    --sha-blue: rgba(100, 96, 253, .8);
    --mid-blue: rgba(100, 96, 253, .5);
    --mil-blue: rgba(100, 96, 253, .3);

    --sky: rgba(20, 155, 200, 1);
    --pal-sky: rgba(20, 155, 200, .1);
    --waz-sky: rgb(206, 243, 255);
    --sha-sky: 0 2px 4px -2px rgba(20, 155, 200, .8);
    --mid-sky: rgba(20, 155, 200, .5);
    --mil-sky: rgba(20, 155, 200, .3);

    --gold: rgba(121, 101, 18, 1);
    --pal-gold: rgba(121, 101, 18, .1);
    --sha-gold: 0 2px 4px -2px rgba(121, 101, 18, .8);
    --mid-gold: rgba(121, 101, 18, .5);
    --mil-gold: rgba(121, 101, 18, .3);

    --bronze: rgb(156, 17, 10);
    --pal-bronze: rgba(156, 17, 10, .1);
    --sha-bronze: 0 2px 4px -2px rgba(156, 17, 10, .8);
    --mid-bronze: rgba(156, 17, 10, .5);
    --mil-bronze: rgba(156, 17, 10, .3);

    --yell: rgba(255, 211, 37, 1);
    --pal-yell: rgba(255, 211, 37, .1);
    --sha-yell: 0 2px 4px -2px rgba(255, 211, 37, .8);
    --mid-yell: rgba(255, 211, 37, 0.5);
    --mil-yell: rgba(255, 211, 37, 0.3);

    --green: rgba(39, 156, 70, 1);
    --pal-green: rgba(39, 156, 70, .1);
    --sha-green: 0 2px 4px -2px rgba(39, 156, 70, .8);
    --mid-green: rgba(39, 156, 70, .5);
    --mil-green: rgba(39, 156, 70, .3);

    --ora: rgba(255, 180, 4, 1);
    --sha-ora: 0 2px 4px -2px rgba(255, 180, 4, .8);
    --mid-ora: rgba(255, 180, 4, .5);
    --mil-ora: rgba(255, 180, 4, .3);
    --pal-ora: rgba(255, 180, 4, .1);

    --purple: rgba(65, 12, 118, 1);
    --mil-purple: rgba(65, 12, 118, .3);
    --mid-purple: rgba(65, 12, 118, .5);
    --pal-purple: rgba(65, 12, 118, .1);
    --sha-purple: 0 2px 4px -2px rgba(65, 12, 118, .8);




}