/* button_2 */
/* 下線 */

.button_all_wrap {
    width: 300px;
}
.button_all_1_outside,
.button_all_2_outside,
.button_amend_btn_outside {
    border: 0;
    padding: 0.5px 0;
}

.button_all_1 ~ .button_all_1_outside,
.button_all_2 ~ .button_all_2_outside {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: rgba(var(--color_accent));
    transition: 0.4s;
}

.amend_btn ~ .button_amend_btn_outside {
    background-color: rgba(var(--color_text));
    transition: 0.4s;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
}

.button_all_1:hover ~ .button_all_1_outside,
.button_all_2:hover ~ .button_all_2_outside,
.amend_btn:hover ~ .button_amend_btn_outside {
    width: 102%;
    transition: 0.4s;
}

.button_all_1 {
    position: relative;
    width: 300px;
    color: rgba(var(--color_primary));
    font-size: 16px;
    padding: 18px 5px;
    font-weight: bold;
    border-bottom: 1px solid rgba(var(--color_primary));
    text-align: left !important;
    display: inline-block;
}

.button_all_1::before,
.button_all_1::after,
.button_all_2::before,
.button_all_2::after,
.amend_btn::before,
.amend_btn::after {
    content: "";
    position: absolute;
}

.button_all_1::before {
    right: 5px;
    width: 15px;
    height: 2px;
    background: rgba(var(--color_primary));
    top: 30px;
}

.button_all_1::after {
    right: 5px;
    width: 8px;
    height: 8px;
    border-top: 2px solid rgba(var(--color_primary));
    border-right: 2px solid rgba(var(--color_primary));
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 27px;
}

.button_all_2 {
    position: relative;
    width: 100%;
    color: rgba(var(--color_main_text));
    font-size: 16px;
    padding: 18px 5px;
    font-weight: bold;
    border-bottom: 1px solid rgba(var(--color_main_text));
    text-align: left !important;
    display: inline-block;
    margin-top: 60px;
}

.button_all_2::before {
    right: 5px;
    width: 15px;
    height: 2px;
    background: rgba(var(--color_main_text));
    top: 30px;
}

.button_all_2::after {
    right: 5px;
    width: 8px;
    height: 8px;
    border-top: 2px solid rgba(var(--color_main_text));
    border-right: 2px solid rgba(var(--color_main_text));
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 27px;
}

/* フロント画面ボタン非活性 */
.cms-f-btn-disable {
    color: #c3c3c3;
    border-bottom: 2px solid #c3c3c3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.cms-f-btn-disable::before {
    background: #c3c3c3 !important;
    color: #c3c3c3 !important;
}

.cms-f-btn-disable::after {
    border-top: 2px solid #c3c3c3 !important;
    border-right: 2px solid #c3c3c3 !important;
}

/* 修正するボタン */
.amend_btn {
    position: relative;
    width: 300px;
    color: rgba(var(--color_text));
    font-size: 16px;
    padding: 18px 5px;
    font-weight: bold;
    border-bottom: 1px solid var(--cms-gray);
    text-align: left !important;
    display: inline-block;
}

.amend_btn::before {
    right: 5px;
    width: 15px;
    height: 2px;
    background: rgba(var(--color_text));
    top: 30px;
}

.amend_btn::after {
    right: 5px;
    width: 8px;
    height: 8px;
    border-top: 2px solid rgba(var(--color_text));
    border-right: 2px solid rgba(var(--color_text));
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 27px;
}

@media screen and (max-width: 1023px) {
    .confirm .button_all_wrap {
        width: 40%;
        max-width: 300px;
    }

    .confirm .button_all_wrap .button_all_1,
    .confirm .button_all_wrap .button_all_2 {
        width: 100%;
    }
}

@media screen and (max-width: 599px) {
    .button_all_wrap,
    .button_all_1,
    .button_all_2 {
        width: 260px;
    }

    .button_all_2 {
        margin-top: 20px;
    }

    .cms-f-btn-disable,
    .amend_btn {
        width: 100%;
    }
}