/* works（作品ページ）。実測は measured/works.md（本番 1230 幅）
 *   Group C: margin-top 200（幅 500 未満は 150）・max 1080・中央寄せの行（折り返す）
 *     写真の列（Group 画像）: 最小 350・最大 500。写真は幅いっぱい・縦は比のまま・下 5
 *     文字の列（Group 文字）: 左 70・最大 35%（1080 なら 378）。幅 500 未満は 左右 20・上 20・最小 350 → 写真の下へ
 *   取引先・作品名 14px/2.5 字間 3px primary（作品名は上 30）。説明 12px/2.5 黒（上 25）
 *   線 25x1 黒（上下 40）。クレジット 12px/2.5 字間 1px 黒
 *   タグ（select2 の札）: 上 20・左 -5・左右 padding 5。札は padding 3/5・右と上 5・枠 2px・角 5・地も primary
 *     文字 10px/10px 600 白 → 高さ 20。並びは 25 刻み
 */
.wk {
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  width: 100%; max-width: 1080px; margin: 200px auto 0;
}
.wk-imgs { flex: 1 1 350px; min-width: 350px; max-width: 500px; display: flex; flex-direction: column; }
/* 本番は画像の箱が正方形（CDN に w=512,h=512,fit=contain で頼み、要素は 1:1。2026-10-05 実測 447x447・500x500）。
   今の写真は全部ほぼ正方形（48作品 209枚で縦横比の差 5% 以内）なので、箱を 1:1 にして中身は contain */
.wk-img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; margin-bottom: 5px; }
.wk-txt { flex: 1 1 0; min-width: 0; max-width: 35%; margin-left: 70px; display: flex; flex-direction: column; align-items: stretch; }
.wk-client, .wk-name { font-size: 14px; line-height: 2.5; letter-spacing: 3px; color: var(--c-primary); white-space: pre-wrap; }
.wk-name { margin-top: 30px; }
.wk-note { margin-top: 25px; font-size: 12px; line-height: 2.5; white-space: pre-wrap; }
.wk-rule { align-self: flex-start; width: 25px; height: 1px; margin: 40px 0; border: 0; background: var(--c-text); flex: 0 0 auto; }
.wk-credit { font-size: 12px; line-height: 2.5; letter-spacing: 1px; white-space: pre-wrap; }
.wk-tags {
  list-style: none; margin: 20px 0 0 -5px; padding: 0 5px; display: flex; flex-wrap: wrap; align-content: flex-start;
  min-height: 80px;
}
.wk-tags li {
  flex: 0 0 auto; margin: 5px 5px 0 0; padding: 3px 5px; border: 2px solid var(--c-primary); border-radius: 5px; background: var(--c-primary);
  color: var(--c-bg); font-size: 10px; line-height: 10px; font-weight: 600; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;   /* select2 と同じ。狭い列では札が列幅で切れる（本番 614 幅で実測） */
}

@media (max-width: 499.98px) {
  .wk { margin-top: 150px; }
  .wk-imgs { margin: 0 20px; }
  .wk-txt { margin: 20px 20px 0; min-width: 350px; max-width: none; }
}