/* ==== ここからCSS ==== */
div.whatsnew {
  margin: 20px auto; /* 上下の余白と、左右中央寄せ */
  max-width: 600px; /* 全体の幅を制限して中央にコンパクトにまとめる */
  font-size: 100%;
  word-break: break-all;
}

/* リンク全体の設定 */
div.whatsnew a {
  position: relative; /* ラベルの絶対配置の基準とする */
  display: flex; /* 日付とタイトルを横並びにする */
  align-items: center; /* 縦方向の中央揃え */
  padding: 15px 0 15px 110px; /* 左側にラベルを配置するための余白（110px）を空ける */
  text-decoration: none;
  box-shadow: none;
  border-bottom: 2px solid #aaa; /* 各項目の下線 */
  color: #333;
}

div.whatsnew a:hover {
  background-color: #f9f9f9;
  text-decoration: none;
  box-shadow: none;
}

/* 元から出力される <hr> は非表示にする（aタグの下線を使うため） */
div.whatsnew hr {
  display: none;
}

div.whatsnew .newmark {
  font-size: 74%;
  padding: 1px 5px;
  margin-right: 5px;
  vertical-align: middle;
  color: White;
  background-color: #ff4500;
  border-radius: 3px;
}

div.whatsnew dl {
  margin: 0;
  padding: 0;
  border: 0;
}

/* 日付部分 */
div.whatsnew dt {
  margin: 0 1em 0 0; /* 日付とタイトルの間の余白 */
  padding: 0;
  border: 0;
  color: #333; /* 文字色を濃く */
  font-weight: normal;
  white-space: nowrap;
}

/* タイトル部分 */
div.whatsnew dd {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* PC閲覧時の既存の回り込み（float）を解除 */
@media screen and (min-width: 600px) {
  div.whatsnew dl {
    overflow: hidden;
  }
  div.whatsnew dt {
    float: none; /* floatを解除 */
    width: auto; /* 固定幅を解除 */
    overflow: visible;
  }
  div.whatsnew dd {
    overflow: visible;
  }
}

/* ==== ここから追加 ==== */

/* ★ .cat-label から .wng-cat-label に変更し、絶対配置で一番左に固定 */
div.whatsnew .wng-cat-label {
  position: absolute;
  left: 0; /* 一番左に配置 */
  top: 50%;
  transform: translateY(-50%); /* 縦方向のド真ん中に配置 */
  
  width: 85px; /* ラベルの幅を統一 */
  text-align: center; /* テキストを中央揃え */
  box-sizing: border-box;

  font-size: 75%;
  padding: 5px 10px;
  margin: 0;
  color: White;
  border-radius: 20px; /* 角を丸くする（カプセル型） */
  background-color: #95a5a6; /* デフォルトのグレー */
}

/* 各カテゴリーの色（添付画像に近い色味に調整しています） */
div.whatsnew .cat-news { background-color: #ff5959; } /* 法人全体（赤） */
div.whatsnew .cat-kodomo { background-color: #7100e2; } 
div.whatsnew .cat-syougai { background-color: #007aff; } /* 障害事業（青） */
div.whatsnew .cat-koureisha { background-color: #008f39; } /* 高齢事業（緑） */
div.whatsnew .cat-chiiki { background-color: #ff9f43; } /* 地域事業（オレンジ） */

/* ==== ここまで追加 ==== */