/* ============================================================
 * メルティア フォームUX共通スタイル（2026-08-15 / form-ux）
 * 正本 = dev/clients/メルティア/form-ux/build/form-ux.css
 * ============================================================ */

/* エラーの見た目（入力欄） */
.wpcf7-form-control.wpcf7-not-valid:not(.wpcf7-acceptance){
  border-color:#dc3232;
  background:#FFF8F8;
}

/* 🔴 F7: 同意欄は <span> で border が無いので、枠線では出ない。背景と左バーで示す */
.wpcf7-acceptance.wpcf7-not-valid{
  display:block;
  background:#FFF3F3;
  border-left:3px solid #dc3232;
  padding:.6em .8em;
  border-radius:4px;
}

/* 送信中（JSが効かない場合の保険。CF7が data-status を自動で戻す） */
.wpcf7-form[data-status="submitting"] .wpcf7-submit{
  opacity:.55;
  pointer-events:none;
  cursor:progress;
}

/* ヒント（ラベル直下・入力欄の上）
   🔴 既存 intake.css:89 に `.meltia-intake .mi-hint{...color:#999}`（詳細度0,2,0）がある。
      素の `.mi-hint`（0,1,0）では負けて、/simulation/ だけ見た目が変わってしまう。
      要素名を足して 0,2,1 にし、読み込み順に依存せず全ページで同じ見た目にする。 */
span.mi-hint,
p.mi-hint,
.meltia-intake span.mi-hint,
.meltia-intake p.mi-hint{
  display:block;
  margin:.35em 0 .5em;
  font-size:12.5px;
  line-height:1.6;
  color:#6b6b6b;
  font-weight:normal;
}
@media (max-width:768px){
  span.mi-hint,
  p.mi-hint,
  .meltia-intake span.mi-hint,
  .meltia-intake p.mi-hint{ font-size:12px; }
}

/* 同意ヒントは <label> の外に置く（中に入れるとタップでチェックが動く）。
   同意欄・送信ボタンは中央寄せのフォームがあるので配置を合わせる。 */
p.mi-hint--accept{
  text-align:center;
  margin:0 0 .5em;
}
p.mi-hint--submit{
  text-align:center;
  margin:.7em 0 0;
}