h1,
h2,
h3 {
	scroll-margin-top: 4rem;
}
.scrollbar-toc_wrapper ul {
	list-style: none; /* マーカーを消す */
	margin: 0; /* ul の上下余白を消す */
	padding: 0; /* ul の左右余白を消す */
}
.scrollbar-toc_wrapper ul li {
	margin: 0; /* li の上下余白を消す */
	padding: 0; /* li の左右余白を消す */
}

.scrollbar-toc_overview {
	position: fixed;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
	/* padding: 5px; */
	padding-left: 10px;
	/* padding-right: 1px; */
	/* background-color: #333; */
	cursor: pointer;
}
.scrollbar-toc_overview ul {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.scrollbar-toc_overview ul li {
	background-color: var(--accent-color);
	opacity: 0.2;
	width: 6px;
	height: 2px;
	margin: 8px 0;
	padding: 0;
}
.scrollbar-toc_overview ul li.viewing {
	/* filter: brightness(0.1); */
	opacity: 0.7;
}
.scrollbar-toc_menu {
	position: fixed;
	top: 50%;
	right: 0px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
	background-color: var(--main-color);
	border-bottom-left-radius: 0.25rem;
	border-top-left-radius: 0.25rem;
	transform: translateY(-50%) translateX(120%);
	transition: transform 0.2s ease-out;
	max-height: 80vh;
	overflow-y: auto;
}
.scrollbar-toc_wrapper:hover .scrollbar-toc_menu,
.scrollbar-toc_wrapper:has(.scrollbar-toc_overview.expanded) .scrollbar-toc_menu {
	transform: translateY(-50%) translateX(0);
}

.scrollbar-toc_menu ul li {
	padding: 3px 8px 3px 0; /* 上 右 下 左 */
	cursor: pointer;
}
.scrollbar-toc_menu ul li.viewing {
	color: var(--accent-color);
}
.scrollbar-toc_menu ul li:not(.viewing):hover {
	/* filter: brightness(0.6); */
	/* opacity: 0.8; */
	/* background-color: var(--accent-color); */
	/* mix-blend-mode: difference; */
	background-color: var(--text-color);
	color: var(--main-color);
	border-bottom-left-radius: 0.25rem;
	border-top-left-radius: 0.25rem;
}