/* セクション全体 */
.blog-section {
  margin: 30px 0;
  padding: 0 0 4px;
}

/* 見出し */
.blog-title {
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 16px;
  font-size: clamp(20px, 3.4vw, 26px);
  color: #333;
  position: relative;
}


/* カードの並び（グリッド） */
.blog-container {
  display: grid;
  gap: 16px;
  /* デフォルトはモバイル想定(2列)にしておき、PCで上書き */
  grid-template-columns: repeat(2, 1fr);
}

/* カード本体 */
.blog-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden; /* 画像の拡大はみ出しを隠す */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

/* hover効果（軽く浮かす） */
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* 画像枠：16:9固定でトリミング */
.blog-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* 画像 */
.blog-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}

/* 画像ズーム（ランキングのトーンに合わせる） */
.blog-card:hover .blog-img img {
  transform: scale(1.06);
}

/* タイトル（h3） */
.blog-card h3 {
  margin: 12px 12px 6px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  color: #333;
}

/* タイトルのリンク（2行で省略） */
.blog-card h3 a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card h3 a:hover {
  text-decoration: underline;
}

/* 公開日 */
.blog-card p {
  margin: 0 12px 14px;
  font-size: 13px;
  color: #666;
  margin-top: auto;
}

/* フォーカス（アクセシビリティ） */
.blog-card a:focus-visible,
.blog-card a:focus {
  outline: 2px dashed #91bd1d;
  outline-offset: 3px;
  border-radius: 4px;
}

/* フェードイン併用（任意） */
.blog-section.fade-in,
.blog-card.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.blog-section.fade-in.visible,
.blog-card.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-img img {
    transition: none;
  }
}

/* ======================
   PC (>= 769px)
====================== */
@media screen and (min-width: 769px) {
  .blog-container {
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: 16px;
  }
  .blog-card h3 { font-size: 17px; }
}

/* ======================
   スマホ (<= 768px)
====================== */
@media (max-width: 768px) {
  .blog-container {
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: 12px;
  }
  .blog-card h3 { font-size: 15px; }
  .blog-card p { font-size: 13px; }
}