/* ==========================================================
   TOP の NEWS（[yl_news]・inc/news.php）2026-11-12 C案「写真つきの一覧」
   色・書体は物件ページ・施工事例と同じブラウンと明朝。
   左右の余白：白いパネルの内側の左右（40px）と、2列の間（80px＝中央の線の左右に40px）を同じにする
   ========================================================== */
.yl-news {
	--yln-ink: #3f372f;
	--yln-sub: #6f665d;
	--yln-brand: #6b5b4b;
	--yln-soft: #efe9e2;
	--yln-line: #e3ddd4;
	--yln-new: #a4553a;
	--yln-pad: 40px;
	--yln-min: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
	color: var(--yln-ink);
}

/* TOP の帯：生成り（TOP 本文のいちばん下。上の ZEH のブロックとフッターは白） */
.home .top-sec-news {
	background: #f3f0ec;
}
.home .top-sec-news .top-news-lead {
	text-align: center;
	font-size: 13px;
	line-height: 1.7;
	color: #6f665d;
	margin: -24px 0 32px;
}

/* 白いパネル。PC は2列 */
.post_content .yl-news ul.yl-news__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 8px var(--yln-pad);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: calc(var(--yln-pad) * 2);
	background: #fff;
	border: 1px solid var(--yln-line);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(60, 45, 30, .05);
}
/* 2列の間の線（ちょうど中央） */
.post_content .yl-news ul.yl-news__list::before {
	content: "";
	position: absolute;
	top: 26px;
	bottom: 26px;
	left: 50%;
	width: 1px;
	background: var(--yln-line);
}
.post_content .yl-news li.yl-news__item {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--yln-line);
}
.post_content .yl-news li.yl-news__item::before,
.post_content .yl-news li.yl-news__item::marker {
	content: none;
}
/* 最後の行には線を引かない（2列のときは件数が奇数でも最後の行だけ） */
@media (min-width: 960px) {
	.post_content .yl-news li.yl-news__item:nth-child(odd):nth-last-child(-n+2),
	.post_content .yl-news li.yl-news__item:nth-child(odd):nth-last-child(-n+2) ~ li.yl-news__item {
		border-bottom: 0;
	}
}
.post_content .yl-news li.yl-news__item:last-child {
	border-bottom: 0;
}

.post_content .yl-news a.yl-news__link {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	height: 100%; /* 同じ行の左右で写真の縦位置をそろえる */
	box-sizing: border-box;
	padding: 18px 0;
	color: inherit;
	text-decoration: none;
}
.yl-news__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: var(--yln-soft);
}
.post_content .yl-news__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform .3s ease;
}
/* イベントは文字入りの横長バナーなので、切らずに全体を見せる */
.post_content .is-event .yl-news__thumb img {
	object-fit: contain;
}
.yl-news__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.yl-news__when {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	line-height: 1.6;
}
.yl-news__tag {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .04em;
	border: 1px solid var(--yln-brand);
	border-radius: 4px;
	padding: 0 8px;
}
.yl-news__tag.is-property { background: var(--yln-brand); color: #fff; }
.yl-news__tag.is-works { background: var(--yln-soft); border-color: var(--yln-soft); color: var(--yln-brand); }
.yl-news__tag.is-event { background: #fff; color: var(--yln-brand); }
.yl-news__date {
	font-size: 12px;
	color: var(--yln-sub);
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}
.yl-news__new {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--yln-new);
}
.yl-news__title {
	font-family: var(--yln-min);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: auto-phrase;
	transition: color .2s ease;
}
.yl-news__meta {
	font-size: 12px;
	line-height: 1.6;
	color: var(--yln-sub);
}
.post_content .yl-news a.yl-news__link:hover .yl-news__title { color: var(--yln-brand); text-decoration: underline; text-underline-offset: 3px; }
.post_content .yl-news a.yl-news__link:hover .yl-news__thumb img { transform: scale(1.04); }
.post_content .yl-news a.yl-news__link:focus-visible { outline: 2px solid var(--yln-brand); outline-offset: 2px; border-radius: 6px; }

/* 種類ごとの一覧へ */
.post_content .yl-news .yl-news__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}
.post_content .yl-news .yl-news__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--yln-brand);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--yln-brand);
	border-radius: 999px;
	padding: 7px 20px;
	transition: background .2s ease, color .2s ease;
}
.post_content .yl-news .yl-news__links a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.post_content .yl-news .yl-news__links a:hover { background: var(--yln-brand); color: #fff; }
.yl-news__empty { text-align: center; color: #6f665d; }

/* タブレット・狭いPC：1列（左右の余白はパネルの内側だけ） */
@media (max-width: 959px) {
	.yl-news { --yln-pad: 28px; }
	.post_content .yl-news ul.yl-news__list { grid-template-columns: minmax(0, 1fr); padding: 4px var(--yln-pad); }
	.post_content .yl-news ul.yl-news__list::before { content: none; }
}

/* スマホ：4件。パネルの内側の左右は16px（画面端から本文までの余白と同じくらい） */
@media (max-width: 599px) {
	.yl-news { --yln-pad: 16px; }
	.home .top-sec-news .top-news-lead { margin: -16px 0 24px; }
	.post_content .yl-news ul.yl-news__list { padding: 0 var(--yln-pad); border-radius: 10px; }
	.post_content .yl-news li.yl-news__item.is-pc-only { display: none; }
	.post_content .yl-news li.yl-news__item.is-sp-last { border-bottom: 0; }
	.post_content .yl-news a.yl-news__link { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
	.yl-news__title { font-size: 15px; line-height: 1.55; }
	.yl-news__when { gap: 2px 8px; }
	.post_content .yl-news .yl-news__links { gap: 8px; margin-top: 22px; }
	.post_content .yl-news .yl-news__links a { padding: 6px 14px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.post_content .yl-news__thumb img,
	.yl-news__title,
	.post_content .yl-news .yl-news__links a { transition: none; }
	.post_content .yl-news a.yl-news__link:hover .yl-news__thumb img { transform: none; }
}