/* ========================================================= */
/* /css/NewsList.css		*/
/* NewsList.latte 用の追加CSS (整理版) */
/* ========================================================= */

#news {
	background-color: #fff;
	padding-bottom: 80px;
}

/* ニュースリスト全体のコンテナ調整 */
.news-list {
	max-width: 900px;
	font-size: 16px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

/* ニュースリストの各アイテム (<li>) */
.news-list li {
	text-align: left;
	display: flex;
	align-items: flex-start; /* 縦方向の揃えを上端に設定 */
	gap: 15px; /* 要素間のスペース */

	padding: 15px 20px;
	border-bottom: 1px dashed #eee;
}

/* ニュースリストにアイテムがない場合のメッセージ */
.news-list .no-news {
	text-align: center;
	color: #666;
	padding: 30px 20px !important;
	border-bottom: none !important;
}

/* ----------------------------------------------
   サムネイル画像のスタイル（縮小表示）
   ---------------------------------------------- */

/* お知らせがない場合 */
.news-list > li:only-child:not(.has-thumbnail) {
	padding: 20px;
	text-align: center;
}

/* サムネイルのリンクコンテナ: サイズ固定と準備 */
.news-thumbnail-link {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	margin-right: 0;
	border-radius: 4px;
	overflow: hidden;
	display: block;
	background-color: #fff;
	border: 1px solid #eee;
}

/* サムネイル画像本体 */
.news-thumbnail-link .news-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.3s;
}

.news-thumbnail-link:hover .news-thumbnail {
	opacity: 0.8;
}

/* 画像がない場合のプレースホルダ */
.news-thumb-placeholder {
	/* news-thumbnail-link のクラスを流用し、サイズと背景を適用 */
	flex-shrink: 0;
	background-color: #f8f8f8;
}

/* ----------------------------------------------
	テキストコンテンツのスタイル
	---------------------------------------------- */

/* テキストコンテンツエリア: 日付/カテゴリ/タイトルを縦に並べる */
.news-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
//    gap: 3px;
}

/* 1行目：日付とカテゴリーを横並びにするラッパー */
.news-meta-row {
	display: flex;
	align-items: center;
	gap: 15px;
//	margin-left: 0; 
//	padding-left: 0;
}

/* 1. 日付 (<time>) の幅を固定 */
.news-list li .news-meta-row time {
	flex-shrink: 0;
	width: 90px;
	font-weight: bold;
	color: #555;
	font-size: 15px;
}

/* 2. カテゴリ (<span>) の幅をコンテンツに合わせる */
.news-list li .news-meta-row .category {
	flex-shrink: 0;
	color: #e57373;
	font-weight: 500;
	font-size: 15px;
	white-space: nowrap;	/* 折り返しを防ぐ */
	padding-left: 10px;
}

/* 3. タイトル (<a>) - 画像の右側から開始 */
.news-title-indent {
	display: block;
	padding-left: 90px;
	margin-top: 5px;

	font-size: 15px;
	color: #333;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;
}

/* 【重要】サムネイルがある場合の表示調整 */
#news .news-list > li.has-thumbnail .news-content {
	/* サムネイルがある場合は、ニュースコンテンツ全体を縦並びにして、タイトルを次の行に押し込む */
	flex-direction: column;
}
#news .news-list > li.has-thumbnail .news-title-indent {
	/* タイトルは、サムネイルの右側に配置されるnews-contentの左端からスタートする */
	padding-left: 0;
	margin-top: 5px;
}
/* サムネイルがある場合は、メタ情報の幅を広げてタイトルとズレないようにする */
#news .news-list > li.has-thumbnail .news-meta-row {
	 /* サムネイルの右側からいっぱいに広げる（デフォルトでそうなっているはず） */
	 width: 100%;
}


/* 修正後のサムネイルがない場合のインデント解除（既存のコードを維持） */
#news .news-list > li:not(.has-thumbnail) .news-title-indent {
	padding-left: 0;
	margin-top: 5px; /* 統一感を出すため5pxに変更 */
//	font-weight: normal;
}
#news .news-list > li:not(.has-thumbnail) .news-meta-row {
	margin-bottom: 5px; /* 既存のコードを維持 */
}

.news-list li a:hover {
	text-decoration: underline;
}

/* ----------------------------------------------
ページネーション スタイル
---------------------------------------------- */
/* (省略) */

/* ----------------------------------------------
モバイル対応
---------------------------------------------- */
@media (max-width: 600px) {
	/* ページネーションの調整 (既存) */
	.pagination {
		gap: 5px;
		font-size: 14px;
	}
	.pagination .page-link {
		min-width: 32px;
		height: 32px;
	}

	/* サムネイルのサイズを50pxに調整（Top.cssのモバイル設定に合わせる） */
	.news-thumbnail-link,
	.news-thumb-placeholder {
		width: 50px;
		height: 50px;
	}

	/* 日付の固定幅を調整 */
	.news-list li time {
		width: 80px;
		font-size: 14px;
	}

	/* カテゴリのフォントサイズ調整 */
	.news-list li .category {
		font-size: 14px;
	}

	/* 日付とカテゴリの行の隙間調整 */
	.news-meta-row {
		gap: 10px;
	}
}