/* ページ共通ヘッダ */
.filter_control *,
*::before,
*::after {
  box-sizing: border-box;
}

.filter_control {
  --filter-text-color: var(--color-black);
  --filter-text-font-size: 14px;
  --filter-text-font-weight: bold;
  --filter-normal-border: 1px solid var(--color-black);
  --filter-selected-border: 3px solid var(--color-black);
  --filter-border-radius: 10px;
  margin-top: 10px;
}

/* 絞り込み項目のチェックボックススタイル start */
.filter_control > .filter {
  --filter-background-color: var(--color-white);

  background-color: var(--filter-background-color);
  margin-bottom: 5px;
}

.filter_control > .filter > .filter_titles > .title {
  font-weight: bold;
  font-size: 16px;
  margin-left: 10px;
}

.filter_control > .filter > .filter_titles > .filter_reset {
  cursor: pointer;
  border: none;
  background-color: inherit;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
  padding-left: 0;
  padding-right: 0;
  margin-left: 16px;
}

.filter_control > .filter > .filter_items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  margin: 0 25px;
  padding: 5px 0;
}

.filter_control > .filter > .filter_items > label {
  display: block;
  margin: 4px; /* ボタン同士の間隔 */

  /* 見た目 */
  color: var(--filter-text-color);
  font-size: var(--filter-text-font-size);
  font-weight: var(--filter-text-font-weight);

  padding: 5px 0;
  cursor: pointer;
}

.filter_control > .filter > .filter_items > label > input {
  display: none;
}

.filter_control > .filter > .filter_items > label > span {
  padding: 5px 17px;
  border: var(--filter-normal-border);
  border-radius: var(--filter-border-radius);
}

.filter_control > .filter > .filter_items > label > input:checked + span {
  padding: 4px 16px;
  border: var(--filter-selected-border);
  border-radius: var(--filter-border-radius);
}
/* 絞り込み項目のチェックボックススタイル end */