@charset "UTF-8";

/* ===== お問い合わせ共通設定 ===== */
@charset "UTF-8";

/* 1. フォーム全体のレイアウト */
.contact-form-wrapper {
  width: 100%;
}

/* 2. 項目名（ラベル）の設定 */
.contact-form-wrapper label {
  display: block;
  margin-top: 20px;
  margin-bottom: 8px;
  font-weight: bold;
}

/* 3. 入力欄（テキスト・メール・メッセージ共通） */
/* [text*] [email*] [textarea] などに反応 */
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper textarea {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-sizing: border-box;
}

/* 4. Contact Form 7特有の崩れ対策（重要） */
/* 自動で入るspanタグが横幅を邪魔するのを防ぐ */
.contact-form-wrapper .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* チェックボックス（回答希望）を横並びにする設定 */
.contact-form-wrapper .wpcf7-checkbox {
  display: flex;
  gap: 20px;
  margin-bottom: 1.2em;
}

/* 5. 送信ボタンの設定 */
.contact-form-wrapper [type="submit"] {
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  padding: 20px 20px;
  border-radius: 12px;
  cursor: pointer;
  width: 200px;
  max-width: 100%;
  display: block;
  margin: 40px auto 0;
  font-size: 1em;
  transition: opacity 0.3s;
}

.contact-form-wrapper [type="submit"]:hover {
  opacity: 0.8;
}

/* 6. スマホ版の微調整 */
@media screen and (max-width: 767px) {
  .contact-form-wrapper input[type="text"],
  .contact-form-wrapper input[type="email"],
  .contact-form-wrapper textarea {
    max-width: 100%;
  }
}