@charset "UTF-8";
/* =================================================================
   トップページ（index.html）の「お知らせ」枠の見た目
   -----------------------------------------------------------------
   ・お知らせの中身は js/news-box.js が自動で作ります。
   ・ここでは、その1行1行のデザインと、カテゴリの色ラベルを決めています。
   ・カテゴリの色は news/style.css と同じにそろえています。
     （色を変えるときは両方を同じ色にすると見た目が統一されます）
   ================================================================= */

/* お知らせ1件分の箱（下に区切り線を入れる） */
.main-news-item {
  text-align: left;
  padding: 8px 4px;
  border-bottom: 1px solid #cccccc;
}
.main-news-item:last-child {
  border-bottom: none; /* 一番下の線は消してスッキリさせる */
}

/* 日付・バッジ・タイトルを横に並べるリンク全体 */
.main-news-link {
  display: flex;
  flex-wrap: wrap;      /* 入りきらないときは折り返す */
  align-items: center;
  gap: 8px;
  color: #333333;
  text-decoration: none;
}
/* マウスを乗せたらタイトルに下線を出して「押せる」と分かるようにする */
.main-news-link:hover .title {
  color: #005bac;
  text-decoration: underline;
}

/* 日付 */
.main-news-link .date {
  font-weight: bold;
  color: #555555;
  font-size: 0.9em;
}

/* タイトルは幅いっぱいを使い、日付・バッジの下の行に表示する */
.main-news-link .title {
  flex-basis: 100%;
  line-height: 1.5;
}

/* -----------------------------
   カテゴリの色ラベル（バッジ）… news/style.css と同じ色
----------------------------- */
.news-badge {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
  color: #ffffff;
  white-space: nowrap;
}
.news-badge--news    { background: #005bac; } /* お知らせ：サイトの基本色（青） */
.news-badge--event   { background: #e67e22; } /* イベント：オレンジ */
.news-badge--recruit { background: #2e9e5b; } /* 公募情報：緑 */

/* 読み込みに失敗したときのメッセージ */
.news-error {
  color: #c0392b;
  font-size: 0.9em;
}

/* -----------------------------------------------------------------
   お知らせ枠の表示ルール
   -----------------------------------------------------------------
   省略表示は custom.css 側で .title だけに限定しています。
   ここでは、日付・カテゴリラベル・タイトルの本来の並びを通常指定で管理します。
   ----------------------------------------------------------------- */
#news-container .main-news-item {
  display: block;
  overflow: visible;
  max-width: 100%;
}
#news-container .main-news-link {
  display: flex;          /* 日付・バッジ・タイトルを正しく並べる */
  overflow: visible;
  max-width: 100%;
}
#news-container .main-news-link .date,
#news-container .main-news-link .news-badge {
  display: inline-block;  /* 文字の幅にフィットさせる（帯にしない） */
  overflow: visible;
  max-width: none;
  width: auto;
}
#news-container .main-news-link .title {
  /* タイトルだけは、長い場合に2行までにして「…」で省略（枠が小さいため） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}