@import url("rn-archive-filter.css");
/* 技術コラム 一覧（archive-column.php）— 先頭1件を暗い地の大きなカード、残りは3列のアイキャッチ付きカード
   デザイン: build_a_sub5.py column_list()。絞り込み帯は rn-archive-filter.css */

.rn-col-feature { --rn-tombo: var(--rn-gold); display: flex; gap: 48px; padding: 40px 44px; background: var(--rn-ink); color: #fff; transition: opacity .2s; }
.rn-col-feature:hover { opacity: .94; }
.rn-col-feature__img { width: 520px; height: 300px; flex-shrink: 0; overflow: hidden; background: var(--rn-ink2); }
.rn-col-feature__img img { width: 100%; height: 100%; object-fit: cover; }
.rn-col-feature__body { display: block; flex: 1; min-width: 0; }
.rn-col-feature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.rn-col-feature__new { padding: 2px 9px; background: var(--rn-gold); color: var(--rn-ink); font-size: 11px; }
.rn-col-feature__title { display: block; margin-top: 18px; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.45; color: #fff; }
.rn-col-feature__title span { font-size: .69em; color: var(--rn-sub-dark); }
.rn-col-feature__excerpt { display: -webkit-box; margin-top: 16px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 14px; line-height: 1.9; color: var(--rn-sub-dark); }
.rn-col-feature__arrow { align-self: flex-end; color: var(--rn-gold-on-dark); }
.rn-col-feature__arrow .rn-arrow { width: 22px; height: 22px; }

.rn-col-cards { gap: 16px; margin-top: 16px; }
.rn-col-feature + .rn-col-cards { margin-top: 16px; }
.rn-col-cards > li { display: flex; }
.rn-col-cards .rn-card { width: 100%; }
.rn-col-cards .rn-card__img { aspect-ratio: auto; height: 200px; }
.rn-col-cards .rn-card__body { padding: 22px 26px 20px; }
.rn-col-cards .rn-card__title { font-size: 16.5px; line-height: 1.6; }
.rn-card__sub { font-size: 13.5px; font-weight: 400; color: var(--rn-sub-light); }
.rn-card__excerpt { display: -webkit-box; margin-top: 10px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; line-height: 1.8; color: var(--rn-sub-light); }

@media (max-width: 1100px) {
  .rn-col-feature { gap: 32px; padding: 32px; }
  .rn-col-feature__img { width: 44%; height: auto; aspect-ratio: 16 / 10; }
  .rn-col-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rn-col-feature { flex-direction: column; gap: 20px; padding: 28px 22px 24px; }
  .rn-col-feature__img { width: 100%; }
  .rn-col-feature__title { margin-top: 12px; font-size: 21px; }
  .rn-col-cards { grid-template-columns: 1fr; }
  .rn-col-cards .rn-card__img { height: auto; aspect-ratio: 16 / 10; }
}