/* ヒーロー背景（L12対応） */
.page-header--blog { background-image: url('../../images/2025/03/biotope.jpg'); background-size: cover; background-position: center center; }

/* 企業の活動ブログのカード。
   HTML版 blog/index.html のページ内 <style> をそのまま移植したもの。
   front.css のコメントにあるとおり、TOPページには対応する要素が無いため
   移植が見送られていたが、このページには要素が実在するため必要。
   日付・投稿者・抜粋文に色を指定しないと、カード全体が <a> のため
   a:hover の色変化がそのまま効いてしまう点にも注意。 */
.blog-card {
  display: flex;
  flex-direction: column;
}
.blog-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.blog-card__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.blog-card__date {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.blog-card__org {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(2, 128, 144, 0.1);
  color: var(--accent);
}
.blog-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.5;
}
.blog-card__excerpt {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-top: auto;
}

/* 「もっと見る」で隠しているカードとボタン（.blog-card・.section__more の display より優先する） */
[data-nkk-more-list] > [hidden],
[data-nkk-more-wrap][hidden] { display: none; }

/* 記事が0件のときの「準備中」（企業・団体の活動ブログで共通）。
   HTML版 blog/organization.html の style 属性の値をそのまま移したもの。 */
.blog-empty { grid-column: 1/-1; text-align: center; padding: 64px 0; }
.blog-empty__lead { font-size: 1.1rem; color: var(--text-sub); }
.blog-empty__soon { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-top: 8px; }