.news-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.news-detail-container{
    padding: 0 1rem;
}
/* ニュース一覧コンテナ（縦並び） */
.news-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 80%;
  margin-top: 10px;
}

/* ニュース1件 */
.news-item {
  display: flex;
  flex-direction: column;
  width: 100%;              /* ← 親要素に合わせて横幅いっぱい */
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 日付 + タグを横並びにする */
.news-item__meta {
  display: flex;
  align-items: center;
  gap: 1rem;              /* 日付とタグの間の余白 */
  flex-wrap: wrap;          /* ← 文字サイズが大きくなっても折り返して崩れない */
  margin-bottom: 0.2rem;
}

/* 日付 */
.news-item__date {
  font-size: 0.8rem;
  color: #666;
  white-space: nowrap;      /* ← 日付が折れないように */
}

/* タグ（badge） */
.news-item__tag {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

/* タイトル（長文対応） */
.news-item__txt {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: break-word; /* ← 長いタイトルでも折れる */
}

.news-more { 
    display: block; 
    text-align: center; 
    margin: 1rem 0; 
    font-size: 0.8rem; 
    text-decoration: none; 
    color: #759cc5; 
    font-weight: 600; 
} 
.news-more:hover { 
    color: #023f82; 
}

.news-detail-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.news-detail-header h1 {
    overflow-wrap: break-word;
    word-break: break-word;
}
.news-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    color: #666;
}
.news-detail-content {
    line-height: 1.8;
    overflow-wrap: break-word;
}
.news-detail-content img {
    max-width: 100%;
    height: auto;
}