/* Nettoge Core — 誘導メニュー（nettoge/guide-nav）。記事の下に「次に読む」記事を読む順に並べる（2026-09-26）。
 * 形: 紙の地の板 → 見出し（道の印・題・副題）→ 番号の縦の線に沿って、白いカード（アイキャッチ・名前・この記事で分かること・山形）→ 一覧への帯。
 *   - 番号の丸は縦の線でつなぐ（読む順）。1 番目は塗った丸（次はここ）
 *   - 明るくする・動かすホバーはマウスのある端末だけ（@media (hover: hover)）。触る端末では押した後に明るいまま残らない
 *   - 段はメニューの幅で決める（コンテナクエリ）。狭いときは絵を小さく、ごく狭いときは絵を外す
 * 色・角丸はテーマのトークン（tokens-nettoge.css の --ntg2-*。ダークはテーマが html[data-nettoge-theme="dark"] で差し替える）。
 * 無いとき（エディタなど）は右の値。!important は使わない（テーマの #body_wrap の規則と張り合わない。a には class があるのでテーマのリンクの色は付かない） */
.ntg-gnav {
	--gn-accent: var(--ntg2-accent, #b72305);
	--gn-teal: var(--ntg2-teal, #2f7a72);
	--gn-teal-bg: var(--ntg2-teal-bg, #e8f2f0);
	--gn-fg: var(--ntg2-text, #1a1714);
	--gn-sub: var(--ntg2-sub, #5f5a55);
	--gn-muted: var(--ntg2-muted, #8a847d);
	--gn-surface: var(--ntg2-surface, #fff);
	--gn-paper: var(--ntg2-paper, #f6f5f3);
	--gn-paper2: var(--ntg2-paper-2, #edeae6);
	--gn-line: var(--ntg2-line, #e3e0dc);
	--gn-line2: var(--ntg2-line-2, #d3cec7);
	--gn-radius: var(--ntg2-radius, 6px);
	--gn-radius-sm: var(--ntg2-radius-sm, 4px);
	--gn-thumb: 144px;
	--gn-num: 28px;
	container-type: inline-size;
	container-name: ntg-gnav;
	margin: 2.4em 0 1.6em;
	padding: 16px 16px 14px;
	background: var(--gn-paper);
	border: 1px solid var(--gn-line);
	border-radius: var(--gn-radius);
	color: var(--gn-fg);
	line-height: 1.5;
	font-size: 15px;
}

/* ---------- 見出し ---------- */
.ntg-gnav__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.ntg-gnav__icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--gn-surface);
	border: 1px solid var(--gn-line);
	color: var(--gn-accent);
}
.ntg-gnav__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.ntg-gnav__title { font-weight: 700; font-size: 16.5px; letter-spacing: .02em; }
.ntg-gnav__sub { font-size: 12.5px; color: var(--gn-muted); }

/* ---------- 並び（番号の縦の線） ---------- */
.ntg-gnav__list { display: grid; gap: 10px; margin: 0; padding: 0; }
.ntg-gnav--steps .ntg-gnav__list { position: relative; }
.ntg-gnav--steps .ntg-gnav__list::before {
	content: "";
	position: absolute;
	left: calc(var(--gn-num) / 2 - 1px);
	top: 24px;
	bottom: 24px;
	width: 2px;
	border-radius: 1px;
	background: var(--gn-line2);
}
.ntg-gnav__row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.ntg-gnav--steps .ntg-gnav__row { grid-template-columns: var(--gn-num) minmax(0, 1fr); column-gap: 12px; }
.ntg-gnav__num {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--gn-num);
	height: var(--gn-num);
	border-radius: 50%;
	background: var(--gn-surface);
	border: 2px solid var(--gn-accent);
	color: var(--gn-accent);
	font-weight: 700;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.ntg-gnav__row:first-child .ntg-gnav__num { background: var(--gn-accent); color: #fff; }

/* ---------- カード ---------- */
.ntg-gnav .ntg-gnav__item {
	display: grid;
	grid-template-columns: var(--gn-thumb) minmax(0, 1fr) 20px;
	align-items: center;
	gap: 14px;
	padding: 10px 12px 10px 10px;
	background: var(--gn-surface);
	border: 1px solid var(--gn-line);
	border-radius: var(--gn-radius);
	color: var(--gn-fg);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ntg-gnav .ntg-gnav__item:focus-visible { outline: 2px solid var(--gn-teal); outline-offset: 2px; }
.ntg-gnav__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--gn-radius-sm);
	background: var(--gn-paper2);
}
.ntg-gnav .ntg-gnav__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
	transition: transform .25s ease;
}
.ntg-gnav__noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gn-muted); }
.ntg-gnav__body { display: grid; gap: 3px; min-width: 0; }
.ntg-gnav__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ntg-gnav__tag {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--gn-teal-bg);
	color: var(--gn-teal);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
}
.ntg-gnav__tag--draft { background: var(--gn-paper2); color: var(--gn-sub); }
.ntg-gnav__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.45;
	transition: color .15s ease;
}
.ntg-gnav__lead {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--gn-sub);
	font-size: 13px;
	line-height: 1.55;
}
.ntg-gnav__go { display: grid; place-items: center; color: var(--gn-muted); transition: transform .15s ease, color .15s ease; }

/* ---------- 一覧への帯 ---------- */
.ntg-gnav .ntg-gnav__hub {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 12px 0 0;
	padding: 9px 12px;
	border: 1px solid var(--gn-line2);
	border-radius: var(--gn-radius);
	background: var(--gn-surface);
	color: var(--gn-fg);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.ntg-gnav .ntg-gnav__hub svg { color: var(--gn-muted); transition: transform .15s ease; }
.ntg-gnav .ntg-gnav__hub:focus-visible { outline: 2px solid var(--gn-teal); outline-offset: 2px; }

@media (hover: hover) {
	.ntg-gnav .ntg-gnav__item:hover { border-color: var(--gn-teal); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
	.ntg-gnav .ntg-gnav__item:hover .ntg-gnav__name { color: var(--gn-teal); }
	.ntg-gnav .ntg-gnav__item:hover .ntg-gnav__go { color: var(--gn-teal); transform: translateX(3px); }
	.ntg-gnav .ntg-gnav__item:hover .ntg-gnav__img { transform: scale(1.04); }
	.ntg-gnav .ntg-gnav__hub:hover { border-color: var(--gn-teal); color: var(--gn-teal); }
	.ntg-gnav .ntg-gnav__hub:hover svg { color: var(--gn-teal); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
	.ntg-gnav .ntg-gnav__item, .ntg-gnav .ntg-gnav__img, .ntg-gnav__go, .ntg-gnav__name, .ntg-gnav .ntg-gnav__hub, .ntg-gnav .ntg-gnav__hub svg { transition: none; }
}

/* ---------- 狭いとき（メニューの幅で決める） ---------- */
@container ntg-gnav (max-width: 559px) {
	.ntg-gnav__list { --gn-thumb: 92px; --gn-num: 24px; }  /* 入れ物は自分自身を問えないので、中の並びに置く */
	.ntg-gnav__row, .ntg-gnav--steps .ntg-gnav__row { column-gap: 8px; }
	.ntg-gnav .ntg-gnav__item { gap: 10px; padding: 8px 8px 8px 8px; grid-template-columns: var(--gn-thumb) minmax(0, 1fr) 14px; }
	.ntg-gnav__name { font-size: 14.5px; }
	.ntg-gnav__lead { font-size: 12.5px; }
	.ntg-gnav__num { font-size: 12px; }
}
@container ntg-gnav (max-width: 279px) {
	.ntg-gnav .ntg-gnav__item { grid-template-columns: minmax(0, 1fr) 14px; }
	.ntg-gnav__thumb { display: none; }
}
@media (max-width: 599px) {
	.ntg-gnav { padding: 14px 12px 12px; margin-left: 0; margin-right: 0; }
}

/* ---------- エディタで記事が1本も無いとき ---------- */
.ntg-gnav--empty { padding: 14px 16px; color: var(--gn-sub); font-size: 13px; }