/* ============================================
   Activity Archive
   ============================================ */

.archive-activity {
  padding: var(--fv-padding-top) var(--padding-x) 0;
}

.archive-activity-title {
  font-family: var(--font-en);
  font-size: var(--fv-title-font-size);
  font-weight: 400;
  line-height: normal;
  margin-bottom: var(--fv-title-margin-bottom);
}

.archive-activity .text-fit {
  margin-bottom: var(--fv-logo-margin-bottom);
}

.archive-activity-intro {
  margin-top: 0;

  p {
    font-family: var(--font-ja);
    font-size: 19rem;
    line-height: 1.8;
    letter-spacing: 0.95rem;
  }
}

html[lang="en"] .archive-activity-intro p {
  letter-spacing: 0;
  line-height: 1.8;
}
@media (max-width: 880px) {
  .archive-activity-intro {
    br.pc {
      display: none;
    }
  }
}
/* --- Filter --- */
.archive-activity-filter {
  display: flex;
  align-items: center;
  gap: 23rem;
  margin-top: 107rem;
}

.archive-activity-filter-label {
  font-family: var(--font-en);
  font-size: 22rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.archive-activity-filter-tags {
  display: flex;
  gap: 10rem;
  align-items: center;
}

.archive-activity-filter-tag {
  font-family: var(--font-en);
  font-size: 20rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s, color 0.2s;

  &:hover {
    background-color: var(--color-black);
    color: #fff;
  }
}

/* --- Grid --- */
.archive-activity-grid-section {
  margin-top: 72rem;
}

.activity-grid.archive-activity-grid {
  row-gap: 50rem;
  grid-template-rows: none;
  grid-auto-rows: auto;
  overflow: visible;
}

/* ============================================
   SP
   ============================================ */
@media (max-width: 700px) {
  .archive-activity {
    padding-left: 24rem;
    padding-right: 24rem;
  }

  .archive-activity-intro {
    margin-top: 40rem;

    p {
      font-size: 14rem;
      line-height: 2;
    }
  }

  .archive-activity-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: 20rem;
    margin-top: 40rem;
  }

  .archive-activity-filter-label {
    font-size: 21rem;
  }

  .archive-activity-filter-tags {
    gap: 6rem;
    flex-wrap: wrap;
  }

  .archive-activity-filter-tag {
    font-size: 13rem;
  }

  .archive-activity-grid-section {
    margin-top: 50rem;
  }

  .activity-grid.archive-activity-grid {
    row-gap: 40rem;
  }
}