/* お知らせ一覧ページ */
.page-title { font-size: clamp(1.5rem, 4vw, 2rem); margin-block-end: 1.5rem; text-align: left; font-weight: bold; }
.news-list { padding-inline-start: 20px; }
.news-filter { display: flex; justify-content: flex-start; gap: 1rem; margin-bottom: 2rem; }

.filter-button { border: 1px solid #ccc; background: var(--color-background); padding: 0.6rem 1.5rem; border-radius: 999px; font-size: 0.9rem; cursor: pointer; transition: 0.3s; }
.filter-button.active, .filter-button:hover { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); }

.news-items { max-width: 800px; margin: 0; padding-inline-start: 0; list-style: none; text-align: left; }

.news-item { border-bottom: 1px solid var(--color-border); padding: 1.5rem 0; text-align: left; }

.news-item a { text-decoration: none; color: inherit; display: block; }

.date-news-container { display: flex; align-items: center; gap: 0.8rem; margin-block-end: 0.4rem; }
.date { font-size: 0.9rem; color: var(--color-text-light); }
.news-label { display: inline-block; background: var(--color-secondary); color: var(--color-text-on-primary); font-size: 0.75rem; border-radius: 3px; padding: 0.2rem 0.5rem; }
.news-label.update { background: #7fcc5a; }
.news-title { font-size: 1.1rem; font-weight: bold; }

#news-empty-message {
  margin-bottom: 20px; 
}

.fade-up { opacity: 0; transform: translateY(20px); transition: 0.6s; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
  .filter-button {
    white-space: nowrap;
  }
}