/* ============================================================
   news-manabi.css ── ニュースの学び方（kokugoryoku/news-manabi.html 専用・V13新設）
   出典: V13_記述講座レギュラー_第2次調整設計.md §4
   素材: Downloads/アルペ記述教室サイト案Work (7).md（Drive調査レポート・未照合＝C-41）
   思想: 「一つの記事が、意見になり、スピーチになる」過程を静かに見せる。
         受賞の誇示ではなく、育っていく道筋を主役にする。
   規範: 色・寸法は tokens.css の var() のみ（hex直書き禁止）。regular-k.css の後に読む。
   ============================================================ */

/* --- 文節span（改行後に1〜3字の孤立行を作らない） --- */
.nm-hero h1 .w,
.nm-hero .lead .w,
.nm-section .section-title .w,
.nm-section .section-lead .w,
.nm-step-body p .w,
.nm-case .w,
.nm-case-head h3 .w,
.nm-flow li .w,
.nm-list li .w,
.nm-axis li .w,
.nm-stage p .w,
.nm-stage .ex .w,
.signature-line a .w,
.consult .consult-lead .w,
.consult .consult-fact .w { display: inline-block; }
.nm-section .section-title .w + .w { margin-left: 0; }

/* ============ N1 ヒーロー ============ */
.nm-hero {
  background: var(--alpe-paper);
  border-bottom: var(--rule-gold);
  position: relative;
  overflow: hidden;
}
.nm-hero .container {
  max-width: 52rem;
  padding-top: clamp(132px, 16vh, 172px);
  padding-bottom: clamp(56px, 8vh, 80px);
  position: relative;
  z-index: 1;
}
.nm-hero .eyebrow {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--alpe-gold);
}
.nm-hero h1 {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(23px, 3.6vw, 40px);
  line-height: 1.65;
  letter-spacing: var(--ls-head);
  color: var(--alpe-ink);
  margin: .55em 0 .7em;
}
.nm-hero h1 em { font-style: normal; color: var(--alpe-red); }
.nm-hero .lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--alpe-ink-soft);
  max-width: 38em;
}

/* セクション余白（regular と同じ圧縮率で統一） */
.nm-section { padding-block: clamp(64px, 9vh, 96px); }
.nm-section .section-title { font-size: clamp(24px, 3.8vw, 47px); }

/* ============ N2 流れ（7ステップ） ============
   帯や矢印を大きく描かず、番号と細い縦罫だけで進行を示す（劇場型の静けさ）。 */
/* 列を細くしすぎると短い文でも折れて孤立行が出る（実測）→ 最小幅を広めに取る */
.nm-steps {
  margin-top: 2.2em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 4px clamp(20px, 3vw, 40px);
}
.nm-step {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  padding: 1.1em 1.2em 1.1em 0;
  border-top: 1px solid color-mix(in srgb, var(--alpe-gold) 40%, transparent);
}
.nm-step .n {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--alpe-gold);
  letter-spacing: .1em;
  flex: 0 0 auto;
  padding-top: .15em;
}
.nm-step-body h3 {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--alpe-ink);
  margin-bottom: .35em;
}
.nm-step-body p {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--alpe-ink-soft);
}

/* ============ N3 実例3本 ============ */
.nm-cases { margin-top: 2.2em; display: flex; flex-direction: column; gap: clamp(28px, 4vh, 44px); }
.nm-case {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
  padding-top: 1.6em;
  border-top: var(--rule-gold);
}
@media (max-width: 46em) { .nm-case { grid-template-columns: 1fr; gap: .9em; } }

.nm-case-head h3 {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.55;
  color: var(--alpe-ink);
}
.nm-case-head .who {
  display: block;
  font-family: var(--font-gothic);
  font-size: calc(var(--fs-small) * .92);
  color: var(--alpe-ink-faint);
  letter-spacing: .06em;
  margin-top: .7em;
}
/* 記事→行動→成果物の3行。左の細い罫で「流れ」を示す */
/* ⚠️ 罫線(ul基準のem)とドット(li基準のem)で基準font-sizeが異なると位置がズレる（実測で発生）。
   両者を rem に統一し、ドット中心を罫線上へ正確に載せる。 */
.nm-flow { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent); display: flex; flex-direction: column; gap: .7em; }
.nm-flow li {
  position: relative;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--alpe-ink-soft);
}
.nm-flow li::before {
  content: '';
  position: absolute;
  /* 罫線は li 左端から -1.4rem の位置。ドット中心をそこへ合わせる（左端 = 罫線 - 半径） */
  left: calc(-1.4rem - .28rem);
  width: .56rem;
  height: .56rem;
  /* 1行目の行中央へ（line-height の半分）。translateYで確実に中央化する */
  top: calc(var(--lh-body) * .5em);
  transform: translateY(-50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--alpe-gold) 75%, transparent);
}
.nm-flow li strong { color: var(--alpe-ink); font-weight: 700; }

/* ============ N4 学年段階 ============ */
.nm-stages { margin-top: 2em; display: flex; flex-direction: column; gap: 0; }
.nm-stage {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(12px, 2vw, 28px);
  padding: 1.4em .2em;
  border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 40%, transparent);
}
.nm-stage:first-child { border-top: var(--rule-gold); }
@media (max-width: 46em) { .nm-stage { grid-template-columns: 1fr; gap: .5em; } }
.nm-stage dt {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(16px, 1.9vw, 20px);
  color: var(--alpe-ink);
  letter-spacing: .04em;
}
.nm-stage dd { margin: 0; }
.nm-stage p {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--alpe-ink-soft);
}
.nm-stage .ex {
  display: block;
  margin-top: .5em;
  font-size: calc(var(--fs-small) * .92);
  color: var(--alpe-ink-faint);
}

/* ============ 共通の箇条書き（◆） ============ */
.nm-list { list-style: none; margin: 1.1em 0 0; padding: 0; display: flex; flex-direction: column; gap: .5em; max-width: 44em; }
.nm-list li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--alpe-ink-soft);
}
.nm-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: .1em;
  font-size: .55em;
  color: color-mix(in srgb, var(--alpe-gold) 85%, transparent);
}

/* ============ N5 図版（2026-07-20 施主提供イラストを配置） ============
   ⚠️ height:auto は必須。img の height 属性が presentational hint として
      aspect-ratio に勝ち、画像が縦に伸びる（V12実装時に実測で確認）。 */
.nm-art {
  margin-top: 1.8em;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  background: var(--alpe-paper-dim);
  display: block;
}

/* 写真スロット（未支給の図版がある場合に使う。現在は未使用） */
.nm-slot {
  margin-top: 1.8em;
  aspect-ratio: 16 / 7;
  border: 1px dashed color-mix(in srgb, var(--alpe-gold) 55%, transparent);
  border-radius: var(--radius-card);
  background: var(--alpe-paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--alpe-ink-faint);
}

/* ============ N6 評価軸 ============ */
.nm-axis { margin-top: 1.6em; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.nm-axis li {
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  background: var(--alpe-paper);
  padding: 1.1em 1.2em;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--alpe-ink-soft);
}
.nm-axis li .n {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--alpe-gold);
  letter-spacing: .1em;
  margin-bottom: .4em;
}
.nm-acts { margin-top: 2em; display: flex; flex-wrap: wrap; gap: 1em 2em; }

/* --- 押せるものの統一様式（全ページ共通の語彙） --- */
.golink {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-red);
  transition: color .2s;
}
.golink::before {
  content: '◆';
  font-size: .5em;
  color: color-mix(in srgb, var(--alpe-gold) 90%, transparent);
  transform: translateY(-.2em);
}
.golink span { border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 80%, transparent); padding-bottom: .15em; }
.golink:hover { color: var(--alpe-red-deep); }

/* ============ 320px級の微調整 ============ */
@media (max-width: 22em) {
  .nm-hero h1 { font-size: 20px; }
  .nm-section .section-title { font-size: 23px; }
  .consult .consult-title { font-size: 23px; }
  .nm-case-head h3 { font-size: 17px; }
}