/* ==========================================================================
   NEWS(下層ページ固有) — 記事カード一覧。レイアウト/サイドバー/ページネーションは
   components/news-shared.css を参照
   ========================================================================== */
.news-page__title {
  text-align: left;
}

.news-list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  list-style: none;
}

.news-list__link {
  display: block;
}

.news-list__photo {
  aspect-ratio: 252 / 173;
  overflow: hidden;
  background: var(--color-offwhite);
}

.news-list__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-list__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.news-list__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 16px;
  border-radius: 30px;
  background: var(--color-pink);
  color: #fff;
  font-family: var(--font-maru);
  font-size: 14px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.news-list__date {
  font-family: var(--font-sans-jp);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.news-list__title {
  margin-top: 8px;
  font-family: var(--font-maru);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.1em;
  line-height: 1.524;
  color: var(--color-text);
}

.news-list__text {
  margin-top: 3px;
  font-family: var(--font-maru);
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: var(--color-text);
}

@media (min-width: 861px) {
  #news-page {
    padding-top: max(64px, 12.15vw);
  }

  #news-page .news-sidebar {
    margin-top: max(40px, 4.72vw);
  }

  .news-list {
    margin-top: max(40px, 5.42vw);
    grid-template-columns: repeat(3, max(220px, 17.5vw));
    column-gap: max(32px, 3.89vw);
    row-gap: max(48px, 5.14vw);
  }
}

@media (max-width: 680px) {
  .news-list {
    grid-template-columns: 1fr;
  }
}