/* ============================================================
   お知らせページ（news.html）固有スタイル
   「更新が生きているサイト」に見せる一覧デザイン
   ============================================================ */

/* ---- 記事一覧 ---- */
.news-sec{background:var(--white);border-radius:48px;margin:0 10px}
.cat-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;align-items:center}
.cat-legend .lg-label{font-size:.85rem;font-weight:900;color:var(--ink-soft);margin-right:2px}
.cat{display:inline-block;font-size:.75rem;font-weight:900;padding:3px 14px;border-radius:999px;white-space:nowrap}
.cat-info{background:var(--green-soft);color:#0A5E36}
.cat-daily{background:var(--yellow-soft);color:var(--ink)}
.cat-recruit{background:var(--blue-soft);color:#1E3ECC}
.article-list{display:grid;gap:22px;margin-top:36px;max-width:880px;margin-inline:auto}
.article-card{
  position:relative;display:grid;gap:0;background:var(--bg);
  border:3px solid var(--ink);border-radius:26px;overflow:hidden;
  text-decoration:none;color:var(--ink);
  transition:transform .55s var(--ease-soft),box-shadow .55s var(--ease-soft);
}
.article-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow-pop)}
.article-card:nth-child(even):hover{transform:translateY(-6px) rotate(.4deg)}
.article-card .thumb{min-height:170px;border-radius:0}
.article-card .a-body{padding:22px 24px 24px}
.a-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.a-meta time{font-family:var(--font-en);font-weight:700;font-size:.9rem;color:var(--ink-soft)}
.badge-new{
  display:inline-block;background:var(--yellow);border:2px solid var(--ink);
  font-family:var(--font-en);font-weight:800;font-size:.68rem;letter-spacing:.14em;
  padding:2px 12px;border-radius:999px;transform:rotate(-2deg);
}
.article-card h3{font-size:1.15rem;font-weight:900;line-height:1.6;margin-top:10px}
.article-card .excerpt{font-size:.9rem;color:var(--ink-soft);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.a-more{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:.88rem;color:var(--blue);margin-top:14px}
.a-more .circ{width:34px;height:34px;border-radius:50%;border:2.5px solid currentColor;display:grid;place-items:center;transition:transform .35s}
.article-card:hover .a-more .circ{transform:translateX(5px) rotate(-45deg)}
.list-note{margin-top:26px;font-size:.85rem;color:var(--ink-soft);text-align:center}

/* ---- ページャ ---- */
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:44px;flex-wrap:wrap}
.pg{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;min-height:52px;padding:8px 16px;border-radius:999px;
  border:3px solid var(--ink);background:var(--white);color:var(--ink);
  font-family:var(--font-en);font-weight:800;font-size:1.05rem;text-decoration:none;
  transition:transform .5s var(--ease-soft),box-shadow .5s var(--ease-soft),background-color .5s var(--ease-soft),color .5s var(--ease-soft);
}
.pg:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.pg[aria-current="page"]{background:var(--ink);color:var(--bg);pointer-events:none}
.pg-next{font-family:var(--font-jp);font-weight:900;font-size:.92rem;gap:8px}
.pager-note{margin-top:14px;font-size:.8rem;color:var(--ink-soft);text-align:center}

/* ---- Instagram連携 ---- */
.insta-sec{overflow:visible}
.insta-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
.insta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:32px}
.insta-grid .ph{min-height:140px;aspect-ratio:1}

/* ---- レスポンシブ ---- */
@media(min-width:600px){
  .article-card{grid-template-columns:220px 1fr}
  .article-card .thumb{min-height:100%}
  .insta-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px){
  .article-card{grid-template-columns:260px 1fr}
}