/* ============================================================
   leather-form.css — /bulk_quote_request/regist 専用 上書きCSS
   form.css / roman.css / common.css の後に効かせ、#container や
   .flow-wrap.is-active などの詳細度で上書きする（後勝ちに依存しない）。
   既存の form.css / _form.scss は無改変。
   ※作業3（スマホネイティブUI＋スリム化）のCSphアは段階2でこの下に追記予定。
   ============================================================ */

/* ===== 作業2: 取引の流れ アコーディオン ===== */
/* 見出し（.c-ttl01）全体をクリック領域にする */
.flow-wrap .c-ttl01 {
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.flow-wrap .c-ttl01 h2 {
  padding: 6px 0;
  margin-bottom: 16px;
}
/* 開閉インジケータ（▼）。開いている時は180度回転して▲に */
.flow-wrap .c-ttl01 h2::after {
  content: "\e313"; /* Material Icons: expand_more */
  font-family: 'Material Icons';
  font-size: 22px;
  vertical-align: middle;
  margin-left: 8px;
  display: inline-block;
  color: #777;
  transition: transform .25s ease;
}
.flow-wrap.is-active .c-ttl01 h2::after {
  transform: rotate(180deg);
}
/* 初期は閉じる（FOUC回避：CSSで最初から隠す）。
   JSで is-active 付与＋slideToggle（インラインdisplay）で開閉する。 */
.flow-wrap .list-wrap,
.flow-wrap .caption {
  display: none;
}
.flow-wrap.is-active .list-wrap,
.flow-wrap.is-active .caption {
  display: block;
}

/* ===== 作業3: スマホネイティブUI ===== */
/* 入力欄のiOS自動ズーム対策＋tap領域拡大。
   テキスト入力系のみ（checkbox/file/hidden は除外）。
   iOSは font-size 16px未満の入力欄でフォーカス時に自動ズームするため16pxに固定。 */
#container input[type="text"],
#container input[type="email"],
#container input[type="tel"],
#container input[type="number"],
#container select,
#container textarea {
  box-sizing: border-box;
  font-size: 16px;
  min-height: 44px;
  padding: 12px;
  line-height: 1.5;
}
#container textarea {
  min-height: 120px;
  height: auto;
}
/* 症状チェックボックス：行の間隔を広げてタップしやすく（枠・✓・配置は既存のまま） */
#container .c-checkboxList .c-checkbox {
  padding-top: 8px;
  padding-bottom: 8px;
}
#container .c-checkboxList .c-checkbox label {
  line-height: 1.6;
}
/* 送信／確認ボタン：文字を読みやすく（透明input構造・背景色は無改変） */
#container .c-btn02 {
  font-size: 17px;
}
/* 入力確認画面：スマホでは各項目を縦積みにして窮屈さを解消 */
@media (max-width: 768px) {
  #conftop .c-table .row { flex-direction: column; }
  #conftop .c-table .row dt,
  #conftop .c-table .row dd { width: 100%; }
  #conftop .c-table .row dt { padding-bottom: 2px; }
}

/* ===== 作業A: フォーム冒頭のページタイトル（.lf-pagehead） =====
   既存の form.css 等の見出し既定値に勝つよう #container 接頭辞で詳細度を確保 */
#container .lf-pagehead {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 4px 16px 0;
  text-align: center;
}
#container .lf-pagehead__ttl {
  font-size: 26px;
  line-height: 1.5;
  font-weight: 700;
  color: #5a4632;
  margin: 0 0 14px;
}
#container .lf-pagehead__lead {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  text-align: left;
  margin: 0;
}

/* ===== 作業C: スマホでは「取引の流れ」STEPを1列×6に =====
   既存は flex で li を 33.33%/48% 等に並べている（最大詳細度 .form-wrap>section .flow-wrap .list-wrap ul li）。
   #container 接頭辞（id級）で確実に上書きする。 */
@media (max-width: 768px) {
  #container .lf-pagehead { margin-bottom: 20px; padding: 2px 4px 0; }
  #container .lf-pagehead__ttl { font-size: 20px; margin-bottom: 10px; }
  #container .lf-pagehead__lead { font-size: 14px; line-height: 1.85; }

  #container .flow-wrap .list-wrap ul { display: block; }
  #container .flow-wrap .list-wrap ul li { width: 100%; float: none; }
}