@charset "UTF-8";
/* =========================================================
   ブログ一覧（template-parts/blog-index.php）
   カード・見出しは lp.css（トップページと共通）
   ========================================================= */
.blog-index{padding:150px 0 110px}
.blog-index .ttl{margin-bottom:40px}

/* カテゴリの絞り込み */
.blog-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:56px}
.blog-cats a{display:inline-block;font-size:14px;font-weight:700;line-height:1.5;padding:8px 20px;border-radius:999px;background:#fff;border:1.5px solid transparent;transition:border-color .2s,background .2s}
.blog-cats a::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,transparent);margin-right:8px;vertical-align:1px}
.blog-cats a:first-child::before{display:none}
.blog-cats a:hover{border-color:var(--ink)}
.blog-cats a.is-current{background:var(--ink);color:#fff}

/* カード一覧（3列 → 2列 → 1列） */
.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 28px}

/* ページ送り */
.blog-pager{margin-top:72px}
.blog-pager ul{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.blog-pager li{margin:0}
.blog-pager li > .page-numbers{display:grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border-radius:10px;background:#fff;font-family:var(--en);font-weight:700;font-size:15px;transition:background .2s,color .2s}
.blog-pager a.page-numbers:hover{background:var(--yellow)}
.blog-pager li > .page-numbers.current{background:var(--ink);color:#fff}
.blog-pager li > .page-numbers.dots{background:none;min-width:24px}
.blog-pager .ico-arw{width:16px}
.blog-pager .prev .ico-arw{rotate:180deg}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:1100px){
  .blog-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .blog-index{padding:110px 0 80px}
  .blog-cats{margin-bottom:40px}
}
@media (max-width:640px){
  .blog-list{grid-template-columns:1fr;gap:36px}
  .blog-cats{gap:8px}
  .blog-cats a{font-size:13px;padding:7px 14px}
}