/* NEWS の一覧（news.html）と記事（news-article.html）— 下層ページの NEWS 担当、2026-09-28（v2：共通の枠 sp-frame-v1 に合わせた）。
   枠（冒頭の夜空の帯 280・題字の位置・帯の端 → 中身 96／64・列と余白）は sp-frame-v1.css と site-width-v1.css のものを使う。
   このファイルは NEWS の中身（霞の箱、一覧、記事）だけ。ブランド契約の色・書体・部品と、細部の基準の 8u に従う。
   霞の造形は news-kasumi.js（青海波と同じ和の線の線画）。 */

body.nw-page {
  --nw-paper: #f3ecdc;
  --nw-quiet: rgba(243, 236, 220, 0.78);
  --nw-jp: "Zen Kaku Gothic New", sans-serif;
  --nw-face: "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
  --nw-col-gap: 32px;
  --nw-row-gap: 48px;
}
@media (max-width: 767px) {
  body.nw-page { --nw-col-gap: 16px; --nw-row-gap: 32px; }
}

/* ヘッダーの現在のページ（NEWS）：ホバーと同じ見た目（紙色＋下線）。見た目の決定はヘッダー班の担当なので、暫定。 */
body.hs.eh-study.s55.nw-page .s13-header #s14-nav a[aria-current="page"] { color: var(--nw-paper); }
body.hs.eh-study.s55.nw-page .s13-header #s14-nav a[aria-current="page"]::after { opacity: 1; }

/* ================================================================== */
/* 冒頭の帯の中：霞の箱（帯の全幅）。題字は共通の枠の .sp-title のまま。                                 */
/* ================================================================== */
.nw-kasumi { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nw-kasumi-svg { display: block; overflow: visible; }

/* 年の索引：共通の枠の副情報の行（題字のインク → 24／16）に、共通の操作リンク（.sp-u、押せる範囲 44×44 以上）で置く。
   1 年だけのときは見せないが、場所（霞がよける範囲）は取ったままにする。幅は年 3 つ分（44 × 3 ＋ 間 24 × 2 ＝ 180）で固定。 */
.nw-years { gap: 0 24px; width: 180px; }
.nw-years[data-single="true"] { visibility: hidden; }
.nw-year-link.sp-u { min-width: 44px; }

/* 記事の帯の副情報：一覧へ戻る（共通の操作リンク .sp-u）。副情報の行の位置（題字のインク → インク 24）に合わせて、
   押せる高さ 44 の中で下に寄る文字のぶんを引く（実測で補正） */
body.sp .sp-meta.nw-meta { display: flex; padding-top: 0; }
.nw-meta > .sp-u { margin-top: 17.5px; } /* 題字のインク → ALL NEWS のインク 24（題字の行の箱の下の余りと、押せる高さ 44 の中で文字が下に寄るぶんを実測で差し引き） */
@media (max-width: 767px) { .nw-meta > .sp-u { margin-top: 11px; } } /* スマホ 16 */
.nw-back > svg, .nw-back--all > svg { flex: none; }

/* ================================================================== */
/* 一覧                                                                */
/* ================================================================== */
.nw-list { container-type: inline-size; }
/* 年の見出し（Barlow Condensed、行の箱＝大きさ）：インクの上端は箱の上から 0.2em、下端は箱の下から 0.1em。
   帯の端 → 最初の年の見出しのインク 96／64、見出しのインク → 先頭の画像 32／24、前の年の最後 → 次の年の見出しのインク 96／64。 */
.nw-year + .nw-year { margin-top: 85.5px; } /* 96 − 見出しの上の余り 6.4 − 前の年の最後の行の箱の下の余り 4.1（独立レビューの実測 106.5 から） */
.nw-year-title.nw-year-title {
  margin: 0 0 29.9px; /* 見出しのインク → 先頭の画像 32（実測で補正） */
  color: var(--nw-paper);
  font: 600 32px/32px var(--nw-face);
  letter-spacing: 0.04em;
}
.nw-year:first-child > .nw-year-title { margin-top: -6.4px; } /* 帯の端 → インク 96 */
.nw-link { display: block; color: inherit; text-decoration: none; }
.nw-image { display: block; aspect-ratio: 16 / 9; background: #0d0724; } /* 読み込み中は夜空の色の箱（縦横比は先に確保） */
.nw-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nw-text { display: block; min-width: 0; }
.nw-date {
  display: block;
  color: var(--nw-quiet);
  font: 600 13px/16px var(--nw-face);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.nw-headline {
  display: block;
  margin-top: 2.5px; /* 日付のインク → 題のインク 12（8＋文字周りの微調整 4）。行の箱の余り 9.5 を引く */
  color: var(--nw-paper);
  font: 700 16px/26px var(--nw-jp);
  overflow-wrap: anywhere;
  word-break: auto-phrase; /* 和文は文節で折り返す（1文字だけの行を作らない） */
  text-wrap: pretty;
}
.nw-link:is(:hover, :focus-visible) .nw-headline-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nw-page :is(.nw-list, .nw-article) :is(a, button):focus-visible { outline: 2px solid var(--nw-paper); outline-offset: 4px; }

/* 最初の3件：ホームの NEWS 節と同じ組（先頭を大きく、残り2件を右に行で）。一覧はその続きを同じ形式で伸ばす（構成案 P1）。
   1440：先頭 608（16:9 → 342）、間 32、右 528（サムネ 224×126、間 24、文字 280）。列が広がると同じ比で大きくなる。 */
.nw-first {
  display: grid;
  grid-template-columns: minmax(0, 608fr) minmax(0, 528fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--nw-col-gap);
  row-gap: 32px;
  align-items: start;
}
.nw-item--lead { grid-row: 1 / span 2; }
.nw-item--lead .nw-image { margin-bottom: 12.5px; } /* 画像 → 日付のインク 16（行の箱の上の余り 3.5 を引く） */
.nw-item--lead .nw-headline { margin-top: 2px; font-size: 20px; line-height: 32px; }
.nw-item--row .nw-link { display: grid; grid-template-columns: minmax(0, 224fr) minmax(0, 280fr); column-gap: 24px; align-items: center; }

/* 4件目から：3列（1440 で 368×207）、列の間 32、行の間 48。列が 1400 以上に広がったら 4 列。 */
/* 行の間 48（インク）：題の行の箱の下の余り 4 を引いて 44、最初の3件 → 4 件目は 42（独立レビューの実測 54・52 から） */
.nw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px var(--nw-col-gap); margin-top: 42px; }
.nw-item--card .nw-image { margin-bottom: 12.5px; }
@container (min-width: 1400px) { .nw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 状態の一行（ホームの news.js と同じ文言）。最新を確認できたときは読み上げだけにする（ホームと同じ）。 */
.nw-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 24px; min-height: 44px; margin-top: 5.5px; } /* 一覧の最後のインク → 状態の一行のインク 32（右のボタンとの基準線揃えで下がる 26.5 を引く） */
.nw-status { flex: 1 1 280px; margin: 0; color: var(--nw-quiet); font: 400 13px/20px var(--nw-jp); word-break: auto-phrase; text-wrap: pretty; }
.nw-list .nw-retry.nw-retry--reserve { visibility: hidden; pointer-events: none; }
.nw-empty { margin: 0; color: var(--nw-quiet); font: 400 14px/24px var(--nw-jp); }

/* 和文の操作（契約 §4）：Zen Kaku Gothic New 700・13px・字間 0.08em、下線は文字のインクから 8（実測）。押せる高さ 44。 */
.nw-retry, .nw-home-link {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0 12px;
  border: 0;
  background: none;
  color: var(--nw-quiet);
  font: 700 13px/1 var(--nw-jp);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.nw-retry::after, .nw-home-link::after { content: ""; position: absolute; left: 0; right: 0.08em; bottom: 3px; height: 1px; background: currentColor; }
.nw-retry:hover { color: var(--nw-paper); }
.nw-retry:disabled { cursor: wait; opacity: 0.65; }
/* 見つからないときの主要な操作（構成案 §10.2：ホームに戻る。契約 §2 の「主要な操作1つ」の金の文字） */
.nw-home-link { color: #ecd28a; margin-top: -4px; }

@media (min-width: 768px) and (max-width: 959px) {
  .nw-first { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .nw-item--lead { grid-row: auto; margin-bottom: -6px; } /* 先頭の題のインク → 行1の画像 32（題の行の箱の下の余り 6 を引く） */
  .nw-item--row .nw-link { grid-template-columns: 224px minmax(0, 1fr); } /* 行のサムネは 224 のまま（幅いっぱいに伸ばさない） */
  .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-list .nw-foot { margin-top: 12px; } /* 縦に並ぶときは最後の中身が画像。画像の下端 → 状態の一行 32 */
}
@media (max-width: 767px) {
  /* スマホ：先頭は全幅、残りは行（サムネ 112×63、間 16）。ホームの NEWS 節のスマホと同じ組。 */
  .nw-first { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } /* 行どうし：見えている中身の間 24 */
  .nw-item--lead { grid-row: auto; margin-bottom: 3.5px; } /* 先頭の題のインク → 行1 32 */
  .nw-item--lead .nw-headline { margin-top: 2px; font-size: 18px; line-height: 28px; }
  .nw-item--row .nw-link, .nw-item--card .nw-link { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .nw-item--card .nw-image { margin-bottom: 0; }
  .nw-headline { margin-top: 4.5px; font-size: 15px; line-height: 24px; } /* 日付 → 題のインク 12 */
  .nw-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
  .nw-list .nw-foot { margin-top: 19.9px; } /* 一覧の最後（インク・画像）→ 状態の一行のインク 24 */
  .nw-home-link { margin-top: -12px; }
}

/* 和文の折り返し：文節で折り返す（auto-phrase）。対応していないブラウザーでは keep-all と overflow-wrap で語の途中の折り返しを避ける。
   line-break: strict で長音の記号・小書きの仮名を行頭に置かない。text-wrap: pretty で 1 字だけの行を作らない。 */
.nw-page :is(.nw-headline, .nw-article-title, .nw-article-body, .nw-adjacent-title, .nw-latest-title, .nw-status, .nw-error, .nw-notfound-text) {
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap: pretty;
}

/* ================================================================== */
/* 記事（黒の帯の中身：日付 → 題 → 画像 → 本文 → 前後の記事 → ALL NEWS）                         */
/* ================================================================== */
/* 共通の枠：帯の端 → 最初の文字のインク 96（スマホ 64）。日付（13px/16）の行の箱の上の余り 4 を引く（実測で補正） */
body.sp .sp-body > .nw-article:first-child { margin-top: calc(var(--sp-edge, 96px) - var(--nw-date-lead, 4px)); }
.nw-article-date { display: block; margin: 0; font: 600 13px/16px var(--nw-face); } /* 段落の行の高さを日付と同じに（既定の行の高さだとインクが下がる） */
.nw-article-date-text { color: var(--nw-quiet); font: 600 13px/16px var(--nw-face); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.nw-article-title.nw-article-title {
  max-width: 896px;
  margin: -4px 0 0; /* 日付のインク → 題のインク 12（40px/60 の行の箱の上の余りを実測で引く） */
  color: var(--nw-paper);
  font: 700 40px/60px var(--nw-jp);
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.nw-article-date:empty, .nw-article-title:empty { display: none; }
.nw-article-date:empty + .nw-article-title { margin-top: -4px; } /* 日付がないとき（見つからない・読めない）：帯の端 → 題のインク 96／64（独立レビューの実測 90／58 から） */
body:is([data-found="false"], [data-found="error"], [data-found="pending"]) .nw-article-title { font-size: 24px; line-height: 36px; }
body[data-found="false"] .nw-article-figure[hidden] ~ .nw-article-state { margin-top: 32.5px; } /* 題のインク → 文のインク 48（実測 53.5 から） */
body:is([data-found="error"], [data-found="pending"]) .nw-article-figure[hidden] ~ .nw-article-state { margin-top: 2px; } /* 読めない／読み込み中：題の位置の文 → LOADING／再試行（失敗時と同じ高さ） */
.nw-article-title.nw-title-slot { position: relative; }
.nw-title-failure.nw-title-reserve { display: block; visibility: hidden; }
.nw-loading.nw-loading--title { position: absolute; top: 0; left: 0; margin: 0; }
.nw-article-state .nw-error.nw-state-reserve,
.nw-article-state .nw-retry.nw-retry--reserve { visibility: hidden; pointer-events: none; }
.nw-article-state .nw-loading.nw-loading--overlay { position: absolute; top: 0; left: 0; margin: 0; }
.nw-article-figure { display: block; max-width: 896px; margin: 38px 0 0; } /* 題のインク → 画像 48（題の行の箱の下の余り 10 を引く） */
.nw-article-image { display: block; aspect-ratio: 16 / 9; background: #0d0724; } /* 読み込み中は夜空の色の箱 */
.nw-article-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nw-article-body {
  max-width: var(--sp-col, 640px); /* 本文の行の長さの上限（列が広がっても 640 のまま。16px で 40 字） */
  margin: 38.5px 0 0; /* 画像 → 本文のインク 48（16px/32 の行の箱の上の余り 9.5 を引く） */
  color: var(--nw-paper);
  font: 400 16px/32px var(--nw-jp);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nw-article-state { position: relative; margin-top: 38.5px; }
.nw-article-state .nw-retry { margin-top: -4px; } /* 文 → 操作のインク 24 */
.nw-article-figure[hidden] + .nw-article-body,
.nw-article-figure[hidden] ~ .nw-article-state { margin-top: 38px; } /* 画像がないとき：題のインク → 本文 48 */
.nw-loading { margin: 0; color: var(--nw-quiet); font: 600 13px/16px var(--nw-face); letter-spacing: 0.2em; }
.nw-error, .nw-notfound-text { margin: 0; color: var(--nw-quiet); font: 400 16px/32px var(--nw-jp); word-break: auto-phrase; text-wrap: pretty; }

/* 前後の記事：本文の最後のインク → 96、1件目 → 2件目 24。ラベルは英字の機能ラベル（NEWER ／ OLDER）。 */
.nw-article-nav { margin-top: 82.5px; } /* 状態の文・再試行の下線 → 前後の記事のインク 96 */
.nw-article[data-body-state="ready"] .nw-article-nav { margin-top: 78.5px; } /* 本文の最後のインク → 前後の記事のインク 96（独立レビューの実測 100 から） */
.nw-article[data-body-state="empty"] .nw-article-nav { margin-top: 85px; } /* 本文が空：画像 → 前後の記事 96（実測 93.5 から） */
.nw-adjacent-list { display: grid; row-gap: 11px; max-width: 896px; } /* 1件目 → 2件目のインク 24（実測 20 から） */
.nw-adjacent { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; align-items: baseline; color: inherit; text-decoration: none; }
.nw-adjacent-label { color: var(--nw-quiet); font: 600 13px/26px var(--nw-face); letter-spacing: 0.2em; }
.nw-adjacent-title { color: var(--nw-paper); font: 700 16px/26px var(--nw-jp); overflow-wrap: anywhere; word-break: auto-phrase; text-wrap: pretty; }
.nw-adjacent:is(:hover, :focus-visible) .nw-headline-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nw-all-row { margin-top: 32px; } /* 前後の記事のインク → ALL NEWS のインク 48（.sp-u の押せる高さ 44 の中で文字は下に寄る） */
.nw-adjacent-list[hidden] + .nw-all-row { margin-top: 0; }

@media (max-width: 767px) {
  .nw-article-title.nw-article-title { margin-top: 1px; font-size: 24px; line-height: 36px; } /* 日付 → 題 12 */
  .nw-article-figure { margin-top: 26px; } /* 題 → 画像 32 */
  .nw-article-body { margin-top: 25.3px; font-size: 15px; line-height: 28.5px; } /* 画像 → 本文 32（独立レビューの実測 29.1〜29.5 から） */
  .nw-article-state { margin-top: 22.5px; }
  .nw-article-state .nw-retry { margin-top: -12px; } /* 文 → 操作 16 */
  .nw-article-nav { margin-top: 57.5px; } /* 状態の文 → 前後の記事 64 */
  .nw-article[data-body-state="ready"] .nw-article-nav { margin-top: 53.5px; } /* 本文の最後 → 前後の記事 64（実測 68 から） */
  .nw-article[data-body-state="empty"] .nw-article-nav { margin-top: 60.9px; } /* 本文が空：画像 → 前後の記事 64（実測 60.6 から） */
  body[data-found="false"] .nw-article-nav { margin-top: 44.5px; } /* 見つからない：ホームに戻るの下線 → ALL NEWS 64（実測 70.5 から） */
  .nw-article:is([data-body-state="error"], [data-body-state="retry"]) .nw-article-nav:has(.nw-adjacent-list[hidden]) { margin-top: 51px; } /* 再試行の下線 → ALL NEWS 64（前後なし） */
  body[data-found="false"] .nw-article-figure[hidden] ~ .nw-article-state { margin-top: 16.5px; } /* 題 → 文 32 */
  .nw-year + .nw-year { margin-top: 59.5px; } /* 前の年の最後 → 次の年の見出しのインク 64 */
  .nw-year-title.nw-year-title { margin-bottom: 21.6px; font-size: 24px; line-height: 24px; } /* 見出しのインク → 先頭の画像 24（24 − 2.4） */
  .nw-year:first-child > .nw-year-title { margin-top: -3.8px; } /* 帯の端 → インク 64（実測で補正） */
  .nw-adjacent-list { row-gap: 16px; } /* 1件目 → 2件目のインク 24（押せる高さ 44 を保つ） */
  .nw-adjacent { grid-template-columns: 1fr; row-gap: 4px; min-height: 44px; }
  .nw-adjacent-label { line-height: 16px; }
  .nw-adjacent-title { font-size: 15px; line-height: 24px; }
  .nw-all-row { margin-top: 18px; } /* 前後の記事 → ALL NEWS 32 */
}

/* ================================================================== */
/* フッターまで：最後の中身のインク → フッターの最初の文字のインク = 96 ／ 64（共通の枠の --sp-foot。実測で補正）        */
/* ================================================================== */
body.sp.nw-page #main > .sp-body.nw-body { padding-bottom: 0; } /* 共通の枠の下の余白の代わりに、フッターの上の余白で 96／64 に合わせる */
.nw-page .edition-footer.edition-footer { margin-top: 58px; } /* 一覧：最後の中身 → フッターのインク 96 */
.nw-page--article .edition-footer.edition-footer { margin-top: 38px; } /* ALL NEWS の下線 → フッターのインク 96 */
@media (max-width: 767px) {
  .nw-page .edition-footer.edition-footer { margin-top: 26px; }
  .nw-page--article .edition-footer.edition-footer { margin-top: 5.5px; } /* 64 */
}

/* ================================================================== */
/* 入場（news-page.js が値を動かす）。動きを許す環境だけ。スクリプトが読めなくても 3.5 秒で必ず外れる。 */
/* ================================================================== */
html.nw-entering body.nw-page [data-nw-reveal] {
  -webkit-mask-image: linear-gradient(to left, #000 var(--nw-a, -96px), transparent var(--nw-b, 0px));
  mask-image: linear-gradient(to left, #000 var(--nw-a, -96px), transparent var(--nw-b, 0px));
}
html.nw-entering body.nw-page [data-nw-rise] { opacity: var(--nw-o, 0); transform: translateY(var(--nw-y, 16px)); }
@media (prefers-reduced-motion: reduce) {
  html.nw-entering body.nw-page [data-nw-reveal] { -webkit-mask-image: none; mask-image: none; }
  html.nw-entering body.nw-page [data-nw-rise] { opacity: 1; transform: none; }
}

/* ================================================================== */
/* 1440 以上：記事の右に「LATEST」の列（最新の記事 3 件、今の記事を除く）。列の上端は日付の行にそろえる。1439 以下は出さない。 */
/* ================================================================== */
.nw-latest { display: none; }
@media (min-width: 1440px) {
  .nw-article { display: grid; grid-template-columns: minmax(0, 896px) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .nw-article > :not(.nw-latest) { grid-column: 1; }
  .nw-latest:not([hidden]) { display: block; grid-column: 2; grid-row: 1 / span 8; }
  .nw-latest-label { margin: 0; color: var(--nw-quiet); font: 600 13px/16px var(--nw-face); letter-spacing: 0.2em; }
  .nw-latest-list { display: grid; row-gap: 16px; margin-top: 9.5px; } /* ラベル → 1 件目 16、1 件 → 次 24（行の箱の余りを差し引き） */
  .nw-latest-item { display: block; color: inherit; text-decoration: none; }
  .nw-latest-item .nw-date { display: block; }
  .nw-latest-title { display: block; margin-top: 4.5px; color: var(--nw-paper); font: 700 15px/24px var(--nw-jp); } /* 日付 → 題 12 */
  .nw-latest-item:is(:hover, :focus-visible) .nw-headline-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
}
@media (min-width: 1600px) {
  .nw-article { grid-template-columns: minmax(0, 1fr) 352px; } /* 記事列は残り幅、LATEST は 352 固定（右ガター揃え） */
}