/* ==========================================================
   2026-10-31 東京UBA：⑥ 活動レポート（一覧 /report/ と記事）の見た目と動き
   - 人間「他のページもどんどんブラッシュアップしていこう。デザイン、アニメーション提案して欲しい」→ 提案⑥（B5・B6）と B1 の一部
   - 仕組みは uba/fx-reports.php。動く前の形は html.uba-js があるときだけ（無いときは最初から完成形）
   - 色：青 var(--uba-brand)（#3876BC）・深い青 #2D5E95・淡い青 #EBF2F9・文字 #1c2b3d
   ========================================================== */

/* ---------- 一覧：活動名の札（写真の左下に小さく） ---------- */
.uba4-rcard__img, .uba4-rfeat__img { position:relative; }
.uba20-tag { position:absolute; left:12px; bottom:12px; z-index:1; max-width:calc(100% - 24px); padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(28,43,61,.14); color:#2D5E95; font-size:12px; font-weight:700; line-height:1.5; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
/* 最新のレポートは写真の下に説明の白い箱が重なるので、札は左上に */
.uba4-rfeat__img .uba20-tag { top:16px; left:16px; bottom:auto; }

/* ---------- 一覧：記録が1件だけの年は、その1枚を2列ぶんの横長に ---------- */
@media (min-width:901px) {
  .uba4-ryear__grid > .uba4-rcard:only-child { grid-column:1 / -1; }
  .uba4-ryear__grid > .uba4-rcard:only-child .uba4-rcard__img { aspect-ratio:21/9; }
  .uba4-ryear__grid > .uba4-rcard:only-child .uba4-rcard__img img { object-position:var(--uba20-pos, 50% 50%); }
}

/* ---------- 一覧：年の数字のめくり（2026→2025。変わる桁だけ） ---------- */
.uba20-yr { white-space:nowrap; }
.uba20-yr__d { position:relative; display:inline-block; clip-path:inset(0 -.2em); }
.uba20-yr__d > span { display:inline-block; }
.uba20-yr__d::before { content:none; }
html.uba-js .uba20-yr__d::before { content:attr(data-prev); position:absolute; left:0; top:0; }
html.uba-js .uba20-yr__d > span { transform:translateY(100%); }
html.uba-js .uba4-ryear__label.is-uba20-flip .uba20-yr__d > span,
html.uba-js .uba4-ryear__label.is-uba20-flip .uba20-yr__d::before { transition:transform .45s cubic-bezier(.2,.8,.3,1); }
html.uba-js .uba4-ryear__label:is(.is-uba20-flip,.is-uba20-done) .uba20-yr__d > span { transform:none; }
html.uba-js .uba4-ryear__label:is(.is-uba20-flip,.is-uba20-done) .uba20-yr__d::before { transform:translateY(-100%); }

/* ==========================================================
   記事（活動レポート＝投稿 post だけ。body.single-post）
   ========================================================== */

/* ---------- この日の流れ（このレポートの内容） ---------- */
.single-post .uba20-flow { margin:0 -120px 64px; }
.single-post .uba20-flow__title { display:flex; align-items:center; gap:12px; margin:0 0 16px; font-size:14px; font-weight:700; letter-spacing:.08em; line-height:1.5; color:var(--uba-brand, #3876BC); }
.single-post .uba20-flow__title::before { content:''; flex:none; width:28px; height:2px; border-radius:2px; background:currentColor; }
.single-post .uba20-flow__list { display:grid; grid-template-columns:repeat(var(--uba20-cols, 3), minmax(0,1fr)); gap:14px 36px; margin:0; padding:0; list-style:none; }
.single-post .uba20-flow__item { position:relative; margin:0; padding:0; list-style:none; }
.single-post .uba20-flow__item::before { content:none; }
/* 1日の流れ（見出しに日付が無い記事）は、横に並ぶとき項目のあいだに小さな矢印 */
.single-post .uba20-flow.is-day .uba20-flow__item:not(:last-child)::after { content:'→'; content:'→' / ''; position:absolute; top:50%; right:-27px; transform:translateY(-50%); font-size:15px; font-weight:700; line-height:1; color:var(--uba-brand, #3876BC); }
.single-post .uba20-flow.is-wrap .uba20-flow__item::after { content:none !important; } /* 2段に折り返すときは矢印を出さない */
.single-post .uba20-flow__link { display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; align-items:center; height:100%; padding:10px 14px 10px 10px; border:1px solid var(--uba2-line, #e3e8ee); border-radius:16px; background:#fff; color:#1c2b3d; text-decoration:none; box-sizing:border-box; transition:border-color .25s ease, background-color .25s ease; }
.single-post .uba20-flow__link.is-noimg { grid-template-columns:minmax(0,1fr); padding:16px 18px; }
.single-post .uba20-flow__img { display:block; aspect-ratio:3/2; border-radius:10px; overflow:hidden; background:#EBF2F9; }
.single-post .uba20-flow__img img { display:block; width:100%; height:100%; max-width:none; margin:0; border-radius:0; object-fit:cover; }
.single-post .uba20-flow__text { display:grid; gap:2px; min-width:0; }
.single-post .uba20-flow__no { font-size:12px; font-weight:700; letter-spacing:.06em; line-height:1.4; color:var(--uba-brand, #3876BC); font-feature-settings:"tnum"; }
/* 項目名は言葉の切れ目（fx-reports.php が入れる <wbr>・空白）でだけ折る。収まらない長い語だけは途中で折る（はみ出さないように）。2026-10-31 点検 R2-7 */
.single-post .uba20-flow__name { font-size:16px; line-height:1.55; font-weight:700; color:#1c2b3d; word-break:keep-all; overflow-wrap:anywhere; text-wrap:pretty; transition:color .25s ease; }
.single-post .uba20-flow__sub { font-size:12px; line-height:1.5; font-weight:700; color:var(--uba2-muted, #6b7785); }
@media (hover:hover) {
  .single-post .uba20-flow__link:hover { border-color:var(--uba-brand, #3876BC); background:#EBF2F9; }
  .single-post .uba20-flow__link:hover .uba20-flow__name { color:#2D5E95; }
}
.single-post .uba20-flow__link:focus-visible { outline:2px solid var(--uba-brand, #3876BC); outline-offset:2px; }

/* 押して飛んだ先の見出しが、上の帯（ヘッダー）に隠れないように（JS が動くときの位置は fx-reports.php で計算。これは JS なしのとき） */
.single-post .uba4-abody .tcdce-body h2 { scroll-margin-top:124px; }
/* 押したあと読む位置を見出しへ移す（tabindex="-1"）。マウスで押したときは枠を出さない */
.single-post .uba4-abody .tcdce-body h2[tabindex="-1"]:focus:not(:focus-visible) { outline:none; }

/* ---------- 本文の写真（PC・タブレット）：説明は写真の横、2枚は段違い ---------- */
@media (min-width:901px) {
  /* 1枚：写真と、右下に説明。低いPC（650px）でも1枚が画面に収まる高さまで */
  .single-post .uba4-abody .tcdce-body figure.uba20-solo { display:grid; grid-template-columns:minmax(0,1fr) 168px; column-gap:28px; align-items:end; margin:48px -120px !important; }
  .single-post .uba4-abody .tcdce-body figure.uba20-solo > :is(img,a) { grid-column:1; justify-self:end; }
  /* 幅は「画面の高さ−170px」に収まる幅まで（--uba20-ar＝写真の幅÷高さ。fx-reports.php で figure に書く） */
  .single-post .uba4-abody .tcdce-body figure.uba20-solo img { width:min(100%, calc((100vh - 170px) * var(--uba20-ar, 1.5))); max-width:100%; height:auto; }
  .single-post .uba4-abody .tcdce-body figure.uba20-solo > figcaption { grid-column:2; margin:0; padding:0 0 4px; }

  /* 2枚：大きい1枚（左）と、少し小さい1枚（右・下へずらす）。説明はそれぞれの写真のすぐ下
     2026-10-31 点検（R2-5）：大きい写真の説明が小さい写真の真上に来て読み違えやすかったので、説明を各写真の下へ移した */
  .single-post .uba4-abody .tcdce-body .uba20-pair { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); column-gap:28px; align-items:start; margin:48px -120px; }
  /* 写真と説明を1つの箱にまとめ、箱の幅を「画面の高さ−170px」に収まる幅までにする（説明の左の端が写真の左の端にそろう） */
  .single-post .uba4-abody .tcdce-body .uba20-pair > figure { display:block; width:min(100%, calc((100vh - 170px) * var(--uba20-ar, 1.5))); max-width:100%; margin:0 !important; }
  .single-post .uba4-abody .tcdce-body .uba20-pair > figure > a { display:block; }
  .single-post .uba4-abody .tcdce-body .uba20-pair img { width:100%; max-width:100%; height:auto; }
  .single-post .uba4-abody .tcdce-body .uba20-pair > figure > figcaption { margin:10px 0 0; padding:0; }
  /* 大きい1枚はまん中の切れ目に寄せる。小さい1枚は下の端を大きい1枚（説明まで）にそろえ、上を少なくとも56px下げる */
  .single-post .uba4-abody .tcdce-body .uba20-pair > figure:first-child { grid-column:1; grid-row:1; justify-self:end; }
  .single-post .uba4-abody .tcdce-body .uba20-pair > figure:last-child { grid-column:2; grid-row:1; justify-self:start; align-self:end; margin-top:56px !important; }
  /* 2組目は左右を入れ替える */
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-flip { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-flip > figure:first-child { grid-column:2; justify-self:start; }
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-flip > figure:last-child { grid-column:1; justify-self:end; }
  /* 3枚続くときの後ろの2枚：同じ大きさで並べる（説明はそれぞれの下） */
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-even { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; margin-top:-16px; }
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-even > figure { width:auto; justify-self:stretch; align-self:start; margin:0 !important; }
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-even > figure:first-child { grid-column:1; }
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-even > figure:last-child { grid-column:2; }
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-even img { width:100%; aspect-ratio:3/2; object-fit:cover; }
}
/* タブレット幅（901〜1100px）：はみ出しを style.css と同じ 40px に */
@media (min-width:901px) and (max-width:1100px) {
  .single-post .uba20-flow { margin:0 -40px 56px; }
  .single-post .uba4-abody .tcdce-body figure.uba20-solo { margin:40px -40px !important; grid-template-columns:minmax(0,1fr) 140px; }
  .single-post .uba4-abody .tcdce-body .uba20-pair { margin:40px -40px; }
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-even { margin-top:-12px; }
}

/* ---------- スマホ：写真は左右に20pxの余白と角丸（端まで広げない）、2枚目は少し小さく右へ ---------- */
@media (max-width:900px) {
  .single-post .uba20-flow { margin:0 0 44px; }
  .single-post .uba20-flow__list { grid-template-columns:minmax(0,1fr); gap:8px; }
  .single-post .uba20-flow.is-day .uba20-flow__item:not(:last-child)::after { content:none; }
  .single-post .uba20-flow__link { grid-template-columns:84px minmax(0,1fr); gap:14px; padding:8px 12px 8px 8px; border-radius:14px; }
  .single-post .uba20-flow__link.is-noimg { padding:8px 14px; } /* 写真のある項目と同じ高さに */
  .single-post .uba20-flow__img { border-radius:9px; }
  .single-post .uba20-flow__name { font-size:15px; }
  .single-post .uba4-abody .tcdce-body h2 { scroll-margin-top:118px; }
  .single-post .uba4-abody .tcdce-body figure { margin:28px 0 !important; }
  .single-post .uba4-abody .tcdce-body figure img { border-radius:14px; }
  .single-post .uba4-abody .tcdce-body figcaption { margin-top:10px; padding:0; }
  .single-post .uba4-abody .tcdce-body .uba20-pair { margin:28px 0; }
  .single-post .uba4-abody .tcdce-body .uba20-pair > figure { margin:0 !important; }
  .single-post .uba4-abody .tcdce-body .uba20-pair > figure + figure { width:80%; margin:16px 0 0 auto !important; }
  .single-post .uba4-abody .tcdce-body .uba20-pair.is-flip > figure + figure { margin:16px auto 0 0 !important; }
}

/* ---------- スマホ：画面の上の細い帯（節の名前。今の節が青に） ---------- */
.uba20-flowbar { display:none; }
@media (max-width:900px) {
  .uba20-flowbar { display:block; position:fixed; left:0; right:0; top:60px; z-index:90; background:rgba(255,255,255,.97); border-bottom:1px solid var(--uba2-line, #e3e8ee); box-shadow:0 6px 16px rgba(28,43,61,.06); opacity:0; visibility:hidden; transform:translateY(-6px); }
  .uba20-flowbar.is-shown { opacity:1; visibility:visible; transform:none; }
  html.uba-js .uba20-flowbar { transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
  html.uba-js .uba20-flowbar.is-shown { transition:opacity .3s ease, transform .3s ease, visibility 0s; }
  .uba20-flowbar ol { display:flex; gap:22px; margin:0; padding:0 20px; list-style:none; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
  .uba20-flowbar ol::-webkit-scrollbar { display:none; }
  .uba20-flowbar li { flex:none; margin:0; padding:0; list-style:none; }
  .uba20-flowbar li::before { content:none; }
  .uba20-flowbar a { display:block; padding:10px 0 8px; border-bottom:2px solid transparent; font-family:"Noto Sans JP",sans-serif; font-size:13px; font-weight:700; line-height:1.5; letter-spacing:.04em; color:#7a8796; text-decoration:none; }
  html.uba-js .uba20-flowbar a { transition:color .3s ease, border-color .3s ease; }
  .uba20-flowbar a[aria-current="true"] { color:var(--uba-brand, #3876BC); border-bottom-color:var(--uba-brand, #3876BC); }
}
@media print { .uba20-flowbar { display:none !important; } }