/*====================
詳細ページ共通レイアウト（お知らせ・現場日和 等）
サイドバー：施工事例と同仕様（sidebar.css）
PC：サイドバー内コンテンツをスティッキー
====================*/
.detail-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--detail-sidebar-w);
	column-gap: 0;
	align-items: stretch;
	--detail-sidebar-sticky-top: calc(var(--site-header-sticky-height, 74px) + 32px);
	--detail-sidebar-w: clamp(280px, 31.25vw, 600px);
	--detail-sidebar-space: clamp(40px, 3.5vw, 64px);
}

@media screen and (max-width: 1279px) {
	.detail-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.detail-layout__main {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding-right: var(--detail-sidebar-space);
	background: var(--color-topics-bg);
	overflow: hidden;
}

@media screen and (max-width: 1279px) {
	.detail-layout__main {
		padding-right: 0;
	}
}

.detail-layout__main-inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: min(756px, 100%);
	margin-inline: auto;
	padding: clamp(64px, 5.73vw, 110px) clamp(24px, 3vw, 40px) 96px;
}

@media screen and (max-width: 1279px) {
	.detail-layout__main-inner {
		max-width: 756px;
		padding: 48px 16px 64px;
	}
}

@media screen and (max-width: 600px) {
	.detail-layout__main-inner {
		padding-top: 24px;
	}
}

.detail-layout > .site-sidebar {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	box-sizing: border-box;
	min-height: 100%;
	padding-top: clamp(64px, 5.73vw, 110px);
	padding-bottom: clamp(48px, 6vw, 96px);
	background: #16346d;
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
}

@media screen and (max-width: 1279px) {
	.detail-layout > .site-sidebar {
		grid-row: 2;
		display: block;
		padding-top: 0;
		padding-bottom: 0;
		box-shadow: none;
	}
}

/* 列は伸ばしつつ、内側だけ sticky（flex:1 による高さ伸長を止める） */
.detail-layout .site-sidebar__inner {
	position: -webkit-sticky;
	position: sticky;
	top: var(--detail-sidebar-sticky-top);
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 335px;
	max-height: calc(100vh - var(--detail-sidebar-sticky-top));
	margin-left: 16px;
	margin-right: auto;
	padding: 0 16px 0 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

@media screen and (max-width: 1279px) {
	.detail-layout .site-sidebar__inner {
		position: static;
		max-height: none;
		margin-left: auto;
		padding: 32px 16px 64px;
		overflow: visible;
	}
}

.detail-layout .site-sidebar__inner::-webkit-scrollbar {
	width: 5px;
}

.detail-layout .site-sidebar__inner::-webkit-scrollbar-track {
	background: transparent;
}

.detail-layout .site-sidebar__inner::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.12);
}

.detail-layout .site-sidebar__inner::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.2);
}

.detail-layout .site-sidebar__heading {
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.detail-layout .site-sidebar__link {
	color: rgba(255, 255, 255, 0.9);
}