/* 新着情報：年を軸にした台帳（箱なし・写真なし）。このファイルは news.html にだけ読み込まれる＝トップの抜粋（site.css の .news の箱）には影響しない。
   記事の足し方：その年の ul.news の先頭に <li> を1行（属性なし・1件＝1行。トップの抜粋は先頭3行を機械で拾う）。
     掲載日  <time class="d" datetime="2026-10-01"><span class="nl-dy">2026/</span>10/01</time>   年の部分は必ず nl-dy で包む（年は左の見出しが持つ）
     展示会  <p class="nl-exs"><span class="nl-ex"><span class="nl-ex-n">名称</span><span class="nl-sep">　</span><span class="nl-ex-d">会期</span><span class="nl-sep">／</span><span class="nl-ex-p">会場</span></span></p>
     ほかの記事は <p>本文</p> のまま（包まなくても崩れない）。
   年が変わったら、先頭に <section class="nl-yr rv rv-rule"><h2 class="nl-year">2027</h2><ul class="news">…</ul></section> を足す。記事の無い年は作らない。
   1年の記事が30件を超える、または全体で5年分・30件を超えたら、古い年（直近3年より前）を details.fold で年ごとに畳む（summary＝年の数字）。
   （1つの年の束がスマホで高さ約6,000px を超えると、上罫の動きの合図が届かなくなる＝site.js の threshold .12。） */
#news .lead{margin:-24px 0 40px;word-break:auto-phrase;}
.nl{border-bottom:1px solid var(--line-strong);}
/* 上罫：色は transparent と明記する（site.css の .rv-rule が透明にした上に ::before の線を引く仕組み。ここで色を書くと線が最初から見えて動きが消える） */
.nl-yr{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:24px;border-top:1px solid transparent;}
.nl-yr+.nl-yr{--rd:.15s;}
/* 下の 24px：次の年の束に押し出される時、数字の下端と次の上罫の間に残るすき間（無いと 48px の数字が罫に乗る）。箱は 96px＝いちばん低い束（1件・112px）に収まる */
.nl-year{align-self:start;position:sticky;top:92px;padding:24px 0;font-family:var(--ff-en);font-weight:700;font-size:48px;line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .1s linear calc(.4s + var(--rd,0s));}
.js:not(.qa):not(.still) .nl-yr:not(.is-in) .nl-year{color:var(--line-strong);transition:none;}
#news .news{margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;}
#news .news li{grid-template-columns:96px minmax(0,1fr);gap:0 24px;padding:24px 0;align-items:baseline;}
#news .news .d{font-size:20px;line-height:1.45;color:var(--ink-2);}
/* 目からだけ外す（読み上げ・コピーには残す）。display:none や visibility:hidden にしない */
.nl-dy,.nl-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
#news .news h3{font-size:20px;line-height:1.45;font-feature-settings:"palt";}
#news .news p{margin-top:8px;max-width:40em;font-size:16px;line-height:1.7;color:var(--ink-2);word-break:auto-phrase;}
#news .news p.nl-exs{max-width:none;}
.nl-ex{display:grid;grid-template-columns:minmax(0,18em) 136px minmax(0,1fr);column-gap:24px;align-items:baseline;}
.nl-ex+.nl-ex{margin-top:4px;}
.nl-ex-n{color:var(--ink);}
.nl-ex-d{font-variant-numeric:tabular-nums;}
.nl-sub{display:block;margin-top:4px;font-size:14px;color:var(--note);}
#news .news a{display:inline-flex;align-items:center;min-height:44px;margin:-10px -4px;padding:0 4px;}  /* 左右 4px は焦点の枠と文字の間。字の位置は変わらない */
#news .news a:focus-visible{outline:2px solid var(--ink);outline-offset:0;}  /* 枠は 44px の押せる範囲ちょうど。2px 外へ出すと上の件名の字の下端に触れる */
@media (max-width:1100px){
  .nl-yr{grid-template-columns:minmax(0,1fr);}
  .nl-year{position:static;padding-bottom:0;font-size:32px;}  /* 年を記事の上に置く組みでは下の余白を足さない */
  #news .news li{padding:20px 0;}
}
@media (max-width:860px){
  .nl-ex{grid-template-columns:136px minmax(0,1fr);}
  .nl-ex-n{grid-column:1/-1;}
  .nl-ex+.nl-ex{margin-top:12px;}
}
@media (max-width:600px){
  #news .lead{margin-bottom:32px;}
  .nl-year{padding-top:20px;}
  #news .news li{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0 20px;}
  #news .news .d{font-size:16px;color:var(--note);}
  #news .news p{margin-top:4px;}
  .nl-ex{grid-template-columns:112px minmax(0,1fr);column-gap:16px;}  /* 2026-10-20 96→112px：会期「10月20日～23日」（日が2けた）が2行に折れていた */
  .nl-ex-d,.nl-ex-p{font-size:14px;}
}

/* ---- のっぺり対策（2026-09-21・あきと指摘）：色は足さない。A案の3つの床（g1/g2/g3）の切り替え・表頭の面・台帳の縞だけ（共通＝site.css「面の段」） ---- */
#news .news li{padding-inline:16px;}
#news .news li:nth-child(even){background:rgba(22,26,32,.45);}   /* 床が g2 なので、縞は一段沈める（g1 を重ねる） */
@media (max-width:760px){#news .news li{padding-inline:12px;}}

/* ---- 年の数字が1枚めくれて立つ（2026-10-02・news-02）：年の束に is-in が付いたら、上辺を軸に奥へ寝た数字が正面へ起きる（0.45秒）。
   遅れは --rd だけ（上罫の引き終わりは待たない）。色の点灯も同じ瞬間に始める（g5 のまま 0.5秒を超えて待たせない）。
   不透明度は .6 から＝寝ている間も数字は読める。初期状態は .js:not(.qa):not(.still) の配下だけ＝?qa=1・動きを止める設定・JS無効は最初から最終状態。PC の sticky はそのまま ---- */
.js:not(.qa):not(.still) .nl-year{transform-origin:50% 0;transition:color .1s linear var(--rd,0s),opacity .45s var(--ease) var(--rd,0s),transform .45s var(--ease) var(--rd,0s);}
.js:not(.qa):not(.still) .nl-yr:not(.is-in) .nl-year{opacity:.6;transform:perspective(500px) rotateX(-60deg);transition:none;}

/* ==== 2026-11-06 70周年型（旧 news-show.css を移した） ==== */
/* 新着情報の見本だけ */
.news-show-hero .u { display: inline-block; }
@media (max-width: 760px) { .news-show-hero .show-l3 { font-size: 24px; } }