/*
 * 2026-10-31 東京UBA：加盟組合の一覧（/organizations/、固定ページ 64）のブラッシュアップ ⑦ の見た目と動き
 * - 人間「他のページもどんどんブラッシュアップしていこう。デザイン、アニメーション提案して欲しい」→ 提案①〜⑪を全部
 * - 仕組みは uba/fx-organizations.php（C2 カードの業種アイコン・C3 同じテーブル）。style.css のあとに読む
 * - 動く前に隠す・ずらすのは html.uba-js のときだけ。それ以外（動きを減らす設定・JavaScript なし）は最初から完成形
 */

/* ---- C2 カードの業種アイコン（トップの「加盟する組合」と同じ線画。淡い青の丸に青い線） ---- */
html body.page-template-default .post_content .tcdce-body .uba21-card__top { display:flex; align-items:center; gap:10px; min-width:0; }
html body.page-template-default .post_content .tcdce-body .uba21-icon { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--uba-brand-pale); font-style:normal; line-height:1; color:var(--uba-brand); }
html body.page-template-default .post_content .tcdce-body .uba21-icon svg { display:block; width:22px; height:22px; }
@media (hover:hover) {
  html body.page-template-default .post_content .tcdce-body .uba21-icon { transition:background .25s ease, color .25s ease; }
  /* マウスを乗せてカードが青の面になったら、アイコンも白に */
  html body.page-template-default .post_content .tcdce-body .uba9-card:hover .uba21-icon { background:rgba(255,255,255,.18); color:#fff; }
}
/* 線を描く動き：図形の長さは pathLength="1"。描く前は線を隠し（dash 1・gap 2 を 1 ずらす）、is-draw で 0 に戻す */
html.uba-js body .uba21-icon.is-pend svg :is(path, circle, rect) { stroke-dasharray:1 2; stroke-dashoffset:1.02; }
html.uba-js body .uba21-icon.is-pend.is-draw svg :is(path, circle, rect) { stroke-dashoffset:0; transition:stroke-dashoffset .7s cubic-bezier(.5,0,.25,1) var(--uba21-d, 0ms); }

/* スマホ：4つの分類ボタンを2列×2段に（一覧までの距離を縮める） */
@media (max-width:700px) {
  html body.page-template-default .post_content .tcdce-body .uba9-jump { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  html body.page-template-default .post_content .tcdce-body .uba9-jump a { justify-content:center; gap:5px; min-width:0; padding:9px 6px; font-size:13px; letter-spacing:0; white-space:nowrap; }
}

/* ---- C3 同じテーブル：左の列に、一覧と同じ縦書きの分類名4本（右から 印刷・広告 → 暮らし・流通 の順） ---- */
html body.page-template-default .post_content .tcdce-body .uba21-table { display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:flex-start; gap:6px; margin:40px 0 0; }
html body.page-template-default .post_content .tcdce-body .uba21-table__name { display:block; padding:2px 0 4px 10px; border-left:2px solid var(--uba-brand); writing-mode:vertical-rl; font-family:var(--tcd-font-serif); font-size:24px; font-weight:600; line-height:1.2; letter-spacing:.14em; white-space:nowrap; color:var(--uba-brand-ink); }
/* 動く前：左の列の幅いっぱいに離れて立つ（寄る動きは JS で、離れた位置から並んだ位置へ） */
html.uba-js body .post_content .tcdce-body .uba21-table:not(.is-play) { justify-content:space-between; }
@media (max-width:900px) {
  html body.page-template-default .post_content .tcdce-body .uba21-table { margin-top:28px; }
  html body.page-template-default .post_content .tcdce-body .uba21-table__name { padding-left:8px; font-size:19px; letter-spacing:.1em; }
}

/* 写真：寄ったところから全体へ。切り抜きは中の枠（clip）で、角丸もこの枠に */
html body.page-template-default .post_content .tcdce-body .uba3-sec__body figure.uba21-photo { overflow:visible !important; }
html body.page-template-default .post_content .tcdce-body .uba21-frame { display:block; overflow:hidden; overflow:clip; border-radius:var(--uba2-radius, 12px); }
html body.page-template-default .post_content .tcdce-body .uba21-frame img { display:block; }
/* 2026-11-05 加盟組合の写真：端の人の顔が切れる 16:9 の写真は、3:2 に切り抜かず全体を出す（uba/organizations.php の 'photo' の3つ目が 'whole'）
   aspect-ratio:auto だと高さが 1500px に伸びるので、比を書く */
html body.page-template-default .post_content .tcdce-body .uba3-sec__body figure.uba-org-photo.is-whole img { aspect-ratio:16 / 9 !important; }
/* 画面に入ったら1回だけ引く（どのブラウザでも同じ。スクロールに連動させない＝上下しても動き直さない。2026-10-31 点検 R7-4）
   印は uba21-in（is-in は uba/motion.php のふわっと出る動きが figure に付けて外すので使わない） */
html.uba-js body .uba21-photo .uba21-frame img { transform:scale(var(--z)); transform-origin:var(--fx) var(--fy); transition:transform 1.4s cubic-bezier(.2,.7,.2,1); }
html.uba-js body .uba21-photo.uba21-in .uba21-frame img { transform:none; }

/* 見出しの「同じテーブル」の印は、写真が引き終わってから（共通の印 mark.uba-mark の is-on に、uba21-go がそろったとき） */
html.uba-js body .post_content .tcdce-body .uba21-tablesec mark.uba-mark:not(.uba21-go) { background-size:0% 100%; }