/* Seijuji TOC widget — 案 7「手書きクレヨン」ベース。
 * 子どもがクレヨンで描いた目次風。歪な角丸 + わずかな回転 + パステル色面 +
 * 黄色マーカー風 active state。
 * マークアップは widget.php / content-filter.php が出す ol / li / .seijuji-toc__link 構造に合わせて
 * セレクタを書いている。
 */

/* スコープ wrapper：紙風背景 + 不揃いな角丸 + わずかな傾き */
.seijuji-toc {
	font-family: "Yu Mincho", "YuMincho", "Comic Sans MS", "Klee One", /* 手書き風 fallback chain（日本語も効くもの優先） */
		"Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "MS UI Gothic", cursive;
	font-weight: 600; /* クレヨンの太さを擬似 */
	color: #5c4a3a; /* セピア寄りのこげ茶（鉛筆色） */
	line-height: 1.55;
	padding: 18px 18px 22px; /* 紙の余白 */
	background:
		radial-gradient(circle at 22% 18%, rgba(255,255,255,0.6) 0 1px, transparent 2px), /* 紙のザラッと感 */
		radial-gradient(circle at 78% 62%, rgba(255,255,255,0.5) 0 1px, transparent 2px),
		radial-gradient(circle at 45% 85%, rgba(255,255,255,0.45) 0 1px, transparent 2px),
		#fff8e7; /* クリーム色の画用紙 */
	border-radius: 24px 18px 28px 16px / 18px 26px 16px 24px; /* 紙ちぎり風の不揃い角丸 */
	border: 3px solid #f3b186; /* 外側オレンジ枠 */
	box-shadow:
		inset 0 0 0 2px #fff8e7, /* 内側 cream 帯 */
		inset 0 0 0 4px #d4a373, /* 内側こげ茶ダッシュ風 */
		0 4px 0 0 rgba(180, 130, 90, 0.18), /* 下の影 */
		0 8px 18px -6px rgba(180, 130, 90, 0.28);
	transform: rotate(-0.6deg); /* ノートに貼ったメモ風のわずかな傾き */
}

/* テキスト選択色も世界観に合わせる */
.seijuji-toc ::selection {
	background: #ffe17a;
	color: #5c4a3a;
}

/* ---------------- タイトル「目次」 ---------------- */
.seijuji-toc__title { /* 黄色いクレヨンでぐるっと囲った見出し */
	position: relative;
	font-size: 22px;
	font-weight: 800;
	color: #d96f3a; /* オレンジクレヨン */
	text-align: center;
	margin: 0 0 14px;
	padding: 6px 12px 10px;
	letter-spacing: 0.08em;
	display: block;
	transform: rotate(0.8deg);
}
.seijuji-toc__title::before { /* タイトルを囲む手描き楕円（border + 不均等 radius で代用） */
	content: "";
	position: absolute;
	inset: -2px -6px;
	border: 2.5px solid #f7c948;
	border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%;
	transform: rotate(-1.2deg);
	pointer-events: none;
	opacity: 0.85;
}
.seijuji-toc__title::after { /* 右上に小さな飾り（クレヨン記号） */
	content: "✿";
	position: absolute;
	right: -2px;
	top: -8px;
	font-size: 16px;
	color: #e88aa6;
	transform: rotate(15deg);
}

/* ---------------- リスト共通リセット ---------------- */
.seijuji-toc__ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.seijuji-toc__item {
	position: relative;
}

/* ---------------- H2 リスト（最上位 ol--lv2） ---------------- */
.seijuji-toc__ol--lv2 > li {
	margin: 0 0 10px;
}
.seijuji-toc__ol--lv2 > li:last-child {
	margin-bottom: 0;
}
.seijuji-toc__ol--lv2 > .seijuji-toc__item > .seijuji-toc__link { /* H2 リンク：太字 + 左クレヨン丸 + 下に手描き波線 */
	display: block;
	position: relative;
	font-size: 15px;
	font-weight: 800;
	color: #5c4a3a;
	text-decoration: none;
	padding: 4px 4px 6px 28px; /* 左は丸印の余白 */
	line-height: 1.45;
	transition: transform 0.15s ease, color 0.15s ease;
}
.seijuji-toc__ol--lv2 > .seijuji-toc__item > .seijuji-toc__link::before { /* H2 頭のクレヨン丸 */
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 18px;
	height: 18px;
	border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; /* 歪な丸 */
	background: #f7c948;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
	transform: rotate(-8deg);
}
/* H2 ごとに 4 色をローテ */
.seijuji-toc__ol--lv2 > li:nth-child(4n+1) > .seijuji-toc__link::before { background: #f9c6c9; } /* peach */
.seijuji-toc__ol--lv2 > li:nth-child(4n+2) > .seijuji-toc__link::before { background: #b8e0c4; } /* mint */
.seijuji-toc__ol--lv2 > li:nth-child(4n+3) > .seijuji-toc__link::before { background: #cbb7e4; } /* lavender */
.seijuji-toc__ol--lv2 > li:nth-child(4n)   > .seijuji-toc__link::before { background: #f7c948; } /* yellow */

.seijuji-toc__ol--lv2 > .seijuji-toc__item > .seijuji-toc__link::after { /* H2 の下の手描き波線 */
	content: "";
	position: absolute;
	left: 28px;
	right: 4px;
	bottom: 0;
	height: 4px;
	background: radial-gradient(circle at 0 50%, #d4a373 0 1.5px, transparent 2px) repeat-x;
	background-size: 6px 4px;
	opacity: 0.55;
}
.seijuji-toc__ol--lv2 > .seijuji-toc__item > .seijuji-toc__link:hover {
	color: #d96f3a;
	transform: translateX(2px) rotate(-0.3deg);
}

/* ---------------- H3 リスト（ol--lv3）---------------- */
.seijuji-toc__ol--lv3 { /* H2 の中にネスト */
	margin: 6px 0 8px 12px;
	padding-left: 16px;
	position: relative;
}
.seijuji-toc__ol--lv3::before { /* 左にクレヨンで引いた縦線（パステル 3 色グラデ） */
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background: linear-gradient(180deg, #f9c6c9 0 30%, #b8e0c4 30% 60%, #cbb7e4 60% 100%);
	border-radius: 3px;
	opacity: 0.75;
	transform: rotate(0.5deg);
}
.seijuji-toc__ol--lv3 > li {
	margin: 0 0 4px;
}
.seijuji-toc__ol--lv3 .seijuji-toc__link { /* H3 リンク：細字 + ✎ */
	display: block;
	position: relative;
	font-size: 13px;
	font-weight: 600;
	color: #6b5b48;
	text-decoration: none;
	padding: 3px 2px 3px 18px;
	line-height: 1.45;
	word-break: keep-all; /* 長文言 22 文字を折返しで吸収 */
	overflow-wrap: anywhere;
	transition: color 0.15s ease, transform 0.15s ease;
}
.seijuji-toc__ol--lv3 .seijuji-toc__link::before { /* 頭の手描き風記号 */
	content: "✎";
	position: absolute;
	left: -2px;
	top: 3px;
	font-size: 11px;
	color: #c89a72;
	transform: rotate(-12deg);
}
.seijuji-toc__ol--lv3 .seijuji-toc__link:hover {
	color: #d96f3a;
	transform: translateX(2px);
}
.seijuji-toc__ol--lv3 .seijuji-toc__link:hover::before {
	color: #d96f3a;
}

/* ---------------- H4 リスト（ol--lv4、当面 H3 と同様の見た目で軽量化） ---------------- */
.seijuji-toc__ol--lv4 {
	margin: 4px 0 6px 10px;
	padding-left: 14px;
}
.seijuji-toc__ol--lv4 .seijuji-toc__link {
	font-size: 12px;
	padding: 2px 2px 2px 14px;
}

/* ---------------- 現在地ハイライト（.is-current は a 自身に付く） ---------------- */
.seijuji-toc__link.is-current { /* 黄色マーカーで線を引いたような active state */
	color: #b94e1c;
	font-weight: 800;
	background: linear-gradient(105deg,
		transparent 0,
		transparent 8%,
		rgba(255, 220, 100, 0.75) 12%,
		rgba(255, 220, 100, 0.55) 88%,
		transparent 95%);
	background-repeat: no-repeat;
	background-size: 100% 70%;
	background-position: 0 60%;
	border-radius: 6px 14px 8px 12px / 10px 8px 12px 6px;
	transform: rotate(-0.8deg);
	box-shadow: inset 0 -2px 0 rgba(217, 111, 58, 0.2);
}
.seijuji-toc__ol--lv3 .seijuji-toc__link.is-current::before { /* H3 active のクレヨン記号を★に */
	content: "★";
	color: #d96f3a;
	font-size: 13px;
	top: 2px;
	left: -4px;
	transform: rotate(-8deg);
	text-shadow: 0 0 4px rgba(255, 220, 100, 0.6);
}
.seijuji-toc__ol--lv2 > .seijuji-toc__item > .seijuji-toc__link.is-current::before { /* H2 active のクレヨン丸を大きめ＋枠付き */
	background: #ffd166;
	box-shadow:
		inset 0 -2px 0 rgba(0,0,0,0.08),
		0 0 0 2px #fff8e7,
		0 0 0 4px rgba(217, 111, 58, 0.3);
	transform: rotate(-15deg) scale(1.1);
}

/* ---------------- SP（〜480px）：傾きを軽減、padding を少し詰める ---------------- */
@media (max-width: 480px) {
	.seijuji-toc {
		padding: 16px 14px 18px;
		transform: rotate(-0.3deg);
	}
	.seijuji-toc__title {
		font-size: 20px;
	}
	.seijuji-toc__ol--lv2 > .seijuji-toc__item > .seijuji-toc__link {
		font-size: 14px;
	}
	.seijuji-toc__ol--lv3 .seijuji-toc__link {
		font-size: 12.5px;
	}
}