/* お役立ち記事の一覧 2026-10-05 T-20261005-07（既存の色・変数だけを使う） */
.col-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.col-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; font-size: 14px; font-weight: 700; color: var(--blue); background: #fff; border: 1.5px solid var(--blue); border-radius: 50px; transition: background .2s, color .2s; }
.col-tab span { font-size: 12px; font-weight: 500; opacity: .75; }
.col-tab:hover { background: #F2FAFE; }
.col-tab.is-on { color: #fff; background: var(--grad); border-color: transparent; }
.col-count { margin: 0 0 20px; font-size: 14px; color: var(--sub); }
.col-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.col-item[hidden] { display: none; }
.col-card { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 148px; padding: 20px 22px; background: #fff; border: 1.5px solid var(--line); transition: border-color .2s, background .2s; }
.col-card:hover { border-color: var(--blue); background: #F2FAFE; }
.col-card b { font-size: 15px; line-height: 1.7; color: var(--navy); }
.col-cat { align-self: flex-start; padding: 2px 10px; font-size: 12px; font-weight: 700; color: var(--blue); background: #F2FAFE; }
.col-card time { margin-top: auto; font-size: 12px; color: var(--sub); }
@media (max-width: 1000px) { .col-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .col-list { grid-template-columns: 1fr; } .col-card { min-height: 0; } .col-tab { padding: 8px 14px; font-size: 13px; } }