@charset "utf-8";

/* ==================================================================

    contact.css

=================================================================== */

/* --------------------------------
■共通
-------------------------------- */

main .text + .asterisk {
    margin-top: 12px;
}

/* ◇ intro
-------------------------------- */

main #intro.chapter {
    max-width: 1018px;
}

/* ◇ contactArea_tel
-------------------------------- */

main #contactArea_tel {
    margin-top: 24px;
}
main #contactArea_tel dl {
    display: flex;
    padding: 40px 60px;
    background: #F3F1EE;
    align-items: center;
    justify-content: space-between;
}
    main #contactArea_tel dl dt {
        font-size: 1.7rem;
        font-weight: bold;
    }
    main #contactArea_tel dl dd .tel {
        font-family: "Figtree", sans-serif;
        font-weight: 500;
        letter-spacing: 0.1em;
        margin-bottom: 4px;
    }
    main #contactArea_tel dl dd .tel a {
        font-size: 2.4rem;
    }
    main #contactArea_tel dl dd .tel a::before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 22px;
        margin-right: 5px;
        margin-bottom: -3px;
        background: url(../../images/common/icon/tel_b.svg) no-repeat left center;
        background-size: contain;
    }
    main #contactArea_tel dl dd .hours {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 0;
    }

@media only screen and
(max-width : 767px) {

    main #contactArea_tel {
        margin-top: 20px;
    }
    main #contactArea_tel dl {
        display: block;
        padding: 32px 32px;
    }
        main #contactArea_tel dl dt {
            text-align: center;
            margin-bottom: 16px;
        }
        main #contactArea_tel dl dd .tel {
            text-align: center;
        }
}


/* ------------------------------
■ コンテンツ
------------------------------ */
.contents .chapter.form_wrap {
    padding-top: 72px;
    max-width: 1018px;
}

.form_txt1 {
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: 0.03em;
}

.form_wrap p.error {
    margin-top: 8px;
    padding: 6px;
    background: #ad1c1f;
    color: #fff;
}

.form_wrap form {
    margin: 34px auto 0;
}

.form_table {
    border: 0;
    width: 100%;
}

.form_table th,
.form_table td {
    border: 0;
    padding: 14px 0;
    font-weight: 400;
}
.form_table th {
    width: 12em;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.form_table td {
    padding-left: 10px;
}

/* 確認画面 */
body.check .form_table th,
body.check .form_table td {
    padding: 16px 0;
    border-bottom: 1px solid #ddd;
}

.form_table th.required::after {
    content: "必須";
    margin-top: 2px;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #B72B2F;
    float: right;
}

/* 確認画面 */
body.check .form_table th.required::after {
    display: none;
}

form input.text,
form select,
form textarea {
    width: 100%;
    padding: 16px 20px 15px;
    background-color: #F3F1EE;
    border: none;
    font-size: 16px !important;
    line-height: 1.4;
}
form input.text:hover,
form textarea:hover {
    border: none;
}

form input.text.short {
    max-width: 148px;
}

form input.text::placeholder,
form textarea::placeholder {
    color: #a4a4a4;
}

form select {
    appearance: none;
    background-image: url("../../images/contact/select_icon.svg");
    background-position: right 18px center;
    background-repeat: no-repeat;
    background-size: 11px auto;
    cursor: pointer;
}

form textarea {
    resize: none;
    height: 219px;
}

form .radio_wrap {
    margin: -2.5px 0;
    line-height: 2.1875;
    letter-spacing: 0.03em;
}

form input[type="radio"] {
    appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 9px 0 0;
    border-radius: 9999px;
    background-color: #F3F1EE;
    vertical-align: sub;
    cursor: pointer;
}

form input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    border-radius: 9999px;
    background-color: var(--text-color);
}

form input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 9px 0 0;
    border-radius: 0;
    background-color: #F3F1EE;
    vertical-align: sub;
    cursor: pointer;
}

form input[type="checkbox"]:checked {
    background-color: var(--text-color);
}

form input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 4px;
    height: 10px;
    margin: auto;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: translateY(-1px) rotate(45deg);
}

form .radio_wrap label {
    cursor: pointer;
}

form .sample {
    display: block;
    margin-top: 8px;
    font-size: 1.3rem;
    line-height: 1.462;
    color: #000;
}
form .sample.inline {
    display: inline-block;
    padding-left: 0.5em;
}

.form_radio {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 10px;
}

.radio_bl {
    box-sizing: border-box;
    width: calc((100% - 10px) / 2);
    padding: 35px 25px 34px;
    border-radius: 4px;
    border: 1px solid #DCDCDC;
    cursor: pointer;
}

.form_table .hiddenBox th,
.form_table .hiddenBox td {
    display: none;
}

p.checktext {
    margin: 40px 0;
}

.agreement_wrap {
    margin-top: 49px;
}

.agreement_wrap .scroll {
    overflow-y:scroll;
    height: 233px;
    border: 1px solid #DCDCDC;
    padding: 35px 25px 34px;
}

.agreement_wrap .radio_wrap {
    margin-top: 26px;
    text-align: center;
}

.agreement_wrap a {
    text-decoration: underline;
}


/* ボタン
-------------------------------- */
.submitBtn_wrap.buttonStyle,
.form_wrap .buttonStyle {
    margin-top: 60px;
    width: 100%;
}
.submitBtn_wrap.buttonStyle.more button.submitBtn {
    border: none;
    width: 452px;
    padding: 20px 0;
}

/* 確認画面 */
body.check .submitBtn_wrap.buttonStyle,
body.check .form_wrap .buttonStyle {
    margin-top: 0;
    width: auto;
}
body.check .submitArea {
    justify-content: center;
    gap: 32px;
}

button.submitBtn.disabled{
    opacity: 0.5;
    pointer-events: none;
}


@media screen and (max-width: 1080px) {
    .radio_bl {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 767px) {
    .form_wrap {
        padding-top: 14vw;
    }

    .form_table{
        display: block;
    }
    .form_table tbody,
    .form_table tr{
        display: block;
    }
    .form_table th,
    .form_table td{
        display: block;
        padding:14px 0;
    }
    .form_table td{
        padding-top: 0;
    }
    .form_table th{
        width: revert;
    }
    .form_table th.required::after {
        padding-left: 0.5em;
        margin-top: 0;
        float: none;
    }

    .form_txt1 br {
        display: none;
    }

    .radio_bl {
        width: 100%;
    }

    .agreement_wrap {
        font-size: 1.4rem;
        margin-top: 16px;
    }
    .agreement_wrap .radio_wrap {
        margin-top: 24px;
    }

    .submitBtn_wrap.buttonStyle,
    .form_wrap .buttonStyle {
        margin-top: 8vw;
    }

    .submitBtn_wrap.buttonStyle.more button.submitBtn {
        border: none;
        width: 100%;
        padding: 20px 0;
    }


    body.check .form_table th,
    body.check .form_table td {
        padding: 12px 16px;
        border-bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }
    body.check .form_table th {
        font-size: 1.3rem;
        color: #555;
        padding-bottom: 0;
    }
    body.check .form_table td {
        border-bottom: 1px solid #eee;
    }
    
    body.check .submitArea {
        justify-content: center;
        gap: 20px;
        flex-direction: column-reverse;
    }
    p.checktext {
        margin: 32px 0;
    }
}