:root {
    /* Main Colors */
    --color-main: #FFFFFF;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-red: #FF0000;
    --color-blue: #0000FF;
    
    /* Regional / Specific Colors */
    --color-local: #ED6D00;
    --color-tokai: #ED6D00;

    /* Sub Colors */
    --color-sub1: #1D50A2;
    --color-sub2: #6698E4;
    --color-sub3: #1D50A221;
    --color-sub4: #ED6D00;
    --color-sub5: #ED6D0021;
    --color-sub6: #00A040;
    --color-sub7: #00A04021;
    --color-sub8: #D9D9D9;
    --color-sub9: #C4C4C4;
    --color-sub10: #1E1E1E;
    --color-sub11: #626262;
}

/* ========================================= */
/* Main Style                                */
/* ========================================= */
.main-bg {
    background: var(--color-main);
}
.main-gradient {
    background: linear-gradient(to top, var(--color-main), #fff 50%, #fff 100%);
}
.main-border {
    border: 1px solid var(--color-main);
    background: var(--color-white); /* 特例 */
}
.main-text {
    color: var(--color-main) !important;
}

/* ========================================= */
/* Black Style                               */
/* ========================================= */
.black-bg {
    background: var(--color-black);
}
.black-gradient {
    background: linear-gradient(to top, var(--color-black), #fff 50%, #fff 100%);
}
.black-border {
    border: 1px solid var(--color-black);
}
.black-text {
    color: var(--color-black) !important;
}


/* ========================================= */
/* White Style                               */
/* ========================================= */
.white-bg {
    background: var(--color-white);
}
.white-gradient {
    background: linear-gradient(to top, var(--color-white), #fff 50%, #fff 100%);
}
.white-border {
    border: 1px solid var(--color-white);
}
.white-text {
    color: var(--color-white) !important;
}


/* ========================================= */
/* red Style                               */
/* ========================================= */
.red-bg {
    background: var(--color-red);
}
.red-gradient {
    background: linear-gradient(to top, var(--color-red), #fff 50%, #fff 100%);
}
.red-border {
    border: 1px solid var(--color-red);
}
.red-text {
    color: var(--color-red) !important;
}


/* ========================================= */
/* blue Style                               */
/* ========================================= */
.blue-bg {
    background: var(--color-blue);
}
.blue-gradient {
    background: linear-gradient(to top, var(--color-blue), #fff 50%, #fff 100%);
}
.blue-border {
    border: 1px solid var(--color-blue);
}
.blue-text {
    color: var(--color-blue) !important;
}


/* ========================================= */
/* Local Style                               */
/* ========================================= */
.local-bg {
    background: var(--color-local);
}
.local-gradient {
    background: linear-gradient(to top, var(--color-local), #fff 50%, #fff 100%);
}
.local-border {
    border: 1px solid var(--color-local);
}
.local-text {
    color: var(--color-local) !important;
}

/* ========================================= */
/* Tokai Style                               */
/* ========================================= */
.tokai-bg {
    background: var(--color-tokai);
}
.tokai-gradient {
    background: linear-gradient(to top, var(--color-tokai), #fff 50%, #fff 100%);
}
.tokai-border {
    border: 1px solid var(--color-tokai);
}
.tokai-text {
    color: var(--color-tokai) !important;
}

/* ========================================= */
/* Sub1 Style                                */
/* ========================================= */
.sub1-bg {
    background: var(--color-sub1);
}
.sub1-gradient {
    background: linear-gradient(to top, var(--color-sub1), #fff 50%, #fff 100%);
}
.sub1-border {
    border: 1px solid var(--color-sub1);
}
.sub1-text {
    color: var(--color-sub1) !important;
}

/* ========================================= */
/* Sub2 Style                                */
/* ========================================= */
.sub2-bg {
    background: var(--color-sub2);
}
.sub2-gradient {
    background: linear-gradient(to top, var(--color-sub2), #fff 50%, #fff 100%);
}
.sub2-border {
    border: 1px solid var(--color-sub2);
}
.sub2-text {
    color: var(--color-sub2) !important;
}

/* ========================================= */
/* Sub3 Style                                */
/* ========================================= */
.sub3-bg {
    background: var(--color-sub3);
}
.sub3-gradient {
    background: linear-gradient(to top, var(--color-sub3), #fff 50%, #fff 100%);
}
.sub3-border {
    border: 1px solid var(--color-sub3);
}
.sub3-text {
    color: var(--color-sub3) !important;
}

/* ========================================= */
/* Sub4 Style                                */
/* ========================================= */
.sub4-bg {
    background: var(--color-sub4);
}
.sub4-gradient {
    background: linear-gradient(to top, var(--color-sub4), #fff 50%, #fff 100%);
}
.sub4-border {
    border: 1px solid var(--color-sub4);
}
.sub4-text {
    color: var(--color-sub4) !important;
}

/* ========================================= */
/* Sub5 Style                                */
/* ========================================= */
.sub5-bg {
    background: var(--color-sub5);
}
.sub5-gradient {
    background: linear-gradient(to top, var(--color-sub5), #fff 50%, #fff 100%);
}
.sub5-border {
    border: 1px solid var(--color-sub5);
}
.sub5-text {
    color: var(--color-sub5) !important;
}

/* ========================================= */
/* Sub6 Style                                */
/* ========================================= */
.sub6-bg {
    background: var(--color-sub6);
}
.sub6-gradient {
    background: linear-gradient(to top, var(--color-sub6), #fff 50%, #fff 100%);
}
.sub6-border {
    border: 1px solid var(--color-sub6);
}
.sub6-text {
    color: var(--color-sub6) !important;
}

/* ========================================= */
/* Sub7 Style                                */
/* ========================================= */
.sub7-bg {
    background: var(--color-sub7);
}
.sub7-gradient {
    background: linear-gradient(to top, var(--color-sub7), #fff 50%, #fff 100%);
}
.sub7-border {
    border: 1px solid var(--color-sub7);
}
.sub7-text {
    color: var(--color-sub7) !important;
}

/* ========================================= */
/* Sub8 Style                                */
/* ========================================= */
.sub8-bg {
    background: var(--color-sub8);
}
.sub8-gradient {
    background: linear-gradient(to top, var(--color-sub8), #fff 50%, #fff 100%);
}
.sub8-border {
    border: 1px solid var(--color-sub8);
}
.sub8-text {
    color: var(--color-sub8) !important;
}

/* ========================================= */
/* Sub9 Style                                */
/* ========================================= */
.sub9-bg {
    background: var(--color-sub9);
}
.sub9-gradient {
    background: linear-gradient(to top, var(--color-sub9), #fff 50%, #fff 100%);
}
.sub9-border {
    border: 1px solid var(--color-sub9);
}
.sub9-text {
    color: var(--color-sub9) !important;
}

/* ========================================= */
/* Sub10 Style                               */
/* ========================================= */
.sub10-bg {
    background: var(--color-sub10);
}
.sub10-gradient {
    background: linear-gradient(to top, var(--color-sub10), #fff 50%, #fff 100%);
}
.sub10-border {
    border: 1px solid var(--color-sub10);
}
.sub10-text {
    color: var(--color-sub10) !important;
}


/* ========================================= */
/* Sub11 Style                               */
/* ========================================= */
.sub11-bg {
    background: var(--color-sub11);
}
.sub11-gradient {
    background: linear-gradient(to top, var(--color-sub11), #fff 50%, #fff 100%);
}
.sub11-border {
    border: 1px solid var(--color-sub11);
}
.sub11-text {
    color: var(--color-sub11) !important;
}