@charset "UTF-8";

/* =============================================================
   Contact Form — Session 4 / shinc-style minimal redesign
   -------------------------------------------------------------
   参考: https://shinc.co.jp/pages/contact

   想定する CF7 テンプレート:
   <div class="form">
       <table class="contact_table smartphone">
           <tr><th>お名前</th><td class="required">[text* user-name autocomplete:name]</td></tr>
           <tr><th>フリガナ</th><td class="required">[text* user-kana]</td></tr>
           <tr><th>E-Mail</th><td class="required">[email* user-email autocomplete:email]</td></tr>
           <tr><th>お問い合わせ内容</th><td class="required">[textarea* user-message]</td></tr>
       </table>
       <p class="btnSend">[submit "送信する"]</p>
   </div>

   方針:
   - テーブルの枠線・背景色をすべて除去し、ラベル（th）を
     入力欄（td）の上に表示するブロック型レイアウトへ転換
   - 派手色（#FF9100 のオレンジ「必須」バッジ）をグレー文字に
   - 入力欄は白＋極薄ボーダー、フォーカス時のみ色を引き締める
   - 送信ボタンは黒・横幅いっぱい・余白広め（shinc 準拠）
   - 「同意ボックス」「エラー文」も中立トーンに統一
   ============================================================= */

/* ── 全体ラッパー ─────────────────────────────── */
.post-content .wpcf7,
.post-content form.wpcf7-form {
    max-width: 720px;
    margin: 0 auto;
}

/* リード文（CF7 の前に配置されるpタグ）を中央揃え・落ち着いた配色に */
.post-content > p {
    line-height: 1.9;
    color: #444;
}

/* ── テーブルを縦積みに転換 ───────────────────── */
.post-content table.contact_table,
.post-content table.contact_table tbody,
.post-content table.contact_table tr,
.post-content table.contact_table th,
.post-content table.contact_table td {
    display: block;
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    padding: 0;
    text-align: left;
}

.post-content table.contact_table {
    margin: 24px auto 40px;
    border-collapse: collapse;
}

.post-content table.contact_table tr {
    margin-bottom: 28px;
}

/* ラベル（th） */
.post-content table.contact_table th {
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #222;
    margin-bottom: 8px;
    padding: 0;
    width: auto;
    vertical-align: top;
    line-height: 1.6;
}

/* WordPress が <th> の中身を <p> で自動ラップしている場合、
 * その <p> がブロック改行を作って「必須」マークが下にズレるためインライン化 */
.post-content table.contact_table th > p,
.post-content table.contact_table td > p {
    display: inline;
    margin: 0;
    padding: 0;
}

/* 入力欄セル（td） */
.post-content table.contact_table td {
    padding: 0 !important;
    position: relative;
}

/* ── 必須行：th 横に控えめな「*」を表示 ── */
.post-content table.contact_table tr:has(td.required) th::after,
.post-content table.contact_table th.required::after {
    content: " *";
    color: #b86a6a;
    font-size: 0.95em;
    margin-left: 4px;
    vertical-align: baseline;
}

/* 元のオレンジ「必須」バッジは th 側に統合済みなので非表示 */
.post-content table.contact_table td.required:before {
    content: none !important;
    display: none !important;
}

/* ── 入力欄スタイル ───────────────────────────── */
.post-content .wpcf7 input[type="text"],
.post-content .wpcf7 input[type="email"],
.post-content .wpcf7 input[type="tel"],
.post-content .wpcf7 input[type="url"],
.post-content .wpcf7 input[type="number"],
.post-content .wpcf7 input[type="date"],
.post-content .wpcf7 select,
.post-content .wpcf7 textarea,
.post-content .form input[type="text"],
.post-content .form input[type="email"],
.post-content .form input[type="tel"],
.post-content .form input[type="url"],
.post-content .form textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    margin: 0;
    background: #fff !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 2px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #222;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.post-content .wpcf7 textarea,
.post-content .form textarea {
    min-height: 180px;
    resize: vertical;
}

.post-content .wpcf7 input:focus,
.post-content .wpcf7 select:focus,
.post-content .wpcf7 textarea:focus,
.post-content .form input:focus,
.post-content .form textarea:focus {
    border-color: #222 !important;
    box-shadow: 0 0 0 1px #222 !important;
    background: #fff !important;
}

/* placeholder の色トーン統一 */
.post-content .wpcf7 input::placeholder,
.post-content .wpcf7 textarea::placeholder,
.post-content .form input::placeholder,
.post-content .form textarea::placeholder {
    color: #aaa;
    font-size: 0.9rem;
}

/* ラジオ・チェックボックス */
.post-content .wpcf7-list-item {
    display: inline-block;
    margin: 0 16px 4px 0;
    font-size: 0.9rem;
    color: #333;
}
.post-content .wpcf7-list-item label {
    cursor: pointer;
    padding-right: 0;
}

/* ── 同意ボックス ────────────────────────────── */
.privacyBox {
    text-align: center;
    padding: 24px 0 8px;
    font-size: 0.86rem;
    color: #555;
    line-height: 1.8;
}
.privacyBox a {
    color: #222;
    text-decoration: underline;
}

/* ── 送信ボタン ──────────────────────────────── */
.btnSend,
p.btnSend {
    text-align: center;
    padding: 8px 0 0;
    margin: 16px 0 0;
}

.btnSend input[type="submit"],
.post-content .wpcf7 input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 16px 32px;
    background: #111;
    color: #fff;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.96rem;
    letter-spacing: 0.10em;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btnSend input[type="submit"]:hover,
.post-content .wpcf7 input[type="submit"]:hover {
    background: #333;
}

.btnSend input[type="submit"]:disabled {
    background: #888 !important;
    cursor: not-allowed;
}

/* ── CF7 メッセージ枠 ────────────────────────── */
.wpcf7-not-valid-tip {
    color: #b86a6a !important;
    font-size: 0.82rem;
    margin-top: 6px;
    display: block;
}

.wpcf7-response-output {
    margin: 24px 0 0 !important;
    padding: 14px 18px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 2px;
    background: #fafafa;
    font-size: 0.88rem;
    color: #333 !important;
    text-align: center;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #d4a3a3 !important;
    background: #fbf6f6;
    color: #8a4a4a !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #b8c9b8 !important;
    background: #f6faf6;
    color: #3a5a3a !important;
}

.wpcf7-spinner {
    display: inline-block;
    margin-left: 12px;
}

/* ── レスポンシブ ───────────────────────────── */
@media (max-width: 600px) {
    .post-content .wpcf7,
    .post-content form.wpcf7-form {
        padding: 0 4px;
    }
    .post-content table.contact_table tr {
        margin-bottom: 20px;
    }
    .btnSend input[type="submit"],
    .post-content .wpcf7 input[type="submit"] {
        max-width: 100%;
        padding: 14px 24px;
        font-size: 0.92rem;
    }
}