/* ===== User's Voice ===== */
.c-users-voice {
  background: transparent;
  padding: 60px 0 120px;
}

.c-users-voice .c-section-heading {
  margin-bottom: 56px;
  gap: 16px;
}

.c-users-voice .c-section-heading__lead {
  padding-top: 24px;
}

.c-users-voice__heading-br--560 {
  display: none;
}

.c-users-voice__lead-br--767 {
  display: none;
}

@media (max-width: 560px) {
  .c-users-voice__heading-br--560 {
    display: inline;
  }
}

.c-users-voice__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

/* グリッドのrepeat(4,1fr)は要素が4個未満だと余り列分が右に空いて左寄りに見えるため、
   行ごとに中央寄せできるflex-wrap + justify-content:centerに変更している */
.c-users-voice__item {
  flex: 0 0 calc((100% - 32px * 3) / 4);
}

.c-users-voice__footer {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* =========================================
   余白 (1024px)
   ========================================= */
@media (max-width: 1024px) {
  .c-users-voice {
    padding: 40px 0;
  }

  .c-users-voice__list {
    gap: 12px;
  }

  .c-users-voice__item {
    flex-basis: calc((100% - 12px * 3) / 4);
  }
}

/* =========================================
   TABLET (840px)
   ========================================= */
@media (max-width: 840px) {
  /* Users Voice */
  .c-users-voice__item {
    flex-basis: calc((100% - 12px * 1) / 2);
  }
}

/* =========================================
   SP (767px)
   ========================================= */
@media (max-width: 767px) {
  .c-users-voice .c-section-heading.c-section-heading--center {
    margin-bottom: 24px;
  }

  .c-users-voice .c-section-heading__lead {
    padding-top: 0;
  }

  .c-section-heading__lead .c-users-voice__lead-br--767 {
    display: inline;
  }
}