/*
 * 2026-10-31 東京UBA：① 表紙の見出しを「ページ名」と「ひとこと」の2列に ＋ ④ 会長挨拶を二十一代のページに ＋ サイトマップ・プライバシーポリシーの黒い扉
 * - 人間「他のページもどんどんブラッシュアップしていこう。デザイン、アニメーション提案して欲しい」→ 提案①〜⑪を全部
 * - 仕組みは uba/fx-heading.php。style.css のあとに読む
 * - 動く前に隠すのは html.uba-js（uba/subpage-fx.php）があるときだけ。動きを減らす設定・JSなしでは最初から完成形
 */

/* ---- G3 扉の下地：写真が無いとき・写真を読み込む前も黒い箱にしない（深い青に白い字） ---- */
body.page-template-default #page_header { background:#2D5E95; }
body.page-template-default #page_header:not(:has(.image)) .content { color:#fff; }

/* ---- ① 扉の見出し：右の列にページ名（大きく）、左の列にひとこと（小さく「—」で添える） ---- */
/* 名前の列が収まる長さ。扉の高さから上下の余白を引いたもの。低いPC（1280×650）は、最初の画面の下で列が切れない長さ */
body.page-template-default #page_header { --uba17-avail:min(max(500px, calc((100vw - 200px) * .48 - 120px)), max(260px, calc(100svh - 236px))); }
@media (max-width:1200px) {
  body.page-template-default #page_header { --uba17-avail:min(calc(clamp(420px, 54vw, 620px) - 100px), max(260px, calc(100svh - 226px))); }
}
@media (max-width:767px) {
  body.page-template-default #page_header { --uba17-avail:290px; }
}
@media (max-width:600px) {
  body.page-template-default #page_header { --uba17-avail:270px; }
}
/* 縦書きは上から読むので、表札のように上から下げる（名前が短いページも、長いページも頭の位置がそろう） */
body.page-template-default #page_header:has(.uba17-h) { justify-content:flex-start; }
#page_header .uba17-h { position:relative; max-width:none; text-wrap:wrap; }
#page_header .uba17-h__name, #page_header .uba17-h__sub { display:block; }
/* 名前：字数が多いときは、列が収まるところまで字を小さくする（1em＝今の見出しの大きさが上限） */
#page_header .uba17-h__name { font-size:min(1em, calc(var(--uba17-avail, 500px) / (var(--len, 6) * 1.08))); line-height:1.3; letter-spacing:.04em; white-space:nowrap; }
#page_header .uba17-h__name i { display:inline-block; font-style:normal; }
#page_header .uba17-h__name i.is-sp { display:inline; }
/* ひとこと：名前の左に一回り小さく。2列目は「—」のあとにそろえる */
/* 字の大きさは名前の0.4倍まで。長い列が収まらないときは、収まる大きさまで下げる（--sublen：いちばん長い列の字数） */
#page_header .uba17-h__sub { max-height:var(--uba17-avail, 500px); margin-block-start:.8em; padding-inline-start:1.3em; text-indent:-1.3em; font-size:max(15px, min(.4em, calc(var(--uba17-avail, 500px) / (var(--sublen, 12) * 1.1)))); font-weight:600; line-height:1.75; letter-spacing:.06em; word-break:keep-all; overflow-wrap:anywhere; }
#page_header .uba17-h__dash { margin-inline-end:.3em; }
/* 白い縦書きを、明るい写真（看板・白い表紙・明るい壁）の上でも読めるように、字のまわりに深い青の半透明の影（見直し R1-1・R4-7）。
   黒い影・黒い膜にはしない。写真の位置は変えない。スマホは字が細く小さいので強め */
#page_header .uba17-h__name { text-shadow:0 0 2px rgba(29,52,82,.6), 0 0 12px rgba(29,52,82,.55), 0 0 26px rgba(29,52,82,.45), 0 2px 40px rgba(29,52,82,.4); }
#page_header .uba17-h__sub { text-shadow:0 0 1px rgba(29,52,82,.9), 0 0 4px rgba(29,52,82,.8), 0 0 10px rgba(29,52,82,.6), 0 1px 18px rgba(29,52,82,.5); }
@media (max-width:767px) {
  #page_header .uba17-h__name { text-shadow:0 0 1px rgba(29,52,82,.9), 0 0 5px rgba(29,52,82,.8), 0 0 14px rgba(29,52,82,.6), 0 1px 22px rgba(29,52,82,.5); }
  #page_header .uba17-h__sub { text-shadow:0 0 1px rgba(29,52,82,.95), 0 0 2px rgba(29,52,82,.95), 0 0 3px rgba(29,52,82,.9), 0 0 6px rgba(29,52,82,.85), 0 0 12px rgba(29,52,82,.65), 0 1px 18px rgba(29,52,82,.5); }
}
/* テーマ標準の「最初は透明→ふわっと」をこの見出しでは使わない（中身はこちらで動かす。標準の遅いふわっとが字の動きに重ならないよう transition も止める） */
body #page_header .content .uba17-h, body #page_header .content .uba17-h * { opacity:1; }
body #page_header .content .uba17-h, body #page_header .content .uba17-h *,
body.start_first_animation #page_header .content .uba17-h, body.start_first_animation #page_header .content .uba17-h * { transition:none !important; }

/* 動く前の形（html.uba-js のときだけ） */
html.uba-js #page_header:not(.uba17-play) .uba17-h__name i { opacity:0; }
/* ひとことの切り抜きは、字の影（上の text-shadow）まで切らないよう 1.5em 外側まで。動く前は何も見えない（下の端を上の端より上に） */
html.uba-js #page_header:not(.uba17-play) .uba17-h__sub { clip-path:inset(-1.5em -1.5em calc(100% + 1.5em) -1.5em); }
/* 動き：ページ名が上から一字ずつ置かれ（1字0.05秒）、そろうとひとことが上から下へ（0.7秒）。1回で止まる */
html.uba-js #page_header.uba17-play .uba17-h__name i { animation:uba17Put .36s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--i) * 50ms) both; }
html.uba-js #page_header.uba17-play .uba17-h__sub { animation:uba17Read .7s cubic-bezier(.45,.05,.55,.95) calc(.4s + var(--n, 4) * 50ms) both; }
@keyframes uba17Put { from { opacity:0; transform:translateY(-.42em); } to { opacity:1; transform:none; } }
@keyframes uba17Read { from { clip-path:inset(-1.5em -1.5em calc(100% + 1.5em) -1.5em); } to { clip-path:inset(-1.5em); } }

/* ---- ④ 会長挨拶の扉：「二十一代」（歴代会長の扉の代めくり .uba15-h__flip と同じ作り） ---- */
#page_header .uba17-h__flip { position:relative; display:inline-block; text-indent:0; }
#page_header .uba17-h__flip > b { visibility:hidden; font-weight:inherit; }
/* 「二十代」（3字）は下の「会長」側に寄せる */
#page_header .uba17-h__roll { position:absolute; bottom:0; right:0; white-space:nowrap; text-indent:0; }
/* 代の横の線。めくれ終わると上から伸びる */
#page_header .uba17-h__flip::after { content:''; position:absolute; top:.1em; bottom:.1em; left:.2em; width:2px; border-radius:1px; background:var(--uba-brand, #3876BC); transform:scaleY(1); transform-origin:top; transition:transform .5s cubic-bezier(.2,.7,.2,1) !important; }
html.uba-js #page_header .uba17-h__flip:not(.is-done)::after { transform:scaleY(0); }
html.uba-js #page_header .uba17-h__roll.is-new { animation:uba17Put .32s cubic-bezier(.2,.7,.2,1) both; }

/* ---- ④ 会長挨拶：手紙の最後の署名（右寄せ。小さく「二十一代会長」、大きく「田村 巧次」） ---- */
html body.page-template-default .post_content .tcdce-body p.uba17-sign { max-width:none !important; margin:2.4em 0 0 !important; text-align:right; font-size:22px !important; font-weight:700; line-height:1.6 !important; letter-spacing:.14em; color:#1c2b3d; }
html body.page-template-default .post_content .tcdce-body p.uba17-sign small { margin-right:1em; font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--uba-brand, #3876BC); }

/* ---- ④ 会長挨拶：50年の物差しと前の会長（歴代会長の個別ページの最後と同じ見た目。見た目は style.css の .uba16-ruler・.uba14-pager） ---- */
html body.page-template-default .post_content .tcdce-body .uba17-relay { margin:72px 0 0; }
html body.page-template-default .post_content .tcdce-body .uba17-relay .uba16-ruler { margin-top:0; }
/* 物差し：画面に入ると、1975年から今年までの線が伸び、今の会長の区切りが光る（1回） */
html.uba-js body .uba17-relay .uba16-ruler:not(.is-play) .uba16-ruler__fill { width:0; }
html.uba-js body .uba17-relay .uba16-ruler .uba16-ruler__fill { transition:width .9s cubic-bezier(.2,.7,.2,1); }
html.uba-js body .uba17-relay .uba16-ruler:not(.is-play) .uba16-ruler__me { opacity:0; }
html.uba-js body .uba17-relay .uba16-ruler.is-play .uba16-ruler__me { animation:uba16Me .5s .85s both; }

/* ---- G3 サイトマップ・プライバシーポリシー：扉は控えめな高さにして、本文がすぐ読めるように ---- */
body.page-id-71.page-template-default #page_header, body.page-id-72.page-template-default #page_header { aspect-ratio:auto; min-height:0; height:clamp(340px, 34vw, 430px); --uba17-avail:calc(clamp(340px, 34vw, 430px) - 84px); }
body.page-id-71.page-template-default #page_header .content, body.page-id-72.page-template-default #page_header .content { padding-top:44px; padding-bottom:36px; }
body.page-id-71 #page_header .image img { object-position:50% 62%; }
body.page-id-72 #page_header .image img { object-position:50% 58%; }
@media (max-width:767px) {
  body.page-id-71.page-template-default #page_header, body.page-id-72.page-template-default #page_header { min-height:0 !important; height:280px; --uba17-avail:230px; }
  body.page-id-71.page-template-default #page_header .content, body.page-id-72.page-template-default #page_header .content { padding-top:26px; padding-bottom:20px; }
}

@media (max-width:767px) {
  html body.page-template-default .post_content .tcdce-body p.uba17-sign { font-size:19px !important; }
  html body.page-template-default .post_content .tcdce-body .uba17-relay { margin-top:56px; }
}

/* ---- ④ 会長挨拶：本文の段の見出しは言葉の途中で折らない（折る所は uba/fx-heading.php で入れた <wbr>。見直し R1-7） ---- */
html body.page-id-73 .post_content .tcdce-body .uba3-sec__head h2 { word-break:keep-all; overflow-wrap:anywhere; line-break:strict; }

/* ---- 歴代会長の一覧（110）の扉：①の2列（見直し R5-3） ----
   置き方は style.css のまま（PC：.content を vertical-lr にして見出しを左の来賓の上へ。スマホ：扉を低く、写真を左寄せ）。
   ここでは、列が扉の中に収まる長さと、スマホのページ名の大きさだけを合わせる（4人の顔に重ならない幅） */
@media (max-width:767px) {
  /* 扉の高さ（style.css：(100vw - 40px) × .78）から上下の余白 20px ずつを引いた長さ */
  body.page-id-110.page-template-default #page_header { --uba17-avail:calc((100vw - 40px) * .78 - 40px); }
  /* style.css は見出しを 19〜22px にしている（古い1つの塊を2列に細く収めるため）。2列にしたので、ページ名だけ一回り大きく */
  body.page-id-110 #page_header .uba17-h__name { font-size:min(clamp(26px, 7.6vw, 32px), calc(var(--uba17-avail) / (var(--len, 4) * 1.08))); }
}

/* ---- 左の縦書きのキャッチと、右の縦のメニューの文字の色（見直し R7-10） ----
   純粋な黒（#000）ではなく、文字の色 #1c2b3d に。この css は下層ページだけで読む（トップは今のまま）。右下の SCROLL は触らない */
#side_copy, #side_button a .title { color:#1c2b3d; }

/* ---- 扉に写真を並べる：サイトマップ（72）・プライバシーポリシー（71）（2026-10-31 人間「数枚を並べる」） ----
   下に敷いた1枚（.image）の上に4枚を重ねる。暗い膜（.overlay、z-index:2）と見出し（.content、z-index:3）はその上。
   PC：左に大きく1枚、右に3枚（上に横長1枚・下に2枚）。スマホ：2×2。
   動き：開いたときに1枚ずつ0.1秒ずらして、少し下からすっと出て止まる（html.uba-js のときだけ。行き過ぎなし） */
body.page-id-71 #page_header .uba17-mosaic, body.page-id-72 #page_header .uba17-mosaic { position:absolute; inset:0; z-index:1; display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:4px; background:#fff; }
#page_header .uba17-mosaic__item { position:relative; overflow:hidden; min-width:0; min-height:0; }
#page_header .uba17-mosaic__item:first-child { grid-row:1 / 3; }
#page_header .uba17-mosaic__item:nth-child(2) { grid-column:2 / 4; }
#page_header .uba17-mosaic__item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.74); }
html.uba-js #page_header .uba17-mosaic__item { animation:uba17Tile .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(.1s + var(--i, 0) * .1s); }
@keyframes uba17Tile { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (max-width:767px) {
  body.page-id-71 #page_header .uba17-mosaic, body.page-id-72 #page_header .uba17-mosaic { grid-template-columns:1fr 1fr; gap:3px; }
  #page_header .uba17-mosaic__item:first-child { grid-row:auto; }
  #page_header .uba17-mosaic__item:nth-child(2) { grid-column:auto; }
}