@charset "UTF-8";
/*
 * layout/default.tpl で Bootstrap 5 にしたページ（search_result.php）用。
 * サイトの CSS は Bootstrap 3 の基準（html 10px・body 14px・ガター 30px・コンテナ幅 750/970/1170）で
 * 書かれているので、Bootstrap 5 の上でその基準に戻す。
 * トップは search_nw/layout/top_default.tpl（Bootstrap 5・専用の CSS）なので関係ない。
 */

html {
  font-size: 10px;
}

body {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

a {
  color: #337ab7;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}

h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.1;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

ul, ol {
  padding-left: 40px;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
}

/*
 * <table border="1"> のセルの枠線（caritem5 の .info-table など）。
 * Bootstrap 5 の reboot が td・th を border-width: 0 にするので、ブラウザの標準（1px inset）に戻す
 */
table[border]:not([border="0"]) td,
table[border]:not([border="0"]) th {
  border-width: 1px;
  border-style: inset;
}

/*
 * Bootstrap 3 の列（col-*）は position: relative だった。Bootstrap 5 にはないので、列の中の position: absolute の要素が
 * body 基準になっていた（search_result.tpl の SP の「条件を変える」ボタン .scroll-container が一覧の途中に浮いて、スクロールで付いてこなかった）。
 * col-form-label など列ではない col- クラスは含めない
 */
[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"],
[class*="col-xl-"],
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  position: relative;
  min-height: 1px;
}

/* グリッド・コンテナ */
.container,
.container-fluid,
.row {
  --bs-gutter-x: 30px;
}

@media (min-width: 576px) {
  .container { max-width: none; }
}

@media (min-width: 768px) {
  .container { max-width: 750px; }
}

@media (min-width: 992px) {
  .container { max-width: 970px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1170px; }
}

/* フォーム・ボタン */
.form-control,
.form-select {
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
}

/* サイトの CSS で色を上書きしていないボタンは Bootstrap 3 の色に戻す（btn-primary・btn-success はサイト側で上書き済み） */
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #f0ad4e;
  --bs-btn-border-color: #eea236;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ec971f;
  --bs-btn-hover-border-color: #d58512;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ec971f;
  --bs-btn-active-border-color: #d58512;
}

/* Bootstrap 5 で廃止された .btn-block */
.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

/*
 * Bootstrap 3 の select.form-control はブラウザ標準の ▼ が出ていた（Bootstrap 5 は .form-select を使う）。
 * .form-select も付いている select（SP の検索モーダル）は Bootstrap 5 が背景画像で ▼ を出すので、ここで戻すと ▼ が 2 つになる。
 * :not() は詳細度が上がって並び替え（style.css の .sortbar-btnpd .form-control の appearance: none）に勝ってしまうので :where() に入れる
 */
select.form-control:where(:not(.form-select)) {
  appearance: auto;
}

/* white-space は Bootstrap 3 の .btn にあった（ないと SP の検索モーダルの「クリア」が「クリ / ア」に折り返す） */
.btn {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  white-space: nowrap;
}

/*
 * SP の検索モーダル（layout/ichiran_search_conditions.tpl）の右上の ×。
 * style.css の .modal-header .modal-close（margin-top: -11%・font-size: 46px）は、中身が空で見えなかった Bootstrap 3 のときの指定。
 * Bootstrap 5 は .btn-close が × を出すので、ヘッダーの上にはみ出していた。トップ（search_nw_css）と同じ値にする
 */
#exampleModal .modal-header .modal-close {
  margin-top: 0;
  font-size: 21px;
}

/*
 * Bootstrap 3 の表示切り替えクラス（visible-* / hidden-*）。
 * テンプレートは Bootstrap 5 のクラス（d-*）も併記しているが、ヘッダーや Ajax で読み込む部分など
 * Bootstrap 3 のクラスだけのところがあるので、同じ動きをここで定義しておく。
 */
.hidden {
  display: none !important;
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-xs { display: block !important; }
  table.visible-xs { display: table !important; }
  tr.visible-xs { display: table-row !important; }
  th.visible-xs,
  td.visible-xs { display: table-cell !important; }
  .hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm { display: block !important; }
  table.visible-sm { display: table !important; }
  tr.visible-sm { display: table-row !important; }
  th.visible-sm,
  td.visible-sm { display: table-cell !important; }
  .hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md { display: block !important; }
  table.visible-md { display: table !important; }
  tr.visible-md { display: table-row !important; }
  th.visible-md,
  td.visible-md { display: table-cell !important; }
  .hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
  .visible-lg { display: block !important; }
  table.visible-lg { display: table !important; }
  tr.visible-lg { display: table-row !important; }
  th.visible-lg,
  td.visible-lg { display: table-cell !important; }
  .hidden-lg { display: none !important; }
}

/* ヘッダー（layout/header.tpl）の PC 用ナビは Bootstrap 3 のクラスのまま */
.navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/* Bootstrap 5 の .nav は折り返すので、メニューが2段目に回って電話番号の下に隠れていた */
@media (min-width: 768px) {
  .navbar-fixed-top .navbar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

/* Bootstrap 3 の .navbar には padding がない（Bootstrap 5 だと中身のない PC 用の nav が帯になって見える） */
.navbar {
  padding: 0;
}

/* Bootstrap 5 が自動で付ける ▼ を消す（Bootstrap 3 では .caret を書いたところだけに出ていた） */
.navbar-fixed-top .dropdown-toggle::after {
  display: none;
}

/*
 * ヘッダーのドロップダウン（.dropdown:hover で開く）を Bootstrap 3 の .dropdown-menu に戻す。
 * Bootstrap 5 は navbar-expand-* の外の .navbar-nav .dropdown-menu を position: static にし、top も付けないので、
 * 開いたメニューが li を縦に伸ばして（.navbar-nav の align-items: center で）上にずれていた。
 * min-width・padding・font-size も rem なので html 10px だと小さくなる。
 * 項目（li > a）の見た目は style.css が付けるので、ここでは Bootstrap 3 にしかなかった white-space だけ戻す。
 * SP 用の nav（navbar-expand-lg）は .navbar-fixed-top の外なので関係ない
 */
.navbar-fixed-top .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 0 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 0px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.navbar-fixed-top .dropdown-menu > li > a {
  white-space: nowrap;
}

/*
 * SP のメニュー（layout/header.tpl の #navbar-collapse1。ハンバーガーで slideToggle）を Bootstrap 3 の xs の見た目に戻す。
 * .navbar は style.css で top: 50px に固定されていて、ヘッダー（61px）と重なる分を Bootstrap 3 の .navbar-nav の
 * margin-top 7.5px と .navbar-collapse の border-top 1px でずらしていた。Bootstrap 5 はどちらも 0 なので、
 * 1 項目目（トラック販売）がヘッダーの下に隠れていた。
 * 項目の下線はサイトの a { text-decoration: underline } だが、Bootstrap 5 の .nav-link が消すので戻す
 */
#navbar-collapse1 {
  padding: 0 15px;
  border-top: 1px solid #e7e7e7;
}

/* Bootstrap 3 の .navbar-collapse の clearfix。下の .navbar-nav の margin を中に収める */
#navbar-collapse1::before,
#navbar-collapse1::after {
  display: table;
  content: " ";
}

#navbar-collapse1::after {
  clear: both;
}

#navbar-collapse1 > .navbar-nav {
  display: block;
  margin: 7.5px -15px;
}

#navbar-collapse1 > .navbar-nav > li > .nav-link {
  position: relative;
  display: block;
  padding: 10px 15px;
  line-height: 20px;
  text-decoration: underline;
}

/* 開いている項目の文字色。サイトの CSS は Bootstrap 3 の .open > a で白にしているが、Bootstrap 5 は .show で黒にする */
#navbar-collapse1 > .navbar-nav > li > .nav-link.show {
  color: #fff;
}

/* 開いたドロップダウン。Bootstrap 3 の xs の .navbar-nav .open .dropdown-menu と同じにする（背景色はサイトの CSS） */
#navbar-collapse1 .dropdown-menu {
  float: none;
  width: auto;
  margin-top: 0;
  font-size: 14px;
  border: 0;
  box-shadow: none;
}

#navbar-collapse1 .dropdown-menu > li > a {
  padding: 5px 15px 5px 25px;
  line-height: 20px;
}

/*
 * Bootstrap 3 で書いた共通パーツ（col-xs-* / col-sm-* が付いている要素）のグリッドを Bootstrap 3 のブレークポイントに戻す。
 * Bootstrap 5 は col-sm が 576px〜・col-md が 768px〜だが、Bootstrap 3 は col-sm が 768px〜・col-md が 992px〜。
 * Bootstrap 5 のクラスだけで書いた要素（col-sm / col-xs なし）には効かない。
 */
@media (min-width: 576px) and (max-width: 767.98px) {
  [class*="col-sm-"] {
    flex: 0 0 auto;
    width: 100%;
  }

  .col-xs-1[class*="col-sm-"] { width: 8.33333333%; }
  .col-xs-2[class*="col-sm-"] { width: 16.66666667%; }
  .col-xs-3[class*="col-sm-"] { width: 25%; }
  .col-xs-4[class*="col-sm-"] { width: 33.33333333%; }
  .col-xs-5[class*="col-sm-"] { width: 41.66666667%; }
  .col-xs-6[class*="col-sm-"] { width: 50%; }
  .col-xs-7[class*="col-sm-"] { width: 58.33333333%; }
  .col-xs-8[class*="col-sm-"] { width: 66.66666667%; }
  .col-xs-9[class*="col-sm-"] { width: 75%; }
  .col-xs-10[class*="col-sm-"] { width: 83.33333333%; }
  .col-xs-11[class*="col-sm-"] { width: 91.66666667%; }
  .col-xs-12[class*="col-sm-"] { width: 100%; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  [class*="col-xs-"][class*="col-md-"],
  [class*="col-sm-"][class*="col-md-"] {
    flex: 0 0 auto;
    width: 100%;
  }

  .col-xs-1[class*="col-md-"] { width: 8.33333333%; }
  .col-xs-2[class*="col-md-"] { width: 16.66666667%; }
  .col-xs-3[class*="col-md-"] { width: 25%; }
  .col-xs-4[class*="col-md-"] { width: 33.33333333%; }
  .col-xs-5[class*="col-md-"] { width: 41.66666667%; }
  .col-xs-6[class*="col-md-"] { width: 50%; }
  .col-xs-7[class*="col-md-"] { width: 58.33333333%; }
  .col-xs-8[class*="col-md-"] { width: 66.66666667%; }
  .col-xs-9[class*="col-md-"] { width: 75%; }
  .col-xs-10[class*="col-md-"] { width: 83.33333333%; }
  .col-xs-11[class*="col-md-"] { width: 91.66666667%; }
  .col-xs-12[class*="col-md-"] { width: 100%; }

  .col-sm-1[class*="col-md-"] { width: 8.33333333%; }
  .col-sm-2[class*="col-md-"] { width: 16.66666667%; }
  .col-sm-3[class*="col-md-"] { width: 25%; }
  .col-sm-4[class*="col-md-"] { width: 33.33333333%; }
  .col-sm-5[class*="col-md-"] { width: 41.66666667%; }
  .col-sm-6[class*="col-md-"] { width: 50%; }
  .col-sm-7[class*="col-md-"] { width: 58.33333333%; }
  .col-sm-8[class*="col-md-"] { width: 66.66666667%; }
  .col-sm-9[class*="col-md-"] { width: 75%; }
  .col-sm-10[class*="col-md-"] { width: 83.33333333%; }
  .col-sm-11[class*="col-md-"] { width: 91.66666667%; }
  .col-sm-12[class*="col-md-"] { width: 100%; }
}