/**
 * Contact Form 7 スタイルオーバーライド
 * 
 * CF7のフォームに既存のLPデザインを適用するためのCSS。
 * CF7フォーム作成時、以下のHTMLクラスを付与してください。
 */

/* CF7ラッパー */
.cf7-form-wrap {
  margin-top: 0;
}

.cf7-form-wrap .wpcf7 {
  width: 100%;
}

/* 入力フィールド共通 */
.cf7-form-wrap .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-family: 'Noto Sans JP', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  box-sizing: border-box;
}

.cf7-form-wrap .wpcf7-form-control:not(.wpcf7-submit):focus {
  border-color: #4FB6D9;
  box-shadow: 0 0 0 3px rgba(79, 182, 217, 0.12);
  outline: none;
}

/* テキストエリア */
.cf7-form-wrap textarea.wpcf7-form-control {
  min-height: 140px;
  resize: vertical;
}

/* セレクトボックス */
.cf7-form-wrap select.wpcf7-form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ラベル */
.cf7-form-wrap label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

/* 送信ボタン */
.cf7-form-wrap .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: #1B4A7A;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}

.cf7-form-wrap .wpcf7-submit:hover {
  background: #153d66;
}

/* バリデーションエラー */
.cf7-form-wrap .wpcf7-not-valid-tip {
  font-size: 0.8125rem;
  color: #E85A6B;
  margin-top: 4px;
}

.cf7-form-wrap .wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
}

/* 送信成功メッセージ */
.cf7-form-wrap .wpcf7-mail-sent-ok {
  border-color: #4FB6D9;
  background: rgba(79, 182, 217, 0.08);
  color: #1B4A7A;
}

/* フォームグリッド - CF7で<div class="form-row">を使う場合 */
.cf7-form-wrap .form-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .cf7-form-wrap .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.cf7-form-wrap .form-group {
  margin-bottom: 16px;
}

/* スピナー非表示 */
.cf7-form-wrap .wpcf7-spinner {
  display: none;
}