/* /news 一覧(2026-10-12 趙・吉田さん指示):画面幅の90%。左に見出しとカテゴリの絞り込み、右に 日付/カテゴリ/題名 の行 */
html { background-color: #fff; }
.nwl { width: 90vw; margin: 9.5rem auto 6rem; display: grid; grid-template-columns: minmax(9rem, 13vw) minmax(0, 1fr); column-gap: 4vw; align-items: start; color: #111; }
.nwl-side { position: sticky; top: 7.5rem; }
/* 見出し:従来の一覧と同じ大きさ・書体(3.6rem / 1.3rem、スマホ 2rem / 1rem) */
.nwl-head { grid-column: 1 / -1; margin-bottom: 3.2rem; }
.nwl-h1 { margin: 0; font-size: 3.6rem; font-weight: 400; line-height: 1.1; color: #393939; }
.nwl-h1sub { margin: .2rem 0 0; font-size: 1.3rem; color: #343434; }
.nwl-filter { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.nwl-filter button { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: .1rem 0; margin: 0; font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: .06em; color: #b5b5b5; cursor: pointer; transition: color .2s ease; }
.nwl-filter button:hover { color: #555; }
.nwl-filter button[aria-pressed="true"] { color: #111; }
.nwl-filter button:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

.nwl-list { list-style: none; margin: 0; padding: 0; }
.nwl-list li[hidden] { display: none; }
.nwl-row { display: grid; grid-template-columns: 6.5rem 7rem minmax(0, 1fr); column-gap: 1.5rem; align-items: center; padding: 1.9rem 0; border-bottom: 1px solid #dedede; color: inherit; text-decoration: none; }
.nwl-list li:first-child .nwl-row { padding-top: .4rem; }
.nwl-date { font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: #111; white-space: nowrap; }
/* ラベルは幅を揃える(いちばん長い「キャンペーン」が収まる幅) */
.nwl-cat { justify-self: start; display: inline-block; box-sizing: border-box; width: 7rem; text-align: center; padding: .28rem .4rem; border-radius: 999px; background: #111; color: #fff; transition: background-color .25s ease, color .25s ease; font-size: .7rem; font-weight: 600; letter-spacing: .06em; line-height: 1.3; white-space: nowrap; }
.nwl-title { margin: 0; font-size: 0.94rem; font-weight: 500; letter-spacing: .06em; line-height: 1.7; }
/* マウスを乗せた行:カテゴリのラベルが黄緑(サイトの差し色)に、下の線が濃くなる */
.nwl-row { transition: border-color .25s ease; }
a.nwl-row:hover, a.nwl-row:focus-visible { border-bottom-color: #111; }
a.nwl-row:hover .nwl-cat, a.nwl-row:focus-visible .nwl-cat { background: #e0ff80; color: #111; }
a.nwl-row:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.nwl-empty { margin: 3rem 0; color: #888; }

@media (max-width: 768px) {
  .nwl { display: block; margin: 7rem auto 4rem; }
  .nwl-side { position: static; }
  .nwl-head { margin-bottom: 1.6rem; }
  .nwl-h1 { font-size: 2rem; }
  .nwl-h1sub { font-size: 1rem; }
  .nwl-filter { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 1.6rem; padding-bottom: 1.3rem; border-bottom: 1px solid #dedede; }
  .nwl-filter button { font-size: .9rem; }
  .nwl-row { grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; row-gap: .7rem; padding: 1.35rem 0; }
  .nwl-list li:first-child .nwl-row { padding-top: .2rem; }
  .nwl-date { font-size: .82rem; }
  .nwl-cat { font-size: .66rem; width: 6.2rem; padding: .24rem .3rem; }
  .nwl-row > div { grid-column: 1 / -1; }
}