@charset "UTF-8";
/* =========================================================
   Contact Form 7 上書き
   CF7 が生成するマークアップを、静的HTML版のフォームデザインに合わせる。
   CONTACT ページのみ読み込み（functions.php / honma_a_assets）。
   ========================================================= */
/* CF7 は各項目を inline の <span> で包むため、幅 100% が効くよう block 化する */
.mailform .wpcf7-form-control-wrap {
  display: block;
}
.mailform .wpcf7 form .wpcf7-response-output {
  margin: 32px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(36, 68, 109, 0.3);
  color: #274065;
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 1.9;
  text-align: center;
}
.mailform .wpcf7 form.sent .wpcf7-response-output {
  border-color: #24446d;
}
.mailform .wpcf7 form.invalid .wpcf7-response-output, .mailform .wpcf7 form.unaccepted .wpcf7-response-output, .mailform .wpcf7 form.failed .wpcf7-response-output, .mailform .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #bb3b34;
  color: #bb3b34;
}
/* 項目ごとのエラーメッセージ */
.mailform .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  color: #bb3b34;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.7;
}
.mailform .wpcf7-not-valid {
  border-color: #bb3b34 !important;
}
/* -----------------------------------------------
   同意チェックボックス（[acceptance]）
   静的HTML版の .checkbox / .checkbox__box を CF7 の
   .wpcf7-list-item-label の疑似要素で再現する。
   ----------------------------------------------- */
.form-privacy .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.form-privacy .wpcf7-acceptance label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.form-privacy .wpcf7-acceptance input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form-privacy .wpcf7-list-item-label {
  position: relative;
  display: inline-block;
  padding-left: 34px;
  font-size: 13px;
  letter-spacing: 0.14em;
}
/* チェックボックスの枠 */
.form-privacy .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1px solid rgba(36, 68, 109, 0.45);
  transform: translateY(-50%);
  transition: border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
/* チェックマーク（静的HTML版のインラインSVGと同じパス） */
.form-privacy .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%2324446d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/15px 15px;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.form-privacy .wpcf7-acceptance input[type=checkbox]:checked + .wpcf7-list-item-label::before {
  border-color: #24446d;
}
.form-privacy .wpcf7-acceptance input[type=checkbox]:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}
.form-privacy .wpcf7-acceptance input[type=checkbox]:focus-visible + .wpcf7-list-item-label::before {
  outline: 2px solid rgba(36, 68, 109, 0.4);
  outline-offset: 2px;
}
/* -----------------------------------------------
   送信ボタン（[submit]）
   静的HTML版の .submit-btn__line は <input> の子要素にできないため、
   ラッパーの疑似要素で描画する。
   ----------------------------------------------- */
.submit-btn-wrap {
  position: relative;
  display: block;
  width: min(100%, 460px);
}
.submit-btn-wrap .submit-btn {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  /* Safari 対策: input[type=submit] は appearance が既定(auto)だとネイティブ描画が
     優先され、:hover の背景/文字色変更が視覚的に無視される（Firefox/Chromeは無視しない）。
     appearance を none にして、カンプ通りの反転ホバーを全ブラウザで効かせる。 */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.submit-btn-wrap::after {
  content: "";
  position: absolute;
  /* 1px 線の縦中央。transform: translateY() を使うと linkLine（scaleX）に
     上書きされ、ホバー中だけ 0.5px ずれるため、top 側で中央合わせする。 */
  top: calc(50% - 0.5px);
  right: 56px;
  width: 54px;
  height: 1px;
  background: #fff;
  pointer-events: none;
  transition: background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.submit-btn-wrap:hover::after, .submit-btn-wrap:focus-within::after {
  background: #24446d;
  animation: linkLine 1.15s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
/* 送信中スピナー
   CF7 が送信ボタン直後（.submit-btn-wrap 内）に差し込むため、
   absolute にしてラッパーの高さ＝ボタンの高さを保つ（罫線の位置がずれる）。 */
.submit-btn-wrap .wpcf7-spinner {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}
/* -----------------------------------------------
   Cloudflare Turnstile
   CF7 は送信ボタン（.form-submit）の直後にウィジェットを自動挿入する。
   カンプ準拠：送信ボタンとの間に 40px の余白をとり、中央寄せにする。
   ----------------------------------------------- */
.wpcf7-turnstile {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
/* SP: 本体CSS（style.css）の max-width:1199px 側の最終値に合わせる */
@media (max-width: 1199px) {
  .form-privacy .wpcf7-list-item-label {
    font-size: 12px;
    letter-spacing: 0.2em;
  }
  .submit-btn-wrap::after {
    right: 30px;
    width: 30px;
  }
}
@media (min-width: 1200px) {
  .submit-btn-wrap {
    width: min(100%, 500px);
  }
  .submit-btn-wrap::after {
    right: 40px;
    width: 40px;
  }
}