/* ===================================================================
 * お問い合わせフォーム（Contact Form 7）用カスタムCSS
 * =================================================================== */

/* フォーム全体の間隔調整 */
.wpcf7-form p {
  margin-bottom: 24px;
}

/* ラベル（項目名）のスタイル */
.wpcf7-form label {
  font-weight: bold;
  color: #333;
  font-size: 16px;
  display: block; /* ラベルをブロック要素にして改行を確実にする */
  margin-bottom: 8px;
}

/* 入力欄（input, textarea, select）共通のスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  background-color: #fff;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* 入力欄がフォーカスされた時のスタイル */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: #51b431; /* あなたのサイトのメインカラー */
  box-shadow: 0 0 0 2px rgba(81, 180, 49, 0.2);
  outline: none;
}

/* テキストエリアの高さを調整 */
.wpcf7-form textarea {
  height: 180px;
}

.wpcf7-form br {
  display: none;
}

/* 補足説明テキスト（smallタグ）のスタイル */
.wpcf7-form small {
  display: block;
  font-size: 13px;
  color: #666;
  font-weight: normal;
  margin-top: 6px;
  font-style: italic;
}

/* 送信ボタンのスタイル */
.wpcf7-form .wpcf7-submit {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 32px auto 0;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #51b431; /* あなたのサイトのメインカラー */
  border: none;
  border-radius: 4px; /* 角を丸くしてモダンな印象に */
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

/* 送信ボタンにマウスが乗った時のスタイル */
.wpcf7-form .wpcf7-submit:hover {
  background-color: #459a29; /* 少し暗い色に */
}

/* 送信ボタンをクリックした時のスタイル */
.wpcf7-form .wpcf7-submit:active {
  transform: translateY(1px);
}

/* --- レスポンシブ対応 --- */
/* スマートフォン表示（幅600px以下）の場合 */
@media screen and (max-width: 599px) {
  .wpcf7-form label {
    font-size: 15px;
  }

  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="url"],
  .wpcf7-form textarea,
  .wpcf7-form select {
    padding: 10px;
    font-size: 15px;
  }

  .wpcf7-form .wpcf7-submit {
    font-size: 16px;
    padding: 12px 20px;
  }
}