/* ============================================================
   AIエージェント開発ページ専用 — 番付（ばんづけ）

   売っているのは「一つの仕事を丸ごと預かる働き手」。
   ならば道具は相撲のもの：番付表、東西、土俵、軍配。

   ・戸と暖簾は /dich-vu-thiet-ke-website/
   ・糸と型紙は /thiet-ke-va-lap-trinh-web-theo-yeu-cau/
   ・帳面と算盤は /viet-phan-mem-theo-yeu-cau/
   ・歯車は /viet-phan-mem-thoi-dai-ai/
   ここには持ち込まない。
   ============================================================ */

/* ---------- 序 — 番付が摺り上がる ---------- */
.banzuke-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(140px,17vh,186px) 0 clamp(30px,5vh,56px);
  background:#1B0330;--o:0;
}
.bz__sheet{
  position:absolute;inset:0;z-index:0;
  background:
    repeating-linear-gradient(0deg,rgba(60,32,10,.045) 0 1px,transparent 1px 26px),
    linear-gradient(180deg,#F2E6CD,#E7D6B3 58%,#DCC79C);
}
/* 摺り上がる墨の柱。--o で右から順に現れる */
.bz__cols{position:absolute;inset:0;z-index:1;display:flex;flex-direction:row-reverse;align-items:stretch}
.bz__col{
  flex:1 1 0;position:relative;display:flex;justify-content:center;padding-top:clamp(72px,11vh,132px);
  --d:calc(var(--n) / 12);
  --p:clamp(0, calc((var(--o) - var(--d) * .8) / .3), 1);
  opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 26px));
}
.bz__col b{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--f-mincho,serif);font-weight:800;color:#2A1A08;
  font-size:clamp(15px,2.1vw,30px);letter-spacing:.1em;line-height:1.05;white-space:nowrap;
}
.bz__col--big b{font-size:clamp(22px,3.4vw,52px)}
.bz__col i{
  position:absolute;left:50%;top:clamp(40px,6vh,72px);translate:-50% 0;font-style:normal;
  font-family:var(--f-mincho,serif);font-size:11px;letter-spacing:.24em;color:#7A5A2E;
}
.bz__seal{
  position:absolute;right:clamp(20px,4vw,72px);bottom:clamp(96px,15vh,170px);z-index:2;
  width:clamp(72px,9vw,116px);height:clamp(72px,9vw,116px);
  display:grid;place-items:center;opacity:calc(var(--o) * .95);
}
.bz__seal svg{position:absolute;inset:0;width:100%;height:100%}
.bz__seal .bz__blot{fill:var(--shu,#D6321F);opacity:.14}
.bz__seal .bz__ring{fill:none;stroke:var(--shu,#D6321F);stroke-width:5.5;opacity:.92}
.bz__seal u{
  position:relative;text-decoration:none;font-family:var(--f-mincho,serif);font-weight:800;
  color:var(--shu,#D6321F);font-size:clamp(15px,1.7vw,21px);line-height:1.1;text-align:center;
}
.bz__wash{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(22,3,40,.95) 0%,rgba(22,3,40,.88) 34%,rgba(22,3,40,.42) 60%,rgba(22,3,40,.06) 100%),
    linear-gradient(180deg,rgba(22,3,40,.52) 0%,transparent 22%,transparent 56%,rgba(22,3,40,.88) 100%);
}
.bz__body{position:relative;z-index:5;flex:0 1 auto}
.banzuke-hero .crumb{color:rgba(251,247,242,.62);margin-bottom:clamp(14px,2vh,22px)}
.banzuke-hero .crumb a{color:rgba(251,247,242,.72)}
.banzuke-hero .crumb b{color:var(--washi,#FBF7F2)}
.bz__eye{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(14px,2vh,22px);
  font-family:var(--f-lat,sans-serif);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-7,#CFA3FA);
}
.bz__eye i{width:26px;height:1px;background:var(--kin,#E8B33C);display:block}
.bz__h{
  margin:0 0 clamp(16px,2.4vh,26px);font-family:var(--f-mincho,serif);font-weight:800;
  font-size:clamp(30px,5.1vw,64px);line-height:1.24;letter-spacing:.02em;color:var(--washi,#FBF7F2);
}
.bz__h .ln{display:block;overflow:hidden}
.bz__h .ln > span{display:block}
.bz__h u{text-decoration:none;position:relative;white-space:nowrap}
.bz__h u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.05em;height:.09em;background:var(--shu,#D6321F)}
.bz__lead{margin:0;max-width:52ch;font-size:clamp(14px,1.5vw,16.5px);line-height:2.05;color:rgba(251,247,242,.86)}
.bz__lead em{font-style:normal;color:var(--kin,#E8B33C)}
.bz__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vh,32px)}
.banzuke-hero .wbtn--ghost{
  border-color:rgba(251,247,242,.5);color:var(--washi,#FBF7F2);
  background:rgba(22,3,40,.3);backdrop-filter:blur(6px);
}
.banzuke-hero .wbtn--ghost:hover{border-color:var(--kin,#E8B33C);color:var(--kin,#E8B33C)}
.bz__down{
  position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(24px,4vh,44px);z-index:5;
  writing-mode:vertical-rl;font-family:var(--f-lat,sans-serif);font-size:10px;
  letter-spacing:.32em;text-transform:uppercase;color:rgba(251,247,242,.55);
  display:flex;align-items:center;gap:12px;
}
.bz__down::after{content:"";width:1px;height:56px;
  background:linear-gradient(180deg,rgba(251,247,242,.6),transparent);
  animation:bzDrop 2.4s ease-in-out infinite;transform-origin:50% 0}
@keyframes bzDrop{0%,100%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}}

/* ---------- 敷居 — 軍配が向きを変える ---------- */
.gunbaiBand{
  position:relative;--o:0;overflow:hidden;pointer-events:none;
  height:calc(clamp(96px,15vh,160px) + var(--seam,0px));
  background:linear-gradient(180deg,#2A1A08,#1B1105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.4);
}
.gb__line{
  position:absolute;left:8%;right:8%;top:clamp(50px,7.6vh,84px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,179,60,.34) 12%,rgba(232,179,60,.34) 88%,transparent);
}
.gb__fan{
  position:absolute;left:50%;top:clamp(24px,4.2vh,52px);translate:-50% 0;
  width:52px;height:70px;transform-origin:50% 88%;
  transform:translateX(-50%) rotate(calc(-46deg + var(--o) * 92deg));
}
.gb__fan i{                      /* 面 */
  position:absolute;left:0;right:0;top:0;height:46px;border-radius:44% 44% 30% 30%;
  background:linear-gradient(180deg,#F0D9A8,#C79A4E);
  box-shadow:inset 0 0 0 3px #6E4A1B, 0 4px 8px -4px rgba(0,0,0,.6);
}
.gb__fan b{                      /* 房 */
  position:absolute;left:50%;top:6px;translate:-50% 0;font-size:15px;color:#6E4A1B;
  font-family:var(--f-mincho,serif);font-weight:800;
}
.gb__fan s{                      /* 柄 */
  position:absolute;left:50%;top:42px;translate:-50% 0;width:7px;height:30px;border-radius:3px;
  background:linear-gradient(180deg,#7A5A2E,#3A2810);text-decoration:none;
}
.gb__cap{
  position:absolute;left:50%;top:clamp(10px,1.8vh,18px);translate:-50% 0;z-index:5;
  font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(240,217,168,.85);opacity:calc(var(--o) * .9);white-space:nowrap;
}

/* ---------- 番付表 — 押すと土俵に上がる ---------- */
.bandsu{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);margin-top:clamp(26px,4vh,44px);align-items:start;
}
.bd__board{
  position:relative;padding:clamp(18px,2.4vw,30px);
  background:linear-gradient(180deg,#F3E7CE,#E6D4B0);
  border:3px solid #2A1A08;box-shadow:6px 8px 0 rgba(26,3,48,.35);
}
.bd__board::after{content:"";position:absolute;inset:7px;border:1px solid rgba(42,26,8,.4);pointer-events:none}
.bd__ttl{
  display:block;text-align:center;font-family:var(--f-mincho,serif);font-weight:800;
  font-size:clamp(17px,2.2vw,24px);letter-spacing:.4em;color:#2A1A08;margin-bottom:14px;
}
.bd__two{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(8px,1.4vw,18px)}
.bd__side{display:flex;flex-direction:column;gap:6px}
.bd__side h4{
  margin:0 0 4px;text-align:center;font-family:var(--f-mincho,serif);font-size:12px;
  letter-spacing:.3em;color:#7A5A2E;font-weight:700;
}
.bd__spine{width:2px;background:repeating-linear-gradient(180deg,#2A1A08 0 8px,transparent 8px 14px)}
.bd__e{
  appearance:none;cursor:pointer;text-align:left;width:100%;
  border:0;border-bottom:1px dashed rgba(42,26,8,.3);background:transparent;
  padding:9px 8px;display:flex;align-items:baseline;gap:9px;
  font-family:var(--f-mincho,serif);color:#2A1A08;transition:background .18s ease;
}
.bd__e:hover{background:rgba(214,50,31,.07)}
.bd__e[aria-selected="true"]{background:rgba(214,50,31,.13)}
.bd__e[aria-selected="true"]::before{content:"";position:absolute;left:0;width:3px;height:22px;background:var(--shu,#D6321F)}
.bd__e{position:relative}
.bd__e u{text-decoration:none;font-size:10px;letter-spacing:.2em;color:#8A6A34;flex:none;width:1.8em}
.bd__nm{display:block;min-width:0}
.bd__e b{display:block;font-size:clamp(14px,1.6vw,17px);font-weight:800;letter-spacing:.06em;white-space:nowrap}
.bd__e em{
  display:block;font-style:normal;font-size:10.5px;letter-spacing:.1em;
  color:#6B4A1E;opacity:.85;margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.bd__e--top b{font-size:clamp(16px,1.9vw,20px)}

/* 土俵 */
.bd__ring{position:relative;min-height:clamp(320px,44vh,470px);display:flex;flex-direction:column}
.bd__dohyo{
  position:relative;flex:1;display:grid;place-items:end center;
  background:radial-gradient(120% 84% at 50% 96%,#C9A46A 0%,#A97F42 46%,transparent 68%);
  overflow:hidden;
}
.bd__dohyo::before{                 /* 俵の輪 */
  content:"";position:absolute;left:50%;bottom:8%;translate:-50% 0;
  width:min(78%,330px);aspect-ratio:2.6/1;border-radius:50%;
  border:5px dashed rgba(110,74,27,.7);
}
.bd__fig{
  position:relative;z-index:2;width:min(62%,240px);margin-bottom:9%;
  overflow:hidden;border-radius:50%;
  /* §4.2c 主役の見え方を、走っている仕掛けに預けない。
     透明度は動かさず、位置と大きさだけ動かす。
     止まっても、少しずれた絵が残るだけで済む。 */
  transition:transform .46s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
/* 似顔は白いシールの枠つきで描かれている。そのまま置くと、
   土俵の上に白い札を貼ったように見える。丸く抜いて枠を外へ逃がす。
   序の丸と同じ扱い。 */
.bd__fig img{
  width:100%;aspect-ratio:1;height:auto;display:block;
  object-fit:cover;border-radius:50%;scale:1.04;
  box-shadow:0 0 0 1px rgba(232,179,60,.5), 0 14px 24px -12px rgba(26,3,48,.6);
}
.bd__fig.is-out{transform:translateY(16px) scale(.95)}
.bd__card{
  background:var(--washi,#FBF7F2);border:1px solid rgba(39,1,71,.16);
  padding:clamp(14px,1.8vw,20px);box-shadow:0 24px 40px -34px rgba(26,3,48,.8);
}
.bd__card h3{margin:0 0 4px;font-family:var(--f-mincho,serif);font-size:clamp(17px,2.1vw,22px);line-height:1.4;color:var(--ink-1,#270147)}
.bd__card .bd__role{display:block;font-size:11px;letter-spacing:.2em;color:var(--ink-4,#8129DB);margin-bottom:10px}
.bd__card p{margin:0 0 12px;font-size:13px;line-height:1.95;opacity:.85}
.bd__card dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:12px;line-height:1.8}
.bd__card dt{font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4,#8129DB);align-self:center}
.bd__card dd{margin:0}
.bd__foot{margin-top:clamp(18px,2.6vh,28px);font-size:12.5px;line-height:1.95;opacity:.78}

@media (max-width:900px){
  .bandsu{grid-template-columns:minmax(0,1fr)}
  .bd__ring{min-height:auto}
  .bd__dohyo{min-height:260px}
  .bz__wash{background:linear-gradient(180deg,rgba(22,3,40,.56) 0%,rgba(22,3,40,.82) 22%,rgba(22,3,40,.90) 46%,rgba(22,3,40,.94) 100%)}
}
@media (max-width:560px){
  .bd__two{grid-template-columns:1fr}
  .bd__spine{display:none}
  .bd__e em{font-size:10px}
}
@media (prefers-reduced-motion:reduce){ .bz__down::after{animation:none} .bd__fig{transition:none} }

/* ---------- 引き渡したあとの写真帯 ---------- */
.kkBand{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);margin-top:clamp(24px,3.6vh,40px);
}
.kkB{position:relative;margin:0;min-width:0;overflow:hidden;background:var(--ink-1,#270147)}
.kkB img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.kkB figcaption{
  position:absolute;left:0;bottom:0;background:rgba(20,2,38,.74);color:var(--washi,#FBF7F2);
  font-size:10.5px;letter-spacing:.1em;padding:6px 10px;
}
@media (max-width:760px){ .kkBand{grid-template-columns:minmax(0,1fr)} }

/* ---------- 番付の顔 ----------
   名前だけ並べても「八体いる」ことは伝わらない。
   休んでいるときに八つの顔が見えて、はじめて一門に見える。 */
.bd__e{gap:11px;align-items:center;padding:8px 8px 8px 4px}
.bd__ava{
  flex:none;width:clamp(34px,3.4vw,44px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:#EFE3CC;box-shadow:0 0 0 1px rgba(42,26,8,.34);
  /* 白い絵を灰にすると、四十ピクセルの丸の中では白紙に見える。
     控えさせるのは彩度を少し落とすところまで。 */
  filter:saturate(.55) contrast(1.08);
  transition:filter .35s ease, box-shadow .35s ease, scale .35s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
.bd__ava img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* 全身の絵をそのまま入れると顔が豆粒になる。顔まで寄せる */
  object-position:50% 26%;scale:1.62;
}
.bd__e:hover .bd__ava{filter:saturate(.9) contrast(1.08)}
.bd__e[aria-selected="true"] .bd__ava{
  filter:none;scale:1.06;box-shadow:0 0 0 2px var(--shu,#D6321F);
}

/* ---------- 番付が書かれていく ----------
   一行ずつ墨が入る。上から順に、書き手の手の速さで。 */
.bd__e{--ink:0}
.bd__e .bd__nm,.bd__e u{opacity:var(--ink);transition:opacity .5s ease}
.bd__e .bd__ava{opacity:var(--ink);transition:opacity .5s ease, filter .35s ease, box-shadow .35s ease, scale .35s ease}
.bd__e::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;
  width:calc(var(--ink) * 100%);background:rgba(42,26,8,.42);
}
.bandsu.is-inked .bd__e{--ink:1}
@media (prefers-reduced-motion:reduce){
  .bd__e,.bd__e .bd__nm,.bd__e u,.bd__e .bd__ava{--ink:1;opacity:1;transition:none}
}
@media (max-width:760px){ .bd__ava{width:32px} }

/* ---------- 序に一門を出す ----------
   「八体が動いています」と書くより、八つの顔を並べたほうが早い。
   序で顔が見えないと、この頁は最後まで話だけになる。 */
.bz__pill{
  display:inline-flex;align-items:center;gap:9px;
  margin:clamp(18px,2.6vh,26px) 0 clamp(14px,2vh,18px);
  padding:6px 14px;border:1px solid rgba(232,179,60,.42);border-radius:999px;
  font-family:var(--f-mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.05em;
  color:rgba(243,232,208,.92);white-space:nowrap;
}
.bz__pill i{width:6px;height:6px;border-radius:50%;background:#E8B33C;flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){ .bz__pill i{animation:bzPulse 2.6s ease-in-out infinite} }
@keyframes bzPulse{50%{box-shadow:0 0 0 5px rgba(232,179,60,.10)}}
.bz__pill b{font-weight:400;opacity:.4;margin:0 2px}

.bz__fleet{
  list-style:none;margin:0 0 clamp(20px,3vh,28px);padding:0;
  display:flex;flex-wrap:nowrap;gap:clamp(7px,.9vw,12px);
}
.bz__fleet li{
  display:flex;flex-direction:column;align-items:center;gap:5px;width:clamp(44px,4.1vw,54px);
  /* §4.2c 透明度は動かさない。ここを 0 から始めると、
     遷移が走らなかった場面で一門ごと消える（実際に消えた）。
     一人ずつ上がる感じは、位置だけで出す。 */
}
.bz__fleet.is-in li{
  animation:bzfUp .62s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--n) * .07s);
}
@keyframes bzfUp{ from{translate:0 14px} to{translate:0 0} }
.bzf__f{
  width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#EFE3CC;
  box-shadow:0 0 0 1px rgba(232,179,60,.5), 0 6px 16px -10px rgba(0,0,0,.7);
  transition:box-shadow .3s ease, scale .3s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
.bzf__f img{width:100%;height:100%;object-fit:cover;display:block;object-position:50% 26%;scale:1.6}
.bz__fleet li:hover .bzf__f{scale:1.08;box-shadow:0 0 0 2px var(--shu,#D6321F), 0 10px 22px -12px rgba(0,0,0,.8)}
.bz__fleet b{font-family:var(--f-mincho,serif);font-size:11px;color:#E8B33C;line-height:1}
.bz__fleet em{
  font-style:normal;font-size:9px;letter-spacing:.02em;line-height:1.4;text-align:center;
  color:rgba(243,232,208,.56);
}
@media (max-width:760px){
  .bz__fleet{gap:8px}
  .bz__fleet li{width:46px}
  .bz__fleet em{display:none}
  .bz__pill{white-space:normal;font-size:9.5px}
}

/* 序に八体を入れたぶん、字を詰める。顔が画面の外に出たら意味が無い */
.bz__lead{max-width:46ch}
.bz__pill{margin:clamp(14px,2vh,20px) 0 clamp(11px,1.6vh,14px)}
.bz__fleet{margin-bottom:clamp(16px,2.4vh,22px)}
@media (max-height:820px){
  .banzuke-hero{padding-top:clamp(104px,13vh,140px)}
  .bz__h{font-size:clamp(27px,4.4vw,52px)}
  .bz__lead{line-height:1.9}
}
/* 序の札は一語だけ。二行に折れて切れるくらいなら、番付の欄名に揃える */
.bz__fleet em{white-space:nowrap}

/* ---------- 取組 — 五番、軍配は東へ ----------
   表で並べても優劣は伝わるが、何も起きない。
   一番ずつ軍配が上がるほうが、読み手の体が動く。 */
.torikumi{margin-top:clamp(24px,3.6vh,40px);--o:0}
.tk__head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.16);
  font-size:11px;letter-spacing:.14em;color:rgba(243,232,208,.5);
}
.tk__head span:last-child{text-align:right}
.tk__vs{
  font-family:var(--f-mincho,serif);font-size:13px;letter-spacing:.3em;
  color:var(--shu,#D6321F);opacity:.9;
}
.tk__list{list-style:none;margin:0;padding:0}
.tk__r{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr) auto minmax(0,1.3fr);
  align-items:center;gap:clamp(10px,1.5vw,20px);
  padding:clamp(13px,2vh,20px) 0;border-bottom:1px solid rgba(255,255,255,.11);
  /* 一番ずつ決まる。--w が 0→1 でその番の勝負がつく */
  --w:clamp(0, (var(--o) - var(--n) * .155) * 5.2, 1);
}
.tk__no{
  font-family:var(--f-mincho,serif);font-size:12px;letter-spacing:.1em;
  color:rgba(232,179,60,.7);white-space:nowrap;
}
.tk__q{font-size:12px;line-height:1.6;color:rgba(243,232,208,.62);white-space:nowrap}
.tk__side{display:block;min-width:0}
.tk__side em{
  display:block;font-style:normal;font-size:9.5px;letter-spacing:.1em;margin-bottom:3px;
  color:rgba(243,232,208,.36);
}
.tk__side b{display:block;font-size:clamp(12px,1.35vw,14px);line-height:1.65;font-weight:400}
/* 西は負ける。墨が薄くなり、線が一本引かれる */
.tk__side--w b{
  color:rgba(243,232,208,calc(.82 - var(--w) * .48));
  text-decoration:line-through rgba(214,50,31,calc(var(--w) * .8));
  text-decoration-thickness:1px;
}
/* 東は上がる */
.tk__side--e b{
  color:rgba(243,232,208,calc(.6 + var(--w) * .4));
  font-weight:calc(400 + var(--w) * 300);
}
/* 軍配。決まるとき東へ返る */
.tk__fan{
  position:relative;width:26px;height:30px;flex:none;
  rotate:calc(-32deg + var(--w) * 62deg);
  transition:rotate .1s linear;
}
.tk__fan i{
  position:absolute;left:50%;top:0;translate:-50% 0;
  width:15px;height:19px;border-radius:3px 3px 7px 7px;
  background:linear-gradient(180deg, #E8B33C, #B8862A);
  box-shadow:0 0 0 1px rgba(42,26,8,.4);
  opacity:calc(.32 + var(--w) * .68);
}
.tk__fan::after{
  content:"";position:absolute;left:50%;top:17px;translate:-50% 0;
  width:2px;height:13px;background:#6B4A1E;border-radius:1px;
  opacity:calc(.32 + var(--w) * .68);
}
.tk__note{
  margin:clamp(14px,2vh,20px) 0 0;font-size:11.5px;line-height:1.95;
  color:rgba(243,232,208,.5);max-width:80ch;
}
.tk__note b{color:#E8B33C}
@media (max-width:900px){
  .tk__r{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .tk__q{grid-column:2;white-space:normal}
  .tk__side{grid-column:1/-1}
  .tk__fan{grid-column:1/-1;justify-self:center;rotate:calc(-32deg + var(--w) * 62deg)}
  .tk__head{font-size:10px}
}

/* ---------- 序の右 — 土俵に一体 ----------
   右半分を空けたままにしない。番付の話をしている頁で、
   右が更地なのは「見せるものが無い」と言っているのと同じ。
   一体ずつ上がって入れ替わる。参考にした型は
   TOONHUB の役割送り（650ms / cubic-bezier(.4,0,.2,1)）。 */
.bz__body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(20px,4vw,64px);align-items:center;
}
.bz__left{min-width:0}
.bz__stand{
  position:relative;min-width:0;align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,16px);
  padding-bottom:clamp(10px,2vh,22px);
}
/* 土俵 */
.bzs__ring{
  position:absolute;left:50%;bottom:clamp(52px,8vh,86px);translate:-50% 0;
  width:min(88%,420px);aspect-ratio:2.6;border-radius:50%;
  background:radial-gradient(closest-side, rgba(201,164,106,.5), rgba(169,127,66,.22) 62%, rgba(169,127,66,0) 78%);
  box-shadow:inset 0 0 0 1px rgba(232,179,60,.28);
}
.bzs__ring::after{
  content:"";position:absolute;inset:14% 12%;border-radius:50%;
  border:1px dashed rgba(232,179,60,.34);
}
.bzs__fig{
  position:relative;display:block;width:min(78%,360px);aspect-ratio:1;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.45));
}
.bzs__fig img{
  /* 序の丸と同じ扱いにする。四角い下地のままだと札に見えて、
     土俵に上がっている感じが出ない */
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
  box-shadow:0 0 0 1px rgba(232,179,60,.45);
  /* 既定は「見えている」。
     入れ替わりは transition ではなく animation で書く。
     class を差し替えて起こす遷移は、走り出したまま止まることがある
     （§4.2 の類。opacity 0.1 のまま土俵が空になった）。
     keyframes なら、止まっても both で終端に落ちる。 */
  opacity:1;translate:0 0;scale:1;
}
.bz__stand.is-swap .bzs__fig img{
  animation:bzsUp .62s cubic-bezier(.4,0,.2,1) both;
}
/* 透明度は動かさない。止まったときに土俵が空になるのがいちばん悪い。
   動かすのは位置と大きさだけ。止まっても、少しずれた絵が残るだけで済む。 */
@keyframes bzsUp{
  from{translate:0 16px;scale:.955}
  to  {translate:0 0;scale:1}
}
/* 名乗り */
/* 名乗りは絵の下。絵に重ねると読めない */
.bzs__plate{position:relative;text-align:center;white-space:nowrap}
.bzs__plate b{
  display:block;font-family:var(--f-mincho,serif);font-size:clamp(15px,1.9vw,21px);
  font-weight:800;letter-spacing:.08em;color:#F3E8D0;
}
.bzs__plate em{
  display:block;margin-top:3px;font-style:normal;font-size:10.5px;letter-spacing:.14em;
  color:rgba(232,179,60,.86);
}
/* 何番目か */
.bzs__dots{position:absolute;right:clamp(-2px,0.4vw,10px);top:50%;translate:0 -50%;display:grid;gap:7px}
.bzs__dots i{
  display:block;width:5px;height:5px;border-radius:50%;
  background:rgba(243,232,208,.28);transition:background .3s ease, scale .3s ease;
}
.bzs__dots i.is-now{background:#E8B33C;scale:1.5}
@media (max-width:1000px){
  .bz__body{grid-template-columns:minmax(0,1fr)}
  .bz__stand{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bz__stand.is-swap .bzs__fig img{animation:none;opacity:1;translate:0;scale:1}
}
/* 序の丸は八つで一行。折り返したら一門に見えない */
.bz__fleet{flex-wrap:nowrap}
.bz__fleet b{font-size:10px}
.bz__fleet em{font-size:8.5px}
.bzs__dots{right:clamp(-14px,-1vw,-4px)}

/* 指で触る画面：番付の下の「後ろ／次」と、脚の戻り道が細かった */
@media (max-width:700px){
  .bd__foot a,.nb a{display:inline-block;padding:9px 4px}
}