/* =========================
   Layout / Wrapper
========================= */
.cf7-wrap {
  max-width: 760px;
}

.cf7-field {
  margin: 0 0 18px;
}

.small-note {
  font-size: 13px;
  opacity: .85;
}

/* =========================
   Inputs (base)
========================= */
.cf7-input,
.cf7-textarea,
.cf7-select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  outline: none;
  background-color: #fff;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

/* iOSズーム防止 */
@media (max-width: 640px) {
  .cf7-input,
  .cf7-textarea,
  .cf7-select {
    font-size: 16px;
  }
}

.cf7-input:focus,
.cf7-textarea:focus,
.cf7-select:focus {
  border-color: #666;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* =========================
   Validation UI
========================= */
.cf7-field.is-touched.is-invalid .cf7-input,
.cf7-field.is-touched.is-invalid .cf7-textarea,
.cf7-field.is-touched.is-invalid .cf7-select {
  border-color: #d93025;
  background-color: rgba(217,48,37,.04);
  box-shadow: 0 0 0 3px rgba(217,48,37,.10);
}

.cf7-field.is-touched.is-valid .cf7-input,
.cf7-field.is-touched.is-valid .cf7-textarea,
.cf7-field.is-touched.is-valid .cf7-select {
  border-color: #1a7f37;
}

.cf7-field-error {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #d93025;
}

/* =========================
   "Other" input blocks
========================= */
.cf7-other {
  display: none;              /* ★デフォルト非表示 */
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed #cfcfcf;
  border-radius: 10px;
  background: #fafafa;
}

/* ★JSで表示したい時に付ける */
.cf7-other.is-open {
  display: block;
}


/* =========================
   Checkbox / Radio (base)
========================= */
.wpcf7-list-item {
  margin: 0 14px 8px 0;
}

/* =========================
   Checkbox / Radio (mobile friendly)
========================= */
@media (max-width: 640px) {

  /* 1項目＝1タップ領域 */
  .wpcf7-list-item {
    display: block;
    margin: 0 0 10px 0;
  }

  .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px;
    border: 1px solid #d7d7d7;
    border-radius: 12px;
    background: #fff;
    line-height: 1.35;
    -webkit-tap-highlight-color: transparent;
  }

  .wpcf7-list-item input[type="checkbox"],
  .wpcf7-list-item input[type="radio"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex: 0 0 22px;
  }

  .wpcf7-list-item-label {
    display: block;
    font-size: 16px;
  }

  /* チェック群エラー時も赤く */
  .cf7-field.is-touched.is-invalid .wpcf7-list-item label {
    border-color: #d93025;
    background-color: rgba(217,48,37,.04);
  }
}

/* =========================
   Submit button
========================= */
.cf7-submit {
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

/* =========================
   Turnstile spacing
========================= */
.cf-turnstile,
.cloudflare-turnstile {
  margin: 16px 0;
}

@media (max-width: 640px) {
  .cf-turnstile,
  .cloudflare-turnstile {
    transform: scale(0.95);
    transform-origin: left center;
  }
}
/* =========================
   Error styling for "Other" blocks (box itself)
========================= */

/* 「その他」ブロックが開いていて、親フィールドがエラーのとき：箱も赤く */
.cf7-field.is-touched.is-invalid .cf7-other.is-open {
  border-color: #d93025;
  background-color: rgba(217,48,37,.04);
}

/* （任意）checkbox/radioの塊自体も赤くする（PCでも分かりやすい） */
.cf7-field.is-touched.is-invalid:has(.wpcf7-list-item) {
  padding: 12px 12px;
  border-radius: 12px;
  background-color: rgba(217,48,37,.04);
}

/* :has が効かないブラウザ向けの保険（安全に広めに当てる版）
   ※気になる場合は外してOK */
.cf7-field.is-touched.is-invalid .wpcf7-list-item-label {
  color: #d93025;
}