/* contact.css — お問い合わせ
   Figma: 1938:51622。フォームの行（ラベル 270 ＋ 24 ＋ 入力欄）はこのページ固有 */

.contact-intro {
  padding: 0;
}

.contact-form-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--space-40);
}

/* Contact Form 7 の外枠（フォーム本体は .contact-form）*/
.contact-form-section .wpcf7 {
  width: 100%;
  max-width: var(--width-content);
}

.contact-form {
  --contact-label-width: calc(270 / 16 * 1rem);
  --contact-label-text-width: calc(182 / 16 * 1rem);
  --contact-input-height: calc(66.56 / 16 * 1rem);
  --contact-textarea-height: calc(374.4 / 16 * 1rem);
  --contact-badge-width: calc(62 / 16 * 1rem);
  --contact-badge-height: calc(24.96 / 16 * 1rem);
  --contact-radio-size: calc(29 / 16 * 1rem);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  max-width: var(--width-content);
  color: var(--color-black);
}

.contact-form__row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}

/* 入力画面・確認画面（中身の並びは .contact-form と同じ）*/
.contact-form__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}

.contact-form__step[hidden] {
  display: none;
}

/* 確認画面 ※ Figma 未定義。入力画面のラベル幅・文字サイズ・線に合わせて作成 */
.contact-form__confirm-lead {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  text-align: center;
}

.contact-form__confirm-lead:focus {
  outline: none;
}

.contact-form__confirm-list {
  width: 100%;
  margin: 0;
  border-top: var(--border-width) solid var(--color-black);
  animation: ic-fade-in var(--duration-slow) var(--ease-out);
}

.contact-form__confirm-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
  padding-block: var(--space-24);
  border-bottom: var(--border-width) solid var(--color-black);
}

.contact-form__confirm-label {
  flex-shrink: 0;
  width: var(--contact-label-width);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.contact-form__confirm-value {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  white-space: pre-wrap;
  word-break: break-word;
}

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-24);
  padding-top: var(--space-24);
}

/* Turnstile（「確認画面へ」の直前・中央揃え）。鍵が未設定で中身が空のときは行ごと詰める
   ※ ウィジェットの寸法は Cloudflare の iframe 側で決まる（Figma 未定義）*/
.contact-form__turnstile {
  display: flex;
  justify-content: center;
  width: 100%;
}

.contact-form__turnstile:empty {
  display: none;
}

/* 「入力画面に戻る」：矢印を左向き・左側に置く */
.contact-form__back {
  flex-direction: row-reverse;
}

.contact-form__back .button__icon {
  transform: scaleX(-1);
}

.contact-form__back:hover .button__icons,
.contact-form__back:focus-visible .button__icons {
  transform: translateX(calc(var(--hover-shift) * -1));
}

.contact-form__row--top {
  align-items: flex-start;
}

.contact-form__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-16);
  width: var(--contact-label-width);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.contact-form__label-text {
  width: var(--contact-label-text-width);
}

/* 「必須」バッジ */
.contact-form__required {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--contact-badge-width);
  height: var(--contact-badge-height);
  border-radius: var(--radius-full);
  background: var(--color-black);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  color: var(--color-white);
}

/* 「（確認用）」（ラベル行の右端）*/
.contact-form__label--note {
  justify-content: space-between;
}

.contact-form__note {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.contact-form__field {
  flex: 1 0 0;
  min-width: 0;
}

.contact-form .wpcf7-form-control-wrap {
  display: block;
}

.contact-form__input,
.contact-form__textarea {
  display: block;
  width: 100%;
  height: var(--contact-input-height);
  padding: 0 var(--space-16);
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius);
  background: var(--color-white);
  font-family: inherit;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  color: var(--color-black);
}

.contact-form__textarea {
  height: var(--contact-textarea-height);
  padding-block: var(--space-16);
  resize: vertical;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-gray-light);
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-hover);
}

/* フォーカス：枠を太く（影で 1px 足す）・プレースホルダーを消す */
.contact-form__input,
.contact-form__textarea {
  transition: box-shadow var(--duration-fast) var(--ease-hover);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  box-shadow: 0 0 0 var(--border-width) var(--color-black);
}

.contact-form__input:focus::placeholder,
.contact-form__textarea:focus::placeholder {
  opacity: 0;
}

/* エラー時：枠をエラー色に（Contact Form 7 が .wpcf7-not-valid を付ける）*/
.contact-form__input.wpcf7-not-valid,
.contact-form__textarea.wpcf7-not-valid {
  border-color: var(--color-error);
}

/* ラジオボタン（お問い合わせ内容）*/
.contact-form .wpcf7-radio {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  height: var(--contact-input-height);
  padding-left: var(--space-12);
}

.contact-form .wpcf7-radio .wpcf7-list-item {
  flex: 1 0 0;
  margin: 0;
}

.contact-form .wpcf7-radio label {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  cursor: pointer;
}

.contact-form .wpcf7-radio input {
  flex-shrink: 0;
  width: var(--contact-radio-size);
  height: var(--contact-radio-size);
  margin: 0;
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-full);
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
}

/* 選択中の表現は Figma 未定義（仮：内側に黒丸）*/
.contact-form .wpcf7-radio input:checked {
  background: radial-gradient(circle, var(--color-black) 40%, transparent 44%);
}

/* 同意チェック＋注意書き */
.contact-form__consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding-block: var(--space-24);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
}

/* Contact Form 7 の入れ子（inline の span）で行の高さが増えないようにブロック化 */
.contact-form__consent .wpcf7-acceptance,
.contact-form__consent .wpcf7-list-item {
  display: block;
  margin: 0;
}

.contact-form__consent .wpcf7-acceptance label {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  cursor: pointer;
}

.contact-form__consent .wpcf7-acceptance input {
  flex-shrink: 0;
  width: var(--space-24);
  height: var(--space-24);
  margin: 0;
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
}

.contact-form__consent .wpcf7-acceptance input:checked {
  background: var(--color-white) url("../../images/icon-check.svg") center / var(--space-16) no-repeat;
}

.contact-form__consent a {
  color: inherit;
}

.contact-form__consent p {
  margin: 0;
  white-space: nowrap;
}

/* 項目ごとのエラー（Contact Form 7）*/
.contact-form .wpcf7-not-valid-tip {
  margin: var(--space-8) 0 0;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  color: var(--color-error);
  animation: ic-fade-in var(--duration-reveal) var(--ease-out);
}

.contact-form__consent .wpcf7-not-valid-tip {
  text-align: center;
}

/* 送信中：ボタンを薄くして連打を防ぐ */
.contact-form-section .wpcf7 form.submitting .button {
  opacity: var(--hover-dim);
  pointer-events: none;
}

/* 確認画面へ進んだとき：メッセージは確認画面の案内文で伝えるので出さない */
.contact-form-section .wpcf7 form.custom-ic-confirm .wpcf7-response-output {
  display: none;
}

/* 送信完了：フォームを隠してメッセージだけにする */
.contact-form-section .wpcf7 form.sent .contact-form {
  display: none;
}

/* 送信結果のメッセージ（完了・入力エラー・送信失敗）*/
.contact-form__message,
.contact-form-section .wpcf7 form .wpcf7-response-output {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  text-align: center;
  animation: ic-fade-in var(--duration-slow) var(--ease-out);
}

.contact-form-section .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-section .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form-section .wpcf7 form.failed .wpcf7-response-output,
.contact-form-section .wpcf7 form.aborted .wpcf7-response-output,
.contact-form-section .wpcf7 form.spam .wpcf7-response-output {
  margin-top: var(--space-24);
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
}

@keyframes ic-fade-in {
  from { opacity: 0; transform: translateY(var(--reveal-offset)); }
  to   { opacity: 1; transform: none; }
}

/* 1200px 以下：Figma で1行固定（nowrap）の見出しも、幅が足りなければ折り返す */
@media (max-width: 1200px) {
  .contact-form__consent p {
    white-space: normal;
    text-align: center;
  }
}

/* 767px 以下（SP）：横並びを縦1列に。⚠ SPデザイン未確定のため仮レイアウト */
@media (max-width: 767px) {
  /* 入力欄の高さ：1行 48px、複数行は 192px（4行ほど）*/
  .contact-form {
    --contact-input-height: var(--space-48);
    --contact-textarea-height: calc(var(--space-48) * 4);
  }

  .contact-form-section {
    padding-block: 0;
  }

  .contact-form__consent p {
    text-align: left;
  }

  .contact-form__row,
  .contact-form__row--top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .contact-form__label {
    width: 100%;
  }

  .contact-form__label-text {
    width: auto;
  }

  /* 「（確認用）」も「必須」バッジと同じく、ラベル文字のすぐ右に置く */
  .contact-form__label--note {
    justify-content: flex-start;
  }

  .contact-form__field {
    flex: none;
  }

  .contact-form .wpcf7-radio {
    flex-wrap: wrap;
    height: auto;
    padding-block: var(--space-8);
  }

  .contact-form .wpcf7-radio .wpcf7-list-item {
    flex: none;
  }

  .contact-form__confirm-row {
    flex-direction: column;
    gap: var(--space-8);
    padding-block: var(--space-16);
  }

  .contact-form__confirm-label {
    width: 100%;
  }

  .contact-form__actions {
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--space-16);
  }
}