/* =========================================================
   お知らせ 一覧・詳細（sub.css の後に読む）
   色・書体・余白のトークンは top.css 側が持っている。
   ========================================================= */

:root{--page-hero-img:var(--img-news-hero);}

/* 一覧は他の下層ページと同じ .page-hero（sub.css）を使う。
   詳細は「読む」ページなので絵で高さを取らず、
   分類・日付・見出しを先に見せる下の .news-head を使う。 */
.news-head{padding:26px 0 0;}
.news-head__inner{max-width:78ch;padding:38px 0 34px;border-bottom:1px solid var(--line);}
.news-head__meta{display:flex;align-items:center;gap:14px;}
.news-head__meta .tag{display:inline-grid;padding:0 13px;}
.news-head__date{font-family:var(--font-en);font-size:14px;font-weight:600;color:var(--muted);
                 letter-spacing:.04em;}
.news-head h1{margin-top:18px;font-size:clamp(24px,3.4vw,34px);font-weight:700;line-height:1.55;
              color:var(--ink);}
/* ---------- 一覧 ---------- */
.news-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;}
.news-filter a{padding:7px 17px;border-radius:var(--r-pill);border:1px solid var(--line);
               font-size:12.5px;font-weight:700;color:var(--muted);background:#fff;transition:.2s;}
.news-filter a:hover{border-color:var(--blue-300);color:var(--blue-600);}
.news-filter a[aria-current="page"]{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}

.news-index li{border-top:1px solid var(--line);}
.news-index li:last-child{border-bottom:1px solid var(--line);}
.news-index a{display:grid;grid-template-columns:96px 84px 1fr auto;align-items:center;gap:20px;
              padding:22px 12px;transition:.2s;}
.news-index a:hover{background:var(--bg-soft);}
.news-index .news__date{font-family:var(--font-en);font-size:13px;font-weight:600;color:var(--muted);}
.news-index__ttl{font-size:14.5px;font-weight:500;line-height:1.7;color:var(--text);}
.news-index a:hover .news-index__ttl{color:var(--blue-600);}
.news-index__go{color:var(--blue-600);font-size:14px;}
.news-index__empty{padding:60px 0;text-align:center;font-size:14px;color:var(--muted);}

/* ---------- 詳細 ---------- */
/* 本文と、告知のときだけ出る開催概要。レポートは1カラムになる */
.news-layout{display:grid;grid-template-columns:1fr 330px;gap:52px;align-items:start;}
/* イベントに紐づかないレポートは1カラム。左寄せのままだと右に大きな余白ができるので、
   見出しごと記事全体を中央に寄せる（2026-09-01 服部さん） */
.news-layout--single{grid-template-columns:minmax(0,74ch);justify-content:center;}
.news-layout--single .news-body{max-width:none;}
.news-head--single .news-head__inner{max-width:74ch;margin-inline:auto;}

.news-body{max-width:72ch;}
.news-body__lead{font-size:15px;line-height:2.1;color:var(--ink);font-weight:500;}
.news-body h2{display:flex;align-items:center;gap:10px;margin-top:44px;
              font-size:19px;font-weight:700;line-height:1.6;color:var(--ink);}
.news-body h2:first-child{margin-top:0;}
/* 見出しの丸は箇条書き（6px）より少し大きくして、階層が見て分かるようにする */
.news-body h2 .dot{width:9px;height:9px;}
.news-body p{margin-top:16px;font-size:14px;line-height:2.1;color:var(--text);}
.news-body p:first-child{margin-top:0;}
.news-body a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px;}
.news-body strong{font-weight:700;}
.news-body ul{display:grid;gap:10px;margin-top:18px;}
.news-body li{position:relative;padding-left:18px;font-size:14px;line-height:1.95;color:var(--text);}
.news-body li::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:6px;
                      border-radius:50%;background:var(--ac-green);}
.news-body figure{margin-top:32px;}
.news-body img{display:block;width:100%;height:auto;border-radius:12px;}
.news-body figcaption{margin-top:10px;font-size:12px;line-height:1.8;color:var(--muted);}

/* 告知の開催概要。会員向けの導線もここにまとめる */
.event-box{position:sticky;top:112px;padding:28px 26px 26px;border-radius:var(--r-card);
           background:linear-gradient(150deg,#eef5fd 0%,#e6f3ee 100%);}
.event-box__ttl{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
                letter-spacing:.1em;color:var(--blue-700);}
.event-box dl{display:grid;gap:15px;margin-top:22px;}
.event-box dt{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted);}
.event-box dd{margin-top:5px;font-size:13.5px;line-height:1.85;color:var(--ink);font-weight:700;}
.event-box .btn{margin-top:24px;width:100%;justify-content:center;height:46px;padding:0 18px;
                font-size:12.5px;}
.event-box__note{margin-top:12px;font-size:11px;line-height:1.8;color:var(--muted);}

/* 下書きを事務局が確認しているときの帯 */
.news-draft{display:flex;gap:14px;align-items:flex-start;margin-bottom:26px;padding:16px 20px;
            border-radius:var(--r-card);background:#fff7ef;border:1px solid #f6d9bf;}
.news-draft b{font-size:13px;font-weight:700;color:#8a5a24;}
.news-draft p{margin-top:5px;font-size:12.5px;line-height:1.9;color:#7a5533;}

/* 記事の下の送り */
.news-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;}
.news-nav__side{display:grid;gap:5px;min-width:0;}
.news-nav__side b{font-family:var(--font-en);font-size:11px;letter-spacing:.1em;color:var(--blue-600);}
.news-nav__side span{font-size:13px;line-height:1.7;color:var(--text);font-weight:500;
                     overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
                     -webkit-line-clamp:2;-webkit-box-orient:vertical;}
.news-nav__side--next{text-align:right;}
.news-nav__side:hover span{color:var(--blue-600);}
.news-nav__center{display:grid;place-items:center;}

@media (max-width:1000px){
  .news-layout{grid-template-columns:1fr;gap:34px;}
  .event-box{position:static;}
}
@media (max-width:600px){
  .news-head__inner{padding:26px 0 24px;}
  .news-index a{grid-template-columns:1fr;gap:8px;padding:18px 4px;}
  .news-index__go{display:none;}
  .news-nav{grid-template-columns:1fr;gap:16px;}
  .news-nav__side--next{text-align:left;}
}