/* ==========================================================================
   お問い合わせページ専用スタイル
========================================================================== */

/* メインエリア */
.l-main.is-contact-page {
    padding: 0 0 100px;
    background-color: var(--bg-color, #f7f3e9);
    min-height: 80vh;
}

.l-main.is-contact-page .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ページ中央の本文ラッパー */
.c-contact-inner {
    max-width: 1400px;
    margin: 48px auto 0;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

/* ------------------------------------------------------------------
   ご注意事項ボックス
------------------------------------------------------------------ */
.c-contact-notice {
    padding: 40px 40px 28px;
    border-bottom: 1px solid #e8eaec;
}

.c-contact-notice__lead {
    font-size: var(--fs-16);
    color: #444;
    line-height: 1.9;
    margin-bottom: 18px;
}

.c-contact-notice__title {
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--theme-color, #1e3a8a);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-contact-notice__title i {
    font-size: var(--fs-16);
}

.c-contact-notice__list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.c-contact-notice__list li {
    font-size: var(--fs-16);
    color: #555;
    padding-left: 1.1em;
    position: relative;
    line-height: 1.8;
}

.c-contact-notice__list li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: var(--theme-color, #1e3a8a);
}

.c-contact-notice__list li strong {
    color: #c53030;
}

.c-contact-notice__tel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    background: color-mix(in srgb, var(--theme-color, #1e3a8a) 10%, #fff);
    border-radius: 0.4rem;
    margin-top: 16px;
}

.c-contact-notice__tel-label {
    font-size: var(--fs-13);
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.c-contact-notice__tel-num {
    font-size: var(--fs-23);
    font-weight: 700;
    color: var(--theme-color, #1e3a8a);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: opacity 0.2s;
}

.c-contact-notice__tel-num:hover {
    opacity: 0.75;
}

.c-contact-notice__tel-hours {
    font-size: var(--fs-13);
    color: #888;
}

/* ------------------------------------------------------------------
   フォームセクションヘッド（p-asymmetry-features__title-wrap と同感覚）
------------------------------------------------------------------ */
.c-contact-section {
    padding: 40px 40px 0;
}

.c-contact-section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 40px;
}

/* シンボル */
.c-contact-section__symbol {
    color: var(--theme-color, #1e3a8a);
}

.c-contact-section__symbol img {
    height: 45px;
    width: auto;
}

/* クリニック名 */
.c-contact-section__clinic-label {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: var(--fs-16);
    font-weight: 700;
    color: #333;
    margin: 0;
    letter-spacing: 0.1em;
}

/* お問い合わせフォーム（メインタイトル） */
.c-contact-section__title {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: var(--fs-32);
    font-weight: 700;
    color: #333;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0;
}

/* Contact Form（英語サブ） */
.c-contact-section__en {
    font-size: var(--fs-12);
    color: var(--theme-color, #1e3a8a);
    letter-spacing: 0.35em;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0;
}

/* ------------------------------------------------------------------
   CF7 フォームラッパー
------------------------------------------------------------------ */
.c-contact-form-wrap {
    background: #fff;
    padding: 0 40px;
}

/* p-form-container ── style.css の max-width:800px を上書き */
.c-contact-form-wrap .p-form-container {
    background: transparent !important;
    padding: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* ----------------------------------------------------------------
   フォーム行  3列 Flexbox レイアウト
   [ラベル 220px 固定] | [必須 52px 固定] | [入力フィールド 残り全幅]
---------------------------------------------------------------- */

.c-contact-form-wrap .p-form-rows {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

/* 1行 = flex横並び */
.c-contact-form-wrap .p-form-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    min-height: 64px;
    border-bottom: 1px solid #eee;
}

/* テキストエリア行は上揃え */
.c-contact-form-wrap .p-form-row.is-textarea {
    align-items: flex-start;
}

/* 列1：ラベルラッパー（固定幅・縮まない） */
.c-contact-form-wrap .p-form-label-wrap {
    flex: 0 0 220px !important;
    width: 220px;
    min-width: 0;
    padding: 16px 12px 16px 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.c-contact-form-wrap .p-form-label {
    font-size: var(--fs-16);
    font-weight: 600;
    color: #333;
    line-height: 1.5;
    cursor: default;
    width: 100%;
}

.c-contact-form-wrap .p-form-row.is-textarea .p-form-label-wrap {
    align-items: flex-start;
    padding-top: 18px;
}

/* 列2：必須バッジ（固定幅） */
.c-contact-form-wrap .p-form-badge {
    flex: 0 0 52px !important;
    width: 52px;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 24px;
    background: #dc2626;
    color: #fff;
    font-size: var(--fs-11);
    font-weight: 700;
    border-radius: 5px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    box-sizing: border-box;
}

.c-contact-form-wrap .p-form-row.is-textarea .p-form-badge {
    margin-top: 18px;
}

/* 列3：入力フィールド（残り全幅） */
.c-contact-form-wrap .p-form-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 10px 0 10px 16px;
    box-sizing: border-box;
}

.c-contact-form-wrap .p-form-row.is-textarea .p-form-field {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* wpcf7-form-control-wrap をブロック化して親幅いっぱいに展開 */
.c-contact-form-wrap .p-form-field .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* ----------------------------------------------------------------
   入力フィールド共通スタイル（style.css を上書き）
---------------------------------------------------------------- */
.c-contact-form-wrap .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: var(--fs-16) !important;
    line-height: 1.6 !important;
    color: #333 !important;
    border: 1.5px solid #d0d7e0 !important;
    border-radius: 4px !important;
    background: #f4f6f9 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.18s, background 0.18s;
    appearance: none;
    -webkit-appearance: none;
}

.c-contact-form-wrap .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):focus {
    outline: none !important;
    border-color: var(--theme-color, #1e3a8a) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12) !important;
}

/* textarea */
.c-contact-form-wrap .wpcf7-textarea {
    min-height: 180px !important;
    resize: vertical;
}

/* select カスタム矢印 */
.c-contact-form-wrap .wpcf7-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23555' d='M8 10.9L2.2 5.1l1.1-1.1L8 8.7l4.7-4.7 1.1 1.1z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
    cursor: pointer;
    max-width: 460px;
}

/* ----------------------------------------------------------------
   プライバシー同意エリア（style.css の .p-form-privacy を上書き）
---------------------------------------------------------------- */
.c-contact-form-wrap .p-form-privacy {
    padding: 24px 0 20px !important;
    background: transparent !important;
    text-align: center !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.c-contact-form-wrap .p-form-privacy .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    font-size: var(--fs-16);
    color: #444;
    cursor: pointer;
    line-height: 1.8;
}

.c-contact-form-wrap .wpcf7-acceptance input[type="checkbox"] {
    transform: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin-top: 3px;
    vertical-align: middle;
    accent-color: var(--theme-color, #1e3a8a);
    cursor: pointer;
}

.c-contact-form-wrap .p-form-privacy a {
    color: var(--theme-color, #1e3a8a);
    text-decoration: underline;
}

/* ----------------------------------------------------------------
   送信ボタン（style.css の .p-form-submit / .wpcf7-submit を上書き）
---------------------------------------------------------------- */
.c-contact-form-wrap .p-form-submit {
    text-align: center !important;
    padding: 40px 0 !important;
}

.c-contact-form-wrap .wpcf7-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 80px !important;
    background: var(--theme-color, #1e3a8a) !important;
    color: #fff !important;
    font-size: var(--fs-18) !important;
    font-weight: 700;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    letter-spacing: 0.12em;
    transition: opacity 0.2s, transform 0.15s;
    min-width: 280px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
}

.c-contact-form-wrap .wpcf7-submit:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18) !important;
}

.c-contact-form-wrap .wpcf7-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.c-contact-form-wrap__fallback {
    text-align: center;
    padding: 48px 20px;
    color: #666;
}

.c-contact-tel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--theme-color, #1e3a8a);
    text-decoration: none;
    border: 2px solid var(--theme-color, #1e3a8a);
    padding: 10px 28px;
    border-radius: 3px;
}

/* ------------------------------------------------------------------
   バリデーション・送信結果
------------------------------------------------------------------ */
.c-contact-form-wrap .wpcf7-not-valid-tip {
    display: block;
    font-size: var(--fs-14);
    color: #dc2626;
    margin-top: 6px;
}

.c-contact-form-wrap .wpcf7-not-valid {
    border-color: #dc2626 !important;
    background: #fff5f5 !important;
}

.c-contact-form-wrap .wpcf7-response-output {
    margin: 0;
    padding: 18px 32px;
    font-size: var(--fs-16);
    font-weight: 600;
    border: none !important;
    border-radius: 0;
    border-top: 1px solid #e5e7eb !important;
}

.c-contact-form-wrap .wpcf7-mail-sent-ok {
    background: #f0fdf4;
    color: #166534;
    border-left: 4px solid #22c55e !important;
}

.c-contact-form-wrap .wpcf7-mail-sent-ng,
.c-contact-form-wrap .wpcf7-aborted {
    background: #fff5f5;
    color: #dc2626;
    border-left: 4px solid #dc2626 !important;
}

.c-contact-form-wrap .wpcf7-validation-errors {
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid #f59e0b !important;
}

.c-contact-form-wrap .ajax-loader {
    display: inline-block;
    margin-left: 12px;
    vertical-align: middle;
}

/* ------------------------------------------------------------------
   個人情報保護方針（フォーム内最下部）
------------------------------------------------------------------ */
.c-contact-privacy {
    padding: 20px 40px 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    margin: 0 -40px;
}

.c-contact-privacy__title {
    font-size: var(--fs-14);
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.c-contact-privacy__text {
    font-size: var(--fs-13);
    color: #666;
    line-height: 1.8;
    margin: 0;
}

.c-contact-privacy__text a {
    color: var(--theme-color, #1e3a8a);
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   スマートフォン対応
------------------------------------------------------------------ */
@media (max-width: 767px) {

    /* ──────────────────────────────────────────
       レイアウト：左右フルワイド・白背景・余白なし
    ────────────────────────────────────────── */
    .l-main.is-contact-page {
        padding-bottom: 56px;
        background: #fff;
    }

    /* コンテナ：左右padding撤廃・白背景で枠感をなくす */
    .l-main.is-contact-page .container {
        padding: 0;
        background: #fff;
    }

    /* カード風ラッパーを解除してフルワイドに */
    .c-contact-inner {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
    }

    /* ──────────────────────────────────────────
       ご注意事項ボックス
    ────────────────────────────────────────── */
    .c-contact-notice {
        padding: 24px 18px 20px;
    }

    .c-contact-notice__lead {
        font-size: var(--fs-15);
    }

    .c-contact-notice__list li {
        font-size: var(--fs-14);
    }

    .c-contact-notice__tel {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 14px 16px;
    }

    .c-contact-notice__tel-num {
        font-size: var(--fs-21);
    }

    /* ──────────────────────────────────────────
       フォームセクションヘッド
    ────────────────────────────────────────── */
    .c-contact-section {
        padding: 32px 18px 0;
    }

    .c-contact-section__head {
        gap: 8px;
        margin-bottom: 28px;
    }

    .c-contact-section__symbol img {
        height: 36px;
    }

    .c-contact-section__title {
        font-size: var(--fs-22);
    }

    /* ──────────────────────────────────────────
       CF7 フォーム：左右余白を確保しつつ最大幅活用
    ────────────────────────────────────────── */
    .c-contact-form-wrap {
        padding: 0 18px;
    }

    /* p-form-row：ラベル+バッジ1行目・入力フィールド2行目に折り返す */
    .c-contact-form-wrap .p-form-row {
        flex-wrap: wrap !important;
        min-height: auto;
        padding: 4px 0;
    }

    /* 1行目：ラベルラッパー（残幅）＋必須バッジ（固定） */
    .c-contact-form-wrap .p-form-label-wrap {
        flex: 1 1 auto !important;
        width: auto;
        padding: 12px 8px 6px 0;
        align-items: center;
    }

    .c-contact-form-wrap .p-form-label {
        font-size: var(--fs-15);
    }

    .c-contact-form-wrap .p-form-badge {
        flex: 0 0 48px !important;
        width: 48px;
        font-size: var(--fs-10);
        margin-top: 12px;
        align-self: flex-start;
    }

    /* 2行目：入力フィールドが全幅に */
    .c-contact-form-wrap .p-form-field {
        flex: 0 0 100% !important;
        width: 100%;
        padding: 4px 0 14px;
    }

    /* テキストエリア行 */
    .c-contact-form-wrap .p-form-row.is-textarea .p-form-label-wrap {
        padding-top: 12px;
    }

    .c-contact-form-wrap .p-form-row.is-textarea .p-form-badge {
        margin-top: 12px;
    }

    .c-contact-form-wrap .p-form-row.is-textarea .p-form-field {
        padding-top: 4px;
    }

    /* 入力フィールド：フォントサイズ16px以上でiOSズーム防止 */
    .c-contact-form-wrap .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
        font-size: var(--fs-16) !important;
        padding: 12px 14px !important;
    }

    .c-contact-form-wrap .wpcf7-select {
        max-width: 100%;
    }

    /* ──────────────────────────────────────────
       送信ボタン・プライバシー
    ────────────────────────────────────────── */
    .c-contact-form-wrap .wpcf7-submit {
        width: 100% !important;
        padding: 16px 20px !important;
        min-width: auto !important;
        font-size: var(--fs-16) !important;
    }

    .c-contact-form-wrap .p-form-privacy .wpcf7-acceptance {
        font-size: var(--fs-14);
    }

    /* ──────────────────────────────────────────
       個人情報保護方針フッター
    ────────────────────────────────────────── */
    .c-contact-privacy {
        margin: 0;
        padding: 18px 18px 28px;
    }
}