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

    --bg-carousel: #DADCE0;
    --bg-select: #a2a2a2;
}

/* ベースボタン */
.btn {
    background-color: var(--bg-300);
    border: none;
    box-shadow: 0 0 6px var(--bg-200);
    color: var(--text-100);
}

.btn_style_reset {
    color: var(--text-200);
}

.btn_not_hover:hover {
    background-color: var(--bg-300);
    border: none;
    box-shadow: 0 0 6px var(--bg-200);
    color: var(--text-100);
}

/* 予約枠選択された日付ボタン */
.btn.selected_day_btn_active {
    background-color: var(--bg-select);
    color: var(--text-200);
}

/* ルームボタン */
.btn.room_btn {
    background-color: var(--bg-100);
    border: solid 1px var(--bg-200);
    box-shadow: 0 0 6px var(--bg-200);
    color: var(--text-200);
}

.btn.room_btn_active {
    background-color: #00ADB5;
    border: solid 1px #00ADB5;
    box-shadow: 0 0 6px var(--bg-200);
    color: white;
}

.btn.room_btn_reverse {
    background-color: var(--bg-300);
    border: solid 1px var(--bg-300);
    box-shadow: 0 0 6px var(--bg-200);
    color: var(--text-100);
}

/* 戻る・キャンセルボタン */
.btn.btn_cancel {
    background-color: var(--bg-100);
    border: none;
    box-shadow: 0 0 6px var(--bg-200);
    color: var(--text-200);
}

/* マイページトップ画面ボタン */
.btn.btn_mypages {
    background-color: var(--bg-100);
    border: none;
    box-shadow: 0 0 8px var(--bg-200);
    color: var(--text-200);
}

/* 支払い登録ボタン */
.btn_payment {
    background-color: var(--bg-100);
    border: none;
    box-shadow: none;
    color: var(--text-200);
}

/* 数量変更ボタン */
.quantity_btn {
    background-color: var(--bg-300);
    border: none;
    box-shadow: none;
    color: var(--text-100);
}

/* カルーセルボタン */
.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-color: var(--bg-carousel);
}

/* 3点リーダーボタン */
.three_point_leader {
    background: none;
    box-shadow: none;
    color: var(--text-200);
}

.dropdown-menu .btn {
    background-color: var(--bg-100);
    border: none;
    box-shadow: none;
    color: var(--text-200);
}

/* カレンダーボタン */
#calendar_select_btn {
    background-color: var(--bg-100);
    border: var(--text-200) solid 1px;
    box-shadow: 0 0 6px var(--bg-200);
    color: var(--text-200);
}

.btn_reverse {
    background-color: var(--bg-100);
    border: none;
    box-shadow: 0 0 6px var(--bg-200);
    color: var(--text-200);
}

.btn_reverse:hover {
    background-color: var(--bg-200);
    border: none;
    box-shadow: 0 0 6px var(--bg-200);
    color: var(--text-200);
}