:root {
    --text-100: #FFFFFF;
    --text-200: #000000;
    --bg-100: #FFFFFF;
    --bg-200: #808080;
    --bg-300: #000000;
    --bg-modal: #FFFFFF;

    --bg-form: #FFFFFF;
    --bg-form-deep: #ffffff;
    --bg-form-select: #ffffff;
}

/* ----------------------------------- ベース色 ----------------------------------- */
body {
    background-color: var(--bg-100);
    color: var(--text-200);
}

footer {
    background-color: var(--bg-100);
}

/* ----------------------------------- フォーム ベース色 ----------------------------------- */
.form-control,
.form-select {
    border-color: var(--bg-form);
    border: 1px solid var(--bg-200);
    color: var(--text-200);
    background-color: var(--bg-form);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bg-form-select);
    border: 1px solid var(--bg-200);
    color: var(--text-200);
    background-color: var(--bg-form-select);
}

.form-control-deep,
.form-select-deep {
    border-color: var(--bg-form-deep);
    border: 1px solid var(--bg-200);
    color: var(--text-200);
    background-color: var(--bg-form-deep);
}

.form-control-deep:focus,
.form-select-deep:focus {
    border-color: var(--bg-form-select);
    border: 1px solid var(--bg-200);
    color: var(--text-200);
    background-color: var(--bg-form-select);
}

.calendar_ex_wrap {
    box-shadow: 0 0 8px var(--bg-200);
    padding: 0 4px;
}

.bg_gray {
    background-color: #E0E0E0;
}

/* ----------------------------------- 予約枠・商品カード ベース色 ----------------------------------- */
.reservation_card {
    box-shadow: 0 0 8px var(--bg-200);
    border-color: var(--text-200);
    color: var(--text-200);
}

.item {
    box-shadow: 0 0 8px var(--bg-200);
    border-color: var(--text-200);
    color: var(--text-200);
}

.ox_calendar_tab {
    background-color: #BCBCBC;
    padding: 3px 0px;
}

.ox_calendar_tab.active {
    background-color: var(--bg-300);
    color: var(--text-100);
    box-shadow: 0 0 8px var(--bg-200);
}

.ox_calendar_tab.active .btn_style_reset {
    color: var(--text-100);
}

.ox_extra_reserve_card {
    box-shadow: 0 0 8px var(--bg-200);
    border: solid 1px var(--bg-200);
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    margin: 20px 0;
    color: var(--text-200);
    padding: 5px 0;
}

/* ----------------------------------- モーダル色 ----------------------------------- */
.modal-content {
    background-color: var(--bg-modal);
}