/* ============================================
   CF7フォーム用CSS（サイトデザインシステム準拠）
   余白基準: 20px（PC）/ 4vw（SP）
============================================ */

/* ── リセット：CF7が生成するp/brの余白を除去 ── */
.form-table p {
  margin: 0;
  padding: 0;
}
.form-table br {
  display: none;
}
.form-table .wpcf7-form-control-wrap {
  display: block;
}

/* ── テーブル全体 ── */
.form-table {
  width: 100%;
  border-collapse: collapse;
  font-family:
    "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--black);
  border: 1px solid var(--grey);
}

/* ── th / td 共通 ── */
.form-table th,
.form-table td {
  border: 1px solid var(--grey);
}

/* ── 見出しセル ── */
.form-table th {
  vertical-align: middle;
  text-align: left;
  font-weight: 600;
  background: var(--light-blue);
}
@media (769px <= width) {
  .form-table th {
    width: 220px;
    padding: 20px;
    font-size: 1.5rem;
  }
}

/* ── 入力セル ── */
.form-table td {
  vertical-align: middle;
}
@media (769px <= width) {
  .form-table td {
    padding: 20px 24px;
  }
}

/* ── SP：テーブルブロック化 ── */
@media (width < 769px) {
  .form-table,
  .form-table tbody,
  .form-table tr,
  .form-table th,
  .form-table td {
    display: block;
    width: 100%;
  }
  .form-table {
    border: none;
    border-top: 1px solid var(--grey);
  }
  .form-table th,
  .form-table td {
    border: none;
    border-left: 1px solid var(--grey);
    border-right: 1px solid var(--grey);
  }
  .form-table tr {
    border-bottom: 1px solid var(--grey);
  }
  .form-table th {
    padding: 4vw;
    font-size: 3.733vw;
  }
  .form-table td {
    padding: 3vw 4vw 5vw;
  }
}

/* ── 必須バッジ ── */
.required {
  display: inline-block;
  background: #c0392b;
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
@media (width < 769px) {
  .required {
    font-size: 2.667vw;
    padding: 0.4vw 1.6vw;
    margin-right: 1.333vw;
  }
}

/* ── 注釈 small ── */
.form-table th small {
  display: block;
  margin-top: 2px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #555;
  line-height: 1.5;
}
@media (width < 769px) {
  .form-table th small {
    font-size: 2.933vw;
    margin-top: 0.533vw;
  }
}

/* ── 入力フィールド共通 ── */
.form-table input[type="text"],
.form-table input[type="tel"],
.form-table input[type="email"],
.form-table input[type="date"],
.form-table input[type="number"],
.form-table select,
.form-table textarea,
.form-table .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio) {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-family: inherit;
  color: var(--black);
  background: var(--white);
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  transition: border-color 0.2s;
  vertical-align: middle;
}
.form-table input:focus,
.form-table select:focus,
.form-table textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27, 110, 177, 0.1);
}

/* プレースホルダー */
.form-table input::placeholder,
.form-table textarea::placeholder {
  color: var(--placeholder);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.5;
}

@media (width < 769px) {
  .form-table input[type="text"],
  .form-table input[type="tel"],
  .form-table input[type="email"],
  .form-table input[type="date"],
  .form-table input[type="number"],
  .form-table select,
  .form-table textarea,
  .form-table .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio) {
    max-width: 100%;
    font-size: 3.733vw;
    padding: 2.667vw 3.2vw;
    border-radius: 1.333vw;
  }
  .form-table input::placeholder,
  .form-table textarea::placeholder {
    font-size: 3.467vw;
  }
}

/* ── selectカスタム矢印（プルダウンらしい見た目） ── */
.form-table select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* 右端：薄いブルーの矢印エリア＋ブランドカラーのシェブロン */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1.5l6 6 6-6' stroke='%231B6EB1' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f2faff, #e7f3fb);
  background-repeat: no-repeat;
  background-position:
    right 14px center,
    right center;
  background-size: 14px 9px, 44px 100%;
  padding-right: 48px;
  max-width: 260px;
}
.form-table select:hover {
  border-color: var(--blue);
}
/* 未選択（プレースホルダー = value="" を選択中）はグレー表示 */
.form-table select:has(option[value=""]:checked) {
  color: var(--placeholder);
  font-weight: 500;
}
.form-table select option {
  color: var(--black);
  font-weight: 400;
}
@media (width < 769px) {
  .form-table select {
    max-width: 100%;
    background-position:
      right 3.2vw center,
      right center;
    background-size: 3.2vw 2vw, 10vw 100%;
    padding-right: 12vw;
  }
}

/* ── 姓名・フリガナ 横並び ── */
.name-fields {
  display: flex;
  gap: 16px;
}
.name-fields > label {
  flex: 1;
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  color: #555;
  line-height: 1.4;
  margin: 0;
}
.name-fields > label .wpcf7-form-control-wrap {
  display: block;
  margin-top: 4px;
}
.name-fields input {
  max-width: 100% !important;
  width: 100% !important;
}
@media (width < 769px) {
  .name-fields {
    flex-direction: column;
    gap: 2.667vw;
  }
  .name-fields > label {
    font-size: 3.2vw;
  }
}

/* ── 生年月日 ── */
.birthday-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.birthday-fields select {
  max-width: 170px;
}
.birthday-fields label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.5rem;
  white-space: nowrap;
  margin: 0;
}
.birthday-fields input[type="text"] {
  width: 68px !important;
  max-width: none !important;
  text-align: center;
}
@media (width < 769px) {
  .birthday-fields {
    gap: 2vw;
  }
  .birthday-fields select {
    max-width: 38vw;
  }
  .birthday-fields input[type="text"] {
    width: 15vw !important;
  }
  .birthday-fields label {
    font-size: 3.733vw;
  }
}

/* ── ラジオボタン ── */
.form-table .wpcf7-radio {
  display: flex;
  gap: 24px;
}
.form-table .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}
.form-table .wpcf7-radio .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 1.5rem;
}
.form-table .wpcf7-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  margin: 0;
}
@media (width < 769px) {
  .form-table .wpcf7-radio {
    gap: 5.333vw;
  }
  .form-table .wpcf7-radio .wpcf7-list-item label {
    font-size: 3.733vw;
  }
}

/* ── 郵便番号 ── */
.zipcode-fields {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.zipcode-fields input {
  max-width: 170px !important;
}
.zip-search-btn {
  display: inline-block;
  padding: 10px 18px;
  background: var(--gradation-blue);
  color: var(--white);
  border: none;
  border-radius: 5px;
  font-size: 1.3rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s;
}
.zip-search-btn:hover {
  background: var(--gradation-blue_hover);
}
@media (width < 769px) {
  .zipcode-fields {
    gap: 2.667vw;
    margin-bottom: 3.2vw;
  }
  .zipcode-fields input {
    max-width: 42vw !important;
  }
  .zip-search-btn {
    padding: 2.667vw 4vw;
    font-size: 3.2vw;
    border-radius: 1.333vw;
  }
}

/* ── td内のラベル（住所・メール等） ── */
.form-table td > label {
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  color: #555;
  line-height: 1.4;
  margin: 12px 0 8px;
}
.form-table td > label:first-child {
  margin-top: 0;
}
@media (width < 769px) {
  .form-table td > label {
    font-size: 3.2vw;
    margin: 3.2vw 0 1.067vw;
  }
  .form-table td > label:first-child {
    margin-top: 0;
  }
}

/* ── 面談希望日時 ── */
.date-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.date-fields:last-child {
  margin-bottom: 0;
}
.date-fields input {
  max-width: 190px !important;
}
.date-fields select {
  max-width: 120px;
}
.date-fields > span {
  font-size: 1.5rem;
  white-space: nowrap;
}
@media (width < 769px) {
  .date-fields {
    gap: 2vw;
    margin-bottom: 3.2vw;
  }
  .date-fields input {
    max-width: 46vw !important;
  }
  .date-fields select {
    max-width: 26vw;
  }
  .date-fields > span {
    font-size: 3.733vw;
  }
}

/* ── 注釈テキスト（td内） ── */
.form-note {
  font-size: 1.2rem;
  color: #666;
  line-height: 1.6;
  margin: 0 0 8px;
}
@media (width < 769px) {
  .form-note {
    font-size: 3vw;
    margin-bottom: 2.133vw;
  }
}

/* メール確認の上余白 */
.form-table td > label + .wpcf7-form-control-wrap {
  margin-top: 4px;
}

/* ── 送信ボタン ── */
.wpcf7 input[type="submit"] {
  display: block;
  width: 380px;
  margin: 36px auto 0;
  padding: 18px;
  background: var(--gradation-orange);
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s;
  letter-spacing: 0.1em;
}
.wpcf7 input[type="submit"]:hover {
  background: var(--gradation-orange_hover);
}
@media (width < 769px) {
  .wpcf7 input[type="submit"] {
    width: 80vw;
    padding: 4.267vw;
    font-size: 4.267vw;
    border-radius: 13.333vw;
    margin-top: 6.4vw;
  }
}

/* ============================================
   バリデーションエラー：吹き出しツールチップ
============================================ */

/* wrapをrelativeにして吹き出しの基準点にする */
.form-table .wpcf7-form-control-wrap {
  position: relative;
}

/* エラー時の枠線（赤） */
.wpcf7-not-valid {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.1) !important;
}

/* 吹き出し本体 */
.wpcf7-not-valid-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: inline-block;
  padding: 6px 12px;
  background: #c0392b;
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
  /* フェードイン */
  animation: tooltipFadeIn 0.25s ease-out;
}

/* 吹き出しの三角（下向き） */
.wpcf7-not-valid-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: #c0392b;
}

/* フェードインアニメーション */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SP調整 */
@media (width < 769px) {
  .wpcf7-not-valid-tip {
    font-size: 2.933vw;
    padding: 1.333vw 2.667vw;
    border-radius: 1.067vw;
    bottom: calc(100% + 1.6vw);
  }
  .wpcf7-not-valid-tip::after {
    left: 4vw;
    border-width: 1.333vw;
  }
}

/* ── 送信完了 / エラーメッセージ ── */
.wpcf7-response-output {
  margin: 20px auto 0 !important;
  padding: 14px 20px !important;
  border-radius: 6px !important;
  font-size: 1.4rem;
  text-align: center;
  max-width: 600px;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--green) !important;
  background: #e8f5f3;
  color: var(--green);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: #c0392b !important;
  background: #fdf0f0;
  color: #c0392b;
}

form.wpcf7-form.init {
  margin-top: 6rem;
}

.cta {
  padding: 88px 0;
}

p.form-note {
  margin-bottom: 10px;
}

/* ============================================
   面談ご希望日 カレンダー（flatpickr）
============================================ */

/* CF7 が出力する元の date 入力は flatpickr が hidden 化するので非表示でOK。
   表示用の入力欄（altInput）にカレンダーアイコンを付ける */
.date-fields input.gp-datepicker-input {
  cursor: pointer;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%231B6EB1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='13' height='12' rx='2'/%3E%3Cpath d='M2.5 7h13M6 1.5v3M12 1.5v3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
.date-fields input.gp-datepicker-input:hover {
  border-color: var(--blue);
}
@media (width < 769px) {
  .date-fields input.gp-datepicker-input {
    background-position: right 3.2vw center;
    padding-right: 10vw;
  }
}

/* ── flatpickr カレンダー本体をブランドカラーに ── */
.flatpickr-calendar {
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  font-family:
    "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
}
.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-weekday {
  background: var(--blue);
  color: var(--white);
  fill: var(--white);
}
/* 曜日（日〜土）：flatpickr標準が span.flatpickr-weekday で黒指定しているため
   詳細度を上げて白＋やや太字で上書きする */
.flatpickr-calendar span.flatpickr-weekday {
  color: var(--white);
  font-weight: 600;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--white);
  fill: var(--white);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--white);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--yellow);
}
/* 選択中の日 */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
/* ホバー・本日 */
.flatpickr-day:hover {
  background: var(--light-blue);
  border-color: var(--light-blue);
}
.flatpickr-day.today {
  border-color: var(--sky-blue);
}
.flatpickr-day.today:hover {
  background: var(--sky-blue);
  border-color: var(--sky-blue);
  color: var(--white);
}
/* 選択不可（本日から1週間未満など） */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #ccc;
}