@charset "UTF-8";

/* =====================================
   フォーム: 共通コンポーネント（BEM命名規則）
   ===================================== */

/* Contact Form 7 基本スタイル */

/* フォーム全体: 可読幅（560px）の白カードに載せるモダンデザイン（CVR改善 + front-page CONTACT と同じデザイン言語） */
.wpcf7 {
  max-width: 560px;
  margin: 24px auto 0; /* 下余白は親セクションの padding-bottom で確保（margin だと親の外にはみ出し body の黒背景が見える） */
  padding: 40px 32px;
  background-color: var(--color-bg-white, #fff);
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgb(0 0 0 / 6%);
  box-sizing: border-box;
  text-align: left;
}

.wpcf7-form {
  font-family: var(--font-family-base, "YakuHanJP", "Noto Sans Japanese", "Noto Sans", "Noto Sans CJK JP", sans-serif);
}

/* CF7 はフィールドを <p> で包むため、項目間の縦リズムはここで確保（CVR改善） */
.wpcf7-form p {
  margin: 0 0 20px !important;
}

/* 必須ラベル */
.contactform7-span,
.form__required {
  display: inline-block;
  background-color: var(--color-primary, #cf0d37);
  padding: 2px 4px;
  margin-bottom: 4px;
  color: var(--color-white, #fff);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* フォーム出力メッセージ: 素のテキストではなくアラートボックスで明示（視認性・バランス改善） */
.wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 12px 16px !important;
  border: 1px solid var(--color-error, #d32f2f) !important;
  border-radius: 8px;
  background-color: rgb(211 47 47 / 5%);
  color: var(--color-error, #d32f2f);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* 送信成功時は緑のアラートボックスに（CF7 は form に .sent を付与する） */
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--color-success, #2e7d32) !important;
  background-color: rgb(46 125 50 / 6%);
  color: var(--color-success, #2e7d32);
}

/* 成功メッセージ */
.wpcf7-mail-sent-ok {
  color: var(--color-success, #2e7d32) !important;
}

/* エラーメッセージ */
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  color: var(--color-error, #d32f2f) !important;
}

/* 入力フィールドの共通スタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--color-bg-white, #fff);
  border: 1px solid rgb(0 0 0 / 25%); /* --color-border(#ddd) は背景と同化するため濃いめに（CVR改善） */
  border-radius: 8px;
  font-size: 16px;
  font-family: var(--font-family-base, "YakuHanJP", "Noto Sans Japanese", "Noto Sans", "Noto Sans CJK JP", sans-serif);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--color-primary, #cf0d37);
  box-shadow: var(--focus-ring-primary, 0 0 0 2px rgb(207 13 55 / 25%)); /* 10%では視認困難のため強化（CVR改善） */
  outline: none;
}

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

/* セレクトボックス */
.wpcf7-form select {
  cursor: pointer;
  background-color: var(--color-white, #fff);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
}

/* バリデーションエラー */
.wpcf7-form .wpcf7-not-valid {
  border-color: var(--color-error, #d32f2f);
}

/* フィールド直下のエラー文言: 入力欄との紐付きがわかる余白・読みやすいサイズに調整 */
.wpcf7-form .wpcf7-not-valid-tip {
  color: var(--color-error, #d32f2f);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
  display: block;
}

/* チェックボックス・ラジオボタン */
.wpcf7-form .wpcf7-list-item {
  margin-left: 0;
  margin-right: 16px;
  display: inline-block;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  margin-right: 6px;

  /* ブラウザ標準の極小サイズはタップしづらいため拡大 + ブランド色（CVR改善） */
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary, #cf0d37);
  vertical-align: middle;
}

/* フォームラベル: 小さめ太字でモダンな見た目に */
.wpcf7-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--color-text, #333);
  font-size: 13px;
  letter-spacing: 0.03em;
}

/* Contact-Recruit専用スタイル */
.contact-recruit .text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text, #333);
  margin-bottom: 16px;
}

/* フォームグループ */
.form-group {
  margin-bottom: 24px;
}

.form-group__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--color-text, #333);
  font-size: 14px;
}

.form-group__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group__input:focus {
  border-color: var(--color-primary, #cf0d37);
  box-shadow: var(--focus-ring-primary, 0 0 0 2px rgb(207 13 55 / 25%));
  outline: none;
}

.form-group__error {
  color: var(--color-error, #d32f2f);
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* ファイルアップロード */
.wpcf7-form input[type="file"] {
  padding: 8px;
  border: 1px dashed var(--color-border, #ddd);
  border-radius: 4px;
  cursor: pointer;
}

/* プライバシーポリシー同意 */
.wpcf7-form .wpcf7-acceptance {
  margin: 16px 0;
}

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

/* カード幅いっぱいの大型ボタン（タップターゲット最大化 + モダンな見た目） */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit,
input.wpcf7-submit {
  display: block !important;
  background-color: var(--color-primary, #cf0d37) !important;
  color: var(--color-text-white, #fff) !important;
  font-size: 16px !important;
  font-weight: bold !important;
  padding: 14px 32px !important;
  border: none !important;
  border-radius: 8px !important;
  text-align: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  margin: 24px auto 0 !important;
  box-shadow: var(--shadow-cta) !important;
  width: 100% !important;
  letter-spacing: normal !important; /* 旧・黒ボタン定義（contact.css）の字間 0.5em 混入を防止 */
}

/* 送信中フィードバック: CF7 が form に付与する .submitting を利用（JS不要） */
.wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.6 !important;
  pointer-events: none !important;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover,
input.wpcf7-submit:hover {
  background-color: var(--color-primary-dark, #b00c2f) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-cta-hover) !important;
}

.wpcf7-form input[type="submit"]:active,
.wpcf7-form .wpcf7-submit:active,
input.wpcf7-submit:active {
  transform: translateY(0) !important;
  box-shadow: var(--shadow-cta-active) !important;
}

/* 送信ボタンコンテナ（中央配置） */
.wpcf7-form .wpcf7-submit-container,
.wpcf7-form p:has(.wpcf7-submit),
.wpcf7-form p:has(input[type="submit"]) {
  text-align: center !important;
  margin-top: 32px !important;
}

/* =====================================
   レスポンシブ: モバイル対応
   ===================================== */

@media (width <= 768px) {
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="url"],
  .wpcf7-form input[type="number"],
  .wpcf7-form textarea,
  .wpcf7-form select {
    font-size: 16px; /* iOS のズームを防ぐため16px以上 */
  }

  .form-group {
    margin-bottom: 20px;
  }

  /* SP ではカードの余白を詰める（送信ボタンは常時フル幅のため個別対応不要） */
  .wpcf7 {
    padding: 24px 16px;
  }
}