.c-list-head[data-astro-cid-ln6ym5ft] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label"
                       "title total";
  align-items: end;
  row-gap: 2.5rem;
}

@media (width < 768px) {
  .c-list-head[data-astro-cid-ln6ym5ft] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label"
                         "title"
                         "total";
    row-gap: 1.6rem;
  }
}

.c-list-head__extra[data-astro-cid-ln6ym5ft] {
  grid-column: 1 / -1;
  margin-block-start: 1.6rem;
}

.c-list-head[data-astro-cid-ln6ym5ft] > .c-section-label {
  grid-area: label;
}

.c-list-head__title[data-astro-cid-ln6ym5ft] {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-48);
  letter-spacing: .12em;
  line-height: 1.2;
}

@media (width < 768px) {
  .c-list-head__title[data-astro-cid-ln6ym5ft] {
    font-size: 3rem;
  }
}

.c-list-head__total[data-astro-cid-ln6ym5ft] {
  grid-area: total;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-12);
  letter-spacing: .12em;
  line-height: 1.2;
}

.c-list-head__total[data-astro-cid-ln6ym5ft] span[data-astro-cid-ln6ym5ft] {
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-34);
  letter-spacing: .04em;
}
.c-filter[data-astro-cid-4nminnts] {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-filter__legend[data-astro-cid-4nminnts] {
  float: inline-start;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.c-filter__en[data-astro-cid-4nminnts] {
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label-wider);
}

.c-filter__ja[data-astro-cid-4nminnts] {
  font-size: var(--fs-9);
  color: var(--color-ink-sub);
}

.c-filter__options[data-astro-cid-4nminnts] {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.c-filter__pill[data-astro-cid-4nminnts] {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  block-size: 3.2rem;
  padding-inline: 1.4rem;
  border: 1px solid var(--color-line-off);
  border-radius: 999px;
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-12);
  letter-spacing: .14em;
  line-height: 1;
  color: var(--color-ink-sub);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.c-filter__pill[data-astro-cid-4nminnts]:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.c-filter__count[data-astro-cid-4nminnts] {
  font-size: var(--fs-10);
  letter-spacing: .04em;
  opacity: .7;
}

.c-filter__input[data-astro-cid-4nminnts]:checked + .c-filter__pill[data-astro-cid-4nminnts] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-card);
}

.c-filter__input[data-astro-cid-4nminnts]:focus-visible + .c-filter__pill[data-astro-cid-4nminnts] {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

@media (width < 768px) {
  .c-filter[data-astro-cid-4nminnts] {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .c-filter__pill[data-astro-cid-4nminnts] {
    block-size: 3rem;
    padding-inline: 1.2rem;
    font-size: var(--fs-11);
  }
}
/* 並び替えの間だけ、各項目に名前を付けて動かす */
  [data-sort-scope].is-sorting [data-sort-item] {
    view-transition-name: var(--sort-name);
    view-transition-class: sort-item;
  }

  /* 並び替えのときは、ページ全体ではなく各項目だけを動かす */
  html:active-view-transition-type(sort)::view-transition-old(root),
  html:active-view-transition-type(sort)::view-transition-new(root) {
    animation: none;
  }

  ::view-transition-group(.sort-item) {
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* 消える・出てくる項目は少し縮めてフェード */
  ::view-transition-old(.sort-item):only-child {
    animation: sort-item-out 0.35s cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  ::view-transition-new(.sort-item):only-child {
    animation: sort-item-in 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
  }

  @keyframes sort-item-out {
    to {
      opacity: 0;
      scale: 0.9;
    }
  }

  @keyframes sort-item-in {
    from {
      opacity: 0;
      scale: 0.9;
    }
  }