/* 通常・エッセイ共通の縦書き目次型一覧。 */
/* モバイルは従来の幅。PCの可変幅は下のメディアクエリで指定する。 */
main.base-container-onecolumn {
	max-width: 1010px;
}

.essay-index {
	/* 記事詳細の --vr-line-length と同じ高さ（本文18pxの標準設定）。 */
	--essay-column-height: clamp(360px, calc(100svh - 8rem), 490px);
	--essay-date-height: 108px;
	--essay-date-gap: 24px;
	--essay-font-scale: 1.2;
	--essay-item-gap: 16px;
	--essay-row-gap: 72px;
	margin: 24px 0 80px;
	padding: 0 16px;
	color: #333;
}

.essay-index-list {
	/* 新しい記事から、各段の右端を起点に左へ詰めて並べる。 */
	display: flex;
	flex-flow: row-reverse wrap;
	align-items: stretch;
	gap: var(--essay-row-gap) var(--essay-item-gap);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.essay-index-item {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;
}

/* 各段の先頭にだけ、一覧の幅いっぱいの区切りを描く。位置はJSで追従する。 */
.essay-index-item[data-row-start]::before {
	content: "";
	position: absolute;
	top: calc(var(--essay-row-gap) / -2);
	right: 0;
	width: var(--essay-rule-width, 100%);
	border-top: 1px dashed #aaa;
	pointer-events: none;
}

.essay-index-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: row-reverse;
	align-items: flex-start;
	/* 日付の元の領域も残し、タイトル同士の間隔を保つ。 */
	gap: 3px;
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	padding: 12px 8px;
	color: inherit;
	text-decoration: none;
}

.essay-index-link:link,
.essay-index-link:visited {
	color: inherit;
}

.essay-index-entry-title {
	flex-shrink: 0;
	/* 下部は日付の領域。長いタイトルはその手前で次の列へ折り返す。 */
	height: calc(var(--essay-column-height) - var(--essay-date-height) - var(--essay-date-gap));
	margin-bottom: calc(var(--essay-date-height) + var(--essay-date-gap));
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: calc(18px * var(--essay-font-scale));
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .04em;
	overflow-wrap: normal;
	word-break: normal;
	line-break: strict;
	/* 単語をひとまとまりにしたうえで、列の長さをそろえる。 */
	text-wrap: balance;
}

/* 単語の途中で列を分けず、意味の区切りを優先する。 */
.essay-index-title-word {
	white-space: nowrap;
}

/* 非常に長い固有名詞・英単語などは、切り捨てずに列内で折り返す。 */
.essay-index-title-word.is-long-word {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* 記事単位で書体を選ぶ。その他のカテゴリはサイト標準の書体を継承する。 */
.essay-index-entry-title[data-category="essay"] {
	font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

/* 英字・数字は1文字ずつ正立。数字2桁だけ1文字分の縦中横にする。 */
.essay-index-title-alphabet,
.essay-index-title-number {
	text-orientation: upright;
}

.essay-index-title-number.is-two-digits {
	text-combine-upright: all;
	letter-spacing: 0;
}

.essay-index-date-wrap {
	position: relative;
	display: flex;
	align-self: flex-end;
	flex-shrink: 0;
	/* 高さと記事幅は変えず、表示位置だけタイトルの中央へ寄せる。 */
	transform: translateX(var(--essay-date-offset, 0px));
}

/* 色・角丸はサマリー共通の .entry-new を使い、目次では縦書きにする。 */
.essay-index-new {
	display: inline-block;
	box-sizing: border-box;
	width: 18px;
	margin-top: 6px;
	padding: 2px;
	writing-mode: vertical-rl;
	text-orientation: upright;
	/* 縦書きの中央ベースラインを使い、本文の文字列と中心線をそろえる。 */
	vertical-align: baseline;
	font-family: sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: .04em;
	text-align: center;
	white-space: nowrap;
}

.essay-index-date {
	align-self: flex-end;
	flex-shrink: 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	color: #767676;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	white-space: nowrap;
}

.essay-index-date-year {
	text-orientation: upright;
}

.essay-index-date-number {
	text-combine-upright: all;
}

.essay-index-link:hover .essay-index-entry-title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
}

.essay-index-link:focus-visible,
.essay-index-pager a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.essay-index-empty {
	max-height: var(--essay-column-height);
	writing-mode: vertical-rl;
	margin: 0;
	padding: 12px 24px;
	color: #666;
	font-size: calc(14px * var(--essay-font-scale));
	line-height: 1.8;
}

.essay-index-pager {
	margin-top: 40px;
}

.essay-index-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: calc(14px * var(--essay-font-scale));
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.essay-index-pager li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
}

.essay-index-pager li > a,
.essay-index-pager li > span {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 8px;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	text-decoration: none;
}

.essay-index-pager li > [aria-current="page"] {
	border-bottom-color: currentColor;
}

.essay-index-pager a:hover {
	background-color: #f5f5f5;
}

.essay-index-footer {
	max-width: 990px;
	margin: 0 auto 64px;
	padding-top: 40px;
	border-top: 1px dashed #aaa;
}

@media (min-width: 768px) {
	.essay-index-link {
		/* 日付を中央へ動かした後も、PCの従来の記事間隔を維持する。 */
		gap: 12px;
	}
}

@media (min-width: 1024px) {
	main.base-container-onecolumn {
		/* 記事10件に必要な幅で中央に配置し、画面の左右にも余白を残す。 */
		width: var(--essay-index-width, 1080px);
		max-width: calc(100% - 64px);
	}

	.essay-index-list {
		flex-wrap: nowrap;
		column-gap: var(--essay-fit-gap, var(--essay-item-gap));
	}

	.essay-index-link {
		padding-inline: var(--essay-fit-padding, 8px);
	}

	.essay-index-item {
		/* 最低1列分を確保し、長いタイトルはJSで縦の長さを調整する。 */
		flex-shrink: 1;
		min-width: var(--essay-item-min-width, 74.32px);
	}
}

@media (max-width: 767px) {
	.essay-index {
		/* スマートフォンの目次は従来の高さの5/6にする。 */
		--essay-column-height: calc(clamp(360px, calc(100svh - 8rem), 490px) * 5 / 6);
		--essay-row-gap: 48px;
		/* 右端の記事と画面端の間に、指を置ける余白を10px足す。 */
		padding-right: 26px;
	}
}

@media (max-width: 480px) {
	.essay-index {
		--essay-item-gap: 18px;
		margin-top: 16px;
		padding: 0 20px 0 10px;
	}

	.essay-index-link {
		gap: 2px;
		padding: 10px 6px;
	}

	.essay-index-entry-title {
		font-size: calc(17px * var(--essay-font-scale));
	}
}