/* =========================================================================
   お問い合わせフォーム（Contact Form 7）直書きCSS
   ※ style.scss のコンパイルでは上書きされない独立ファイル。
     functions.php で style.css の後に読み込み。
   ========================================================================= */

/* 必須バッジ：フォーム内ラベルに <span class="req">必須</span> を入れると表示 */
#contact .cform label .req,
#contact .cform .req {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  background: #ff6b8a;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* 任意バッジ：ラベルに <span class="any">任意</span> を入れると表示 */
#contact .cform label .any,
#contact .cform .any {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  background: #8aa3bf;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* 任意の必須アスタリスク <span class="req-mark">*</span> */
#contact .cform .req-mark {
  color: #ff6b8a;
  margin-left: 4px;
}

/* 入力エラーのある項目（赤枠） */
#contact .cform .wpcf7-not-valid {
  border-color: #ff6b8a !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 138, 0.15) !important;
}

/* 項目下のエラーメッセージ */
#contact .cform .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #ff6b8a;
  font-size: 0.78rem;
  font-weight: 500;
}

/* フォーム下部の結果メッセージ（共通） */
#contact .cform .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(11, 58, 91, 0.12);
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.6;
  text-align: center;
}

/* 入力エラー時／同意未チェック時（赤） */
#contact .cform .wpcf7-form.invalid .wpcf7-response-output,
#contact .cform .wpcf7-form.unaccepted .wpcf7-response-output,
#contact .cform .wpcf7-form.spam .wpcf7-response-output {
  border-color: #ff6b8a !important;
  background: rgba(255, 107, 138, 0.08);
  color: #c2385a;
}

/* 送信成功時（シアン） */
#contact .cform .wpcf7-form.sent .wpcf7-response-output {
  border-color: #3da9dc !important;
  background: rgba(95, 210, 245, 0.1);
  color: #0b3a5b;
}

/* 送信失敗（メール送信エラー）時（黄） */
#contact .cform .wpcf7-form.failed .wpcf7-response-output,
#contact .cform .wpcf7-form.aborted .wpcf7-response-output {
  border-color: #e0a100 !important;
  background: rgba(224, 161, 0, 0.08);
  color: #8a6400;
}

/* チェックボックス・ラジオはインライン化 */
#contact .cform .wpcf7-checkbox .wpcf7-list-item,
#contact .cform .wpcf7-radio .wpcf7-list-item {
  display: inline-block;
  margin: 0 16px 6px 0;
}
#contact .cform .wpcf7-checkbox .wpcf7-list-item input,
#contact .cform .wpcf7-radio .wpcf7-list-item input {
  width: auto;
  margin-right: 6px;
}

/* 入力欄の基本スタイル（万一 style.css 側が未反映でも崩れないよう保険） */
#contact .cform input[type=text],
#contact .cform input[type=email],
#contact .cform input[type=tel],
#contact .cform input[type=url],
#contact .cform input[type=number],
#contact .cform textarea,
#contact .cform select {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(11, 58, 91, 0.12);
  border-radius: 5px;
  padding: 13px 14px;
  color: #0b3a5b;
  font-family: inherit;
  font-size: 0.92rem;
  transition: 0.25s;
}
#contact .cform input:focus,
#contact .cform textarea:focus,
#contact .cform select:focus {
  outline: none;
  border-color: #3da9dc;
  box-shadow: 0 0 0 3px rgba(95, 210, 245, 0.15);
}