/*
Theme Name:    日本語教師ルート (Neutrope Starter Child)
Theme URI:     https://nihongokyoshi-route.jp/
Description:   日本語教師ルート用の Neutrope Starter 子テーマ。トップページ 9 セクション構成と共通 nkr-* class を本ファイルに集約。親テーマは無改変。top_mockup_v1 を見た目基準とする。
Author:        日本語教師ルート編集部
Template:      neutrope-starter
Version:       0.4.0
Requires at least: 6.0
Requires PHP:  7.4
License:       GPL v2 or later
License URI:   https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:   neutrope-starter-nkr
Tags:          classic-theme, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   Noto JP fonts (modal v1 準拠)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&display=swap');

/* =========================================================
   style.css (child theme) — top_mockup_v1.html 準拠
   ---------------------------------------------------------
   設計方針:
     1. :root にローカル --nkr-* トークンを定義し、モックの暖色基調を保持
     2. 親 --nt-* トークンを子側で上書きして、親 nt-* クラス群も自然に
        子のトーンに馴染ませる (ハイブリッド方式)
     3. セクション固有のレイアウトは nkr-* クラスで閉じる
     4. !important 禁止、直値はトークン化を優先

   構成:
     §TOKENS  ローカルトークン + 親トークン上書き
     §BASE    body / typography / container / section 共通
     §BTN     ボタン (.nt-btn 系を上書き + nkr-btn 追加)
     §UTIL    nkr-link / nkr-icon / 共通ユーティリティ
     §HERO    Section 1
     §S2      Section 2 (3つの入口)
     §S3      Section 3 (3 ステップ)
     §S4      Section 4 (ハンドブック導線 — モック準拠の白基調)
     §S5      Section 5 (記事カード 4枚均等)
     §S6      Section 6 (進路設計ノート)
     §S7      Section 7 (講座比較)
     §S8      Section 8 (カテゴリタイル)
     §S9      Section 9 (このサイトについて)
     §PLACEHOLDER  記事カード未公開時の見え方
     §RESPONSIVE 共通 BP
   ========================================================= */

/* =========================================================
   §TOKENS
   ========================================================= */

:root {
	/* === ローカル (nkr-) トークン === */
	--nkr-bg:        #fbfaf6;
	--nkr-bg-soft:   #f3f0e8;
	--nkr-bg-soft2:  #eee9dd;
	--nkr-ink:       #1f2530;
	--nkr-ink-mute:  #6b7280;
	--nkr-ink-soft:  #3b4150;
	--nkr-line:      #e6e1d6;
	--nkr-accent:    #2c4a6b;
	--nkr-accent-hover: #1f3a55;
	--nkr-accent-ink: #ffffff;
	--nkr-tan:       #c8bea7;
	--nkr-tan-soft:  #9a8c6b;
	--nkr-cover-cream-1: #ffffff;
	--nkr-cover-cream-2: #ebe4d2;
	--nkr-cover-border:  #ddd2b8;
	--nkr-cover-ink:     #5a4a2e;

	--nkr-radius:    6px;
	--nkr-radius-sm: 4px;
	--nkr-maxw:      1120px;
	--nkr-pad-pc:    112px;
	--nkr-pad-sp:    64px;
	--nkr-container-pad: 24px;

	--nkr-serif: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", serif;
	--nkr-sans:  "Noto Sans JP", "Hiragino Sans", "游ゴシック", system-ui, sans-serif;

	--nkr-transition: .2s;

	/* === 親 --nt-* トークンの上書き ===
	   親テーマの nt-* クラス群もモックのトーンに馴染ませるため、
	   主要トークンを子側で再定義する。親 CSS の値より優先される。 */
	--nt-color-bg:               var(--nkr-bg);
	--nt-color-surface:          var(--nkr-bg);
	--nt-color-text:             var(--nkr-ink);
	--nt-color-muted:            var(--nkr-ink-mute);
	--nt-color-border:           var(--nkr-line);
	--nt-color-primary:          var(--nkr-accent);
	--nt-color-secondary:        var(--nkr-accent);
	--nt-color-accent:           var(--nkr-accent);
	--nt-color-accent-contrast:  var(--nkr-accent-ink);
	--nt-card-border:            var(--nkr-line);
	--nt-font-base:              var(--nkr-sans);
	--nt-font-heading:           var(--nkr-serif);
	--nt-section-y:              var(--nkr-pad-pc);
	--nt-container-max:          var(--nkr-maxw);
	--nt-container-padding:      var(--nkr-container-pad);
	--nt-radius-md:              var(--nkr-radius);
	--nt-radius-sm:              var(--nkr-radius-sm);
	--nt-transition:             var(--nkr-transition);
	--nt-heading-letter-spacing: 0.04em;
}

/* =========================================================
   §BASE
   ========================================================= */

html,
body {
	background: var(--nkr-bg);
	color: var(--nkr-ink);
	font-family: var(--nkr-sans);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--nkr-accent);
}

img {
	max-width: 100%;
	display: block;
}

/* コンテナ (親 .nt-container を踏襲しつつ幅と padding を統一) */
.nt-container {
	max-width: var(--nkr-maxw);
	margin-inline: auto;
	padding-inline: var(--nkr-container-pad);
}

.nt-container--narrow {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: var(--nkr-container-pad);
}

/* セクション余白 (PC 112px / SP 64px) */
.nt-section,
section.nkr-handbook,
section.nkr-read-now,
section.nkr-pdf-band {
	padding-block: var(--nkr-pad-pc);
}

/* 親 nt-section--alt は子では使わず、--bg と同色に揃える */
.nt-section--alt {
	background: var(--nkr-bg);
}

/* セクション見出し */
.nt-section__head,
.nkr-section-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 56ch;
	margin-bottom: 0;
}

.nt-eyebrow {
	font-size: 12px;
	color: var(--nkr-ink-mute);
	letter-spacing: 0.22em;
	margin: 0;
}

h2 {
	font-family: var(--nkr-serif);
	font-size: 30px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	font-weight: 500;
	color: var(--nkr-ink);
	margin: 0;
}

h3 {
	font-family: var(--nkr-serif);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.nkr-text-lead {
	font-size: 15px;
	color: var(--nkr-ink-mute);
	line-height: 1.85;
	max-width: 640px;
	margin: 0;
}

.nkr-text-note {
	font-size: 11px;
	color: var(--nkr-ink-mute);
	letter-spacing: 0.06em;
	margin: 0;
}

/* =========================================================
   §BTN
   モック .btn-primary / .btn-link を踏襲。
   親 .nt-btn--primary も同じ見た目に揃える (markup 移行不要)。
   ========================================================= */

.nkr-btn,
.nt-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: var(--nkr-radius);
	font-size: 14px;
	letter-spacing: 0.06em;
	line-height: 1;
	transition: background var(--nkr-transition), color var(--nkr-transition), border-color var(--nkr-transition);
	text-decoration: none;
	font-family: var(--nkr-sans);
	cursor: pointer;
}

.nkr-btn--primary,
.nt-btn--primary,
.nt-btn--accent {
	background: var(--nkr-accent);
	color: var(--nkr-accent-ink);
	border: 1px solid var(--nkr-accent);
}

.nkr-btn--primary:hover,
.nkr-btn--primary:focus-visible,
.nt-btn--primary:hover,
.nt-btn--primary:focus-visible,
.nt-btn--accent:hover,
.nt-btn--accent:focus-visible {
	background: var(--nkr-accent-hover);
	color: var(--nkr-accent-ink);
	border-color: var(--nkr-accent-hover);
}

.nkr-btn--outline,
.nt-btn--ghost {
	background: transparent;
	color: var(--nkr-ink);
	border: 1px solid var(--nkr-line);
}

.nkr-btn--outline:hover,
.nt-btn--ghost:hover {
	border-color: var(--nkr-accent);
	color: var(--nkr-accent);
}

/* =========================================================
   §UTIL
   ========================================================= */

/* テキストリンク (下線 + アロー)。最弱 CTA として共通利用。
   既存の nkr-step__link / nkr-compare__more / nkr-about__link /
   nkr-hero__link の見た目を将来統一する出口でもある。 */
.nkr-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--nkr-line);
	padding-bottom: 4px;
	text-decoration: none;
	transition: border-color var(--nkr-transition), color var(--nkr-transition);
}

.nkr-link:hover,
.nkr-link:focus-visible {
	border-color: var(--nkr-accent);
	color: var(--nkr-accent);
}

/* アイコン (FA5) サイズ統一 */
.nkr-icon { display: inline-flex; align-items: center; justify-content: center; }
.nkr-icon--sm { font-size: 12px; }
.nkr-icon--md { font-size: 16px; }
.nkr-icon--lg { font-size: 20px; }

/* =========================================================
   §HERO  Section 1
   ========================================================= */

.nkr-hero {
	padding-block: clamp(64px, 8vw, 96px);
}

.nkr-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 64px;
	align-items: center;
}

.nkr-hero__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 56ch;
}

.nkr-hero__eyebrow {
	font-size: 12px;
	color: var(--nkr-ink-mute);
	letter-spacing: 0.18em;
	margin: 0;
}

.nkr-hero__title {
	font-family: var(--nkr-serif);
	font-size: clamp(2rem, 4.2vw, 46px);
	line-height: 1.45;
	letter-spacing: 0.04em;
	font-weight: 500;
	color: var(--nkr-ink);
	margin: 0;
}

.nkr-hero__lead {
	font-size: 16px;
	line-height: 2;
	color: var(--nkr-ink-soft);
	margin: 0;
	max-width: 520px;
}

.nkr-hero__actions {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 16px;
}

/* 副 CTA: テキストリンク */
.nkr-hero__link {
	font-size: 14px;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid var(--nkr-line);
	padding-bottom: 4px;
	text-decoration: none;
	transition: border-color var(--nkr-transition), color var(--nkr-transition);
}

.nkr-hero__link:hover,
.nkr-hero__link:focus-visible {
	border-bottom-color: var(--nkr-accent);
	color: var(--nkr-accent);
}

/* 右側ビジュアル枠 (画像未投入時も CSS で成立) */
.nkr-hero__media {
	aspect-ratio: 5 / 4;
	background: linear-gradient(135deg, #f1ece0 0%, #e6dec9 100%);
	border: 1px solid var(--nkr-line);
	border-radius: var(--nkr-radius);
	overflow: hidden;
	margin: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nkr-hero__media::before {
	content: "";
	position: absolute;
	inset: 24px;
	border: 1px solid #d8cdb1;
	border-radius: 4px;
	pointer-events: none;
}

.nkr-hero__media-label {
	font-family: var(--nkr-serif);
	color: var(--nkr-tan-soft);
	font-size: 14px;
	letter-spacing: 0.2em;
}

.nkr-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =========================================================
   §S2  Section 2 (3つの入口)
   ========================================================= */

.nkr-feature-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 28px;
	background: #fff;
	border: 1px solid var(--nkr-line);
	border-radius: var(--nkr-radius);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--nkr-transition), transform var(--nkr-transition);
}

.nkr-feature-card:hover,
.nkr-feature-card:focus-visible {
	border-color: #cabfa7;
	color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
	.nkr-feature-card:hover { transform: translateY(-2px); }
}

.nkr-feature-card__icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--nkr-line);
	border-radius: 50%;
	color: var(--nkr-accent);
	background: transparent;
	font-family: var(--nkr-serif);
	font-size: 16px;
	letter-spacing: 0;
}

.nkr-feature-card__title {
	font-family: var(--nkr-serif);
	font-size: 20px;
	line-height: 1.6;
	margin: 0;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
	font-weight: 500;
}

.nkr-feature-card__lead {
	font-size: 14px;
	line-height: 1.9;
	color: var(--nkr-ink-mute);
	margin: 0;
}

.nkr-feature-card__more {
	margin-top: auto;
	padding-top: 4px;
	font-size: 13px;
	color: var(--nkr-accent);
	letter-spacing: 0.06em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Section 2 の grid (親 nt-grid--3 と独立して、モック準拠の挙動にする) */
.nt-grid--3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

/* =========================================================
   §S3  Section 3 (3 ステップ)
   ========================================================= */

.nkr-step-list {
	list-style: none;
	padding: 0;
	margin: 48px 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.nkr-step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 8px;
}

.nkr-step__num {
	font-family: var(--nkr-serif);
	font-size: 42px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--nkr-tan);
	font-weight: 500;
}

.nkr-step__title {
	font-family: var(--nkr-serif);
	font-size: 18px;
	line-height: 1.6;
	margin: 12px 0 0;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
	font-weight: 500;
}

.nkr-step__lead {
	font-size: 14px;
	line-height: 1.9;
	color: var(--nkr-ink-mute);
	margin: 0;
}

.nkr-step__link {
	margin-top: 4px;
	font-size: 13px;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	border-bottom: 1px solid var(--nkr-line);
	padding-bottom: 3px;
	text-decoration: none;
	transition: border-color var(--nkr-transition), color var(--nkr-transition);
}

.nkr-step__link:hover,
.nkr-step__link:focus-visible {
	border-color: var(--nkr-accent);
	color: var(--nkr-accent);
}

/* =========================================================
   §S4  Section 4 (ハンドブック導線 — モック準拠の白基調)
   親 .nt-cta--cover は使わない。専用 .nkr-handbook で構築。
   ========================================================= */

.nkr-handbook {
	background: var(--nkr-bg-soft);
}

.nkr-handbook__grid {
	display: grid;
	grid-template-columns: 0.7fr 1.3fr;
	gap: 64px;
	align-items: center;
}

.nkr-handbook__cover {
	aspect-ratio: 3 / 4;
	background: linear-gradient(160deg, var(--nkr-cover-cream-1) 0%, var(--nkr-cover-cream-2) 100%);
	border: 1px solid var(--nkr-cover-border);
	border-radius: 4px;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 24px;
	margin: 0;
	overflow: hidden;
}

.nkr-handbook__ribbon {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--nkr-accent);
	color: var(--nkr-accent-ink);
	font-size: 11px;
	padding: 6px 14px;
	letter-spacing: 0.16em;
	font-family: var(--nkr-sans);
}

.nkr-handbook__cover-title {
	font-family: var(--nkr-serif);
	font-size: 22px;
	line-height: 1.5;
	color: var(--nkr-cover-ink);
	margin: 0;
	letter-spacing: 0.04em;
	font-weight: 500;
}

.nkr-handbook__cover-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nkr-handbook__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 560px;
}

.nkr-handbook__body .nt-eyebrow {
	margin-bottom: 12px;
}

.nkr-handbook__title {
	font-family: var(--nkr-serif);
	font-size: 30px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	font-weight: 500;
	color: var(--nkr-ink);
	margin: 0;
}

.nkr-handbook__lead {
	margin-top: 20px;
	color: var(--nkr-ink-soft);
	font-size: 15px;
	line-height: 1.95;
}

.nkr-handbook__actions {
	margin-top: 32px;
}

/* =========================================================
   §S5  Section 5 (記事カード 4枚均等)
   ========================================================= */

.nkr-read-now { /* セクション余白は .nt-section と共通 (§BASE で指定済み) */ }

.nkr-articles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 40px;
}

.nkr-article-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: inherit;
	text-decoration: none;
	transition: opacity var(--nkr-transition);
}

.nkr-article-card:hover,
.nkr-article-card:focus-visible {
	color: inherit;
	text-decoration: none;
}

.nkr-article-card:hover .nkr-article-card__title {
	color: var(--nkr-accent);
}

.nkr-article-card__thumb {
	aspect-ratio: 16 / 10;
	background: #ece6d6;
	border: 1px solid var(--nkr-line);
	border-radius: var(--nkr-radius);
	overflow: hidden;
}

.nkr-article-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nkr-article-card__cat {
	font-size: 11px;
	color: var(--nkr-accent);
	letter-spacing: 0.16em;
}

.nkr-article-card__title {
	font-family: var(--nkr-serif);
	font-size: 15.5px;
	line-height: 1.7;
	font-weight: 500;
	margin: 0;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
	transition: color var(--nkr-transition);
}

.nkr-article-card__time {
	font-size: 12px;
	color: var(--nkr-ink-mute);
	letter-spacing: 0.08em;
}

.nkr-articles-more {
	text-align: center;
	margin-top: 40px;
}

/* =========================================================
   §S6  Section 6 (進路設計ノート)
   ========================================================= */

.nkr-pdf-band {
	background: var(--nkr-bg-soft2);
	text-align: center;
}

.nkr-pdf-band__inner {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.nkr-pdf-band__inner .nt-eyebrow {
	margin-bottom: 0;
}

.nkr-pdf-band__title {
	font-family: var(--nkr-serif);
	font-size: 30px;
	line-height: 1.5;
	margin: 0;
	letter-spacing: 0.04em;
	font-weight: 500;
	color: var(--nkr-ink);
}

.nkr-pdf-band__lead {
	color: var(--nkr-ink-soft);
	font-size: 15px;
	line-height: 1.95;
	max-width: 560px;
	margin: 0;
}

.nkr-pdf-band__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 560px;
	margin-top: 12px;
}

.nkr-pdf-band__email {
	flex: 1 1 240px;
	min-width: 0;
	max-width: 340px;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid #c9bf9f;
	border-radius: var(--nkr-radius);
	font-family: var(--nkr-sans);
	font-size: 14px;
	color: var(--nkr-ink);
}

.nkr-pdf-band__email:focus {
	outline: 2px solid var(--nkr-accent);
	outline-offset: 1px;
	border-color: transparent;
}

.nkr-pdf-band__note {
	font-size: 11px;
	color: var(--nkr-ink-mute);
	margin: 0;
	letter-spacing: 0.06em;
}

/* =========================================================
   §S7  Section 7 (講座比較)
   ========================================================= */

.nkr-compare {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--nkr-line);
	border-radius: var(--nkr-radius);
}

.nkr-compare__title {
	font-family: var(--nkr-serif);
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
	font-weight: 500;
}

.nkr-compare__spec {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 10px 12px;
	margin: 16px 0 0;
	font-size: 13.5px;
	line-height: 1.7;
}

.nkr-compare__spec dt {
	color: var(--nkr-ink-mute);
	letter-spacing: 0.08em;
}

.nkr-compare__spec dd {
	margin: 0;
	color: var(--nkr-ink);
}

.nkr-compare__for {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px dashed var(--nkr-line);
	font-size: 13px;
	line-height: 1.85;
	color: var(--nkr-ink);
}

.nkr-compare__more {
	margin-top: 18px;
	font-size: 13px;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	border-bottom: 1px solid var(--nkr-line);
	padding-bottom: 3px;
	text-decoration: none;
	transition: border-color var(--nkr-transition), color var(--nkr-transition);
}

.nkr-compare__more:hover,
.nkr-compare__more:focus-visible {
	border-color: var(--nkr-accent);
	color: var(--nkr-accent);
}

/* =========================================================
   §S8  Section 8 (テーマから探す / カテゴリタイル)
   ========================================================= */

.nkr-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--nkr-line);
	border-radius: var(--nkr-radius);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--nkr-transition);
}

.nkr-tile:hover,
.nkr-tile:focus-visible {
	border-color: #cabfa7;
	color: inherit;
	text-decoration: none;
}

.nkr-tile__label {
	font-family: var(--nkr-serif);
	font-size: 17px;
	line-height: 1.5;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
}

.nkr-tile__desc {
	font-size: 12.5px;
	color: var(--nkr-ink-mute);
	line-height: 1.7;
}

/* =========================================================
   §S9  Section 9 (このサイトについて)
   ========================================================= */

.nkr-about {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.nkr-about .nt-eyebrow {
	margin-bottom: 16px;
}

.nkr-about__title {
	font-family: var(--nkr-serif);
	font-size: 30px;
	line-height: 1.5;
	margin: 0;
	letter-spacing: 0.04em;
	font-weight: 500;
	color: var(--nkr-ink);
}

.nkr-about__lead {
	margin-top: 20px;
	color: var(--nkr-ink-soft);
	font-size: 15px;
	line-height: 2.05;
}

.nkr-about__link {
	margin-top: 28px;
	font-size: 13.5px;
	color: var(--nkr-ink);
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid var(--nkr-line);
	padding-bottom: 3px;
	text-decoration: none;
	transition: border-color var(--nkr-transition), color var(--nkr-transition);
}

.nkr-about__link:hover,
.nkr-about__link:focus-visible {
	border-color: var(--nkr-accent);
	color: var(--nkr-accent);
}

/* =========================================================
   §PLACEHOLDER  記事カード未公開時の見え方
   ========================================================= */

.nkr-article-card--placeholder {
	pointer-events: none;
}

.nkr-article-card--placeholder .nkr-article-card__thumb {
	background: repeating-linear-gradient(
		135deg,
		#ece6d6 0,
		#ece6d6 8px,
		#e6dec9 8px,
		#e6dec9 16px
	);
	opacity: 0.6;
}

.nkr-article-card--placeholder .nkr-article-card__cat,
.nkr-article-card--placeholder .nkr-article-card__title {
	color: var(--nkr-ink-mute);
}

/* 旧 nkr-card-placeholder (講座比較等で再利用される可能性に備え残す) */
.nkr-card-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 220px;
	padding: clamp(20px, 3vw, 32px);
	background: #fff;
	border: 1px dashed var(--nkr-line);
	border-radius: var(--nkr-radius);
	color: var(--nkr-ink-mute);
	text-align: center;
}

.nkr-card-placeholder__icon {
	font-size: 20px;
	color: var(--nkr-ink-mute);
	opacity: 0.6;
}

.nkr-card-placeholder__label {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--nkr-ink-mute);
	margin: 0;
}

/* =========================================================
   §RESPONSIVE
   モック準拠: 900 / 520 の 2 段 BP
   ========================================================= */

@media (max-width: 900px) {
	.nt-section,
	section.nkr-handbook,
	section.nkr-read-now,
	section.nkr-pdf-band {
		padding-block: var(--nkr-pad-sp);
	}

	.nkr-hero { padding-block: 48px 56px; }
	.nkr-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.nkr-hero__title { font-size: 32px; }
	.nkr-hero__media { aspect-ratio: 4 / 3; }

	.nt-grid--3 { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
	.nkr-step-list { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }

	.nkr-handbook__grid { grid-template-columns: 1fr; gap: 32px; }
	.nkr-handbook__cover { max-width: 280px; margin-inline: auto; }

	.nkr-articles { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }

	h2,
	.nkr-handbook__title,
	.nkr-pdf-band__title,
	.nkr-about__title { font-size: 24px; }
}

@media (max-width: 520px) {
	.nkr-articles { grid-template-columns: 1fr; }
}

/* =========================================================
   §HEADER  サイトヘッダー (.nt-header)
   モック準拠：半透明 + backdrop-filter + 細い下線 + sticky
   親 header.php は無改変、子の CSS だけで見た目を再現する。
   ========================================================= */

.nt-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 250, 246, 0.92);
	-webkit-backdrop-filter: saturate(150%) blur(6px);
	backdrop-filter: saturate(150%) blur(6px);
	border-bottom: 1px solid var(--nkr-line);
	transition: background var(--nkr-transition);
}

body.admin-bar .nt-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .nt-header {
		top: 46px;
	}
}

.nt-header__inner {
	min-height: 56px;
}


/* §S6-S9 微調整 P2 */
.nkr-pdf-band__email{border-color:#c9bf9f}
.nkr-compare__for{border-top-color:var(--nkr-line)}
[aria-labelledby="nkr-categories-title"] .nt-grid--3{gap:20px}

/* §FOOTER モック準拠の暗背景フッター */
.nt-footer{background:#1f2530;color:#cfd2da;padding:64px 0 32px}
.nt-footer__main{display:grid;grid-template-columns:1.2fr 2fr;gap:48px}
.nt-footer__brand-name{font-family:var(--nkr-serif);font-size:20px;color:#fff;letter-spacing:.06em;margin:0}
.nt-footer__description{font-size:13px;color:#9aa0ad;margin-top:14px;max-width:280px;line-height:1.9}
.nt-footer__menu{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 24px}
.nt-footer__menu li{margin:0;padding:0}
.nt-footer__menu a{font-size:13px;color:#cfd2da;padding:4px 0;text-decoration:none;display:inline-block;transition:color var(--nkr-transition)}
.nt-footer__menu a:hover{color:#fff}
@media(max-width:900px){.nt-footer__main{grid-template-columns:1fr;gap:32px}.nt-footer__menu{grid-template-columns:1fr 1fr}}


/* §FINAL P0 最終整列 */
.nt-header__inner{padding:18px 0;align-items:center}
.nt-header__brand{font-family:var(--nkr-serif);font-size:20px;letter-spacing:.06em;color:var(--nkr-ink);text-decoration:none;line-height:1.2;font-weight:500}
.nt-header__brand::after{content:"NIHONGO KYOSHI ROUTE";display:block;font-family:var(--nkr-sans);font-size:11px;color:var(--nkr-ink-mute);letter-spacing:.16em;margin-top:2px;font-weight:400}
.nt-header__menu,.nt-header__nav>ul{gap:28px}
.nt-header__menu li a,.nt-header__nav a{font-size:14px;letter-spacing:.06em;color:var(--nkr-ink);text-decoration:none;transition:color var(--nkr-transition)}
.nt-header__menu li a:hover,.nt-header__nav a:hover{color:var(--nkr-accent)}
.nkr-section-head{max-width:none}
.nkr-section-head>.nt-eyebrow,.nkr-section-head>h2{max-width:720px}
.nkr-section-head .nkr-text-lead{max-width:56ch}
h2,.nkr-hero__title,.nkr-handbook__title,.nkr-pdf-band__title,.nkr-about__title{text-wrap:balance}
.nt-section__head{gap:14px}


/* §FINAL-FIX .nkr-section-head 左寄せ強制 */
.nkr-section-head{text-align:left}


/* §FINAL-FIX2 .nkr-section-head を確実に左寄せ (親の margin:0 auto を打ち消す) */
.nkr-section-head{margin-inline:0;text-align:left}


/* §FINAL-FIX3 .nkr-section-head の flex children を左寄せに */
.nkr-section-head{align-items:flex-start}


/* §FINAL-FIX4 リード文の改行調整: 56ch → 640px */
.nkr-section-head .nkr-text-lead{max-width:640px}

/* §FINAL-FIX5 モバイル(≤1000) でロゴを縦積みに (.nt-header__brand は親で inline-flex/row のため column に上書き) */
@media (max-width:1000px){.nt-header__brand{flex-direction:column;align-items:flex-start;line-height:1.3}.nt-header__brand::after{margin-top:2px}}


/* §FINAL-FIX6 Section 2 リード文だけを 100% 幅 + text-wrap: pretty (他セクションには波及させない) */
[aria-labelledby="nkr-entries-title"] .nkr-text-lead{max-width:100%;text-wrap:pretty}


/* §FINAL-FIX7 モバイルヘッダーを grid 2カラムにしてロゴを確実に縦積みにする */
@media (max-width: 767px) {
  .nt-header .nt-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
  }
  .nt-header .nt-header__brand-wrap {
    min-width: 0;
    width: 100%;
  }
  .nt-header .nt-header__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    line-height: 1.2;
    white-space: normal;
  }
  .nt-header .nt-header__brand::after {
    display: block;
    margin-top: 0;
    line-height: 1.35;
    white-space: normal;
  }
}

/* =========================================================
   §SUN  ヘッダーに「日の丸が昇る」スクロール演出
   - .nt-header に overflow:hidden / isolation:isolate を後付け
   - 擬似要素 ::before で #bc002d の赤円を描画
   - --sun-progress (0..1) を JS で更新、CSS で transform 補間
   - 円は top:100% で「ヘッダー下端」を起点、translateY で昇る
   - 上品な演出を狙い、半径より小さい peek 量で頂点だけ覗かせる
   - 768px 未満では非表示（モバイル無効化）
   - prefers-reduced-motion: reduce では非表示
   ========================================================= */
.nt-header {
	--sun-progress: 0;
	--sun-size: 88px;   /* 円の直径 */
	--sun-peek: 42px;   /* progress=1 のとき、ヘッダー下端から上に顔を出す距離 (約 半径) */
	overflow: hidden;
	isolation: isolate;
}

.nt-header::before {
	content: "";
	position: absolute;
	left: var(--sun-x, 50%);
	top: 100%;          /* ヘッダー下端から始まる (overflow:hidden で初期状態は完全に隠れる) */
	width: var(--sun-size);
	height: var(--sun-size);
	margin-left: calc(var(--sun-size) / -2);
	background: #bc002d;
	border-radius: 50%;
	opacity: 0.92;
	transform: translateY(calc(var(--sun-progress) * var(--sun-travel, var(--sun-peek)) * -1));
	transition: transform 0.18s ease-out;
	pointer-events: none;
	z-index: 0;
	will-change: transform;
}

/* .nt-container 以下を sun より前面へ。
   .nt-header の isolation:isolate で z-index は header 内で完結する。 */
.nt-header > .nt-container {
	position: relative;
	z-index: 1;
}

/* モバイル無効化 (赤円が小さい画面で重く感じやすいため、PC/タブレット中心で運用) */
@media (max-width: 767px) {
	.nt-header::before { display: none; }
}

/* 動きを抑える設定をしているユーザーには出さない */
@media (prefers-reduced-motion: reduce) {
	.nt-header::before { display: none; }
}

/* =========================================================
   §S4 MOBILE — Section 4 (ハンドブック導線) のモバイル表示調整
   - 1 カラムにスタック (PC は 0.7fr / 1.3fr の 2 カラムのまま)
   - 表紙画像をしっかり見せる
   - 表紙上の不要な余白を縮小
   - PC 表示には一切影響を出さない
   ========================================================= */
@media (max-width: 767px) {
	section.nkr-handbook {
		padding-block: 56px;          /* PC 112px → 56px に縮小 */
	}
	.nkr-handbook__grid {
		grid-template-columns: 1fr;   /* 0.7fr 1.3fr → 単列スタック */
		gap: 28px;                     /* 64px → 28px */
		align-items: start;            /* center が生む上下余白を解消 */
	}
	.nkr-handbook__cover {
		width: clamp(180px, 50vw, 240px);  /* 視認サイズへ */
		margin-inline: auto;           /* 横中央寄せ */
	}
	.nkr-handbook__body {
		max-width: 100%;               /* PC max-width:560px を解除 */
	}
}


/* =========================================================
   §SINGLE-POST / FIXED-PAGE  記事ページ + 固定ページ共通の本文幅・タイポ整え
   - body.single-post スコープで個別記事のみに適用
   - 親テーマの CSS Grid (.nt-article) 構造はそのまま活かし、
     --nt-container-narrow だけ広げて content トラックを伸ばす
   - handbook / front / hub / category archive には影響しない
   - モバイルは grid の min() で自動 clamp されるため非影響
   ========================================================= */
/* 記事ページのデザインロジック:
	   1. 外枠 = wide track (1120px) — サイトヘッダー内側幅と揃える
	   2. H1/メタ (.nt-article__header) は wide 全幅でスケール感を出す
	   3. 本文 (.nt-article-content) は wide 内で左寄せの reading column
	   4. reading column に薄い罫 + 微差 bg + 余白で「本文の器」を作る
	   5. 右側は意図的に余白を残し editorial な asymmetry を確保
	   --nt-container-narrow は親テーマの 760 既定のままで触らない */

/* H1 / カテゴリ / 公開日 を wide track (1120) に昇格 */
body.single-post .nt-article > .nt-article__header {
	grid-column: wide;
}

/* 本文ブロックも wide track いっぱい (1120) に置く。
	- max-width / margin-inline-end:auto は使わない（左寄せ box にしない）
	- 代わりに大きめの padding-inline (80px) で「読書面」を作る
	- 4 辺 1px ハーフトーン罫 + 微差 bg + ゆとり padding-block で器
	- text 実幅 = 1120 - 2 - 160 = 958px (wide な editorial 読書面) */
:where(body.single-post, body.page:not(.home)) .nt-article > .nt-article-content {
	/* 記事ページと固定ページ共通の「本文の器」
	   - wide track 全幅 (1120) を占有
	   - 大きめ padding-inline (80px) で読書面を作る
	   - 4 辺 1px ハーフトーン罫 + 微差 bg
	   - 固定ページの H1 は別構造 (.nt-page-hero) のため、ここでは触らない */
	display: block;
	grid-column: wide;
	margin-block: 24px 40px;
	background: #fefdf9;
	border: 1px solid var(--nkr-line);
	padding-block: 48px 56px;
	padding-inline: 80px;
}

/* 見出し上下余白に静かな呼吸感 (記事 + 固定ページ共通) */
:where(body.single-post, body.page:not(.home)) .nt-article h2 {
	margin-block: 2em 0.6em;
}
:where(body.single-post, body.page:not(.home)) .nt-article h3 {
	margin-block: 1.6em 0.4em;
}

/* リストの余白を整える (記事 + 固定ページ共通) */
:where(body.single-post, body.page:not(.home)) .nt-article :where(ul, ol) {
	margin-block: 0.8em 1.4em;
}
:where(body.single-post, body.page:not(.home)) .nt-article :where(ul, ol) li + li {
	margin-top: 0.45em;
}