/* =========================================
   Search Block (Final Clean) PC/SP
   - HTML/PHP変更なし
   - top_site.css / sp.css の absolute 等は検索ブロックだけ無効化
========================================= */

/* --- 0) 検索ブロックだけ absolute/固定を殺す --- */
.site_1,
.site_2_1, .site_2_1_a, .site_2_1_b, .site_5_k,
.site_2_3_a, .site_2_3_b, .site_2_4,
.site_2_3_k, .site_2_4_k,
.site_2_3_s{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  float: none !important;
}

/* --- 1) 見出し（左詰め） --- */
.site_1{
  max-width: 900px;
  margin: 0 auto;
  background: #0A86B8;
  color: #fff;
  border-radius: 18px 18px 0 0;
  padding: 25px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start !important; /* ★左詰め */
  gap: 10px;
  box-sizing: border-box;
}
.site_1_1{ width: 20px !important; height: 20px !important;text-align:left !important; }
.site_1_2{ font-size: 16px !important; font-weight: 800; letter-spacing: .3px; text-align:left !important; }

/* --- 2) 外枠（フォーム箱） --- */
.site_2{
  max-width: 900px;
  margin: 0 auto 40px;
  background: #F2F5F7;
  border-radius: 0 0 18px 18px;
  padding: 22px 22px 26px;
  box-sizing: border-box;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* PC:2列 */
  column-gap: 22px !important;
  row-gap: 14px !important;
  align-items: start;
}

/* --- 3) 掲載番号 / フリーワード（最上段・左右） --- */
.site_2_1_a, .site_2_3_a{ grid-column: 1; }
.site_2_1_b, .site_2_3_b{ grid-column: 2; }

/* タイトル文字 16px 統一 */
.site_2 .field-label,
.site_2 .site_2_1,
.site_2 .site_5_k{
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 900;
  color: #333;
  margin: 0 0 6px;
}

/* input共通（PCは“30px狭く”＝最大幅で制御） */
.editbox{
  width: 100% !important;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  padding: 0 12px;
  font-size: 16px;
  box-sizing: border-box;
  background: #fff;
}

/* --- 4) k_s1（各条件ブロック） --- */
.k_s1{
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 22px !important;
  row-gap: 10px !important;

  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 6px;
  box-sizing: border-box;

  grid-auto-flow: row !important;
}

/* 左側 */
.k_s1 .site_2_1,
.k_s1 .site_2_3,
.k_s1 .site_2_4,
.k_s1 .site_2_3_s{
  grid-column: 1;
  width: 100% !important;
}

/* 右側 */
.k_s1 .site_5_k,
.k_s1 .site_2_3_k,
.k_s1 .site_2_4_k{
  grid-column: 2;
  width: 100% !important;
}

/* ★右ラベルが上に来るように「行」を固定 */
.k_s1 .site_2_1,
.k_s1 .site_5_k{ grid-row: 1 !important; }
.k_s1 .site_2_3,
.k_s1 .site_2_3_s,
.k_s1 .site_2_3_k{ grid-row: 2 !important; }
.k_s1 .site_2_4,
.k_s1 .site_2_4_k{ grid-row: 3 !important; }

/* --- 5) select + 単位（box内右寄せ表示） --- */
.select-wrap, .select-wrap_s{
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important; /* ★kara_1を重ねるため */
  box-sizing: border-box;
}

/* select本体 */
.select-box, .select-box_s{
  width: 180px !important;
  height: 35px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  padding: 0 92px 0 12px !important; /* ★右を空ける（単位ぶん） */
  font-size: 16px;
  box-sizing: border-box;
  background: #fff;

}

/* カスタム矢印は消す */
.select-arrow, .select-arrow_s{ display: none !important; }

/* 単位（年〜/万円〜/mm〜/t〜/h〜）をselect内に“見せる” */
.kara_1{
  position: absolute !important;
  right: 1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding-left: 15px !important;      /* ★左空き15px */
  white-space: nowrap !important;
  pointer-events: none !important;
  font-size: 12px !important;
  color: rgba(0,0,0,.65) !important;
  margin: 0 !important;
}

/* --- 6) editbox / select の幅を「30px狭く」(PCのみ) --- */
@media (min-width: 769px){
  .site_2 .editbox,
  .site_2 .select-box,
  .site_2 .select-box_s{
    max-width: 280px !important; /* ★ここが「30px狭く」 */
  }
}

/* --- 7) ボタン（PC：左に検索、右にクリア） --- */
.btn-post{
  grid-column: 1 / 2 !important;
  justify-self: center;
  width: min(420px, 100%);
  height: 50px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  margin-top: 8px;
left:400px;
top:650px;
}
.btn-post_cle{
  grid-column: 2 / 3 !important;
  justify-self: center;
  width: min(200px, 100%);
  height: 52px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 8px;
left:140px;
top:730px;

}

/* --- 8) SP（1列化 + 文字を適正化） --- */
@media (max-width: 768px), (hover:none) and (pointer:coarse){
  .site_1, .site_2{
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    font-size: 16px !important; /* ★全体文字を上げる */
  }

  .site_2{
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
    padding: 16px 14px 18px;
  }

  .site_2_1_a, .site_2_3_a,
  .site_2_1_b, .site_2_3_b{
    grid-column: 1 !important;
  }

  .k_s1{
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }

  .k_s1 .site_5_k,
  .k_s1 .site_2_3_k,
  .k_s1 .site_2_4_k{
    grid-column: 1 !important;
  }

  .editbox,
  .select-box,
  .select-box_s{
    height: 40px !important;
    font-size: 16px !important;
  }

  /* SPはボタン縦積み */
  .btn-post, .btn-post_cle{
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 520px !important;
    display: block !important;
    margin: 10px auto 0 !important;
    height: 60px;
    line-height: 48px;
  }
}
/* =========================
   FIX：掲載番号・フリーワードを「上段左右」に固定
   （grid-row を明示して“戻る”のを防ぐ）
========================= */
.site_2_1_a{ grid-column: 1 !important; grid-row: 1 !important; }
.site_2_1_b{ grid-column: 2 !important; grid-row: 1 !important; }

.site_2_3_a{ grid-column: 1 !important; grid-row: 2 !important; }
.site_2_3_b{ grid-column: 2 !important; grid-row: 2 !important; }