/* お問い合わせフォーム v0.4（/contact, form 60）
 * 既存の .form-wrap / .item 体裁を流用しつつ、v0.4固有要素のみ定義。
 */

/* ───────────────────────────────────────────────
 * フッター被り対策
 * 旧デザインは .contact を固定高さ(120vh)にして .form カードを
 * position:absolute で中央配置していたため、v0.4でフォームが
 * 長くなるとカードがコンテナをはみ出しフッターに重なった。
 * → 固定高さ＋絶対配置をやめ、フレックスで中央寄せ。
 *   コンテンツが長い場合はコンテナが下方向に伸びるようにする。
 * ─────────────────────────────────────────────── */
.contact {
    height: auto;
    min-height: 120vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 上部はヘッダー(position:absolute, 高さ約191px)のオーバーレイ分を確保 */
    padding: 210px 0 80px;
    box-sizing: border-box;
}
.contact .form {
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: none;
    transform: none;
    margin: 0 auto;
}
@media (max-width: 600px) {
    .contact {
        height: auto;
        min-height: 0;
        /* SPロゴ(position:absolute, 上端0〜63px)と被らないよう上を確保 */
        padding: 88px 0 40px;
    }
    /* カード内の上下余白（上が詰まり気味だったので確保） */
    .contact .form {
        padding-top: 28px;
        padding-bottom: 32px;
    }
}

/* プレースホルダー */
.contact-v04 input::placeholder,
.contact-v04 textarea::placeholder {
    font-size: 14px;
    opacity: 0.7;
}
.contact-v04 input::-webkit-input-placeholder,
.contact-v04 textarea::-webkit-input-placeholder {
    font-size: 14px;
}

.contact-v04 .field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
}

/* 必須バッジ */
.contact-v04 .req-badge {
    display: inline-block;
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1.4;
    /* flexラベル内で縮んで「必須」が縦に折り返すのを防ぐ */
    flex-shrink: 0;
    white-space: nowrap;
}

/* フィールド補足 */
.contact-v04 .field-help {
    font-size: 13px;
    color: #888;
    margin-top: 6px;
    line-height: 1.6;
}

/* 条件分岐ブロック（ピンクのカードに溶けないよう、クリーンな白で浮かせる） */
.contact-v04 .conditional-block {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 24px 24px 8px;
    margin: 8px 0 4px;
}

.contact-v04 .conditional-title {
    font-size: 15px;
    font-weight: 600;
    color: #9c6644;
    margin-bottom: 18px;
    letter-spacing: 0.04em;
}

/* チェックボックス／ラジオの並び */
.contact-v04 .wpcf7-checkbox,
.contact-v04 .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.contact-v04 .wpcf7-list-item {
    margin: 0;
}

.contact-v04 .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* お問い合わせ種別ラジオは縦並びで見やすく */
.contact-v04 [data-name="inquiry-type"] .wpcf7-radio {
    flex-direction: column;
    gap: 12px;
}

/* ───────────────────────────────────────────────
 * 読みやすさ向上：入力欄の余白と項目間スペースを拡大
 * ─────────────────────────────────────────────── */
/* 入力欄：内側余白を広げて打ちやすく（selectは余白ゼロで窮屈だった） */
.contact-v04 input[type=text],
.contact-v04 input[type=tel],
.contact-v04 input[type=email],
.contact-v04 input[type=date],
.contact-v04 textarea,
.contact-v04 select {
    font-size: 16px;
    padding: 12px 14px;
}
/* 項目間の余白を広げる */
.contact-v04 .item {
    margin-bottom: 1.8em;
}
/* カラー選択チェックの間隔 */
.contact-v04 [data-name="color-stock"] .wpcf7-checkbox {
    gap: 12px 24px;
}

/* ───────────────────────────────────────────────
 * PC: 連絡先（電話・メール・住所・QR）を上部に横一列、
 *     フォームを全幅に。
 * 旧デザインは form__inner を左右2カラム(flex space-evenly)に
 * していたが、フォームが長くなり右カラム下に大きな余白が出た。
 * → 縦積み(column)にして連絡先を上(order:-1)へ移動、横一列の
 *   情報バーにし、その下にフォームを広く配置する。
 * （モバイル(<=600px)は既存の縦並びのまま）
 * ─────────────────────────────────────────────── */
@media (min-width: 601px) {
    /* カードに左右の内側余白を確保（連絡先バー・QRが角丸の端に
     * 当たって"はみ出し"て見えるのを防ぐ） */
    .contact .form {
        padding-left: 48px;
        padding-right: 48px;
        padding-top: 40px;
        padding-bottom: 44px;
    }
    .contact .form__inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    /* フォーム本体（CF7ラッパーを内包する無名div）を全幅に */
    .contact .form__inner > div:not(.right-items) {
        width: 100%;
    }
    /* 連絡先はフォーム下（送信ボタンの下）に配置。
     * 電話〜住所は縦並び（左）、QRは横（右）に。全体的に小さめ。 */
    .contact .right-items {
        width: 100%;
        display: grid;
        grid-template-columns: auto auto;
        justify-content: end;
        align-items: center;
        column-gap: 28px;
        row-gap: 8px;
        border-top: 1px solid #e6cccc;
        padding-top: 22px;
        margin-top: 30px;
    }
    /* 電話・メール・住所を縦並び（左カラム） */
    .contact .right-items .info-item {
        grid-column: 1;
        margin-bottom: 0;
        gap: 8px;
    }
    .contact .right-items .info-item a,
    .contact .right-items .info-item p {
        font-size: 13px;
    }
    .contact .right-items .info-item img {
        width: 24px;
    }
    /* QRは右カラムで縦中央に配置、小さめ */
    .contact .right-items .qr {
        grid-column: 2;
        grid-row: 1 / 4;
        -ms-flex-item-align: center;
        align-self: center;
        margin-left: 0;
        text-align: center;
    }
    .contact .right-items .qr img {
        width: 76px;
    }
    /* 全幅化に合わせフォーム入力域を広げる（中央寄せは維持） */
    .contact .form-wrap {
        max-width: 600px;
    }
    .contact .wpcf7-response-output {
        width: auto;
        max-width: 600px;
    }
}

/* ───────────────────────────────────────────────
 * スマホ：連絡先もPC同様に小さめ＋区切り線で整える。
 * 幅が狭いため右寄せにはせず、既存の縦並び・中央寄せを維持。
 * （フォントと余白の読みやすさ調整はメディアクエリ外のため共通適用済み）
 * ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .contact .right-items {
        border-top: 1px solid #e6cccc;
        padding-top: 24px;
        margin-top: 28px;
    }
    .contact .right-items .info-item img {
        width: 24px;
    }
    .contact .right-items .info-item a,
    .contact .right-items .info-item p {
        font-size: 14px;
    }
    .contact .right-items .qr {
        margin-top: 8px;
    }
    .contact .right-items .qr img {
        width: 108px;
    }
}