/* ========================================
   Contact Form 7 カスタムCSS
   彩り文字協会 デザイン適用
   ======================================== */

/* --- イントロテキスト --- */
.contact-intro {
  font-size: 14px;
  color: #333;
  line-height: 2.2;
  letter-spacing: 0.03em;
  text-align: center;
  margin-bottom: 80px;
}

/* --- フォーム全体 --- */
.contact-form {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* --- CF7のwrapperをブロック表示 --- */
.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* ========================================
   入力欄・テキストエリア：枠線をピンクに統一
   ======================================== */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form .wpcf7-text,
.contact-form .wpcf7-email,
.contact-form .wpcf7-tel,
.contact-form .form-input {
  border: 1px solid #e8b4b8 !important;
  border-radius: 4px !important;
  outline: none !important;
  box-shadow: none !important;
}

.contact-form textarea,
.contact-form .wpcf7-textarea,
.contact-form .form-textarea {
  border: 1px solid #e8b4b8 !important;
  border-radius: 4px !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical !important;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
  border-color: #e28c93 !important;
  box-shadow: none !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #aaa !important;
}

/* ========================================
   ラジオボタン：丸の枠線をピンクに
   ======================================== */
.contact-form input[type="radio"],
.contact-form .wpcf7-radio input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 1.5px solid #e28c93 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
}

.contact-form input[type="radio"]:checked,
.contact-form .wpcf7-radio input[type="radio"]:checked {
  background: radial-gradient(circle, #e28c93 40%, transparent 40%) !important;
}

/* ========================================
   CF7 v6.x のスクリーンリーダー用エリアを非表示
   （CF7デフォルトCSSを無効化したため自前で隠す）
   ======================================== */
.wpcf7 .screen-reader-response {
  display: none !important;
}

/* ========================================
   CF7デフォルト枠線・二重線を削除
   ======================================== */
.contact-form .wpcf7,
.contact-form .wpcf7 form,
.contact-form .wpcf7-form,
.contact-form fieldset,
.contact-form legend {
  border: none !important;
  outline: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* レスポンスエリアは送信前は非表示 */
.contact-form .wpcf7-response-output,
.wpcf7-response-output {
  border: none !important;
}

/* CF7が挿入するhr要素（区切り線）を非表示 */
.contact-form hr,
.contact-form .wpcf7 hr {
  display: none !important;
}

/* CF7のform要素直下の最初のp・divの上部余白をリセット */
.contact-form .wpcf7-form > p:first-child,
.contact-form .wpcf7-form > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* ========================================
   送信ボタン
   ======================================== */

/* form-submitエリアを中央寄せ */
.contact-form .form-submit {
  text-align: center;
  padding-top: 20px;
}

/* btn-wrap：ピンクの丸ボタン */
.contact-form .btn-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 280px !important;
  padding: 16px 60px !important;
  background: #e28c93 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.2s !important;
  position: relative !important;
}

.contact-form .btn-wrap:hover {
  background: #d07580 !important;
  transform: translateY(-2px) !important;
}

.contact-form .btn-wrap:hover::before {
  right: 30px !important;
}

/* 矢印の白丸：絶対配置で右端に固定（テキストの中央揃えに影響させない） */
.contact-form .btn-wrap::after {
  content: '' !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  pointer-events: none !important;
}

/* 矢印SVG：白丸の左からはみ出して丸に入り込む */
.contact-form .btn-wrap::before {
  content: '' !important;
  position: absolute !important;
  right: 35px !important;
  transition: right 0.2s !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 6px !important;
  background-image: url('../images/arrow.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* btn-wrap内のpタグをdisplay:contentsにして直接flexアイテムにする */
.contact-form .btn-wrap p {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* btn-submit-inner（CF7はinput[type="submit"]を生成する） */
.contact-form .btn-submit-inner,
.contact-form input.btn-submit-inner,
.contact-form input[type="submit"].btn-submit-inner {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-family: 'Zen Old Mincho', serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  width: auto !important;
  flex: 1 !important;
  text-align: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* CF7スピナー（ローディング丸）を非表示 */
.contact-form .wpcf7-spinner,
.wpcf7-spinner {
  display: none !important;
}

/* --- バリデーションエラー --- */
.contact-form .wpcf7-not-valid-tip {
  color: #e28c93 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
  display: block !important;
}

/* --- 送信結果メッセージ：通常は非表示 --- */
.wpcf7-response-output,
.contact-form .wpcf7-response-output {
  display: none !important;
}

/* 送信成功・サーバーエラー時のみ表示 */
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
  display: block !important;
  margin-top: 24px !important;
  padding: 12px 20px !important;
  border-radius: 4px !important;
  border: none !important;
  font-size: 14px !important;
  text-align: center !important;
  font-family: 'Zen Old Mincho', serif !important;
}

/* --- スマホ対応 --- */
@media (max-width: 767px) {
  .contact-intro {
    text-align: left;
    margin-bottom: 48px;
  }
  .contact-form {
    gap: 28px;
  }
  .contact-form .btn-wrap {
    width: 100% !important;
    max-width: 280px !important;
  }
}