/* ---------------------------------------------------------
 * Snow Monkey Forms 用スタイル
 * 正本: design-reference/11-contact-pc.png, 11-contact-sp.png
 *       design-reference/10-free-pc.png, 10-free-sp.png
 *
 * SMF DOM:
 *   form.snow-monkey-form
 *     .smf-item > .smf-item__col--label + .smf-item__col--controls
 *     .smf-item.smf-item--divider (ラベル無し)
 *     .smf-action (ボタン)
 *
 * 全セレクタに form.snow-monkey-form を付けてSMFプラグインCSSに勝つ
 * ------------------------------------------------------- */

/* ==========================================================
 * SMFデフォルトCSSリセット（プラグインとの競合防止）
 * ========================================================== */
form.snow-monkey-form .smf-item {
  border: none;
  padding: 0;
  margin: 0;
}

form.snow-monkey-form .smf-item__col {
  padding: 0;
  max-width: none;
  flex: none;
}

form.snow-monkey-form .smf-item__col--label {
  background: none;
  border: none;
}

/* テキスト入力の line-height リセット */
form.snow-monkey-form .smf-text-control {
  line-height: normal;
}


/* ==========================================================
 * フォーム全体
 * ========================================================== */
form.snow-monkey-form {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 1025px) {
  form.snow-monkey-form {
    max-width: 955px;
    padding-inline: 0;
    gap: 0;
  }
}

/* ==========================================================
 * フォーム行（.smf-item）
 * SP: 縦積み（ラベル上＋入力下）
 * PC: ラベル左214px ＋ 入力右   
 * ========================================================== */
form.snow-monkey-form .smf-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1025px) {
  form.snow-monkey-form .smf-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 53px; /* 入力48 + 53 = 行ピッチ101px */
  }
  form.snow-monkey-form .smf-item:has(.smf-textarea-control) {
    margin-bottom: 37px;
  }
}

/* SP: 各フォーム行の下にグレー区切り線 */
@media (max-width: 1024px) {
  form.snow-monkey-form .smf-item:not(.smf-item--divider) {
    padding-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;
  }
}

/* ==========================================================
 * ラベル列  （太字16px #222 + 必須赤12px）
 * ========================================================== */
form.snow-monkey-form .smf-item__col--label {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

@media (min-width: 1025px) {
  form.snow-monkey-form .smf-item__col--label {
    width: 214px;
    flex: 0 0 214px;
    padding-top: 9px;
  }
}

form.snow-monkey-form .smf-item__label label,
form.snow-monkey-form .smf-item__label__text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #222;
}

/* 必須バッジ（必須バッジ） */
form.snow-monkey-form .smf-item:not(.smf-item--divider) .smf-item__label::after {
  content: "※必須";
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: #c00;
  white-space: nowrap;
}

/* ==========================================================
 * 入力列
 * ========================================================== */
form.snow-monkey-form .smf-item__col--controls {
  flex: 1;
  min-width: 0;
}

/* ==========================================================
 * テキスト入力・メール入力
 * 枠#ccc / 高さ50(SP)/48(PC) / font16px / placeholder #b3b3b3
 * ========================================================== */
form.snow-monkey-form .smf-text-control__control {
  width: 100%;
  max-width: none;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-black);
  background: var(--color-bg-white);
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 0 16px;
  height: 50px;
  box-shadow: none;
}

@media (min-width: 1025px) {
  form.snow-monkey-form .smf-text-control__control {
    height: 48px;
  }
}

form.snow-monkey-form .smf-text-control__control::placeholder {
  color: #b3b3b3;
}

form.snow-monkey-form .smf-text-control__control:focus {
  outline: 2px solid var(--color-navy);
  outline-offset: 1px;
  border-color: #ccc;
}

/* ==========================================================
 * セレクト
 * 同テキスト入力 + ▼矢印
 * ========================================================== */
form.snow-monkey-form .smf-select-control {
  position: relative;
  display: block;
  width: 100%;
}

form.snow-monkey-form .smf-select-control__control {
  width: 100%;
  max-width: none;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-black);
  background: var(--color-bg-white);
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 0 44px 0 16px;
  height: 50px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: none;
}

@media (min-width: 1025px) {
  form.snow-monkey-form .smf-select-control__control {
    height: 48px;
  }
}

form.snow-monkey-form .smf-select-control__control:focus {
  outline: 2px solid var(--color-navy);
  outline-offset: 1px;
  border-color: #ccc;
}

/* ▼矢印 */
form.snow-monkey-form .smf-select-control__toggle {
  display: block;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

form.snow-monkey-form .smf-select-control__toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 10px;
  height: 10px;
  border: 0;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  transform: translateY(-70%) rotate(45deg);
  background: none;
}

/* 開いている間は▼を▲に（smf-select.js が .is-open を付与） */
form.snow-monkey-form .smf-select-control.is-open .smf-select-control__toggle::before {
  transform: translateY(-30%) rotate(-135deg);
}

/* ==========================================================
 * カスタム選択肢パネル（smf-select.js が body 直下に生成）
 * ネイティブ <select> の開くリストは CSS 不可なので、リストだけ自前で描く。
 * 閉じた箱（.smf-select-control__control）と枠・字送りを合わせる。
 * ========================================================== */
.pb-select-panel {
  position: fixed;
  z-index: 1000;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-bg-white, #fff);
  border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 16, 62, 0.16);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-black);
  -webkit-overflow-scrolling: touch;
}

.pb-select-panel__option {
  padding: 12px 16px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* キーボード/ホバーで指しているもの */
.pb-select-panel__option.is-active {
  background: rgba(0, 16, 62, 0.06);
}

/* 現在選択中（aria-selected は is-active と兼用のため、選択の強調は色で） */
.pb-select-panel__option[aria-selected="true"] {
  color: var(--color-navy);
  font-weight: 700;
}

/* プレースホルダ行（空 value） */
.pb-select-panel__option.is-placeholder {
  color: #b3b3b3;
}

/* ==========================================================
 * テキストエリア
 * 高さ197px / padding14px 16px
 * ========================================================== */
form.snow-monkey-form .smf-textarea-control__control {
  width: 100%;
  max-width: none;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-black);
  background: var(--color-bg-white);
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 14px 16px;
  height: 197px;
  resize: vertical;
  box-shadow: none;
}

form.snow-monkey-form .smf-textarea-control__control::placeholder {
  color: #b3b3b3;
}

form.snow-monkey-form .smf-textarea-control__control:focus {
  outline: 2px solid var(--color-navy);
  outline-offset: 1px;
  border-color: #ccc;
}

/* ==========================================================
 * チェックボックス行（同意チェック）
 * 中央揃え / □16px + テキスト14px
 * ========================================================== */
form.snow-monkey-form .smf-item.smf-item--divider {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0;
}

@media (min-width: 1025px) {
  form.snow-monkey-form .smf-item.smf-item--divider {
    margin-top: 0;
    margin-bottom: 0;
  }
}

form.snow-monkey-form .smf-checkbox-control {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #222;
  cursor: pointer;
  max-width: 640px;
}

form.snow-monkey-form .smf-checkbox-control__control {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  flex: 0 0 16px;
  accent-color: var(--color-navy);
  appearance: auto;
  -webkit-appearance: auto;
  border: 1px solid #ccc;
  border-radius: 0;
  background: var(--color-bg-white);
  box-shadow: none;
  cursor: pointer;
}

form.snow-monkey-form .smf-checkbox-control__control:checked {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
}

/* 無料相談: 同意チェック行（□ リンク + 「に同意します。」が1行）*/
form.snow-monkey-form .smf-item--divider .smf-item__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* 同意文言内のリンク（smf-select.js が .smf-checkbox-control__label 内に生成）。
   Figma は青リンク（≒ #004EA2 = サイトの primary blue）。下線は hover 時のみ。 */
form.snow-monkey-form .smf-checkbox-control__label a {
  color: #004EA2;
  text-decoration: none;
}

form.snow-monkey-form .smf-checkbox-control__label a:hover {
  text-decoration: underline;
}

/* チェックボックスのラベルもインライン化 */
form.snow-monkey-form .smf-item--divider .smf-checkboxes-control {
  display: inline;
}

form.snow-monkey-form .smf-item--divider .smf-checkboxes-control__control {
  display: inline;
}

form.snow-monkey-form .smf-item--divider .smf-label {
  display: inline;
}

/* ==========================================================
 * 送信ボタン（.smf-action）
 * #004EA2 / 白文字 / 角丸15px / 幅402px / 高さ64px / font20px bold
 * ========================================================== */
form.snow-monkey-form .smf-action {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-inline: var(--container-pad-sp);
}

@media (min-width: 1025px) {
  form.snow-monkey-form .smf-action {
    margin-top: 32px;
    padding-inline: 0;
  }
}

/* ボタンのラッパ（.smf-button-control）は .smf-action(flex) の子。
   何もしないと内容幅に縮み、内側 button の width:100% が 402px に届かない。
   flex で伸ばし、max-width で Figma の 402px に収める（入力=1個/確認=戻る+送信の2個 両対応）。 */
form.snow-monkey-form .smf-action .smf-button-control {
  flex: 1 1 402px;
  max-width: 402px;
  min-width: 0;
}

form.snow-monkey-form .smf-action .smf-button-control__control {
  width: 100%;
  max-width: 402px;
  height: 64px;
  background: #004EA2;
  background-image: none;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: opacity var(--transition-base);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

form.snow-monkey-form .smf-action .smf-button-control__control:hover {
  opacity: 0.9;
}

/* SP版ボタン: 戻る/送信を縦積みでフル幅に揃える（色はPCと同じ塗り#004EA2/白文字。
   Figma SP 確認ボタン(elements/button/normal_lg)は fill #004ea2・text #f9f7f2・枠なしで
   PCと同一。旧実装は破損SP参照からの推測で白背景+紺枠にしていた誤り＝2026-07-20是正） */
@media (max-width: 1024px) {
  /* column + flex-wrap:wrap + gap だと2列目が gap 分だけ痩せるので wrap を止め、
     ラッパを明示 width:100% で揃える。 */
  form.snow-monkey-form .smf-action {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  form.snow-monkey-form .smf-action .smf-button-control {
    flex: none;
    width: 100%;
    max-width: none;
  }
}

/* 「戻る」ボタンの既定（確認画面の実値は下の data-screen="confirm" 節で上書き）
   ※ .smf-action の先頭子は隠しinput(token)なので :first-child では当たらない。
      SMF が付与する data-action="back" で確実に狙う。 */
form.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"] {
  background: #fff;
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
}

/* ==========================================================
 * 入力エラー画面（SMF は検証失敗時に data-screen="invalid" を立てる）
 * 正本: Figma お問合せ 26108:803(PC) / 26161:3129(SP)
 *       無料相談   26104:591(PC)  / 26161:3445(SP)
 *
 * DOM: .smf-placeholder > .smf-text-control + .smf-error-messages
 *
 * ⚠️ Figma は入力枠を赤くしない（エラー時も stroke #cccccc のまま）。
 *    エラーの手がかりが文言の色だけになるため、枠色も変えるかは
 *    docs/figma-要確認事項.md でクライアント確認中。確認が付くまでFigma準拠。
 * ⚠️ エラー文言の位置は PC=入力枠の直下 / SP=ラベル行の右端 とFigmaで異なるが、
 *    ユーザ指示（2026-07-22）により当面 PC を正として両ビューポートに適用する。
 * ========================================================== */
form.snow-monkey-form .smf-error-messages {
  display: block;
  margin-top: 5px; /* Figma: 枠下端511 → 文言top516 */
  padding-left: 20px; /* Figma: 枠左480 → 文言左500 */
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
  color: #cc0000;
}

/* ==========================================================
 * 無料相談バリアントの余白調整
 * ========================================================== */
@media (min-width: 1025px) {
  body.is-free form.snow-monkey-form { margin-top: 80px; }
  body.is-free form.snow-monkey-form .smf-item:has(.smf-textarea-control) { margin-bottom: 80px; }
  body.is-free form.snow-monkey-form .smf-action { margin-top: 33px; }
}

/* ==========================================================
 * 入力確認画面 / 送信完了画面
 * 正本: Figma お問合せ 26108:904(PC) / 26161:3202(SP)
 *       無料相談   26104:1333(PC) / 26161:3320(SP)
 *
 * SMF は送信のたび form へ data-screen="input|confirm|complete" を付与する
 * （snow-monkey-forms/src/js/module/submit.js の form.setAttribute）。
 * ページ側テキストの出し分けもこれを :has() で拾うのでJSを足さない。
 * ========================================================== */

/* --- ページ側テキストの出し分け ---
   確認画面: Figmaにリード文は無く、案内文が「送信する」を指す文言に変わる。
   完了画面: リード文・見出し・案内文とも無く、par-subtitle とメッセージだけ。 */
.contact-form__note--confirm {
  display: none;
}

.contact-form-section:has(form.snow-monkey-form[data-screen="confirm"]) .contact-lead,
.contact-form-section:has(form.snow-monkey-form[data-screen="confirm"]) .contact-form__note--input {
  display: none;
}

.contact-form-section:has(form.snow-monkey-form[data-screen="confirm"]) .contact-form__note--confirm {
  display: block;
}

.contact-form-section:has(form.snow-monkey-form[data-screen="complete"]) .contact-lead,
.contact-form-section:has(form.snow-monkey-form[data-screen="complete"]) .contact-form__heading,
.contact-form-section:has(form.snow-monkey-form[data-screen="complete"]) .contact-form__note {
  display: none;
}

/* --- 確認画面: 必須バッジと同意チェック行は Figma に無い ---
   （同意値は .smf-placeholder 内の hidden input が保持するので display:none で送信に影響しない） */
/* 打ち消し元（.smf-item:not(.smf-item--divider) .smf-item__label::after）と
   同じ構造で書かないと詳細度で負ける。 */
form.snow-monkey-form[data-screen="confirm"] .smf-item:not(.smf-item--divider) .smf-item__label::after {
  content: none;
}

form.snow-monkey-form[data-screen="confirm"] .smf-item--divider {
  display: none;
}

/* --- 確認画面の行（SP=縦積み。ラベルlh24の下に8px空けて値、行ピッチ80px） --- */
form.snow-monkey-form[data-screen="confirm"] .smf-item:not(.smf-item--divider) {
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 0;
  border-bottom: none; /* 入力画面のSP区切り線は確認画面に無い */
}

form.snow-monkey-form[data-screen="confirm"] .smf-item__label label,
form.snow-monkey-form[data-screen="confirm"] .smf-item__label__text {
  font-size: 16px;
  line-height: 24px;
  color: #222;
}

/* 値。Figmaは入力例が Inter 14.5〜15.9px と揺れるが、これは同一部品内の
   フォント/サイズ揺れ＝Figmaアノマリー（方針§5）。ラベルと同じ16pxに寄せる。 */
form.snow-monkey-form[data-screen="confirm"] .smf-placeholder {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #121212;
}

@media (min-width: 1025px) {
  /* Figma: ラベル左端330 〜 値右端1110 = 780px を中央寄せ */
  form.snow-monkey-form[data-screen="confirm"] {
    max-width: 780px;
  }

  form.snow-monkey-form[data-screen="confirm"] .smf-item:not(.smf-item--divider) {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 40px; /* 行ピッチ68px = lh28 + 40 */
  }

  form.snow-monkey-form[data-screen="confirm"] .smf-item__col--label {
    width: 163px; /* Figma: ラベル330 → 値493 */
    flex: 0 0 163px;
    padding-top: 0;
  }

  form.snow-monkey-form[data-screen="confirm"] .smf-item__label label,
  form.snow-monkey-form[data-screen="confirm"] .smf-item__label__text,
  form.snow-monkey-form[data-screen="confirm"] .smf-placeholder {
    line-height: 28px;
  }
}

/* --- 確認画面のボタン ---
   Figma: PC 350x64 / SP 300x64、角丸15、gap PC59・SP32。
   戻る = 白地 + 枠#767676 1px + 文字#85827d、送信 = #004ea2 + 文字#f9f7f2。 */
form.snow-monkey-form[data-screen="confirm"] .smf-action {
  align-items: center;
  gap: 32px;
}

form.snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control {
  flex: none;
  width: 300px;
  max-width: 300px;
}

form.snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control {
  width: 100%;
  max-width: none;
  height: 64px;
  border-radius: 15px;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #f9f7f2;
}

form.snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"] {
  background: #fff;
  border: 1px solid #767676;
  color: #85827d;
}

@media (min-width: 1025px) {
  form.snow-monkey-form[data-screen="confirm"] .smf-action {
    flex-direction: row;
    gap: 59px;
  }

  form.snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control {
    width: 350px;
    max-width: 350px;
  }

  form.snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control {
    font-size: 20px;
    letter-spacing: 0.05em; /* Figma ls 1px / fs20 */
  }
}

/* --- 送信完了画面: par-subtitle の下に本文だけ --- */
form.snow-monkey-form[data-screen="complete"] .smf-form {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #222;
  text-align: center;
}

form.snow-monkey-form[data-screen="complete"] .smf-form p {
  margin: 0;
}

/* Figma は2文の間に空行がある（seed の <br><br>）。SMF側のレンダリングで
   <br><br> が2つの <p> に分割されるため、段落間マージンで空行を再現する。
   空行の高さ＝1行分（SP line-height 24px / PC 28px）。 */
form.snow-monkey-form[data-screen="complete"] .smf-form p + p {
  margin-top: 24px;
}

form.snow-monkey-form[data-screen="complete"] .smf-action {
  display: none; /* 完了画面にボタンは無い */
}

@media (min-width: 1025px) {
  form.snow-monkey-form[data-screen="complete"] .smf-form {
    font-size: 16px;
    line-height: 28px;
  }

  form.snow-monkey-form[data-screen="complete"] .smf-form p + p {
    margin-top: 28px;
  }
}