@charset "UTF-8";

:root {
    /* Colors: */
    --color-light-blue: #EDF8FF;
    --color-purple: #8A62E2;
    --color-green: #38CF68;
    --color-yellow: #FAB007;
    --color-red: #E55153;
    --color-transparent-black: #000000;
    --color-white: #FFFFFF;
    --color-dark-blue: #005D96;
    --color-cyan: #00B8EE;
    --color-gray: #A3A3A3;
    --color-dark-red: #C90505;
    --color-dark-gray: #656363;
    --color-darker-gray: #3E3E3E;

    /* filter */
    --filter-light-blue: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(424%) hue-rotate(195deg) brightness(110%) contrast(104%);
    --filter-purple: brightness(0) saturate(100%) invert(40%) sepia(82%) saturate(624%) hue-rotate(220deg) brightness(93%) contrast(89%);
    --filter-green: brightness(0) saturate(100%) invert(62%) sepia(76%) saturate(419%) hue-rotate(86deg) brightness(94%) contrast(88%);
    --filter-yellow: brightness(0) saturate(100%) invert(62%) sepia(73%) saturate(583%) hue-rotate(359deg) brightness(103%) contrast(96%);
    --filter-red: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(3006%) hue-rotate(335deg) brightness(107%) contrast(80%);
    --filter-transparent-black: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(0%) hue-rotate(130deg) brightness(94%) contrast(105%);
    --filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(169deg) brightness(109%) contrast(101%);
    --filter-dark-blue: brightness(0) saturate(100%) invert(27%) sepia(14%) saturate(7500%) hue-rotate(179deg) brightness(94%) contrast(101%);
    --filter-cyan: brightness(0) saturate(100%) invert(64%) sepia(22%) saturate(7288%) hue-rotate(154deg) brightness(95%) contrast(105%);
    --filter-gray: brightness(0) saturate(100%) invert(81%) sepia(0%) saturate(5473%) hue-rotate(138deg) brightness(80%) contrast(95%);
    --filter-dark-red: brightness(0) saturate(100%) invert(13%) sepia(88%) saturate(3939%) hue-rotate(4deg) brightness(102%) contrast(122%);
    --filter-dark-gray: brightness(0) saturate(100%) invert(46%) sepia(0%) saturate(963%) hue-rotate(203deg) brightness(78%) contrast(76%);
    --filter-darker-gray: brightness(0) saturate(100%) invert(21%) sepia(4%) saturate(25%) hue-rotate(340deg) brightness(98%) contrast(88%);

    /* シャドウ用カラー */
    --color-shadow: #00000029;

    /* bootstrap grid size */
    --grid-size-sm: 576px;
    --grid-size-md: 768px;
    --grid-size-lg: 992px;
    --grid-size-xl: 1200px;
    --grid-size-xxl: 1400px;

    /**
     * PC
     **/
    --pc-menu-height: 60px;
    --pc-default-log-small-size: 20px;
    --pc-default-log-middle-size: 30px;

    /**
     * SP
     **/
    --sp-menu-height: 60px;
    --sp-default-log-small-size: 20px;
    --sp-default-log-middle-size: 30px;
}

/* 各フォントカラー */
.color-light-blue {
    color: var(--color-light-blue);
}
.color-purple {
    color: var(--color-purple);
}
.color-green {
    color: var(--color-green);
}
.color-yellow {
    color: var(--color-yellow);
}
.color-red {
    color: var(--color-red);
}
.color-transparent-black {
    color: var(--color-transparent-black);
}
.color-white {
    color: var(--color-white);
}
.color-dark-blue {
    color: var(--color-dark-blue);
}
.color-cyan {
    color: var(--color-cyan);
}
.color-gray {
    color: var(--color-gray);
}
.color-dark-red {
    color: var(--color-dark-red);
}
.color-dark-gray {
    color: var(--color-dark-gray);
}
.color-darker-gray {
    color: var(--color-darker-gray);
}

/* 各バックグラウンドカラー */
.bg-color-light-blue {
    background-color: var(--color-light-blue);
}
.bg-color-purple {
    background-color: var(--color-purple);
}
.bg-color-green {
    background-color: var(--color-green);
}
.bg-color-yellow {
    background-color: var(--color-yellow);
}
.bg-color-red {
    background-color: var(--color-red);
}
.bg-color-transparent-black {
    background-color: var(--color-transparent-black);
}
.bg-color-white {
    background-color: var(--color-white);
}
.bg-color-dark-blue {
    background-color: var(--color-dark-blue);
}
.bg-color-cyan {
    background-color: var(--color-cyan);
}
.bg-color-gray {
    background-color: var(--color-gray);
}
.bg-color-dark-red {
    background-color: var(--color-dark-red);
}
.bg-color-dark-gray {
    background-color: var(--color-dark-gray);
}
.bg-color-darker-gray {
    background-color: var(--color-darker-gray);
}