/* ===== ☀ お昼の番組で見る（どうめいの おひるマネー）=====
   AIキャスター（架空の女性）と AIどうめいの2人が、掛け合い（問答）でニュースを伝えるモード。
   スタジオは写真素材の重ね合わせ（奥から：img/hiru_bg.jpg → 2人（hiru_caster.webp・studio_anchor.webp）→ 机 hiru_desk.webp）。
   ※ 2人とも写真はそのまま（口・表情・服は加工しない）。話している人を少し明るく・軽く弾ませるだけ。声はブラウザ標準の読み上げ。
   夜の番組（studio.css の .st-*）とは別の名前（.hr-*）にしてあるので、互いに影響しない。 */

/* 開くボタン（ページ上部・夜の番組のボタンの下） */
.hr-open{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 18px 10px 12px;border:0;border-radius:16px;cursor:pointer;
  background:linear-gradient(100deg,#ffb300,#ff8a3d 55%,#ff6f91);color:#fff;font-weight:bold;font-size:17px;line-height:1.3;text-align:left;
  box-shadow:0 4px 0 #c75b12,0 8px 20px #ff8a3d55;position:relative;overflow:hidden;max-width:100%;text-shadow:0 1px 2px #0003}
.hr-open:hover{filter:brightness(1.06)}
.hr-open:active{transform:translateY(2px);box-shadow:0 2px 0 #c75b12}
.hr-open .sun{flex:0 0 auto;width:46px;height:34px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;box-shadow:inset 0 0 0 3px #ffe082;text-shadow:none}
.hr-open small{display:block;font-size:11px;font-weight:normal;opacity:.95}
.hr-open .on{position:absolute;right:10px;top:8px;font-size:10px;letter-spacing:.06em;color:#fff8d6}
.hr-open::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff44 45%,transparent 60%);transform:translateX(-100%);animation:hrShine 5s ease-in-out infinite}
@keyframes hrShine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ===== 全画面 ===== */
.hr{position:fixed;inset:0;z-index:100000;background:#fff8ec;color:#2b2b3a;font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;
  --cc:#ff8a3d;--cc2:#ffd54f;--ca:#ff5c8a;--ic:#1e88e5}
.hr[hidden]{display:none}
.hr *{box-sizing:border-box}
.hr-wrap{display:flex;flex-direction:column;height:100%;height:100dvh}
.hr-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;container:hrstage / size;background:#fdf3e0}

/* --- 舞台（16:9 の箱）。考え方は夜の番組と同じ（箱を画面いっぱいに広げ、部品は箱に対する % で置く） --- */
.hr-stage>*{
  --W:min(max(100cqw,177.78cqh),222.2cqh);
  --H:calc(var(--W) * .5628);
  --X:clamp(min(0px,calc(100cqw - var(--W))), calc(50cqw - var(--W) * .5), max(0px,calc(50cqw - var(--W) * .5)));
  --Y:clamp(calc(100cqh - var(--H)), calc(50cqh - var(--H) * .55), 0px);
  /* 2人の位置（箱の幅に対する%）。PC では中央奥のモニターにかからない両はし */
  --cx:20.5%;--ix:80%;
}
.hr-stage::before{content:"";position:absolute;inset:-30px;background:url(img/hiru_bg.jpg) center / cover no-repeat;filter:blur(18px) brightness(1.02) saturate(1.1)}
.hr-set{position:absolute;left:var(--X);top:var(--Y);width:var(--W);height:var(--H);
  background:#fdf3e0 url(img/hiru_bg.jpg) center / 100% 100% no-repeat}

/* --- 2人（写真そのまま。話している人を少し明るく・軽く弾ませる） ---
   顔の大きさをそろえる：女性の写真は顔の幅が画像の約34%、どうめいの写真は約47%なので、どうめいの写真を約0.72倍に。
   2人とも机のうしろに座っているように、写真の下のほうは机で隠す。 */
.hr-p{position:absolute;transform:translateX(-50%);z-index:3}
.hr-p.ca{left:var(--cx);top:33.5%;height:53%;aspect-ratio:675/1024}
.hr-p.ic{left:var(--ix);top:31.5%;height:38.5%;aspect-ratio:683/1024}
.hr-b{position:absolute;inset:0;transform-origin:50% 90%;animation:hrBreath 6s ease-in-out infinite}
.hr-p.ic .hr-b{animation-delay:-2.5s}
.hr-b img{display:block;width:100%;height:100%;transition:filter .35s;filter:brightness(1) saturate(1) drop-shadow(0 6px 10px #b0712a30)}
.hr-p.ic .hr-b img{filter:brightness(1.02) saturate(.98) drop-shadow(0 6px 10px #b0712a30)}
@keyframes hrBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-.35%)}}
/* 話している人：明るく・ぴょこぴょこ／聞いている人：ほんの少し暗く */
.hr.t-ca .hr-p.ca .hr-b,.hr.t-both .hr-p.ca .hr-b{animation:hrHop .62s ease-in-out infinite alternate}
.hr.t-ic .hr-p.ic .hr-b,.hr.t-both .hr-p.ic .hr-b{animation:hrHop .58s ease-in-out infinite alternate}
.hr.t-ca .hr-p.ca .hr-b img,.hr.t-both .hr-p.ca .hr-b img,.hr.t-ic .hr-p.ic .hr-b img,.hr.t-both .hr-p.ic .hr-b img{filter:brightness(1.09) saturate(1.06) drop-shadow(0 0 14px #fff6c8) drop-shadow(0 6px 10px #b0712a30)}
.hr.t-ca .hr-p.ic .hr-b img,.hr.t-ic .hr-p.ca .hr-b img{filter:brightness(.93) saturate(.92) drop-shadow(0 6px 10px #b0712a30)}
@keyframes hrHop{from{transform:translateY(0) scale(1)}to{transform:translateY(-1.1%) scale(1.008)}}
.hr-b.nod{animation:hrNod .7s ease-in-out !important}
@keyframes hrNod{0%,100%{transform:none}40%{transform:translateY(.8%) rotate(.6deg)}}

/* 名札（いつも出す。架空・AIであることを明記） */
.hr-plate{position:absolute;z-index:6;transform:translateX(-50%);top:57.5%;display:flex;flex-direction:column;align-items:center;gap:1px;white-space:nowrap;
  background:#fffffff2;border-radius:999px;padding:.35em 1.1em .4em;box-shadow:0 4px 12px #b0712a40;border:3px solid #ffd54f;transition:transform .3s,box-shadow .3s,border-color .3s}
.hr-plate.ca{left:var(--cx);border-color:#ffb3c7}
.hr-plate.ic{left:var(--ix);border-color:#9fd0ff}
.hr-plate b{font-size:clamp(11px,min(2.7cqh,1.6cqw),21px);letter-spacing:.04em;line-height:1.15}
.hr-plate.ca b{color:#e43d6f}.hr-plate.ic b{color:#1769c2}
.hr-plate span{font-size:clamp(8px,min(1.8cqh,1.1cqw),13px);color:#6b6f80;line-height:1.2}
.hr-plate .mic{position:absolute;left:-.6em;top:50%;transform:translateY(-50%) scale(0);font-size:1.2em;transition:transform .25s}
.hr.t-ca .hr-plate.ca,.hr.t-both .hr-plate.ca{transform:translateX(-50%) scale(1.06);box-shadow:0 0 0 4px #ff5c8a55,0 6px 16px #ff5c8a55}
.hr.t-ic .hr-plate.ic,.hr.t-both .hr-plate.ic{transform:translateX(-50%) scale(1.06);box-shadow:0 0 0 4px #1e88e555,0 6px 16px #1e88e555}
.hr.t-ca .hr-plate.ca .mic,.hr.t-both .hr-plate.ca .mic,.hr.t-ic .hr-plate.ic .mic,.hr.t-both .hr-plate.ic .mic{transform:translateY(-50%) scale(1)}

/* --- 机（写真）と番組ロゴ --- */
.hr-desk{position:absolute;left:50%;bottom:0;width:79%;aspect-ratio:1671/428;transform:translateX(-50%);z-index:5}
.hr-desk img{display:block;width:100%;height:100%}
.hr-desk-logo{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-2deg);white-space:nowrap;line-height:1;text-align:center;
  font-size:calc(var(--W) * .022);font-weight:900;letter-spacing:.04em;color:#ff7a1a;background:#fffdf6;border:.16em solid #ffd54f;border-radius:999px;padding:.3em .9em .32em;
  box-shadow:0 .12em 0 #f3b41b,0 .3em .6em #b0712a40;animation:hrLogo 3.2s ease-in-out infinite}
.hr-desk-logo small{font-size:.62em;color:#ff5c8a;margin-right:.25em}
.hr-desk-logo i{font-style:normal;margin-right:.2em}
@keyframes hrLogo{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-54%) rotate(-1deg)}}

/* --- 中央奥のモニター（背景写真の青空の大画面：左右 34.9%〜71.1%、上下 16.7%〜46.9%）にはめ込む --- */
.hr-mon{position:absolute;z-index:2;left:calc(var(--X) + var(--W) * .349);top:calc(var(--Y) + var(--H) * .167);width:calc(var(--W) * .362);height:calc(var(--H) * .302);
  border-radius:3px;overflow:hidden;box-shadow:0 0 0 2px #ffffffaa}
.hr-mon-in{position:relative;width:100%;height:100%;overflow:hidden;container:hrmon / size;
  background:linear-gradient(160deg,#e9f6ff,#fffaf0 55%,#fff1f5)}
.hr-mon-in::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 100% 0%,color-mix(in srgb,var(--cc) 22%,transparent),transparent 70%);transition:background 1s}
.hr-mp{position:absolute;inset:0;padding:5cqh 4.5cqw;display:flex;flex-direction:column;gap:2.4cqh;overflow:hidden;animation:hrMonIn .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes hrMonIn{from{opacity:0;transform:scale(.94) translateY(3%)}to{opacity:1;transform:none}}
.hr-mk{display:inline-flex;align-self:flex-start;align-items:center;gap:.4em;background:var(--cc);color:#fff;font-weight:900;font-size:clamp(9px,6cqh,22px);padding:.2em .8em;border-radius:99px;transition:background 1s;box-shadow:0 .15em 0 #0001}
.hr-mt{font-size:clamp(12px,min(9cqh,6cqw),40px);font-weight:900;line-height:1.3;color:#22263a}
.hr-ms{font-size:clamp(10px,min(6cqh,4.2cqw),24px);line-height:1.5;color:#434a60}
.hr-mrow{display:flex;gap:3.5cqw;align-items:center}
.hr-mimg{flex:0 0 auto;width:min(30cqh,24cqw);aspect-ratio:1;border-radius:18%;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;font-size:min(18cqh,14cqw);position:relative;box-shadow:0 0 0 3px #fff,0 4px 10px #0002}
.hr-mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hr-box{background:#fff;color:#22263a;border-radius:14px;padding:2.4cqh 3cqw;font-size:clamp(10px,min(6cqh,4.4cqw),26px);line-height:1.5;font-weight:bold;border:3px solid var(--cc);box-shadow:0 4px 0 color-mix(in srgb,var(--cc) 40%,#fff);transition:border-color 1s}
.hr-box small{display:block;font-size:.72em;color:#7a7f90;margin-bottom:.15em}
.hr-box.sushi{background:#fff7e8;border-color:#ff9800}
.hr-src{margin-top:auto;font-size:clamp(8px,3.6cqh,14px);color:#7a7f90;line-height:1.4}
.hr-logo{font-size:clamp(18px,min(14cqh,9cqw),74px);font-weight:900;text-align:center;margin-top:2cqh;color:#ff7a1a;letter-spacing:.03em;text-shadow:0 .06em 0 #ffd54f}
.hr-logo small{display:block;font-size:.4em;color:#ff5c8a;letter-spacing:.1em}
.hr-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1.6cqh 1.6cqw;font-size:clamp(9px,min(5.4cqh,3.4cqw),20px)}
.hr-menu li{background:#fff;border:2px solid #ffd54f;border-radius:99px;padding:.25em .8em;font-weight:bold;white-space:nowrap}
.hr-board{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqh 2cqw}
.hr-board div{background:#fff;border-radius:12px;padding:1.6cqh 2cqw;box-shadow:0 2px 0 #0000000d}
.hr-board small{display:block;font-size:clamp(8px,4cqh,15px);color:#7a7f90}
.hr-board b{font-size:clamp(12px,min(7.5cqh,4cqw),32px);font-variant-numeric:tabular-nums}
.hr-board em{font-style:normal;font-size:clamp(8px,4cqh,15px);margin-left:.3em}
.hr-up{color:#e53935}.hr-dn{color:#1e6fd9}.hr-fl{color:#888}
.hr-big{font-size:clamp(24px,min(20cqh,12cqw),110px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:#22263a}
.hr-big small{font-size:.3em;margin-left:.2em}
.hr-bigrow{display:flex;align-items:baseline;gap:3cqw;flex-wrap:wrap}
.hr-bars{display:flex;flex-direction:column;gap:.4cqh;font-size:clamp(8px,3.6cqh,14px);line-height:1.25}
.hr-bars>small{color:#7a7f90}
.hr-bars div{display:grid;grid-template-columns:7.5em 1fr 3.2em;align-items:center;gap:.5em}
.hr-bars i{display:block;height:1.8cqh;min-height:5px;border-radius:9px;background:#d9dfea}
.hr-bars .on{font-weight:bold}.hr-bars .on i{background:var(--cc)}
.hr-bars span{text-align:right;font-variant-numeric:tabular-nums}
.hr-q{display:flex;flex-direction:column;gap:1.8cqh;margin:0;padding:0;list-style:none}
.hr-q li{display:flex;align-items:center;gap:.6em;background:#fff;border:2px solid #e3e6ef;border-radius:14px;padding:1.4cqh 2.4cqw;font-size:clamp(10px,min(6cqh,4.2cqw),26px);font-weight:bold;transition:background .4s,transform .4s,opacity .4s}
.hr-q li b{flex:0 0 auto;width:1.8em;height:1.8em;border-radius:50%;background:#7e57c2;color:#fff;display:flex;align-items:center;justify-content:center}
.hr-q li.guess{border-color:#1e88e5;box-shadow:0 0 0 3px #1e88e533}
.hr-q li .g{margin-left:auto;font-size:.75em;color:#1769c2;white-space:nowrap}
.hr-q.rv li{opacity:.4}
.hr-q.rv li.ok{opacity:1;background:#e7f8ee;border-color:#2e9e5b;transform:scale(1.03)}
.hr-q.rv li.ok b{background:#2e9e5b}
.hr-count{flex:0 0 auto;width:clamp(26px,min(13cqh,9cqw),64px);aspect-ratio:1;border-radius:50%;background:#7e57c2;color:#fff;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,min(7cqh,5cqw),34px);font-weight:900;box-shadow:0 0 0 5px #7e57c233;animation:hrPop 1s ease-in-out infinite}
@keyframes hrPop{50%{transform:scale(1.1)}}
.hr-who{display:inline-block;font-size:.8em;font-weight:900;color:#fff;border-radius:99px;padding:.05em .6em;margin-right:.3em}
.hr-who.ca{background:var(--ca)}.hr-who.ic{background:var(--ic)}

/* モニターは横長（約2.2:1）なので左右2段組みにする */
@container hrmon (min-aspect-ratio: 17/10){
  .hr-mp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-rows:auto auto auto auto auto 1fr;align-content:start;column-gap:3.5cqw;row-gap:2.6cqh;padding:6cqh 4.5cqw 5cqh}
  .hr-mp>*{grid-column:1;min-width:0}
  .hr-mp>.hr-box,.hr-mp>.hr-q,.hr-mp>.hr-bars,.hr-mp>.hr-menu{grid-column:2;grid-row:1 / -1;align-self:center;margin:0}
  .hr-mp>.hr-board,.hr-mp>.hr-logo{grid-column:1 / -1}
  .hr-mp.one{display:flex}
  .hr-src{margin-top:0}
  .hr-mk{font-size:clamp(9px,7cqh,22px)}
  .hr-mt{font-size:clamp(12px,min(10cqh,3.5cqw),42px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hr-ms{font-size:clamp(10px,min(7cqh,2.8cqw),26px);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .hr-box{font-size:clamp(10px,min(7.2cqh,3cqw),28px);padding:3cqh 2.2cqw;max-height:100%;overflow:hidden}
  .hr-src{font-size:clamp(8px,4.6cqh,15px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hr-mimg{width:min(34cqh,13cqw);font-size:min(20cqh,8cqw)}
  .hr-menu{font-size:clamp(9px,min(6.6cqh,2.4cqw),22px);justify-content:flex-start}
  .hr-big{font-size:clamp(24px,min(24cqh,9cqw),110px)}
  .hr-bars{font-size:clamp(8px,4.6cqh,15px);gap:.6cqh}
  .hr-q li{font-size:clamp(10px,min(7.2cqh,2.6cqw),26px);padding:1.6cqh 1.6cqw}
}

/* --- ロゴ・時刻 --- */
.hr-bug{position:absolute;left:2cqw;top:2.2cqh;z-index:7;font-weight:900;font-size:clamp(12px,3.6cqh,26px);color:#ff7a1a;background:#fffffff0;padding:.2em .8em;border-radius:99px;border:3px solid #ffd54f;box-shadow:0 3px 10px #b0712a33}
.hr-bug small{color:#ff5c8a;font-size:.7em;margin-right:.2em}
.hr-tag{position:absolute;left:2cqw;top:calc(2.2cqh + clamp(26px,6.6cqh,48px));z-index:7;font-size:clamp(9px,2.1cqh,14px);color:#5a4a2a;background:#fff8dcee;padding:.15em .7em;border-radius:99px}
.hr-clock{position:absolute;right:calc(2cqw + 50px);top:2.2cqh;z-index:7;display:flex;align-items:center;gap:.5em;font-size:clamp(11px,3cqh,22px);background:#fffffff0;color:#2b2b3a;padding:.25em .7em;border-radius:99px;font-variant-numeric:tabular-nums;box-shadow:0 3px 10px #b0712a33}
.hr-clock .ai{background:#ff8a3d;color:#fff;font-weight:bold;padding:.05em .55em;border-radius:99px;font-size:.8em}

/* --- 下帯テロップ（ポップ） --- */
.hr-l3{position:absolute;left:2.5cqw;right:2.5cqw;bottom:2.5cqh;z-index:8;display:flex;align-items:stretch;filter:drop-shadow(0 5px 10px #b0712a55)}
.hr-l3-c{flex:0 0 auto;display:flex;align-items:center;gap:.3em;background:var(--cc);color:#fff;font-weight:900;padding:.3em .9em;font-size:clamp(11px,min(3.6cqh,2cqw),24px);border-radius:999px 0 0 999px;transition:background 1s;white-space:nowrap;border:3px solid #fff;border-right:0}
.hr-l3-h{flex:1 1 auto;min-width:0;display:flex;align-items:center;background:#fff;color:#22263a;font-weight:900;padding:.3em 1em;font-size:clamp(12px,min(4.4cqh,2.4cqw),32px);line-height:1.35;border-radius:0 999px 999px 0;border:3px solid #fff;
  background-image:linear-gradient(transparent 72%,color-mix(in srgb,var(--cc2) 60%,transparent) 72% 90%,transparent 90%)}
.hr-l3-h span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hr-l3.in .hr-l3-c{animation:hrBounce .55s cubic-bezier(.2,.9,.3,1.3) both}
.hr-l3.in .hr-l3-h{animation:hrBounce .6s .1s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes hrBounce{from{transform:translateY(130%) scale(.9);opacity:0}to{transform:none;opacity:1}}
.hr-progress{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:9;background:#ffffff80}
.hr-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd54f,#ff8a3d);transition:width .4s}

/* --- 字幕・帯・操作 --- */
.hr-cap{flex:0 0 auto;min-height:calc(2 * 1.5em + 20px);display:flex;align-items:center;justify-content:center;text-align:center;gap:.5em;padding:10px 16px;background:#fff;border-top:4px solid #ffd54f;font-size:clamp(15px,2.1vw,26px);line-height:1.5;font-weight:bold;color:#22263a}
.hr-cap.off{display:none}
.hr-cap .w{color:#7e57c2}
.hr-cap .hr-who{flex:0 0 auto;font-size:.75em;padding:.15em .7em}
.hr-tick{flex:0 0 auto;display:flex;align-items:stretch;height:32px;background:#fff3d6;border-top:2px solid var(--cc);overflow:hidden;font-size:14px;color:#2b2b3a;transition:border-color 1s}
.hr-tick>b{flex:0 0 auto;display:flex;align-items:center;padding:0 12px;background:var(--cc);color:#fff;font-size:12px;letter-spacing:.04em;transition:background 1s;white-space:nowrap}
.hr-tick-in{flex:1;overflow:hidden;position:relative}
.hr-tick-tr{position:absolute;left:0;top:0;bottom:0;display:flex;white-space:nowrap;animation:hrTick 60s linear infinite}
.hr-tick-tr span{display:flex;align-items:center;padding:0 18px;border-right:1px dashed #e0b96a;font-variant-numeric:tabular-nums}
.hr-tick-tr span em{font-style:normal;margin-left:.4em}
@keyframes hrTick{to{transform:translateX(-50%)}}
.hr-ctl{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#fffaf0;border-top:1px solid #f0dfbd}
.hr-ctl button,.hr-ctl select{background:#fff;color:#2b2b3a;border:2px solid #f0d49a;border-radius:12px;padding:6px 12px;font-size:15px;cursor:pointer;min-height:38px;font-family:inherit}
.hr-ctl button:hover{background:#fff3d6}
.hr-ctl .pp{background:var(--cc);color:#fff;border-color:transparent;font-weight:bold;min-width:110px;transition:background 1s}
.hr-ctl .on{outline:2px solid #ff8a3d}
.hr-ctl .pos{font-size:12px;color:#7a6a4a;min-width:4.5em;text-align:center}
.hr-ctl .note{flex-basis:100%;text-align:center;font-size:11px;color:#8a7d64;line-height:1.4}
.hr-x{position:absolute;right:10px;top:10px;z-index:20;width:42px;height:42px;border-radius:50%;border:3px solid #ffd54f;background:#fff;color:#ff7a1a;font-size:20px;font-weight:bold;cursor:pointer;box-shadow:0 3px 10px #b0712a44}
.hr-x:hover{background:#ff7a1a;color:#fff}
.hr-toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:12;background:#fff;color:#22263a;padding:8px 16px;border-radius:12px;font-size:14px;max-width:90%;text-align:center;box-shadow:0 4px 14px #0003}

/* ===== 縦長（スマホ縦）=====
   2人を少し内側に寄せて、2人と机が横に並んで見えるように切り取る。中央奥のモニターは、上の空いたところに明るいパネルとして出す。 */
@container hrstage (max-aspect-ratio: 9/10){
  .hr-stage>*{
    --W:max(170cqw,100cqh * 1.25);
    --X:calc(50cqw - var(--W) * .5);
    --Y:calc(100cqh - var(--H));
    --cx:31.5%;--ix:68.5%;
  }
  .hr-set::before{content:"";position:absolute;left:0;right:0;top:0;height:18%;background:linear-gradient(#fdf3e0,#fdf3e000)}
  .hr-p.ca{top:36%;height:49%}
  .hr-p.ic{top:34.5%;height:35.5%}
  .hr-mon{left:3cqw;width:94cqw;top:max(52px,8.5cqh);height:calc(var(--Y) + var(--H) * .33 - max(52px,8.5cqh));border-radius:16px;
    box-shadow:0 0 0 3px #fff,0 8px 24px #b0712a55}
  .hr-plate{top:58.5%;padding:.25em .8em .3em;border-width:2px}
  .hr-plate b{font-size:clamp(9px,2.9cqw,14px)}
  .hr-plate span{font-size:clamp(7px,2.1cqw,10px)}
  .hr-desk{width:82%}
  .hr-desk-logo{font-size:calc(var(--W) * .024)}
  .hr-l3{left:2cqw;right:2cqw;bottom:1.2cqh}
  .hr-l3-c{font-size:clamp(10px,3cqw,14px);padding:.3em .7em}
  .hr-l3-h{font-size:clamp(11px,3.4cqw,16px);padding:.3em .7em;line-height:1.3}
  .hr-bug{font-size:clamp(11px,3.6cqw,18px)}
  .hr-clock{font-size:clamp(10px,3cqw,15px)}
  .hr-clock b{display:none}
  .hr-tag{display:none}
}
/* 舞台がとても低いとき（スマホ横など） */
@container hrstage (max-height: 320px){
  .hr-plate{padding:1px 6px 2px;border-width:2px}
  .hr-plate b{font-size:10px}
  .hr-plate span{font-size:8px}
  .hr-tag{display:none}
  .hr-l3-c{font-size:11px}
  .hr-l3-h{font-size:12px}
  .hr-bug{font-size:12px}
  .hr-clock{font-size:10px}
}
@media (max-width:600px){
  .hr-ctl .note{font-size:10px}
  .hr-ctl button,.hr-ctl select{padding:5px 9px;font-size:14px;min-height:36px}
  .hr-ctl .pp{min-width:90px}
  .hr-cap{font-size:16px;padding:8px 12px}
}
@media (prefers-reduced-motion: reduce){
  .hr-b,.hr.t-ca .hr-p.ca .hr-b,.hr.t-ic .hr-p.ic .hr-b,.hr.t-both .hr-b,.hr-open::after,.hr-desk-logo{animation:none}
  .hr-tick-tr{animation-duration:180s}
}
/* モニターが低いとき（縦置き・小さい画面）は中身を減らす */
@container hrmon (max-height: 300px) and (max-aspect-ratio: 17/10){
  .hr-mp{padding:4cqh 4cqw;gap:2cqh}
  .hr-board{grid-template-columns:1fr 1fr}
  .hr-board div:nth-child(n+5){display:none}
  .hr-bars{display:none}
  .hr-q li{padding:1cqh 3cqw}
  .hr-mimg{width:min(26cqh,22cqw)}
}
@container hrmon (max-height: 200px){
  .hr-ms{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hr-src{display:none}
  .hr-board div:nth-child(n+4){display:none}
  .hr-mimg{display:none}
  .hr-bars{display:none}
  .hr-box{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;padding:2cqh 2cqw}
}