/* ==========================================================================
   2026-10-31 東京UBA：⑨ 歴史（歴代テーマの手渡し）・⑩ 広域連携（4つの段・集まりの写真）
   - 人間「他のページもどんどんブラッシュアップしていこう。デザイン、アニメーション提案して欲しい」→ 提案①〜⑪を全部
   - 仕組みは uba/fx-history.php。style.css のあとに読む
   - 動く前に隠すのは html.uba-js のときだけ（uba/subpage-fx.php）。動きを減らす設定・JS なしは最初から完成形（淡くもしない）
   - 色はロゴの青（--uba-brand）・深い青・淡い青と文字色。赤は「現会長」の小さな印だけ
   ========================================================================== */

/* ---- ⑨ 歴代テーマ（ol.uba23-themes。本文の「歴代テーマ」の段の右の列） ---- */
html body.page-template-default .post_content .tcdce-body ol.uba23-themes { max-width:none !important; margin:28px 0 32px !important; padding:0 !important; border:0 !important; border-bottom:1px solid var(--uba2-line) !important; background:none !important; list-style:none !important; counter-reset:none; font-size:16px !important; font-weight:400 !important; line-height:1.6 !important; color:var(--uba-brand-ink) !important; text-align:left; }
html body.page-template-default .post_content .tcdce-body ol.uba23-themes > li { position:relative; margin:0 !important; padding:0 !important; border:0 !important; border-top:1px solid var(--uba2-line) !important; background:none !important; list-style:none !important; counter-increment:none; line-height:1.6 !important; }
html body.page-template-default .post_content .tcdce-body ol.uba23-themes > li::before, html body.page-template-default .post_content .tcdce-body ol.uba23-themes > li::marker { content:none !important; display:none !important; }
html body.page-template-default .post_content .tcdce-body ol.uba23-themes a { display:grid; grid-template-columns:4.6em 7.2em minmax(0,1fr) 20px; align-items:center; gap:4px 18px; padding:15px 6px 15px 2px !important; border:0 !important; background:none !important; box-shadow:none !important; color:inherit !important; text-decoration:none !important; }
html body.page-template-default .post_content .tcdce-body ol.uba23-themes a:focus-visible { outline:2px solid var(--uba-brand); outline-offset:2px; border-radius:8px; }
html body.page-template-default .post_content .tcdce-body .uba23-themes__dai { font-family:var(--tcd-font-serif); font-size:15px; font-weight:600; letter-spacing:.08em; color:var(--uba-brand-deep); white-space:nowrap; }
html body.page-template-default .post_content .tcdce-body .uba23-themes__yr { font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--uba2-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
html body.page-template-default .post_content .tcdce-body .uba23-themes__words { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-width:0; }
html body.page-template-default .post_content .tcdce-body .uba23-themes__word { font-size:19px; font-weight:700; line-height:1.5; letter-spacing:.02em; font-feature-settings:"palt"; color:var(--uba-brand-ink); overflow-wrap:anywhere; transition:color .2s; }
html body.page-template-default .post_content .tcdce-body .uba23-themes__w { display:inline-block; }
/* 十八代の「かちを創る」「かちを創り続ける」：「→」は置かず、少し間をあけて並べるだけ（行の右の「→」と見分けがつくように。点検 R4-18） */
html body.page-template-default .post_content .tcdce-body .uba23-themes__w + .uba23-themes__w { margin-left:.5em; }
html body.page-template-default .post_content .tcdce-body .uba23-themes__go { position:relative; display:block; width:20px; height:20px; justify-self:end; font-style:normal; transition:translate .2s; }
html body.page-template-default .post_content .tcdce-body .uba23-themes__go::before { content:'→'; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:700; color:var(--uba-brand); }
/* 二十一代「行動」：大きく青い字。横に赤い小さな「現会長」 */
html body.page-template-default .post_content .tcdce-body ol.uba23-themes > li.is-now a { padding:20px 6px 22px 2px !important; }
html body.page-template-default .post_content .tcdce-body ol.uba23-themes > li.is-now .uba23-themes__word { display:inline-block; font-size:clamp(28px,3vw,36px); line-height:1.3; letter-spacing:.04em; color:var(--uba-brand); }
html body.page-template-default .post_content .tcdce-body .uba23-themes__now { display:inline-block; padding:2px 9px; border-radius:999px; background:var(--uba-brand-red); color:#fff; font-size:11px; font-style:normal; font-weight:700; line-height:1.6; letter-spacing:.06em; white-space:nowrap; }
@media (hover:hover) {
  html body.page-template-default .post_content .tcdce-body ol.uba23-themes a:hover .uba23-themes__word { color:var(--uba-brand); }
  html body.page-template-default .post_content .tcdce-body ol.uba23-themes a:hover .uba23-themes__go { translate:4px 0; }
}

/* 動き：段が画面のまん中に来たら（.is-play）、十六代から順に左から置く。新しい行が置かれるたびに、前の行の言葉が 0.72 まで淡くなる */
/* この段は自分で動かすので、下層ページ共通のふわっと出る動き（.uba-rv）は止める */
html body.page-template-default .post_content .tcdce-body .uba3-sec__body > ol.uba23-themes.uba-rv { opacity:1 !important; transform:none !important; transition:none !important; }
html.uba-js body .uba23-themes > li { opacity:0; }
html.uba-js body .uba23-themes.is-play > li { animation:uba23In .3s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .18s) both; }
html.uba-js body .uba23-themes.is-play > li:not(.is-now) .uba23-themes__word { animation:uba23Dim .3s ease calc((var(--i) + 1) * .18s) both; }
html.uba-js body .uba23-themes.is-play > li.is-now .uba23-themes__word { animation:uba23Land .45s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .18s) both; }
html.uba-js body .uba23-themes:not(.is-play) .uba23-themes__now { opacity:0; }
html.uba-js body .uba23-themes.is-play .uba23-themes__now { animation:uba23Pop .3s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .18s + .4s) both; }
/* 淡くなった行も、マウスを乗せた・選んだときは元の濃さに */
html.uba-js body .uba23-themes a:is(:hover, :focus-visible) .uba23-themes__word { opacity:1 !important; }

@media (max-width:600px) {
  /* スマホは2段：上に代と年、下に言葉（長い「青年部連携 〜Inter青年部〜」が折れても重ならない） */
  html body.page-template-default .post_content .tcdce-body ol.uba23-themes a { grid-template-columns:auto minmax(0,1fr) 16px; grid-template-areas:"dai yr go" "words words go"; gap:2px 12px; padding:13px 2px !important; }
  html body.page-template-default .post_content .tcdce-body ol.uba23-themes > li.is-now a { padding:16px 2px 18px !important; }
  html body.page-template-default .post_content .tcdce-body .uba23-themes__dai { grid-area:dai; font-size:14px; }
  html body.page-template-default .post_content .tcdce-body .uba23-themes__yr { grid-area:yr; font-size:12px; }
  html body.page-template-default .post_content .tcdce-body .uba23-themes__words { grid-area:words; }
  html body.page-template-default .post_content .tcdce-body .uba23-themes__go { grid-area:go; width:16px; }
  html body.page-template-default .post_content .tcdce-body .uba23-themes__word { font-size:17px; }
  html body.page-template-default .post_content .tcdce-body ol.uba23-themes > li.is-now .uba23-themes__word { font-size:30px; }
}

/* ---- ⑩ 広域連携：4つの段（section.uba23-reach-block。扉の下の導入の続き、page.php の流れの箱の場所） ---- */
html body .uba23-reach-block { --uba3-w:1100px; max-width:var(--uba3-w); margin:0 auto; padding:24px 5vw 32px; box-sizing:content-box; font-family:"Noto Sans JP",sans-serif; color:var(--uba-brand-ink); }
html body .uba23-reach { display:grid; grid-template-columns:4fr 5fr 6fr 7fr; gap:14px; margin:0; padding:0; list-style:none; }
html body .uba23-reach > li { min-width:0; margin:0; padding:0; list-style:none; }
html body .uba23-reach > li::before, html body .uba23-reach > li::marker { content:none; display:none; }
html body .uba23-reach a { display:flex; flex-direction:column; height:100%; box-sizing:border-box; padding:10px; border:1px solid var(--uba2-line); border-radius:var(--uba2-radius); background:#fff; color:inherit; text-decoration:none; transition:border-color .25s ease; }
html body .uba23-reach a:focus-visible { outline:2px solid var(--uba-brand); outline-offset:2px; }
html body .uba23-reach__ph { display:block; height:150px; overflow:hidden; border-radius:12px; background:var(--uba-brand-pale); }
html body .uba23-reach__img { display:block; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; object-fit:cover; border-radius:0 !important; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
html body .uba23-reach__txt { display:flex; flex:1; flex-direction:column; padding:12px 6px 2px; }
html body .uba23-reach__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
html body .uba23-reach__name { font-size:19px; font-weight:700; line-height:1.4; letter-spacing:.02em; word-break:keep-all; overflow-wrap:anywhere; }
html body .uba23-reach__go { position:relative; flex:none; width:16px; height:16px; font-style:normal; }
html body .uba23-reach__go::before { content:'↓'; position:absolute; inset:0; display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--uba-brand); transition:translate .2s; }
html body .uba23-reach__who { margin:2px 0 12px; font-size:12px; line-height:1.6; color:var(--uba2-muted); overflow-wrap:anywhere; }
html body .uba23-reach__last { display:flex; flex-wrap:wrap; align-content:flex-start; gap:0 .7em; min-height:3.4em; margin-top:auto; padding-top:9px; border-top:1px solid var(--uba2-line); font-size:13px; line-height:1.7; color:var(--uba-brand-deep); font-variant-numeric:tabular-nums; }
html body .uba23-reach__last b { font-weight:700; color:var(--uba-brand-ink); }
/* 東京の段（li.is-out）は活動レポートへ進むので、印は「→」 */
html body .uba23-reach > li.is-out .uba23-reach__go::before { content:'→'; }
@media (hover:hover) {
  html body .uba23-reach a:hover { border-color:var(--uba-brand); }
  html body .uba23-reach a:hover .uba23-reach__img { transform:scale(1.04); }
  html body .uba23-reach a:hover .uba23-reach__go::before { translate:0 3px; }
  html body .uba23-reach > li.is-out a:hover .uba23-reach__go::before { translate:3px 0; }
}
/* 高さの低いPC（1280×650 など）：写真を低くして、4つの段とひと言が1画面に近く収まるように */
@media (min-width:1001px) and (max-height:720px) {
  html body .uba23-reach__ph { height:116px; }
  html body .uba23-reach__txt { padding-top:10px; }
  html body .uba23-reach__who { margin-bottom:8px; }
}
/* タブレット・スマホ：上から下へ1列。右へ広がる代わりに、左の余白が段ごとに減って広がる */
@media (max-width:1000px) {
  html body .uba23-reach { grid-template-columns:1fr; gap:10px; }
  html body .uba23-reach > li { margin-left:calc((3 - var(--i)) * 14px); }
  html body .uba23-reach a { flex-direction:row; align-items:stretch; padding:8px; }
  html body .uba23-reach__ph { flex:none; width:clamp(108px, 26vw, 200px); height:auto; min-height:96px; border-radius:10px; }
  html body .uba23-reach__txt { padding:4px 4px 2px 12px; min-width:0; }
  html body .uba23-reach__name { font-size:17px; }
  html body .uba23-reach__who { margin-bottom:6px; }
  html body .uba23-reach__last { padding-top:6px; font-size:12px; }
}
@media (max-width:767px) {
  html body .uba23-reach-block { padding:16px 20px 24px; }
}
@media (max-width:480px) {
  /* 細いスマホ：段ごとの左の余白を小さく、写真を少し細く（「関東甲信越静ブロック」が1行に入るように） */
  html body .uba23-reach > li { margin-left:calc((3 - var(--i)) * 9px); }
  html body .uba23-reach__ph { width:clamp(92px, 25vw, 120px); }
  html body .uba23-reach__txt { padding-left:10px; }
  html body .uba23-reach__name { font-size:16px; letter-spacing:0; }
}
/* 動き：4つの段が画面のまん中に来たら（.is-play）、東京から順に置かれるだけ（各0.35秒） */
html.uba-js body .uba23-reach:not(.is-play) > li { opacity:0; }
html.uba-js body .uba23-reach.is-play > li { animation:uba23In .35s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .35s) both; }

/* ---- ⑩ 広域連携：最初の段の見出し「東京のやり方を、<wbr>外から見直す。」は言葉の切れ目でだけ折る（⑪の h2.uba24-wrap と同じ。点検 R4-2） ---- */
html body.page-template-default .post_content .tcdce-body h2#wide-area-intro.uba24-wrap { word-break:keep-all !important; overflow-wrap:anywhere; line-break:strict; }

/* ---- ⑩ 広域連携：本文の写真の説明（figure.uba23-fig）と、活動レポートへの案内（ul.uba23-reports） ---- */
html body.page-template-default .post_content .tcdce-body figure.uba23-fig figcaption { margin:10px 0 0; padding:0 2px; font-size:13px; line-height:1.7; color:var(--uba2-muted); text-align:left; text-wrap:pretty; }
html body.page-template-default .post_content .tcdce-body .uba3-sec__body figure.uba23-fig.is-small { max-width:min(380px, 64%); }
html body.page-template-default .post_content .tcdce-body .uba3-sec__body * + figure.uba23-fig.is-small { margin-top:32px !important; }
html body.page-template-default .post_content .tcdce-body ul.uba23-reports { display:grid; gap:12px; max-width:none !important; margin:24px 0 0 !important; padding:0 !important; border:0 !important; background:none !important; list-style:none !important; font-size:16px !important; font-weight:400 !important; line-height:1.6 !important; color:var(--uba-brand-ink) !important; }
html body.page-template-default .post_content .tcdce-body ul.uba23-reports > li { margin:0 !important; padding:0 !important; border:0 !important; background:none !important; list-style:none !important; }
html body.page-template-default .post_content .tcdce-body ul.uba23-reports > li::before, html body.page-template-default .post_content .tcdce-body ul.uba23-reports > li::marker { content:none !important; display:none !important; }
html body.page-template-default .post_content .tcdce-body ul.uba23-reports a { position:relative; display:grid; gap:4px; padding:18px 64px 18px 22px !important; border:0 !important; border-radius:var(--uba2-radius); background:var(--uba-brand-pale) !important; box-shadow:none !important; color:var(--uba-brand-ink) !important; text-decoration:none !important; transition:background-color .25s ease, color .25s ease; }
html body.page-template-default .post_content .tcdce-body ul.uba23-reports a:focus-visible { outline:2px solid var(--uba-brand); outline-offset:2px; }
html body.page-template-default .post_content .tcdce-body .uba23-reports__date { font-size:13px; font-weight:700; color:var(--uba-brand-deep); font-variant-numeric:tabular-nums; transition:color .25s ease; }
html body.page-template-default .post_content .tcdce-body ul.uba23-reports strong { font-size:16px; font-weight:700; line-height:1.6; }
html body.page-template-default .post_content .tcdce-body ul.uba23-reports i { position:absolute; right:18px; top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%; background:#fff; font-style:normal; }
html body.page-template-default .post_content .tcdce-body ul.uba23-reports i::before { content:'→'; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:700; color:var(--uba-brand); }
@media (hover:hover) {
  html body.page-template-default .post_content .tcdce-body ul.uba23-reports a:hover { background:var(--uba-brand) !important; color:#fff !important; }
  html body.page-template-default .post_content .tcdce-body ul.uba23-reports a:hover .uba23-reports__date { color:#fff; }
}
@media (max-width:767px) {
  html body.page-template-default .post_content .tcdce-body .uba3-sec__body figure.uba23-fig.is-small { max-width:78%; }
  html body.page-template-default .post_content .tcdce-body ul.uba23-reports a { padding:16px 56px 16px 18px !important; }
  html body.page-template-default .post_content .tcdce-body ul.uba23-reports strong { font-size:15px; }
  html body.page-template-default .post_content .tcdce-body ul.uba23-reports i { right:14px; }
}

/* ---- 動きの形（このファイルだけで使う） ---- */
@keyframes uba23In { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
@keyframes uba23Dim { from { opacity:1; } to { opacity:.72; } }
/* 「行動」：上から少し降りて、なめらかに置かれて止まる。「現会長」：その横に下から少しだけ出る（どちらも行き過ぎ・弾み・膨らみはなし。点検 R7-2） */
@keyframes uba23Land { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes uba23Pop { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }