/* お問い合わせフォーム全体 */
#contact {
  padding: 40px 16px;
}

#contact .wpcf7 {
  max-width: 480px;           /* センターに細めのフォーム */
  margin: 0 auto;
}

/* グレーのカードっぽい背景 */
#contact .wpcf7-form {
  /* background-color: #f0f0f0;  */
  padding: 24px 20px;
  border-radius: 4px;
  box-sizing: border-box;
}

.contact_title-en {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
}


.contact_title {
    text-align: center;
    font-size: 28px;
    font-weight: 500;
}

.privacy-text {
    font-size: 14px;
    font-weight: 400;
}


/* 隠しフィールドは非表示でOK */
#contact .hidden-fields-container {
  display: none;
}

/* 各項目の間隔 */
#contact .wpcf7-form p {
  margin: 0 0 16px;
}

/* ラベル（「お名前」「会社名」など） */
#contact .wpcf7-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
  text-align: left;
}

/* テキスト入力・メール・電話・セレクト・テキストエリア共通 */
#contact .wpcf7-form input[type="text"],
#contact .wpcf7-form input[type="email"],
#contact .wpcf7-form select,
#contact .wpcf7-form textarea {
width: 100%;
    height: 33px;
    box-sizing: border-box;
    padding: 7px 12px;
  font-size: 14px;
  border: 1px solid #dddddd;
  border-radius: 2px;
  background-color: #ffffff;
  outline: none;
}

/* フォーカス時の枠色 */
#contact .wpcf7-form input[type="text"]:focus,
#contact .wpcf7-form input[type="email"]:focus,
#contact .wpcf7-form select:focus,
#contact .wpcf7-form textarea:focus {
  border-color: #999999;
}

/* テキストエリアを少し高めに */
#contact .wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* チェックボックス行 */
#contact .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* 送信ボタン */
#contact .wpcf7-form input[type="submit"] {
  width: 100%;
  box-sizing: border-box;
padding: 21px 0;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 3px;
    background-color: #BD1E2F;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#contact .wpcf7-form input[type="submit"]:hover {
background-color: #BD1E2F;
}

/* エラーメッセージなどの枠をスッキリ */
#contact .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 8px 10px;
  font-size: 13px;
}


/* ===== 確認ステップ用の表示切り替え ===== */

/* 確認表示エリア（最初は非表示） */
#contact .contact-confirm-view {
  display: none;
  background-color: #f0f0f0;
  padding: 16px 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
}

#contact .contact-confirm-view p {
  margin: 0 0 8px;
}

/* ボタンまわり */
#contact .contact-buttons {
  /* display: flex; */
  gap: 8px;
  margin-top: 16px;
}

#contact .contact-buttons .contact-confirm-btn,
#contact .contact-buttons .contact-back-btn,
#contact .contact-buttons .contact-submit {
  flex: 1;
  width: 100%;
    padding: 20px;
    text-align: center;
    font-size: 16px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

/* 各ボタンの色 */
#contact .contact-confirm-btn {
  background-color: #333;
  color: #fff;
}

#contact .contact-back-btn {
  background-color: #cccccc;
  color: #000;
}

/* 初期状態：送信ボタン・戻るボタンを隠す */
#contact .contact-submit,
#contact .contact-back-btn {
  display: none;
}

/* ==== 確認モード(is-confirm)のとき ==== */

#contact .wpcf7-form.is-confirm .contact-form-body {
  display: none;               /* 入力欄を隠す */
}

#contact .wpcf7-form.is-confirm .contact-confirm-view {
  display: block;              /* 確認内容を表示 */
}

#contact .wpcf7-form.is-confirm .contact-confirm-btn {
  display: none;               /* 確認ボタンを隠す */
}

#contact .wpcf7-form.is-confirm .contact-submit,
#contact .wpcf7-form.is-confirm .contact-back-btn {
  display: block;              /* 送信・修正ボタンを表示 */
}


/* ▼ お問い合わせ種別：ドロップダウンデザイン */
#contact .select-wrap {
  margin-top: -14px;
  position: relative;
  display: block;
}

#contact .select-wrap select {
  width: 100%;
  box-sizing: border-box;
padding: 7px 0px 7px 9px;
height: 35px;
margin-bottom: -10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;

  /* ブラウザ標準の矢印を消す */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

    /* ▼ を背景画像として描画（エラーが出ても位置が動かない） */
  background-image:
    linear-gradient(45deg, transparent 50%, #555 50%),
    linear-gradient(135deg, #555 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;

}

/* IE対策（あれば） */
#contact .select-wrap select::-ms-expand {
  display: none;
}


/* エラーメッセージとの間に少し余白 */
#contact .select-wrap .wpcf7-not-valid-tip {
  margin-top: 13px;
  display: block;
}



/* #contact .select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 74%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;  
} */

/* ホバー時の軽いアクセント */
#contact .select-wrap select:hover {
  border-color: #999;
}






/* ===== レスポンシブ調整 ===== */

/* 横幅が広いときはフォームを少し広げる */
@media (min-width: 768px) {
  #contact {
    padding: 60px 0;
  }

  #contact .wpcf7 {
    max-width: 520px;
  }

  #contact .contact-buttons .contact-confirm-btn, #contact .contact-buttons .contact-back-btn, #contact .contact-buttons .contact-submit {
    flex: 1;
    width: 100%;
  }

}