@charset "UTF-8";
/* ==========================================================================
   記事サイドバー（追加分のみ / style.css は変更しない）
   ========================================================================== */

/* --- レイアウト（PC のみ：本文の右に配置 / :has で対象ページだけに限定） ----- */
@media (min-width: 769px) {

	main.single:has(.tt-sidebar) {
		width: 92%;
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
		column-gap: 40px;
		align-items: start;
	}

	/* 既存の子要素（パンくず・記事下・前後リンク・相談セクション）は全幅のまま */
	main.single:has(.tt-sidebar) > * {
		grid-column: 1 / -1;
	}

	main.single:has(.tt-sidebar) > .tt-sidebar {
		grid-column: 2;
		grid-row: 2;
		align-self: stretch; /* 本文カードと同じ高さにして、追従の下限をその範囲に限る */
	}

	main.single:has(.tt-sidebar) > .single-inner {
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.tt-sidebar {
		height: 100%; /* 追従の下限＝本文カードの下端（PREVボタンの上）になる */
	}

	/* 実際に追従する中身。親（= 本文カードの高さ）の中でだけ動く */
	.tt-sidebar__inner {
		top: 160px; /* 固定表示のヘッダーナビ（38px）の分を空ける */
		margin-bottom: 40px; /* 下限に達したときの余白 */
	}
}

/* --- サイドバー本体 ------------------------------------------------------- */
.tt-sidebar {
	box-sizing: border-box;
	color: var(--text-gray);
	font-family: "Noto Sans", sans-serif;
}

.tt-sidebar__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tt-sidebar[hidden],
.tt-block[hidden] {
	display: none;
}

/* --- ブロック共通 -------------------------------------------------------- */
.tt-sidebar__inner > section {
    border-radius: 23px;
}

.tt-block {
	border: 2px solid var(--border-gray);
	border-radius: 20px;
	background: #ffffff;
	width: auto;
	height: auto;
	max-width: none;
}

.tt-block__title {
	margin: 0;
	padding: 12px 20px;
	border-radius: 18px 18px 0 0; /* 親の 20px から border 2px 分を引いた値（隔間対策） */
	background-color: var(--background-gray);
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
}

.tt-block__body {
	padding: 18px 20px 22px 20px;
	border-radius: 0 0 18px 18px;
}

.tt-sidebar a {
	color: var(--text-gray);
	text-decoration: none;
}

.tt-sidebar a:hover {
	color: #000000;
}

/* --- 目次 ---------------------------------------------------------------- */
.tt-block--toc .tt-block__body {
	max-height: 400px; /* 目次が長くなっても他のブロックを押し下げないよう内部スクロールにする */
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.tt-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	counter-reset: tt-toc;
}

.tt-toc__item {
	font-size: 15px;
	line-height: 1.5;
}

.tt-toc__item--h1,
.tt-toc__item--h2 {
	counter-increment: tt-toc;
	font-weight: bold;
}

.tt-toc__item--h1 > a::before,
.tt-toc__item--h2 > a::before {
	content: counter(tt-toc) ".";
	margin-right: 6px;
}

.tt-toc__item--h3 {
	padding-left: 18px;
	font-size: 14px;
	position: relative;
}

.tt-toc__item--h3::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.65em;
	width: 8px;
	height: 1px;
	background: var(--border-gray);
}

.tt-toc__item.is-active > a {
	color: #000000;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- 関連記事 ------------------------------------------------------------ */
.tt-related__list,
.tt-cats__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tt-related__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tt-related__link {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.tt-related__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	background: #d5d5d5;
	display: block;
}

.tt-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tt-related__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tt-related__date {
	font-size: 13px;
}

.tt-related__title {
	font-size: 15px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* --- カテゴリー ---------------------------------------------------------- */
.tt-cats__list {
	display: flex;
	flex-direction: column;
}

.tt-cats__item + .tt-cats__item {
	border-top: 1px dotted #9ca4b2;
}

.tt-cats__item > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	font-size: 15px;
}

.tt-cats__count {
	flex: 0 0 auto;
	min-width: 28px;
	padding: 1px 8px;
	border-radius: 100px;
	background: #e0e5e8;
	font-size: 12px;
	text-align: center;
}

.tt-cats__item.is-current > a {
	font-weight: bold;
}

/* --- タブレット・スマホ：本文の上に目次だけを表示 ------------------------ */
@media (max-width: 768px) {

	.tt-sidebar {
		width: 90%;
		margin: 20px auto;
	}

	.tt-sidebar__inner {
		max-height: none;
		overflow: visible;
		gap: 0;
	}

	/* 目次以外はページ下部の既存コンテンツと重複するため非表示 */
	.tt-sidebar .tt-block:not(.tt-block--toc) {
		display: none;
	}

	.tt-block {
		border-width: 1px;
	}

	.tt-block__title {
		border-radius: 19px 19px 0 0; /* border 1px 分 */
	}

	.tt-block__body {
		border-radius: 0 0 19px 19px;
	}
}

@media (max-width: 450px) {

	.tt-sidebar {
		width: 82%;
	}

	.tt-block__title {
		font-size: 16px;
		padding: 10px 16px;
	}

	.tt-block__body {
		padding: 14px 16px 18px 16px;
	}

	.tt-toc__item {
		font-size: 14px;
	}
	
	.tt-block--toc .tt-block__body {
		max-height: 250px;
	}
}