/* ==============================================
   product_reserve フォーム個別スタイル
   微調整はこのファイルに記述してください
   ============================================== */

/* 中身の幅をタイトル(.kaso_h1title)と揃える
   WORKAROUND: 共通の form.css が
     .ec-off1Grid .ec-off1Grid__cell { width:80% !important; margin:0 auto !important }
     .pia-form-wrap { width:80%; margin:0 auto }  (min-width:641px)
   と二重に絞るため 80%x80%=64% になり、タイトル幅と揃わない。
   原因の所在＝共通 form.css。ただし product_contact / product_search / 資料請求 等にも効くため
   上流は触らず、本ファイル(product_reserve 専用)内のスコープだけで打ち消す。
   cell 側は form.css が !important のため同手段が必要。wrap 側は id 指定で詳細度勝ちのみ。
   恒久対応: form.css の 80% 二重絞りを整理できたら、このブロックごと削除する。 */
.ec-registerRole > .ec-off1Grid > .ec-off1Grid__cell {
  width: 100% !important;
  margin: 0 !important;
}
#product_reserve_form_wrap {
  width: 100%;
  margin: 0;
}

/* タイトル下の余白を本ページだけ詰める
   .kaso_h1title の margin-bottom:50px は pc.css の全下層ページ共通指定。上流は触らず、
   本ファイル(product_reserve 専用)のスコープ内でのみ縮める。
   → 他の下層ページのタイトル下間隔は 50px のまま維持される。 */
.ec-registerRole > .kaso_h1title {
  margin-bottom: 24px;
}

/* フロー状態表示 */
.pia-flowline {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;  /* 上の余白を詰める。残りの間隔はタイトル .kaso_h1title の margin-bottom:50px(全下層ページ共通) 由来 */
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
.pia-flowline li {
  text-align: center;
  font-size: 0.85em;
  line-height: 1.3;
  padding: 6px 12px;
  color: #999;
  min-width: 68px;
  position: relative;
}
.pia-flowline li::after {
  content: '›';
  position: absolute;
  right: -4px;
  top: 12px;
  font-size: 1.5em;
  color: #ccc;
  line-height: 1;
}
.pia-flowline li:last-child::after { content: ''; }
.pia-flowline li.active { color: #755eef; font-weight: bold; }
.pia-flowline .flow_number {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #ddd;
  color: #666;
  margin: 0 auto 4px;
  font-weight: bold;
}
.pia-flowline li.active .flow_number { background: #755eef; color: #fff; }

/* ご注意ボックス */
#chuibox {
  background: #fff8e7;
  border: 1px solid #f0c040;
  border-radius: 5px;
  padding: 20px 24px;
  margin-bottom: 20px;
  font-size: 0.9em;
  text-align: center;
}
/* 見出しは h5 既定(約1.22em)ではなく本文と同サイズに揃える */
#chuibox h5 { color: #c0392b; margin: 0 0 10px; font-size: 1em; font-weight: bold; }
/* センター揃えを左右対称にするため、リストのぶら下げインデントを解除
   （マーカーは上位 pc.css の ul{list-style:none} で既に非表示） */
#chuibox ul { margin: 0; padding-left: 0; }

/* 数量の入力欄を短く
   WORKAROUND: 共通 form.css の `.pia-form-table .ec-input input { width:100% }` と
   コア style.css の `.ec-input input { width:100% }` で 1桁入力に 870px 超が割り当たるため、
   本ページ内スコープで詳細度を上げて上書きする(!important 不要)。原因の所在＝共通/コア側の一律 width:100%。
   恒久対応: 数値入力に幅を配る仕組みが上流に入ったら削除。 */
#product_reserve_form_wrap .ec-input input[type="number"] {
  width: 6em;
  min-width: 90px;
  max-width: 100%;
}

/* フォーム表の左列(th)を広げる
   共通 form.css は `.pia-form-table th { width:180px }`(=表幅1090pxの約16.5%)。
   これを表幅比 19.5%(+3ポイント) に。共通側は product_contact 等にも効くため上流は触らない。
   SP(<=640px)では form.css が th/td を display:block; width:100% にするため、
   PC幅(min-width:641px)にのみ適用してモバイル表示を壊さないこと。 */
@media only screen and (min-width:641px) {
  #product_reserve_form_wrap .pia-form-table th {
    width: 19.5%;
  }
}

/* 目安価格ボックス */
.meyasu_price {
  background: #f8f9fa;
  padding: 10px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 0.9em;
}

/* NGC鑑定代金一覧ホバープレビュー */
a#ngcprice span { text-decoration: underline; }
@media only screen and (min-width:641px) {
  /* ラジオ(希望/不要)の右側に並べる。td は table-cell のまま維持し、
     inline-block 同士で横並びにする（float だと clear が要る＆列揃えに影響するため使わない） */
  #top_box__ngc .ec-radio {
    display: inline-block;
    vertical-align: middle;
    width: auto;
  }
  a#ngcprice {
    position: relative;
    width: 330px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 20px;
  }
  a#ngcprice img {
    position: absolute;
    top: -40px;
    width: 330px;
    height: auto;
    transition: opacity 0.5s ease;
    opacity: 0;
  }
  a#ngcprice:hover { text-decoration: none; }
  a#ngcprice:hover img { opacity: 1; }
}
@media only screen and (max-width:640px) { a#ngcprice img { display: none; } }

/* 商品セル: 画像=左 / 目安価格・商品名=右 の2カラム */
.reserve-product-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
/* WORKAROUND: EC-CUBEコア style.css / default_style.css の
   `.ec-registerRole img { width:100%; max-width:100% }` (詳細度 0,1,1) が
   `.reserve-product-img` (0,1,0) に勝ち、商品画像が幅いっぱいに膨張するため、
   自分のボックス内スコープ (0,2,0) で打ち消す。原因の所在＝コア側。!important は使わない。
   恒久対応: コアの `.ec-registerRole img` 依存が解消されたら単独セレクタに戻す。 */
.reserve-product-box .reserve-product-img {
  flex: 0 0 120px;
  width: 120px;
  max-width: 120px;
  height: auto;
  margin: 0;
  display: block;
}
.reserve-product-info {
  flex: 1 1 auto;
  min-width: 0;
}
.reserve-product-name {
  margin: 0;
}
@media only screen and (max-width:640px) {
  .reserve-product-box { gap: 10px; }
  .reserve-product-box .reserve-product-img {
    flex-basis: 90px;
    width: 90px;
    max-width: 90px;
  }
}