/* ===== page-news.css ｜ お知らせ一覧（Figma 14486:41926）=====
   デザイン言語: 色/書体トークンは base.css。英大見出し＋和ラベルのペア、共通ボタン(.btn)、コンテンツ幅1200中央（--pad-side）を全ページで使い回す。
   記事行は TOP の .news-item（css/sections/news.css）をそのまま使用。 */

/* --- 記事一覧セクション: bg base3 / pt0 pb160 / 左=絞り込み(215) gap100 右=記事列(885) --- */
.news-list{padding-bottom:159.4px;background:var(--c-base3);overflow:hidden}   /* 160 - 0.6: FV(404.2)＋共通フッター(985.36)の小数が積み上がり文書高が 2639 に繰り上がるのを防ぐ（Figma 2638） */
.news-list__inner{display:flex;align-items:flex-start;gap:100px}
.news-list__main{display:flex;flex-direction:column;align-items:center;gap:64px;flex:1 0 0;min-width:1px}
.news-list__items{display:flex;flex-direction:column;align-items:flex-start;width:885px;max-width:100%}

/* --- カテゴリ絞り込み: 白 w215 px20 py24 r3 / 内側 px4 gap12 / ラジオ18px＋14px Medium --- */
.news-filter{flex:none;width:215px;padding:24px 20px;background:var(--c-base);border-radius:var(--r-s)}
.news-filter__list{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0 4px}
.news-filter__item{width:100%}
.news-filter__label{display:flex;align-items:center;gap:8px;cursor:pointer}
.news-filter__radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.news-filter__mark{position:relative;flex:none;width:20px;height:20px;padding:1px}
.news-filter__mark::before{content:"";position:absolute;inset:1px;border:1px solid var(--c-border2);border-radius:50%;background:var(--c-base)}
.news-filter__mark::after{content:"";position:absolute;left:5px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--c-main2);opacity:0;transition:opacity .2s}
.news-filter__radio:checked+.news-filter__mark::after{opacity:1}
.news-filter__radio:focus-visible+.news-filter__mark::before{outline:2px solid var(--c-main2);outline-offset:2px}
.news-filter__text{font-size:var(--fs-body-s);font-weight:500;line-height:22px;letter-spacing:.14px;white-space:nowrap}   /* Figma は 14×1.6=22.4 を 22 に丸めて配置（実測 h172） */

/* --- ページネーション: gap32 / 前後=白 p10 r3 / 番号=34×34 Lato SemiBold 14 / 現在=22px正方形45°回転(bg main)＋白文字 --- */
.pager{display:flex;align-items:center;gap:32px}
.pager__nav{display:flex;align-items:center;justify-content:center;padding:10px;background:var(--c-base);border-radius:3px;overflow:hidden}
.pager__nav--prev .btn__arrow{transform:scaleX(-1)}
.pager__list{display:flex;align-items:center;gap:4px}
.pager__num{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:11px 10px;border-radius:3px;font-family:var(--font-en);font-weight:600;font-size:14px;line-height:1;text-align:center;white-space:nowrap;font-feature-settings:normal}
.pager__num.is-current{color:var(--c-inverse)}
.pager__diamond{position:absolute;left:6px;top:6px;width:22px;height:22px;background:var(--c-main);transform:rotate(45deg)}
.pager__num-text{position:relative}
.pager__ellipsis{display:flex;align-items:center;justify-content:center;height:34px;padding:9px 4px 11px;font-family:var(--font-en);font-weight:600;font-size:17px;line-height:1;white-space:nowrap;font-feature-settings:normal}

/* --- 下層FV（大タイトル）: Figma は 24px ラベルの行高 38.4 を 38 に丸めて配置しているため、行高を 38px に固定して 1px の縦ズレを消す。
   Lato 100px「News」のインク幅は Figma 240px / Chrome 240px で一致（補正なし） --- */
.lfv--news .lfv__label{line-height:38px}
.lfv__en--news{letter-spacing:0}

/* ===== SP（768px以下）: SPカンプ無し → TOP-SPカンプの News（14600:69544）の組み方を流用 =====
   記事行=罫線区切り pt14 pb16 px4 gap16 / 1行目=日付(Lato 14)＋タグ(12px) / 2行目=タイトル(15px) / 右に28pxの矢印。
   絞り込みは縦リストではなく横並びチップ（折返し可）、ページネーションは gap を詰めて 327px に収める。 */
@media (max-width:768px){
  .news-list{padding-bottom:var(--sp-section-gap)}
  .news-list__inner{flex-direction:column;gap:32px}
  .news-list__main{gap:var(--sp-under-btn);width:100%}
  .news-list__items{width:100%}
  /* 絞り込み: 白箱を外して横並びチップ。ラジオ丸は残して選択状態を見せる */
  .news-filter{width:100%;padding:0;background:transparent;border-radius:0}
  .news-filter__list{flex-direction:row;flex-wrap:wrap;gap:8px;padding:0}
  .news-filter__item{width:auto}
  .news-filter__label{gap:6px;padding:6px 12px 6px 10px;background:var(--c-base);border:1px solid var(--c-border);border-radius:var(--r-s);transition:border-color .2s}
  .news-filter__label:has(.news-filter__radio:checked){border-color:var(--c-main)}
  .news-filter__label:has(.news-filter__radio:checked) .news-filter__text{color:var(--c-text-sub)}
  .news-filter__mark{width:18px;height:18px}
  .news-filter__mark::after{left:4px;top:4px}
  .news-filter__text{font-size:12px;line-height:1.6;letter-spacing:.12px}
  /* 記事行（TOP-SP News 14591:56112 と同値） */
  .news-list .news-item{gap:16px;width:100%;padding:14px 4px 16px}
  .news-list .news-item__body{flex-direction:column;align-items:flex-start;gap:8px}
  .news-list .news-item__meta{gap:8px}
  .news-list .news-item__tag{width:auto;padding:0 8px 2px;font-size:12px;letter-spacing:.12px}
  .news-list .news-item__title{flex:none;width:100%;letter-spacing:.15px}
  .news-list .news-item__arrow{width:28px;height:28px;padding:8px}
  .news-list .news-item__arrow img{width:12px;height:12px}
  /* ページネーション: 34px 角はそのまま、間隔だけ詰める（合計 約270px） */
  .pager{gap:16px}
  .pager__list{gap:2px}
}
/* 絞り込み（main.js 9.）: 非表示は display:none（.news-item の display:flex が UA の [hidden] に勝つため明示）。該当なしの1行 */
.news-item[hidden],.pager[hidden]{display:none}
.news-list__empty{padding:24px 0;font-size:var(--fs-body-m);color:var(--c-text-sub)}
.news-list__empty[hidden]{display:none}