/* A案「大きなボタン」― 2026年09月（上村さん決定：見本 内製Zoom/見本/スマホ/A案_大きなボタン.html） お客様（個別相談）・受講生（レッスン）の画面だけに効かせる（ に plana の印を plana.js が付ける）。 セールス・講師の画面は変えない。 ・文字は端末の文字サイズ設定に追従（iPhone は -apple-system-body、ほかは 17px 基準）。本文 1.18rem（20px）。 ・押す場所は 60px 以上。ボタンは「絵＋名前」と「いまの状態の言葉」の2行。色だけに頼らない。 ・名前は映像の外（下の帯）に出し、お顔・脚に重ねない。大事な知らせは画面の中央で、押すまで消えない。 */ html.plana{font-size:17px; --pa-bg:#FFF8F3;--pa-ink:#1F1A17;--pa-sub:#453B35;--pa-pri:#7A2446;--pa-pri2:#F7E4EA; --pa-ok:#17602F;--pa-okbg:#E3F3E8;--pa-ng:#A4161A;--pa-ngbg:#FDE8E8;--pa-gold:#6B4800;--pa-goldbg:#FFF0C7; --pa-line:#7D706A;--pa-info:#1E4E8C;--pa-infobg:#E6EEF9;--pa-cap:calc(1.06rem * 1.35 + 8px)} @supports (font:-apple-system-body){html.plana{font:-apple-system-body}} html.plana body{font-size:1.18rem;line-height:1.55;background:var(--pa-bg);color:var(--pa-ink)} /* ===== 入口・カメラ確認・退出後（ふつうのページ） ===== */ html.plana #hdr .ttl{font-size:1.06rem} html.plana .note{font-size:1.18rem;color:var(--pa-sub)} html.plana .qt{font-size:1.25rem} html.plana .card{font-size:1.18rem} html.plana .btn{min-height:64px;font-size:1.18rem} html.plana .btn.big{min-height:76px;font-size:1.3rem} html.plana .linkbtn{min-height:60px;font-size:1.1rem} html.plana input.t,html.plana textarea.t{font-size:1.3rem;min-height:64px} html.plana select.t{font-size:1.1rem;min-height:60px} html.plana label.f{font-size:1.18rem} html.plana .micnote{font-size:1.1rem} html.plana .err{font-size:1.18rem} html.plana .prevmsg{font-size:1.06rem} html.plana details.others summary{min-height:60px} html.plana .kv{font-size:1.06rem;color:var(--pa-sub)} html.plana .nowclock .nd{font-size:1.25rem} html.plana .nowclock .nl{font-size:1rem} html.plana .oldinv{font-size:1.18rem} html.plana #sheet .box{font-size:1.18rem} html.plana #sheet h3{font-size:1.45rem} /* 時間で消える小さなお知らせは、画面の上に出す（下の大きなボタンに重ねない） */ html.plana #toast{font-size:1.18rem;top:calc(8px + env(safe-area-inset-top));bottom:auto} /* ===== 相談中・レッスン中：明るい地に、大きなボタン ===== */ html.plana .room{background:var(--pa-bg);color:var(--pa-ink)} html.plana .status{font-size:1rem;gap:6px 8px} html.plana .pill{background:#fff;border:2px solid var(--pa-line);color:var(--pa-ink);padding:0 10px;font-weight:700} html.plana .pill.ok{background:var(--pa-okbg);border-color:var(--pa-ok);color:var(--pa-ok)} html.plana .pill.wait{background:var(--pa-goldbg);border-color:var(--pa-gold);color:var(--pa-gold)} html.plana .pill.recnote{background:#fff;border-color:var(--pa-ng);color:var(--pa-ng)} html.plana .stage,html.plana .smain{border-radius:14px;margin:0 4px} @media (max-width:340px){html.plana .stage,html.plana .smain{margin:0}} html.plana .lnotes{padding:0 8px} html.plana .lnote{font-size:1.1rem} html.plana .lnote.big{font-size:1.18rem} html.plana .lnote .nb{min-height:60px;font-size:1.06rem;padding:4px 16px} html.plana .banner{font-size:1.18rem} html.plana .netwarn{font-size:1.1rem} html.plana .netwarn .btn{min-height:60px;font-size:1.1rem} html.plana .soundbtn{font-size:1.4rem} html.plana .share .zoom,html.plana .lshare .zoom{min-height:60px;font-size:1.1rem} html.plana .sharebar button{min-height:60px} html.plana .waiting .big,html.plana .lwait .big{font-size:1.45rem} html.plana .lwait .lt{font-size:1.18rem} /* 下のまとまり：いまの状態の箱＋大きなボタン */ .pabot{flex:none;display:flex;flex-direction:column;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--pa-bg)} .pastate{border:3px solid var(--pa-line);border-radius:16px;padding:8px 12px;display:flex;gap:10px;align-items:center;font-weight:800;font-size:1.18rem;line-height:1.4;background:#fff;color:var(--pa-ink)} .pastate .ic{font-size:1.6rem;line-height:1;flex:none} .pastate.ok{border-color:var(--pa-ok);background:var(--pa-okbg);color:var(--pa-ok)} .pastate.ng{border-color:var(--pa-ng);background:var(--pa-ngbg);color:var(--pa-ng)} .pastate.gold{border-color:var(--pa-gold);background:var(--pa-goldbg);color:var(--pa-gold)} .pastate.info{border-color:var(--pa-info);background:var(--pa-infobg);color:var(--pa-info)} html.plana .pabot .ctrl{background:transparent;padding:0;gap:10px} html.plana .cb{min-height:72px;min-width:0;border:3px solid var(--pa-pri);background:#fff;color:var(--pa-pri);border-radius:16px;font-size:1.18rem;font-weight:800;padding:6px 8px;gap:0;line-height:1.3} html.plana .cb .l1{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0} html.plana .cb .ic{font-size:1.45rem} html.plana .cb .lb{white-space:nowrap} /* スマホ縦：名前（例「先生を大きく」6文字＋絵）が1行に入るよう、画面の幅に合わせて字を少しだけ小さくする（折り返さない） */ @media (max-width:760px){ html.plana:not(.land) .pabot .cb .lb{font-size:min(1em,calc((50vw - 35px) / 7.4))} html.plana:not(.land) .pabot .cb .ic{font-size:min(1.45rem,calc((50vw - 35px) / 6.2))} } html.plana .cb .s2{display:block;font-size:1.06rem;font-weight:700;line-height:1.25;white-space:normal;overflow-wrap:anywhere;text-align:center} html.plana .cb.paon{border-color:var(--pa-ok);background:var(--pa-okbg);color:var(--pa-ok)} html.plana .cb.off{border-color:var(--pa-ng);background:var(--pa-ngbg);color:var(--pa-ng)} html.plana .cb.on{background:var(--pa-pri2);color:var(--pa-pri)} html.plana .cb.end{border-color:var(--pa-ng);background:#fff;color:var(--pa-ng)} html.plana .cb.hand{background:#fff;color:var(--pa-gold);border-color:var(--pa-gold);min-width:0;font-size:1.18rem} html.plana .cb.hand .ic{font-size:1.45rem} html.plana .cb.hand.up{background:var(--pa-goldbg);outline:0} html.plana .cb.hand.stg{background:var(--pa-pri);color:#fff;border-color:var(--pa-pri)} html.plana .cb .badge{top:-8px;right:-6px;min-width:28px;height:28px;line-height:28px;font-size:1rem;border-radius:14px;box-shadow:0 0 0 2px #fff} html.plana .cb:focus-visible{outline:4px solid #E8A5BD;outline-offset:2px} html.plana .cb .sm{display:none} /* スマホ縦：2列（マイク・カメラ／手を挙げる・チャット／先生を大きく・その他）。退出は「その他」の中 */ @media (max-width:760px){ html.plana:not(.land) .pabot .ctrl{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important} html.plana:not(.land) .cb.hand{grid-column:auto} html.plana:not(.land) .ctrl #bLeave,html.plana:not(.land) .ctrl #bLayout{display:none} } html.plana .ctrl #bMic{order:1} html.plana .ctrl #bCamT{order:2} html.plana .ctrl #bHand{order:3} html.plana .ctrl #bChat{order:4} html.plana .ctrl #bFocus{order:5} html.plana .ctrl #bMore{order:6} html.plana .ctrl #bShare{order:7} html.plana .ctrl #bLayout{order:8} html.plana .ctrl #bLeave{order:9} html.plana .cb#bFocus,html.plana .cb#bMore{min-height:64px} /* 映像がとても小さくなる画面（小さいスマホ・文字を大きくしたとき）は、ボタンの2行目を1行に詰める */ html.plana.patight .cb{min-height:62px;padding:4px 6px} html.plana.patight .cb#bFocus .s2,html.plana.patight .cb#bMore .s2{display:none} html.plana.patight .pastate{padding:6px 10px;font-size:1.1rem} html.plana.patight .pabot{gap:8px;padding-top:8px} html.plana.patight .pastate{font-size:1.1rem} @media (max-width:359px){html.plana.patight .pastate{font-size:1rem}} /* 幅320pxの古い機種は、ボタンを画面に収めるのを先にする */ html.plana.patight .status{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:4px} html.plana.patight #elap,html.plana.patight #pNet:not(.wait){display:none} html.plana.patight .pill:has(#elap){display:none} /* スマホ横：映像を左、右に「状態の箱＋ボタン（2列）」 */ html.plana.land .pabot{grid-column:2;grid-row:1/span 3;width:clamp(240px,40vw,320px);overflow-y:auto;padding:6px 8px calc(6px + env(safe-area-inset-bottom));gap:6px;align-self:stretch} html.plana.land .pabot .ctrl{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto;align-content:start;overflow:visible} html.plana.land .cb{min-height:60px;font-size:1.06rem;padding:2px 4px} html.plana.land .cb .ic{font-size:1.25rem} html.plana.land .cb .s2{font-size:.94rem} html.plana.land .pastate{font-size:1rem;padding:4px 8px;border-width:2px} html.plana.land .pastate .ic{font-size:1.25rem} html.plana.land .ctrl #bLeave,html.plana.land .ctrl #bLayout{display:none} /* 横向きは高さが足りないので、2行目の言葉はマイク・カメラだけ（手・チャット・大きく・その他は名前だけ。状態は上の箱に出る）。名前は折り返してよい */ html.plana.land .cb .lb{white-space:normal;overflow-wrap:anywhere} html.plana.land .cb .l1{flex-wrap:wrap;row-gap:0} html.plana.land #bHand .s2,html.plana.land #bChat .s2,html.plana.land #bFocus .s2,html.plana.land #bMore .s2{display:none} html.plana.land .lroom.stu .ctrl{grid-template-columns:repeat(2,minmax(0,1fr))!important} html.plana.land .cb.hand{font-size:1.06rem} html.plana.land .cb.hand .ic{font-size:1.25rem} html.plana.land .stage,html.plana.land .smain{margin:0 0 4px 6px} html.plana.land .status{font-size:.94rem} html.plana.land .lnote{font-size:1rem} html.plana .lroom.stu .ctrl{grid-template-columns:repeat(2,minmax(0,1fr))!important} @media (min-width:761px){html.plana:not(.land) .lroom.stu .ctrl,html.plana:not(.land) .room .pabot .ctrl{display:flex!important;flex-wrap:wrap;justify-content:center} html.plana:not(.land) .pabot .cb{min-width:150px} html.plana:not(.land) .pabot{align-items:center} html.plana:not(.land) .pastate{width:100%;max-width:900px}} /* ===== 映像の名前は下の帯に（お顔・脚に重ねない） ===== */ html.plana .lroom.stu .ltile video,html.plana .lroom.stu .ltile .loff{top:0;bottom:auto;height:calc(100% - var(--pa-cap))} html.plana .lroom.stu .ltile .nm{left:0;right:0;bottom:0;top:auto;height:var(--pa-cap);max-width:none;border-radius:0;background:#141217;color:#fff; display:flex;align-items:center;gap:6px;padding:0 8px;font-size:1.06rem;line-height:1.2;white-space:nowrap;overflow:hidden} html.plana .lroom.stu .ltile .nm small{background:none;color:#ffd6e3;padding:0;font-size:.94rem;margin:0} html.plana .lroom.stu .ltile .mute{bottom:3px;right:4px;z-index:3;font-size:1rem;background:#141217} html.plana .lroom.stu .ltile.tch{cursor:pointer} html.plana .lroom.stu .sstage .ltile.tch .nm::after{content:"👆 さわると大きく見られます";margin-left:auto;font-size:.94rem;color:#ffe680;font-weight:700;white-space:nowrap} html.plana .lroom.stu .sstrip .ltile{--pa-cap:calc(.94rem * 1.3 + 4px)} html.plana .lroom.stu .sstrip .ltile .nm{font-size:.94rem;padding:0 4px} html.plana .lroom.stu .sstrip{padding:6px;background:#141217} html.plana .lroom.stu .sstrip.pagerbar button{min-height:60px;font-size:1.06rem} html.plana .lroom.stu #self.mini{bottom:10px} /* 個別相談：担当者と自分の映像も、名前は下の帯に */ html.plana .room:not(.lroom) .remote video,html.plana .room:not(.lroom) .remote .camoff, html.plana .room:not(.lroom) .self video,html.plana .room:not(.lroom) .self .camoff{top:0;bottom:auto;height:calc(100% - var(--pa-cap))} html.plana .room:not(.lroom) .remote .nm,html.plana .room:not(.lroom) .self .nm{left:0;right:0;bottom:0;height:var(--pa-cap);max-width:none;border-radius:0; background:#141217;color:#fff;display:flex;align-items:center;padding:0 10px;font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.plana .room:not(.lroom) .remote .mute,html.plana .room:not(.lroom) .self .mute{bottom:3px;right:6px;z-index:3;background:#141217} html.plana .room:not(.lroom) .stage.gal .self .nm{font-size:1.06rem;left:0;bottom:0;padding:0 10px;border-radius:0} /* ===== 大事な知らせ：画面の中央・押すまで消えない ===== */ #pamodal{position:fixed;inset:0;z-index:70;background:rgba(24,16,12,.74);display:flex;align-items:center;justify-content:center;padding:16px} #pamodal[hidden]{display:none} #pamodal .pacard{background:#fff;color:var(--pa-ink,#1F1A17);border-radius:22px;padding:20px 18px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px;max-height:100%;overflow:auto;font-size:1.18rem;line-height:1.5} #pamodal .pacard.gold{border:4px solid #D9A400} #pamodal .pacard h2{font-size:1.45rem;line-height:1.35;margin:0} #pamodal .pacard p{margin:0} #pamodal .pacard .bigic{font-size:3rem;line-height:1;text-align:center} #pamodal .pacard .btn{margin:0} #pamodal .custcard{border:0;box-shadow:none;padding:0;font-size:1.18rem} #pamodal .custcard .ttl{font-size:1.4rem} #pamodal .custcard .btn{min-height:64px} /* チャット（スマホは画面いっぱい） */ html.plana .chatp .phd{font-size:1.25rem} html.plana .phd .x{min-height:60px;min-width:88px;font-size:1.1rem;font-weight:800} html.plana .msg .who{font-size:1rem} html.plana .msg .who .mt{font-size:.94rem} html.plana .msg .tx{font-size:1.18rem} html.plana .msg .pv{font-size:.94rem} html.plana .rxc,html.plana .rxadd{min-height:60px;min-width:60px;font-size:1rem} html.plana .rxpick button{min-width:60px;min-height:60px} html.plana .quick button{min-height:60px;font-size:1.1rem} html.plana .cin textarea{font-size:1.18rem;min-height:60px} html.plana .cin button{min-height:60px;min-width:88px;font-size:1.18rem} html.plana .tor{font-size:1.06rem} html.plana .toseg button{min-height:60px;font-size:1.1rem} html.plana .pzbar{font-size:1.06rem} html.plana .sysm{font-size:1rem} html.plana .cpop,html.plana .lpop{font-size:1.1rem;min-height:60px} html.plana .cpop small,html.plana .lpop small{font-size:1rem} /* キーボードが出ている間は、よく使う言葉をしまって入力欄をキーボードのすぐ上に */ @media (max-width:760px){html.plana.typing .room .panel.chatp .quick{display:none}} html.plana.land.typing .room .panel.chatp .quick{display:none} html.plana .lbadge{font-size:1.06rem} html.plana .lcard .lt{font-size:1.45rem} html.plana .lcard .ls{font-size:1.18rem}