@charset "UTF-8";

.contact-form{
    width: 900px;
    margin: 50px auto 80px;
    padding: 60px 70px;
    background: #fff;
    border-radius: 36px;
}
div#wpcf7cpcnf{
    width: 900px;
    margin: 0 auto 80px;
    padding: 60px 70px;
    background: #fff;
    border-radius: 36px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: contents;
}
div.wpcf7{
    position: initial;
}
.c-ttl {
    margin: 50px 0 50px;
    text-align: center;
    color: #20487e;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

.c-ttl .en {
    display: block;
    color: #20487e;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

/* フォームの各行 */
.contact-form .form-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}
div#wpcf7cpcnf th,
div#wpcf7cpcnf td{
    padding: 2.3em 0;
}
.contact-form .form-label,
div#wpcf7cpcnf th {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 220px;
    flex-shrink: 0;
    padding-top: 0;
    font-size: 16px;
    font-weight: 500;
    border-bottom: none;
}
div#wpcf7cpcnf td{
    font-size: 16px;
    line-height: 1.5;
    border-bottom: none;
    padding-top: 0;
}
.contact-form .form-label label {
    display: inline;
}
.wpcf7cp-form-hide{
    display: none !important;
}
div.wpcf7cp-btns{
    margin: 20px auto 0;
    justify-content: center;
}
.contact-form .required {
    display: inline-block;
    flex-shrink: 0;
    margin-left: 0;
    padding: 2px 7px;
    background: #e87575;
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;
    white-space: nowrap;
}
button.wpcf7cp-cfm-edit-btn,
button.wpcf7cp-cfm-submit-btn{
    display: inline-block;
    flex-shrink: 0;
    margin-left: 0;
    padding: 2px 7px;
    background: #e87575;
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;
    white-space: nowrap;
    display: block;
    width: 300px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}
button.wpcf7cp-cfm-edit-btn{
    background: #ddd;
    color: #333;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output{
    margin: 2em 0.5em 2em;
    border: none;
    color: #dc3232;
    text-align: center;
}
main {
    display: flow-root;
    min-height: 1px;
    position: relative;
}
/* 入力欄 */
.contact-form .form-input {
    flex: 1;
}

/* 入力欄共通 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    font-size: 16px;
    line-height: 1.5;
}

/* 必須項目の入力欄を薄い赤にする */
.contact-form .form-row:has(.required) input[type="text"],
.contact-form .form-row:has(.required) input[type="email"],
.contact-form .form-row:has(.required) input[type="tel"],
.contact-form .form-row:has(.required) textarea {
    background: #fff5f5;
}

/* テキストエリア */
.contact-form textarea {
    min-height: 180px;
    resize: vertical;
}

.contact-form .form-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.contact-form .form-buttons input[type="submit"],
.contact-form .form-buttons input[type="button"] {
    display: block;
    width: 300px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}

/* 確認画面へ・送信する */
.contact-form input[value="確認画面へ"],
.contact-form input[value="送信する"] {
    background: #399ade;
    color: #fff;
}

/* 戻る */
.contact-form input[value="戻る"] {
    background: #ddd;
    color: #333;
}
.mw_wp_form.mw_wp_form_complete{
    margin-bottom: 100px;
    text-align: center;
}
.contact-complete{
    text-align: center;
    padding: 0 0 10vw;
}
@media screen and (max-width: 767px) {
    .c-ttl{
        margin: 8vw auto;
        font-size: 8vw;
    }
    .c-ttl .en{
        font-size: 3.5vw;
    }
    .contact-form,div#wpcf7cpcnf{
        width: 100%;
        margin: 10vw auto 6vw;
        padding: 10vw 8vw 10vw;
        border-radius: 6vw;
        /*position: absolute;
        top: 20vw;*/
    }
    .contact-form .form-row{
        margin-bottom: 8vw;
        display: inline-block;
    }
    .contact-form .form-label{
        margin-bottom: 4vw;
        font-size: 4.2vw;
    }
    .contact-form .required{
        font-size: 3vw;
    }
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form input[type="tel"],
    .contact-form textarea{
        font-size: 4vw;
    }
    .contact-form .form-buttons{
        margin-top: 4vw;
    }
    div#wpcf7cpcnf tr{
        border-bottom: none;
    }
    div#wpcf7cpcnf th{
        padding-bottom: 4vw;
    }
    .contact-complete{
        width: 80%;
        margin: 0 auto;
        padding-bottom: 19vw;
    }

}