/*
 * 2026-10-31 東京UBA：メンバー（一覧・個別）のブラッシュアップ ⑧ の見た目（仕組みは uba/fx-members.php）
 * - 人間「他のページもどんどんブラッシュアップしていこう。デザイン、アニメーション提案して欲しい」→ 提案①〜⑪を全部
 * - D5 座右の銘を白い地に（左に活動の写真、右に縦書き）／D1 顔の壁は1回だけの波／D2 カードに業種・組合名を2行・役職ごとの段
 * - 動く前に隠す指定は html.uba-js の下だけ（動きを減らす設定・JS なしでは最初から完成形）
 * - 色はロゴの青 var(--uba-brand)・深い青 var(--uba-brand-deep)・淡い青 var(--uba-brand-pale)・文字 var(--uba-brand-ink)
 */

/* ---------- D5 個別：座右の銘（白い地に、左に活動の写真・右に縦書き） ---------- */
.uba22-motto { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:40px; max-width:1200px; margin:0 auto; padding:8px 5vw 0; box-sizing:content-box; background:#fff; }
.uba22-motto.has-photo { grid-template-columns:minmax(0,1.2fr) minmax(max-content,1fr); justify-items:stretch; align-items:center; gap:clamp(40px,6vw,96px); }
.uba22-motto__photo { position:relative; display:block; width:100%; aspect-ratio:4/3; max-height:min(72vh,640px); margin:0; padding:0; border:0; border-radius:24px; overflow:hidden; background:var(--uba-brand-pale); cursor:zoom-in; }
.uba22-motto__photo.is-tall { aspect-ratio:1/1; }
.uba22-motto__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.uba22-motto__photo:focus-visible { outline:3px solid var(--uba-brand); outline-offset:4px; }
.uba22-motto__words { display:flex; flex-direction:column; align-items:center; gap:28px; min-width:0; }
.uba22-motto__label { margin:0; font-size:13px; font-weight:700; line-height:1.4; letter-spacing:.24em; color:var(--uba-brand); }
/* 縦書きの言葉（右）と本人の名前（左・下そろえ）を横に並べる */
.uba22-motto__vert { display:flex; flex-direction:row-reverse; align-items:flex-end; gap:16px; }
.uba22-motto__text { margin:0; padding:0; border:0; background:none; box-shadow:none; writing-mode:vertical-rl; inline-size:calc(var(--len, 8) * 1.14em + .3em); font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif; font-size:max(24px, min(calc(clamp(28px,3.2vw,46px) * var(--uba22-big)), calc((100vh - 220px) / (var(--len, 8) * 1.14 + .3)))); font-style:normal; font-weight:600; line-height:1.9; letter-spacing:.14em; text-align:start; color:var(--uba-brand-deep); }
/* 短い言葉（「気は心」「力愛不二」など）は、写真に負けないよう少し大きく（いちばん長い列が9字以上なら等倍、短いほど大きく・最大1.4倍） */
.uba22-motto { --uba22-big:clamp(1, calc(9 / var(--len, 8)), 1.4); }
.uba22-motto__text:before, .uba22-motto__text:after { content:none; display:none; }
.uba22-motto__text p { margin:0; padding:0; font:inherit; letter-spacing:inherit; color:inherit; }
/* 別の言葉（改行や「・」で分けたもの）のあいだは、少し広くあける。列の分け方は tokyo_uba_motto_lines のまま */
.uba22-motto__text p + p { margin-block-start:1.1em; }
/* 1列＝1つの span（右の列から --c が 0,1,2…）。列の長さは字の数だけ（書かれる速さを列ごとにそろえる） */
.uba22-motto__col { display:block; inline-size:fit-content; }
.uba22-motto__by { margin:0; writing-mode:vertical-rl; font-size:15px; font-weight:700; line-height:1.4; letter-spacing:.2em; color:var(--uba-brand-ink); white-space:nowrap; }
.uba22-motto__by:before { content:''; display:inline-block; inline-size:2em; block-size:1px; margin-inline-end:.8em; background:currentColor; opacity:.45; vertical-align:middle; }

/* 動き：右の列から順に、上から下へ書かれる（1列0.5秒・列の間は --step、PHP で全体2.4秒以内に）→ 0.3秒後に名前が置かれる */
html.uba-js .uba22-motto:not(.is-play) .uba22-motto__col { clip-path:inset(0 0 100% 0); }
html.uba-js .uba22-motto:not(.is-play) .uba22-motto__by { opacity:0; }
html.uba-js .uba22-motto.is-play .uba22-motto__col { animation:uba22Write .5s cubic-bezier(.45,.1,.4,1) backwards; animation-delay:calc(var(--c, 0) * var(--step, .65s)); }
html.uba-js .uba22-motto.is-play .uba22-motto__by { animation:uba22Place .4s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:var(--by, 1s); }
@keyframes uba22Write { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes uba22Place { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@media print {
  html.uba-js .uba22-motto .uba22-motto__col, html.uba-js .uba22-motto .uba22-motto__by { clip-path:none !important; opacity:1 !important; animation:none !important; }
}

/* ---------- 個別：前後のメンバー・小さな札の地（ベージュ → 淡い青） ---------- */
.uba4-pager__item { background:var(--uba-brand-pale); }
.uba4-phero__tags li, .uba4-work__biz li { background:var(--uba-brand-pale); }
/* 写真が出るまでの地も、ベージュでなく淡い青に（一覧のカード・顔の壁・活動の記録） */
.uba4-card__media, .uba4-wall__tile, .uba4-scenes__item { background:var(--uba-brand-pale); }
/* 一覧：役職の絞り込みボタンの数字の札も、ベージュでなく淡い青に（点検 R3-4。押したボタンの札は style.css のまま白の半透明） */
.uba4-filter button span { background:var(--uba-brand-pale); }
/* 一覧：顔の壁の名前の札の地を、黒に近い青緑 rgba(15,41,48,.84) → ロゴの深い青に（点検 R6-9。style.css は直さずここで上書き） */
.uba4-wall__name { background:rgba(45,94,149,.9); }

/* ---------- D1 一覧：顔の壁（1回だけの波。写真が間に合わなかった顔は名前の札だけ） ---------- */
.uba4-wall__tile.uba22-nameonly .is-scene { opacity:0 !important; }

/* ---------- D2 一覧：カードの業種・組合名の2行 ---------- */
.uba22-card__trade { display:flex; align-items:center; gap:6px; min-width:0; margin-bottom:2px; font-size:12px; font-weight:700; line-height:1.4; letter-spacing:.04em; color:var(--uba2-muted); }
.uba22-card__trade svg { flex:none; width:18px; height:18px; color:var(--uba-brand); }
.uba22-card__trade span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 折り返すのは言葉の切れ目（PHP で入れた <wbr> と空白）だけ。2行になるときは長さをそろえる */
.uba4-card__org .uba22-org__main, .uba4-card__org .uba22-org__sub { display:block; word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }
.uba4-card__org .uba22-org__sub { font-size:12px; color:var(--uba2-muted); }
/* 頭の「公益社団法人」「協同組合」のあとの名前はひとかたまり（入りきらないときは、法人の種類のあとで折り、名前は次の行から） */
.uba4-card__org .uba22-org__rest { display:inline-block; max-width:100%; vertical-align:top; }

/* ---------- D2 一覧：役職ごとの段（左に縦書きの役職名。加盟組合一覧の .uba9-group と同じ組み方） ---------- */
.uba22-roles { max-width:1280px; margin:0 auto; padding:0 5vw; box-sizing:content-box; }
.uba22-role { display:grid; grid-template-columns:56px minmax(0,1fr); gap:0 32px; padding:44px 0 56px; border-top:1px solid var(--uba2-line); }
.uba22-role:first-child, .uba22-role.is-first { padding-top:8px; border-top:0; }
.uba22-role[hidden] { display:none; }
/* 絞り込みで選んだ役職の段が無いとき（uba/fx-members.php の is-mixed）は、段の見出しを出さない（ほかの役職の見出しの下に見せないため） */
.uba22-roles.is-mixed .uba22-role__label { visibility:hidden; }
/* PC：段を読んでいるあいだ、上に貼りつく絞り込みの帯（.uba4-filter）のすぐ下に残り、段が終わると一緒に流れていく */
.uba22-role__label { position:sticky; top:calc(var(--tcd-header-message-height, 0px) + 100px + var(--uba22-fh, 68px) + 20px); align-self:start; justify-self:start; margin:0; padding:2px 0 4px 14px; border:0; border-left:2px solid var(--uba-brand); background:none; writing-mode:vertical-rl; font-size:17px; font-weight:700; line-height:1.2; letter-spacing:.2em; color:var(--uba-brand-ink); }
.uba22-role__label:before, .uba22-role__label:after { content:none; display:none; }
.uba22-role .uba4-grid { max-width:none; margin:0; padding:0; }

/* PC：左端の縦書きのキャッチ（#side_copy）と重ならないよう、左右の余白を最低96pxに（style.css の uba4-* と同じ） */
@media (min-width:1001px) {
  .uba22-roles, .uba22-motto { padding-left:max(5vw,96px); padding-right:max(5vw,96px); }
}

@media (max-width:900px) {
  /* 座右の銘：写真が上、縦書きが下。文字の大きさは列の数で決める（今までどおり） */
  .uba22-motto, .uba22-motto.has-photo { grid-template-columns:minmax(0,1fr); justify-items:stretch; gap:36px; padding:0 20px; }
  .uba22-motto__photo { max-height:none; border-radius:16px; }
  .uba22-motto__photo.is-tall { aspect-ratio:4/5; }
  .uba22-motto__words { gap:22px; }
  .uba22-motto__vert { gap:12px; }
  .uba22-motto__text { font-size:min(calc(clamp(26px,8.6vw,38px) * var(--uba22-big)), calc((100vw - 92px) / (var(--cols, 1) * 1.9))); }
  .uba22-motto__by { font-size:13px; }
  /* 役職の段：縦書きの役職名は段の上に（縦書きのまま） */
  .uba22-roles { padding:0 20px; }
  .uba22-role { grid-template-columns:minmax(0,1fr); gap:16px 0; padding:32px 0 40px; }
  .uba22-role:first-child, .uba22-role.is-first { padding-top:4px; }
  .uba22-role__label { position:static; font-size:15px; }
  .uba22-role .uba4-grid { padding:0; }
}
/* 絞り込みのボタンを押したとき・?role= 付きで開いたとき、段が隠れて高さが変わっても、
   ブラウザが見ている位置を勝手に合わせ直さない（合わせ直すとフッターまで飛んで、絞り込んだカードが画面の外に出る） */
body.post-type-archive-voice { overflow-anchor:none; }