/* ==================================================================
 * 記事ページのサイドバー
 * ============================================================== */

/*
 * 本文の実効幅を、サイドバーが無かったときと同じ760pxに保つ。
 * 記事カードの左右余白が107pxあり、そのままだと本文が589pxまで痩せる。
 */
@media (min-width: 922px) {
	.ast-right-sidebar.single .ast-article-single {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

/* ---------- 追従 ---------- */
/*
 * テーマが body に overflow-x:hidden を当てており、これがスクロール枠を
 * 作るため position:sticky が viewport に対して効かなくなっていた。
 * clip なら横スクロールは同じく止まるが、スクロール枠を作らないので
 * sticky が正しく働く。（対応していない古いブラウザでは従来どおり）
 */
body {
	overflow-x: clip;
}


/*
 * Astra 無料版はサイドバーの追従をフロント側に持っていないので自前で組む。
 * 中身は約1000pxあり多くの画面より高いため、はみ出す分はサイドバーの中で
 * スクロールさせる。こうしないと一番下のCTAに到達できない。
 */
@media (min-width: 922px) {
	.single #secondary {
		position: sticky;
		top: 78px; /* 追従中のヘッダー58px + 余白20px */
		align-self: flex-start;
		max-height: calc(100vh - 98px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.single #secondary::-webkit-scrollbar {
		width: 6px;
	}

	.single #secondary::-webkit-scrollbar-thumb {
		background: rgba(20, 48, 61, 0.2);
		border-radius: 3px;
	}

	.single #secondary::-webkit-scrollbar-track {
		background: transparent;
	}
}

/* ---------- 新着記事 ---------- */

.aiy-recent {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aiy-recent li {
	margin: 0 0 15px;
}

.aiy-recent li:last-child {
	margin-bottom: 0;
}

.aiy-recent a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
}

.aiy-recent-thumb {
	flex: 0 0 76px;
	width: 76px;
	height: 54px;
	border-radius: 6px;
	overflow: hidden;
	/* アイキャッチが無い記事のための下地 */
	background: #e9eef3;
}

.aiy-recent-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aiy-recent-title {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.55;
	color: #0f1720;
	transition: color 0.18s ease;
}

.aiy-recent-date {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	color: #636e7c;
}

.aiy-recent a:hover .aiy-recent-title,
.aiy-recent a:focus-visible .aiy-recent-title {
	color: #1a6c7a;
}

/* ---------- スマホ ---------- */

@media (max-width: 921px) {
	/* 本文の下に縦積みになる。上に間隔をあける */
	.single #secondary {
		margin-top: 40px;
	}
}