.article-lists [data-category] {
  display: none;
}

.article-lists [data-category].is-show {
  display: block;
}

.filter li {
  cursor: pointer;
}


/* ===== カテゴリ一覧 ===== */
.filter {
  display: flex;
  justify-content: center;  /* 中央寄せ */
  flex-wrap: nowrap;          /* 画面幅が狭いときは折り返す */
  list-style: none;
  margin: 20px 0;
  padding: 0;
  background-color: #000000;   
  border-radius: 8px;       /* 角を丸める */
  overflow: hidden;         /* はみ出し調整 */
}

.filter li {
  flex: 1 1 auto;           /* 均等に並べる */
  text-align: center;
  padding: 6px 10px;
  color: #ffffff;             
  font-size: clamp(12px, 0.6vw + 0.5rem, 15px);
  white-space: nowrap; /* ← 改行禁止 */
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter li:hover {
  background-color: #333;   /* ホバーでちょっと明るく */
}

.filter li.is-active {
  background-color: #fff;   /* アクティブは白背景 */
  color: #000;              /* 文字色は黒に反転 */
  font-weight: bold;
}

/* ===== 記事リスト ===== */
time {
  font-size: smaller; 
  color: #A1A3A6; 
}

.category {
  display: inline-block;        
  padding: 2px 8px;              /* 内側の余白 */
  border: 1px solid #000;     
  border-radius: 6px;          
  background-color: #fff;       
  color: #000;                  
  font-size: 0.85em;            
  font-weight: bold;
  line-height: 1.4;         
}

.article-lists .article-title a {
  font-weight: bold;
  color: #000000;
}

.article-lists ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-lists li {
  padding: 12px 0;
  border-bottom: 1px solid #C0C0C0; /* 各記事の間に罫線 */
}

.article-lists li:last-child {
  border-bottom: none; /* 最後の罫線は消す */
}