/*
 * お問い合わせページ専用スタイル
 * 文字の大きさ・太さ・行間・色は Typography トークンが持つ。ここでは余白・配置・入力欄の枠のみ。
 * フォーム本体は Contact Form 7 が出力する（HTMLは cf7/contact-form.html）。
 */

/*
 * PC: 左に見出し・本文、右に相談ボタン
 * SP: 縦積みで、ボタンは幅いっぱい
 */
.contact-intro {
  display: grid;
  /* 見出しが途中で折り返さないよう、ボタン側は中身の幅だけ取る */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px 64px;
  align-items: center;
  padding: 96px 0 72px;
}

.contact-intro__kicker {
  margin-bottom: 20px;
}

.contact-intro__title {
  margin-bottom: 20px;
}

.contact-intro__body {
  max-width: 40em;
}

.contact-intro__action {
  display: grid;
  justify-items: center;
}

.contact-intro__button {
  padding: 16px 2cm;
}

.form-page {
  padding: 96px 0 72px;
}

.form-page__kicker {
  margin-bottom: 22px;
}

.form-page__lead {
  max-width: 44em;
  margin-top: 32px;
}

/*
 * フォーム
 * PC: 左に項目名（200px）、右に入力欄
 * SP: 項目名 → 入力欄 の縦積み
 */
.contact-form {
  max-width: 820px;
  margin-top: 56px;
}

.contact-form__rows {
  border-top: 1px solid var(--color-rule);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
  padding: 28px 4px;
  border-bottom: 1px solid var(--color-rule);
}

/* 項目名を入力欄の1行目にそろえる */
.contact-form__label {
  padding-top: 14px;
}

.contact-form__req {
  margin-left: 8px;
}

/* CF7 が入力欄を包む span */
.contact-form .wpcf7-form-control-wrap {
  display: block;
}

.contact-form__input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-rule-mid);
  border-radius: 2px;
  background: var(--color-mat);
  font-family: "Shippori Mincho B1", serif;
  transition: border-color 0.2s ease;
}

/* メールアドレスは欧文なので Cormorant（正本どおり） */
.contact-form__input[type="email"] {
  font-family: "Cormorant Garamond", serif;
}

.contact-form__input:focus {
  border-color: var(--color-gold);
  outline: none;
}

.contact-form__input::placeholder {
  color: var(--color-ink-mute);
}

.contact-form__input[aria-invalid="true"] {
  border-color: var(--color-required);
}

/* セレクトは既定の矢印を消し、金の山形を描く */
.contact-form__select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-gold) 50%),
    linear-gradient(135deg, var(--color-gold) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 17px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.contact-form__select:hover {
  border-color: var(--color-gold);
}

.contact-form__select option {
  background: var(--color-bg-footer);
  color: var(--color-ink-2);
}

.contact-form__textarea {
  resize: vertical;
}

/* エラー文（CF7 が差し込む。役割クラスは assets/js/contact-form.js が付ける） */
.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 10px;
}

/*
 * Contact Form 7 の標準CSS（functions.php で読み込みを止めている）のうち、動作に必要な分
 */
.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

.wpcf7 .hidden-fields-container {
  display: none;
}

.wpcf7-form-control-wrap {
  position: relative;
}

.wpcf7 [inert] {
  opacity: 0.5;
}

.wpcf7 input[type="email"] {
  direction: ltr;
}

/* 送信ボタン・戻る・メール案内 */
.contact-form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px 4px 0;
}

/* 送信ボタンは CF7 の <input type="submit"> なので、ボタンコンポーネントのクラス（.btn .btn--primary .btn--md）を直接付けている */
.contact-form__submit {
  padding: 0 60px;
  /* <input> はフォントを継承しないため指定する */
  font-family: "Shippori Mincho B1", serif;
}

.contact-form__submit:disabled {
  opacity: 0.45;
  cursor: default;
}

.contact-form__back {
  padding: 0 32px;
}

.contact-form__mail a {
  text-decoration: none;
}

.contact-form__mail a:hover {
  color: var(--color-gold-hi);
}

/* 送信中のくるくる（CF7）。送信中だけ出す（それ以外は場所も取らない） */
.contact-form .wpcf7-spinner {
  position: relative;
  display: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-rule-mid);
}

.contact-form.submitting .wpcf7-spinner {
  display: inline-block;
  align-self: center;
}

.contact-form .wpcf7-spinner::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold-text);
  transform-origin: 8px 8px;
  animation: contact-form-spin 1s linear infinite;
}

@keyframes contact-form-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form .wpcf7-spinner::before {
    animation: none;
  }
}

/* 送信結果のメッセージ（CF7 が差し込む）。送信前・送信中は出さない */
.contact-form .wpcf7-response-output {
  margin: 32px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--color-rule-mid);
}

.contact-form.init .wpcf7-response-output,
.contact-form.resetting .wpcf7-response-output,
.contact-form.submitting .wpcf7-response-output {
  display: none;
}

.contact-form.invalid .wpcf7-response-output,
.contact-form.unaccepted .wpcf7-response-output,
.contact-form.payment-required .wpcf7-response-output,
.contact-form.spam .wpcf7-response-output,
.contact-form.failed .wpcf7-response-output,
.contact-form.aborted .wpcf7-response-output {
  border-color: var(--color-required);
}

.contact-form.sent .wpcf7-response-output {
  border-color: var(--color-green);
}

/*
 * SP
 */
@media (max-width: 767px) {
  .contact-intro {
    display: block;
    padding: 44px 0 8px;
  }

  .contact-intro__kicker {
    margin-bottom: 14px;
  }

  .contact-intro__title {
    margin-bottom: 18px;
  }

  .contact-intro__br-pc {
    display: none;
  }

  .contact-intro__body {
    margin-bottom: 28px;
  }

  .contact-intro__action {
    display: block;
  }

  .contact-intro__button {
    width: 100%;
    padding: 18px 12px;
  }

  .form-page {
    padding: 44px 0 36px;
  }

  .form-page__kicker {
    margin-bottom: 14px;
  }

  .form-page__lead {
    margin-top: 24px;
  }

  .contact-form {
    margin-top: 32px;
  }

  .contact-form__row {
    display: block;
    padding: 22px 2px;
  }

  .contact-form__label {
    display: block;
    margin-bottom: 10px;
    padding-top: 0;
  }

  .contact-form__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-top: 32px;
  }

  .contact-form__submit,
  .contact-form__back {
    width: 100%;
  }
}