@charset "UTF-8";
/* ============================================================
   メールフォーム（Snow Monkey Forms）の見た目
   - お問い合わせ：.contactPage（page-contact.php）
   - 簡易見積　　：.estimateForm（太陽光 try の2ページ・[simple_estimate_v2]）
   functions.php の futawa_form_assets() で、フォームのあるページだけ読み込む。
   フォームの「スタイル」は「なし」にしておく（この CSS で Bootstrap 3 に寄せる）。
   ============================================================ */

/* ---------- 共通 ---------- */

:is(.contactPage, .estimateForm) .snow-monkey-form {
  max-width: 760px;
  color: #333;
}

/* 項目 */
:is(.contactPage, .estimateForm) .smf-item {
  margin: 0 0 22px;
}
:is(.contactPage, .estimateForm) .smf-item__label {
  margin-bottom: 6px;
  font-weight: 700;
}
:is(.contactPage, .estimateForm) .smf-item__description,
:is(.contactPage, .estimateForm) .smf-control-description {
  margin: 4px 0 8px;
  color: #777;
  font-size: 13px;
}

/* 入力欄（iOS で拡大されないよう 16px） */
:is(.contactPage, .estimateForm) .smf-text-control__control,
:is(.contactPage, .estimateForm) .smf-textarea-control__control,
:is(.contactPage, .estimateForm) .smf-select-control__control {
  display: block;
  width: 100%;
  max-width: 30em;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
:is(.contactPage, .estimateForm) .smf-textarea-control__control {
  max-width: none;
}
:is(.contactPage, .estimateForm) .smf-text-control__control:focus,
:is(.contactPage, .estimateForm) .smf-textarea-control__control:focus,
:is(.contactPage, .estimateForm) .smf-select-control__control:focus {
  border-color: #f08200;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(240, 130, 0, .5);
}

/* ラジオボタン・チェックボックス */
:is(.contactPage, .estimateForm) .smf-radio-button-control,
:is(.contactPage, .estimateForm) .smf-checkbox-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 2em 8px 0;
  font-weight: 400;
}
:is(.contactPage, .estimateForm) .smf-radio-button-control__control,
:is(.contactPage, .estimateForm) .smf-checkbox-control__control {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: #f08200;
}

/* エラー */
:is(.contactPage, .estimateForm) .smf-error-messages {
  margin-top: 5px;
  color: #a94442;
  font-size: 14px;
}
:is(.contactPage, .estimateForm) [data-invalid="1"] {
  border-color: #a94442;
}

/* ボタン（送信・確認・戻る） */
:is(.contactPage, .estimateForm) .smf-action {
  margin: 30px 0;
  text-align: center;
}
:is(.contactPage, .estimateForm) .smf-action .smf-button-control__control {
  display: inline-block;
  min-width: 12em;
  padding: 12px 40px;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  background: #f08200;
  border: 1px solid #d97500;
  border-radius: 6px;
  cursor: pointer;
}
:is(.contactPage, .estimateForm) .smf-action .smf-button-control__control:hover {
  background: #d97500;
}
:is(.contactPage, .estimateForm) .smf-action .smf-button-control__control[data-action="back"] {
  color: #333;
  background: #fff;
  border-color: #ccc;
}
:is(.contactPage, .estimateForm) .smf-action .smf-button-control__control[data-action="back"]:hover {
  background: #e6e6e6;
}
:is(.contactPage, .estimateForm) .smf-action .smf-button-control__control[disabled] {
  opacity: .6;
  cursor: not-allowed;
}
@media (max-width: 767px) {
  :is(.contactPage, .estimateForm) .smf-action .smf-button-control {
    display: block;
  }
  :is(.contactPage, .estimateForm) .smf-action .smf-button-control + .smf-button-control {
    margin: 12px 0 0;
  }
  :is(.contactPage, .estimateForm) .smf-action .smf-button-control__control {
    width: 100%;
  }
}

/* 進み具合（入力 → 確認 → 完了） */
:is(.contactPage, .estimateForm) .smf-progress-tracker {
  margin-bottom: 30px;
}
:is(.contactPage, .estimateForm) .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
  background-color: #f08200;
  color: #fff;
}

/* Turnstile */
:is(.contactPage, .estimateForm) .snow-monkey-forms-turnstile {
  margin: 20px 0 0;
  display: flex;
  justify-content: center;
}

/* 確認画面：入力内容を表のように見せる */
:is(.contactPage, .estimateForm) .snow-monkey-form[data-screen="confirm"] .smf-item {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #e5e5e5;
}

/* 完了画面：送信後は Turnstile の表示（「成功しました!」）を隠す */
:is(.contactPage, .estimateForm) .snow-monkey-form[data-screen="complete"] .snow-monkey-forms-turnstile {
  display: none;
}

/* 送信回数の上限に達したとき（mu-plugin のメッセージを functions.php で差し替えたもの）
 * 見出しを大きく太字にし、案内文とまとめて枠で囲む。rem はこのテーマでは 10px 基準（2.5rem = 25px） */
:is(.contactPage, .estimateForm) .ffg-alert {
  margin: 30px 0;
  padding: 28px 30px;
  background: #fff6e8;
  border: 2px solid #f08200;
  border-radius: 6px;
  text-align: left;
}
:is(.contactPage, .estimateForm) .ffg-alert__title {
  margin: 0 0 14px;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  color: #c0392b;
}
:is(.contactPage, .estimateForm) .ffg-alert__body {
  margin: 0;
}
:is(.contactPage, .estimateForm) .ffg-alert__body a {
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 767px) {
  :is(.contactPage, .estimateForm) .ffg-alert {
    padding: 20px 16px;
  }
  :is(.contactPage, .estimateForm) .ffg-alert__title {
    font-size: 1.5rem;
  }
}

/* 完了画面 */
:is(.contactPage, .estimateForm) .snow-monkey-form[data-screen="complete"] .smf-form {
  padding: 30px 0;
  text-align: center;
}

/* PC：ラベルを左に置く（Bootstrap 3 の form-horizontal に近い形） */
@media (min-width: 768px) {
  :is(.contactPage, .estimateForm) .smf-item {
    display: flex;
    align-items: flex-start;
  }
  :is(.contactPage, .estimateForm) .smf-item__col--label {
    flex: 0 0 13em;
    padding: 7px 1.5em 0 0;
  }
  :is(.contactPage, .estimateForm) .smf-item__col--controls {
    flex: 1 1 auto;
    min-width: 0;
  }
  :is(.contactPage, .estimateForm) .snow-monkey-form[data-screen="confirm"] .smf-item__col--label {
    padding-top: 0;
  }
}


/* ---------- お問い合わせ（.contactPage） ---------- */

/*
 * 「工事のご依頼」のときだけ、工事場所の項目（項目ブロックに CSS クラス construction-only）を表示する。
 * 入力画面はチェックされたラジオボタン、確認画面は同じ name の hidden で判定する。
 * :has() に対応していない古いブラウザでは、常に表示される（入力はできる）。
 */
.contactPage .smf-form:not(:has(input[name="inquiry_type"][value="工事のご依頼"]:checked, input[type="hidden"][name="inquiry_type"][value="工事のご依頼"])) .construction-only {
  display: none;
}


/* ---------- 簡易見積（.estimateForm） ---------- */

/* 簡易見積v2：「もっと、詳しい見積はこちら」の画像と案内文の間隔（画像側の余白は functions.php のインライン指定 10px） */
#estimate-v2-inquiry > p {
  margin-top: 25px;
}

/* 見積結果（中央寄せ）に合わせて、フォーム全体を中央に置く */
.estimateForm .snow-monkey-form {
  margin-left: auto;
  margin-right: auto;
}

/*
 * 「お見積もりの内容」（name="estimate_summary"、項目ブロックに CSS クラス est-summary）は
 * JS が書き込む欄なので、確認画面だけ表示する。
 */
.estimateForm .snow-monkey-form:not([data-screen="confirm"]) .est-summary {
  display: none;
}

/*
 * 太陽光「その他の地域」（archive-try.php）：屋根の大きさの選択欄はフォームの外にあるので、
 * 確認画面・完了画面では隠す（確認画面のあとに選び直しても、送る内容は変わらないため）。
 */
.estimateForm .est-roof {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.estimateForm:has(.snow-monkey-form:is([data-screen="confirm"], [data-screen="complete"], [data-screen="systemerror"])) .est-roof {
  display: none;
}

/*
 * 完了画面（スマホ）：画面幅で折り返し位置が変わるため、左揃えにし、文中の改行（<br>）を出さない。
 * 段落の区切りはそのまま残る。PC は中央揃え・改行ありのまま。
 * 完了画面の文章は管理画面（Snow Monkey Forms の「完了画面」）で書いたもの。段落で中央揃えを指定していても左揃えにする。
 */
@media (max-width: 767px) {
  :is(.contactPage, .estimateForm) .snow-monkey-form[data-screen="complete"] .smf-form,
  :is(.contactPage, .estimateForm) .snow-monkey-form[data-screen="complete"] .smf-form .has-text-align-center {
    text-align: left;
  }
  :is(.contactPage, .estimateForm) .snow-monkey-form[data-screen="complete"] .smf-form br {
    display: none;
  }
}

/* 入力前のお知らせ（制限中のとき、フォームの代わりに表示。functions.php の futawa_form_limit_script） */
.estimateForm .ffg-alert--before {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}