/* Contact Form 7 のマークアップを、エントリーフォームのデザインに合わせるための調整。 🚨 このファイルは assets/css/style.css とは別に持つこと。 style.css は静的モック html/assets/css/style.css と **1 バイトも違わない** 状態を保つ （html/ がデザインの正で、bin/render-check.php もそれを前提にしている）。 CF7 はモックには存在しないので、テーマ側だけで要る調整はここに閉じ込める。 🚨 読み込むのはエントリーページだけ（inc/assets.php）。他ページには一切影響しない。 ---------------------------------------------------------------------------- CF7 が作るマークアップ（

の自動挿入は inc/form.php で止めてある） .choices span.wpcf7-form-control-wrap span.wpcf7-form-control.wpcf7-radio span.wpcf7-list-item label input[type=radio] span.wpcf7-list-item-label 元のデザインは `label.choice > input + span` という形だったので、 **間に挟まる span を display: contents でレイアウトから消し**、 label と span に .choice / .choice span 相当のスタイルを当て直している。 ---------------------------------------------------------------------------- */ /* CF7 が挟むラッパーを、flex のレイアウトから透明にする */ .form .wpcf7-form-control-wrap, .form .wpcf7-radio, .form .wpcf7-acceptance, .form .wpcf7-list-item { display: contents; } /* 郵便番号。元は `.field__zipmark + .control` で効かせていたが、間に span が入る */ .field__zipmark + .wpcf7-form-control-wrap .control { flex: none; width: 281px; } /* --- 選択式ボタン（性別 / 希望職種） --- */ /* label が .choices の flex アイテムになる（元の .choice 相当） */ .choices .wpcf7-list-item label { flex: 1 1 0; min-width: 0; display: block; } /* 元の .choice input 相当 */ .choices .wpcf7-list-item input { position: absolute; width: 1px; height: 1px; opacity: 0; } /* 元の .choice span 相当 */ .choices .wpcf7-list-item-label { display: flex; align-items: center; justify-content: center; height: 60px; border: 1px solid var(--c-field-border); border-radius: 10px; background: #fff; box-shadow: 0 4px 2px -1px rgba(0, 0, 0, .14); font-size: 22px; font-weight: 700; letter-spacing: .13em; color: #3C1212; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } .choices .wpcf7-list-item-label:hover { border-color: #B9C6CD; } .choices .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { outline: 2px solid #7FB6D6; outline-offset: 2px; } .choices .wpcf7-list-item input:checked + .wpcf7-list-item-label { border-color: transparent; color: #fff; } /* 選択時の色。CF7 は項目ごとに class を付けられないので **並び順** で当てる。 フォーム定義の選択肢の順番を変えると色が入れ替わるので注意（性別は 男性 → 女性）。 */ .choices--gender .wpcf7-list-item:first-child input:checked + .wpcf7-list-item-label { background: var(--c-male); } .choices--gender .wpcf7-list-item:last-child input:checked + .wpcf7-list-item-label { background: var(--c-female); } .choices--job .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--c-dark); } /* --- 確認チェック --- */ /* 元は `.confirm > input + label` だったが、CF7 では input が label の中に入る */ .confirm .wpcf7-list-item label { display: flex; align-items: center; gap: 22px; } /* --- 送信ボタン --- */ /* CF7 は送信ボタンの直後にスピナーを出す。.form は縦並びの flex なので、 そのままだとボタンの下に落ちる。フォーム定義側で .submit-row にくるんで横並びにする。 */ .submit-row { display: flex; align-items: center; justify-content: center; gap: 16px; } /* 🚨 スピナーは visibility: hidden でも **幅を食う**。CF7 の既定は `width: 24px` + `margin: 0 24px` で、.submit-row は中央寄せなので そのままだとボタンが (24px + gap 16px) / 2 = 20px 左にずれる。 左右マージンを消したうえで、自分の幅 + gap 分をネガティブマージンで相殺し、 中央合わせの計算からスピナーを外す。 */ .submit-row .wpcf7-spinner { margin: 0; margin-right: -40px; /* スピナー 24px + gap 16px */ } /* --- Turnstile（bot 対策ウィジェット） --- */ /* プラグイン CF7 Simple Turnstile の [cf7_simple_turnstile]（フォーム定義側で .turnstile-row にくるんでいる）。ウィジェットは **幅 300px 固定のブロック要素** なので、text-align: center では中央に来ない。flex で寄せる。 */ .turnstile-row { display: flex; justify-content: center; margin-bottom: 24px; } /* --- バリデーション・送信結果の表示 --- */ /* エラーの吹き出し。ラッパーを display: contents にしているので、 そのままだと .field__row などの横並びに巻き込まれる。常に改行させる。 🚨 flex-basis: 100% だけでは足りない。**吹き出しが入る flex コンテナに flex-wrap: wrap が要る**（下の .form .choices を参照）。 */ .form .wpcf7-not-valid-tip { flex-basis: 100%; margin-top: 8px; font-size: 16px; font-weight: 700; letter-spacing: .08em; color: #C0392B; } .form .wpcf7-form-control.wpcf7-not-valid { border-color: #C0392B; } /* 🚨 CF7 6.1.7 の不具合よけ。**1 項目に吹き出しが 2 つ出る。** 1 回送信すると、検証が 2 パス走って（クライアント側の SWV → サーバ応答の処理） それぞれが span.wpcf7-not-valid-tip を appendChild する。一方で掃除側は `wrap.querySelector(".wpcf7-not-valid-tip")?.remove()` と **単数形**なので 1 つしか消えず、同じ文言が 2 行並ぶ。実測では 6 項目で 12 個できていた （送信を繰り返しても 12 のままで、増えはしない）。 CF7 側の問題でテーマからは直せないため、2 つ目以降を隠して対処する。 将来 CF7 が直したら、この 2 行は消してよい。 */ .form .wpcf7-not-valid-tip ~ .wpcf7-not-valid-tip { display: none; } /* 選択式ボタン（性別 / 希望職種）でエラーが出たときの折り返し。 .choices は style.css 側で `display: flex` の **nowrap**。そこへ span.wpcf7-not-valid-tip が（ラッパーが display: contents なので） 3 つ目の flex アイテムとして入ってくる。nowrap のままだと flex-basis: 100% が効かず、吹き出しが横幅を取ってラジオのラベルが数 px まで潰れる。 style.css はモックと 1 バイトも変えられないので、ここで wrap を足す。 エラーが無いときは 2 つのラベルが 1 行に収まるため、見た目は変わらない。 行間は .choices の gap（22px）が効くので、吹き出し側の margin-top は殺す。 */ .form .choices { flex-wrap: wrap; } .form .choices .wpcf7-not-valid-tip { margin-top: 0; } /* 送信後のメッセージ */ .form .wpcf7-response-output { margin: 0; padding: 18px 22px; border: 2px solid var(--c-field-border); border-radius: 10px; font-size: 18px; line-height: 1.8; letter-spacing: .08em; text-align: center; } .form.invalid .wpcf7-response-output, .form.unaccepted .wpcf7-response-output, .form.failed .wpcf7-response-output { border-color: #C0392B; color: #C0392B; } .form.sent .wpcf7-response-output { border-color: var(--c-dark); } @media (max-width: 900px) { .form .wpcf7-response-output { font-size: 15px; padding: 14px 16px; } .choices .wpcf7-list-item-label { font-size: 16px; height: 48px; } .confirm .wpcf7-list-item label { gap: 12px; } } /* SP は送信ボタンが width: 100% で行いっぱいに広がるため、上のネガティブマージンで 右にはみ出したスピナーが **そのまま横スクロールになる**（390px 幅で実測 399px）。 SP だけ絶対配置にして行の内側へ収める。ボタンに重なるが、スピナーは中で 白い点が回るので濃色ボタンの上でも見える。 */ @media (max-width: 640px) { .submit-row { position: relative; } .submit-row .wpcf7-spinner { position: absolute; top: 50%; right: 12px; margin: 0; transform: translateY(-50%); } }