@charset "utf-8";
/* CSS Document */

/* 見出し周り */
.blog-archive .archive-header {
  max-width: 1120px;
  width: 92%;
  margin: 120px auto 50px;
}
.blog-archive .archive-title {
  font-size: 2.8rem;
  margin: 0 0 20px;
  text-align: center;
  font-weight: bold;
}
.blog-archive .archive-desc { color: #666; }

/* グリッド */
.blog-grid {
  max-width: 1120px;
  width: 92%;
  margin: 16px auto 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC: 3列 */
  gap: 20px;
  list-style: none;
  padding: 0;
}
@media (max-width: 767px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); /* SP: 2列 */ gap: 14px; }
}

/* カード */
.blog-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.blog-card__link { display: block; color: inherit; text-decoration: none; }

/* サムネイル */
.blog-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: #f3f4f6; }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__thumb--placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(45deg,#eee,#eee 10px,#f7f7f7 10px,#f7f7f7 20px); }

/* 本文部 */
.blog-card__meta, .blog-card__title, .blog-card__excerpt { padding: 12px 14px 0; }
.blog-card__date {
    font-size: 1.5rem;
    color: #666;
    font-weight: bold;
}
.blog-card__title { font-size: 2rem; line-height: 1.5; font-weight: 700; margin: 2px 0 4px; }
.blog-card__excerpt { padding-bottom: 14px; color: #444; }

/* ページネーション（丸ボタン） */
.pagination { display: flex; justify-content: center; margin: 8px 0 64px; }
.pagination .page-numbers { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(0,0,0,.04); list-style: none; }
.pagination .page-numbers li { list-style: none; }
.pagination .page-numbers a,
.pagination .page-numbers span {
  display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center;
  padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(0,0,0,.06);
  font-weight: 600; text-decoration: none; line-height: 1;
}
.pagination .current {
  background: linear-gradient(180deg,#5b6cf5 0%,#3c4cd8 100%); color: #fff; border-color: transparent;
}
.pagination a:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.pagination .dots { background: transparent; border: none; box-shadow: none; }
@media (max-width: 767px) {
  .pagination .page-numbers { gap: 6px; padding: 4px; }
  .pagination .page-numbers a, .pagination .page-numbers span { min-width: 36px; height: 36px; padding: 0 10px; font-size: 14px; }
}