:root {
    /* BLACK〜GRAY系 */
    --col-base-10: #181818;
    --col-base-15: #242424;
    --col-base-20: #2e2e2e;
    --col-base-30: #444444;
    --col-base-40: #5c5c5c;
    --col-base-50: #747474;
    --col-base-60: #939393;
    --col-base-65: #a0a0a0;
    --col-base-70: #aeaeae;
    --col-base-80: #c9c9c9;
    --col-base-90: #e5e5e5;
    --col-base-95: #f3f3f3;
    /* BLUE系 */
    --col-blue-10: #001a28;
    --col-blue-15: #0a2636;
    --col-blue-20: #023248;
    --col-blue-30: #084968;
    --col-blue-40: #05628a;
    --col-blue-50: #107cad; /* テキストリンク */
    --col-blue-60: #0d9dda;
    --col-blue-65: #08abed;
    --col-blue-70: #1ab9ff;
    --col-blue-80: #90d0fe;
    --col-blue-90: #cfe9fe;
    --col-blue-95: #eaf5fe;
    /* RED系 */
    --col-red-10: #300c01;
    --col-red-15: #4a0c04;
    --col-red-20: #640103;
    --col-red-30: #8e030f;
    --col-red-40: #ba0517;
    --col-red-50: #ea001e;
    --col-red-60: #fe5c4c;
    --col-red-65: #fe7765;
    --col-red-70: #fe8f7d;
    --col-red-80: #feb8ab;
    --col-red-90: #feded8;
    --col-red-95: #fef1ee;
    /* GREEN系 */
    --col-green-10: #071b12;
    --col-green-15: #0c2912;
    --col-green-20: #1c3326;
    --col-green-30: #194e31;
    --col-green-40: #396547;
    --col-green-50: #2e844a;
    --col-green-60: #3ba755;
    --col-green-65: #41b658;
    --col-green-70: #45c65a;
    --col-green-80: #91db8b;
    --col-green-90: #cdefc4;
    --col-green-95: #ebf7e6;
    /* PURPLE系 */
    --col-purple-10: #240643;
    --col-purple-15: #300b60;
    --col-purple-20: #401075;
    --col-purple-30: #5a1ba9;
    --col-purple-40: #7526e3;
    --col-purple-50: #9050e9;
    --col-purple-60: #ad7bee;
    --col-purple-65: #b78def;
    --col-purple-70: #c29ef1;
    --col-purple-80: #d7bff2;
    --col-purple-90: #ece1f9;
    --col-purple-95: #f6f2fb;
    /* ORANGE系 */
    --col-orange-10: #281202;
    --col-orange-15: #421604;
    --col-orange-20: #4a2413;
    --col-orange-30: #7e2600;
    --col-orange-40: #aa3001;
    --col-orange-50: #d83a00;
    --col-orange-60: #ff5d2d;
    --col-orange-65: #ff784f;
    --col-orange-70: #ff906e;
    --col-orange-80: #feb9a5;
    --col-orange-90: #ffded5;
    --col-orange-95: #fef1ed;
    /* YELLOW系 */
    --col-yellow-10: #281202;
    --col-yellow-15: #2e2204;
    --col-yellow-20: #4f2100;
    --col-yellow-30: #6f3400;
    --col-yellow-40: #8c4b02;
    --col-yellow-50: #a86403;
    --col-yellow-60: #ca8501;
    --col-yellow-65: #d79304;
    --col-yellow-70: #e4a201;
    --col-yellow-80: #fcc003;
    --col-yellow-90: #f9e3b6;
    --col-yellow-95: #fbf3e0;
    /* PINK系 */
    --col-pink-10: #370114;
    --col-pink-15: #4b0620;
    --col-pink-20: #61022a;
    --col-pink-30: #8a033e;
    --col-pink-40: #b60554;
    --col-pink-50: #e3066a;
    --col-pink-60: #ff538a;
    --col-pink-65: #fe7298;
    --col-pink-70: #fe8aa7;
    --col-pink-80: #fdb6c5;
    --col-pink-90: #fddde3;
    --col-pink-95: #fef0f3;
    /* 透過 */
    --opacity-black-10: rgba(0, 0, 0, 0.1);
    --opacity-black-25: rgba(0, 0, 0, 0.25);
    --opacity-black-50: rgba(0, 0, 0, 0.5);
    --opacity-black-75: rgba(0, 0, 0, 0.75);
    --opacity-white-10: rgba(255, 255, 255, 0.1);
    --opacity-white-25: rgba(255, 255, 255, 0.25);
    --opacity-white-50: rgba(255, 255, 255, 0.5);
    --opacity-white-75: rgba(255, 255, 255, 0.75)
}