@charset "UTF-8";

/* =========================================================
   NEWS 一覧ページ固有（レイアウトのみ）
   カード：components/post-card.css（--archive）
   ページ送り：components/pager.css / サイドバー：components/sidebar.css
   ========================================================= */
.news-archive {
  --lower-pb: 51px;
}

/* 記事一覧 ＋ サイドバー、その下にページ送り */
.news-archive__layout {
  --sidebar-pt: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  grid-template-areas:
    "main side"
    "pager pager";
  column-gap: 148px;
  margin-top: 87px;
  padding: 0 33px 0 35px;
}

.news-archive__main {
  grid-area: main;
}

.news-archive__layout > .sidebar {
  grid-area: side;
}

.news-archive__layout > .pager {
  grid-area: pager;
}

/* カテゴリー・月別一覧で表示中の条件 */
.lower__sub {
  margin-top: 16px;
  font-family: var(--f-maru);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--c-brown-dark);
}

.news-archive__empty {
  font-family: var(--f-maru);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--c-brown-dark);
}

.news-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 7.7vw, 111px);
  row-gap: 80px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .news-archive__layout {
    column-gap: 56px;
    margin-top: 56px;
    padding: 0;
  }

  .news-cards {
    column-gap: 32px;
    row-gap: 64px;
  }
}

@media (max-width: 900px) {
  .news-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SP：記事一覧 → ページ送り → サイドバー */
@media (max-width: 768px) {
  .news-archive__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "pager"
      "side";
    margin-top: 32px;
  }

  .news-cards {
    column-gap: 16px;
    row-gap: 40px;
  }
}