/* ===========================
   BLOG LAYOUT COMPONENT
   Root:   .blog-layout
   Prefix: bl-
=========================== */


/* ===========================
   ヒーローイメージ
=========================== */
.hero{
    position: relative;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1200 / 353;
    background: #000;
    overflow: hidden;
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero__slide.is-active {
  opacity: 1;
}



/* ===========================
   MAIN（左カラム）
=========================== */
.bl-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bl-section {
  /* border: 1px solid #ddd; */
}


/* ===========================
   ARTICLE LIST
=========================== */
.bl-article {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 12px;
  border-bottom: 1px solid #e8e8e8;
}

.bl-article:last-child {
  border-bottom: none;
}

.bl-article__date {
  font-size: 12px;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 72px;
}

.bl-article__title {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  transition: color 0.15s;
}

.bl-article__title:hover {
  color: #1a5fa0;
  text-decoration: underline;
}

/* ===========================
   RESPONSIVE
=========================== */

/* Tablet (768px〜1023px): サイドバー幅を縮小 */
@media (max-width: 1023px) {
  .bl-sidebar {
    width: 240px;
  }
}

/* Mobile (〜767px) */
@media (max-width: 767px) {

  /* サイドバー: 全幅に */
  .bl-sidebar {
    width: 100%;
  }

  /* 記事リスト: 日付とタイトルを折り返し可能に */
  .bl-article {
    flex-wrap: wrap;
    gap: 2px 12px;
  }

  .bl-article__date {
    min-width: auto;
  }

  /* ピックアップ記事画像: 少し縮小 */
  .bl-pickup__link img {
    width: 72px;
    height: 52px;
  }
}