/*
 * 攻略記事の一覧（/articles/）・読む順番・トップの目次・固定ページ末尾の「このページを使う攻略記事」。
 *
 * 図鑑と同じ「紙と墨と罫」（common.css 冒頭）。記事は図鑑と違う世界にしない。
 * - 箱・影・色地・グラデーションなし。行は罫線で区切る。派手なのはアイキャッチ（立ち絵）だけ。
 * - 記事名はサイト自身の声なのでゴシック。明朝は番号と本数の数字だけ。
 * - 番号を付けるのは「読む順番」だけ（本当に順序のあるもの）。
 * - .post_content の ul/li の打ち消しは2クラス以上で書く（SWELL の ul::before の点を消す）。
 */

/* ---------- 共通: 主題と副題 ---------- */

.ntl-guide__main {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.55;
	color: var(--ntl-text);
}

.ntl-guide__sub {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--ntl-muted);
}

.post_content a.ntl-guide__link,
.ntl-shortcode a.ntl-guide__link {
	display: block;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.ntl-shortcode a.ntl-guide__link:hover .ntl-guide__main {
		color: var(--ntl-main);
		text-decoration: underline;
		text-underline-offset: 0.2em;
		text-decoration-thickness: 1px;
	}
}

.ntl-shortcode a:focus-visible {
	outline: 3px solid var(--ntl-main);
	outline-offset: 2px;
}

.post_content ul.ntl-guides__list,
.post_content ol.ntl-path,
.post_content ul.ntl-home-guides__list,
.post_content ul.ntl-backlinks__list,
.ntl-shortcode ul.ntl-guides__list,
.ntl-shortcode ol.ntl-path,
.ntl-shortcode ul.ntl-home-guides__list,
.ntl-shortcode ul.ntl-backlinks__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .ntl-shortcode li,
.ntl-shortcode.ntl-shortcode li {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.post_content .ntl-shortcode li::before,
.ntl-shortcode.ntl-shortcode li::before {
	content: none;
}

/* ---------- 記事一覧（/articles/）の行 ---------- */

.ntl-guides {
	container-type: inline-size;
	container-name: ntlguides;
	margin-bottom: 2.5em;
}

.post_content ul.ntl-guides__list {
	border-top: 1px solid var(--ntl-border);
}

.post_content .ntl-shortcode li.ntl-guide {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: start;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--ntl-border);
}

.post_content .ntl-shortcode li.ntl-guide--noimg {
	grid-template-columns: minmax(0, 1fr);
}

.ntl-guide__figure {
	display: block;
	line-height: 0;
}

.post_content .ntl-guide__figure img.ntl-guide__thumb,
.ntl-guides img.ntl-guide__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	border-radius: 2px;
	margin: 0;
}

.ntl-guide__uses {
	margin: 0.45rem 0 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--ntl-muted);
}

.ntl-guide__uses a {
	color: var(--ntl-main);
}

@container ntlguides (min-width: 560px) {
	.post_content .ntl-shortcode li.ntl-guide {
		grid-template-columns: 11rem minmax(0, 1fr);
		column-gap: 1.25rem;
		padding: 1.1rem 0;
	}

	.post_content .ntl-shortcode li.ntl-guide--noimg {
		grid-template-columns: minmax(0, 1fr);
	}

	.ntl-guides .ntl-guide__main {
		font-size: 1.1rem;
	}
}

/* ---------- 読む順番 ---------- */

/*
 * 番号を1本の墨の縦罫でつなぎ、「上から順に読む」ことを形で見せる。
 * 番号は明朝の数字（読み取り値と同じ扱い）。丸や色地では囲まない。
 */
.ntl-path-wrap {
	margin-bottom: 2.5em;
}

.post_content ol.ntl-path {
	position: relative;
	counter-reset: ntlpath;
}

.post_content ol.ntl-path::before {
	content: "";
	position: absolute;
	top: 1.1rem;
	bottom: 1.1rem;
	left: 1.05rem;
	width: 1px;
	background: var(--ntl-text);
}

.post_content .ntl-shortcode li.ntl-path__item {
	position: relative;
	counter-increment: ntlpath;
	padding: 0.55rem 0 0.55rem 3.2rem;
}

.post_content .ntl-shortcode li.ntl-path__item::before {
	content: counter(ntlpath);
	position: absolute;
	top: 0.35rem;
	left: 0;
	width: 2.1rem;
	padding: 0.1rem 0;
	background: var(--color_bg, #fff);
	font-family: var(--ntl-display);
	font-size: 1.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	text-align: center;
	color: var(--ntl-text);
}

/* ---------- トップの目次 ---------- */

.ntl-home-guides-wrap {
	container-type: inline-size;
	container-name: ntlhomeguides;
	margin-bottom: 1.5em;
}

.ntl-home-guides {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 2rem;
	row-gap: 1.5rem;
}

@container ntlhomeguides (min-width: 600px) {
	.ntl-home-guides {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* カテゴリ名の上だけ墨の罫（詳細の「合計の行」と同じ扱い）。記事の行は細い罫 */
.post_content p.ntl-home-guides__cat,
.ntl-home-guides p.ntl-home-guides__cat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.55rem 0 0.4rem;
	border-top: 2px solid var(--ntl-text);
	font-size: 0.95rem;
	font-weight: 700;
}

.ntl-home-guides__cat a {
	color: var(--ntl-text);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.ntl-home-guides__cat a:hover {
		color: var(--ntl-main);
		text-decoration: underline;
	}
}

.ntl-home-guides__count {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--ntl-muted);
	white-space: nowrap;
}

.ntl-home-guides__count .ntl-num {
	margin-right: 0.1em;
	font-size: 1.15rem;
	color: var(--ntl-text);
}

.post_content .ntl-home-guides .ntl-home-guides__list li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.45rem 0;
	border-top: 1px solid var(--ntl-border);
	font-size: 0.9rem;
	line-height: 1.55;
}

.ntl-home-guides__list a {
	color: var(--ntl-text);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.ntl-home-guides__list a:hover {
		color: var(--ntl-main);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/* 新着は情報なので主色の文字。色地のバッジにはしない */
.ntl-home-guides__new {
	flex: none;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--ntl-main);
}

.post_content p.ntl-home-guides__all,
.ntl-home-guides-wrap p.ntl-home-guides__all {
	margin: 1.25rem 0 0;
	font-size: 0.9rem;
	font-weight: 700;
}

/* ---------- 固定ページ末尾: このページを使う攻略記事 ---------- */

.ntl-backlinks {
	margin: 2.5em 0 1em;
	padding-top: 0.6rem;
	border-top: 2px solid var(--ntl-text);
}

.post_content p.ntl-backlinks__label,
.ntl-backlinks p.ntl-backlinks__label {
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ntl-muted);
}

.post_content .ntl-backlinks .ntl-backlinks__list li {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--ntl-border);
}