/* ==========================================================================
   2026-10-31 東京UBA：③ 東京UBAとは（固定ページ60）・⑤ 東京UBAの活動（固定ページ62）の見た目と動き
   - 人間「他のページもどんどんブラッシュアップしていこう。デザイン、アニメーション提案して欲しい」→ 全部
   - 仕組みは uba/fx-about-activities.php。style.css のあとに読む
   - 動く前に隠すのは html.uba-js があって、部品に .is-arm が付いた（script が動いた）ときだけ。それ以外は最初から完成形
   - 色：ロゴの青 var(--uba-brand)・深い青 var(--uba-brand-deep)・淡い青 var(--uba-brand-pale)・文字 var(--uba-brand-ink)
   - 動きは、行き過ぎ・弾みのない cubic-bezier(.2,.7,.2,1) で置かれて止まる（1回）。印だけは共通の印（mark.uba-mark）と同じ引き方
   - 2026-10-31 点検の直し：R7-3・R7-2（活動の最後の段は3行と印だけ）・R1-2（帯の題名を切らない）・R1-3（記録のリンクの言葉）・R1-5・R7-5（会長挨拶の箱の写真と、4枚の下のリンクを外す）
   ========================================================================== */

/* ---- 共通：本文の見出しは言葉の途中で折らない（折る所は本文側の <wbr>） ---- */
html body:is(.page-id-60, .page-id-62) .post_content .tcdce-body .uba3-sec__head h2 { word-break:keep-all; overflow-wrap:anywhere; line-break:strict; }

/* ==========================================================================
   ③ 東京UBAとは
   ========================================================================== */

/* ---- 仕組み：行き（01 02 03）・交わる（04 は 03 の真下）・帰り（05 は 01 の真下へ戻る） ---- */
html body.page-id-60 .post_content .tcdce-body .uba3-sec__body .uba-structure.uba19-flow { grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-areas:"a b c" "e e d"; gap:12px !important; }
html body.page-id-60 .post_content .tcdce-body .uba19-flow > div { background:var(--uba-brand-pale) !important; }
html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(1) { grid-area:a !important; }
html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(2) { grid-area:b !important; }
html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(3) { grid-area:c !important; }
html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(4) { grid-area:d !important; z-index:2; }
html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(5) { grid-area:e !important; z-index:1; }
/* カードが細いので、説明は文節の切れ目（本文側の <wbr>）で折る */
html body.page-id-60 .post_content .tcdce-body .uba19-flow > div :is(strong, span) { word-break:keep-all; overflow-wrap:anywhere; }
/* 03 東京UBA はロゴの青（style.css のまま）。05 の頭に、戻る向きの矢印 */
html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(5) strong::before { content:'←'; display:inline-block; margin-right:.45em; color:var(--uba-brand); font-weight:700; }
/* 古い「ABOUT PAGE tune-up」の線・ベージュ・青緑は使わない（念のため） */
html body.page-id-60 .post_content .tcdce-body .uba19-flow > div::after { content:none !important; }

@media (max-width:600px) {
  /* スマホ：1列。01〜04 は一段ずつ右へずれ、05 だけ左端へ戻る */
  html body.page-id-60 .post_content .tcdce-body .uba3-sec__body .uba-structure.uba19-flow { grid-template-columns:minmax(0,1fr) !important; grid-template-areas:none; gap:8px !important; overflow:clip; --uba19-back:30%; }
  html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:is(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5)) { grid-area:auto !important; }
  html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(2) { margin-left:12px !important; }
  html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(3) { margin-left:24px !important; }
  html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(4) { margin-left:36px !important; }
  html body.page-id-60 .post_content .tcdce-body .uba19-flow > div:nth-child(5) { margin-left:0 !important; }
}

/* 動き：01・02・03 が左から（0.3秒・0.2秒おき）→ 04 が右から 03 の下へ（0.4秒）→ 05 が左へ戻る（0.7秒）→ 印（0.9秒） */
html.uba-js body .uba19-flow.is-arm > div { opacity:0; }
html.uba-js body .uba19-flow.is-arm.is-play > div:nth-child(1) { animation:uba19Go .3s cubic-bezier(.2,.7,.2,1) both; }
html.uba-js body .uba19-flow.is-arm.is-play > div:nth-child(2) { animation:uba19Go .3s cubic-bezier(.2,.7,.2,1) .2s both; }
html.uba-js body .uba19-flow.is-arm.is-play > div:nth-child(3) { animation:uba19Go .3s cubic-bezier(.2,.7,.2,1) .4s both; }
html.uba-js body .uba19-flow.is-arm.is-play > div:nth-child(4) { animation:uba19Meet .4s cubic-bezier(.2,.7,.2,1) .7s both; }
html.uba-js body .uba19-flow.is-arm.is-play > div:nth-child(5) { animation:uba19Back .7s cubic-bezier(.2,.7,.2,1) 1.1s both; }
/* 「それぞれの場所へ持ち帰る」の印は、カードが止まってから */
html.uba-js body .post_content .tcdce-body .uba19-flow.is-arm:not(.is-done) + .uba-lead-copy mark.uba-mark { background-size:0% 100% !important; }
/* カードの transform は style.css で none !important のため、動きは translate で */
@keyframes uba19Go { from { opacity:0; translate:-28px 0; } to { opacity:1; translate:0 0; } }
@keyframes uba19Meet { from { opacity:0; translate:48px 0; } to { opacity:1; translate:0 0; } }
/* PC は 04 の後ろ（1列ぶん右）から、スマホは右から左端まで */
@keyframes uba19Back { 0% { opacity:0; translate:var(--uba19-back, calc(50% + 6px)) 0; } 30% { opacity:1; } 100% { opacity:1; translate:0 0; } }

/* ---- 令和8年度テーマ「行動」：作品は切らずに全体。上下の白い空きだけ詰める（画像の中の白：上 328px・下 468px／1600px） ---- */
html body.page-id-60 .post_content .tcdce-body .uba3-sec__body figure.uba19-kodo-art { border-radius:0; }
html body.page-id-60 .post_content .tcdce-body .uba3-sec__body figure.uba19-kodo-art img { width:100%; aspect-ratio:25 / 11 !important; object-fit:cover; object-position:50% 40%; border-radius:0; }

/* ---- 参加する。話す。訪ねる。試す。（実写真4枚。PC 横4枚・スマホ 2×2。言葉は写真の下） ---- */
html body.page-id-60 .post_content .tcdce-body .uba19-verbs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:32px 0 0 !important; padding:0; }
html body.page-id-60 .post_content .tcdce-body .uba3-sec__body .uba19-verbs > figure { margin:0 !important; border-radius:0; overflow:visible; }
html body.page-id-60 .post_content .tcdce-body .uba3-sec__body .uba19-verbs > figure > img { display:block; width:100%; height:auto; aspect-ratio:4 / 3 !important; object-fit:cover; border-radius:12px; }
html body.page-id-60 .post_content .tcdce-body .uba19-verbs figcaption { margin:10px 0 0; padding:0; font-size:16px; font-weight:700; line-height:1.5; letter-spacing:.06em; color:var(--uba-brand-ink); text-align:left; }
@media (max-width:600px) {
  html body.page-id-60 .post_content .tcdce-body .uba19-verbs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  html body.page-id-60 .post_content .tcdce-body .uba19-verbs figcaption { margin-top:8px; font-size:15px; }
}

/* ---- 組織概要：項目名と中身を同じ1本の線でそろえる（float をやめて2列の表に） ---- */
html body.page-id-60 .post_content .tcdce-body .uba-profile { border-top:1px solid var(--uba2-line); }
html body.page-id-60 .post_content .tcdce-body .uba-profile dl { display:grid; grid-template-columns:150px minmax(0,1fr); margin:0; padding:0; }
html body.page-id-60 .post_content .tcdce-body .uba-profile dl::after { content:none; display:none; }
html body.page-id-60 .post_content .tcdce-body .uba-profile :is(dt, dd) { float:none; clear:none; width:auto; min-height:0; margin:0; padding:18px 20px; border:0; border-bottom:1px solid var(--uba2-line); box-sizing:border-box; }
html body.page-id-60 .post_content .tcdce-body .uba-profile dt { color:var(--uba-brand); font-weight:700; }
@media (max-width:600px) {
  html body.page-id-60 .post_content .tcdce-body .uba-profile dl { grid-template-columns:minmax(0,1fr); }
  html body.page-id-60 .post_content .tcdce-body .uba-profile dt { padding:16px 4px 2px; border-bottom:0; }
  html body.page-id-60 .post_content .tcdce-body .uba-profile dd { padding:0 4px 16px; }
}

/* ---- 会長挨拶への入口：淡い青の箱に、名前の行（写真は入れない。役員の段の 772・会長挨拶の扉 741 と同じ場面が続くため） ---- */
html body.page-id-60 .post_content .tcdce-body .uba-president-link.uba19-pres { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "body"; gap:4px 0; align-items:start; padding:28px 32px !important; background:var(--uba-brand-pale) !important; }
html body.page-id-60 .post_content .tcdce-body .uba19-pres__head { grid-area:head; padding-top:0; }
html body.page-id-60 .post_content .tcdce-body .uba19-pres__head h2 { margin:0 !important; }
html body.page-id-60 .post_content .tcdce-body .uba-president-link p.uba19-pres__name { margin:2px 0 0 !important; font-size:15px; font-weight:700; line-height:1.6; letter-spacing:.08em; color:var(--uba-brand-deep); }
html body.page-id-60 .post_content .tcdce-body .uba-president-link p.uba19-pres__name span { display:inline-block; white-space:nowrap; }
html body.page-id-60 .post_content .tcdce-body .uba19-pres__body { grid-area:body; padding-top:8px; }
html body.page-id-60 .post_content .tcdce-body .uba19-pres__body p { font-size:15px; line-height:1.9; }
@media (max-width:600px) {
  html body.page-id-60 .post_content .tcdce-body .uba-president-link.uba19-pres { padding:22px 20px !important; }
  html body.page-id-60 .post_content .tcdce-body .uba-president-link p.uba19-pres__name { font-size:14px; letter-spacing:.04em; }
}

/* ==========================================================================
   ⑤ 東京UBAの活動
   ========================================================================== */

/* ---- 6つの活動：写真（上）・番号・活動名・説明・この活動の記録 ---- */
/* 古い「ACTIVITIES PAGE tune-up」（style.css 3987〜4038：3枚目が青緑 #10829c・上の線）は使わない */
html body.page-id-62 .post_content .tcdce-body .uba-activity-grid { gap:16px !important; align-items:stretch; }
html body.page-id-62 .post_content .tcdce-body .uba-activity-card.uba19-act,
html body.page-id-62 .post_content .tcdce-body .uba-activity-card.uba19-act:nth-child(3) { display:flex; flex-direction:column; padding:10px 10px 22px !important; border:1px solid rgba(56,118,188,.16) !important; border-radius:16px !important; background:#fff !important; }
html body.page-id-62 .post_content .tcdce-body .uba-activity-card.uba19-act:nth-child(3) :is(small, h3, p) { color:inherit; }
html body.page-id-62 .post_content .tcdce-body .uba3-sec__body .uba19-act__ph { margin:0 !important; border-radius:12px; overflow:hidden; }
html body.page-id-62 .post_content .tcdce-body .uba3-sec__body .uba19-act__ph img { display:block; width:100%; height:auto; aspect-ratio:3 / 2 !important; object-fit:cover; border-radius:12px; }
html body.page-id-62 .post_content .tcdce-body .uba19-act__txt { padding:18px 14px 0; }
/* 04 組合まつり：写真が届くまでは、写真の場所に出展の事実だけ */
html body.page-id-62 .post_content .tcdce-body .uba19-act__note { display:flex; flex-direction:column; justify-content:center; gap:4px; aspect-ratio:3 / 2; padding:20px 24px; border-radius:12px; background:var(--uba-brand-pale); color:var(--uba-brand-ink); }
html body.page-id-62 .post_content .tcdce-body .uba19-act__note small { font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--uba-brand); }
html body.page-id-62 .post_content .tcdce-body .uba19-act__note b { font-size:18px; line-height:1.5; letter-spacing:.04em; color:var(--uba-brand-deep); }
html body.page-id-62 .post_content .tcdce-body .uba19-act__note span { font-size:14px; line-height:1.8; color:var(--uba2-text); }
html body.page-id-62 .post_content .tcdce-body .uba19-act__note .uba19-act__where { margin-top:-4px; word-break:keep-all; overflow-wrap:anywhere; }
/* 〇〇の記録 →（行き先の記事が分かる言葉。長いときは折り返し、線は言葉の下に引く） */
html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec { display:inline-flex; align-items:baseline; gap:8px; align-self:flex-start; max-width:calc(100% - 28px); margin:auto 14px 0; padding:16px 0 0; border:0; font-size:14px; font-weight:700; line-height:1.6; letter-spacing:.04em; color:var(--uba-brand-deep) !important; text-decoration:none !important; background:none; }
html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec .uba19-act__rec-t { min-width:0; text-decoration:underline; text-decoration-color:var(--uba-brand); text-decoration-thickness:1px; text-underline-offset:5px; word-break:keep-all; overflow-wrap:anywhere; }
html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec .uba19-act__rec-a { flex:none; }
html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec::before, html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec::after { content:none !important; }
@media (hover:hover) {
  html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec { transition:color .2s; }
  html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec .uba19-act__rec-a { transition:translate .25s cubic-bezier(.2,.7,.2,1); }
  html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec:hover { color:var(--uba-brand) !important; }
  html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec:hover .uba19-act__rec-a { translate:3px 0; }
}
@media (max-width:600px) {
  html body.page-id-62 .post_content .tcdce-body .uba3-sec__body .uba19-act__ph img { aspect-ratio:16 / 9 !important; }
  html body.page-id-62 .post_content .tcdce-body .uba19-act__note { aspect-ratio:auto; }
  html body.page-id-62 .post_content .tcdce-body .uba19-act__txt { padding:16px 10px 0; }
  html body.page-id-62 .post_content .tcdce-body a.uba19-act__rec { max-width:calc(100% - 20px); margin:auto 10px 0; }
}

/* ---- 最後の段：持ち帰り先の3行（少し大きな深い青。行の頭は太く） ---- */
html body.page-id-62 .post_content .tcdce-body .uba3-sec__body p.uba19-acts { margin:24px 0 !important; }
html body.page-id-62 .post_content .tcdce-body .uba19-acts__line { display:block; font-size:clamp(20px, 1.8vw, 23px); font-weight:500; line-height:1.75; letter-spacing:.04em; color:var(--uba-brand-deep); }
html body.page-id-62 .post_content .tcdce-body .uba19-acts__line + .uba19-acts__line { margin-top:4px; }
html body.page-id-62 .post_content .tcdce-body .uba19-acts__line b { font-weight:700; }
html body.page-id-62 .post_content .tcdce-body .uba19-nowrap { white-space:nowrap; }
/* 動き：3行が 0.3秒ずつ左から1字ぶんすべって置かれ、置かれた行の動詞に印（各0.6秒）。この段で動くのはこれだけ（見出しは動かさない） */
html.uba-js body .uba19-acts.is-arm .uba19-acts__line { opacity:0; }
html.uba-js body .uba19-acts.is-arm.is-play .uba19-acts__line { animation:uba19Slide .4s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .3s) both; }
html.uba-js body .post_content .tcdce-body .uba19-acts.is-arm mark.uba-mark { background-size:0% 100% !important; transition:background-size .6s cubic-bezier(.6,0,.2,1) calc(.4s + var(--i) * .3s) !important; }
html.uba-js body .post_content .tcdce-body .uba19-acts.is-arm.is-play mark.uba-mark { background-size:100% 100% !important; }
@keyframes uba19Slide { from { opacity:0; translate:-1em 0; } to { opacity:1; translate:0 0; } }

/* ---- ページ下の青い帯：最新の活動レポート3件（小さな写真と日付） ---- */
html body.page-id-62 .post_content .tcdce-body .uba-page-related .uba19-latest { grid-column:1 / -1; margin:0; padding:24px 0 0; border-top:1px solid rgba(255,255,255,.3); }
html body.page-id-62 .post_content .tcdce-body .uba19-latest p.uba19-latest__label { max-width:none !important; margin:0 0 12px !important; font-size:14px; font-weight:700; line-height:1.5; letter-spacing:.06em; color:#fff; }
html body.page-id-62 .post_content .tcdce-body .uba19-latest__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
html body.page-id-62 .post_content .tcdce-body a.uba19-latest__item { display:flex; align-items:center; gap:14px; min-width:0; margin:0; padding:10px 14px 10px 10px; border:0; border-radius:14px; background:#fff; color:var(--uba-brand-ink) !important; text-decoration:none !important; }
html body.page-id-62 .post_content .tcdce-body a.uba19-latest__item::before, html body.page-id-62 .post_content .tcdce-body a.uba19-latest__item::after { content:none !important; }
html body.page-id-62 .post_content .tcdce-body .uba19-latest__ph { flex:none; display:block; width:92px; aspect-ratio:4 / 3; overflow:hidden; border-radius:10px; background:var(--uba-brand-pale); }
html body.page-id-62 .post_content .tcdce-body .uba19-latest__ph img { display:block; width:100%; height:100%; aspect-ratio:auto !important; object-fit:cover; border-radius:0; }
html body.page-id-62 .post_content .tcdce-body .uba19-latest__tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
html body.page-id-62 .post_content .tcdce-body .uba19-latest__tx time { font-size:13px; font-weight:700; line-height:1.4; letter-spacing:.04em; color:var(--uba-brand); font-variant-numeric:tabular-nums; }
/* 題名は「…」で切らない（全部読めるように） */
html body.page-id-62 .post_content .tcdce-body .uba19-latest__ttl { display:block; overflow:visible; font-size:14px; font-weight:700; line-height:1.55; letter-spacing:.02em; overflow-wrap:anywhere; }
@media (hover:hover) {
  html body.page-id-62 .post_content .tcdce-body a.uba19-latest__item { transition:background .2s; }
  html body.page-id-62 .post_content .tcdce-body a.uba19-latest__item:hover { background:var(--uba-brand-pale); }
}
/* 帯の見出しが「見／る。」のように1〜2字だけ折り返さないように */
html body.page-id-62 .post_content .tcdce-body .uba-page-related__copy strong { word-break:keep-all; overflow-wrap:anywhere; }
@media (max-width:900px) {
  html body.page-id-62 .post_content .tcdce-body .uba19-latest__list { grid-template-columns:minmax(0,1fr); gap:8px; }
}
/* スマホ：写真を小さく（68px）して、題名の幅を広げる */
@media (max-width:600px) {
  html body.page-id-62 .post_content .tcdce-body a.uba19-latest__item { gap:12px; padding:10px 12px 10px 10px; }
  html body.page-id-62 .post_content .tcdce-body .uba19-latest__ph { width:68px; border-radius:8px; }
}