/* ===== お知らせ（一覧・詳細）固有 ===== */


/* ---- カテゴリタブ ---- */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px}
.tab{font-size:12.5px; letter-spacing:.06em; padding:9px 20px; border:1px solid var(--rule); transition:border-color .3s,background .3s,color .3s}
.tab:hover{border-color:var(--ink)}
.tab.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---- 一覧 ---- */
.news-list{border-top:1px solid var(--rule)}
.news-item{display:grid; grid-template-columns:120px 108px 1fr; gap:0 20px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--rule); transition:padding-left .34s}
.news-item:hover{padding-left:10px}
.news-date{font-family:var(--num); font-weight:600; font-size:13.5px; letter-spacing:.1em; color:var(--gray)}
.news-cat{font-size:11.5px; letter-spacing:.1em; border:1px solid var(--rule); padding:3px 0; text-align:center; color:var(--gray)}
.news-ttl{font-size:14.5px; line-height:1.85}

/* ---- ページ送り ---- */
.pager{display:flex; gap:8px; justify-content:center; align-items:center; margin-top:44px}
.pg{min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--num); font-weight:600; font-size:14px; border:1px solid var(--rule); transition:border-color .3s,background .3s,color .3s}
.pg:hover{border-color:var(--ink)}
.pg.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}
.pg-next{font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; padding:0 18px; gap:10px}
.pg-next i{width:20px; height:1px; background:currentColor; transition:width .3s}
.pg-next:hover i{width:30px}

/* ---- 詳細 ---- */
.article{max-width:820px; margin:0 auto}
.a-meta{display:flex; align-items:center; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--rule)}
.a-date{font-family:var(--num); font-weight:600; font-size:14px; letter-spacing:.1em; color:var(--gray)}
.a-cat{font-size:11.5px; letter-spacing:.1em; border:1px solid var(--rule); padding:3px 14px; color:var(--gray)}
.a-title{font-family:var(--sans); font-weight:700; font-size:clamp(21px,3.2vw,32px); line-height:1.6; letter-spacing:.03em; margin-top:24px}
.a-visual{aspect-ratio:16/8; margin-top:32px}
.a-body{margin-top:36px; font-size:14px; line-height:2.2}
.a-body p{margin-bottom:20px}
.a-body h2{font-family:var(--sans); font-weight:700; font-size:18px; margin:36px 0 12px}
.a-body dl{border-top:1px solid var(--rule); margin:24px 0}
.a-body dt{font-size:12.5px; color:var(--gray); padding-top:16px; letter-spacing:.06em}
.a-body dd{font-size:14px; padding-bottom:16px; border-bottom:1px solid var(--rule)}
.a-back{display:flex; justify-content:center; margin-top:52px; padding-top:32px; border-top:1px solid var(--rule)}
.a-back a{display:inline-flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.08em}
.a-back i{width:26px; height:1px; background:currentColor; transition:width .34s}
.a-back a:hover i{width:40px}

@media (max-width:900px){
  /* 3列目に 1fr を置く。固定値2列だけだと grid-column:1/-1 が212pxまでしか伸びない
     （トップの .news-item と同じ直し方・同じ並び順に揃えた） */
  .news-item{grid-template-columns:auto auto 1fr; gap:7px 12px}
  .news-cat{order:1; padding:3px 12px}   /* カテゴリを先、日付を後に */
  .news-date{order:2}
  .news-ttl{grid-column:1 / -1}
}