/* ============================================================
   お知らせ一覧 (news.html) — screen-specific styles
   共通トークン・共通コンポーネント(service-nav/header/footer/
   page-heading/breadcrumb/cta/news-item)は css/style.css を参照。
   ============================================================ */
.news-list { background: #fff; padding: 100px 0; }
.news-list__container {
  width: 1000px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.news-list__items { display: flex; flex-direction: column; width: 100%; }

/* ===== Pagination ===== */
.pagination { display: flex; align-items: center; gap: 10px; }
.pagination__arrow,
.pagination__item {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-nimbus);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--text-primary);
}
.pagination__arrow { background: var(--border-default); }
.pagination__arrow img { width: 16px; height: 16px; filter: var(--filter-icon-white);}
.pagination__arrow--prev img { transform: rotate(180deg); }
.pagination__item { background: #fff; }
.pagination__item--active { background: var(--text-primary); color: var(--text-white); }
.pagination__arrow--disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.pagination__ellipsis {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-primary);
}

@media (max-width: 1040px) {
  .news-list__container { width: 100%; padding-inline: 24px; }
}

/* ============================================================
   SP layout (max-width: 768px)
   Figma (node 929:24335) では breadcrumb が page-heading 直後ではなく
   news-list（お知らせ本体）の後・CTA の前に配置されているため、
   body を flex column 化し order で見た目の順序のみ入れ替える
   （.breadcrumb の CSS クラス・構造・DOM 位置は変更しない）。
   ============================================================ */
@media (max-width: 768px) {
  body { display: flex; flex-direction: column; }
  .breadcrumb { order: 1; }
  .cta { order: 2; }
  .footer { order: 3; }

  .news-list { padding: 64px 0; }
  .news-list__container { gap: 85px; padding-inline: clamp(16px, 3.4vw, 24px); }
}