/* ============================================================
   TOPPAN Colorer お問い合わせフォーム 改善版CSS
   ============================================================ */

/* ---------- フォーム全体 ---------- */
.wpcf7 {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  box-sizing: border-box;
}

/* ---------- 各フィールドのグループ間余白 ---------- */
.wpcf7 p,
.wpcf7 .wpcf7-form-group {
  margin-bottom: 28px !important;
  padding: 0 !important;
}

/* ---------- ラベル ---------- */
.wpcf7 label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

/* ---------- 必須バッジ ---------- */
.wpcf7 label .required-label,
.wpcf7 label abbr,
/* CF7が自動付与するspan対策 */
.wpcf7 .wpcf7-validates-as-required ~ .required-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8001c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-style: normal;
  text-decoration: none !important;
}

/* 「*必須」テキストをバッジ風に見せる汎用対応 */
.wpcf7 label > span {
  display: inline-flex;
  align-items: center;
  background: #e8001c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

/* ---------- 入力フィールド共通 ---------- */
.wpcf7 .ob-input,
.wpcf7 input[type="text"].ob-input,
.wpcf7 input[type="email"].ob-input,
.wpcf7 input[type="tel"].ob-input,
.wpcf7 input[type="url"].ob-input,
.entry .wpcf7 input[type="text"],
.entry .wpcf7 input[type="email"],
.entry .wpcf7 input[type="tel"],
.entry .wpcf7 input[type="url"] {
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  padding: 0 16px !important;
  font-size: 0.95rem !important;
  color: #1a1a1a !important;
  background: #fafafa !important;
  border: 1.5px solid #d8d8d8 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin-top: 0 !important;
}

.wpcf7 .ob-input:focus,
.entry .wpcf7 input[type="text"]:focus,
.entry .wpcf7 input[type="email"]:focus,
.entry .wpcf7 input[type="tel"]:focus,
.entry .wpcf7 input[type="url"]:focus {
  border-color: #1a6ab1 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(26, 106, 177, 0.14) !important;
}

/* ---------- テキストエリア ---------- */
.wpcf7 .ob-textarea,
.wpcf7 textarea.ob-textarea,
.entry .wpcf7 textarea {
  display: block !important;
  width: 100% !important;
  min-height: 180px !important;
  padding: 14px 16px !important;
  font-size: 0.95rem !important;
  color: #1a1a1a !important;
  background: #fafafa !important;
  border: 1.5px solid #d8d8d8 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
  outline: none !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  line-height: 1.75 !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  font-family: inherit !important;
  margin-top: 0 !important;
}

.wpcf7 .ob-textarea:focus,
.entry .wpcf7 textarea:focus {
  border-color: #1a6ab1 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(26, 106, 177, 0.14) !important;
}

/* ---------- プレースホルダー ---------- */
.wpcf7 .ob-input::placeholder,
.wpcf7 .ob-textarea::placeholder,
.entry .wpcf7 input::placeholder,
.entry .wpcf7 textarea::placeholder {
  color: #bbb !important;
  font-size: 0.88rem !important;
}

/* ---------- 任意フィールドの区別（URLなど） ---------- */
/* ラベルに「任意」を付与したい場合は label の after で表示 */
.wpcf7-optional-label::after {
  content: "任意";
  display: inline-flex;
  align-items: center;
  background: #e0e0e0;
  color: #666;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: 0.03em;
}

/* ---------- 送信ボタン ---------- */
.wpcf7 .ob-submit,
.wpcf7 input[type="submit"].ob-submit,
.entry .wpcf7 input[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 58px !important;
  margin-top: 32px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  background: #f5c800 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(245, 200, 0, 0.35) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
  letter-spacing: 0.08em !important;
  -webkit-appearance: none !important;
}

.wpcf7 .ob-submit:hover,
.entry .wpcf7 input[type="submit"]:hover {
  background: #e6bb00 !important;
  box-shadow: 0 6px 16px rgba(245, 200, 0, 0.45) !important;
  transform: translateY(-1px) !important;
}

.wpcf7 .ob-submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(245, 200, 0, 0.3) !important;
}

/* ---------- バリデーションエラー ---------- */
.wpcf7 .wpcf7-not-valid-tip {
  display: block !important;
  margin-top: 6px !important;
  font-size: 0.78rem !important;
  color: #e8001c !important;
  padding-left: 2px !important;
}

.wpcf7 .wpcf7-not-valid.ob-input,
.wpcf7 .wpcf7-not-valid.ob-textarea {
  border-color: #e8001c !important;
  background: #fff5f5 !important;
}

/* ---------- 送信ステータスメッセージ ---------- */
.wpcf7 .wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 14px 18px !important;
  font-size: 0.875rem !important;
  border-radius: 6px !important;
  border: none !important;
  text-align: center !important;
}
.wpcf7 .wpcf7-mail-sent-ok {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-spam-blocked,
.wpcf7 .wpcf7-validation-errors {
  background: #fdecea !important;
  color: #c62828 !important;
}

/* ---------- Cocoon リセット ---------- */
.wpcf7 form.wpcf7-form {
  padding: 0 !important;
}
.wpcf7 .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
}

/* ---------- スマホ対応 ---------- */
@media screen and (max-width: 480px) {
  .wpcf7 {
    padding: 0 12px;
  }
  .wpcf7 p {
    margin-bottom: 22px !important;
  }
  .wpcf7 .ob-input,
  .entry .wpcf7 input[type="text"],
  .entry .wpcf7 input[type="email"],
  .entry .wpcf7 input[type="tel"],
  .entry .wpcf7 input[type="url"] {
    height: 48px !important;
  }
  .wpcf7 .ob-submit,
  .entry .wpcf7 input[type="submit"] {
    height: 54px !important;
    font-size: 1rem !important;
  }
}