/*
 * 2026-10-31 東京UBA：⑪ 年間予定の「1年の暦」と、参加する・お問い合わせの見出しの折れ（仕組みは uba/fx-event.php）
 * - 人間「他のページもどんどんブラッシュアップしていこう。デザイン、アニメーション提案して欲しい」→ 提案①〜⑪を全部
 * - 色はロゴの青（--uba-brand）・深い青・淡い青。「いま」の札だけロゴの赤（小さな印。歴代会長の帯の「いま」と同じ）
 * - 動く前に隠すのは html.uba-js のときだけ。JavaScript が動かない・動きを減らす設定のときは最初から完成形
 * - スマホ（〜767px）は写真を出さず、月の目盛りと下の行だけ
 * - 動きは行き過ぎ・弾みのない cubic-bezier(.2,.7,.2,1) で、置かれて止まるだけ（点検 R7-2）
 */

/* ---- 1年の暦：箱（本文の figure・ul・ol・p の決まりを外す） ---- */
html body.page-template-default .post_content .tcdce-body figure.uba24-year { --p:.5; position:relative; margin:4px 0 52px !important; padding:0 !important; border:0 !important; border-radius:0 !important; overflow:visible !important; background:none !important; }
html body.page-template-default .post_content .tcdce-body .uba24-year :is(ul,ol) { 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 .uba24-year li { margin:0 !important; border:0 !important; background:none !important; list-style:none !important; }
html body.page-template-default .post_content .tcdce-body .uba24-year li::marker { content:none; }
/* 本文の箇条書きの印（TCD のエディタ：アイコンの mask・拡大・影）を、目盛りの点と線に使う ::before から外す */
html body.page-template-default .post_content .tcdce-body .uba24-year li::before { -webkit-mask:none !important; mask:none !important; box-shadow:none !important; transform:none; font-size:0 !important; color:transparent !important; }

/* ---- 行事の写真と名前（PC）：月の位置（目盛りの点）から右へ。写真は1か月に1枚、その下に行事の名前を「・」で並べる ---- */
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__evs { display:grid !important; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; padding:0 0 18px !important; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g { grid-row:1; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; margin:0 0 0 calc(100% / var(--span, 4) / 2) !important; padding:0 !important; }
/* 写真から目盛りの点へ下りる細い線 */
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g::before { content:'' !important; display:block !important; position:absolute; top:auto; left:0; bottom:-18px; width:1px; height:18px; margin:0; border:0; border-radius:0; background:#b9cde4; transform-origin:50% 100%; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
html body.page-template-default .post_content .tcdce-body .uba24-year a.uba24-g__ph { display:block !important; position:relative; width:100%; max-width:180px; aspect-ratio:3/2; margin:0 !important; padding:0 !important; overflow:hidden; border:0 !important; border-radius:8px; background:var(--uba-brand-pale); outline:3px solid transparent; outline-offset:3px; text-decoration:none !important; }
html body.page-template-default .post_content .tcdce-body .uba24-year a.uba24-g__ph img { display:block; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; aspect-ratio:auto !important; object-fit:cover; border-radius:0 !important; transition:scale .3s ease; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g__names { display:block; max-width:100%; font-size:13px; font-weight:700; line-height:1.45; letter-spacing:.02em; color:var(--uba-brand-ink); }
/* 名前はひとかたまりずつ（折れるのは名前と名前のあいだ・「チャリティー／交流会」だけ） */
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g__n { display:inline-block; word-break:keep-all; overflow-wrap:anywhere; }
html body.page-template-default .post_content .tcdce-body .uba24-year a.uba24-ev { display:inline !important; margin:0 !important; padding:0 !important; border:0 !important; color:var(--uba-brand-ink) !important; font-weight:700; text-decoration:none !important; }
html body.page-template-default .post_content .tcdce-body .uba24-year :is(a.uba24-ev, a.uba24-g__ph)::before,
html body.page-template-default .post_content .tcdce-body .uba24-year :is(a.uba24-ev, a.uba24-g__ph)::after { content:none !important; display:none !important; }
/* 写真がまだ無い行事（組合まつり）は名前だけ */
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g.is-text .uba24-g__names { padding:7px 12px; border-radius:8px; background:var(--uba-brand-pale); outline:3px solid transparent; outline-offset:3px; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g.is-text a.uba24-ev { color:var(--uba-brand-deep) !important; }
@media (hover:hover) {
  html body.page-template-default .post_content .tcdce-body .uba24-year a.uba24-ev:hover { color:var(--uba-brand) !important; }
  html body.page-template-default .post_content .tcdce-body .uba24-year a.uba24-g__ph:hover img { scale:1.04; }
}
html body.page-template-default .post_content .tcdce-body .uba24-year a.uba24-ev:focus-visible { outline:2px solid var(--uba-brand); outline-offset:3px; border-radius:4px; }
/* 次の行事のある月：写真に青い枠と「次」 */
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g.is-next a.uba24-g__ph,
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g.is-next.is-text .uba24-g__names { outline-color:var(--uba-brand); }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-ev__tag { position:absolute; top:-9px; left:-6px; z-index:2; padding:0 8px; border-radius:999px; background:var(--uba-brand); color:#fff; font-size:11px; font-weight:700; line-height:1.7; letter-spacing:.06em; }

/* ---- 12か月の目盛りと青い線 ---- */
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__scale { position:relative; padding:0 0 30px; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__track { position:absolute; top:5px; left:calc(100% / 24); right:calc(100% / 24); height:2px; border-radius:2px; background:#d6e1ee; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__track i { position:absolute; top:0; left:0; bottom:0; width:calc((var(--p) - .5) / 11 * 100%); border-radius:2px; background:var(--uba-brand); }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__months { display:grid !important; grid-template-columns:repeat(12,minmax(0,1fr)); }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m { position:relative; padding:20px 0 0 !important; text-align:center; font-size:13px; font-weight:700; line-height:1.4; letter-spacing:.02em; color:var(--uba2-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m::before { content:'' !important; display:block !important; position:absolute; top:2px; left:50%; width:8px; height:8px; margin:0 0 0 -4px; padding:0; border:2px solid #c3d3e6; border-radius:50%; background:#fff; box-sizing:border-box; transition:background-color .2s ease, border-color .2s ease; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m.has-ev::before { top:0; width:12px; height:12px; margin-left:-6px; border-color:var(--uba-brand); }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m.is-past::before { border-color:var(--uba-brand); background:var(--uba-brand); }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m.is-next::before { border-width:3px; background:var(--uba-brand-pale); }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m a { display:inline; margin:0 !important; padding:0 !important; border:0 !important; color:var(--uba-brand) !important; font-weight:700; text-decoration:none !important; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m a::before, html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m a::after { content:none !important; display:none !important; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m a:hover { text-decoration:underline !important; text-underline-offset:4px; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m.is-now > * { color:var(--uba-brand-ink) !important; }
/* 「いま」の札（今日の月の下）。位置は JavaScript が --x に入れる */
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__now { position:absolute; bottom:2px; left:clamp(20px, var(--x, 50%), calc(100% - 20px)); translate:-50% 0; padding:0 9px; border-radius:999px; background:var(--uba-brand-red); color:#fff; font-size:11px; font-style:normal; font-weight:700; line-height:1.8; letter-spacing:.06em; white-space:nowrap; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__now::before { content:''; position:absolute; bottom:100%; left:50%; margin-left:-4px; border:4px solid transparent; border-bottom-color:var(--uba-brand-red); }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__now[hidden] { display:none !important; }

/* ---- 暦の下の行：いま／次、月の決まっていない行事 ---- */
html body.page-template-default .post_content .tcdce-body .uba24-year p.uba24-year__out { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px; max-width:none !important; min-height:calc(1.9em + 13px); margin:8px 0 0 !important; padding:12px 0 0 !important; border-top:1px solid var(--uba2-line); font-size:14px !important; line-height:1.9 !important; color:var(--uba2-text); transition:opacity .3s ease; }
html body.page-template-default .post_content .tcdce-body .uba24-year p.uba24-year__out[hidden] { display:none !important; }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__out b { margin:0 .35em 0 0; font-weight:700; color:var(--uba-brand-deep); }
html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__out span b { margin:0; }
html body.page-template-default .post_content .tcdce-body .uba24-year p.uba24-year__through { max-width:none !important; margin:2px 0 0 !important; padding:0 !important; font-size:13px !important; line-height:1.9 !important; color:var(--uba2-muted); }
html body.page-template-default .post_content .tcdce-body .uba24-year :is(.uba24-year__out, .uba24-year__through) a { display:inline !important; gap:0; margin:0 !important; padding:0 !important; border:0 !important; border-bottom:1px solid var(--uba-brand) !important; color:var(--uba-brand-ink) !important; font-weight:700; text-decoration:none !important; }
html body.page-template-default .post_content .tcdce-body .uba24-year :is(.uba24-year__out, .uba24-year__through) a::after { content:' ↓' !important; display:inline !important; color:var(--uba-brand); }

/* タブレット：写真が細くなるので、名前を一回り小さく（「新春チャリティー／交流会」と言葉の切れ目で折れるように） */
@media (min-width:768px) and (max-width:1023px) {
  html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g__names { font-size:11px; letter-spacing:0; }
}

/* ---- スマホ：写真を出さず、月の目盛り（数字だけ。「月」は6月と1月）と下の行だけ ---- */
@media (max-width:767px) {
  html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__evs { display:none !important; }
  html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m { padding-top:18px !important; font-size:11px; letter-spacing:0; }
  html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m:not(.is-u) .uba24-m__u { display:none; }
  html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-m.has-ev::before { top:1px; width:10px; height:10px; margin-left:-5px; }
  html body.page-template-default .post_content .tcdce-body .uba24-year p.uba24-year__out { min-height:calc(3.8em + 13px); } /* 2行ぶん＋上の余白12px＋線1px（動きの途中と止まったあとで下の段がずれない） */
  /* 止まったあとは「いま 〇月」と「次は 例年〇月 〇〇」の2行。「／」は出さない（点検 R4-8） */
  html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__sep { display:none; }
  html body.page-template-default .post_content .tcdce-body .uba24-year .uba24-year__next-t { flex:0 0 100%; }
}

/* ---- 動き（html.uba-js のときだけ。1回だけ動いて止まる。行き過ぎ・弾みなし） ---- */
/* 線が通るまで、行事の写真・名前と目盛りへの線は隠しておく */
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year:not(.is-done) .uba24-g:not(.is-hit) > :is(.uba24-g__ph, .uba24-g__names) { opacity:0; transform:translateY(10px); }
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year:not(.is-done) .uba24-g:not(.is-hit)::before { transform:scaleY(0); }
/* 線が通ったら、下から少し上がって置かれる（0.45秒。名前は少し遅れて） */
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g.is-hit > :is(.uba24-g__ph, .uba24-g__names) { animation:uba24In .45s cubic-bezier(.2,.7,.2,1) both; }
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g.is-hit > .uba24-g__names { animation-delay:.06s; }
/* 「いま」の札：線が止まったら、上から少し降りて止まる */
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year:not(.is-stop) .uba24-year__now { opacity:0; }
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year.is-stop .uba24-year__now { animation:uba24Drop .45s cubic-bezier(.2,.7,.2,1) both; }
/* 次の行事の枠：外から寄ってきて止まる */
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year a.uba24-g__ph,
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g.is-text .uba24-g__names { outline-offset:9px; transition:outline-color .4s cubic-bezier(.2,.7,.2,1), outline-offset .4s cubic-bezier(.2,.7,.2,1); }
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g.is-next a.uba24-g__ph,
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year .uba24-g.is-next.is-text .uba24-g__names { outline-offset:3px; }
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year .uba24-ev__tag { animation:uba24Drop .4s cubic-bezier(.2,.7,.2,1) both; }
/* 下の行：スマホは動き出したら名前が切り替わっていく。PCは止まってから出す */
html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year:not(.is-play) .uba24-year__out { opacity:0; }
@media (min-width:768px) {
  html.uba-js body.page-template-default .post_content .tcdce-body .uba24-year:not(.is-final) .uba24-year__out { opacity:0; }
}
@keyframes uba24In { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes uba24Drop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ---- 行事の一覧：暦から飛んだとき、上の帯に隠れないように。月の決まっていない行事は「1年を通して」として最後に ---- */
html body.page-template-default .post_content .tcdce-body :is(.uba13-ev, #calendar) { scroll-margin-top:120px; }
html body.page-template-default .post_content .tcdce-body ul.uba13-year__through { border-top:0 !important; }
html body.page-template-default .post_content .tcdce-body .uba13-year__through .uba13-ev__when { font-size:17px !important; word-break:keep-all; }
html body.page-template-default .post_content .tcdce-body .uba13-ev__when small { display:block; margin-top:4px; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--uba2-muted); }

/* ---- 見出しの折れ（F4）：<wbr> を入れた段見出しとページ下の帯の一文は、言葉の切れ目でだけ折る（参加する・お問い合わせ） ---- */
html body.page-template-default .post_content .tcdce-body :is(h2, strong).uba24-wrap { word-break:keep-all !important; overflow-wrap:anywhere; line-break:strict; text-wrap:balance; }