/* ==========================================================================
   news-list.html 専用スタイル
   共通クラス（.header, .footer, .heading, .btn, .news__item 等）は
   style.css のものをそのまま利用し、ここでは再定義しない。
   ========================================================================== */

/* ページタイトル（お知らせ / NEWS）: 共通クラス .pageTitle / .pageTitle__inner を使用（style.css） */

/* 一覧セクション */
.newslist-section {
  background: var(--white);
  padding: 100px 40px;
}
.newslist-section__inner {
  max-width: var(--inner-width);
  margin: 0 auto;
}

/* 一覧（アイテムは news__item を再利用） */
.newslist-items {
  margin-bottom: 60px;
}

/* ページャー */
.newslist-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.newslist-pager__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.newslist-pager__arrow img { width: 10px; height: 16px; }
.newslist-pager__arrow:disabled { opacity: .3; cursor: default; }

.newslist-pager__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
}
.newslist-pager__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}
.newslist-pager__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 35px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .05em;
  color: var(--text-black);
}
.newslist-pager__item.is-current a {
  color: var(--text-black);
  border-bottom: 2px solid var(--mme-lightblue);
}
.newslist-pager__item--dots {
  color: var(--text-black);
  font-weight: 500;
  letter-spacing: .1em;
  height: 35px;
}

/* ==========================================================================
   TAB (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .newslist-section { padding: 60px 40px; }
  .newslist-items { margin-bottom: 40px; }
  .newslist-pager { gap: 16px; }
  .newslist-pager__list { gap: 8px 16px; }
  .newslist-pager__item a { font-size: 18px; }
}

/* ==========================================================================
   SP (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .newslist-section { padding: 50px 20px; }
  .newslist-items { margin-bottom: 30px; }
  .newslist-pager { gap: 10px; }
  .newslist-pager__list { gap: 8px 12px; }
  .newslist-pager__item a { font-size: 16px; height: 28px; }
  .newslist-pager__item--dots { height: 28px; }
  .newslist-pager__arrow { width: 28px; height: 28px; }
}