@charset "utf-8";

/*-------------------------------------------------------------
    contact page
-------------------------------------------------------------*/
.contact_content {
    padding: 60px 0 100px;
    color: #133A78;
    background: #F8F8F8;
}

.contact_breadcrumb,
.breadcrumb_area:has(+ .contact_content) {
    background: #F8F8F8;
}

.contact_content .inner {
    max-width: 1040px;
}

/*-------------------------------------------------------------
    contact - lead
-------------------------------------------------------------*/
.contact_lead {
    margin-bottom: 60px;
    text-align: center;
}

.contact_lead p {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 2.0;
    letter-spacing: 0.04em;
    color: #133A78;
}

/*-------------------------------------------------------------
    contact - tel / fax
-------------------------------------------------------------*/
.contact_tel {
    margin-bottom: 100px;
    text-align: center;
}

.contact_tel_ttl {
    margin-bottom: 28px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-family: 'Noto Serif JP', serif;
}

.contact_tel_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.contact_tel_item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 36px;
}

.contact_tel_item--phone {
    border-right: 1px solid #C5CDD8;
}

.contact_tel_icon {
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.contact_tel_icon img {
    width: 100%;
    height: 100%;
}

.contact_tel_num {
    font-family: Bebas Neue;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-decoration: none !important;
}

/*-------------------------------------------------------------
    contact - type tabs
-------------------------------------------------------------*/
.contact_type {
    margin-bottom: 70px;
    text-align: center;
}

.contact_type_ttl {
    margin-bottom: 24px;
    font-size: 1.8rem;
	font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.contact_content .contact_form_tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 0;
}

.contact_content .contact_form_tabs .contact_form_tab {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 280px;
    width: 100%;
    height: 70px;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none !important;
    color: #133A78 !important;
    background: #E8EEF5;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.contact_content .contact_form_tabs .contact_form_tab.is-active,
.contact_content .contact_form_tabs .contact_form_tab:hover {
    color: #fff !important;
    background: #2C84BD;
}

.contact_required_note {
    margin: 0 0 40px;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #133A78;
}

.contact_content .required,
.contact_content .must {
    display: inline-block;
    padding: 2px 14px;
    margin-right: 7px;
    vertical-align: middle;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #F44336;
    background: #FBD8D6;
    border-radius: 999px;
}

.contact_content .mw_wp_form .required,
.contact_content .mw_wp_form .must {
    margin-right: 0;
    margin-left: 17px;
}

.contact_form_panel {
    display: none;
}

.contact_form_panel.is-active {
    display: block;
}

/*-------------------------------------------------------------
    contact - MW WP Form
-------------------------------------------------------------*/
.contact_content .mw_wp_form {
    width: 100%;
}

.contact_content .mw_wp_form dl,
.contact_content .mw_wp_form .form_item,
.contact_content .mw_wp_form .form_row {
    margin: 0 0 50px;
}

.contact_content .mw_wp_form dt,
.contact_content .mw_wp_form label:not(.mwform-checkbox-field label):not(.mwform-radio-field label),
.contact_content .mw_wp_form .form_label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #133A78;
}

.contact_content .mw_wp_form input[type="text"],
.contact_content .mw_wp_form input[type="email"],
.contact_content .mw_wp_form input[type="tel"],
.contact_content .mw_wp_form input[type="url"],
.contact_content .mw_wp_form input[type="number"],
.contact_content .mw_wp_form select,
.contact_content .mw_wp_form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 22px 35px;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #133A78;
    background: #fff;
    border:none !important;
    box-sizing: border-box;
    transition: border-color .3s ease;
}

.contact_content .mw_wp_form input[type="text"]:focus,
.contact_content .mw_wp_form input[type="email"]:focus,
.contact_content .mw_wp_form input[type="tel"]:focus,
.contact_content .mw_wp_form input[type="url"]:focus,
.contact_content .mw_wp_form input[type="number"]:focus,
.contact_content .mw_wp_form select:focus,
.contact_content .mw_wp_form textarea:focus {
    outline: none;
    border-color: #2C84BD;
}

.contact_content .mw_wp_form .form_item--zip input[type="text"] {
    max-width: 220px;
}

.contact_content .mw_wp_form textarea {
    min-height: 180px;
    resize: vertical;
}

.contact_content .mw_wp_form input::placeholder,
.contact_content .mw_wp_form textarea::placeholder {
    color: #A0A8B8;
}

.contact_content .mw_wp_form .error {
    margin-top: 6px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #B70000;
}

/* プライバシーポリシー */
.contact_content .privacy_box,
.contact_content .mw_wp_form .privacy_box {
    max-height: 200px;
    margin: 20px 0;
    padding: 30px 35px;
    overflow-y: auto;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.875;
    letter-spacing: 0.05em;
    color: #133A78;
    background: #fff;
}
p.policy-txt {
    padding: 60px 0 40px;
    text-align: center;
    font-weight: 300;
}

span.mwform-checkbox-field-text {
    font-weight: 300;
    font-size: 1.6rem;
}

.contact_content .mwform-checkbox-field {
    display: block;
    margin: 16px 0;
	text-align: center;
}

.contact_content .mwform-checkbox-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #133A78;
    cursor: pointer;
}

.contact_content .mwform-checkbox-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #2C84BD;
    cursor: pointer;
}

/* 送信ボタン */
.contact_content .mw_wp_form input[type="submit"],
.contact_content .mw_wp_form button[type="submit"] {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 40px auto 0;
    padding: 20px 40px;
    height: 70px;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #fff;
    background: #2C84BD;
    border: 1px solid #2C84BD;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease;
}

.contact_content .mw_wp_form input[type="submit"]:hover,
.contact_content .mw_wp_form button[type="submit"]:hover {
    background: #133A78;
    border-color: #133A78;
}

/* reCAPTCHA */
.contact_content .mw_wp_form .g-recaptcha,
.contact_content .mw_wp_form iframe[src*="recaptcha"] {
    margin: 30px 0 0;
}

.contact_content .mw_wp_form > div > .g-recaptcha,
.contact_content .form_recaptcha {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.contact_type_select .mwform-radio-field {
    margin: 0;
}

.contact_type_select .mwform-radio-field label {
    display: block;
    cursor: pointer;
}

.contact_type_select .mwform-radio-field input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact_type_select .mwform-radio-field-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* お問い合わせ種別 ラジオボタン */
.contact_content .contact_type_select {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.contact_content .contact_type_select .mwform-radio-field {
    display: block;
    max-width: 280px;
    width: 100%;
}

.contact_content .contact_type_select .mwform-radio-field label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
    padding: 0 20px;
    box-sizing: border-box;

    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;

    color: #133A78;
    background: #E8EEF5;

    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

/* 選択中 */
.contact_content .contact_type_select .mwform-radio-field label:has(input[type="radio"]:checked) {
    color: #fff;
    background: #2C84BD;
}

/* hover */
.contact_content .contact_type_select .mwform-radio-field label:hover {
    color: #fff;
    background: #2C84BD;
}

/* ----- 送信・確認ボタン ----- */
.contact-submit-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px 110px;
    display: flex;
    justify-content: center;
	gap: 10px;
}

.contact-form .contact-submit-wrap {
    max-width: none;
    margin: 0;
    padding: 40px 0 110px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.contact-submit {
    width: 100%;
    max-width: 400px;
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    background: #e87a67;
    border: none;
    border-radius: 8px;
    padding: 18px 24px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    line-height: 1.5;
}

.contact-submit span {
    font-size: 15px;
}

.contact-submit:hover {
    background: #d96a55;
}

.contact-submit:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* 確認画面：戻る＋送信 */
.contact-submit-wrap--confirm {
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}

.contact-submit-wrap--confirm .contact-submit {
    flex: 1 1 200px;
    max-width: 400px;
}

.contact-submit--secondary {
    background: #6b6b6b;
}

.contact-submit--secondary:hover {
    background: #555;
}

/* 確認画面では「必須」表示を隠す（入力画面のみ表示） */
.mw_wp_form.mw_wp_form_confirm .contact-required {
    display: none;
}

/* MW WP Form エラー（項目直下の span.error を踏襲） */
.mw_wp_form .contact-field .error {
    margin-top: 0;
}

/* ----- 完了メッセージ用 ----- */
/* .contact-complete {
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 20px 120px;
    text-align: center;
} */

.contact-complete-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: var(--primary-green);
    margin: 0 0 24px;
}

.contact-complete-text {
font-size: 16px;
    line-height: 1.85;
    /* color: var(--text-color, #333); */
    margin: 0 0 18px;
    font-weight: 300;
}
.mw_wp_form_confirm .contact_required_note,
.mw_wp_form_complete .contact_required_note {
    display: none;
}
.contact_form_panel:has(.mw_wp_form_confirm) .contact_required_note,
.contact_form_panel:has(.mw_wp_form_complete) .contact_required_note {
    display: none;
}

.contact-complete .back a {
	color: #133A78!important;
}

/*-------------------------------------------------------------
    contact - responsive
-------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    .contact_content {
        padding: 40px 0 70px;
    }

    .contact_lead {
        margin-bottom: 40px;
    }

    .contact_lead p {
        font-size: 1.4rem;
        text-align: left;
    }

    .contact_tel {
        margin-bottom: 50px;
    }

    .contact_tel_ttl,
    .contact_type_ttl {
        font-size: 1.7rem;
    }

    .contact_tel_list {
        flex-direction: column;
        gap: 16px;
    }

    .contact_tel_item {
        padding: 0;
    }

    .contact_tel_item--phone {
        border-right: none;
    }

    .contact_tel_icon {
        width: 28px;
        height: 28px;
    }

    .contact_tel_num {
        font-size: 2.4rem;
    }

    .contact_type {
        margin-bottom: 32px;
    }

    .contact_content .contact_form_tabs {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .contact_content .contact_form_tabs .contact_form_tab {
        height: 50px;
        font-size: 1.4rem;
    }

    .contact_content .mw_wp_form dt,
    .contact_content .mw_wp_form label:not(.mwform-checkbox-field label):not(.mwform-radio-field label),
    .contact_content .mw_wp_form .form_label {
        font-size: 1.4rem;
    }

    .contact_content .mw_wp_form input[type="text"],
    .contact_content .mw_wp_form input[type="email"],
    .contact_content .mw_wp_form input[type="tel"],
    .contact_content .mw_wp_form input[type="url"],
    .contact_content .mw_wp_form input[type="number"],
    .contact_content .mw_wp_form select,
    .contact_content .mw_wp_form textarea {
        padding: 12px 14px;
        font-size: 1.4rem;
    }

    .contact_content .mw_wp_form input[type="submit"],
    .contact_content .mw_wp_form button[type="submit"] {
        max-width: 100%;
        padding: 8px 20px;
        font-size: 1.4rem;
        height: 50px;
    }
	
	.contact_content .privacy_box, .contact_content .mw_wp_form .privacy_box {
    font-size: 1.4rem;
	}
	
	.contact-complete-text {
    font-size: 1.4rem;
}
	p.policy-txt {
    padding: 30px 0 20px;
    text-align: center;
    font-weight: 300;
}
.contact_content .contact_type_select {
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.contact_content .contact_type_select .mwform-radio-field label {
    height: 50px;
    font-size: 1.4rem;
}
.mw_wp_form .horizontal-item + .horizontal-item {
	margin-left: 0;
}
.contact_required_note {
    font-size: 1.4rem;
}

}