/* ********************************** 検索ボックス ********************************** */

.search_box_wrapper{
  max-width: 900px;
  margin: 0 auto;
}

.search_container{
  position: relative;
}

/* 共通のスタイル */
.search_box_wrapper .custom_input,
.search_box_wrapper .custom_select,
.search_box_wrapper .custom-search-button{
  padding: 0.7em;
  color: black;
  border: 2px solid black;
  outline: unset;
  font-size: 1em;
  text-align: left;
  width: 11em;
  margin-right: 0.5em;
}

/* input要素のカスタムスタイル */
.search_box_wrapper .custom_input{
  background-image: url(../images/systems/icon/search_icon.svg);
  background-repeat: no-repeat;
  background-position: left 0.8em center;
  background-size: 1.25em;
  padding-left: 2.4em;
  width: 12em;
}

.search_box_wrapper .custom_input:focus-visible{
  background-color: var(--hovercolor);
  border: solid 2px var(--maincolor);
}

/* input要素内のプレースホルダーの色を変更 */
.search_box_wrapper .custom_input::placeholder {
  color: #888; /* プレースホルダーの文字色 */
  opacity: 0.8; /* プレースホルダーの不透明度 */
}

/* select 要素のカスタムスタイル */
.search_box_wrapper .search_box_wrapper .custom_select {
  -webkit-appearance: none; /* ブラウザ固有のスタイルを削除（Safariなど） */
  -moz-appearance: none; /* ブラウザ固有のスタイルを削除（Firefox） */
  appearance: none; /* ブラウザ固有のスタイルを削除（その他） */
  background-color: white; /* 背景色 */
  border: 2px solid black; /* ボーダー */
  padding-right: 30px; /* 右側の余白（アイコン用） */
  background-image: url(../images/systems/icon/simple_arrow_icon.svg); /* カスタムの下矢印アイコン */
  background-size: 1em;
  background-repeat: no-repeat; /* 繰り返さない */
  background-position: right 10px center; /* 右側にアイコンを配置 */
}


/* select 要素のホバーとフォーカス時のスタイル */
.search_box_wrapper .custom_select:hover,
.search_box_wrapper .custom_select:focus {
  border-color: var(--maincolor); /* ホバーとフォーカス時のボーダー色 */
  background-color: var(--maincolor);
  color: white;
  outline: none; /* フォーカス時のアウトラインを削除 */
}

/* 検索ボタンのカスタムスタイル */
.search_box_wrapper .custom_search_btn {
  background-color: black; /* 背景色 */
  color: white; /* 文字色 */
  border-radius: 999px; /* 角の丸み */
  padding: 0.5em 2em;
  margin-right: 0;
  outline: unset;
}

.search_box_wrapper .custom_search_btn:hover {
  background-color: var(--maincolor); /* ホバー時の背景色 */
  border: 2px solid var(--maincolor);
  color: var(--hovercolor);
}

/* サイドバー用の送信ボタン（デフォルトでは非表示に） */
.custom_search_btn2{
  display: none;
}