/* ===== TB Appeal Uses：「レンガの魅力」4つの使い方（本体のみ） =====
   見出しはSWELLのブロック側。ここでは .tb-uses の中だけを扱う。
   ・4列。写真の間隔はファーストビュー（tb-appeal-grid）と同じ3px。
   ・各列は「写真・番号・名前・効果のひと言・説明・施工実績リンク」の6段。
     4列で段をそろえる（subgrid）ので、説明の行数が違っても、
     効果のひと言・説明の書き出し・施工実績リンクの高さがそろう。
   ・色・フォントは base.css の変数を使う（ない場合の値も指定）。
===== */
.tb-uses{
  --u-ink:   var(--ink,  #26221f);
  --u-ink2:  var(--ink2, #645e57);
  --u-ink3:  var(--ink3, #9a948c);
  --u-line:  var(--line, #e2ded8);
  --u-bg2:   var(--bg2,  #f4f3f1);
  --u-brick: var(--brick-ink, #93573a);
  --u-main:  var(--brick, var(--color_main, #b5754a)); /* カスタマイザーのメインカラー */
  --u-jp:    var(--serif-jp, 'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif);
  --u-en:    var(--serif-en, 'Cormorant Garamond','Times New Roman',serif);

  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  column-gap:3px; row-gap:0;
  margin-top:64px;
}
.tb-uses, .tb-uses *{ box-sizing:border-box; }

/* 1列＝6段。subgrid で4列の段をそろえる */
.tb-uses__item{
  display:grid;
  grid-row:span 6;
  grid-template-rows:subgrid;
  align-content:start;
  min-width:0;
}
/* subgrid が使えない古いブラウザ：縦に並べ、リンクだけ下端にそろえる */
@supports not (grid-template-rows:subgrid){
  .tb-uses__item{ display:flex; flex-direction:column; }
  .tb-uses__link{ margin-top:auto; }
}

/* 写真 */
.tb-uses__ph{
  position:relative; overflow:hidden;
  aspect-ratio:3/4.4;
  background:var(--u-bg2);
}
.tb-uses__img{
  display:block; width:100%; height:100%; object-fit:cover;
  opacity:1 !important; /* 画像の遅延読み込みの「読み込み前は透明」指定で消えないように（2026-10-13） */
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.tb-uses__item:hover .tb-uses__img{ transform:scale(1.035); }

/* 文字（右側に少し余白を取り、隣の列の文字と離す） */
.tb-uses__num,
.tb-uses__name,
.tb-uses__kw,
.tb-uses__desc,
.tb-uses__link{ margin:0; padding-right:16px; }

.tb-uses__num{
  padding-top:22px;
  font-family:var(--u-en); font-size:13px; letter-spacing:.08em; line-height:1.6;
  color:var(--u-ink3);
}
#body_wrap .tb-uses__name,
.tb-uses__name{
  margin:4px 0 0; padding:0 16px 0 0;
  background:none; border:0; box-shadow:none;
  font-family:var(--u-jp); font-size:18px; font-weight:600;
  letter-spacing:.04em; line-height:1.55; color:var(--u-ink);
}
#body_wrap .tb-uses__name::before,
#body_wrap .tb-uses__name::after{ content:none; display:none; }
.tb-uses__kw{
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--u-line);
  margin-right:16px; padding-right:0;
  font-family:var(--u-jp); font-size:16px; font-weight:500; /* 名前18px と説明13.5px の中間（2026-10-13） */
  line-height:1.6; letter-spacing:.02em; color:var(--u-main); /* メインカラー（2026-10-26） */
}
.tb-uses__desc{
  margin-top:8px;
  font-size:13.5px; line-height:1.95; letter-spacing:.02em; color:var(--u-ink2);
}
.tb-uses__link{
  align-self:end; justify-self:start;
  margin:18px 16px 0 0; padding:0 0 3px;
  font-size:13px; line-height:1.6; letter-spacing:.02em;
  color:var(--color_link, var(--u-brick)) !important; text-decoration:none !important; /* リンク色（2026-10-13） */
  border-bottom:1px solid currentColor;
  transition:opacity .2s;
}
.tb-uses__link::after{ content:" →"; }

/* 写真・名前・ひと言のリンク（「〇〇施工実績を見る」と同じリンク。2026-11-11）
   見た目は今のまま（色・下線を変えない）。マウスを乗せると少し薄くなる。写真は列に乗せると少し拡大（上の指定）。 */
.tb-uses a.tb-uses__to{
  color:inherit !important; text-decoration:none !important;
  background:none; box-shadow:none; transition:opacity .2s;
}
.tb-uses a.tb-uses__to--ph{ display:block; width:100%; height:100%; }
.tb-uses__name a.tb-uses__to:hover,
.tb-uses__kw a.tb-uses__to:hover{ opacity:.7; }
.tb-uses__link:hover{ opacity:.7; }

/* タブレット：2列×2段
   ※ subgrid のままだと、カードの間の余白（row-gap）が、各カードの中の段と段の間にも
     入ってしまい、写真・番号・名前…の間が大きく空く。タブレット・スマホでは subgrid をやめ、
     カードの中は縦に並べるだけにする（2026-11-10 修正）。 */
@media (max-width:900px){
  .tb-uses{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:48px; margin-top:44px; }
  .tb-uses__item{ display:flex; flex-direction:column; grid-row:auto; }
  .tb-uses__link{ margin-top:auto; align-self:flex-start; } /* 下端にそろえる・左寄せ（PC の align-self:end は縦並びだと右寄せになるため） */
  .tb-uses__desc{ margin-bottom:18px; }   /* リンクとの間（PC の 18px と同じ） */
}
/* スマートフォン：1列。写真は横長にして縦を詰める */
@media (max-width:540px){
  .tb-uses{ grid-template-columns:1fr; row-gap:44px; }
  .tb-uses__ph{ aspect-ratio:4/3; }
  .tb-uses__num, .tb-uses__name, .tb-uses__desc, .tb-uses__link{ padding-right:0; }
  .tb-uses__kw{ margin-right:0; }
}
@media (prefers-reduced-motion:reduce){
  .tb-uses__img{ transition:none; }
}