/*お知らせブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/

.news-container {
	padding: 20px;
	border-radius: 8px;
}

.news h3 {
	text-align: center;
	color: #fff;
	margin-bottom: 40px;
}

.news-item {
	padding: 6px 0;
}

.news-item:last-child {
	border-bottom: none;
}

.news-meta {
	display: flex;
	flex-direction: column; /* スマホでは縦並びにする */
	align-items: flex-start; 
	gap: 15px;
	font-size: 0.85em;
	margin-bottom: 8px;
	width: 100%;
}

.news-date {
	color: #fff;
	flex-shrink: 0;
	white-space: nowrap;
	align-self: flex-start; 
	margin-top: 3px; /* タイトルの1行目の文字の頭と高さを合わせる微調整 */
}
.news-category {
	background: #999;
	padding: 1px 8px; 
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	flex-shrink: 0;
	white-space: nowrap;
	align-self: flex-start; 
	margin-top: 1px; /* タイトルの1行目の文字の頭と高さを合わせる微調整 */
}
.news-content {
	margin: 0; 
	font-size: 1rem;
	/* line-height（行高）が大きすぎると、文字の上の余白が広がりズレの原因になります。
	   1.3 〜 1.4 あたりに設定すると、2行のときも綺麗に上端が揃います */
	line-height: 1.4; 
	color: #fff;
	flex-grow: 1; 
	white-space: pre-wrap;
	
	/* タイトルが2行を超えたら「...」で省略する設定 */
/*	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;*/
}

/* --- PC向け（画面幅が768px以上の場合） --- */
@media (min-width: 768px) {
	.news-meta {
		flex-direction: row; /* 横並びに戻す */
		align-items: center; /* 上下の中心を揃える */
		gap: 15px;
	}

	/* PCで日付とカテゴリーの幅を固定したい場合 */
	.news-date {
		width: 90px; /* 日付の長さに合わせて固定 */
		flex-shrink: 0; /* 画面が縮んでも日付が潰れないようにする */
	}

	.news-category {
		width: 80px; /* カテゴリーの幅を揃える場合 */
		text-align: center;
		flex-shrink: 0;
	}
    
	/* もしタイトルも同じ並び（flexの中）にあるなら */
	.news-content {
		width: auto;
		flex-grow: 1; /* 余った横幅をすべてタイトルに割り当てる */
		margin: 0;
	}
}