/* Search & Filter */
.searchandfilter ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.searchandfilter li {
  padding: 0;
  width: 100%;
  position: relative;
}

.searchandfilter select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 50px;
  font-size: var(--font-size-sm);
  color: var(--systemColor--defaultText);
  padding: 0 30px 0 35px;
  background-color: #FFF;
}

.searchandfilter ul>li:last-child input:last-child {
  height: 100%;
  background-color: var(--systemColor--red);
  border: none;
  color: #FFF;
}

.searchItem--sp {
  display: grid;
  width: 350%;
}

.searchItem-2S--sp {
  display: flex;
  justify-content: space-between;
}

.searchandfilter ul,
.searchItem--sp,
.searchItem-2S--sp {
  gap: 5px;
}

.searchandfilter input,
.searchandfilter select {
  border-radius: 2px;
  font-weight: bold;
  border-color: var(--systemColor--thin--gray);
  width: 100%;
  cursor: pointer;
}

.searchandfilter li::before {
  content: '';
  display: block;
  width: 25px;
  height: 100%;
  position: absolute;
  left: 5px;
}

li:has(#ofrec_taxonomy_jobtype__industry)::before {
  background: url(https://dev.hitoriku.work/wp/wp-content/uploads/2025/09/職種.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

li:has(#ofarea)::before {
  background: url(https://dev.hitoriku.work/wp/wp-content/uploads/2025/09/勤務地.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

li:has(#ofrec_taxonomy_atmosphere)::before {
  background: url(https://dev.hitoriku.work/wp/wp-content/uploads/2025/09/雰囲気.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.searchandfilter li::after {
  content: '';
  display: block;
  width: 1rem;
  height: 100%;
  position: absolute;
  top: 0;
  right: 5px;
  background: url(https://dev.hitoriku.work/wp/wp-content/uploads/2025/09/開けるボタン.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.searchandfilter ul>li:last-child:after,
.searchandfilter ul>li:last-child::before {
  display: none;
}


@media (min-width: 768px) {

  /******* 検索 *******/
  .searchandfilter {
    margin: auto;
    max-width: 800px;
  }

  .searchandfilter select,
  .searchandfilter input {
    height: 50px;
    font-size: var(--font-size-xs);
  }

  .searchandfilter select {
    padding: 0 20px 0 25px;
  }

  .searchandfilter ul>li:last-child {
    width: fit-content;
  }

  .searchandfilter ul>li:last-child input:last-child {
    background-color: var(--systemColor--blueGreen);
    width: 80px;
  }

  .searchandfilter li::before {
    width: 20px;
  }

  .searchandfilter li::after {
    width: 1rem;
  }

}