@charset "UTF-8";
/* ==========================================================
   news.html 固有CSS（2026-09-03 D-1 グループC 再批評の反映 r4）
   記事は未支給。同型カードの反復をやめ、先頭1枚だけ大きく置き、
   残りは .cx-ph で「ここに記事が入る」ことを明示する。

   ▼ 再批評の反映
   ・C-2: 先頭カードだけ分類バッジ＋日付を持ち、下の3枚が持たない不揃いを解消。
     未確定の分類ピルとゼロ埋めの偽日付（2026.00.00）は出さない方針のため、
     4枚とも「写真＋タイトル」に揃え、日付・分類はセクション末尾の注記1本で断る。
   ・C-5: SP のチップ折返しを左揃えにして、最後の1個が中央に孤立するのを解消。
   ・C-14: .cx-ph の文字色（#808080 = 3.08:1）をページ側で #636363（4.6:1）に落とす。
   ・C-22: ヒーロー白見出しのコントラスト（実測 1.70:1）を追いスクリムで底上げ。

   ▼ components.css へ昇格候補
   ・.nw-chips / .nw-chip … 分類フィルタのピル
   ・.nw-pager 一式 … 角丸6pxで統一したページネーション（WP化で全アーカイブに出る）
   ・.cx-newscard__title に .cx-tbd を効かせる色上書き（並び順の都合）
   ・.cx-ph の文字色
   ========================================================== */

/* ---- ヒーロー: 白見出しのコントラスト確保（subpage.css は編集不可のためページ側で上書き） ---- */
.page-hero::after {
  background:
    linear-gradient(180deg, rgba(var(--c-navy-overlay), 0.34) 0%, rgba(var(--c-navy-overlay), 0.34) 100%),
    linear-gradient(180deg,
      rgba(var(--c-navy-overlay), 0.18) 0%,
      rgba(var(--c-navy-overlay), 0.10) 45%,
      rgba(var(--c-navy-overlay), 0.20) 100%);
}

.cx-newscard__title.cx-tbd { color: var(--cx-gray-aa); }

.nw-lead { text-align: center; }

/* ---- 分類フィルタ ---- */
.nw-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 44px;
}
.nw-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 123.8px;   /* spec ピル幅 */
  min-height: 44px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--cx-blue);
  border-radius: 999px;
  color: var(--cx-blue);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.11em;
}
.nw-chip.is-active { background: var(--cx-blue); color: #fff; }
@media (hover: hover) {
  .nw-chip:hover { background: #f0f6ff; }
  .nw-chip.is-active:hover { background: var(--cx-blue); }
}

/* ---- 先頭の1枚（写真 816×420・見出し22/0.07em） ---- */
.nw-feat {
  display: block;
  max-width: 816px;      /* 素材の実寸は 560px 角。版面1272まで伸ばすと 2.3 倍で甘くなる */
  margin: 0 auto 56px;
}
.nw-feat__body { margin-top: 18px; }
.nw-feat__thumb { aspect-ratio: 816 / 420; overflow: hidden; }
.nw-feat__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--cx-ease); }
@media (hover: hover) { a.nw-feat:hover .nw-feat__thumb img { transform: scale(1.05); } }
.nw-feat__title {
  font-size: 22px;
  line-height: 34px;
  letter-spacing: 0.07em;
  font-weight: 400;
}

.nw-grid { row-gap: 48px; }

.nw-note { margin-top: 20px; }

/* ---- ページャ（角丸6pxの矩形で語彙を統一） ---- */
.nw-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 72px;
}
.nw-pager__nums { display: flex; align-items: center; gap: 10px; }
.nw-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid var(--cx-blue);
  border-radius: 6px;
  color: var(--cx-blue);
  font-family: var(--cx-font-en);
  font-feature-settings: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.005em;
}
.nw-pager__num.is-current { background: var(--cx-blue); color: #fff; }
@media (hover: hover) {
  .nw-pager__num:hover { background: #f0f6ff; }
  .nw-pager__num.is-current:hover { background: var(--cx-blue); }
}
.nw-pager__prev { padding: 0 20px; }
.nw-pager__next { padding: 0 46px 0 20px; }

@media (max-width: 768px) {
  /* 左揃えで折り返す（5個目が中央に孤立しない） */
  .nw-chips { gap: 8px; margin-bottom: 28px; justify-content: flex-start; }
  .nw-chip { min-width: 0; padding: 0 14px; font-size: 12px; }

  .nw-feat { margin-bottom: 32px; }
  .nw-feat__body { margin-top: 14px; }
  .nw-feat__title { font-size: 17px; line-height: 26px; }

  .nw-grid { row-gap: 28px; }
  .nw-pager { gap: 12px; margin-top: 40px; }
  .nw-pager__num { width: 44px; height: 44px; font-size: 17px; }
  .nw-pager__prev { padding: 0 14px; }
  .nw-pager__next { padding: 0 40px 0 14px; }
}

/* ---- タップ領域: SP のページャ小ボタンをスペック 43.5px → 44px へ（メイン判断6） ---- */
@media (max-width: 768px) {
  .nw-pager .cx-btn--sm { min-height: 44px; }
}

/* ==========================================================
   D-1 r5（グループC 再批評 crit3）
   ・C-2: 灰色ベタのプレースホルダ箱（.cx-ph.nw-ph）を撤去。原稿待ちは注記1本に集約。
   ・C-3/C-9: セクション見出し（.cx-head）が1つも無く h1→h3 の飛びだった／全幅要素ゼロで
     縦に単調だった。見出し＋分類フィルタを全幅の青帯（.cx-bluesec）に載せて両方を解く。
   ・C-4: 特集カードの右段が420px分の空白だったため、1カラム（写真の下にタイトル）へ。
   ・C-12: h1 は A190（日本語見出し）が未確定＝data-todo を付けて他の未確定と印を揃えた（HTML側）。
   ========================================================== */
.nw-bluesec { margin-top: var(--cx-gap-sec); }
.nw-bluesec .nw-chips { margin-bottom: 0; justify-content: flex-start; }
/* 青帯の上ではピルを反転（面が白＝選択中／白1px枠＝未選択） */
.nw-bluesec .nw-chip {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.nw-bluesec .nw-chip.is-active { background: #fff; color: var(--cx-blue); }
@media (hover: hover) {
  .nw-bluesec .nw-chip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
  .nw-bluesec .nw-chip.is-active:hover { background: #fff; color: var(--cx-blue); }
}

@media (max-width: 768px) {
  .nw-bluesec { margin-top: var(--cx-gap-sec-sp); }
}

/* ==========================================================
   【2026-09-04 D-1】分類フィルタ／ページャを button 化（JS絞り込み・ページング）
   :where() で詳細度0のリセットにし、既存の .nw-chip / .cx-btn 系の指定を一切上書きしない。
   ========================================================== */
:where(.nw-chip, .nw-pager__num, .nw-pager__prev, .nw-pager__next) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
:where(.nw-pager__num)[aria-disabled="true"] { opacity: 0.4; cursor: default; pointer-events: none; }