.column-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}

.column-category-filter button {
  min-height: 42px;
  padding: 8px 20px;
  border: 1px solid #bfd0b8;
  border-radius: 999px;
  color: #365c35;
  font: 700 .9rem/1.4 "Noto Sans JP", system-ui, sans-serif;
  background: #fff;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.column-category-filter button:hover,
.column-category-filter button:focus-visible {
  border-color: #3f7f3f;
}

.column-category-filter button:focus-visible {
  outline: 3px solid rgba(63, 127, 63, .2);
  outline-offset: 2px;
}

.column-category-filter button[aria-pressed="true"] {
  border-color: #3f7f3f;
  color: #fff;
  background: #3f7f3f;
}

.tag.notice {
  background: #a56d25;
}

.column-filter-empty {
  margin: 20px 0 0;
  padding: 36px 24px;
  border-radius: 14px;
  color: #556052;
  text-align: center;
  background: #f3f8ef;
}

.column-list[aria-busy="true"] {
  opacity: .55;
}

.column-pagination[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .column-category-filter {
    gap: 8px;
    margin-bottom: 22px;
  }

  .column-category-filter button {
    flex: 1 1 calc(50% - 4px);
    padding-inline: 12px;
  }
}