@charset "utf-8";

.contact_body {
    background: var(--color-white);
    overflow: hidden;
}
.form_body dl > dd input,
.form_body dl > dd textarea {
    width: 100%;
    resize: none;
    border: 1px solid #ccc;
    background: #fbfbfb;
}
.select_wrap {
    border: 1px solid #ccc;
    background: linear-gradient(0deg, rgb(230, 230, 230) 0%, rgb(242, 242, 242) 100%);
    position: relative;
    border-radius: 8rem;
}
.select_wrap select {
    background-color: transparent;
    border: none;
    width: 100%;
    appearance: none;
}
.select_wrap select:invalid {
    color: #808080;
}
.select_wrap::after {
    content: '';
    position: absolute;
    background: url(../img/common/select_arrow.svg) no-repeat 0 0 / contain;
    top: 0;
    bottom: 0;
    margin: auto;
}
.required {
    color: #e21713;
    border: 1rem solid #e21713;
    display: inline-block;
    vertical-align: bottom;
}
.agree_box {
    display: flex;
}
.agree_box dt {
    display: flex;
    align-items: flex-start;
}
.agree_box input[type='checkbox'] {
    position: relative;
    appearance: none;
    border: 1px solid #ccc;
    background: #fbfbfb;
    display: flex;
    justify-content: center;
    align-items: center;
}
.agree_box input[type='checkbox']:checked::before {
    content: '';
    position: relative;
    width: 60%;
    height: 40%;
    top: -10%;
    rotate: -50deg;
    border-left: 4rem solid var(--theme-color);
    border-bottom: 4rem solid var(--theme-color);
}
.agree_box_set {
    display: flex;
    align-items: center;
}
.agree_box_txt a {
    text-decoration: underline;
}
.submit_btn {
    background: var(--theme-color);
    color: var(--color-white);
    cursor: pointer;
}
.submit_btn_back {
    background: #ccc;
    color: var(--color-white);
    cursor: pointer;
}
.submit_btn_top {
    background: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
}
.form_body_finish_ttl {
    font-size: 24rem;
    font-weight: 700;
}
.form_body_finish_txt {
    font-size: 16rem;
    line-height: calc(28 / 16);
    margin-top: 48rem;
}
.form_body_finish_caption {
    font-size: 16rem;
    line-height: calc(28 / 16);
    margin-top: 48rem;
    padding-top: 48rem;
    border-top: 1px solid #ccc;
}
@media (min-width: 769px) {
    .select_wrap select {
        font-size: 16rem;
        padding: 7rem 16rem;
    }
    .select_wrap::after {
        width: 10rem;
        height: 20rem;
        right: 17rem;
    }
    .contact_body {
        padding: 80rem 120rem;
    }
    .contact_body_txt {
        font-size: 16rem;
        line-height: calc(28 / 16);
    }
    .form_body {
        margin-top: 48rem;
    }
    .form_body dl + dl {
        margin-top: 40rem;
    }
    .form_body dl > dt {
        font-size: 20rem;
        line-height: 1;
        font-weight: 700;
    }
    .form_body dl > dd {
        margin-top: 15rem;
    }
    .form_body dl > dd input,
    .form_body dl > dd textarea {
        display: block;
        font-size: 16rem;
        padding: 10rem;
    }
    .form_body dl > dd input {
        height: 48rem;
    }
    .form_body dl > dd textarea {
        height: 280rem;
    }
    .form_body.form_body_confirm dl > dd {
        padding-top: 16rem;
        padding-left: 16rem;
        padding-bottom: 32rem;
        border-bottom: 1px solid #ccc;
    }
    .required {
        margin-left: 12rem;
        font-size: 12rem;
        padding: 4rem;
    }
    dl.agree_box dd {
        margin-top: 0;
    }
    .agree_box dt {
        flex-direction: column;
    }
    .agree_box input[type='checkbox'] {
        width: 32rem;
        height: 32rem;
        border-radius: 8rem;
        padding: 2rem;
    }
    .agree_box {
        margin-top: 48rem;
        gap: 48rem;
    }
    .agree_box .required {
        margin-left: 0;
        margin-top: 16rem;
    }
    .agree_box_set {
        gap: 15rem;
    }
    .agree_box_txt a {
        text-underline-offset: 8px;
    }
    .submit_btn_wrap {
        margin-top: 60rem;
        gap: 20rem;
    }
    .submit_btn,
    .submit_btn_back,
    .submit_btn_top {
        --btn-width: 240rem;
        font-size: 20rem;
    }
    @media (hover: hover) {
        .submit_btn_back:hover .btn_txt {
            color: #ccc;
        }
        .submit_btn_top:hover .btn_txt {
            color: var(--color-black);
        }
    }
    .form_body_finish {
        margin-top: 74rem;
    }
    .form_body_finish_ttl {
        font-size: 24rem;
    }
    .form_body_finish_txt {
        font-size: 16rem;
        line-height: calc(28 / 16);
        margin-top: 48rem;
    }
    .form_body_finish_caption {
        font-size: 16rem;
        line-height: calc(28 / 16);
        margin-top: 48rem;
        padding-top: 48rem;
        border-top: 1px solid #ccc;
    }
    @media (hover: hover) {
        .agree_box_txt a:hover {
            text-decoration: none;
        }
        .submit_btn:hover .btn_txt {
            color: var(--theme-color);
        }
        .submit_btn_back:hover .btn_txt {
            color: #ccc;
        }
        .submit_btn_top:hover ._btn_txt {
            color: var(--color-black);
        }
    }
}
@media (max-width: 768px) {
    .select_wrap select {
        font-size: 32rem;
        padding: 14rem 32rem;
    }
    .select_wrap::after {
        width: 20rem;
        height: 44rem;
        right: 32rem;
    }
    .subpage_ttl + .inner {
        padding-top: 160rem;
    }
    .contact_body {
        padding: 92rem 40rem 104rem;
    }
    .contact_body_txt {
        font-size: 32rem;
        line-height: calc(56 / 32);
    }
    .form_body {
        margin-top: 92rem;
    }
    .form_body dl + dl {
        margin-top: 52rem;
    }
    .form_body dl > dt {
        font-size: 36rem;
        line-height: 1;
        font-weight: 700;
    }
    .form_body dl > dd {
        margin-top: 30rem;
    }
    .form_body dl > dd input,
    .form_body dl > dd textarea {
        display: block;
        font-size: 32rem;
        padding: 20rem;
    }
    .form_body dl > dd input {
        height: 97rem;
    }
    .form_body dl > dd textarea {
        height: 640rem;
    }
    .form_body.form_body_confirm dl > dd {
        padding-left: 16rem;
        padding-bottom: 32rem;
        border-bottom: 2px solid #ccc;
    }
    .required {
        margin-left: 16rem;
        font-size: 24rem;
        padding: 6rem;
        border-width: 2rem;
        position: relative;
        top: 4rem;
    }
    .agree_box input[type='checkbox'] {
        width: 65rem;
        height: 65rem;
        border-radius: 16rem;
        padding: 4rem;
    }
    .agree_box {
        margin-top: 48rem;
        flex-direction: column;
    }
    .agree_box_set {
        gap: 30rem;
    }
    .agree_box_txt a {
        text-underline-offset: 8px;
    }
    .submit_btn_wrap {
        flex-direction: column-reverse;
        align-items: center;
        margin-top: 105rem;
        gap: 30rem;
    }
    .submit_btn,
    .submit_btn_back,
    .submit_btn_top {
        font-size: 36rem;
        --btn-width: 480rem;
    }
    .submit_btn .btn_inner {
        padding-block: 30rem;
    }
    .form_body_finish {
        margin-top: 134rem;
    }
    .form_body_finish_ttl {
        font-size: 40rem;
    }
    .form_body_finish_txt {
        font-size: 32rem;
        line-height: calc(28 / 16);
        margin-top: 48rem;
    }
    .form_body_finish_caption {
        font-size: 32rem;
        line-height: calc(28 / 16);
        margin-top: 64rem;
        padding-top: 64rem;
        border-top: 1px solid #ccc;
    }
}