/*
起業・経営ニュース一覧（/news/ archive-news.php）専用スタイル
*/

.p_news_main {
	flex: 1;
	min-width: 0;
}

.p_news_section {
	margin-bottom: 1rem;
	/* 追従ヘッダーにタイトルが隠れないようアンカー位置を調整 */
	scroll-margin-top: 96px;
}

.p_news_sectionTitle {
	padding-bottom: 0.5rem;
	border-bottom: 3px solid #b2b2b2;
}

.p_news_sectionList {
	margin-top: 1.5rem;
}

/* スポンサー記事 */
.p_news_ad {
	display: flex;
	align-items: flex-start;
	column-gap: 16px;
}

.p_news_ad_thumb {
	flex-shrink: 0;
}

.p_news_ad_thumbImg {
	display: block;
	width: 140px;
	height: 100px;
	object-fit: cover;
	background-color: #eeeeee;
}

.p_news_ad_body {
	flex: 1;
	min-width: 0;
}

.p_news_ad_title {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
}

.p_news_ad_title a:hover {
	text-decoration: underline;
}

/* SPのみタイトル横に出す日付（トップページ components/news_post.php と同じ体裁）。
   表示の出し分けは is-pc_hidden / is-pc_show に任せる */
.p_news_ad_dateInline {
	margin-left: 0.5rem;
	color: #666666;
	font-size: 0.75rem;
	font-weight: normal;
	white-space: nowrap;
}

.p_news_ad_excerpt {
	margin-top: 0.5rem;
	overflow: hidden;
	color: #666666;
	font-size: 0.8rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.p_news_ad_meta {
	display: flex;
	align-items: center;
	column-gap: 8px;
	margin-top: 0.8rem;
}

.p_news_ad_meta .p_news_date {
	margin-left: auto;
}

/* 通常記事 */
.p_news_item {
	display: flex;
	align-items: center;
	column-gap: 12px;
}

.p_news_item_title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.p_news_item_title:hover {
	text-decoration: underline;
}

.p_news_tag {
	flex-shrink: 0;
}

.p_news_date {
	flex-shrink: 0;
	color: #666666;
	font-size: 0.75rem;
	white-space: nowrap;
}

/* カテゴリ別のカラー（news_cat のスラッグを is- 修飾子として付与）
   タグ自体の配色は component/c-meta.css の .c_metaNews_tag.is-* に集約している */
.p_news_section.is-company .p_news_sectionTitle {
	border-bottom-color: #cfefe1;
}

.p_news_section.is-subsidy .p_news_sectionTitle {
	border-bottom-color: #d8f5bc;
}

.p_news_section.is-event .p_news_sectionTitle {
	border-bottom-color: #fcd9b2;
}

.p_news_section.is-tips .p_news_sectionTitle {
	border-bottom-color: #bbe5f8;
}

.p_news_section.is-tool .p_news_sectionTitle {
	border-bottom-color: #fdeba0;
}

.p_news_section.is-change .p_news_sectionTitle {
	border-bottom-color: #b8d2f4;
}

/* タグ別一覧のカード（entry-card-news.php）のメタ行
   SPONSORED ラベルを左、日付を右に置く */
.p_news_cardMeta {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
	row-gap: 4px;
}

.p_news_cardMeta .c_postCard_date {
	margin-top: 0;
	margin-left: auto;
}

@media (max-width: 768px) {
	/* スポンサー記事：サムネはPCと同じ140×100のまま縦中央に置く */
	.p_news_ad {
		align-items: center;
		column-gap: 10px;
	}

	.p_news_ad_meta {
		flex-wrap: wrap;
		row-gap: 0.4rem;
	}

	.p_news_ad_meta .p_news_date {
		margin-left: 0;
	}

	/* 通常記事：カテゴリタグを左に横並びし、タイトルと日付を右側に縦積みする。
	   タグは2行分にまたがらせて縦中央に置く */
	.p_news_item {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 10px;
	}

	.p_news_tag {
		grid-row: 1 / span 2;
	}

	.p_news_item_title {
		grid-column: 2;
		overflow: visible;
		white-space: normal;
	}

	.p_news_item .p_news_date {
		grid-column: 2;
	}
}