/* ===== TB Works Mosaic：施工実績の写真一覧（ヨコ3列×タテ5行） =====
   置いたブロックの幅いっぱい。目地（--tb-wm-gap）はタテ・ヨコ同じ。
   写真の縦横比はすべて同じ（--tb-wm-ratio）。はみ出す部分は切り取って枠を埋める。 */
.tb-wmosaic{
  display: grid;
  grid-template-columns: repeat(var(--tb-wm-cols, 3), minmax(0, 1fr));
  gap: var(--tb-wm-gap, 3px);
  width: 100%;
  margin: 0;
}
.tb-wmosaic, .tb-wmosaic *{ box-sizing: border-box; }
.tb-wmosaic__item{
  display: block; position: relative; overflow: hidden;
  aspect-ratio: var(--tb-wm-ratio, 4 / 3);
  background: var(--bg2, #f4f3f1);
  text-decoration: none !important; border: 0 !important;
}
.tb-wmosaic__img{
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1 !important; /* 画像の遅延読み込みの「読み込み前は透明」で消えないように */
  transition: transform .9s cubic-bezier(.33,0,.15,1), filter .6s ease;
}
/* マウスを乗せたとき：少しだけ拡大して明るく */
.tb-wmosaic__item:hover .tb-wmosaic__img,
.tb-wmosaic__item:focus-visible .tb-wmosaic__img{
  transform: scale(1.04); filter: brightness(1.05);
}
.tb-wmosaic__item:focus-visible{ outline: 2px solid var(--brick, #b5754a); outline-offset: 2px; }
/* 「→」の自動付与（子テーマの .tb-more）や、テーマのリンクの下線が付かないように */
.tb-wmosaic__item::after{ content: none !important; }

@media (prefers-reduced-motion: reduce){
  .tb-wmosaic__img{ transition: none; }
}
