.filter_wrap {
  padding: min(calc(30 * var(--tablet-unit)), 30px);
  background-color: var(--color-very-light-gray);
  max-width: min(calc(1100 * var(--tablet-unit)), 1100px);
}

.search_wrap {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
}
.search_input {
  width: 100%;
  padding: 0.4em;
  font-size: clamp(16px, calc(16 * var(--tablet-unit)), 20px);
  box-sizing: border-box;
}
.btn_clear_search {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: clamp(16px, calc(16 * var(--tablet-unit)), 20px);
}

.list_tags {
  display: flex;
  flex-wrap: wrap;
}
.tag_base {
  background-color: #fff;
  cursor: pointer;
  font-size: clamp(16px, calc(16 * var(--tablet-unit)), 20px);
}

.tag_base:has(input:checked) {
  color: var(--color-white);
  background: var(--color-theme);
}

.filter_result {
  display: block;
}

@media (max-width: 768px) {
  .filter_wrap {
    max-width: 100%;
    padding: calc(20 * var(--sp-unit));
  }
  .search_input,
  .btn_clear_search,
  .tag_base {
    font-size: calc(16 * var(--sp-unit));
  }
}