@charset "UTF-8";

/* ==========================================
   お問い合わせフォーム（入力の画面。page-contact.php）
   XD: 08_お問い合わせ_入力_SP（箱 x=15 y=293 345×765・角丸 50）／08_お問い合わせ_入力_PC（箱 x=203 y=391 960×953・角丸 100）
   フォームの中身（項目・ラベル・ボタンの文言）は Contact Form 7 のフォーム ID 35（DB）にあるので、ここでは見た目だけを XD に合わせる。
   ラベルの文字の上端を T として、SP は T の 30px 下が入力欄、次のラベルは T の 111px 下。PC は 36px 下・127px 下。
   ========================================== */
.contact-step--input,
.contact-step--confirm {
  animation: contact-step-fade-in 0.3s ease-in-out;
}

@keyframes contact-step-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.p-contact {
  padding: 68px 0 61px; /* XD SP: パンくずのベースライン y=82 → 行の上端 68、箱の下端 1058 → フッターの上端 1119 */
  background-color: var(--color-bg);
}

.p-contact__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--content-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.p-contact__breadcrumb {
  /* 見出し・フォームは幅いっぱいの流動なので、パンくずも 375px の列に寄せず左端にそろえる（375px では同じ幅。AUDIT LY-2） */
  max-width: none;
}

.p-contact__lead {
  /* XD SP: YuGo-Medium 16px・行の間隔 27・#555555・左揃え（ベースライン 197・224・251）。箱の上端 293 まで 34 */
  margin: 0 0 34px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6875; /* 27px ÷ 16px */
  color: var(--color-text);
}

.contact-form {
  /* XD SP: 白い箱 345×765・角丸 50・影 1 1 5。左右の余白 20（入力欄 305）。ラベルの上端 324 は箱の上端から 31 */
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 31px 20px;
  border-radius: 50px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-btn);
}

.contact-form__row {
  margin: 0 0 31px; /* XD SP: 入力欄の下端 → 次のラベルの上端 31 */
}

.contact-form__label {
  /* XD SP: YuGo-Bold 20px・#555555。必須の札は文字の右 10px・34×22（文字の上端より 1px 上） */
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 8px; /* XD SP: ラベルの上端 → 入力欄の上端 30 */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1; /* 22px ÷ 20px */
  color: var(--color-text);
}

.contact-form__required {
  /* XD: 札 34×22・角丸 5・#93c572。文字は 12px・白（ベースライン = 札の上端 + 16） */
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 34px;
  height: 22px;
  margin-top: -1px;
  padding-top: 2px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6667; /* 20px ÷ 12px */
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-main);
}

.contact-form__field {
  position: relative;
  width: 100%;
}

.contact-form__input,
.contact-form__select,
.contact-form__dropdown-toggle,
.contact-form__textarea {
  /* XD SP: 入力欄 305×50・白・枠 1px #93c572（内側）・角丸 5。文字 YuGo-Medium 16px、左の余白 20 */
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  border: 1px solid var(--color-main);
  border-radius: 5px;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-white);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

.contact-form__select,
.contact-form__dropdown-toggle {
  /* XD SP: 種別の右に V 字の矢印（幅 15.53・高さ 7.77・線 3px #93c572）。右の端から 20 */
  padding-right: 50px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='11' viewBox='0 0 22 11'><path d='M1.5 1.5 11 9.5 20.5 1.5' fill='none' stroke='%2393c572' stroke-width='3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 17px center;
  background-size: 18px 9px;
  appearance: none;
}

.contact-form__select.is-enhanced {
  /* ドロップダウンを重ねたあとの元の select は見えなくする（値と検証だけに使う。箱の大きさはそのまま残る） */
  visibility: hidden;
}

.contact-form__dropdown {
  /* 種別のドロップダウン（js/contact-select.js）。元の select（高さ 50）に重ねる。
     XD 09: トリガーは入力欄と同じ 305×50（PC 400×50）、一覧はその真下に隙間なく付く */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
}

.contact-form__dropdown-toggle {
  display: block;
  line-height: 3; /* 48px ÷ 16px。高さ 50 − 枠 1×2 */
  text-align: left;
  cursor: pointer;
}

.contact-form__dropdown-toggle.is-placeholder {
  color: var(--color-placeholder); /* XD: 選択してください #cbcbcb */
}

.contact-form__dropdown-list {
  /* XD SP: 一覧 305×150（選択肢 1 つ 50）・#f9f9f9・枠 1px #93c572（内側）・角丸 5。文字 16px #93c572、左の余白 20 */
  position: absolute;
  top: calc(100% - 1px); /* XD SP: 一覧の上端 403 はトリガーの下端 404 より 1 上（PC は 558 で隙間なし） */
  left: 0;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
  background-color: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-main);
  list-style: none;
}

.contact-form__dropdown-option {
  position: relative;
  box-sizing: border-box;
  height: 50px;
  margin: 0;
  padding: 0 20px;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700; /* XD: YuGo-Bold */
  line-height: 3.125; /* 50px ÷ 16px */
  color: var(--color-main);

  /* XD SP: 選択肢の間の線 x=45〜330（左右 10 内側）1px #707070。各選択肢の上端に引く（先頭だけ引かない） */
  background-image: linear-gradient(var(--color-border), var(--color-border));
  background-repeat: no-repeat;
  background-position: 10px 0;
  background-size: calc(100% - 20px) 1px;
  cursor: pointer;
}

.contact-form__dropdown-option:first-child {
  background-image: none;
}

.contact-form__dropdown-option.is-selected {
  background-color: rgb(147 197 114 / 8%);
}

.contact-form__dropdown-option.is-active {
  /* is-selected より後に置く（同じ詳細度で、操作中の選択肢の色を勝たせる） */
  background-color: rgb(147 197 114 / 15%);
}

@media (any-hover: hover) {
  .contact-form__dropdown-option:hover {
    /* ホバーできる端末だけ。XD の 09 は全選択肢が同じ背景なので、開いた直後（ポインターなし）は着色しない */
    background-color: rgb(147 197 114 / 15%);
  }
}

.contact-form__textarea {
  /* XD SP: 本文の入力欄 305×150 */
  display: block;
  height: 150px;
  padding: 16px 20px;
  line-height: 1.7;
  resize: none;
}

.contact-form__error {
  /* XD SP: エラーの文 YuGo-Medium 13px・#d53838。入力欄の下端から 5px 下に文字の箱が始まる（行の高さ 23 ＝ 文字 + 10）。
     次のラベルの位置は動かさない（行の下の余白 31 の中に収める） */
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7693; /* 23px ÷ 13px（切り上げて 23px ちょうどにする） */
  color: var(--color-error);
}

.contact-form__field > .contact-form__error {
  position: absolute;
  top: 100%;
  left: 0;
}

.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-error);
}

.contact-form .wpcf7-form-control-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.contact-form__submit {
  /* XD SP: 確認するボタン 200×50・白・枠 2px #93c572（内側）・角丸 50。文字 YuGo-Bold 16px・字間 1.6px・#93c572。入力欄の下端から 30 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1px; /* 行の余白 31 のうち、XD は入力欄の下端 → ボタンが 30 */
}

.btn--contact-confirm {
  display: block;
  box-sizing: border-box;
  width: 200px;
  height: 50px;
  padding: 0;
  border: 2px solid var(--color-main);
  border-radius: 50px;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 2.875; /* 46px ÷ 16px。高さ 50 − 枠 2×2（flex だと測定の probe が別の項目になりベースラインが中央になるため block） */
  letter-spacing: 0.1em; /* 1.6px ÷ 16px */
  color: var(--color-main);
  text-align: center;
  background-color: var(--color-white);
  transition:
    background-color 0.3s,
    color 0.3s;
  cursor: pointer;
}

@media (any-hover: hover) {
  .btn--contact-confirm:hover {
    color: var(--color-white);
    background-color: var(--color-main);
  }
}

.contact-form .wpcf7-spinner {
  position: absolute;
  left: calc(50% + 120px);
  margin: 0;
}

.contact-form .wpcf7-response-output {
  /* Contact Form 7 の送信結果（送信に失敗したときだけ出る。枠・余白はプラグインの規則のまま。成功は /thanks/ へ移る） */
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

@media (width >= 768px) {
  .p-contact {
    padding: 144px 0 160px; /* XD PC: 箱の下端 1344 → フッターの上端 1504 */
  }

  .p-contact__lead {
    /* XD PC: ベースライン 339（行の上端 320）。箱の上端 391 まで 44 */
    margin: -10px 0 44px; /* 見出しの下の余白（page-title.css）が XD より 10px 大きい */
  }

  .contact-form {
    /* XD PC: 白い箱 960×953・角丸 100。入力欄の列は幅 600 で左そろえ（x=383）。ラベルの上端 472 は箱の上端から 81、ボタンの下端から箱の下端まで 80 */
    padding: 81px max(20px, (100% - 600px) / 2) 80px;
    border-radius: 100px;
  }

  .contact-form__row {
    margin-bottom: 41px; /* XD PC: ラベルの上端の間隔 127 */
  }

  .contact-form__label {
    margin-bottom: 14px; /* XD PC: ラベルの上端 → 入力欄の上端 36 */
  }

  .contact-form__submit {
    padding-top: 9px; /* XD PC: 入力欄の下端 1164 → ボタン 1214 の 50（行の余白 41 は上の行の margin と重なるので padding で足す） */
  }

  .contact-form__select,
  .contact-form__dropdown-toggle {
    /* XD PC: 種別 400・氏名／メール／電話 500・本文 600（すべて高さ 50、本文は 150）。矢印は幅 21.77・高さ 10.88、右の端から 19.7 */
    max-width: 400px;
    background-position: right 17px center;
    background-size: 22px 11px;
  }

  .contact-form__dropdown,
  .contact-form__dropdown-list {
    max-width: 400px; /* XD PC: 種別・一覧とも幅 400 */
  }

  .contact-form__dropdown-list {
    top: 100%;
  }

  .contact-form__input {
    max-width: 500px;
  }

  .contact-form__textarea {
    max-width: 600px;
  }

  .contact-form__error {
    /* XD PC: エラーの文は 16px（行の高さ 26） */
    font-size: 16px;
    line-height: 1.625; /* 26px ÷ 16px */
  }
}

/* フォーカスとエラー（詳細度の高いものを最後に置く）。js/contact-step.js が .is-error と .contact-form__error / __alert を付ける。Contact Form 7 の .wpcf7-not-valid も同じ見た目 */
.contact-form__input:focus-visible,
.contact-form__select:focus-visible,
.contact-form__dropdown-toggle:focus-visible,
.contact-form__textarea:focus-visible,
.btn--contact-confirm:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.is-error .contact-form__input,
.is-error .contact-form__select,
.is-error .contact-form__dropdown-toggle,
.is-error .contact-form__textarea,
.contact-form .wpcf7-not-valid {
  border-color: var(--color-error);
}

.contact-form .wpcf7-not-valid {
  background-color: #fff9f9;
}