/* LabStream モックサイト — 共通スタイル（デザイン確認用） */ :root{ --navy:#17243f; --navy2:#223357; --gold:#c1913a; --goldb:#d9ad55; --ivory:#f5f1e8; --ink:#1f2740; --muted:#636b7d; --line:#e6e0d3; --card:#ffffff; --live:#d4442f; --good:#2c8a5f; --goldsoft:#f3ead4; --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,sans-serif; --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif; --shadow:0 1px 2px rgba(31,39,64,.05),0 12px 30px -14px rgba(31,39,64,.2); /* 2026-10-01 デザイン刷新（D案）。値はここから取る。角丸は 8（面）／6（ボタン・入力）／4（タグ）、 文字は 12/13/14/16/18/22/28、影はモーダルなど重なる面だけ、グラデーションは使わない */ --gold-t:#8a6414; /* 金色の文字。--gold のままだと白地で 2.9:1 しかなく読めない */ --navy-on:#273963; --gold-h:#cfa046; --line2:#efe9dc; --warn:#a63a22; --amber:#b67a12; --r:8px; --r-s:6px; --r-xs:4px; } *{box-sizing:border-box;margin:0;padding:0} /* body を height:100% にすると position:sticky の有効範囲が画面1つ分に切られ、 下までスクロールしたときにヘッダーが流れて消える。min-height で内容に追従させる。 （全画面表示が要る live/setting/login は各CSSで 100vh を自前指定している） */ html{height:100%} body{min-height:100%} body{font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.7; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} img{max-width:100%} /* buttons */ .btn-gold{background:var(--goldb);color:var(--navy);border:none;border-radius:6px; font-family:var(--sans);font-weight:700;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:9px} .btn-gold:hover{background:var(--gold-h)} .btn-line{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:6px; font-family:var(--sans);font-weight:600;cursor:pointer;transition:background .12s ease} .btn-line:hover{background:rgba(0,0,0,.03)} .btn-gold:disabled,.btn-line:disabled{opacity:.45;cursor:not-allowed} .btn-gold:disabled:hover{background:var(--goldb)} .btn-line:disabled:hover{background:transparent} /* shared logo mark */ .logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)} .logo .m{width:32px;height:32px;border-radius:6px;background:var(--goldb); display:grid;place-items:center;color:#221800;flex:none} .logo .m svg{width:18px;height:18px} /* shared: countdown / stat / pill parts（複数ページで再利用） */ .pill{display:inline-flex;align-items:center;gap:7px;border-radius:4px;font-weight:700;line-height:1; padding:6px 13px;font-size:13px;white-space:nowrap} .pill.live{background:var(--live);color:#ffffff} .pill.live .dot,.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .pill.soon{background:var(--goldsoft);color:#7a5a10} .pill.ok{background:#e4f1ea;color:#1f6f49} .tnum{font-variant-numeric:tabular-nums;} /* accessibility — 高齢者施設スタッフが操作する前提の下限サイズ */ :focus-visible{outline:3px solid rgba(193,145,58,.45);outline-offset:2px;border-radius:6px} button,a,input,label{font-size:inherit} .big-btn{min-height:56px;font-size:18px;padding:0 26px} /* 迷わず押せる主要ボタン */ @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* デモ案内モーダル（運営コンソール共通） */ .demo-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px} .demo-modal[hidden]{display:none} .demo-modal .dm-backdrop{position:absolute;inset:0;background:rgba(23,36,63,.5);backdrop-filter:blur(2px)} .demo-modal .dm-card{position:relative;background:#ffffff;border-radius:8px;max-width:460px;width:100%;padding:30px 30px 26px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5);text-align:center} .demo-modal .dm-ic{width:54px;height:54px;border-radius:50%;background:var(--goldb); color:#2a1e05;display:flex;align-items:center;justify-content:center;margin:0 auto 14px} .demo-modal .dm-ic svg{width:26px;height:26px} .demo-modal .dm-tag{display:inline-block;font-size:12px;font-weight:700;color:#9a6f1e; background:#fbf3e2;border:1px solid #ecd9ac;padding:3px 11px;border-radius:4px;margin-bottom:10px} .demo-modal .dm-card h3{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:10px} .demo-modal .dm-card p{font-size:14px;color:#4a5162;line-height:1.8;margin-bottom:10px} .demo-modal .dm-card .dm-sub{font-size:13px;color:var(--muted);margin-bottom:18px} .demo-modal .dm-acts{display:flex;gap:12px;flex-wrap:wrap} .demo-modal .dm-acts .btn-line,.demo-modal .dm-acts .btn-gold{flex:1;height:48px;font-size:14px;min-width:150px} /* ===== 運営からのお知らせ：ヘッダーのアナウンスアイコン（2026-08-13） ===== 件名まで出すとヘッダーに溶け込んで気づかれないので、アイコンと件数バッジだけにした。 気づかせる役はコンテンツ側の赤い領域（.opsbar）が持つ。ここは「あとから読み返す入口」。 */ .opsbell{position:relative;flex:none;width:46px;height:46px;border-radius:8px;cursor:pointer; border:1px solid var(--line);background:#ffffff;color:#6b7284;display:grid;place-items:center} .opsbell:hover{background:#faf7f0;color:#3a4157} .opsbell svg{width:21px;height:21px} .opsbell.has-new{border-color:#e8bfae;background:#fbe9e4;color:var(--live)} .opsbell.has-new:hover{background:#fbe9e4} /* スマホの通知バッジと同じ見え方。白い縁でヘッダーから浮かせる */ .ob-n{position:absolute;top:-6px;right:-6px;min-width:21px;height:21px;padding:0 5px;border-radius:100px; background:var(--live);color:#ffffff;font-size:12px;font-weight:700;display:grid;place-items:center; border:2px solid #ffffff;} .ob-n[hidden]{display:none} @media (max-width:640px){.opsbell{width:42px;height:42px}} /* ===== 運営からのお知らせ：右セクションの最上部に置く赤い領域（2026-08-13） ===== 経緯：もとは各画面の上部に幅いっぱいの帯（.opsnote・3行・高さ110px）。 → 場所を取りすぎるのでヘッダーにベルを常設してみた → ヘッダーに溶け込んで気づかない／スマホで置き場所を変える必要がある、でヘッダー案は取り下げ → ヘッダーとコンテンツの間に赤い領域を置き、バツで閉じられるようにした（今ここ）。 1行におさめ、閉じたら次のログインまで出さない。 */ .opsbar{display:flex;align-items:center;gap:14px;margin-bottom:20px;border-radius:8px; padding:12px 14px 12px 18px;transition:background .12s} .opsbar[hidden]{display:none} .oba-ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center; font-size:18px;font-weight:700;line-height:1} .oba-b{flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;cursor:pointer; font-family:var(--sans);line-height:1.45} .oba-b b{display:block;font-size:16px;font-weight:700} .oba-b em{display:block;font-style:normal;font-size:13px;font-weight:600;margin-top:1px} .oba-go{flex:none;border-radius:6px;padding:9px 16px;cursor:pointer;font-family:var(--sans); font-size:14px;font-weight:700;white-space:nowrap} .oba-x{flex:none;width:34px;height:34px;border-radius:6px;cursor:pointer;display:grid;place-items:center; background:none;border:none} .oba-x svg{width:17px;height:17px} /* 配信の中止・変更が未読のとき＝赤で塗る。当日の運用が変わる話なので、見落としがいちばん困る */ .opsbar.urgent{background:var(--live);border:1px solid #8e2f1c} .opsbar.urgent .oba-ic{background:rgba(255,255,255,.22);color:#ffffff} .opsbar.urgent .oba-b b{color:#ffffff} .opsbar.urgent .oba-b em{color:#ffd9cf} .opsbar.urgent .oba-go{background:#ffffff;border:1px solid #ffffff;color:#a63a22} .opsbar.urgent:hover{background:#a63a22} /* 白い文字のまま読めるよう、明るくせず暗くする */ .opsbar.urgent .oba-go:hover{background:#fbe9e4} .opsbar.urgent .oba-x{color:#ffd9cf} .opsbar.urgent .oba-x:hover{background:rgba(255,255,255,.18);color:#ffffff} /* ふつうのお知らせ（中止・変更でないもの）は淡い赤。 何でも同じ赤にすると赤を見なくなるので、面を塗るのは中止・変更のときだけにしてある */ .opsbar.plain{background:#fbe9e4;border:1px solid #e8bfae} .opsbar.plain .oba-ic{background:var(--live);color:#ffffff} .opsbar.plain .oba-b b{color:#a63a22} .opsbar.plain .oba-b em{color:#7a5348} .opsbar.plain .oba-go{background:#ffffff;border:1px solid #e8bfae;color:#a63a22} .opsbar.plain .oba-x{color:#b98878} .opsbar.plain:hover{background:#fbe9e4} .opsbar.plain .oba-x:hover{background:#f0d9cd;color:#a63a22} /* 警告＝黄、インフォ＝淡い紺。帯の色は、未読のうちいちばん重いものに合わせる（2026-10-01） */ .opsbar.warn{background:#fbf3e2;border:1px solid #ecd9ac} .opsbar.warn .oba-ic{background:var(--amber);color:#ffffff} .opsbar.warn .oba-b b{color:#6b4d08} .opsbar.warn .oba-b em{color:#8a6414} .opsbar.warn .oba-go{background:#ffffff;border:1px solid #ecd9ac;color:#6b4d08} .opsbar.warn .oba-x{color:#b89a55} .opsbar.info{background:#eef1f7;border:1px solid #d5deee} .opsbar.info .oba-ic{background:#26406e;color:#ffffff} .opsbar.info .oba-b b{color:#26406e} .opsbar.info .oba-b em{color:#5b6577} .opsbar.info .oba-go{background:#ffffff;border:1px solid #d5deee;color:#26406e} .opsbar.info .oba-x{color:#8f9bb5} @media (max-width:760px){ .opsbar{flex-wrap:wrap;padding:12px 12px 12px 14px} .oba-b{flex-basis:calc(100% - 90px)} .oba-go{margin-left:46px} } /* お知らせの中身（モーダル） */ .opsmodal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px} .opsmodal[hidden]{display:none} .opsm-backdrop{position:absolute;inset:0;background:rgba(20,26,40,.5)} .opsm-card{position:relative;width:min(680px,100%);max-height:calc(100dvh - 48px);overflow-y:auto; background:#ffffff;border-radius:8px;padding:22px 26px 20px; box-shadow:0 30px 70px -20px rgba(20,26,40,.6)} .opsm-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #f0ebe0} .opsm-ic{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--goldb);color:#2a1e05} .opsm-ic svg{width:20px;height:20px} .opsm-t{flex:1;min-width:0} .opsm-t b{display:block;font-size:18px;font-weight:700;color:var(--ink)} .opsm-t em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:2px} .opsm-close{flex:none;width:38px;height:38px;border-radius:6px;border:1px solid var(--line); background:#ffffff;cursor:pointer;color:var(--muted);display:grid;place-items:center} .opsm-close:hover{background:#faf7f0;color:var(--ink)} .opsm-close svg{width:18px;height:18px} .opsm-list{list-style:none} .opsm-list>li{padding:18px 0;border-bottom:1px solid #f0ebe0} .opsm-list>li:last-child{border-bottom:none} .oi-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px} .oi-tag{font-size:12px;font-weight:700;padding:4px 11px;border-radius:4px;flex:none} .oi-tag.t-chg{background:#fbe9e4;color:#a63a22} /* 配信の中止・変更 */ .oi-tag.t-fac{background:#fbf3e2;color:#8a6414} /* この施設あての連絡 */ .oi-tag.t-all{background:#eef1f7;color:#5b6577} /* 全施設あての連絡 */ /* 2026-10-01：お知らせの種類は インフォ／警告／緊急 の3段階。運営の「施設へのお知らせ」で選ぶ。 タグは重さ、誰あてか（全施設あて・承認の依頼など）は横の文字（.oi-kind）で出す。 */ .oi-tag.lv-urgent{background:var(--live);color:#ffffff} .oi-tag.lv-warn{background:#fbf3e2;color:#8a6414} .oi-tag.lv-info{background:#eef1f7;color:#26406e} .oi-kind{font-size:13px;font-weight:700;color:#3a4157} .oi-d{font-size:13px;color:var(--muted)} .oi-new{font-size:12px;font-weight:700;color:#ffffff;background:var(--live); padding:3px 9px;border-radius:4px;flex:none} .oi-msg{font-size:16px;font-weight:700;color:var(--ink);line-height:1.8} .oi-sub{font-size:13px;color:#4a5162;line-height:1.85;margin-top:6px} .oi-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px} .oi-from{font-size:13px;color:var(--muted)} .oi-keep{font-size:13px;font-weight:700;color:#a63a22;background:#fbe9e4;padding:4px 11px;border-radius:4px} .oi-read{margin-left:auto;flex:none;border:1px solid var(--line);background:#ffffff;border-radius:6px; padding:7px 14px;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:#3a4157} .oi-read:hover{background:#faf7f0} .opsm-list>li.done .oi-msg{font-weight:600;color:#4a5162} .opsm-foot{margin-top:16px;padding-top:14px;border-top:1px solid #f0ebe0; font-size:13px;color:var(--muted);line-height:1.8} @media (max-width:640px){.opsmodal{padding:12px}.opsm-card{padding:18px 16px 16px}} /* モーダルは画面の高さを超えないようにする。超えた分はカードの中でスクロールさせる。 録画の登録（見逃し配信）のように中身が多いものは、上下が画面外に見切れて 「やめる／登録する」が押せなくなっていた（2026-08-10） */ .demo-modal .dm-card{max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain} /* 中でスクロールさせると「やめる／登録する」が下に隠れるので、操作だけは貼り付ける */ .demo-modal .dm-card .dm-acts{position:sticky;bottom:-26px;z-index:1;background:#ffffff; padding:12px 0 26px;margin-bottom:-26px;box-shadow:0 -14px 18px -14px rgba(31,39,64,.3)} /* ===== すぐ呼ぶ（callDrawer）と、その中のボタン ===== gen_common.py が home2 / record / record-view / family / setting / live の6画面に 同じHTMLを差し込む共有部品。CSSも共有でないと、片方の画面だけ無反応に見える。 2026-08-14：home2.css と record.css にしか無く、setting / live で押しても 画面外に透明な塊が生えるだけだったので、ここへ移した。二重定義も解消。 */ .c-btn{margin-top:12px;width:100%;min-height:44px;border-radius:6px;border:none;cursor:pointer; background:var(--goldb);color:#2a1e05; font-family:var(--sans);font-size:14px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;gap:8px;} .c-btn:hover{background:var(--gold-h)} .c-btn svg{width:17px;height:17px} .c-btn.gold{background:var(--goldb);color:#2a1e05;font-weight:700} .c-btn.line{background:none;border:1px solid var(--line);color:#3a4157;box-shadow:none;font-weight:700} .c-btn.line:hover{background:#faf7f0} .drawer{position:fixed;inset:0;z-index:60} .drawer[hidden]{display:none} .dw-backdrop{position:absolute;inset:0;background:rgba(23,36,63,.42)} .dw-card{position:absolute;right:0;top:0;bottom:0;width:min(460px,100%);background:#ffffff; display:flex;flex-direction:column;padding:22px 26px 24px;overflow-y:auto; box-shadow:-24px 0 60px -20px rgba(31,39,64,.45)} .dw-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #f0ebe0} .dw-ic{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--live);color:#ffffff} .dw-ic svg{width:20px;height:20px} .dw-t{flex:1;min-width:0} .dw-t b{display:block;font-size:18px;font-weight:700;color:#26406e} .dw-t em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px} .dw-close{flex:none;width:34px;height:34px;border-radius:6px;border:1px solid var(--line); background:#ffffff;cursor:pointer;display:grid;place-items:center;color:#6b7284} .dw-close:hover{background:#faf7f0} .dw-close svg{width:16px;height:16px} .dw-list{list-style:none;padding-top:6px} .dw-list li{padding:14px 0;border-bottom:1px solid #f0ebe0} .dw-list li:last-child{border-bottom:none} .dw-list .cat{display:inline-block;font-size:12px;font-weight:700;color:#8a6414; background:#fbf3e2;border-radius:4px;padding:3px 10px} .dw-list .who{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-top:7px} .dw-list .who em{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px;line-height:1.6} .dw-list .num{display:block;margin-top:6px;font-size:28px;font-weight:700;color:#26406e; font-variant-numeric:tabular-nums;text-decoration:none} .dw-list .num:hover{color:var(--gold)} .dw-acts{display:flex;flex-direction:column;gap:9px;margin-top:18px} .dw-acts .c-btn{margin-top:0} /* ドロワーの操作行：（A4で印刷する）も