/**
 * No.29 サイドバー詳細・アーカイブ用ナビ（nav__content）。
 * Figma: 679:24321（summary / toc / process）／941:24041（archive）。
 *
 * __inner
 *   __figure
 *   __head（__label-list / __title）
 *   __body（__meta / __toc / archive の __group）
 *   __foot（__cta）
 */

.sidebar {
	--sidebar-width: 23rem; /* 368px @ 16 */
	box-sizing: border-box;
	width: 100%;
	max-width: var(--sidebar-width);
	margin: 0;
	padding: 0;
	background-color: var(--wp--preset--color--base-white);
	color: var(--wp--preset--color--base-black);
	font-family: var(--wp--preset--font-family--jp-sans);
}

.sidebar__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--custom--atom--xxl, 1rem);
	box-sizing: border-box;
	width: 100%;
	padding: 0;
}

.sidebar__figure {
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: var(--wp--custom--atom--xxl, 1rem);
	border: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
	background-color: var(--wp--preset--color--base-white);
	overflow: hidden;
}

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

.sidebar__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	width: 100%;
}

.sidebar__label-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	width: 100%;
	margin: 0;
	padding: 0;
}

/* __head のラベルは非リンクのため hover 色変化を打ち消し */
.sidebar__head .label:hover,
.sidebar__head .label:focus-visible {
	border-color: var(--wp--preset--color--base-black);
}

.sidebar__head .label[data-style="filled"]:hover,
.sidebar__head .label[data-style="filled"]:focus-visible {
	background-color: var(--wp--preset--color--base-black);
	color: var(--wp--preset--color--base-white);
}

.sidebar__head .label[data-style="outlined"]:hover,
.sidebar__head .label[data-style="outlined"]:focus-visible {
	color: var(--wp--preset--color--base-black);
	background-color: var(--wp--preset--color--base-white);
}

.sidebar__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	width: 100%;
	margin: 0;
	color: var(--wp--preset--color--base-black);
}

.sidebar__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 1.25;
}

.sidebar__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-xxs);
	font-weight: var(--wp--custom--font-weight--bold, 700);
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.sidebar__subtitle {
	margin: 0;
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 1.5;
}

.sidebar__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--atom--xxl, 1rem);
	width: 100%;
}

.sidebar__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--wp--custom--atom--lg, 0.75rem);
	width: 100%;
	margin: 0;
	padding: 0;
}

.sidebar__meta--row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--wp--custom--atom--rg, 0.5rem);
	row-gap: var(--wp--custom--atom--lg, 0.75rem);
}

.sidebar__meta a.marker-text {
	text-decoration: none;
}

.sidebar__meta a.marker-text .marker-text__label {
	display: inline-block;
}

.sidebar__toc {
	width: 100%;
	max-width: 16.75rem; /* 268px */
}

.sidebar__toc.toc {
	width: 100%;
}

.sidebar__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--custom--atom--xxl, 1rem);
	width: 100%;
}

.sidebar__cta {
	display: flex;
	justify-content: center;
	width: 100%;
}

.sidebar__cta .wp-block-button,
.sidebar__cta .wp-block-button__link {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 767px) {
	.sidebar .sidebar__toc {
		max-width: none;
	}

	/* 横並びの目次が幅に収まらないとき（10項目で 430px）は横スクロール。active の項目は toc.js が見える位置へ */
	.sidebar :is(.sidebar__nav, .sidebar__process) {
		max-inline-size: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
}

/* --- archive: タグリスト（PC / SP 共通） --- */

.sidebar--archive .sidebar__inner {
	gap: var(--wp--custom--molecule--rg, 1.5rem);
}

.sidebar--archive .sidebar__head {
	gap: 0;
}

.sidebar__group {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--custom--atom--xxl, 1rem);
	width: 100%;
}

.sidebar__group-title {
	margin: 0;
	color: var(--wp--preset--color--base-black);
	font-size: var(--wp--preset--font-size--text-sm);
	font-weight: var(--wp--custom--font-weight--medium, 500);
	line-height: 1.25;
}

.sidebar__tag-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--text-xs);
	line-height: var(--wp--custom--line-height--narrow, 1.25);
}

.sidebar__tag-item {
	display: block;
	margin: 0;
	padding: 0;
	line-height: inherit;
}

.sidebar__tag {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--base-black);
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
}

.sidebar__tag:focus {
	outline: none;
}

.sidebar__tag:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.sidebar__tag .sidebar__label {
	display: inline-block;
	max-width: 100%;
}

/* 表示中のタグ（クリックで選択を解除）。× は文字と同じ大きさに見えるよう 1.5em の枠（字形は枠の半分）で、行の高さは変えない */
.sidebar__tag[data-state="current"] {
	gap: var(--wp--custom--atom--xxs, 0.125rem);
	font-weight: var(--wp--custom--font-weight--bold, 700);
}

.sidebar__tag[data-state="current"] > .icon {
	inline-size: 1.5em;
	block-size: 1.5em;
	margin-block: -0.125em;
	margin-inline-start: -0.375em;
}