:root{
  --bg:#fafafa; --text:#222; --muted:#6b7280;
  --surface:#fff; --accent:#111; --soft:#f1f5f9;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.06);
  --main: #4C6B5C;
}

html,body{background:var(--bg);color:var(--text)}
*{box-sizing:border-box}
a{text-decoration:none;color:inherit}

.nm{max-width:1040px;margin:80px auto;padding:0 16px}
.nm__hero{margin-bottom:18px}
.nm__hero h1{font-size:clamp(1.6rem,2.8vw,2rem); margin:0 0 6px}
.nm__lead{color:var(--muted);margin:0}

.nm__grid{
  display:grid;gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.nm-card{
  background:var(--surface); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  display:flex;flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.nm-card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.10)}

.nm-card__thumb img{display:block; width:100%; height:180px; object-fit:cover}
.nm-card__body{padding:14px 14px 16px}
.nm-card__title{font-size:1.05rem; line-height:1.35; margin:0 0 8px}
.nm-card__title a{color:#111}
.nm-card__meta{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.9rem; margin-bottom:8px}
.nm-badge{background:#eef2ff; color:#1f2937; padding:.12rem .5rem; border-radius:999px; font-weight:700}
.nm-card__excerpt{color:#374151; margin:0}

.nm__pager{display:flex; gap:8px; justify-content:center; margin:24px 0 8px}
.nm-page{
  padding:.45rem .75rem; border-radius:10px; border:1px solid #e5e7eb; background:var(--surface);
}
.nm-page.is-active{background:#111; color:#fff; border-color:#111}

/* toolbar */
.nm__toolbar{margin:10px 0 16px}
.nm__toolbar-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nm__search{min-width:220px;flex:1}
.nm__input{
  width:100%; border:1px solid #e5e7eb; border-radius:12px;
  padding:.6rem .9rem; background:#fff; outline:none;
}
.nm__input:focus{border-color: var(--accent); box-shadow:0 0 0 3px rgba(17,17,17,.08)}
.nm__select{
  appearance:none; border:1px solid #e5e7eb; border-radius:12px; padding:.55rem .9rem; background:#fff; min-width: 170px;;
}
.btn{border:none;cursor:pointer;border-radius:12px;padding:.6rem 1rem;background: var(--main);color: var(--surface)}
.btn--ghost{background:#fff;color:#111;border:1px solid #e5e7eb}

/* pagination (ご指定の見た目) */
.pagination{display:flex;gap:8px;justify-content:center;margin:24px 0 8px}
.pagination .page{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;border-radius:10px;text-decoration:none;
  color:#111827;background:var(--white);border:1px solid #e5e7eb;
}
.pagination .page:hover{border-color: var(--accent)}
.pagination .page.is-active{
  background: var(--hi, #D6EADF);
  color: var(--main, #4C6B5C);
  border-color: var(--accent, #A3C9A8);
  font-weight:800;
}
.pagination .page.is-disabled{opacity:.45;pointer-events:none}
.nm-like{color:#f59e0b}