/* ==========================================================
   2026-11-09 東京UBA：エモーショナルに（三者の提案のうち1〜3）。仕組みは uba/fx-emotion.php
   - 色：青 var(--uba-brand)（#3876BC）・深い青 #2D5E95・淡い青 #EBF2F9・文字 #1c2b3d
   - 写真は角丸のまま。動きは足さない（下層ページは控えめに）
   ========================================================== */

/* ---------- 3 記事の見せ場の1枚：画面の幅いっぱい近くまで（左右32px・最大1440px）。説明は本文の幅で下に ---------- */
@media (min-width:901px) {
  .single-post .uba4-abody .tcdce-body figure.uba20-feature { display:block; width:min(calc(100vw - 64px), 1440px); max-width:none; margin:80px 0 80px calc(50% - min(calc(50vw - 32px), 720px)) !important; }
  .single-post .uba4-abody .tcdce-body figure.uba20-feature img { display:block; width:100% !important; max-width:none; height:auto; aspect-ratio:var(--uba20-ar, 1.5); max-height:calc(100vh - 110px); object-fit:cover; border-radius:18px; }
  .single-post .uba4-abody .tcdce-body figure.uba20-feature > figcaption { max-width:760px; margin:16px auto 0 !important; padding:0; font-size:15px; font-weight:700; color:#1c2b3d; }
}
@media (max-width:900px) {
  .single-post .uba4-abody .tcdce-body figure.uba20-feature { margin:40px -12px !important; }
  .single-post .uba4-abody .tcdce-body figure.uba20-feature img { border-radius:12px; }
  .single-post .uba4-abody .tcdce-body figure.uba20-feature > figcaption { padding:0 12px; font-weight:700; color:#1c2b3d; }
}

/* ---------- 3 東京UBAとは：ページの一言「印刷屋と水道屋が、同じ席で話す。」のすぐ下に「同じテーブル」の写真（page.php） ---------- */
.uba24-leadphoto { max-width:1240px; margin:16px auto 32px; padding:0 5vw; box-sizing:content-box; }
.uba24-leadphoto img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:50% 42%; border-radius:18px; }
.uba24-leadphoto figcaption { margin:14px 0 0; font-size:13px; font-weight:700; line-height:1.7; color:var(--uba2-muted, #6b7785); }
@media (max-width:767px) {
  .uba24-leadphoto { margin:4px auto 24px; padding:0 20px; }
  .uba24-leadphoto img { aspect-ratio:4/3; border-radius:14px; }
  .uba24-leadphoto figcaption { font-size:12px; }
}

/* ---------- 1 高木さんの「二つの姿」：顔写真の右に、リングの写真を同じくらいの大きさで少し下げて（single-voice.php の is-duo） ---------- */
.uba4-phero.is-duo { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:64px; }
.uba4-phero.is-duo .uba4-phero__photo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:18px; align-items:start; }
.uba4-phero__duo { display:grid; gap:10px; margin:72px 0 0; padding:0; border:0; background:none; color:#1c2b3d; font:inherit; text-align:left; cursor:zoom-in; }
.uba4-phero__duo img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 28%; border-radius:24px; }
.uba4-phero__duo span { font-size:14px; font-weight:700; line-height:1.6; }
@media (hover:hover) { .uba4-phero__duo:hover span { color:var(--uba-brand, #3876BC); } }
.uba4-phero__duo:focus-visible { outline:2px solid var(--uba-brand, #3876BC); outline-offset:4px; border-radius:24px; }
@media (max-width:900px) {
  .uba4-phero.is-duo { grid-template-columns:1fr; gap:40px; }
  .uba4-phero.is-duo .uba4-phero__photo { width:100%; max-width:560px; gap:12px; }
  .uba4-phero.is-duo .uba4-phero__face, .uba4-phero__duo img { border-radius:16px; }
  .uba4-phero__duo { margin-top:44px; gap:8px; }
  .uba4-phero__duo span { font-size:12px; }
}