/*
    CSでstyleを上書きする必要がある場合、このファイルに以下の順序で記述する
    ・タイプセレクタ
    ・PC
    ・SP
    ・クラス
 */

/* +++++++++++    PC    +++++++++++  */
@media screen and (min-width: 769px) {
}

/* +++++++++++    SP    +++++++++++  */
@media screen and (max-width: 768px) {
    /* key-colorの白要素を増やして設定する */
    .menu-sp {
        background-color: #ee676c;
    }
    /* jsでフッターの制御をしているが、ブラウザによっては反映されないことがあるので、ベタでも指定している */
    .wrapper-content {
        padding-bottom: 141px !important;
    }
}

/* +++++++++++    color    +++++++++++  */
/* key-color */
.key-color-only {
    color: #ee4543;
}
.key-color-only-imp {
    color: #ee4543 !important;
}
.key-color-bg {
    background: #ee4543;
}
.key-color-bg-imp {
    background: #ee4543 !important;
}
.key-color-bd {
    border-color: #ee4543;
}
.key-color-bd-imp {
    border-color: #ee4543 !important;
}
.key-color-bd-1 {
    border: 1px solid #ee4543;
}
.key-color-bd-imp-1 {
    border: 1px solid #ee4543 !important;
}

/* +++++++++++    footable    +++++++++++  */
.pagination .footable-page.active a {
    background-color: #ee4543 !important;
    border-color: #ee4543 !important;
}

/* +++++++++++    form    +++++++++++  */
/* key-colorの白要素を増やして設定する */
.form-control:focus,
.single-line:focus,
input[type="date"]:focus,
input[type="time"]:focus {
    border-color: #ee676c;
}

/* +++++++++++    ladda    +++++++++++ */
.ladda-button:hover {
    border-color: #ee4543;
    background-color: #ee4543
}
.ladda-button[disabled],
.ladda-button[data-loading] {
    border-color: #ee4543;
}
.ladda-button[disabled],
.ladda-button[disabled]:hover,
.ladda-button[data-loading],
.ladda-button[data-loading]:hover {
    background-color: #ee4543;
}

/* +++++++++++    progress    +++++++++++  */
/* key-colorの黒要素を増やして設定する */
.pace .pace-progress {
    background: #ee1512;
}

/* +++++++++++    spinner    +++++++++++  */
.sk-spinner-wave div {
    background-color: #ee4543 !important;
}