.appointment-form {
    background-color: #d0043c;
    color: #fff;
    padding-top: 4rem;
    padding-bottom: 3.5rem
}

@media (min-width: 640px) {
    .appointment-form {
        padding-bottom: 4.5rem
    }
}

@media (min-width: 990px) {
    .appointment-form {
        padding-top: 5.5rem;
        padding-bottom: 6rem
    }
}

@media (min-width: 990px) {
    .appointment-form__head {
        width: 50%
    }
}

.appointment-form__content {
    line-height: 1.5
}

@media (min-width: 990px) {
    .appointment-form__content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

@media (min-width: 990px) {
    .appointment-form__left, .appointment-form__right {
        width: 50%
    }
}

.appointment-form__left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

@media (max-width: 989.98px) {
    .appointment-form__left {
        margin-bottom: 4rem
    }
}

@media (max-width: 639.98px) {
    .appointment-form__left {
        margin-bottom: 1.5rem
    }
}

@media (min-width: 990px) {
    .appointment-form__right {
        margin-top: -2.5rem
    }
}

@media (max-width: 989.98px) {
    .appointment-form__title {
        margin-bottom: 2rem
    }
}

@media (max-width: 639.98px) {
    .appointment-form__title {
        margin-bottom: 1.5rem
    }
}

.appointment-form__des {
    padding-right: 1rem
}

@media (min-width: 640px) {
    .appointment-form__des {
        padding-right: 15rem
    }
}

@media (min-width: 990px) {
    .appointment-form__des {
        margin: 4.625rem 0 auto;
        padding-right: 23.75rem
    }
}

.appointment-form__des .appointment-form__link {
    margin-top: 1.5rem
}

.appointment-form__link {
    margin-top: 2.8125rem
}

.appointment-form__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media (max-width: 639.98px) {
    .appointment-form__form {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media (min-width: 640px) {
    .appointment-form__form {
        margin-right: -1.125rem;
        margin-left: -1.125rem;
        margin-bottom: -3rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.appointment-form__col {
    margin-bottom: 1rem;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

@media (min-width: 640px) {
    .appointment-form__col {
        width: 50%;
        padding: 0 1.125rem;
        margin-bottom: 3rem
    }
}

@media (max-width: 639.98px) {
    .appointment-form__col--notice {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin-bottom: 0
    }
}

@media (max-width: 639.98px) {
    .appointment-form__col--button {
        margin-top: 2rem
    }

    .appointment-form__col--button .btn {
        width: 100%
    }
}

.appointment-form__col--large {
    width: 100%
}

.appointment-form__notice {
    max-width: 17.8125rem;
    color: hsla(0, 0%, 100%, .6)
}

.appointment-form__notice a {
    color: hsla(0, 0%, 100%, .6);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: -o-linear-gradient(currentColor, currentColor);
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    text-decoration: none !important;
    -webkit-transition-property: background-size, color;
    -o-transition-property: background-size, color;
    transition-property: background-size, color;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    will-change: background-size
}

.appointment-form__notice a.focus-visible, .appointment-form__notice a:hover {
    background-position: 100% 100%;
    background-size: 0 1px;
    color: #fff
}

.appointment-form__privacy {
    max-width: 17.8125rem;
    color: hsla(0, 0%, 100%, .6)
}

.appointment-form__privacy a {
    color: hsla(0, 0%, 100%, .6);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: -o-linear-gradient(currentColor, currentColor);
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    text-decoration: none !important;
    -webkit-transition-property: background-size, color;
    -o-transition-property: background-size, color;
    transition-property: background-size, color;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    will-change: background-size
}

.appointment-form__privacy a.focus-visible, .appointment-form__privacy a:hover {
    background-position: 100% 100%;
    background-size: 0 1px;
    color: #fff
}

.appointment-form__privacy .checkbox__text {
    font-size: .75rem;
    line-height: 1.3;
    font-weight: 400;
    color: hsla(0, 0%, 100%, .6)
}

@media (max-width: 639.98px) {
    .appointment-form__privacy .checkbox__text {
        font-size: .625rem
    }
}

.appointment-form--light {
    background-color: #efeff2;
    color: #101010
}

.appointment-form--light .appointment-form__notice, .appointment-form--light .appointment-form__notice a {
    color: rgba(16, 16, 16, .4)
}

.appointment-form--light .appointment-form__notice a.focus-visible, .appointment-form--light .appointment-form__notice a:hover {
    color: #101010
}

.appointment-form--light .appointment-form__privacy, .appointment-form--light .appointment-form__privacy a {
    color: rgba(16, 16, 16, .4)
}

.appointment-form--light .appointment-form__privacy a.focus-visible, .appointment-form--light .appointment-form__privacy a:hover {
    color: #101010
}

.appointment-form--light .appointment-form__privacy .checkbox__text {
    color: rgba(16, 16, 16, .4)
}

.appointment-form--light .appointment-form__privacy .checkbox--primary .checkbox__input[type=checkbox] ~ .checkbox__box:before {
    background-color: #fff
}