/* =========================================================
   NEW MADE  NEWS（お知らせ）
   style.css の後に読み込む
   ========================================================= */

.news-page{
  width:min(100% - var(--gutter) * 2, 1100px);
  margin-inline:auto;
  padding:clamp(40px,6vw,120px) 0 var(--section-space);
}
/* 今いる場所（ABOUT / NEWS）。CREATION の各ページのパンくずと同じ見た目 */
.news-crumb{
  display:flex;align-items:center;gap:.7em;
  margin:0 0 clamp(14px,1.4vw,26px);
  font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--mute);
}
.news-crumb a{color:inherit;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:rgba(138,138,138,.5)}
.news-crumb a:hover,.news-crumb a:focus-visible{color:var(--ink)}
.news-page .section-title{padding-inline:0}

/* ---------- 一覧 ---------- */
/* 日付＋タイトルの一覧（新しい順）。行の間に細い線 */
.news-list{
  border-top:1px solid rgba(13,13,13,.12);
}
.news-list li{
  display:grid;grid-template-columns:clamp(88px,9vw,160px) minmax(0,1fr);align-items:baseline;gap:1em;
  padding:clamp(18px,1.8vw,32px) 0;
  border-bottom:1px solid rgba(13,13,13,.12);
}
.news-list time{font-size:12px;font-weight:700;letter-spacing:.14em;color:#666;font-variant-numeric:tabular-nums}
.news-list p{
  font-family:var(--font-ja);font-weight:500;
  font-size:clamp(13px,1.1vw,20px);line-height:1.7;letter-spacing:.04em;
}

/* ---------- SP ---------- */
@media (max-width:720px){
  .news-list li{grid-template-columns:auto minmax(0,1fr);gap:20px}
}