/* =========================================================
   面談エントリーフォーム（/buclp/・Contact Form 7）
   CF7フォームテンプレート内の .mf- クラスに対して適用
   functions.php で /buclp/ のみ読み込み
   ========================================================= */

.wpcf7 .wpcf7-form:has(.mf-field) {
  --mf-navy: #16264A;
  --mf-text: #1F2A3D;
  --mf-text-sub: #3A4458;
  --mf-muted: #5A6478;
  --mf-placeholder: #8A93A6;
  --mf-border: #CBD3E1;
  --mf-line: #E2E7EF;
  --mf-bg: #F4F6FA;
  --mf-selected-bg: #EEF2F9;
  --mf-accent: #D2600A;      /* 送信ボタン */
  --mf-required: #B85300;    /* 必須バッジ */
  --mf-optional-bg: #E6EAF1; /* 任意バッジ */
  --mf-error: #C62828;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 64px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(22, 38, 74, .04), 0 12px 32px rgba(22, 38, 74, .06);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mf-text);
  text-align: left;
}
.wpcf7-form:has(.mf-field) *,
.wpcf7-form:has(.mf-field) *::before,
.wpcf7-form:has(.mf-field) *::after { box-sizing: border-box; }
.wpcf7-form:has(.mf-field) .hidden-fields-container { display: none; }
.wpcf7-form:has(.mf-field) p { margin: 0; }
.wpcf7-form:has(.mf-field) a { color: var(--mf-navy); }
.wpcf7-form:has(.mf-field) a:hover { color: var(--mf-required); }
.wpcf7-form:has(.mf-field) .wpcf7-form-control-wrap { display: block; }

/* ---------- 項目 ---------- */
.wpcf7-form .mf-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.wpcf7-form .mf-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--mf-navy);
}
.wpcf7-form legend.mf-label { margin-bottom: 10px; }

.wpcf7-form .mf-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.wpcf7-form .mf-badge--required { background: var(--mf-required); color: #FFFFFF; }
.wpcf7-form .mf-badge--optional { background: var(--mf-optional-bg); color: var(--mf-text-sub); }

.wpcf7-form .mf-label-note {
  font-size: 13px;
  font-weight: 400;
  color: var(--mf-muted);
}
.wpcf7-form .mf-help {
  margin: 0;
  font-size: 13px;
  color: var(--mf-muted);
}

/* ---------- 入力欄 ---------- */
.wpcf7-form .mf-input {
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 18px;
  border: 1.5px solid var(--mf-border);
  border-radius: 8px;
  background: #FFFFFF;
  font: inherit;
  font-size: 16px; /* iOSでのズーム防止のため16px以上 */
  color: var(--mf-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.wpcf7-form .mf-input::placeholder { color: var(--mf-placeholder); }
.wpcf7-form .mf-input:focus {
  border-color: var(--mf-navy);
  box-shadow: 0 0 0 4px rgba(22, 38, 74, .12);
}
.wpcf7-form .mf-input.wpcf7-not-valid { border-color: var(--mf-error); }
.wpcf7-form .mf-input--half { max-width: 420px; }

/* エラーメッセージ */
.wpcf7-form:has(.mf-field) .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mf-error);
}

/* セレクト（矢印付き） */
.wpcf7-form .mf-select {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.wpcf7-form .mf-select::after {
  content: "";
  position: absolute;
  top: 28px; /* 入力欄の高さの半分（エラー表示が出ても矢印がずれないよう固定） */
  right: 20px;
  width: 8px;
  height: 8px;
  border-right: 2.5px solid var(--mf-navy);
  border-bottom: 2.5px solid var(--mf-navy);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.wpcf7-form .mf-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.wpcf7-form .mf-select select:has(option[value=""]:checked) { color: var(--mf-muted); }

/* 姓・名などの2分割 */
.wpcf7-form .mf-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.wpcf7-form .mf-split__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wpcf7-form .mf-split__item > label {
  flex-shrink: 0;
  width: 32px;
  line-height: 56px;
  font-size: 14px;
  color: var(--mf-muted);
}
.wpcf7-form .mf-split__item .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; }

/* 生年月日 */
.wpcf7-form .mf-date {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.wpcf7-form .mf-date .mf-select { width: 130px; }
.wpcf7-form .mf-date .mf-select--year { width: 180px; }
.wpcf7-form .mf-date__unit {
  margin-right: 12px;
  line-height: 56px;
  font-size: 15px;
}
.wpcf7-form .mf-date__unit:last-child { margin-right: 0; }

/* ---------- ラジオ・チェックボックス（ボタン型） ---------- */
.wpcf7-form .mf-options { --mf-cols: 3; }
.wpcf7-form .mf-options--2 { --mf-cols: 2; }
.wpcf7-form .mf-options--3 { --mf-cols: 3; }
.wpcf7-form .mf-options .wpcf7-form-control {
  display: grid;
  grid-template-columns: repeat(var(--mf-cols), minmax(0, 1fr));
  gap: 12px;
}
.wpcf7-form .mf-options .wpcf7-list-item { display: block; margin: 0; }
.wpcf7-form .mf-options .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1.5px solid var(--mf-border);
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.wpcf7-form .mf-options .wpcf7-list-item label:hover { border-color: var(--mf-navy); }
.wpcf7-form .mf-options .wpcf7-list-item input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--mf-navy);
}
/* 単一選択のチェックボックス（exclusive・任意のラジオ代わり）はラジオボタンの見た目にする */
.wpcf7-form .mf-options .wpcf7-exclusive-checkbox input {
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid #767676;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
}
.wpcf7-form .mf-options .wpcf7-exclusive-checkbox input:checked {
  border-color: var(--mf-navy);
  background: radial-gradient(var(--mf-navy) 0 4px, #FFFFFF 4.5px);
}
.wpcf7-form .mf-options .wpcf7-list-item label:has(input:checked) {
  border-color: var(--mf-navy);
  background: var(--mf-selected-bg);
  font-weight: 700;
  color: var(--mf-navy);
}
.wpcf7-form .mf-options .wpcf7-list-item label:has(input:focus-visible) {
  box-shadow: 0 0 0 4px rgba(22, 38, 74, .12);
}
.wpcf7-form .mf-options .wpcf7-not-valid .wpcf7-list-item label { border-color: var(--mf-error); }

/* ---------- 送信エリア ---------- */
.wpcf7-form .mf-divider {
  height: 1px;
  margin: 8px 0 0;
  border: none;
  background: var(--mf-line);
}
.wpcf7-form .mf-submit-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 個人情報の取り扱いへの同意 */
.wpcf7-form .mf-agree .wpcf7-list-item { display: block; margin: 0; }
.wpcf7-form .mf-agree label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.wpcf7-form .mf-agree input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--mf-navy);
}
.wpcf7-form .mf-agree a { font-weight: 700; }

/* 送信ボタン */
.wpcf7-form .mf-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 400px;
  height: 72px;
  margin: 8px 0 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--mf-accent);
  box-shadow: 0 8px 20px rgba(210, 96, 10, .28);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #FFFFFF;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
/* 矢印アイコン（CF7のテンプレートにSVGを書かずに表示） */
.wpcf7-form .mf-submit::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wpcf7-form .mf-submit:hover { filter: brightness(.92); }
.wpcf7-form .mf-submit:active { transform: translateY(1px); }
.wpcf7-form .mf-submit:focus-visible {
  outline: 3px solid var(--mf-navy);
  outline-offset: 3px;
}
.wpcf7-form .mf-submit:disabled {
  background: #B4BCCB;
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
  transform: none;
}
/* 送信中のスピナー（CF7がボタン直後に挿入）。高さを打ち消し、ボタン下の余白内に表示 */
.wpcf7-form .mf-submit-area .wpcf7-spinner { margin: -24px 0 0; }

/* 送信結果メッセージ（未表示のときは余白ごと非表示） */
.wpcf7-form .mf-response:has(> .wpcf7-response-output:empty) { display: none; }
.wpcf7-form:has(.mf-field) .wpcf7-response-output {
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.wpcf7-form .mf-response { width: 100%; }

.wpcf7-form .mf-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
  color: var(--mf-muted);
}
.wpcf7-form .mf-note--small { font-size: 12px; line-height: 1.7; }

/* reCAPTCHA v3 のバッジは非表示（フォーム下部に規定の文言を表示しているため） */
.grecaptcha-badge { visibility: hidden; }

/* ---------- スマートフォン ---------- */
@media (max-width: 767px) {
  .wpcf7 .wpcf7-form:has(.mf-field) {
    padding: 32px 20px;
    border-radius: 12px;
    gap: 28px;
  }

  .wpcf7-form .mf-label { font-size: 15px; }

  .wpcf7-form .mf-input { height: 52px; padding: 0 14px; }
  .wpcf7-form .mf-options .wpcf7-list-item label { min-height: 52px; }

  .wpcf7-form .mf-input--half,
  .wpcf7-form .mf-select { max-width: none; }
  .wpcf7-form .mf-select::after { top: 26px; }

  .wpcf7-form .mf-split { gap: 10px; }
  .wpcf7-form .mf-split__item { gap: 8px; }
  .wpcf7-form .mf-split__item > label { width: auto; line-height: 52px; font-size: 13px; }

  .wpcf7-form .mf-date { gap: 6px; }
  .wpcf7-form .mf-date .mf-select,
  .wpcf7-form .mf-date .mf-select--year { width: auto; flex: 1 1 0; min-width: 0; }
  .wpcf7-form .mf-date .mf-select--year { flex-grow: 1.4; }
  .wpcf7-form .mf-date .mf-select select { padding: 0 26px 0 10px; }
  .wpcf7-form .mf-date .mf-select::after { right: 12px; width: 7px; height: 7px; }
  .wpcf7-form .mf-date__unit { margin-right: 4px; line-height: 52px; font-size: 14px; }
  /* 年月日のエラー文は欄が狭く折り返すため、各欄の文言は隠して下にまとめて1行表示（未選択の欄は赤枠で示す） */
  .wpcf7-form .mf-date { flex-wrap: wrap; }
  .wpcf7-form .mf-date .wpcf7-not-valid-tip { display: none; }
  .wpcf7-form .mf-date:has(.wpcf7-not-valid-tip)::after {
    content: "生年月日を選択してください。";
    flex-basis: 100%;
    font-size: 13px;
    font-weight: 700;
    color: var(--mf-error);
  }

  .wpcf7-form .mf-options--3 { --mf-cols: 2; }
  .wpcf7-form .mf-options .wpcf7-list-item label { padding: 0 14px; font-size: 14px; }

  .wpcf7-form .mf-agree label { font-size: 14px; }
  .wpcf7-form .mf-submit { height: 64px; font-size: 18px; }
}