/**
 * c-column-toc / c-column-share
 * 記事詳細ページの目次とシェアボタン（新規機能・手書き）。
 */
.c-column-toc {
	/*
	 * display を明示していなかったため an-box の既定値
	 * （display:flex; flex-direction:column; align-items:center）を継承していた。
	 * flex-direction:column 自体は望む挙動（見出し→リストの縦積み）だが、
	 * align-items:center は左揃えにしたいテキストまで中央寄せにしてしまうため、
	 * 明示的に上書きする。
	 */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: none;
	width: 280px;
	align-self: flex-start;
	position: sticky;
	top: 96px;
	background: var(--an-color-surface);
	border-radius: 12px;
	padding: 24px;
}
.c-column-toc__label {
	font-family: var(--an-font-base);
	font-weight: 700;
	font-size: 14px;
	color: var(--an-color-text);
	margin-bottom: 14px;
}
.c-column-toc__list {
	/* an-box 併用のため align-items を明示（inherit する center だと項目テキストが中央寄せになる） */
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
.c-column-toc__item {
	/*
	 * an-box 併用だが単独のルールが無く、inherit される
	 * display:flex; flex-direction:column; align-items:center のままだった
	 * （監査スクリプトで発覚）。左揃えの目次項目にするため明示する。
	 */
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
.c-column-toc__item--3 {
	padding-left: 16px;
}
.c-column-toc__link {
	font-family: var(--an-font-base);
	font-size: 13px;
	line-height: 1.6;
	color: var(--an-color-text);
	opacity: 0.75;
	transition: color 0.2s, opacity 0.2s;
}
.c-column-toc__link::before {
	content: '―';
	margin-right: 6px;
	color: var(--an-color-brand);
}
.c-column-toc__link:hover {
	opacity: 1;
	color: var(--an-color-brand);
}

.c-column-share {
	width: 100%;
	max-width: 100%;
	padding: 32px 0;
	margin-top: 8px;
	border-top: 1px solid var(--an-color-border);
	border-bottom: 1px solid var(--an-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 16px;
}
.c-column-share__label {
	font-family: var(--an-font-base);
	font-size: 13px;
	color: var(--an-color-text);
	opacity: 0.6;
}
.c-column-share__list {
	/* an-box 併用のため flex-direction/align-items を明示（base.css の .an-box は既定 column/center） */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}
.c-column-share__link {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* an-box 併用のため flex-direction を明示（base.css の .an-box は既定 column） */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	color: var(--an-color-white);
	font-size: 18px;
	transition: opacity 0.2s, transform 0.2s;
}
.c-column-share__link:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}
.c-column-share__link--x { background: #000000; }
.c-column-share__link--fb { background: #1877f2; }
.c-column-share__link--line { background: #06c755; }

@media (max-width: 1024px) {
	.c-column-toc {
		position: static;
		width: 100%;
	}
}