/* ============================================================
   Column Hero (column/index.html)
   ============================================================ */
.column-hero {
  background: var(--bg-light);
  padding: 64px 0 56px;
}
.column-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.column-hero-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--primary);
  margin-bottom: 14px;
}
.column-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 20px;
}
.column-hero-desc {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--color-text-primary);
}
.sp-br {
  display: none;
}

@media (max-width: 768px) {
  .column-hero {
    padding: 48px 0 40px;
  }
  .column-hero-desc {
    font-size: 0.95rem;
    text-align: left;
  }
  .sp-br {
    display: inline;
  }
}

/* ============================================================
   column-hero 直後の section の上余白を column-hero と統一
   - column-hero 上 64px に合わせて、続く ARTICLES セクションも上 64px
   ============================================================ */
.column-hero + .section {
  padding-top: 64px;
}
@media (max-width: 768px) {
  .column-hero + .section {
    padding-top: 48px;
  }
}

/* ============================================================
   コラム一覧の記事タイトル強調（のっぺり防止）
   - 核心キーワードに <strong> で黄色マーカー
   - 副題は <span class="insights-subtitle"> で一段下げる
   ============================================================ */
.column-article-list .insights-title {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.65;
}
.column-article-list .insights-title strong {
  background: linear-gradient(transparent 60%, rgba(255, 230, 0, 0.5) 60%);
  font-weight: 800;
  padding: 0 2px;
}
.column-article-list .insights-subtitle {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-light);
}