/* ==========================================================================
   TB Works Display — コラム一覧（[tb_works_display type="column"]）
   色はSWELLのカスタマイザー設定（--color_text / --color_main）に従う。角はピン角。
   ========================================================================== */
.tb-col-archive{ max-width:1200px; margin:0 auto; padding:2rem 0 4rem; box-sizing:border-box; color:var(--color_text,#26221f); }
.tb-col-archive *{ box-sizing:border-box; border-radius:0; }

/* 見出し */
.tb-col-head{ margin:0 0 2rem; }
.tb-col-head .eyebrow{ font-size:.8rem; letter-spacing:.2em; color:var(--color_main,#b5754a); margin:0 0 .4rem; }
.tb-col-head h1{ font-size:1.8rem; line-height:1.4; margin:0 0 1.2rem; }
.tb-col-head .desc{ font-size:.95rem; margin:0; }

/* カテゴリーのボタン（8〜9個でも折り返して並ぶ） */
.tb-col-tabs{ display:flex; flex-wrap:wrap; gap:.25rem .2rem; margin:0 0 1.8rem; padding-bottom:.6rem; border-bottom:1px solid rgba(0,0,0,.14); }
.tb-col-tab{
  display:inline-block; padding:.5em 1em; font-size:.92rem; line-height:1.4; white-space:nowrap;
  color:#8a8175; text-decoration:none; transition:color .2s, background-color .2s;
}
.tb-col-tab:hover{ color:var(--color_text,#26221f); }
.tb-col-tab.is-on{ background:var(--color_text,#26221f); color:#fff; }

/* photo：アイキャッチ付きカード（3列） */
.tb-col-photo .tb-col-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem 1.5rem; }
.tb-col-card{ display:block; color:inherit; text-decoration:none; }
.tb-col-card .thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#f4f3f1; }
.tb-col-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.tb-col-card:hover .thumb img{ transform:scale(1.04); }
.tb-col-card .thumb.is-noimg{ border:1px solid rgba(0,0,0,.08); }
.tb-col-card .cat{
  position:absolute; top:0; right:0; padding:.3em .8em; font-size:.75rem; line-height:1.5;
  background:var(--color_main,#b5754a); color:#fff;
}
.tb-col-card h3{ font-size:1rem; line-height:1.6; margin:.8rem 0 .3rem; }
.tb-col-card:hover h3{ color:var(--color_main,#b5754a); }
.tb-col-card time{ font-size:.78rem; color:#8a8175; }

/* letter：文字だけのリスト（日付・カテゴリー・タイトル） */
.tb-col-letter .tb-col-list{ border-top:1px solid rgba(0,0,0,.14); }
.tb-col-row{
  display:grid; grid-template-columns:6.5rem 10rem 1fr; gap:1rem; align-items:baseline;
  padding:1.1rem .2rem; border-bottom:1px solid rgba(0,0,0,.14); color:inherit; text-decoration:none;
}
.tb-col-row time{ font-size:.82rem; color:#8a8175; }
.tb-col-row .cat{ font-size:.8rem; color:var(--color_main,#b5754a); }
.tb-col-row .ttl{ font-size:1rem; line-height:1.6; }
.tb-col-row:hover .ttl{ color:var(--color_main,#b5754a); }

.tb-col-empty{ color:#8a8175; margin:2rem 0; }

/* ページ送り（施工実績と同じ形） */
.tb-col-archive .tb-pager{ margin:2.8rem auto 0; display:flex; justify-content:center; gap:.4rem; flex-wrap:wrap; }
.tb-col-archive .tb-pager .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; height:2.4rem; padding:0 .6rem; border:1px solid #ddd; text-decoration:none; color:#333; font-size:.9rem; background:none; box-shadow:none; }
.tb-col-archive .tb-pager a.page-numbers:hover{ background:#f3efe9; }
.tb-col-archive .tb-pager .page-numbers.current{ background:#111; color:#fff; border-color:#111; }
.tb-col-archive .tb-pager .page-numbers.dots{ border:0; }

@media (max-width:960px){
  .tb-col-photo .tb-col-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .tb-col-photo .tb-col-list{ grid-template-columns:1fr; }
  /* スマホ：ボタンは1行で横スクロール */
  .tb-col-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tb-col-tabs::-webkit-scrollbar{ display:none; }
  .tb-col-row{ grid-template-columns:1fr; gap:.2rem; }
}