/* =========================
   NEWSセクション（include用）
   - サイト全体のコンテナ幅に揃える
   - SPは左右16px相当の余白
========================= */

/* NEWSセクション全体 */
.news-section{
  /* 既存サイトの --container(980px) に追従。無い場合は980px扱い */
  width: min(var(--container, 980px), calc(100% - 32px));
  margin-inline: auto;         /* 中央寄せ */
  padding: 30px 0;             /* 左右は width 側で確保 */
}

/* 見出し（今のまま） */
.news-header{
  font-size: 1.8em;
  font-weight: normal;
  padding-left: 15px;
  border-left: 5px solid #333; /* 左側の縦線 */
  margin: 0 0 20px;
}

/* リストコンテナ */
.news-list-container{
  width: 100%;
  max-width: none;             /* 600px等の制限が残っても打ち消す */
  border-top: 1px solid #ccc;
	
 /* ★追加：左側の余白 */
  padding-left: 20px;
}

/* 各ニュースアイテム（2カラム化） */
.news-item{
  /* 2カラム（左：バッジ固定 / 右：本文） */
  display: grid;
  grid-template-columns: 180px 1fr; /* ←左カラム幅。好みで160〜220で調整 */
  grid-template-rows: auto auto;    /* 右上：日付 / 右下：タイトル */
  column-gap: 22px;
  row-gap: 6px;
  align-items: center;

  width: 100%;
  text-decoration: none;
  color: #333;
  padding: 18px 0;             /* 行の高さを少し出す（画像の雰囲気） */
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
  cursor: pointer;
}

.news-item:hover{
  background-color: #f9f9f9;
}

/* site-badge と news-date を grid の“直下要素”として扱う */
.badge-group{
  display: contents;
}

/* サイト名バッジ（左カラムに固定配置） */
.site-badge{
  grid-column: 1;
  grid-row: 1 / 3;            /* 日付＋タイトルの2行にまたがって中央に居座る */
  justify-self: start;
  align-self: center;

  color: #fff;
  font-size: 0.85em;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;

  /* 固定幅にしたい場合は min-width を大きめに */
  min-width: 140px;
  text-align: center;
}

/* 手動追加分のバッジカラー */
.orange-badge{ background-color: #ff9800; }
.green-badge{ background-color: #388e3c; }

/* 日付（右上） */
.news-date{
  grid-column: 2;
  grid-row: 1;

  font-size: 0.95em;
  color: #666;
}

/* タイトル（右下） */
.news-title{
  grid-column: 2;
  grid-row: 2;

  font-size: 1em;
  margin: 0;                  /* 余計なズレ防止 */
  margin-left: 0;             /* 旧仕様（85pxずらし）を無効化 */
  padding-right: 10px;
  line-height: 1.4;
}

/* すべて読むボタン */
.read-more{
  text-align: center;
  padding: 30px 0 10px;
}

.read-more-button{
  display: inline-block;
  padding: 15px 40px;
  background-color: #555;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1em;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
}

.read-more-button:hover{
  background-color: #333;
}

/* ボタン下部の赤い装飾ライン */
.read-more-button::after{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 5px;
  background-color: #d32f2f;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.read-more-button:hover::after{
  transform: translateX(0);
}

/* =========================
   SP最適化（折り返し＆バッジ幅調整）
========================= */
@media (max-width: 560px){
  .news-item{
    grid-template-columns: 140px 1fr;
    column-gap: 14px;
    padding: 16px 0;
  }
  .site-badge{
    min-width: 120px;
    padding: 6px 10px;
    font-size: 0.8em;
  }
  .news-date{
    font-size: 0.9em;
  }
  .news-title{
    font-size: 0.95em;
  }
}

/* ===== button centering (force) ===== */
.card-body > a.btn{
  justify-self: center !important; /* grid対策 */
  align-self: center !important;   /* flex対策 */
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;        /* inline-flex由来のズレ潰し */
}