/* 案A「ルーペ」（#queue の夜の帯の下半分。案3「100%の先」の100%から先だけを差し替え）
   下にメーター：左の枠（100%）に AI が作った20ファイルが細い短冊で並ぶ。人のルーペが1つずつ拡大して読み、
   読み終えた短冊は上端に朱の線が入って 1/20 → 1.6/20 の幅に広がる。20本とも広がると、帯は枠を越えて図の右端（160%）に届く。
   上に、途中で見つかった3か所（図面・パース・新・マイソク）と、右に大きな数字。目盛りは「100%」だけで、軸・比較の数字は置かない。
   群青＝AI、朱＝人。site.html の :root・.t-display・.t-body を使う。 */
.t3a{--shu:#D23A26;--shu-n:#F0745A;--fw:62.5%;--g:2px;--z:2.3;--chh:24px;--sh:0 14px 30px -14px rgba(0,0,0,.6);
  margin-top:clamp(120px,12vw,184px)}
.t3a-pin{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,5svh,64px)}
.t3a.is-live .t3a-pin{height:100svh;padding-top:calc(var(--hd,72px) + 1svh);align-content:center}
.t3a-copy{display:grid;gap:18px}
.t3a-sub{color:#C9CEC8}

/* 図：上段＝3か所（左の枠の幅）と数字（右）、下段＝メーター */
.t3a-fig{position:relative;display:grid;grid-template-columns:var(--fw) minmax(0,1fr);row-gap:clamp(50px,7svh,76px)}
.t3a-num{grid-column:2;grid-row:1;align-self:end;justify-self:end;display:flex;align-items:baseline;margin:0 0 -.06em;
  font-family:var(--num);font-weight:200;font-size:clamp(84px,min(12vw,22svh),208px);line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--paper)}
.t3a-pc{font-size:.46em;letter-spacing:0;margin-left:.04em}

/* 見つかった3か所：100%の時点の短冊の真上に置く（中心＝短冊 3・9・16 番の中心） */
.t3a-calls{grid-column:1;grid-row:1;position:relative;height:calc(var(--cw) / 1.5 + 34px);--cw:clamp(150px,min(16.8vw,26svh),236px)}
.t3a-call{position:absolute;bottom:0;width:var(--cw);display:grid;justify-items:start;gap:8px}
.t3a-call:nth-child(1){left:calc(17.5% - var(--cw) / 2)}
.t3a-call:nth-child(2){left:calc(47.5% - var(--cw) / 2)}
.t3a-call:nth-child(3){left:calc(82.5% - var(--cw) / 2)}
.t3a-cm{position:relative;width:100%;aspect-ratio:3/2;background:#fff;overflow:hidden;box-shadow:var(--sh);container-type:inline-size}
.t3a-cm-plan svg{width:100%;height:100%}
.t3a-cm-plan text{font-family:"Hiragino Sans","Noto Sans JP",sans-serif;font-size:170px;fill:#1b2430;text-anchor:middle;dominant-baseline:middle}
.t3a-st{fill:none;stroke:var(--shu);stroke-width:24;stroke-linecap:round}
.t3a-cm-plan .t3a-r{font-family:var(--num);font-weight:400;font-size:330px;fill:var(--shu)}
.t3a-cm-perse{perspective:900px}
.t3a-flip{position:absolute;inset:0}
.t3a-flip img{width:100%;height:100%;object-fit:cover}
.t3a-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.t3a-ring path{fill:none;stroke:var(--shu);stroke-linecap:round;stroke-linejoin:round}
.t3a-cm-perse .t3a-ring path{stroke-width:16;opacity:0}
.t3a-cm-band .t3a-ring path{stroke-width:2.4}
/* 新・マイソクの帯（元の画像の x1092・y950 から 210×140） */
.t3a-cm-band{background:#fff url(/assets/eaecd9fd90/shin_maisoku.jpg) no-repeat;background-size:761.9% auto;background-position:78.561% 95.766%}
.t3a-blank{position:absolute;left:61.6%;top:23.6%;width:26.4%;height:17.4%;background:#fff;opacity:0}
/* 直った印（朱のチェックの判） */
.t3a-ok{position:absolute;right:5%;bottom:7%;width:max(22px,17cqi);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 max(1.5px,.9cqi) var(--shu);transform:rotate(-10deg)}
.t3a-ok::after{content:"";position:absolute;left:27%;top:30%;width:46%;height:24%;border-left:max(2px,1.2cqi) solid var(--shu);border-bottom:max(2px,1.2cqi) solid var(--shu);transform:rotate(-45deg)}
.t3a-lab{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;background:var(--shu);color:#fff;font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.04em;white-space:nowrap}
/* 3か所と短冊を結ぶ線（短冊が広がって動いても、JS がその短冊の中心を指し続ける） */
.t3a-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.t3a-links path{fill:none;stroke:var(--shu-n);stroke-width:1.2}
.t3a-links circle{fill:var(--shu-n)}

/* メーター：高さ --mh。ルーペの径は帯より少しだけ大きい --D */
.t3a-meter{--mh:clamp(64px,min(9.4vw,15svh),136px);--D:calc(var(--mh) * 1.1);
  grid-column:1/-1;grid-row:2;position:relative;height:var(--mh);margin-bottom:calc(var(--mh) * .3 + 26px)}
/* 100%の枠：AIの20本がちょうど収まる幅。帯が越えても枠は動かない */
.t3a-frame{position:absolute;z-index:1;left:-7px;top:-7px;bottom:-7px;width:calc(var(--fw) + 14px);box-shadow:inset 0 0 0 1px rgba(242,243,240,.42);pointer-events:none}
.t3a-t100{position:absolute;right:0;bottom:calc(100% + 5px);transform:translateX(50%);padding:3px 6px;background:var(--night,#0D100E);
  font-family:var(--num);font-size:14px;font-weight:400;line-height:1;letter-spacing:.01em;color:#C9CEC8;white-space:nowrap}

/* 短冊の帯（下の帯と、ルーペの中の写しで同じ型を使う）。
   1本の幅＝枠の 1/20 ＋ 枠の3% × --e（0→1）。20本とも --e:1 で、合計が枠の 1.6 倍＝図の右端 */
.t3a-strip{display:flex;gap:var(--g);margin:0;padding:0}
.t3a-bar{position:absolute;left:0;top:0;bottom:0;width:var(--fw)}
.t3a-strip li{position:relative;flex:0 0 calc((100% - 19 * var(--g)) / 20 + 3% * var(--e, 1));overflow:hidden;background:#fff;transform-origin:50% 100%}
.t3a-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t3a-strip img.c{object-position:46% 60%;transform:scale(2.2)}
/* 人が読み終えた印：短冊の上端の細い朱の線（--r：0→1 で左から引く） */
.t3a-strip li::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:3px;background:var(--shu);transform:scaleX(var(--r,1));transform-origin:0 50%}
.t3a-strip li.is-err::after{content:"";position:absolute;z-index:2;inset:0;box-shadow:inset 0 0 0 2px var(--shu-n);opacity:var(--flag,0)}
.t3a-txt i{position:absolute;inset:14% 18%;background:repeating-linear-gradient(180deg,#9aa09b 0 2px,transparent 2px 7px)}

/* ルーペ：細い朱の輪＋短い柄。JS なしでは帯の右端（最後のファイル）の上に置く */
.t3a-loupe{position:absolute;z-index:4;left:calc(100% - var(--D) - 34px);top:calc(50% - var(--D) / 2);width:var(--D);height:var(--D);pointer-events:none}
.t3a.is-js .t3a-loupe{left:0;top:0}
.t3a-lens{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--night,#0D100E);box-shadow:0 16px 28px -14px rgba(0,0,0,.8)}
.t3a-lens-st{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 50%}
.t3a-mag{position:absolute;left:0;top:0;transform-origin:0 0}
.t3a-glass{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.t3a-glass circle,.t3a-glass path{fill:none;stroke:var(--shu);stroke-linecap:round;vector-effect:non-scaling-stroke}
.t3a-glass circle,.t3a-neck{stroke-width:2.5px}
.t3a-grip{stroke-width:6px}

/* AI / 人 の札。人の札はルーペの柄の先に付いて一緒に動く */
.t3a-who{position:absolute;left:0;right:0;top:calc(var(--mh) * .5 + var(--D) * .712 - var(--chh) / 2);height:var(--chh)}
.t3a-who span,.t3a-w-hu{display:inline-flex;align-items:center;min-height:var(--chh);padding:0 9px;font-size:13px;font-weight:600;line-height:1;letter-spacing:.04em;color:#fff;white-space:nowrap}
.t3a-who span{position:absolute;top:0}
.t3a-w-ai{left:0;background:var(--ultra);font-family:var(--num)}
.t3a-w-hu{position:absolute;left:calc(97% + 3px);top:calc(121.2% - var(--chh) / 2);background:var(--shu)}

/* 幅が狭いとき：数字→3か所（3等分）→メーターの順に縦に積む */
@media (max-width:860px){
  .t3a{--g:1px;--z:2.4;--chh:21px}
  .t3a-pin{row-gap:22px}
  .t3a.is-live .t3a-pin{align-content:center;padding-top:var(--hd,72px)}
  .t3a-copy{gap:10px}
  .t3a-fig{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .t3a-num{grid-column:1;grid-row:1;font-size:clamp(72px,24vw,120px)}
  .t3a-calls{grid-column:1;grid-row:2;--cw:calc((100% - 20px) / 3);height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px}
  .t3a-call{position:static;width:auto}
  .t3a-lab{font-size:11px;min-height:21px;padding:0 6px}
  .t3a-meter{grid-row:3;--mh:clamp(58px,10svh,84px);margin-top:34px}
  .t3a-strip li::before{height:2px}
  .t3a-glass circle,.t3a-neck{stroke-width:2px}
  .t3a-grip{stroke-width:4.5px}
  .t3a-who span,.t3a-w-hu{font-size:11px;padding:0 6px}
  .t3a-t100{font-size:12.5px}
}