/* 医療コラム一覧（キー column。Figma 医療コラム_PC 1604:218676・SP）
   パンくず・題名・ページ送りは assets/nn/news/style.css（先に読み込む）。
   カード：3列（352×334・間 32）→ 1024px 以下 2列（最後の1枚は幅を変えず中央）→ スマホ 1列
   ホバー（PC だけ・0.3秒／Ease Out）：半透明の白い地と影・写真をわずかに拡大（注意書き「コラムカード」） */

.nn-col { width: min(var(--nn-inner), 100% - var(--nn-gutter) * 2); margin-inline: auto; padding-bottom: 120px; }

.nn-col-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
.nn-col-list > li { width: calc((100% - 64px) / 3); min-width: 0; }
.nn-col-card {
  display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 334px;
  padding: 20px; border-radius: 10px;
  transition: background-color .3s ease-out, box-shadow .3s ease-out;
}
.nn-col-card-img {
  position: relative; display: block; aspect-ratio: 312 / 208;
  border-radius: 10px; overflow: hidden; background: var(--color-background-sub, #f7ece4);
}
.nn-col-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
.nn-col-card-meta { display: flex; align-items: center; gap: 8px; height: 16px; }
.nn-col-card-meta time { font-family: var(--nn-ff-en); font-size: 16px; line-height: 1; letter-spacing: .05em; }
.nn-col-card-cat {
  padding: 2px 4px; border-radius: 3px; background: var(--nn-accent); color: var(--nn-white);
  font-size: 12px; line-height: 1; letter-spacing: .1em; white-space: nowrap;
}
/* タイトルは 2 行まで。収まらなければ末尾を「…」に（注意書き） */
.nn-col-card-title {
  display: -webkit-box; margin: -4px 0 0; overflow: hidden;
  font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: .1em;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.nn-col-empty { text-align: center; }

.nn-main--column .nn-pager { margin-top: 80px; }

@media (hover: hover) {
  .nn-col-card:hover { background: rgb(255 255 255 / .6); box-shadow: var(--nn-shadow-card); }
  .nn-col-card:hover .nn-col-card-img img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .nn-col-card-img img { transition: none; }
}

@media (max-width: 1200px) { .nn-col-card-title { font-size: 16px; } }
@media (max-width: 1100px) { .nn-col-card-title { font-size: 15px; letter-spacing: .08em; } }
@media (max-width: 1024px) {
  .nn-col-list { gap: 24px; }
  .nn-col-list > li { width: calc((100% - 24px) / 2); }
  .nn-col-card-title { font-size: 17px; letter-spacing: .05em; }
}

@media (max-width: 767px) {
  .nn-col { width: calc(100% - 40px); padding-bottom: 74px; }
  .nn-col-list { gap: 16px; margin-top: 24px; }
  .nn-col-list > li { width: 100%; }
  .nn-col-card-title { font-size: 18px; letter-spacing: .1em; }
  /* ページ送り（SP：丸 24・押せる所は 44×44） */
  .nn-main--column .nn-pager { margin-top: 66px; }
  .nn-main--column .nn-pager-num { width: 24px; height: 24px; }
}