/* ============================================================
   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;
}
/* 一括見積りページはトップのヒーロー・特徴セクションの直後にフォームが続く（2026-09-13）。
   特徴セクションの薄いベージュ地からリード文までの間隔を空ける */
#container .lp-badges + .form-wrap .lf-pagehead {
  padding-top: 40px;
}
/* LP ヘッダー（sticky・高さ約64px）の下にフォーム先頭が隠れないように（ヒーロー・ヘッダーの CTA が #inputtop へ飛ぶ） */
#inputtop { scroll-margin-top: 72px; }

/* ===== LP ヘッダー（view/top/header.php）を一括見積りページで使うときの打ち消し（2026-09-13） =====
   form.css は共通ヘッダー向けに header / header>div>a を要素セレクタで装飾しており、
   LP ヘッダー（header.lp-header > div > a.lp-header__logo）にも当たってロゴ列が 166px に潰れ、
   body{word-break:break-all} でタグライン・社名が1文字ずつ折れる。top-lp.css の指定に戻す */
header.lp-header { display: block; height: auto; box-shadow: none; }
header.lp-header > div { width: auto; } /* form.css の header>div{width:992px} を外し top-lp.css の max-width:1100px に戻す */
header.lp-header > div > a.lp-header__logo {
  display: flex; width: auto; height: auto; padding-left: 0;
  font-size: inherit; line-height: normal; font-family: inherit; font-style: normal; color: inherit;
}
header.lp-header, header.lp-header * { word-break: normal; }
header.lp-header .lp-header__tagline, header.lp-header .lp-header__logoname { white-space: nowrap; }
#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; }
}

/* ===== 指名依頼（個別見積り）の職人カード（.lf-designated） =====
   /bulk_quote_request/regist/{workers.code} でのみ描画される。
   設計: docs/specs/individual-quote-revival.md */
#container .lf-designated {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 16px;
  border: 1px solid #e3dcd2;
  border-radius: 8px;
  background: #fbf8f4;
}
#container .lf-designated__img {
  width: 88px;
  height: 88px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
}
#container .lf-designated__body { flex: 1 1 auto; min-width: 0; }
#container .lf-designated__label {
  font-size: 12px;
  letter-spacing: .08em;
  color: #8a7a66;
  margin: 0 0 4px;
}
#container .lf-designated__name {
  font-size: 18px;
  font-weight: 700;
  color: #5a4632;
  margin: 0 0 8px;
}
#container .lf-designated__name span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #777;
  margin-top: 2px;
}
#container .lf-designated__note {
  font-size: 13px;
  line-height: 1.8;
  color: #555;
  margin: 0 0 6px;
}
#container .lf-designated__link { font-size: 13px; margin: 0; }
#container .lf-designated__link a { color: #b07d3a; text-decoration: underline; }

@media (max-width: 768px) {
  #container .lf-designated { gap: 12px; padding: 12px; margin-bottom: 20px; }
  #container .lf-designated__img { width: 64px; height: 64px; }
  #container .lf-designated__name { font-size: 16px; }
  #container .lf-designated__note,
  #container .lf-designated__link { font-size: 12px; }
}

/* ===== 撮影スロット（.lf-slots）=====
   ページ型フォームにも、ステップ式フォームと同じ4カット（正面/後ろ/上から/修理箇所）
   ＋追加1枚の撮影スロットを用意する。入口によって撮れる写真が変わると、
   指名依頼を他の職人へ展開したときに職人からの確認が発生するため。
   設計: docs/specs/individual-quote-revival.md */
#container .lf-slots{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  margin:14px 0 6px;
}

#container .lf-tile{
  position:relative;
  aspect-ratio:1 / 1;
  border:2px dashed #cfc6b8;
  border-radius:8px;
  background:#fbf8f4;
  overflow:hidden;
}

#container .lf-tile.is-filled{ border-style:solid; border-color:#005dc5; background:#fff; }

#container .lf-tile-input{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}

#container .lf-tile-body{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  cursor:pointer;
  text-align:center;
  padding:4px;
}

#container .lf-tile-plus{ font-size:22px; line-height:1; color:#b0a08a; }
#container .lf-tile-label{ font-size:13px; font-weight:700; color:#5a4632; }
#container .lf-tile-sub{ font-size:10.5px; line-height:1.3; color:#8a7a66; }

#container .lf-tile.is-filled .lf-tile-body{ background:rgba(255,255,255,.78); opacity:0; }
#container .lf-tile.is-filled:hover .lf-tile-body{ opacity:1; }

#container .lf-tile-img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

#container .lf-tile-guide{
  position:absolute;
  right:4px; bottom:4px;
  z-index:2;
  border:1px solid #cfc6b8;
  border-radius:11px;
  background:rgba(255,255,255,.92);
  color:#7a6a54;
  font-size:11px;
  line-height:1;
  padding:4px 8px;
  cursor:pointer;
}

#container .lf-tile-del{
  position:absolute;
  right:4px; top:4px;
  z-index:2;
  display:none;
  width:22px; height:22px;
  border:none; border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff; font-size:14px; line-height:22px;
  padding:0; cursor:pointer;
}

#container .lf-tile.is-filled .lf-tile-del{ display:block; }

#container .lf-slots__count{
  font-size:12px;
  color:#666;
  margin:0 0 4px;
}

/* ---- 撮り方例モーダル ---- */
#container .lf-guide-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.55);
  padding:20px;
  overflow:auto;
}

#container .lf-guide-modal.open{ display:flex; align-items:center; justify-content:center; }

#container .lf-guide-modal__inner{
  position:relative;
  width:560px;
  max-width:100%;
  background:#fff;
  border-radius:10px;
  padding:22px 20px;
}

#container .lf-guide-modal__close{
  position:absolute;
  right:8px; top:8px;
  width:30px; height:30px;
  border:none; border-radius:50%;
  background:#eee; color:#555; font-size:17px; line-height:30px;
  padding:0; cursor:pointer;
}

#container .lf-guide-modal__ttl{
  font-size:17px; font-weight:700; color:#5a4632;
  margin:0 0 14px; text-align:center;
}

#container .lf-guide-list{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }

#container .lf-guide-item{ margin:0; text-align:center; opacity:.45; transition:opacity .15s; }
#container .lf-guide-item.hl{ opacity:1; }
#container .lf-guide-item img{ width:100%; height:auto; }
#container .lf-guide-item figcaption{ font-size:11px; line-height:1.5; color:#555; margin-top:4px; }
#container .lf-guide-item figcaption b{ display:block; color:#5a4632; }

@media (max-width: 768px){
  #container .lf-slots{ grid-template-columns:repeat(3, 1fr); gap:8px; }
  #container .lf-tile-label{ font-size:12px; }
  #container .lf-tile-sub{ font-size:10px; }
  #container .lf-guide-list{ grid-template-columns:repeat(2, 1fr); }
}