.works_pickup_tab_cards .tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.75rem;
  padding: 0 2rem;
  margin: 0 auto 2.5rem;
}

.works_pickup_tab_cards .tab {
  background: none;
  border: none;
  padding: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color_gray70);
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.works_pickup_tab_cards .tab:hover,
.works_pickup_tab_cards .tab:focus {
  color: var(--text_primary_color);
}

.works_pickup_tab_cards .tab.active {
  color: var(--text_primary_color);
  font-weight: 400;
}

.works_pickup_tab_cards .tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 1px;
  background-color: var(--color_gray50);
}

.works_pickup_tab_cards .tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 1px;
  background-color: #000;
}

.works_pickup_tab_cards .tab-content {
  display: none;
  padding-bottom: 0;
}

.works_pickup_tab_cards .tab-content.active {
  display: block;
}

.works_pickup_tab_cards.content-wrapper {
  padding-bottom: 0;
}

@media (max-width: 991px) {
  .works_pickup_tab_cards .tabs {
    gap: 3rem;
  }
}
@media (max-width: 767px) {
  .works_pickup_tab_cards .tabs {
    gap: 2.5rem;
  }
  .works_pickup_tab_cards .tab {
    font-size: 14px;
  }
}
@media (max-width: 575px) {
  .works_pickup_tab_cards .tabs {
    gap: 2rem;
    padding: 0;
  }
  .works_pickup_tab_cards .tab {
    font-size: 13px;
  }
}

{# グリッドスタイルは _works.css の .works-list__grid-group, .works-list__grid と同じだが、あえて変えており、統一してはいけない。
   事例の絞り込みjsでclass名で表示判別しているため、class名を統一してしまうと、人気の事例も絞り込み検索の条件対象になってしまう #}

.works_pickup_tab_cards__grid-group {
  display: flex;
  margin:  0 -16px;
  flex-wrap: wrap;
  position: relative;
}

.works_pickup_tab_cards__grid {
  flex: 0 0 33.3%;
  padding: 0 16px 48px;
  list-style: none;
}

@media (min-width: 576px) and (max-width: 991px) {
  .works_pickup_tab_cards__grid-group {
    margin:  0 -16px;
  }

  .works_pickup_tab_cards__grid {
    flex-basis: 50%;
    padding: 0 16px 48px;
  }
}

@media (max-width: 575px) {
  .works_pickup_tab_cards__grid {
    flex-basis: 100%;
  }
}