/* nagoya-setsuritsu pages.css（下層ページ専用。接頭辞 nstp-）
   ver は NST_ASSET_VER で管理。theme.css のあとに読む。
   色は theme.css の :root の --nst-* だけを使う。Webフォント・アイコンフォントは読み込まない。
   ページ種別ごとに見出しの形を変える（カテゴリー＝濃紺の帯／タグ＝金の左罫／絞り込み＝交差／
   記事＝朱の帯／固定ページ＝中央寄せ／検索＝検索語を大きく／404＝紺地の案内）。 */

/* ===== 共通の見出し ===== */
.nstp-h2 {
	font-size: clamp(1.219rem,2.9vw,1.5rem); font-weight: 700; line-height: 1.5;
	margin: 2.2rem 0 1rem; display: flex; align-items: center; gap: .55rem;
}
.nstp-h2-motif { flex: 0 0 auto; line-height: 0; color: var(--nst-navy); }
.nstp-h2--list { padding-left: .7rem; border-left: 5px solid var(--nst-red); }
.nstp-h2--tag { border-bottom: 3px solid var(--nst-gold); padding-bottom: .35rem; }
.nstp-h2--related { padding-left: .7rem; border-left: 5px solid var(--nst-navy); }
.nstp-h2--sites { padding-bottom: .4rem; border-bottom: 2px dashed var(--nst-border); }

.nstp-empty { grid-column: 1 / -1; text-align: center; color: var(--nst-muted); padding: 2rem 1rem; }
.nstp-grid { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); align-items: start; }
/* 画像左右の変種は、枠が狭いと生成画像の文字が読めないので横幅を確保する */
.nstp-grid .nst-card--img-left .nst-card-media, .nstp-grid .nst-card--img-right .nst-card-media { flex: 0 0 46%; }
/* 関連記事は小さめの4枚並び。狭い枠で画像左右にすると読めないので縦積みに戻す */
.nstp-grid--related { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.nstp-grid--related .nst-card--img-left, .nstp-grid--related .nst-card--img-right { flex-direction: column; }
.nstp-grid--related .nst-card-media { flex: none; }

/* ===== カテゴリー：濃紺のワイド帯 ===== */
.nstp-hero {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--nst-navy), var(--nst-navy-deep));
	color: #fff; border-radius: 14px;
	padding: 1.6rem 1.4rem 2.2rem; margin: .5rem 0 1.4rem;
}
.nstp-hero-motif { position: absolute; right: -14px; bottom: 6px; color: #fff; opacity: .12; line-height: 0; pointer-events: none; }
.nstp-hero-inner { position: relative; display: flex; gap: 1.1rem; align-items: flex-start; }
.nstp-hero-no { font-size: clamp(2.219rem,6.4vw,3.313rem); line-height: 1; color: var(--nst-gold); font-weight: 700; flex: 0 0 auto; }
.nstp-hero-main { min-width: 0; }
.nstp-hero-eyebrow { display: flex; align-items: center; gap: .45rem; font-size: 0.844rem; color: #ded0bb; margin: 0 0 .25rem; letter-spacing: .06em; }
.nstp-hero-icon { display: inline-block; width: 22px; height: 22px; line-height: 0; color: var(--nst-gold); }
.nstp-hero-icon svg { width: 100%; height: 100%; }
.nstp-hero-title { font-size: clamp(1.438rem,4vw,2.094rem); line-height: 1.45; margin: 0 0 .5rem; font-weight: 700; }
.nstp-hero-desc { font-size: 0.969rem; color: #efe2cd; margin: 0 0 .6rem; max-width: 64ch; }
.nstp-hero-count { font-size: 0.906rem; color: var(--nst-gold); margin: 0; font-weight: 700; }
.nstp-hero-wave { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; opacity: .4; }
.nstp-kishimen { height: 20px; }

@media (max-width: 560px) {
	.nstp-hero-inner { flex-direction: column; gap: .4rem; }
}

/* カテゴリー：タグでの絞り込み導線 */
.nstp-combos { background: #fff; border: 1px solid var(--nst-border); border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.4rem; }
.nstp-combos-label { display: flex; align-items: center; gap: .5rem; font-size: 0.938rem; font-weight: 700; margin: 0 0 .6rem; }
.nstp-combos-motif { line-height: 0; color: var(--nst-navy); }
.nstp-combos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.nstp-combos a {
	display: inline-flex; align-items: baseline; gap: .4rem; font-size: 0.906rem;
	background: #f4ece0; border-radius: 999px; padding: .2rem .8rem;
}
.nstp-combos a:hover { background: var(--nst-navy); color: #fff; text-decoration: none; }
.nstp-combos a span { font-size: 0.813rem; color: var(--nst-muted); }
.nstp-combos a:hover span { color: var(--nst-gold); }

/* カテゴリー：SNS行 */
.nstp-sns { align-items: center; margin-top: 1.8rem; }
.nstp-sns-label { font-size: 0.875rem; color: var(--nst-muted); font-weight: 700; margin-right: .2rem; }

/* ===== タグ：白地＋金の太い左罫 ===== */
.nstp-taghead {
	display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: flex-start;
	background: #fff; border-left: 8px solid var(--nst-gold);
	border-top: 1px solid var(--nst-border); border-right: 1px solid var(--nst-border); border-bottom: 1px solid var(--nst-border);
	border-radius: 0 12px 12px 0; padding: 1.3rem 1.4rem; margin: .5rem 0 1.6rem;
}
.nstp-taghead-main { flex: 1 1 min(100%, 340px); min-width: 0; }
.nstp-taghead-eyebrow { font-size: 0.813rem; color: var(--nst-muted); letter-spacing: .18em; margin: 0 0 .2rem; }
.nstp-taghead-title { font-size: clamp(1.438rem,4vw,2.031rem); margin: 0 0 .35rem; font-weight: 700; color: var(--nst-navy); }
.nstp-taghead-count { font-size: 0.938rem; color: var(--nst-muted); margin: 0; }
.nstp-taghead-desc { font-size: 0.969rem; margin: .5rem 0 0; }
.nstp-taghead-cats { flex: 1 1 min(100%, 280px); }
.nstp-taghead-catslabel { font-size: 0.844rem; color: var(--nst-muted); font-weight: 700; margin: 0 0 .4rem; }
.nstp-taghead-cats ul { list-style: none; margin: 0; padding: 0; }
.nstp-taghead-cats li { border-bottom: 1px dotted var(--nst-border); }
.nstp-taghead-cats a { display: flex; align-items: baseline; gap: .5rem; padding: .35rem 0; font-size: 0.938rem; }
.nstp-taghead-catno { font-size: 0.813rem; color: var(--nst-red); }
.nstp-taghead-catn { margin-left: auto; font-size: 0.813rem; color: var(--nst-muted); }

/* ===== 絞り込み：2枚のカードを × でつなぐ ===== */
.nstp-cross {
	display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
	background: #f4ece0; border-radius: 14px; padding: 1.2rem 1.3rem; margin: .5rem 0 1.6rem;
}
.nstp-cross-card { flex: 1 1 min(100%, 240px); background: #fff; border-radius: 10px; padding: .8rem 1rem; }
.nstp-cross-card--cat { border-top: 4px solid var(--nst-navy); }
.nstp-cross-card--tag { border-top: 4px solid var(--nst-gold); }
.nstp-cross-label { font-size: 0.813rem; color: var(--nst-muted); margin: 0 0 .2rem; letter-spacing: .08em; }
.nstp-cross-name { display: flex; align-items: baseline; gap: .4rem; font-weight: 700; font-size: 1.063rem; line-height: 1.45; }
.nstp-cross-no { font-size: 0.844rem; color: var(--nst-red); }
.nstp-cross-count { font-size: 0.844rem; color: var(--nst-muted); margin: .3rem 0 0; }
.nstp-cross-mark { flex: 0 0 auto; font-size: 1.656rem; font-weight: 700; color: var(--nst-navy); }
.nstp-cross-title { flex: 1 1 100%; font-size: clamp(1.281rem,3.3vw,1.656rem); margin: .5rem 0 .3rem; font-weight: 700; }
.nstp-cross-desc { flex: 1 1 100%; font-size: 0.969rem; color: var(--nst-text); margin: 0; }

@media (max-width: 620px) {
	.nstp-cross-mark { width: 100%; text-align: center; }
}

/* ===== 記事：朱の帯つき見出し ===== */
.nstp-arthead { margin: .4rem 0 1.4rem; }
.nstp-arthead-cat {
	display: inline-flex; align-items: baseline; gap: .45rem;
	background: var(--nst-red); color: #fff; font-size: 0.875rem; font-weight: 700;
	border-radius: 999px; padding: .2rem .9rem; margin-bottom: .7rem;
}
.nstp-arthead-cat:hover { background: #8d3620; color: #fff; text-decoration: none; }
.nstp-arthead-catno { font-size: 0.813rem; color: var(--nst-gold); }
.nstp-arthead-title { font-size: clamp(1.531rem,4.4vw,2.219rem); line-height: 1.5; margin: 0 0 .7rem; font-weight: 700; }
.nstp-arthead-meta {
	display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: 0.875rem; color: var(--nst-muted);
	padding-bottom: .8rem; border-bottom: 3px solid var(--nst-navy);
}
.nstp-arthead-author { display: inline-flex; align-items: center; gap: .4rem; }
.nstp-arthead-mark { line-height: 0; color: var(--nst-gold); }
.nstp-arthead-thumb { margin: 1.1rem 0 0; }
.nstp-arthead-thumb img { width: 100%; border-radius: 12px; border-bottom: 4px solid var(--nst-gold); }

/* 記事：目次（番号つき・2段組み） */
.nstp-toc { background: #fff; border: 1px solid var(--nst-border); border-top: 4px solid var(--nst-navy); border-radius: 12px; padding: 1rem 1.2rem 1.1rem; margin: 1.5rem 0; }
.nstp-toc-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin: 0 0 .6rem; }
.nstp-toc-motif { line-height: 0; color: var(--nst-navy); }
.nstp-toc-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.8rem; }
.nstp-toc-list li { break-inside: avoid; margin-bottom: .25rem; }
.nstp-toc-list a { display: flex; gap: .5rem; font-size: 0.938rem; line-height: 1.7; }
.nstp-toc-no { flex: 0 0 auto; font-size: 0.813rem; color: var(--nst-red); }

@media (max-width: 560px) { .nstp-toc-list { columns: 1; } }

/* 記事：タグ */
.nstp-arttags { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1.8rem 0 0; }
.nstp-arttags-label { font-size: 0.844rem; color: var(--nst-muted); font-weight: 700; margin-right: .2rem; }
.nstp-arttag { background: #f4ece0; color: var(--nst-navy); border-radius: 999px; padding: .2rem .8rem; font-size: 0.906rem; }
.nstp-arttag:hover { background: var(--nst-navy); color: #fff; text-decoration: none; }

/* ===== おすすめサイト（同じ形を並べない：ルール10） ===== */
.nstp-sites { margin: 2.4rem 0 0; }
.nstp-sites-note { font-size: 0.875rem; color: var(--nst-muted); margin: -.6rem 0 1rem; }
.nstp-sitelist {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	grid-auto-flow: row dense; gap: 10px; align-items: start;
}
.nstp-site a { font-weight: 700; font-size: 0.969rem; line-height: 1.5; }
.nstp-site-desc { display: block; font-size: 1rem; color: var(--nst-muted); line-height: 1.7; margin-top: .2rem; }

/* 変種A：番号を左に立てる */
.nstp-site--num { display: flex; gap: .7rem; background: #fff; border: 1px solid var(--nst-border); border-radius: 10px; padding: .8rem 1rem; }
.nstp-site--num .nstp-site-no { font-size: 1.219rem; color: var(--nst-red); font-weight: 700; flex: 0 0 auto; }
.nstp-site--num .nstp-site-body { min-width: 0; }
/* 変種B：説明を先に大きく、名前を後ろに（横長） */
.nstp-site--wide { background: #f4ece0; border-radius: 10px; padding: .85rem 1.1rem; }
.nstp-site--wide .nstp-site-desc { font-size: 1rem; color: var(--nst-text); margin: 0 0 .35rem; }
/* 変種C：枠線だけの素っぽいもの */
.nstp-site--plain { border-bottom: 1px solid var(--nst-border); padding: .7rem .2rem .8rem; }
/* 変種D：先頭にモチーフ */
.nstp-site--mark { background: #fff; border-left: 4px solid var(--nst-gold); border-radius: 0 10px 10px 0; padding: .8rem 1rem; }
.nstp-site--mark .nstp-site-mark { display: block; line-height: 0; color: var(--nst-navy); margin-bottom: .3rem; }

@media (min-width: 760px) { .nstp-site--wide { grid-column: span 2; } }

/* ===== 固定ページ：中央寄せ＋金の下線 ===== */
.nstp-pagehead { text-align: center; margin: 1rem 0 1.8rem; }
.nstp-pagehead-motif { display: inline-block; line-height: 0; color: var(--nst-navy); }
.nstp-pagehead-title {
	font-size: clamp(1.5rem,4vw,2rem); margin: .4rem auto 0; font-weight: 700;
	display: inline-block; padding-bottom: .45rem; border-bottom: 3px solid var(--nst-gold);
}
.nstp-pagebody { max-width: 760px; margin: 0 auto; }

/* ===== 検索 ===== */
.nstp-searchhead { background: #fff; border: 1px solid var(--nst-border); border-radius: 12px; padding: 1.2rem 1.3rem; margin: .5rem 0 1.4rem; }
.nstp-searchhead-eyebrow { font-size: 0.844rem; color: var(--nst-muted); letter-spacing: .1em; margin: 0 0 .2rem; }
.nstp-searchhead-title { font-size: clamp(1.438rem,4vw,2rem); margin: 0 0 .3rem; font-weight: 700; word-break: break-all; }
.nstp-searchhead-count { font-size: 0.938rem; color: var(--nst-muted); margin: 0 0 .8rem; }
.nstp-searchhead-form input[type="search"] { border: 1px solid var(--nst-border); border-radius: 999px; padding: .45rem 1rem; font-size: 1rem; max-width: 100%; }
.nstp-searchhead-form input[type="submit"] { border: none; background: var(--nst-navy); color: #fff; border-radius: 999px; padding: .45rem 1.2rem; font-size: 0.969rem; cursor: pointer; }
.nstp-searchhead-form label { display: inline-block; max-width: 100%; }

/* ===== 404 ===== */
.nstp-404 { margin: .5rem 0 0; }
.nstp-404-head {
	display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
	background: linear-gradient(135deg, var(--nst-navy), var(--nst-navy-deep));
	color: #fff; border-radius: 14px; padding: 1.5rem 1.4rem;
}
.nstp-404-motif { flex: 0 0 auto; line-height: 0; color: var(--nst-gold); }
.nstp-404-head > div { flex: 1 1 min(100%, 320px); }
.nstp-404-title { font-size: clamp(1.438rem,4vw,2rem); margin: 0 0 .4rem; font-weight: 700; }
.nstp-404-text { font-size: 0.969rem; color: #efe2cd; margin: 0; }
.nstp-404-form { margin: 1.2rem 0; }
.nstp-404-form input[type="search"] { border: 1px solid var(--nst-border); border-radius: 999px; padding: .45rem 1rem; font-size: 1rem; max-width: 100%; }
.nstp-404-form input[type="submit"] { border: none; background: var(--nst-navy); color: #fff; border-radius: 999px; padding: .45rem 1.2rem; font-size: 0.969rem; cursor: pointer; }
.nstp-404-cats {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px;
}
.nstp-404-cats a {
	display: flex; align-items: center; gap: .6rem;
	background: #fff; border: 1px solid var(--nst-border); border-radius: 10px;
	padding: .6rem .9rem; font-size: 0.938rem; color: var(--nst-text);
}
.nstp-404-cats a:hover { border-color: var(--nst-navy); text-decoration: none; }
.nstp-404-no { font-size: 0.813rem; color: var(--nst-red); flex: 0 0 auto; }
.nstp-404-icon { display: inline-block; width: 24px; height: 24px; line-height: 0; color: var(--nst-navy); flex: 0 0 auto; }
.nstp-404-icon svg { width: 100%; height: 100%; }
.nstp-404-name { min-width: 0; }

/* ===== 下部の導線（トップと同じ行き先・同じ文言） ===== */
.nstp-routes {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: 1rem; margin: 2.6rem 0 1rem;
}
.nstp-route { display: flex; flex-direction: column; gap: .25rem; border-radius: 12px; padding: 1rem 1.15rem; color: var(--nst-text); }
.nstp-route:hover { text-decoration: none; }
.nstp-route-tag { font-size: 0.844rem; letter-spacing: .05em; color: var(--nst-red); font-weight: 700; }
.nstp-route-title { font-size: 1.094rem; font-weight: 700; line-height: 1.5; }
.nstp-route-desc { font-size: 0.906rem; color: var(--nst-muted); }
.nstp-route--new { background: #fff; border: 1px solid var(--nst-border); border-left: 6px solid var(--nst-gold); }
.nstp-route--new:hover { box-shadow: 0 4px 14px rgba(91, 56, 32,.1); }
.nstp-route--after {
	background: #f4ece0; border: 1px solid var(--nst-border);
	flex-direction: row; align-items: flex-end; justify-content: space-between; gap: .8rem;
}
.nstp-route--after:hover { box-shadow: 0 4px 14px rgba(91, 56, 32,.1); }
.nstp-route-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.nstp-route-arrow {
	flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px;
	background: var(--nst-gold); color: var(--nst-navy-deep);
	display: flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1;
}

@media (max-width: 560px) {
	.nstp-route--after { flex-direction: column; align-items: flex-start; }
}

/* ===== ページ送り ===== */
.nst-main .pagination, .nst-main .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 1.6rem 0 0; }
.nst-main .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
	padding: 0 .6rem; border-radius: 8px; border: 1px solid var(--nst-border); background: #fff;
	font-size: 0.938rem; color: var(--nst-navy);
}
.nst-main .page-numbers.current { background: var(--nst-navy); color: #fff; border-color: var(--nst-navy); }
.nst-main .page-numbers:hover { border-color: var(--nst-navy); text-decoration: none; }
.nst-main .screen-reader-text { position: absolute; left: -999px; }