/*
 * つぎの巻 サイト全体の見た目（すっきり・雑誌風）。Cocoon の上に重ねる。
 * 紺とオレンジの2色。読みやすさを最優先し、見出しは普通の太字ゴシック（Noto Sans JP）にする。
 */

:root {
	--tsg-navy: #14213d;
	--tsg-navy-soft: #c7d0e6;
	--tsg-orange: #ff9f1c;
	--tsg-orange-dark: #d97400;
	--tsg-orange-soft: #fff4e5;
	--tsg-bg: #f4f5f7;
	--tsg-line: #e3e6eb;
	--tsg-link: #1f5bd8;
	--tsg-head: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

body.body {
	background: var(--tsg-bg);
}

/* ヘッダー：紺の帯に白いロゴ、下にオレンジの線 */
.body #header-container {
	background: var(--tsg-navy);
	border-bottom: 4px solid var(--tsg-orange);
}
.body #header,
.body #header-in {
	background: transparent;
}
.body .tagline {
	color: var(--tsg-navy-soft);
	font-size: 13px;
	letter-spacing: 0.03em;
}
.body .site-name-text,
.body #header .site-name-text {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 38px;
	color: #fff;
	letter-spacing: 0.06em;
}
.body .site-name-text-link:hover .site-name-text {
	color: var(--tsg-orange);
}
.body #navi,
.body #navi .navi-in > ul {
	background: #0e1830;
}
.body #navi a {
	color: #fff;
}
.body #navi a:hover {
	background: var(--tsg-orange);
	color: var(--tsg-navy);
}

/* 本文とサイドバーの箱 */
.body #main,
.body #sidebar .widget {
	background: #fff;
	border: 1px solid var(--tsg-line);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(20, 33, 61, 0.06);
}
.body #main {
	margin-bottom: 24px;
}
.body #sidebar .widget {
	padding: 14px 16px;
	margin-bottom: 20px;
}
.body #sidebar .widget-sidebar-title,
.body #sidebar .widget h2,
.body #sidebar .widget h3 {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 16px;
	color: var(--tsg-navy);
	background: none;
	border: 0;
	border-left: 5px solid var(--tsg-orange);
	border-radius: 0;
	padding: 2px 0 2px 10px;
	margin: 0 0 10px;
}

/* 記事のタイトル：左にオレンジの線 */
.body .entry-title {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 26px;
	line-height: 1.5;
	color: var(--tsg-navy);
	border-left: 6px solid var(--tsg-orange);
	border-radius: 0;
	padding: 2px 0 2px 14px;
	margin-bottom: 18px;
}

/* 本文の見出し */
.body .article h2,
.body .tsg-work .tsg-h2 {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 20px;
	line-height: 1.5;
	color: var(--tsg-navy);
	background: var(--tsg-orange-soft);
	border: 0;
	border-left: 6px solid var(--tsg-orange);
	border-radius: 0;
	padding: 10px 14px;
	margin: 2em 0 1em;
}
.body .article h3,
.body .tsg-work .tsg-h3 {
	font-family: var(--tsg-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--tsg-navy);
	background: none;
	border: 0;
	border-left: 4px solid var(--tsg-navy);
	border-radius: 0;
	padding: 2px 0 2px 10px;
}

/* 本文のリンク */
.body .entry-content a {
	color: var(--tsg-link);
	text-underline-offset: 3px;
}

/* 広告の表示 */
.body .tsg-pr {
	background: var(--tsg-bg);
	color: #44506a;
	border: 1px solid var(--tsg-line);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
}
.body .tsg-pr-label {
	background: var(--tsg-navy);
	color: #fff;
	font-weight: 700;
	border-radius: 3px;
	padding: 0 6px;
	margin-right: 8px;
}

/* 結論：紺の箱にオレンジの巻数 */
.body .tsg-conclusion-item {
	background: var(--tsg-navy);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 14px;
}
.body .tsg-conclusion-label {
	color: var(--tsg-navy-soft);
	font-size: 13px;
	opacity: 1;
}
.body .tsg-conclusion-answer {
	font-weight: 700;
	margin-top: 4px;
}
.body .tsg-conclusion-answer strong {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 1.9em;
	color: #ffb347;
	margin: 0 4px;
}
.body .tsg-conclusion-meta {
	color: var(--tsg-navy-soft);
	opacity: 1;
}
/* 結論の答えのすぐ下の「続きの○巻を試し読み（BOOK☆WALKER）」（includes/render.php の tsg_conclusion_try_html。2026-10-04） */
.body .tsg-conclusion-try {
	margin: 6px 0 4px;
}
.body .entry-content .tsg-conclusion-try a {
	display: inline-block;
	border: 1px solid #ffb347;
	border-radius: 999px;
	padding: 4px 14px;
	color: #ffb347;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.body .entry-content .tsg-conclusion-try a small {
	margin-left: 6px;
	font-size: 11px;
	font-weight: 400;
	color: #fff;
}
.body .entry-content .tsg-conclusion-try a:hover {
	background: #ffb347;
	color: var(--tsg-navy);
}
.body .entry-content .tsg-conclusion-try a:hover small {
	color: var(--tsg-navy);
}
.body .tsg-conclusion-item .tsg-details {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}
.body .tsg-conclusion-item .tsg-details > summary {
	color: #ffd08a;
}

/* 結論の横棒：アニメになった巻（薄い青）と続きの巻（オレンジ）。2026-10-03 */
.body .tsg-coverage {
	margin: 8px 0 4px;
}
.body .tsg-coverage-bar {
	display: flex;
	height: 10px;
	border-radius: 5px;
	background: #ffb347;
	overflow: hidden;
}
.body .tsg-coverage-seg {
	display: block;
	height: 100%;
	flex: none;
}
.body .tsg-coverage-seg.is-aired {
	background: var(--tsg-navy-soft);
	box-shadow: inset -2px 0 0 var(--tsg-navy);
}
/* アニメで飛ばされた巻：しま模様のすき間 */
.body .tsg-coverage-seg.is-skipped {
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 3px, rgba(255, 255, 255, 0.15) 3px 6px);
	box-shadow: inset -2px 0 0 var(--tsg-navy);
}
.body .tsg-coverage-seg.is-rest {
	background: transparent;
}
.body .tsg-coverage-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--tsg-navy-soft);
}
.body .tsg-coverage-key::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	margin-right: 4px;
	vertical-align: -1px;
	background: var(--tsg-navy-soft);
}
.body .tsg-coverage-key.is-rest {
	color: #ffd08a;
	font-weight: 700;
}
.body .tsg-coverage-key.is-rest::before {
	background: #ffb347;
}
.body .tsg-coverage-key.is-skipped::before {
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0 2px, rgba(255, 255, 255, 0.2) 2px 4px);
}
/* アニメで飛ばされた話の箱（結論の紺の箱の中） */
.body .tsg-skipped {
	margin: 8px 0 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 13px;
	line-height: 1.6;
}
.body .tsg-skipped-label {
	display: inline-block;
	margin-right: 6px;
	padding: 0 6px;
	border-radius: 4px;
	background: #ffd08a;
	color: var(--tsg-navy);
	font-size: 12px;
	font-weight: 700;
}

/* 表紙（楽天Koboの画像。画像そのものには手を加えず、まわりだけ整える） */
.body .tsg-conclusion-item.has-cover {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.body .tsg-conclusion-body {
	flex: 1;
	min-width: 0;
}
.body .tsg-cover,
.body .tsg-card-cover {
	margin: 0;
	text-align: center;
}
.body .tsg-cover {
	flex: 0 0 100px;
}
.body .tsg-cover img,
.body .tsg-card-cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	background: #fff;
}
.body .tsg-cover img {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.body .tsg-cover figcaption,
.body .tsg-card-cover figcaption {
	margin-top: 6px;
	font-size: 10px;
	line-height: 1.3;
}
.body .tsg-cover figcaption {
	color: var(--tsg-navy-soft);
}
.body .tsg-card-cover figcaption {
	color: #8a93a6;
}

/* 価格表 */
.body .tsg-table {
	border: 1px solid var(--tsg-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 8px;
	overflow: hidden;
}
.body .tsg-table thead th {
	background: var(--tsg-navy);
	color: #fff;
	border-color: var(--tsg-navy);
}
.body .tsg-table td {
	border-color: #eceef2;
}
.body .tsg-link {
	display: inline-block;
	background: var(--tsg-orange);
	color: var(--tsg-navy);
	border: 0;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}
.body .tsg-link:hover {
	background: var(--tsg-orange-dark);
	color: #fff;
}
/* 本文の中では、本文のリンク色（.entry-content a の青）がボタンの紺より強く効いてしまうので、同じ強さで上書きする */
.body .entry-content a.tsg-link,
.body .entry-content a.tsg-volume-link {
	color: var(--tsg-navy);
}
.body .entry-content a.tsg-link:hover,
.body .entry-content a.tsg-volume-link:hover {
	color: #fff;
}
/* スマホの価格表：横にはみ出して「○巻を見る」が隠れていたので、ストアごとの縦並びにする（上：ストア名とボタン、下：合計） */
@media (max-width: 600px) {
	.body .tsg-price-table thead {
		display: none;
	}
	.body .tsg-price-table,
	.body .tsg-price-table tbody {
		display: block;
		width: 100%;
	}
	.body .tsg-price-table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "store go" "total go" "after after";
		column-gap: 10px;
		row-gap: 2px;
		align-items: center;
		padding: 10px 12px;
		border-top: 1px solid #eceef2;
	}
	.body .tsg-price-table tr:first-child {
		border-top: 0;
	}
	.body .tsg-price-table td {
		display: block;
		min-width: 0;
		padding: 0;
		border: 0;
		text-align: left;
		white-space: normal;
		background: transparent;
	}
	.body .tsg-price-table td[data-label]::before {
		content: attr(data-label) " ";
		color: #5b6477;
		font-size: 12px;
	}
	.body .tsg-price-table .tsg-store {
		grid-area: store;
		font-weight: 700;
		color: var(--tsg-navy);
	}
	.body .tsg-price-table .tsg-store .tsg-note {
		font-weight: 400;
	}
	.body .tsg-price-table .tsg-total {
		grid-area: total;
	}
	.body .tsg-price-table .tsg-after {
		grid-area: after;
	}
	.body .tsg-price-table .tsg-go {
		grid-area: go;
	}
}
.body .tsg-badge-best {
	background: var(--tsg-orange);
	color: var(--tsg-navy);
}

/* 目次 */
.body .toc {
	border: 1px solid var(--tsg-line);
	border-radius: 10px;
}
.body .toc-title {
	font-family: var(--tsg-head);
	font-weight: 900;
	color: var(--tsg-navy);
}
/* トップはカードが目次の代わりになるので、長い目次は出さない */
.front-top-page .toc {
	display: none;
}

/* トップ：はじめの説明 */
.body .tsg-home-intro {
	background: #fff;
	border: 1px solid var(--tsg-line);
	border-top: 5px solid var(--tsg-orange);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 26px;
}
.body .tsg-home-lead {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 21px;
	line-height: 1.5;
	color: var(--tsg-navy);
}

/* トップ：作品カード */
.body .tsg-card-grid {
	gap: 16px;
}
.body .tsg-card {
	background: #fff;
	border: 1px solid var(--tsg-line);
	border-top: 5px solid var(--tsg-orange);
	border-radius: 10px;
	transition: box-shadow 0.15s, transform 0.15s;
}
.body .tsg-card:hover {
	box-shadow: 0 6px 18px rgba(20, 33, 61, 0.12);
	transform: translateY(-2px);
}
/* 本文の h3 の飾りがカードの見出しにかからないように、詳しく指定する */
.body .article h3.tsg-card-title,
.body .article p.tsg-card-title,
.body .tsg-card-title {
	margin: 0 0 0.3em;
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 18px;
	line-height: 1.45;
	color: var(--tsg-navy);
	background: none;
	border: 0;
	padding: 0;
}
.body .tsg-card-title a {
	color: var(--tsg-navy);
	text-decoration: none;
}
.body .tsg-card-title a:hover {
	color: var(--tsg-orange-dark);
}
.body .tsg-card-badges span {
	/* 行の高さのぶん文字が上に寄って見えるので、中央にそろえる */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 2px 12px;
	line-height: 1.2;
	font-size: 13px;
	background: #eef1f6;
	color: var(--tsg-navy);
	border: 0;
	border-radius: 999px;
	font-weight: 700;
}
.body .tsg-card-badges span:first-child {
	background: var(--tsg-navy);
	color: #fff;
}
.body .tsg-card-answer strong {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 1.6em;
	color: var(--tsg-orange-dark);
	margin: 0 3px;
}
.body .tsg-card-price {
	font-weight: 700;
	color: #44506a;
}
.body .tsg-card-more a {
	display: inline-block;
	background: var(--tsg-orange);
	color: var(--tsg-navy);
	border-radius: 999px;
	padding: 2px 14px;
	font-weight: 700;
	text-decoration: none;
}
.body .tsg-card-more a:hover {
	background: var(--tsg-orange-dark);
	color: #fff;
}

/* カードの表紙：左に表紙、右に作品名とバッジ */
.body .tsg-card.has-cover {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	column-gap: 14px;
	align-content: start;
}
.body .tsg-card.has-cover > * {
	grid-column: 2;
}
.body .tsg-card.has-cover > .tsg-card-cover {
	grid-column: 1;
	grid-row: 1 / span 2;
}
.body .tsg-card.has-cover > .tsg-card-editions,
.body .tsg-card.has-cover > .tsg-card-more {
	grid-column: 1 / -1;
}
.body .tsg-card-cover img {
	box-shadow: 0 3px 10px rgba(20, 33, 61, 0.25);
}

/* 前後の記事：アイキャッチがないので「NO IMAGE」の箱は出さない */
.body img.no-image {
	display: none;
}
.body #pager-post-navi .card-thumb {
	display: none;
}
.body #pager-post-navi .prev-post-title,
.body #pager-post-navi .next-post-title {
	width: auto;
	padding: 12px 14px;
	font-weight: 700;
	color: var(--tsg-navy);
}

/* フッター */
.body #footer {
	background: var(--tsg-navy);
	color: #fff;
	border-top: 4px solid var(--tsg-orange);
}
.body #footer a {
	color: #ffb347;
}

/* スマホ */
@media (max-width: 834px) {
	/* テーマはスマホで #header .site-name-text を小さくするので、同じ強さで上書きする */
	.body .site-name-text,
	.body #header .site-name-text {
		font-size: 32px;
	}
	.body .tagline {
		font-size: 12px;
	}
	.body .entry-title {
		font-size: 21px;
	}
	.body .article h2,
	.body .tsg-work .tsg-h2 {
		font-size: 18px;
	}
	.body .tsg-cover {
		flex-basis: 100px;
	}
	.body .tsg-card-badges span {
		min-height: 26px;
		font-size: 12px;
	}
}

/* 巻ごとの価格（折りたたみ）。合計だけだと、どの巻がいくらか分からないので出す */
.body .tsg-volumes {
	margin-top: 10px;
	border: 1px solid var(--tsg-line);
	border-radius: 8px;
	background: #fff;
	padding: 8px 12px;
	font-size: 14px;
}
.body .tsg-volumes > summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--tsg-navy);
}
.body .tsg-volume-list {
	list-style: none;
	margin: 10px 0 2px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 6px 16px;
}
.body .tsg-volume-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid #eef1f6;
}
.body .tsg-volume-no {
	min-width: 4.2em;
	color: var(--tsg-navy);
	font-weight: 700;
}
.body .tsg-volume-price {
	flex: 1;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.body .tsg-volume-link {
	background: var(--tsg-orange);
	color: var(--tsg-navy);
	border-radius: 999px;
	padding: 1px 12px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.body .tsg-volume-link:hover {
	background: var(--tsg-orange-dark);
	color: #fff;
}
/* 続きの範囲の最初の巻（「続きはここから」。includes/render.php の tsg_volume_list_html） */
.body .tsg-volume-list li.is-start {
	background: #fff7ec;
}
.body .tsg-volume-start {
	display: block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	color: #b45309;
}

/* 季節・ジャンルのまとめ表：作品／何巻から読む／まとめ買い。「何巻から」をオレンジで大きく */
.body .tsg-season {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
.body .tsg-season thead th {
	background: var(--tsg-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 14px;
	border: 0;
	text-align: left;
}
.body .tsg-season thead th:first-child {
	border-radius: 8px 0 0 0;
}
.body .tsg-season thead th:last-child {
	border-radius: 0 8px 0 0;
}
.body .tsg-season .tsg-season-h-answer,
.body .tsg-season .tsg-season-h-price {
	width: 1%;
	white-space: nowrap;
}
.body .tsg-season td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--tsg-line);
	vertical-align: middle;
	font-size: 14px;
	line-height: 1.5;
	background: #fff;
}
.body .tsg-season tbody tr:nth-child(even) td {
	background: #fafbfc;
}
.body .tsg-season tbody tr:hover td {
	background: var(--tsg-orange-soft);
}
.body .tsg-season-name a {
	font-size: 15px;
	font-weight: 700;
	color: var(--tsg-navy);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.body .tsg-season-name a:hover {
	color: var(--tsg-link);
	text-decoration: underline;
}
.body .tsg-season-new {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 4px;
	background: var(--tsg-orange);
	color: var(--tsg-navy);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 2px;
}
/* 季節のまとめ：放送の状態と続編決定の印、表の上のまとめの一行 */
.body .tsg-season-st {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 2px;
	border: 1px solid currentColor;
}
.body .tsg-st-airing { color: #1a7f37; }
.body .tsg-st-upcoming { color: #5b6478; }
.body .tsg-st-finished { color: #5b6478; }
.body .tsg-st-sequel { color: #d7263d; }
.body .tsg-season-summary {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--tsg-bg);
	font-weight: 700;
	color: var(--tsg-navy);
}
.body .tsg-season-when {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: #5b6478;
}
/* 「何巻から」と価格の行は、同じ高さでそろえる（版が2つの作品で横に並ぶように） */
.body .tsg-season-line {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-height: 32px;
	line-height: 32px;
	white-space: nowrap;
}
.body .tsg-season-line + .tsg-season-line {
	margin-top: 2px;
}
.body .tsg-season-ed {
	display: inline-block;
	padding: 0 6px;
	border-radius: 4px;
	background: #e6eaf2;
	color: var(--tsg-navy);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
}
.body .tsg-season-vol {
	font-family: var(--tsg-head);
	font-size: 20px;
	font-weight: 900;
	color: var(--tsg-orange-dark);
}
.body .tsg-season-kara {
	font-size: 13px;
	font-weight: 700;
	color: #1b2333;
}
.body .tsg-season-unreleased {
	font-size: 11px;
	font-weight: 700;
	color: var(--tsg-navy);
	background: #ffd08a;
	border-radius: 4px;
	padding: 0 6px;
}
.body .tsg-season-yen {
	font-size: 16px;
	font-weight: 900;
	color: #1b2333;
	font-variant-numeric: tabular-nums;
}
.body .tsg-season-count {
	font-size: 12px;
	color: #5b6478;
}
.body .tsg-season-none {
	color: #9aa3b5;
}
/* スマホは作品ごとの横長カード：上に作品名と放送日、下に「何巻から」と価格を横並び */
@media (max-width: 600px) {
	.body .tsg-season thead {
		display: none;
	}
	.body .tsg-season,
	.body .tsg-season tbody {
		display: block;
		width: 100%;
	}
	.body .tsg-season tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "name name" "answer price";
		column-gap: 12px;
		row-gap: 6px;
		margin-bottom: 10px;
		padding: 10px 12px;
		border: 1px solid var(--tsg-line);
		border-radius: 10px;
		background: #fff;
	}
	.body .tsg-season td,
	.body .tsg-season tbody tr:nth-child(even) td,
	.body .tsg-season tbody tr:hover td {
		display: block;
		padding: 0;
		border: 0;
		background: transparent;
	}
	.body .tsg-season-name {
		grid-area: name;
	}
	.body .tsg-season-answer {
		grid-area: answer;
		align-self: end;
	}
	.body .tsg-season-price {
		grid-area: price;
		align-self: end;
	}
	.body .tsg-season-price .tsg-season-line {
		justify-content: flex-end;
	}
	.body .tsg-season-vol {
		font-size: 19px;
	}
	.body .tsg-season-yen {
		font-size: 15px;
	}
}

/* スマホ：版が多い・版の名前が長い作品（薬屋のひとりごと・彼方から など）で、価格がカードの右に切れていた（0.7.110）。
   版ごとに「何巻から」と価格を同じ段に置き（td を display: contents にして、行を1段ずつ並べる）、入りきらないときは「何巻から」の側を折り返す */
@media (max-width: 600px) {
	.body .tsg-season tr {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "name name";
		row-gap: 4px;
	}
	.body table.tsg-season tbody tr td.tsg-season-answer,
	.body table.tsg-season tbody tr td.tsg-season-price {
		display: contents;
	}
	.body .tsg-season-answer .tsg-season-line {
		grid-column: 1;
		flex-wrap: wrap;
		row-gap: 0;
		white-space: normal;
		line-height: 1.6;
		align-self: center;
	}
	.body .tsg-season-price .tsg-season-line {
		grid-column: 2;
		align-self: center;
	}
	.body .tsg-season-line + .tsg-season-line {
		margin-top: 0;
	}
	.body .tsg-season-answer .tsg-season-line:nth-child(1),
	.body .tsg-season-price .tsg-season-line:nth-child(1) {
		grid-row: 2;
	}
	.body .tsg-season-answer .tsg-season-line:nth-child(2),
	.body .tsg-season-price .tsg-season-line:nth-child(2) {
		grid-row: 3;
	}
	.body .tsg-season-answer .tsg-season-line:nth-child(3),
	.body .tsg-season-price .tsg-season-line:nth-child(3) {
		grid-row: 4;
	}
	.body .tsg-season-answer .tsg-season-line:nth-child(4),
	.body .tsg-season-price .tsg-season-line:nth-child(4) {
		grid-row: 5;
	}
	.body .tsg-season-answer .tsg-season-line:nth-child(5),
	.body .tsg-season-price .tsg-season-line:nth-child(5) {
		grid-row: 6;
	}
	.body .tsg-season-answer .tsg-season-line:nth-child(6),
	.body .tsg-season-price .tsg-season-line:nth-child(6) {
		grid-row: 7;
	}
}

/* トップからまとめページへの導線 */
.body .tsg-home-links {
	margin: 10px 0 0;
	font-weight: 700;
}
.body .tsg-home-links a {
	color: var(--tsg-link);
}

/* ほかの作品（同じ時期・同じ出版社） */
.body .tsg-related-list {
	list-style: none;
	margin: 8px 0 12px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px 16px;
}
.body .tsg-related-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--tsg-line);
	border-left: 4px solid var(--tsg-orange);
	border-radius: 6px;
}
.body .tsg-related-list a {
	font-weight: 700;
	color: var(--tsg-navy);
	text-decoration: none;
}
.body .tsg-related-list a:hover {
	color: var(--tsg-orange-dark);
	text-decoration: underline;
}
.body .tsg-related-answer {
	font-size: 13px;
	color: #44506a;
}
.body .tsg-related-date {
	font-size: 12px;
	color: #7b849a;
}
.body .tsg-related-hub {
	margin: 4px 0 16px;
	font-weight: 700;
}
.body .tsg-related-hub a {
	color: var(--tsg-link);
}

/* 季節ごとのまとめページへの入口（トップ・作品一覧） */
.body .tsg-season-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0 0;
}
.body .tsg-season-nav-lead {
	font-size: 13px;
	color: #5a6377;
	margin-right: 2px;
}
.body .tsg-season-nav a {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid #c9d1e3;
	border-radius: 999px;
	background: #fff;
	color: #14213d;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.6;
}
.body .tsg-season-nav a:hover {
	border-color: #ff9f1c;
	color: #c66a00;
}
/* 「それより前の季節」（開くと年ごとの行が出る） */
.body .tsg-season-more {
	flex-basis: 100%;
	margin: 2px 0 0;
}
.body .tsg-season-more summary {
	display: inline-block;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: #4a5468;
	list-style: none;
}
.body .tsg-season-more summary::-webkit-details-marker {
	display: none;
}
.body .tsg-season-more summary::after {
	content: " ▼";
	font-size: 10px;
}
.body .tsg-season-more[open] summary::after {
	content: " ▲";
}
.body .tsg-season-more .tsg-season-years {
	margin-top: 8px;
}
/* 年ごとの行：「2026年　冬 春 夏 秋」 */
.body .tsg-season-years {
	display: grid;
	gap: 6px;
	margin: 12px 0 0;
}
.body .tsg-season-year {
	display: flex;
	align-items: center;
	gap: 8px;
}
.body .tsg-season-year-label {
	flex: 0 0 4.2em;
	font-size: 13px;
	font-weight: 700;
	color: #4a5468;
}
.body .tsg-season-year-links {
	display: grid;
	grid-template-columns: repeat(4, 3em);
	gap: 6px;
}
/* 作品のない季節（場所だけ空けて、冬・春・夏・秋の列をそろえる） */
.body .tsg-season-empty {
	display: inline-block;
	padding: 2px 0;
	border: 1px dashed #e3e7ef;
	border-radius: 999px;
	color: #c3c9d6;
	font-size: 13px;
	text-align: center;
	line-height: 1.6;
}
.body .tsg-season-years a {
	display: inline-block;
	min-width: 0;
	padding: 2px 0;
	border: 1px solid #c9d1e3;
	border-radius: 999px;
	background: #fff;
	color: #14213d;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: 1.6;
}
.body .tsg-season-years a:hover {
	border-color: #ff9f1c;
	color: #c66a00;
}
.body .tsg-season-older {
	margin: 4px 0 0;
	font-size: 13px;
}
.body .tsg-season-older a {
	border: none;
	padding: 0;
	min-width: 0;
	background: none;
	color: var(--tsg-link);
	text-decoration: underline;
}
.body .tsg-home-more {
	margin: 14px 0 0;
	font-weight: 700;
}
.body .tsg-home-more a {
	color: #14213d;
}
.body .tsg-home-works + .tsg-home-works {
	margin-top: 36px;
}

/* 値下がり中（直近に確認した価格より安い） */
/* 原作の最後までアニメになった作品の印（緑。includes/home.php・lists.php） */
.body .tsg-badge-complete {
	display: inline-block;
	margin: 0 6px 0 0;
	padding: 1px 8px;
	border-radius: 4px;
	background: #e7f5ec;
	color: #13653a;
	font-size: 12px;
	font-weight: 700;
	vertical-align: middle;
}
.body .tsg-conclusion-complete {
	background: #e7f5ec;
	color: #13653a;
	font-weight: 700;
	padding: 10px 14px;
	border-radius: 8px;
	margin: 0 0 12px;
}
.body .tsg-badge-drop {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 4px;
	background: #d7263d;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	vertical-align: middle;
}
.body .tsg-drop-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.body .tsg-drop-list li {
	padding: 10px 0;
	border-bottom: 1px solid #e3e7ef;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}
.body .tsg-drop-list a {
	font-weight: 700;
	color: #14213d;
}
.body .tsg-drop-label,
.body .tsg-drop-detail {
	font-size: 13px;
	color: #5a6377;
}
.body .tsg-drop-price s,
.body .tsg-volume-price s {
	color: #8a93a6;
	margin-right: 4px;
}
.body .tsg-drop-price strong {
	color: #d7263d;
}

/* 作品名の検索窓（トップ・作品一覧の一番上） */
.body .tsg-hero .tsg-home-lead {
	font-size: 26px;
	line-height: 1.35;
	margin-bottom: 6px;
}
.body .tsg-hero-sub {
	margin: 0 0 14px;
	color: #3d4760;
}
.body .tsg-hero-note {
	margin: 12px 0 0;
	font-size: 12px;
	color: #5a6377;
}
.body .tsg-search {
	margin: 0 0 4px;
	position: relative;
}
.body .tsg-search-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #14213d;
	margin-bottom: 6px;
}
.body .tsg-search-row {
	display: flex;
	gap: 8px;
}
.body .tsg-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 2px solid #c9d1e3;
	border-radius: 10px;
	background: #fff;
	font-size: 16px; /* 16px 未満だと iPhone で入力時に画面が拡大される */
	color: #14213d;
	box-sizing: border-box;
}
.body .tsg-search-input:focus {
	outline: none;
	border-color: #ff9f1c;
	box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.25);
}
.body .tsg-search-button {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: #14213d;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.body .tsg-search-button:hover {
	background: #22325a;
}
.body .tsg-search-status {
	margin: 6px 0 0;
	font-size: 13px;
	color: #5a6377;
	min-height: 0;
}
.body .tsg-search-status:empty {
	display: none;
}
.body .tsg-search-results {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	border: 1px solid #d9dfeb;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(20, 33, 61, 0.08);
}
.body .tsg-search-results li {
	margin: 0;
	border-top: 1px solid #eef1f6;
}
.body .tsg-search-results li:first-child {
	border-top: 0;
}
.body .tsg-search-results a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding: 12px 14px;
	color: #14213d;
	text-decoration: none;
}
.body .tsg-search-results a:hover,
.body .tsg-search-results a:focus {
	background: #fff6e8;
}
.body .tsg-search-name {
	font-weight: 700;
	flex: 1 1 100%;
}
.body .tsg-search-answer {
	font-weight: 700;
	color: #c66a00;
}
.body .tsg-search-season {
	font-size: 12px;
	color: #5a6377;
}
@media (max-width: 600px) {
	.body .tsg-hero .tsg-home-lead {
		font-size: 22px;
	}
	.body .tsg-search-button {
		padding: 0 16px;
	}
}

/* スマホで検索窓を押したとき、画面の上端から少しあけて止める（固定ヘッダーに隠れないように） */
.body .tsg-search {
	scroll-margin-top: 12px;
}

/* 早わかり：導入文のすぐ下（目次より前）。検索でよく聞かれることを表でまとめる */
.body .tsg-quick {
	background: #fff;
	border: 2px solid var(--tsg-orange);
	border-radius: 12px;
	padding: 12px 16px 6px;
	margin: 1.2em 0 1.6em;
}
.body .tsg-quick-title {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 15px;
	color: var(--tsg-orange-dark);
	margin: 0 0 6px;
}
.body .tsg-quick-list {
	margin: 0;
}
.body .tsg-quick-list > div {
	display: flex;
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid var(--tsg-line);
}
.body .tsg-quick-list dt {
	flex: 0 0 4em;
	font-weight: 700;
	color: var(--tsg-navy);
	margin: 0;
}
.body .tsg-quick-list dd {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 0.95em;
}
.body .tsg-quick-list > div:first-child dd {
	font-weight: 700;
}
/* 早わかりの「無料」の行のリンク（includes/free.php） */
.body .tsg-quick-list .tsg-free-link {
	font-weight: 700;
	white-space: nowrap;
}
/* 早わかりの下の「続きの巻を読む」ボタン（includes/quick.php）。BOOK☆WALKERはオレンジ、楽天Koboは白地の枠 */
.body .tsg-quick-cta {
	padding: 4px 0 10px;
}
.body .tsg-quick-cta-row + .tsg-quick-cta-row {
	margin-top: 8px;
}
.body .tsg-quick-cta-what {
	font-weight: 700;
	color: var(--tsg-navy);
	margin: 0 0 6px;
}
.body .tsg-quick-cta-price {
	font-weight: 400;
	font-size: 0.9em;
	color: #5b6477;
	margin-left: 8px;
}
.body .tsg-quick-cta-go {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.body .entry-content a.tsg-cta-btn,
.body a.tsg-cta-btn {
	display: inline-block;
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	color: var(--tsg-navy);
}
.body .entry-content a.tsg-cta-btn.is-bw {
	background: var(--tsg-orange);
}
.body .entry-content a.tsg-cta-btn.is-kobo {
	background: #fff;
	border: 1px solid var(--tsg-navy-soft);
}
/* 早わかりの下のボタン（「続きの9巻を試し読み」＋小さな店の名前。比較実験 top-bw-1 の B を2026-10-05に採用。includes/quick.php） */
.body .entry-content a.tsg-cta-btn.is-ab-b .tsg-cta-store {
	display: block;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
}
.body .entry-content a.tsg-cta-btn:hover {
	background: var(--tsg-orange-dark);
	color: #fff;
}
.body .tsg-quick-cta-first {
	font-size: 12px;
	color: #5b6477;
	margin: 6px 0 0;
}
.body .tsg-quick-cta-note {
	font-size: 12px;
	color: #5b6477;
	margin: 8px 0 0;
}
/* 早わかりの「紙の本で全巻そろえるなら」（漫画全巻ドットコム）。電子のボタンの下に、小さめの控えめなボタンで */
.body .tsg-quick-cta-paper {
	font-size: 13px;
	color: #5b6477;
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px dashed #e3e6ee;
}
.body .entry-content .tsg-quick-cta-paper a.tsg-cta-btn {
	margin: 4px 0 0 4px;
	padding: 6px 12px;
	font-size: 13px;
}
/* スマホの画面下に固定する「続きの○巻を読む」（includes/quick.php の tsg_sticky_cta）。
   テーマの画面下のメニューの上に重ねる（高さはスクリプトが測って bottom に入れる） */
.body .tsg-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	background: #fff;
	border-top: 1px solid var(--tsg-line);
	box-shadow: 0 -2px 8px rgba(12, 21, 41, 0.12);
}
.body .tsg-sticky-cta[hidden] {
	display: none;
}
.body .tsg-sticky-what {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--tsg-navy);
	line-height: 1.4;
	min-width: 0;
}
.body .tsg-sticky-pr {
	display: inline-block;
	margin-right: 6px;
	padding: 0 4px;
	border: 1px solid #8a93a6;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 400;
	color: #5b6477;
	vertical-align: 1px;
}
.body .tsg-sticky-go {
	display: flex;
	gap: 6px;
	margin: 0;
	flex-shrink: 0;
}
.body .tsg-sticky-cta a.tsg-cta-btn {
	padding: 7px 12px;
	font-size: 13px;
}
.body .tsg-sticky-cta a.tsg-cta-btn.is-bw {
	background: var(--tsg-orange);
}
.body .tsg-sticky-cta a.tsg-cta-btn.is-kobo {
	background: #fff;
	border: 1px solid var(--tsg-navy-soft);
}
@media (min-width: 835px) {
	.body .tsg-sticky-cta {
		display: none;
	}
}

/* 買う範囲の切り替え（まず1冊／続きから最新巻／1巻から全巻）。ラジオボタンとCSSだけで切り替える */
.body .tsg-range-switch {
	position: relative;
}
.body .tsg-range-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.body .tsg-range-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	gap: 8px;
	margin: 6px 0 10px;
}
.body .tsg-range-tabs label {
	display: block;
	background: #fff;
	border: 1px solid var(--tsg-line);
	border-radius: 10px;
	padding: 8px 10px;
	line-height: 1.4;
	cursor: pointer;
}
.body .tsg-range-name {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--tsg-navy);
}
.body .tsg-range-sub {
	display: block;
	font-size: 13px;
	color: #555;
}
.body .tsg-range-panel {
	display: none;
}
.body .tsg-range-input.is-one:checked ~ .tsg-range-panel.is-one,
.body .tsg-range-input.is-next:checked ~ .tsg-range-panel.is-next,
.body .tsg-range-input.is-all:checked ~ .tsg-range-panel.is-all {
	display: block;
}
.body .tsg-range-input.is-one:checked ~ .tsg-range-tabs label.is-one,
.body .tsg-range-input.is-next:checked ~ .tsg-range-tabs label.is-next,
.body .tsg-range-input.is-all:checked ~ .tsg-range-tabs label.is-all {
	border: 2px solid var(--tsg-orange);
	background: var(--tsg-orange-soft);
	padding: 7px 9px;
}
.body .tsg-range-input.is-one:focus-visible ~ .tsg-range-tabs label.is-one,
.body .tsg-range-input.is-next:focus-visible ~ .tsg-range-tabs label.is-next,
.body .tsg-range-input.is-all:focus-visible ~ .tsg-range-tabs label.is-all {
	outline: 2px solid var(--tsg-link);
	outline-offset: 2px;
}
@media (max-width: 600px) {
	.body .tsg-range-tabs label {
		padding: 7px 8px;
	}
	.body .tsg-range-name {
		font-size: 13px;
	}
	.body .tsg-range-sub {
		font-size: 12px;
	}
}

/* サイドバー（パソコンの右側）の下の「作品を探す」まとめ。スクロールしても画面についてくる */
.body #sidebar {
	align-self: stretch;
	height: auto; /* テーマの height: 100% だと本文の高さまで伸びず、下の「ついてくる」が効かない */
}
/* 標準の検索ブロックは、候補が出る作品名検索に差し替えている（includes/sidebar.php）。
   スマホの引き出しの目次は、パソコンでは隠す（パソコンは右側の下の目次がついてくる） */
.body .tsg-drawer-toc {
	display: none;
}
@media (min-width: 835px) {
	.body .tsg-side-searchbox-dup {
		display: none; /* トップ・作品一覧は本文の一番上に検索窓があるので、パソコンの右側では出さない */
	}
}
@media (max-width: 834px) {
	.body .tsg-drawer-toc {
		display: block;
	}
}
/* よく読まれている作品（順位つき） */
.body .tsg-side .tsg-side-popular {
	list-style: decimal;
	margin: 0;
	padding-left: 1.4em;
	font-size: 14px;
}
.body .tsg-side .tsg-side-popular li {
	display: list-item;
	padding: 6px 0;
}
.body .tsg-side .tsg-side-popular li:last-child {
	border-bottom: 0;
}
.body .tsg-side .tsg-side-popular .tsg-film-answer {
	display: block;
	font-size: 13px;
	color: #5a6377;
}
.body .tsg-side .tsg-side-features {
	margin: 0;
}
/* よくある質問（includes/render.php の tsg_render_faq） */
.body .tsg-faq-item {
	border: 1px solid var(--tsg-line);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 0 0 10px;
	background: #fff;
}
.body .tsg-work .tsg-faq-q {
	margin: 0 0 6px;
	padding: 0 0 0 1.6em;
	border: 0;
	background: none;
	font-size: 16px;
	font-weight: 700;
	color: var(--tsg-navy);
	position: relative;
}
.body .tsg-work .tsg-faq-q::before {
	content: "Q";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--tsg-orange-dark);
	font-weight: 700;
}
.body .tsg-work .tsg-faq-q::after {
	display: none; /* テーマの h3 の飾り線を消す */
}
.body .tsg-faq-a {
	margin: 0;
	padding-left: 1.6em;
	line-height: 1.8;
}
.body .tsg-faq-go {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 10px 0 0;
	padding-left: 1.6em;
}
.body .tsg-faq-pr {
	font-size: 12px;
	color: #5b6478;
}
/* よくある質問の「いちばん安く買うには」：ストアごとの行（2026-10-04） */
.body .tsg-faq-go + .tsg-faq-go {
	margin-top: 6px;
}
.body p.tsg-faq-pr {
	margin: 6px 0 0;
	padding-left: 1.6em;
}
.body .tsg-faq-store {
	font-weight: 700;
	min-width: 11em;
}
/* スマホの「サイドバー」「検索」の引き出しを開いている間は、画面下の「続きは○巻から」の帯を隠す（引き出しの上に重なっていた） */
.body:has(#sidebar-menu-input:checked) .tsg-sticky-cta,
.body:has(#search-menu-input:checked) .tsg-sticky-cta {
	display: none;
}
.body .tsg-side-sticky {
	position: sticky;
	top: 16px;
}
.body .tsg-side-box {
	background: #fff;
	border: 1px solid var(--tsg-line);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
}
.body .tsg-side-title {
	font-family: var(--tsg-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--tsg-navy);
	border-left: 4px solid var(--tsg-orange);
	padding-left: 8px;
	margin: 0 0 10px;
}
.body .tsg-side .tsg-search-row {
	gap: 6px;
}
.body .tsg-side .tsg-search-input {
	font-size: 15px;
	min-width: 0;
}
.body .tsg-side .tsg-search-button {
	padding: 0 12px;
}
.body .tsg-side .tsg-season-nav {
	margin: 0;
}
.body .tsg-side .tsg-drop-list {
	margin: 0;
	font-size: 14px;
}
.body .tsg-side-more {
	margin: 8px 0 0;
	font-size: 14px;
}
/* 右側の目次 */
.body .tsg-side-toc {
	margin: 0;
	padding-left: 1.4em;
	font-size: 14px;
	line-height: 1.5;
}
.body .tsg-side-toc li {
	margin: 4px 0;
}
.body .tsg-side-toc a {
	color: var(--tsg-navy);
	text-decoration: none;
}
.body .tsg-side-toc a:hover {
	text-decoration: underline;
}
.body .tsg-side-toc a.is-current {
	color: var(--tsg-orange-dark);
	font-weight: 700;
}
.body .tsg-work > section {
	scroll-margin-top: 16px;
}
@media (max-width: 834px) {
	.body .tsg-side-sticky {
		position: static;
	}
	.body .tsg-side-tocwrap {
		display: none; /* スマホでは右側が本文の下に回るので、目次は本文の中のものを使う */
	}
}

/* ジャンルの入口（作品数つき） */
.body .tsg-genre-count {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--tsg-bg);
	color: #555;
	font-size: 12px;
	font-weight: 400;
}

/* パソコンでは表紙を大きめに（カード 112px、作品ページの結論 130px。スマホはカード 96px・結論 100px） */
@media (min-width: 835px) {
	.body .tsg-card.has-cover {
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: 16px;
	}
	.body .tsg-cover {
		flex: 0 0 130px;
	}
}

/* カードの期の名前：長いものは1行で省略する（全文は押したときの title） */
.body .tsg-card-badges span.tsg-badge-season {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 24px;
	vertical-align: top;
}

/* 共有：本文の上のテーマのシェアボタンは隠し、右側に小さく置く（本文の下のシェアボタンは残す） */
.body .sns-share.ss-top {
	display: none;
}
.body .tsg-side-share {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--tsg-line);
}
.body .tsg-side-sharebox .tsg-side-share {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.body .tsg-side-share-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--tsg-navy);
}
.body .tsg-share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}
.body .tsg-share {
	display: inline-block;
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
.body .tsg-share:hover {
	opacity: 0.85;
	color: #fff;
}
.body .tsg-share-x { background: #000; }
.body .tsg-share-line { background: #06c755; }
.body .tsg-share-hatena { background: #00a4de; }
.body .tsg-share-facebook { background: #1877f2; }
.body .tsg-share-copy { background: #555; font-family: inherit; }
@media (max-width: 834px) {
	.body .tsg-side-sharebox {
		display: none;
	}
}

/* トップ「新しく追加した作品」：表紙の本棚（パソコン4列・スマホ2列） */
.body .tsg-shelf {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 16px;
}
.body .tsg-shelf-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
}
.body .tsg-shelf-cover {
	margin: 0;
	height: 176px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}
.body .tsg-shelf-cover img {
	display: block;
	width: auto;
	max-width: 130px;
	max-height: 160px;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(20, 33, 61, 0.28);
	background: #fff;
}
.body .tsg-shelf-cover figcaption {
	margin-top: 4px;
	font-size: 10px;
	color: #8a93a6;
}
.body .tsg-shelf-nocover {
	justify-content: center;
}
.body .tsg-shelf-nocover span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 160px;
	padding: 8px;
	border-radius: 4px;
	background: var(--tsg-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}
.body .tsg-shelf a.tsg-shelf-name {
	margin-top: 6px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	color: var(--tsg-navy);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.body .tsg-shelf a.tsg-shelf-name:hover {
	text-decoration: underline;
}
.body .tsg-shelf-answer {
	margin: 4px 0 0;
	font-size: 13px;
}
.body .tsg-shelf-answer strong {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 20px;
	color: var(--tsg-orange-dark);
	margin: 0 2px;
}
.body .tsg-shelf-date {
	margin: 2px 0 0;
	font-size: 11px;
	color: #8a93a6;
}
@media (max-width: 834px) {
	.body .tsg-shelf {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 右側「新着の作品」：小さな表紙つき */
.body .tsg-recent-covers {
	list-style: none;
	margin: 0;
	padding: 0;
}
.body .tsg-recent-covers li {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
}
.body .tsg-recent-cover {
	flex: 0 0 52px;
	margin: 0;
}
.body .tsg-recent-cover img {
	display: block;
	width: 52px;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 2px 6px rgba(20, 33, 61, 0.25);
}
.body .tsg-recent-cover figcaption:empty {
	display: none;
}
.body .tsg-recent-text a {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--tsg-navy);
	text-decoration: none;
}
.body .tsg-recent-text a:hover {
	text-decoration: underline;
}
.body .tsg-recent-answer {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	color: var(--tsg-orange-dark);
}

/* カードの放送の状況：押せないので、丸いボタンではなく文字で出す */
.body .tsg-card-meta {
	margin: 6px 0 0;
	min-width: 0;
}
.body .tsg-card-season {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--tsg-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.body .tsg-card-status {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #667085;
}

/* 本棚：作品名を2行分の高さにそろえ、答えと日付の位置がそろうようにする */
.body .tsg-shelf a.tsg-shelf-name {
	min-height: 2.8em;
}

/* 表紙つきカード：1段目＝表紙と「作品名・放送の状況」、2段目以降＝版ごとの答え。余りの高さはカードの下に回す */
.body .tsg-card.has-cover > .tsg-card-cover {
	grid-row: 1;
}
.body .tsg-card.has-cover > .tsg-card-head {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	min-width: 0;
}

/* カードの作品名：2行分の高さにそろえ、下の放送の状況の位置を横のカードとそろえる。改行は文節で、行の長さを均す */
.body .article h3.tsg-card-title,
.body .tsg-card-title {
	min-height: 2.9em;
	word-break: auto-phrase;
	text-wrap: balance;
}
.body .tsg-shelf a.tsg-shelf-name {
	word-break: auto-phrase;
	text-wrap: balance;
}

/* 買う範囲の切り替え：選んだタブと下の表を枠でつなげ、切り替えたら合計を大きく出して一瞬光らせる */
.body .tsg-range-tabs {
	margin-bottom: 0;
}
.body .tsg-range-panel {
	border: 2px solid var(--tsg-orange);
	border-radius: 10px;
	padding: 12px 14px 4px;
	margin-top: 8px;
	background: #fff;
}
.body .tsg-range-input:checked ~ .tsg-range-panel {
	animation: tsg-range-in 0.6s ease-out;
}
@keyframes tsg-range-in {
	0% { opacity: 0.2; transform: translateY(6px); background: var(--tsg-orange-soft); }
	60% { opacity: 1; transform: none; background: var(--tsg-orange-soft); }
	100% { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
	.body .tsg-range-input:checked ~ .tsg-range-panel {
		animation: none;
	}
}
.body .tsg-range-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0 0 10px;
}
.body .tsg-range-what {
	font-weight: 700;
	color: var(--tsg-navy);
	font-size: 14px;
}
.body .tsg-range-sum {
	font-size: 14px;
	color: var(--tsg-navy);
}
.body .tsg-range-sum strong {
	font-family: var(--tsg-head);
	font-weight: 900;
	font-size: 24px;
	color: var(--tsg-orange-dark);
	margin-left: 4px;
}
/* 選んだタブの下に小さな三角を付けて、下の枠とつながって見せる */
.body .tsg-range-tabs label {
	position: relative;
}
.body .tsg-range-input.is-one:checked ~ .tsg-range-tabs label.is-one::after,
.body .tsg-range-input.is-next:checked ~ .tsg-range-tabs label.is-next::after,
.body .tsg-range-input.is-all:checked ~ .tsg-range-tabs label.is-all::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	margin-left: -8px;
	border: 8px solid transparent;
	border-bottom: 0;
	border-top-color: var(--tsg-orange);
}

/* 「まだ発売されていません」：紺の結論の箱の上でも読めるよう、はっきりした札にする */
.body .tsg-unreleased {
	background: #ffd08a;
	color: var(--tsg-navy);
	font-weight: 700;
	font-size: 0.75em;
	padding: 0.15em 0.7em;
}

/* 表紙つきカード：表紙の枠の高さを固定し、表紙の縦横比が違っても下の版の欄が同じ位置から始まるようにする
   （画像は切らず・加工せず、枠の中に収めるだけ） */
.body .tsg-card.has-cover > .tsg-card-cover {
	height: 158px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.body .tsg-card.has-cover > .tsg-card-cover img {
	width: auto;
	max-width: 100%;
	max-height: 136px;
}
@media (min-width: 835px) {
	.body .tsg-card.has-cover > .tsg-card-cover {
		height: 184px;
	}
	.body .tsg-card.has-cover > .tsg-card-cover img {
		max-height: 160px;
	}
}

/* パンくずリスト（タイトルの上）。長い作品名は1行で省略し、前の階層は必ず見えるようにする */
.body .tsg-breadcrumb {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: #5b6478;
}
.body .tsg-breadcrumb ol {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
.body .tsg-breadcrumb li {
	flex: 0 0 auto;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}
.body .tsg-breadcrumb li + li::before {
	content: "›";
	margin: 0 0.5em;
	color: #9aa3b5;
}
.body .tsg-breadcrumb li[aria-current] {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.body .tsg-breadcrumb a {
	color: var(--tsg-link);
	text-decoration: none;
}
.body .tsg-breadcrumb a:hover {
	text-decoration: underline;
}

/* ヘッダー（B案・本棚）：左に紺の背表紙が並び、最後の1冊だけオレンジで「つぎ」。
   「アニメで見たところの次の1冊」というサイトの役割を絵で伝える。テーマのHTMLは変えず、
   本棚は #header-in の ::before（SVG）、下の濃い紺の帯は #header の内側の影で描く */
.body #header {
	box-shadow: inset 0 -6px 0 #0c1529;
	position: relative;
}
/* ヘッダー右上の「広告を含みます」（全ページ共通。site.php の tsg_header_ad_badge） */
.body #header .tsg-ad-badge {
	position: absolute;
	top: 10px;
	right: 14px;
	z-index: 2;
	padding: 2px 10px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
}
.body #header .tsg-ad-badge:hover {
	background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 834px) {
	.body #header .tsg-ad-badge {
		top: 8px;
		right: 10px;
		padding: 1px 8px;
		font-size: 11px;
	}
}
.body #header-in {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: end;
	column-gap: 22px;
	min-height: 0;
	padding: 18px 20px 6px;
}
.body #header-in::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 108px;
	height: 60px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='60' viewBox='0 0 108 60'%3E%3Crect x='0' y='16' width='16' height='46' rx='3' fill='%232b3a5e'/%3E%3Crect x='3' y='24' width='10' height='2' fill='%23fff' fill-opacity='.18'/%3E%3Crect x='20' y='10' width='16' height='52' rx='3' fill='%2333456d'/%3E%3Crect x='23' y='18' width='10' height='2' fill='%23fff' fill-opacity='.18'/%3E%3Crect x='40' y='14' width='16' height='48' rx='3' fill='%233c5080'/%3E%3Crect x='43' y='22' width='10' height='2' fill='%23fff' fill-opacity='.18'/%3E%3Crect x='60' y='8' width='16' height='54' rx='3' fill='%23465b8f'/%3E%3Crect x='63' y='16' width='10' height='2' fill='%23fff' fill-opacity='.18'/%3E%3Crect x='80' y='0' width='28' height='62' rx='3' fill='%23ff9f1c'/%3E%3Crect x='84' y='8' width='20' height='2' fill='%2314213d' fill-opacity='.25'/%3E%3Cg font-family='Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,Meiryo,sans-serif' font-size='15' font-weight='900' fill='%2314213d' text-anchor='middle'%3E%3Ctext x='94' y='30'%3E%E3%81%A4%3C/text%3E%3Ctext x='94' y='48'%3E%E3%81%8E%3C/text%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom / contain;
}
.body #header-in::after {
	display: none;
}
.body #header .logo-header {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	padding: 0;
	text-align: left;
	line-height: 1.1;
}
.body #header .tagline {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 6px 0 12px;
	text-align: left;
}
.body #header .site-name-text {
	font-size: 34px;
	line-height: 1.1;
}
.body #header .site-name-text-link {
	padding: 0;
}
@media (max-width: 834px) {
	.body #header-in {
		justify-content: start;
		column-gap: 12px;
		padding: 12px 14px 6px;
	}
	.body #header-in::before {
		width: 72px;
		height: 40px;
	}
	.body #header .site-name-text {
		font-size: 24px;
	}
	.body #header .tagline {
		font-size: 11px;
		padding: 4px 0 8px;
	}
}

/* 次の巻の発売予定日（価格表の楽天Koboの行） */
.body .tsg-next-release {
	color: var(--tsg-navy);
	font-weight: 700;
}

/* スマホの画面下「検索」ボタンで開く窓：候補が出る作品名検索を白い箱で出す */
.body .search-menu-content .tsg-menu-search {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 14px;
	border-radius: 12px;
	background: #fff;
	text-align: left;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.body .search-menu-content .tsg-search-results {
	max-height: 55vh;
	overflow-y: auto;
}

/* リンクの見分け：文字のリンクは青＋下線にそろえる（作品名のリンクが紺の太字で、ふつうの文字と区別がつかなかったため）。
   ボタン（価格表の「○巻を見る」、季節・ジャンルの丸いボタン）は枠で見分けるので、ここには入れない */
.body .tsg-card-title a,
.body .tsg-recent-text a,
.body .tsg-related-list a,
.body .tsg-shelf a.tsg-shelf-name,
.body .tsg-season-name a,
.body .tsg-breadcrumb a {
	color: var(--tsg-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.body .tsg-card-title a:hover,
.body .tsg-recent-text a:hover,
.body .tsg-related-list a:hover,
.body .tsg-shelf a.tsg-shelf-name:hover,
.body .tsg-season-name a:hover,
.body .tsg-breadcrumb a:hover {
	color: #0f3d99;
	text-decoration-thickness: 2px;
}

/* 初めて使うストアなら（includes/firsttime.php）：版ごとのカードに、BOOK☆WALKERと楽天Koboの戻る額と実質の額を並べる。
   白地にして、実質で安いほうの行だけ緑にする。オレンジはボタンだけに使う（全部オレンジで、どこが大事か分かりにくかった。2026-09-30） */
.body .tsg-first-card {
	background: #fff;
	border: 1px solid var(--tsg-line);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 12px;
}
.body .tsg-first-what {
	font-weight: 700;
	color: var(--tsg-navy);
	margin: 0;
}
.body .tsg-first-totals {
	font-size: 14px;
	color: #5b6477;
	margin: 2px 0 10px;
}
.body .tsg-first-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}
.body .tsg-first-list li {
	display: grid;
	/* 「BOOK☆WALKER」が1行に収まる幅（8.5emでは太字で折り返した） */
	grid-template-columns: 10.5em 1fr auto auto;
	align-items: center;
	gap: 4px 10px;
	background: #fff;
	border: 1px solid var(--tsg-line);
	border-radius: 8px;
	padding: 8px 12px;
	margin: 0 0 6px;
}
.body .tsg-first-list li.is-best {
	background: #eaf3de;
	border-color: #97c459;
}
.body .tsg-first-store {
	font-weight: 700;
	color: var(--tsg-navy);
	white-space: nowrap;
}
.body .tsg-first-back {
	display: block;
	font-family: var(--tsg-head);
	font-weight: 700;
	color: var(--tsg-navy);
}
.body .tsg-first-real {
	display: block;
	font-size: 13px;
	color: #5b6477;
}
.body .tsg-first-list li.is-best .tsg-first-back {
	color: #27500a;
	font-size: 1.1em;
}
.body .tsg-first-list li.is-best .tsg-first-real {
	color: #3b6d11;
}
.body .tsg-badge-real {
	background: #3b6d11;
	color: #fff;
}
/* スマホ：1段目にストア名と印、2段目に戻る額と実質の額 */
@media (max-width: 480px) {
	.body .tsg-first-list li {
		grid-template-columns: 1fr auto;
		grid-template-areas: "store badge" "amount amount" "link link";
	}
	.body .tsg-first-list li > a.tsg-link {
		grid-area: link;
		justify-self: start;
	}
	.body .tsg-first-store {
		grid-area: store;
	}
	.body .tsg-first-amount {
		grid-area: amount;
	}
	.body .tsg-badge-real {
		grid-area: badge;
	}
}
.body .tsg-first-go {
	margin: 8px 0 0;
}
/* ストアごとの行の中の巻の範囲と合計・その店へのボタン（楽天のデータを使う行に楽天以外のリンクを置かないため、行ごとに分けた。2026-10-04） */
.body .tsg-first-range {
	display: block;
	font-size: 13px;
	color: #5b6477;
}
.body .tsg-first-list li > a.tsg-link {
	padding: 6px 14px;
	white-space: nowrap;
	font-size: 14px;
}
.body .tsg-first-go .tsg-link {
	padding: 8px 18px;
}
.body .tsg-first .tsg-note {
	display: block;
	font-size: 13px;
	color: #5b6477;
}

/* 今月・来月に発売の続きの巻、劇場版の一覧、トップの最終回の枠（includes/lists.php） */
.body .tsg-release-list,
.body .tsg-finale-list,
.body .tsg-film-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.body .tsg-release-list li,
.body .tsg-finale-list li,
.body .tsg-film-list li {
	padding: 10px 0;
	border-bottom: 1px solid #e3e7ef;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}
.body .tsg-release-list a,
.body .tsg-finale-list a,
.body .tsg-film-list a {
	font-weight: 700;
	color: #14213d;
}
.body .tsg-release-date {
	font-size: 13px;
	font-weight: 700;
	color: #d7263d;
	min-width: 5.5em;
}
.body .tsg-release-volume {
	font-size: 13px;
	color: #5a6377;
}
.body .tsg-film-answer strong {
	color: #d7263d;
	margin: 0 2px;
}
.body .tsg-film-list .tsg-note {
	flex-basis: 100%;
}

/* 集計ページ（includes/data.php）：巻数ごとの作品名は折り返して並べる */
.body .tsg-data-list .tsg-data-works {
	flex-basis: 100%;
	font-size: 14px;
	line-height: 1.9;
}
.body .tsg-data-list .tsg-data-works a {
	font-weight: 400;
}
.body .tsg-data-table td,
.body .tsg-data-table th {
	white-space: nowrap;
	padding-left: 8px;
	padding-right: 8px;
}
.body .tsg-home-features {
	line-height: 2;
}

/* 続きの話（「第45話」）と、早わかりの「ほかの作品と比べる」リンク */
.body .tsg-conclusion-answer .tsg-chapter {
	font-size: 0.8em;
	font-weight: 700;
	margin-left: 2px;
}
.body .tsg-quick-more {
	font-size: 13px;
	white-space: nowrap;
}

/* 持っている巻から残りを計算（includes/render.php の tsg_owned_calc_html） */
.body .tsg-owned {
	margin: 14px 0 18px;
	padding: 12px 14px;
	border: 1px solid #e3e7ef;
	border-radius: 8px;
	background: #f7f9fc;
}
.body .tsg-owned-title {
	margin: 0 0 8px;
	font-weight: 700;
	color: #14213d;
}
.body .tsg-owned-select {
	max-width: 100%;
	padding: 6px 8px;
	font-size: 15px;
}
.body .tsg-owned-result {
	list-style: none;
	margin: 10px 0 4px;
	padding: 0;
}
.body .tsg-owned-result li {
	padding: 6px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.body .tsg-owned-result strong {
	color: #d7263d;
}
.body .tsg-owned-link {
	font-size: 13px;
	font-weight: 700;
}

/* アイコン：テーマの Font Awesome 4（約105KB）の代わりに、使っている十数個だけを小さなSVGで描く（includes/speed.php。2026-10-03）。
   一覧にないアイコンは何も描かない（四角が出ないよう、空のSVGを既定にする） */
.body .fa {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	--tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C/svg%3E");
	-webkit-mask: var(--tsg-icon) center / contain no-repeat;
	mask: var(--tsg-icon) center / contain no-repeat;
}
.body .fa::before {
	content: none;
}
.body .fa-fw {
	width: 1.28em;
}
.body .fa-home { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 12 4l9 7.5V21h-6.5v-6h-5v6H3z'/%3E%3C/svg%3E"); }
.body .fa-search { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6'/%3E%3Cpath d='m15.5 15.5 5 5' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.8'/%3E%3C/svg%3E"); }
.body .fa-arrow-up { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 4 11.5h5.2V21h5.6v-9.5H20z'/%3E%3C/svg%3E"); }
.body .fa-bookmark { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2.5h12a1 1 0 0 1 1 1V21.5l-7-4.6-7 4.6V3.5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.body .fa-outdent { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v2.4H3zm8 5h10v2.4H11zm0 5h10v2.4H11zM3 18.6h18V21H3zM8 8.6v7.8L3 12.5z'/%3E%3C/svg%3E"); }
.body .fa-close { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.8'/%3E%3C/svg%3E"); }
.body .fa-angle-double-up { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l6-6 6 6M6 18.5l6-6 6 6' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6'/%3E%3C/svg%3E"); }
.body .fa-angle-up { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 15l6-6 6 6' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6'/%3E%3C/svg%3E"); }
.body .fa-angle-right { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6'/%3E%3C/svg%3E"); }
.body .fa-angle-left { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6'/%3E%3C/svg%3E"); }
.body .fa-chevron-right { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4l8 8-8 8' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2'/%3E%3C/svg%3E"); }
.body .fa-chevron-left { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4l-8 8 8 8' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2'/%3E%3C/svg%3E"); }
.body .fa-clock-o { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.8' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'/%3E%3Cpath d='M12 7v5.2l3.4 2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'/%3E%3C/svg%3E"); }
.body .fa-history { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 12a7.8 7.8 0 1 0 2.4-5.6' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'/%3E%3Cpath d='M3.6 3.8v5h5' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'/%3E%3Cpath d='M12 8v4.2l3 2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'/%3E%3C/svg%3E"); }
.body .fa-pencil { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1.2-5.2L15.6 4.4l4 4L9.2 18.8zM14.2 5.8l4 4'/%3E%3C/svg%3E"); }
.body .fa-bars { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v2.4H3zm0 5.8h18v2.4H3zm0 5.8h18V19H3z'/%3E%3C/svg%3E"); }
.body .fa-times { --tsg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.8'/%3E%3C/svg%3E"); }

/* 早わかりの「値下がり」の行（includes/quick.php。2026-10-03） */
.body .tsg-quick-drop {
	color: #d7263d;
	font-weight: 700;
}

/* Amazon の規約で必要な開示の文（アソシエイトIDがあるときだけ。includes/amazon.php） */
.tsg-amazon-disclosure {
	margin: 8px auto 16px;
	padding: 0 16px;
	max-width: 1080px;
	font-size: 11px;
	color: #6b7280;
	text-align: center;
}

/* 紙の全巻セット（漫画全巻ドットコム）と「アニメを観るなら」（DMM TV）。includes/partners.php。2026-10-04 */
.body .tsg-paper {
	margin: 0 0 24px;
	padding: 12px 16px;
	border: 1px dashed var(--tsg-navy-soft);
	border-radius: 8px;
}
.body .tsg-paper-lead {
	font-weight: 700;
	margin: 0 0 4px;
}
.body .tsg-paper-go,
.body .tsg-streaming-go {
	margin: 0 0 6px;
}
.body .tsg-a8-pixel {
	position: absolute;
	width: 1px;
	height: 1px;
	border: 0;
}

/* ほかのストアで探す（BookLive・コミックシーモア。includes/partners.php。2026-10-04） */
.body .tsg-more-stores {
	margin: 0 0 16px;
}
.body .tsg-more-stores-go {
	margin: 0 0 4px;
	font-size: 14px;
}
/* 全ページのフッターの楽天ウェブサービスのクレジット（includes/render.php の tsg_footer_rakuten_credit） */
.tsg-footer-credit {
	text-align: center;
	font-size: 11px;
	padding: 8px 16px 16px;
}
.tsg-footer-credit .tsg-credit {
	margin: 0;
}
/* マイ本棚（includes/shelf.php）：早わかりの見出しの右のボタン */
.body .tsg-quick-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 6px;
}
.body .tsg-quick-head .tsg-quick-title {
	margin: 0;
}
.body .tsg-shelf-btn {
	font-size: 12px;
	line-height: 1.2;
	padding: 5px 10px;
	border: 1px solid #c9cfdb;
	border-radius: 999px;
	background: #fff;
	color: #3b4252;
	cursor: pointer;
}
.body .tsg-shelf-btn::before {
	content: "☆ ";
}
.body .tsg-shelf-btn.is-on {
	background: #fff6e8;
	border-color: var(--tsg-orange);
	color: var(--tsg-orange-dark);
}
.body .tsg-shelf-btn.is-on::before {
	content: "★ ";
}
.body .tsg-shelf-msg {
	font-size: 12px;
	width: 100%;
	text-align: right;
}
/* /hondana/ の一覧 */
.body .tsg-myshelf-summary {
	font-weight: 700;
	margin: 0 0 8px;
}
.body .tsg-myshelf-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.body .tsg-myshelf-item {
	border: 1px solid #e3e6ee;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 0 10px;
	background: #fff;
}
.body .tsg-myshelf-item.has-news {
	border-color: var(--tsg-orange);
}
.body .tsg-myshelf-name {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-weight: 700;
	margin: 0 0 4px;
}
.body .tsg-myshelf-remove {
	/* 押し間違えにくいよう、作品名から離した枠付きのボタンに（0.7.108） */
	margin-left: 10px;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 400;
	border: 1px solid #d5dae5;
	border-radius: 999px;
	background: #fff;
	color: #5b6477;
	cursor: pointer;
	vertical-align: 2px;
	/* 題名が長いと縦につぶれていた（0.7.124） */
	flex: none;
	align-self: flex-start;
	white-space: nowrap;
}
.body .tsg-myshelf-news {
	margin: 4px 0 6px;
	padding: 6px 10px 6px 24px;
	background: #fff6e8;
	border-radius: 6px;
	font-size: 13px;
	color: var(--tsg-orange-dark);
}
.body .tsg-myshelf-anime,
.body .tsg-myshelf-line {
	font-size: 13px;
	color: #5b6477;
	margin: 2px 0;
}
.body .tsg-myshelf-next {
	font-size: 14px;
	margin: 6px 0 2px;
}
.body .tsg-myshelf-empty {
	color: #5b6477;
}
/* マイ本棚が空のとき：寝ているつぎにゃんと案内（0.7.114。名前は 0.7.115 から「つぎにゃん」） */
.body .tsg-myshelf-empty-box {
	display: flex;
	gap: 14px;
	align-items: center;
}
.body .tsg-myshelf-empty-box .tsg-tsugi {
	flex: none;
	width: 84px;
	height: auto;
}
.body .tsg-myshelf-empty-text .tsg-myshelf-empty {
	margin: 0;
}
.body .tsg-tsugi-caption {
	margin: 6px 0 0;
	font-size: 12px;
	color: #8a92a3;
}
/* マイ本棚の表紙（楽天Koboの画像。0.7.98） */
.body .tsg-myshelf-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.body .tsg-myshelf-cover {
	flex: 0 0 64px;
	margin: 2px 0 0;
	text-align: center;
}
.body .tsg-myshelf-cover img {
	display: block;
	width: 64px;
	height: auto;
	border: 1px solid #e3e6ee;
	border-radius: 2px;
}
.body .tsg-myshelf-cover figcaption {
	font-size: 10px;
	color: #8a93a6;
	margin-top: 2px;
	line-height: 1.3;
}
.body .tsg-myshelf-body {
	flex: 1 1 auto;
	min-width: 0;
}
/* 発売カレンダー（マイ本棚の作品の次の巻。0.7.99、0.7.100 で見た目を直した） */
.body .tsg-cal {
	margin: 0 0 16px;
	padding: 14px 14px 16px;
	border: 1px solid #e3e6ee;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(20, 30, 60, .06);
}
.body .tsg-cal-label {
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 8px;
}
.body .tsg-cal-next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0 0 12px;
	padding: 10px 12px;
	background: linear-gradient(90deg, #fff3e3, #fffaf3);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
}
.body .tsg-cal-next-tag {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--tsg-orange);
	border-radius: 999px;
	padding: 1px 9px;
}
.body .tsg-cal-next-date {
	font-weight: 700;
}
.body .tsg-cal-next-title {
	flex-basis: 100%;
	color: #3b4252;
}
.body .tsg-cal-left {
	font-size: 12px;
	font-weight: 700;
	color: var(--tsg-orange-dark);
	background: #fff;
	border: 1px solid #f3c78f;
	border-radius: 999px;
	padding: 0 8px;
}
.body .tsg-cal-none {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: #f6f8fc;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.6;
	color: #3b4252;
}
.body .tsg-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
}
.body .tsg-cal-mid {
	text-align: center;
}
.body .tsg-cal-title {
	font-weight: 700;
	font-size: 18px;
	margin: 0;
	line-height: 1.3;
}
.body .tsg-cal-sub {
	font-size: 12px;
	color: #5b6477;
	margin: 0;
}
.body .tsg-cal-nav {
	width: 36px;
	height: 36px;
	font-size: 20px;
	line-height: 1;
	border: 1px solid #d5dae5;
	border-radius: 50%;
	background: #fff;
	color: #3b4252;
	cursor: pointer;
}
.body .tsg-cal-nav:hover:not(:disabled) {
	background: #f6f8fc;
}
.body .tsg-cal-nav:disabled {
	opacity: .3;
	cursor: default;
}
.body .tsg-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 3px;
}
.body .tsg-cal-w {
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: #5b6477;
	padding: 4px 0;
}
.body .tsg-cal-w.is-sun,
.body .tsg-cal-day.is-sun .tsg-cal-num {
	color: #c0392b;
}
.body .tsg-cal-w.is-sat,
.body .tsg-cal-day.is-sat .tsg-cal-num {
	color: #2c6fbb;
}
.body .tsg-cal-day {
	position: relative;
	min-height: 78px;
	padding: 4px;
	background: #f7f8fb;
	border-radius: 8px;
	overflow: hidden;
}
.body .tsg-cal-day.is-empty {
	background: transparent;
}
.body .tsg-cal-day.is-past {
	opacity: .45;
}
/* 発売済みの巻がある過ぎた日（0.7.102）：薄くしすぎず、色で発売済みと分かるように */
.body .tsg-cal-day.is-past.has-ev {
	opacity: .8;
	background: #eef2f7;
	box-shadow: inset 0 0 0 1px #d5dae5;
}
.body .tsg-cal-left.is-done {
	color: #5b6477;
	border-color: #d5dae5;
}
.body .tsg-cal-card.is-done .tsg-cal-vol::after {
	content: "（発売済み）";
	color: #5b6477;
	font-size: 12px;
}
.body .tsg-cal-day.has-ev {
	background: #fff4e6;
	box-shadow: inset 0 0 0 1px #f6d2a6;
	cursor: pointer;
}
.body .tsg-cal-day.has-ev:hover {
	background: #ffecd6;
}
.body .tsg-cal-num {
	display: inline-block;
	min-width: 22px;
	height: 22px;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}
.body .tsg-cal-day.is-today .tsg-cal-num {
	color: #fff;
	background: var(--tsg-orange);
	border-radius: 50%;
}
.body .tsg-cal-today {
	font-size: 10px;
	font-weight: 700;
	color: var(--tsg-orange-dark);
	margin-left: 2px;
}
.body .tsg-cal-evs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-top: 2px;
}
.body .tsg-cal-thumb img {
	display: block;
	width: 26px;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.body .tsg-cal-ev {
	display: block;
	width: 100%;
	font-size: 11px;
	line-height: 1.4;
	padding: 0 4px;
	border-radius: 4px;
	background: #fff;
	color: var(--tsg-orange-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.body .tsg-cal-more {
	font-size: 11px;
	font-weight: 700;
	color: #5b6477;
	padding: 0 2px;
}
.body .tsg-cal-list {
	margin-top: 14px;
}
.body .tsg-cal-group {
	scroll-margin-top: 80px;
	border-radius: 10px;
	transition: background-color .4s;
}
.body .tsg-cal-group.is-flash {
	background: #fff4e6;
}
.body .tsg-cal-date {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	margin: 12px 0 6px;
	padding-bottom: 4px;
	border-bottom: 2px solid #f1f2f6;
}
.body .tsg-cal-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 8px 4px;
	border-bottom: 1px dashed #e8ebf2;
}
.body .tsg-cal-card:last-child {
	border-bottom: 0;
}
.body .tsg-cal-cover {
	flex: 0 0 52px;
	text-align: center;
}
.body .tsg-cal-cover img {
	display: block;
	width: 52px;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.body .tsg-cal-cover span {
	display: block;
	font-size: 9px;
	color: #8a93a6;
	margin-top: 2px;
}
.body .tsg-cal-cover.is-none {
	height: 72px;
	background: #f1f2f6;
	border-radius: 3px;
}
.body .tsg-cal-body {
	flex: 1 1 auto;
	min-width: 0;
}
.body .tsg-cal-name {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.45;
	margin: 0;
}
.body .tsg-cal-vol {
	font-size: 13px;
	color: #3b4252;
	margin: 0 0 4px;
}
.body .tsg-cal-store {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 13px;
	margin: 3px 0 0;
}
.body .tsg-cal-badge {
	font-size: 11px;
	font-weight: 700;
	border-radius: 4px;
	padding: 1px 6px;
}
.body .tsg-cal-store.is-kobo .tsg-cal-badge {
	color: #a8231d;
	background: #fdecec;
}
.body .tsg-cal-store.is-bw .tsg-cal-badge {
	color: #1d4ed8;
	background: #e8f0fb;
}
.body .tsg-cal-kind {
	color: #3b4252;
}
.body .tsg-cal-go {
	font-size: 12px;
}
.body .tsg-cal .tsg-myshelf-cal {
	margin: 14px 0 0;
}
@media (max-width: 600px) {
	.body .tsg-cal {
		padding: 12px 10px 14px;
	}
	.body .tsg-cal-day {
		min-height: 46px;
		padding: 2px;
		text-align: center;
	}
	.body .tsg-cal-today,
	.body .tsg-cal-evs {
		display: none;
	}
	.body .tsg-cal-day.has-ev::after {
		content: attr(data-n) "冊";
		display: block;
		font-size: 10px;
		font-weight: 700;
		color: #fff;
		background: var(--tsg-orange);
		border-radius: 999px;
		margin: 1px auto 0;
		width: fit-content;
		padding: 0 5px;
	}
}
/* カレンダーに入れる（BOOK☆WALKER の配信予定日の .ics） */
.body .tsg-myshelf-cal {
	margin: 0 0 12px;
	padding: 8px 12px;
	background: #f6f8fc;
	border-radius: 8px;
}
.body .tsg-myshelf-cal-link {
	display: inline-block;
	font-weight: 700;
	padding: 6px 12px;
	border: 1px solid #c9cfdb;
	border-radius: 6px;
	background: #fff;
	text-decoration: none;
}
.body .tsg-myshelf-cal p {
	font-size: 12px;
	color: #5b6477;
	margin: 6px 0 0;
}
@media (max-width: 480px) {
	.body .tsg-myshelf-cover {
		flex-basis: 52px;
	}
	.body .tsg-myshelf-cover img {
		width: 52px;
	}
}
/* サイドバーの「マイ本棚」の箱 */
.tsg-side-myshelf-link.has-news {
	font-weight: 700;
	color: var(--tsg-orange-dark);
}
/* ヘッダーの下の主な入口へのバー（includes/site.php の tsg_header_nav） */
.tsg-gnav {
	position: relative;
	background: var(--tsg-navy);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* 横に送れる続きがある側の端に「›」「‹」とぼかし（includes/site.php の tsg_header_nav_script が has-more・has-prev を付ける。0.7.107） */
.tsg-gnav::before,
.tsg-gnav::after {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34px;
	display: none;
	align-items: center;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	pointer-events: none;
	z-index: 1;
}
.tsg-gnav::after {
	content: "›";
	right: 0;
	justify-content: flex-end;
	padding-right: 6px;
	background: linear-gradient(90deg, rgba(20, 33, 61, 0), var(--tsg-navy) 70%);
}
.tsg-gnav::before {
	content: "‹";
	left: 0;
	justify-content: flex-start;
	padding-left: 6px;
	background: linear-gradient(270deg, rgba(20, 33, 61, 0), var(--tsg-navy) 70%);
}
.tsg-gnav.has-more::after,
.tsg-gnav.has-prev::before {
	display: flex;
}
.tsg-gnav-inner {
	max-width: 1256px;
	margin: 0 auto;
	padding: 0 12px;
	display: flex;
	gap: 4px;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.tsg-gnav-inner::-webkit-scrollbar {
	display: none;
}
/* 0.7.131：文字を大きく（スマホ14px・パソコン15px）、今いるページは文字をオレンジ・太い下線・少し明るい背景にし、
   ほかの項目は少し淡くして差をつける（2026-10-10 ユーザー「文字が小さい」「今いるページの印が弱い」） */
.tsg-gnav a {
	display: inline-block;
	padding: 10px 12px 8px;
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	border-bottom: 4px solid transparent;
}
.tsg-gnav a:hover {
	color: #fff;
}
.tsg-gnav a[aria-current="page"] {
	border-bottom-color: var(--tsg-orange);
	background: rgba(255, 255, 255, .07);
	color: #ffb347;
}
@media (min-width: 768px) {
	.tsg-gnav a {
		font-size: 15px;
	}
}
/* マイ本棚は、オレンジのしおりのアイコンと登録数の丸で見分ける。今いるページの印はほかの項目と同じ下線（0.7.130。
   0.7.103 からのオレンジの枠は目立ちすぎて、今どのページにいるのか分かりにくかった。2026-10-10 ユーザー指摘） */
.tsg-gnav a.tsg-gnav-shelf::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 4px;
	vertical-align: -1px;
	background: var(--tsg-orange);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2.5h12a1 1 0 0 1 1 1V21.5l-7-4.6-7 4.6V3.5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2.5h12a1 1 0 0 1 1 1V21.5l-7-4.6-7 4.6V3.5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 登録している作品の数（メニューのバーと、スマホの画面下のボタン。includes/shelf.php のスクリプトが添える） */
.tsg-shelf-count {
	display: inline-block;
	min-width: 18px;
	height: 18px;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 999px;
	background: #fff;
	color: #b35b00;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	vertical-align: 1px;
}
/* お知らせがあるときは数字の色は変えず、右上に赤い点（数字は登録数で、未読の数ではないため。0.7.108） */
.tsg-shelf-count {
	position: relative;
}
.tsg-shelf-count.has-news::after {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	width: 9px;
	height: 9px;
	border: 1px solid #fff;
	border-radius: 50%;
	background: #e60033;
}
.tsg-shelf-menu-button .menu-icon {
	position: relative;
}
.tsg-shelf-menu-button .tsg-shelf-count {
	position: absolute;
	top: -4px;
	right: -14px;
	margin: 0;
	background: var(--tsg-orange);
	color: #fff;
}
/* 「アニメを観るなら」の配信サービスの一覧（includes/partners.php） */
.body .tsg-streaming-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 12px;
	padding: 0;
}
.body .tsg-streaming-list li {
	margin: 0;
	padding: 3px 10px;
	border: 1px solid #d6dbe6;
	border-radius: 999px;
	font-size: 13px;
	background: #f6f8fc;
	color: #3b4252;
}
/* 持っている巻（マイ本棚・計算欄の「マイ本棚に覚える」） */
.body .tsg-myshelf-own {
	font-size: 13px;
	font-weight: 700;
	margin: 4px 0 2px;
}
.body .tsg-myshelf-line.is-own {
	color: #27500a;
}
.body .tsg-myshelf-line.is-new {
	font-weight: 700;
	color: #a8231d;
}
.body .tsg-myshelf-hint {
	font-size: 13px;
	color: #5b6477;
	background: #f6f8fc;
	border-radius: 6px;
	padding: 8px 10px;
}
.body .tsg-owned-save {
	font-size: 12px;
	padding: 4px 10px;
	border: 1px solid #c9cfdb;
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
}
.body .tsg-owned-msg {
	font-size: 12px;
	color: #27500a;
	margin-left: 6px;
}


/* マイ本棚で外した直後の「元に戻す」（0.7.105） */
.body .tsg-myshelf-undo {
	margin: 0 0 12px;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff4e6;
	font-size: 14px;
}
.body .tsg-myshelf-undo-btn {
	margin-left: 6px;
	padding: 2px 10px;
	border: 1px solid var(--tsg-orange);
	border-radius: 999px;
	background: #fff;
	color: #b35b00;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

/* マイ本棚：お知らせの説明・見つからない作品（0.7.108） */
.body .tsg-myshelf-note {
	margin: -6px 0 10px;
	font-size: 12px;
	color: #5b6477;
}
.body .tsg-myshelf-gone {
	margin: 0 0 12px;
	padding: 8px 12px;
	border-radius: 8px;
	background: #f6f8fc;
	font-size: 13px;
}
.body .tsg-myshelf-list > .tsg-myshelf-undo {
	list-style: none;
}

/* 上のメニューのページを左右にスワイプして隣のメニューへ（0.7.109）。指の動きに合わせて画面の端に行き先を出し、十分に動かすとオレンジに。
   0.7.114 から、案内係のつぎにゃん（しおりネコ）が札の上からのぞく。移れるところまで動かすと漫符の「！」、端のページの外側は汗と「ここが端です」 */
.tsg-swipe-guide {
	position: fixed;
	top: 50%;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	max-width: 70vw;
	pointer-events: none;
}
.tsg-swipe-guide.is-next {
	right: 12px;
}
.tsg-swipe-guide.is-prev {
	left: 12px;
}
.tsg-swipe-guide .tsg-tsugi {
	display: block;
	width: 76px;
	height: auto;
}
.tsg-swipe-guide.is-prev .tsg-tsugi {
	transform: scaleX(-1);
}
.tsg-tsugi .tsg-tsugi-bang,
.tsg-tsugi .tsg-tsugi-sweat {
	opacity: 0;
	transition: opacity .1s;
}
.tsg-swipe-guide.is-ready .tsg-tsugi-bang,
.tsg-swipe-guide.is-going .tsg-tsugi-bang,
.tsg-swipe-guide.is-end .tsg-tsugi-sweat {
	opacity: 1;
}
.tsg-swipe-guide.is-end .tsg-swipe-pill {
	background: rgba(91, 100, 119, .88);
}
.tsg-swipe-pill {
	max-width: 70vw;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(20, 33, 61, .82);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
	transition: background-color .12s;
}
.tsg-swipe-guide.is-ready .tsg-swipe-pill,
.tsg-swipe-guide.is-going .tsg-swipe-pill {
	background: var(--tsg-orange);
	color: var(--tsg-navy);
}

/* 上のメニューのページのスワイプ（0.7.111）：中身（#content）を指に合わせて横に動かす。縦のスクロールはブラウザに任せる（拡大中は外す） */
html.tsg-swipe-ready #content {
	touch-action: pan-y pinch-zoom;
}
html.tsg-swiping #container {
	overflow-x: clip;
}
html.tsg-swiping #content {
	will-change: transform;
}
/* スワイプで移ったときだけのページ切り替えのアニメーション：前の中身は滑って出ていったあとなので消し、新しい中身を反対側から滑り込ませる。
   ヘッダーとメニューのバーは同じ絵なので動かない。印（tsg-vt）は head のスクリプトが付けて、終わったら外す */
html.tsg-vt #content {
	view-transition-name: tsg-main;
}
/* 画面下のボタン（固定）は別に写して、滑り込む中身の上に残す（0.7.112。前は滑り込みのあいだ右半分が隠れていた） */
html.tsg-vt .mobile-footer-menu-buttons {
	view-transition-name: tsg-footbar;
}
::view-transition-group(tsg-main) {
	animation: none;
}
::view-transition-old(tsg-main) {
	animation: none;
	opacity: 0;
}
html.tsg-vt-next::view-transition-new(tsg-main) {
	animation: tsg-vt-from-right .28s cubic-bezier(.2, .8, .2, 1) both;
}
html.tsg-vt-prev::view-transition-new(tsg-main) {
	animation: tsg-vt-from-left .28s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes tsg-vt-from-right {
	from {
		transform: translateX(100vw);
	}
}
@keyframes tsg-vt-from-left {
	from {
		transform: translateX(-100vw);
	}
}

/* つぎにゃんのちょこちょこの出番（0.7.117）：検索で見つからない・404・マイ本棚のお知らせ */
.body .tsg-not-found {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 12px 0 20px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #f6f8fc;
}
.body .tsg-not-found-img {
	flex: none;
	width: 84px;
	height: auto;
}
.body .tsg-not-found-text p {
	margin: 0 0 6px;
	font-size: 14px;
}
.body .tsg-not-found .tsg-not-found-title {
	font-size: 16px;
	font-weight: 700;
}
.error404 .body img.not-found,
.error404 img.not-found {
	display: block;
	width: 120px;
	height: auto;
	margin: 12px auto;
}
.body .tsg-search-miss {
	display: flex;
	gap: 8px;
	align-items: center;
}
.body .tsg-search-miss img {
	flex: none;
	width: 34px;
	height: auto;
}
.body .tsg-myshelf-newsbox {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 10px;
}
.body .tsg-myshelf-newsbox img {
	flex: none;
	width: 44px;
	height: auto;
}
.body .tsg-myshelf-newstext .tsg-myshelf-summary {
	margin: 0 0 2px;
}
.body .tsg-myshelf-newstext .tsg-myshelf-note {
	margin: 0;
}

/* 作品ページで「マイ本棚に入れる」を押したとき、つぎにゃんがボタンの下で小さく跳ねて喜ぶ（0.7.118） */
.tsg-nyan-cheer {
	position: absolute;
	z-index: 50;
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 4px 14px 4px 8px;
	border: 1px solid #ffd08a;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(20, 33, 61, .16);
	color: var(--tsg-navy);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	animation: tsg-nyan-hop .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
.tsg-nyan-cheer img {
	display: block;
	width: 34px;
	height: auto;
}
.tsg-nyan-cheer.is-out {
	animation: none;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .35s, transform .35s;
}
@keyframes tsg-nyan-hop {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(.8);
	}
	60% {
		opacity: 1;
		transform: translateY(-4px) scale(1.04);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.tsg-nyan-cheer {
		animation: none;
	}
}

/* スワイプで移るあいだ、画面の外にあった上のメニューを画面の上に出す（0.7.121） */
.tsg-gnav.tsg-gnav-float {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
}

/* 作品ページの下の「マイ本棚に入れる」（0.7.123） */
.body .tsg-shelf-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0;
	padding: 12px 14px;
	border: 1px solid #ffd08a;
	border-radius: 10px;
	background: #fffaf2;
}
.body .tsg-shelf-cta-text {
	flex: 1 1 240px;
	margin: 0;
	font-size: 14px;
}
.body .tsg-shelf-cta .tsg-shelf-btn {
	font-size: 14px;
	padding: 8px 16px;
	border-color: var(--tsg-orange);
	font-weight: 700;
}
/* 一覧の作品名の横の小さい☆（0.7.123） */
.body .tsg-shelf-btn.tsg-shelf-mini {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 0 0 6px;
	padding: 0;
	font-size: 15px;
	line-height: 1;
	vertical-align: 2px;
}
.body .tsg-shelf-btn.tsg-shelf-mini::before {
	content: "☆";
}
.body .tsg-shelf-btn.tsg-shelf-mini.is-on::before {
	content: "★";
}
/* 見たお知らせ（3日間残す。0.7.123）は薄く */
.body .tsg-myshelf-news.is-recent {
	background: #f4f6fa;
	color: #5b6477;
}
/* 別の端末に引き継ぐ（0.7.123） */
.body .tsg-myshelf-import {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid #ffd08a;
	border-radius: 10px;
	background: #fffaf2;
}
.body .tsg-myshelf-import-text {
	margin: 0 0 8px;
	font-size: 14px;
}
.body .tsg-myshelf-move {
	margin: 16px 0 0;
	padding: 0 14px;
	border: 1px solid #e3e6ee;
	border-radius: 10px;
	background: #f9fafc;
	font-size: 14px;
}
.body .tsg-myshelf-move > summary {
	padding: 10px 0;
	font-weight: 700;
	cursor: pointer;
}
.body .tsg-myshelf-move p {
	margin: 0 0 8px;
}
.body .tsg-myshelf-move-btn {
	margin: 0 0 12px;
	padding: 6px 14px;
	border: 1px solid #c9cfdb;
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	cursor: pointer;
}

/* 計測を止めた・戻したときの知らせ（0.7.125） */
.tsg-nostats-note {
	position: fixed;
	top: 10px;
	right: 10px;
	left: 10px;
	z-index: 10001;
	padding: 10px 14px;
	border-radius: 10px;
	background: #14213d;
	color: #fff;
	font-size: 13px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
/* マイ本棚：ホーム画面に追加の案内（0.7.125）。0.7.134 から左につぎにゃんのアイコン */
.body .tsg-myshelf-home {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid #e3e6ee;
	border-radius: 10px;
	background: #f9fafc;
	font-size: 14px;
}
.body .tsg-myshelf-home p {
	margin: 0 0 8px;
}
.body .tsg-myshelf-home .tsg-myshelf-home-how {
	margin: 0;
	font-size: 13px;
	color: #5b6477;
}

/* トップページの「ホーム画面に追加」の案内（0.7.126） */
.body .tsg-install-tip {
	/* 1行の横並び：アイコン・文（2行まで）・追加・×（0.7.128。改行が多すぎた） */
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 14px 0 0;
	padding: 10px 12px;
	border: 1px solid #d5dae5;
	border-radius: 12px;
	background: #eef2f9;
}
.body .tsg-install-tip[hidden],
.body .tsg-install-add[hidden] {
	display: none;
}
.body .tsg-install-tip img {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 8px;
}
.body .tsg-install-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #5b6477;
}
.body .tsg-install-text b {
	display: block;
	font-size: 14px;
	color: var(--tsg-navy);
}
.body .tsg-install-add {
	flex: none;
	padding: 7px 14px;
	white-space: nowrap;
	border: 0;
	border-radius: 999px;
	background: var(--tsg-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.body .tsg-install-close {
	flex: none;
	padding: 4px 6px;
	border: 0;
	background: none;
	color: #5b6477;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* 「初めて使うストアなら」から BOOK☆WALKER の始め方の記事へ（0.7.129） */
.body .tsg-first-guide {
	margin: 4px 0 8px;
	font-size: 14px;
	font-weight: 700;
}

/* 「ホーム画面に追加」の案内のアイコン（0.7.134） */
.body .tsg-myshelf-home-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(20, 33, 61, .18);
}
.body .tsg-myshelf-home-body {
	flex: 1;
	min-width: 0;
}

/* BOOK☆WALKER の期間限定のコイン還元（0.7.134。期間中だけ出る） */
.body .tsg-campaign-tag {
	display: inline-block;
	margin-right: 6px;
	padding: 0 6px;
	border-radius: 4px;
	background: #ffe2b8;
	color: #7a3e00;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	vertical-align: 1px;
}
.body .tsg-quick-campaign {
	margin: 6px 0 0;
	font-size: 12px;
	color: #4a3b2a;
}
.body .tsg-bw-campaign {
	margin: 12px 0;
	padding: 12px 14px;
	border: 2px solid #f3b35c;
	border-radius: 10px;
	background: #fff8ec;
	font-size: 14px;
}
.body .tsg-bw-campaign p {
	margin: 0 0 6px;
}
.body .tsg-bw-campaign .tsg-campaign-title {
	font-weight: 700;
}
.body .tsg-bw-campaign .tsg-note {
	font-size: 12px;
	color: #5b6477;
}
.body .tsg-bw-campaign .tsg-campaign-link {
	margin: 0;
	font-weight: 700;
}