:root{
  --max-width:1200px;
  --gutter:20px;
  --bg: #ffffff;
  --muted: #69707a;
  --text: #0f1720;
  --accent: #0b79d0;
  --card: #fbfdff;
  --radius:12px;
  --shadow: 0 8px 24px rgba(12,20,30,0.06);
  --font-stack: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* Container (if your theme already has .container, these values will be compatible) */
.news-list.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 20px;
  box-sizing: border-box;
  font-family: var(--font-stack);
  color: var(--text);
}

/* HERO */
.hero-news{
  background-color: #41A664;
  color: #fff;
}
.hero-news__inner{ max-width:var(--max-width); margin:0 auto; padding:120px 20px; }
.hero-news__content{ display:flex; flex-direction:column; gap:6px; }
.hero-news__sub-title{ font-size:14px; color:rgba(255,255,255,0.9); letter-spacing:0.08em; text-transform:uppercase; margin:0 }
.hero-news__main-title{ font-size:40px; margin:4px 0 0 0; font-weight:800; line-height:1 }

/* BACKGROUND WRAPPER for list (lighter) */
.news-list__bg{ background:#fbfcfe; padding:40px 0; }

/* GRID LAYOUT for news items */
.news-list{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:24px; align-items:start }

.news-item{
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease;
  display:flex; flex-direction:column; min-height:180px;
}

.news-item:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(12,20,30,0.08); }

.news-item__link{ color:inherit; text-decoration:none; display:block; height:100%; }

.news-item__inner{ padding:18px; display:flex; flex-direction:column; gap:10px; height:100%; }

.news-item__title{ font-size:18px; font-weight:700; margin:0; line-height:1.3; color:var(--text) }

.news-item__date{ font-size:13px; color:var(--muted); margin:0 }

.news-item__content{ margin-top:6px; color:var(--muted); font-size:14px; line-height:1.6; flex:1 }

/* Read more / actions could be appended here if needed */

/* Pagination (the_posts_pagination output) */
.nav-links{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; padding:28px 0 6px }
.nav-links .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px; border-radius:8px; background:#fff; color:var(--text);
  border:1px solid #eef2f6; text-decoration:none; font-weight:600; box-shadow:0 2px 6px rgba(10,20,30,0.03);
}
.nav-links .page-numbers.current{ background:var(--accent); color:#fff; border-color:var(--accent); }
.nav-links .page-numbers:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(12,20,30,0.06) }

/* Accessibility: focus outlines */
.news-item__link:focus{ outline:3px solid rgba(11,121,208,0.18); outline-offset:4px }
.nav-links .page-numbers:focus{ outline:3px solid rgba(11,121,208,0.18); outline-offset:3px }

/* Responsive tweaks */
@media (max-width:880px){
  .hero-news__inner{ padding:120px 16px }
  .hero-news__main-title{ font-size:34px }
  .news-list.container{ padding:40px 16px }
}

@media (max-width:520px){
  .hero-news__main-title{ font-size:26px }
  .news-item__inner{ padding:14px }
  .news-item__title{ font-size:16px }
  .nav-links .page-numbers{ min-width:36px; height:36px }
}

/* Utility small helpers used by template authors */
.u-article-date{ font-size:13px; color:var(--muted); }
.u-ellipsis{ overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical }

/* If you want the list to appear as stacked full-width on mobile: */
@media (max-width:420px){
  .news-list{ grid-template-columns: 1fr }
}

/* End of news.css */