:root{ --accent:#306C3B; --accent-bg:#D9F0DC; --cream:#FDF7E9; } *{ box-sizing:border-box; } /* hidden は必ず隠す （.menu-btn{display:flex} や .menu-grid{display:grid} のような指定があると、 ブラウザ既定の [hidden]{display:none} が負けて出てしまうため） */ [hidden]{ display:none !important; } body{ margin:0; font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; background:var(--cream); color:#333; } .wrap{ max-width:560px; margin:0 auto; padding:16px 16px 60px; } .top{ display:flex; align-items:center; gap:10px; margin:6px 0 18px; } .top .badge{ width:40px; height:40px; border-radius:50%; background:var(--accent-bg); display:flex; align-items:center; justify-content:center; font-size:22px; } .top h1{ font-size:20px; color:var(--accent); margin:0; } .back{ display:inline-block; color:var(--accent); text-decoration:none; font-weight:700; font-size:15px; margin:4px 0 12px; } .card{ background:#fff; border:2px solid var(--accent-bg); border-radius:16px; padding:16px; margin-bottom:14px; } label{ display:block; font-weight:700; font-size:14px; margin-bottom:6px; } input,select,textarea{ width:100%; padding:12px; border:1px solid #ccc; border-radius:10px; font-size:16px; font-family:inherit; min-width:0; } /* iOSで日付/時刻の入力欄がはみ出さないように */ input[type="date"], input[type="time"]{ -webkit-appearance:none; appearance:none; } textarea{ min-height:90px; resize:vertical; } .row{ display:flex; gap:10px; } .row>div{ flex:1; min-width:0; } .btn{ width:100%; padding:16px; border:none; border-radius:12px; background:var(--accent); color:#fff; font-size:17px; font-weight:700; cursor:pointer; } .btn:disabled{ opacity:.5; } .msg{ text-align:center; padding:14px; border-radius:10px; margin-top:10px; display:none; } .ok{ background:#e3f4e6; color:#1c6b2e; } .err{ background:#fce3e3; color:#a33; } .preview{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .preview img{ width:72px; height:72px; object-fit:cover; border-radius:8px; } /* ============================================================ 会議・連絡メニュー（index.html）… 会議 と やること・お願い のどちらかを選ぶ画面 リッチメニューからここに来ます。指で押しやすい大きさにしています。 ============================================================ */ .entrygrid{ display:grid; grid-template-columns:1fr; gap:14px; margin:18px 0 16px; } .entrybtn{ display:block; text-align:center; text-decoration:none; color:#333; background:#fff; border:2px solid var(--accent-bg); border-radius:20px; padding:26px 18px; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:transform .1s ease, box-shadow .1s ease, border-color .1s ease; } .entrybtn:hover{ border-color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.08); } .entrybtn:active{ transform:scale(.985); } .entrybtn .ico{ font-size:44px; line-height:1.1; margin-bottom:8px; } .entrybtn .t{ font-size:20px; font-weight:800; color:var(--accent); } .entrybtn .s{ font-size:13px; color:#888; margin-top:6px; } /* 会議も やること・お願い も、同じ色・同じ枠でそろえます （どちらかが「別のもの」に見えないように） */ @media (min-width:640px){ .entrygrid{ grid-template-columns:1fr 1fr; gap:16px; } .entrybtn{ padding:34px 18px; } .entrybtn .ico{ font-size:52px; } } /* サブメニューのボタン */ .menu-btn{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:#fff; border:2px solid var(--accent-bg); border-radius:16px; padding:18px 16px; margin-bottom:14px; text-decoration:none; color:#333; } .menu-btn .ico{ width:52px; height:52px; border-radius:50%; background:var(--accent-bg); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; } .menu-btn .t{ font-weight:700; font-size:17px; } .menu-btn .s{ font-size:13px; color:#888; margin-top:2px; } .menu-btn .arrow{ margin-left:auto; color:#bbb; font-size:22px; } /* 一覧 */ .item{ background:#fff; border:2px solid var(--accent-bg); border-radius:14px; padding:14px; margin-bottom:12px; } .item .h{ display:flex; justify-content:space-between; align-items:baseline; font-weight:700; margin-bottom:4px; } .item .h .d{ font-size:16px; } .item .h .n{ font-size:13px; color:#666; } .item .meta{ font-size:13px; color:#777; margin-bottom:8px; } .item .body{ font-size:14px; white-space:pre-wrap; } .item .thumbs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .item .thumbs img{ width:64px; height:82px; object-fit:contain; background:#f0f0f0; border-radius:6px; } .empty{ text-align:center; color:#999; padding:40px 0; } /* 必須マーク */ label.req::after{ content:"必須"; color:#c0392b; background:#fdecea; font-size:11px; font-weight:700; border-radius:4px; padding:1px 7px; margin-left:8px; vertical-align:middle; } /* ============================================================ 会議システム ============================================================ */ /* 開催中の印 */ .tag.live{ background:#fdecea; color:#c0392b; } .entrybtn .s.live{ color:#c0392b; font-weight:800; } .kg-head{ display:flex; align-items:flex-start; gap:10px; } .kg-head .kg-title{ font-size:18px; font-weight:800; color:var(--accent); } .kg-head .tag{ margin-left:auto; flex:0 0 auto; } /* 録音・文字起こしの状態（会議の見出しの下） ★ 入っていても切っていても出します。色で一目で分かるようにしています on … 録音する／している（赤み。**録られていることを隠しません**） off … しない（灰色。責める色にはしません。決めごとであって、故障ではないので） ng … 途中で止まった（黄色） */ .kg-rec{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; border-radius:12px; padding:8px 11px; font-size:12.5px; line-height:1.6; } .kg-rec .i{ flex:0 0 auto; font-size:14px; line-height:1.4; } .kg-rec .x{ min-width:0; } .kg-rec b{ display:block; font-weight:800; } .kg-rec span{ display:block; } /* 直し方（管理者にだけ出ます）。本文より1段うしろに下げます */ .kg-rec .how{ margin-top:3px; font-size:11.5px; opacity:.75; } .kg-rec.on { background:#fdeeee; border:1px solid #f3d3d3; color:#8c3b3b; } .kg-rec.off{ background:#f2f2f0; border:1px solid #e2e1dd; color:#6b6760; } .kg-rec.ng { background:#fff6e3; border:1px solid #f2e0b8; color:#8a6a24; } /* 参加者（出席／不在／代理） */ .kg-att{ border:1px solid #ececec; border-left:4px solid var(--co, #ddd); border-radius:12px; padding:10px 12px; margin-bottom:8px; background:#fff; } .kg-att .n{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; color:#333; } .kg-att .n .co-dot{ width:8px; height:8px; border-radius:50%; background:var(--co, #bbb); flex:0 0 auto; } .kg-att .n .st{ margin-left:auto; font-size:11px; font-weight:700; color:#8a8a8a; background:#f3f3f0; border-radius:999px; padding:2px 9px; } .kg-att .a{ font-size:13px; color:#555; line-height:1.7; margin-top:6px; } .kg-att .a b{ display:inline-block; min-width:2.6em; color:#999; font-size:11.5px; } .kg-att .a .nt{ color:#8a6410; } /* 不在の人は淡く、代理（事前投稿あり）は青みで */ .kg-att.st-absent{ background:#fafaf8; opacity:.85; } .kg-att.st-absent .n .st{ background:#eee; color:#888; } .kg-att.st-proxy{ background:#f7fafd; } .kg-att.st-proxy .n .st{ background:#e4eef8; color:#2f5f8a; } /* 会議で決まったお願い（終わるまで上に出し続ける） */ .kg-task{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#fffdf3; border:1px solid #f0e4bd; border-radius:10px; padding:9px 11px; margin-bottom:7px; font-size:13.5px; } .kg-task .b{ font-weight:700; color:#444; } .kg-task .m{ margin-left:auto; font-size:12px; color:#999; white-space:nowrap; } .kg-task.done{ background:#f7f8f6; border-color:#e6e9e3; } .kg-task.done .b{ text-decoration:line-through; text-decoration-color:rgba(0,0,0,.3); color:#888; } /* 記録（議事録の1行） */ .kg-note{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; border-bottom:1px dashed #eee; padding:9px 2px; font-size:14px; } .kg-note .k{ flex:0 0 auto; font-size:11px; font-weight:800; border-radius:999px; padding:2px 9px; background:#f0f0ec; color:#777; } .kg-note .b{ flex:1 1 200px; color:#333; line-height:1.6; } .kg-note .m{ margin-left:auto; font-size:11.5px; color:#aaa; white-space:nowrap; } .kg-note.k-decision .k{ background:var(--accent-bg); color:var(--accent); } .kg-note.k-todo .k{ background:#fdf3e0; color:#9a6b12; } .kg-note.k-question .k{ background:#fdecea; color:#c0392b; } /* 今日の活動 */ .actline{ display:flex; gap:8px; font-size:13.5px; line-height:1.7; } .actline b{ flex:0 0 2.8em; color:#999; font-size:11.5px; } .item.is-absent{ background:#fafaf8; } /* 送信完了モーダル */ .modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:1000; padding:24px; } .modal.show{ display:flex; } .modal-box{ background:#fff; border-radius:20px; padding:28px 24px; text-align:center; max-width:340px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.25); } .modal-icon{ width:72px; height:72px; border-radius:50%; background:var(--accent); color:#fff; font-size:40px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; } .modal-title{ font-size:21px; font-weight:800; color:#333; margin-bottom:6px; } .modal-sub{ color:#888; font-size:14px; margin-bottom:20px; } /* ===== PC表示（社員向け画面を広く使う） ===== */ .menu-grid>.menu-btn{ margin-bottom:14px; } @media (min-width:860px){ .wrap{ max-width:960px; padding-left:22px; padding-right:22px; } .menu-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; align-items:start; } } /* ============================================================ タスク・お願い（連絡サイト固有の部品） 共通の見た目（.card / .btn / .item / .menu-btn）に合わせて追加 ============================================================ */ /* 見出し行の右に置く小さなリンク（一覧→作成 など） */ .top .top-link{ margin-left:auto; font-size:14px; font-weight:700; color:var(--accent); text-decoration:none; } /* ログイン中の人・権限・ログアウト（日報・申請サイトの .userbar と同じ） */ .userbar{ display:flex; align-items:center; gap:10px; margin:2px 0 14px; font-size:14px; color:#555; } .userbar .who{ font-weight:800; color:#333; } .userbar .rolechip{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; background:#E3F0E7; color:#1F5C37; white-space:nowrap; } .userbar .rolechip.admin{ background:#FBF0D6; color:#8a6a12; } .userbar .logout{ margin-left:auto; border:1px solid #ddd; background:#fff; color:#666; border-radius:9px; padding:7px 12px; font-weight:700; font-size:13px; cursor:pointer; width:auto; font-family:inherit; } /* 件数サマリ */ .stats{ display:flex; gap:20px; flex-wrap:wrap; } .stats .n{ font-size:28px; font-weight:800; color:var(--accent); line-height:1.2; } .stats .k{ font-size:12px; color:#888; } /* 2択タブ（自分あて／自分が出した） */ .tabs{ display:flex; gap:8px; margin-bottom:12px; } .tabs button{ flex:1; padding:12px 10px; font-size:15px; font-family:inherit; font-weight:700; cursor:pointer; background:#fff; border:2px solid var(--accent-bg); border-radius:12px; color:#888; } .tabs button.on{ background:var(--accent); border-color:var(--accent); color:#fff; } /* 絞り込み（横並びの小さいセレクト） */ .filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .filters select{ width:auto; flex:1 1 auto; min-width:130px; padding:9px 10px; font-size:14px; border-radius:10px; } /* 文字でさがす（一覧の検索窓） */ .searchbar{ position:relative; display:flex; align-items:center; margin-bottom:10px; } .searchbar .ico{ position:absolute; left:12px; font-size:15px; line-height:1; pointer-events:none; opacity:.55; } .searchbar input{ padding:12px 40px 12px 38px; border-radius:12px; border:2px solid var(--accent-bg); background:#fff; font-size:16px; } .searchbar input:focus{ outline:none; border-color:var(--accent); } .searchbar input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; } .searchbar button{ position:absolute; right:8px; width:28px; height:28px; padding:0; border:none; border-radius:50%; background:#eceee9; color:#777; font-size:17px; font-family:inherit; line-height:1; cursor:pointer; } .searchbar button:hover{ background:#e0e3dd; } .searchnote{ margin:-4px 0 10px; font-size:13px; color:#888; } /* 小さいボタン（カード内の操作） */ .btn-sm{ width:auto; padding:10px 16px; font-size:14px; border-radius:10px; } .btn-ghost{ background:#fff; color:var(--accent); border:2px solid var(--accent-bg); } /* お願いカード（.item を重要度の色で縁取る） */ .item.p-high{ border-color:#f2c9c4; } .item.p-mid { border-color:#f0dfb4; } .item.p-low { border-color:var(--accent-bg); } .item.is-done{ background:#fbfbf8; } .item.is-done .body{ text-decoration:line-through; text-decoration-color:rgba(0,0,0,.35); color:#777; } .item .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } .item .acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } /* ラベル（チップ） */ .tag{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:#f3f1ea; color:#777; } .tag.high{ background:#fdecea; color:#c0392b; } .tag.mid { background:#fdf3e0; color:#9a6b12; } .tag.low { background:var(--accent-bg); color:var(--accent); } .tag.done{ background:var(--accent-bg); color:var(--accent); } .tag.rot { background:#f1ede2; color:#7a6236; } /* 完了メッセージ */ .donemsg{ margin-top:8px; padding:9px 12px; font-size:13px; line-height:1.6; background:var(--accent-bg); color:var(--accent); border-radius:10px; } /* 選択式の丸ボタン（重要度・種類・発生元） */ .choices{ display:flex; flex-wrap:wrap; gap:8px; } .choices label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin:0; padding:9px 15px; font-size:14px; font-weight:700; color:#777; background:#fff; border:2px solid var(--accent-bg); border-radius:999px; } .choices label.on{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent); } .choices label.on.high{ border-color:#d94a3d; background:#fdecea; color:#c0392b; } .choices label.on.mid { border-color:#e2a33a; background:#fdf3e0; color:#9a6b12; } /* 宛先の社員リスト ・略称だけを出す（会社は色で分かる） ・スマホは1行4人（狭い端末でも崩れないように grid で固定）*/ /* 全員が一度に見えるように、内側のスクロールは作らない */ .people{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:5px; padding:2px; } .people .p{ display:block; cursor:pointer; text-align:center; padding:8px 3px; font-size:12.5px; font-weight:700; line-height:1.25; background:#fff; border:2px solid #e3e3e3; border-radius:10px; color:#555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ============================================================ 会社ごとの色（ブランドカラー） 林建設 緑 #1F5C37 / サブ #E0B93A / 背景 #E3F0E7 美華道 濃紺 #1F3A5F / サブ #5C7EAE / 背景 #E7ECF4 大幸土木建設 橙 #DA6410 / サブ #F2A94D / 背景 #FBEADA 4社目以降は g4〜g6 の汎用色が自動で割り当たる（CSSを書き換えずに済む） ============================================================ */ /* 会社の色は「遠くから見てもすぐ違いが分かる」ことを優先しています。 林建設の緑は、美華道の紺とくっきり分かれるように**明るい緑**にしました （濃い緑と濃い紺は、離れて見ると同じ色に見えてしまうため）。 白文字の読みやすさ（コントラスト 4.5:1 以上）は保っています。 */ .co-hayaken{ --co:#188038; --co-sub:#E0B93A; --co-bg:#DCF3E3; } .co-bikado { --co:#1F3A5F; --co-sub:#7FA3D8; --co-bg:#DEE8F8; } .co-daiko { --co:#DA6410; --co-sub:#F2A94D; --co-bg:#FBEADA; } .co-g4 { --co:#5C53A3; --co-sub:#9A93D6; --co-bg:#ECEAF7; } .co-g5 { --co:#237E76; --co-sub:#6FBDB4; --co-bg:#E4F1EF; } .co-g6 { --co:#8A5A1C; --co-sub:#C9A164; --co-bg:#F5EDE0; } .co-none { --co:#6F6857; --co-sub:#A9A08B; --co-bg:#F1EFE8; } /* 宛先ボタン（未選択＝薄い会社色／選択＝会社色で塗り、内側にサブ色の線） */ .people .p{ background:var(--co-bg); border-color:var(--co); color:var(--co); } .people .p.on{ background:var(--co); border-color:var(--co); color:#fff; box-shadow:inset 0 0 0 2px var(--co-sub); } /* 編集画面：すでに完了した担当者（✅ が付いていて、担当から外せない） */ .people .p.fixed{ cursor:not-allowed; opacity:.85; } /* 会社色の凡例 */ .co-legend{ display:flex; flex-wrap:wrap; gap:10px 14px; margin:6px 0 8px; font-size:11.5px; } .co-legend span{ display:inline-flex; align-items:center; gap:5px; color:var(--co); font-weight:700; } .co-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--co); box-shadow:0 0 0 2px var(--co-sub); } /* お願いカードの会社ラベル */ .tag.co{ background:var(--co-bg); color:var(--co); } .hint{ font-size:12px; color:#888; margin-top:6px; line-height:1.6; } .hint a{ color:var(--accent); font-weight:700; } /* 画面が広いときは1行に増やす（スマホの4人固定は上の既定のまま） */ @media (min-width:520px){ .people{ grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:7px; } .people .p{ font-size:13.5px; padding:10px 6px; } } /* ============================================================ みんなのタスクの木 ============================================================ */ .tree-layout{ display:grid; gap:14px; grid-template-columns:1fr; } /* 空は上、地面は木の絵の中（フラット） */ .tree-stage{ position:relative; background:#dff0fb; border:2px solid var(--accent-bg); border-radius:16px; overflow:hidden; margin-bottom:14px; } .tree-stage svg{ display:block; width:100%; height:auto; } /* 実のラベル（SVG の上に重ねる） */ .tree-labels{ position:absolute; inset:0; pointer-events:none; } .tlabel{ position:absolute; transform:translate(-50%, 0); margin-top:22px; width:124px; max-width:none; background:rgba(255,255,255,.96); border:1px solid #e3e8e0; border-left:4px solid var(--co, #bbb); border-radius:9px; padding:5px 7px; font-size:11px; line-height:1.35; color:#444; box-shadow:0 1px 4px rgba(0,0,0,.12); pointer-events:auto; cursor:pointer; } .tlabel .l1{ display:flex; align-items:center; gap:5px; } .tlabel .l1 i{ width:8px; height:8px; border-radius:50%; background:var(--co, #bbb); flex:0 0 auto; } .tlabel .t{ font-weight:800; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tlabel .l2{ color:#8a8a8a; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tlabel.tome{ border-color:#9ac7a8; border-left-color:var(--co, #9ac7a8); background:#f4fbf5; box-shadow:0 1px 4px rgba(31,92,55,.22); } .tlabel.tome .t::before{ content:"📍"; margin-right:3px; } .tlabel.from{ border-style:dashed; background:#fcfcfc; } .tlabel.rot .l2{ color:#c0392b; } .tlabel.ripe{ border-color:#f0c243; } .tlabel .pickbtn{ display:block; width:100%; margin-top:4px; padding:3px 0; font-size:11px; font-weight:800; color:#fff; background:var(--accent); border:none; border-radius:7px; cursor:pointer; } .tlabel .pickbtn:hover{ filter:brightness(1.08); } /* カーソルを合わせたときの詳細カード（パソコンのみ） */ .tree-hover{ position:absolute; z-index:6; width:236px; background:#fff; border:1px solid #e3e8e0; border-radius:12px; padding:10px 12px; font-size:12px; color:#555; box-shadow:0 6px 20px rgba(0,0,0,.16); pointer-events:none; } .tree-hover .hd{ display:flex; align-items:center; gap:6px; font-size:13px; color:#333; margin-bottom:6px; } .tree-hover .hd .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; } .tree-hover .hd .dot.high{ background:#e2574c; } .tree-hover .hd .dot.mid{ background:#f0c040; } .tree-hover .hd .dot.low{ background:#8dc153; } .tree-hover .r{ display:flex; justify-content:space-between; gap:10px; padding:1.5px 0; } .tree-hover .r span{ color:#999; flex:0 0 auto; } .tree-hover .r b{ text-align:right; color:#444; font-weight:700; } .tree-hover .bd{ margin-top:6px; padding-top:6px; border-top:1px dashed #eee; color:#666; line-height:1.5; } .tree-hover .ft{ margin-top:6px; color:#aaa; font-size:11px; } /* 凡例の印 */ .legend-row .lgi{ width:14px; height:16px; flex:0 0 auto; display:inline-block; background-repeat:no-repeat; background-position:center; background-size:contain; font-style:normal; } .legend-row .lgi.lg-seed { background-image:url("data:image/svg+xml;utf8,"); } .legend-row .lgi.lg-fruit{ background-image:url("data:image/svg+xml;utf8,"); } .legend-row .lgi.lg-rot { background-image:url("data:image/svg+xml;utf8,"); } .legend-row .lgi.lg-tome { background-image:url("data:image/svg+xml;utf8,"); } .legend-row .lgi.lg-from { background-image:url("data:image/svg+xml;utf8,"); } .legend-row .lgi.lg-ripe { background-image:url("data:image/svg+xml;utf8,"); } /* 木の上にいつも出す3つ（未完了／自分あて／収穫できる） 押すとその実だけになります。押している間は色が濃くなります。 */ .tree-hud{ display:flex; gap:8px; margin-bottom:10px; } .tree-hud .hudi{ flex:1 1 0; min-width:0; display:flex; align-items:baseline; justify-content:center; gap:6px; background:#fff; border:2px solid var(--accent-bg); border-radius:12px; padding:8px 6px; font-size:12px; color:#777; white-space:nowrap; font-family:inherit; cursor:pointer; width:auto; transition:background .12s ease, border-color .12s ease, color .12s ease; } .tree-hud .hudi b{ font-size:20px; font-weight:800; color:var(--accent); } .tree-hud .hudi:hover{ border-color:var(--accent); } .tree-hud .hudi.tome{ border-color:#9ac7a8; background:#f4fbf5; } .tree-hud .hudi.tome span::before{ content:"📍"; margin-right:3px; } .tree-hud .hudi.ripe{ border-color:#f0c243; background:#fffbef; } .tree-hud .hudi.ripe b{ color:#b8860b; } /* 押されている状態（その実だけを出しているとき） */ .tree-hud .hudi.on{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:inset 0 2px 5px rgba(0,0,0,.18); } .tree-hud .hudi.on b{ color:#fff; } .tree-hud .hudi.tome.on{ background:#1F5C37; border-color:#1F5C37; } .tree-hud .hudi.ripe.on{ background:#b8860b; border-color:#a3780a; } .tree-hud .hudi.ripe.on b{ color:#fff; } /* 押しているときに出す「押すと元にもどります」の合図 */ .tree-hud .hudi.on::after{ content:"×"; margin-left:6px; font-size:13px; opacity:.85; align-self:center; } @media (max-width:430px){ .tree-hud{ gap:6px; } .tree-hud .hudi{ flex-direction:column; align-items:center; gap:0; font-size:11px; padding:7px 4px; } .tree-hud .hudi b{ font-size:18px; } } .fruit{ cursor:pointer; } /* 自分あて ＝ まわりが光る＋白いわく（いちばん目立たせる） ピンはラベルを出さないとき（スマホ）だけ立てます。パソコンではラベルに隠れるので、 かわりにわくを二重にして、ラベルの先頭に 📍 を付けています。 */ .fruit.tome .glow{ opacity:1; } .fruit.tome .memark{ animation:hv-bob 2.6s ease-in-out infinite; } .fruit.tome .mering2{ animation:hv-ring2 2.6s ease-in-out infinite; } @keyframes hv-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } } @keyframes hv-ring2{ 0%,100%{ opacity:.95; } 50%{ opacity:.45; } } /* 自分が出した ＝ 右上に白い点だけ（自分あてほど強くしない） */ .fruit.from .glow{ opacity:.45; } /* 収穫できる実（自分が終わらせた分）… ゆっくり光って、揺れて、摘めることを知らせる */ /* ※ 実そのものは動かしません。揺らすとタップしにくくなるためです。 光り方だけを変えて「摘めます」と知らせます。 */ .fruit.ripe .glow{ opacity:1; animation:hv-glow 2.2s ease-in-out infinite; } .fruit.ripe .ring{ animation:hv-ring 2.2s ease-in-out infinite; } .fruit.picking{ transition:opacity .45s ease; opacity:0; } @keyframes hv-glow{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } } @keyframes hv-ring{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } } @media (prefers-reduced-motion: reduce){ .fruit.ripe .glow, .fruit.ripe .ring, .fruit.tome .memark, .fruit.tome .mering2{ animation:none; } } /* 摘んだときに飛び出す「+7」 */ .hv-pop{ position:absolute; z-index:5; font-weight:800; font-size:17px; color:#b8860b; text-shadow:0 1px 3px rgba(255,255,255,.95); pointer-events:none; animation:hv-pop 1.1s ease-out forwards; } @keyframes hv-pop{ 0%{ opacity:0; transform:translate(-50%,0) scale(.7); } 25%{ opacity:1; transform:translate(-50%,-14px) scale(1.15); } 100%{ opacity:0; transform:translate(-50%,-46px) scale(1); } } /* じぶんの実り（収穫のカード） */ .harvest{ border:2px solid #F2E6C2; background:#FDF8E4; } .harvest .card-title{ color:#7a6236; } .harvest .hv-big{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; } .harvest .hv-big b{ font-size:28px; font-weight:800; color:#b8860b; line-height:1; } .harvest .hv-big span{ font-size:13px; color:#7a6236; font-weight:700; } .harvest .count-row{ color:#7a6236; } .harvest .count-row b{ color:#7a6236; } .harvest .btn{ margin:6px 0 4px; } .harvest .hint{ color:#8a7a5c; } .count-row{ display:flex; justify-content:space-between; font-size:14px; padding:5px 0; } .count-row b{ color:var(--accent); } .legend-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#777; padding:3px 0; } .legend-row .dot{ display:inline-block; width:11px; height:11px; border-radius:50%; font-style:normal; } .legend-row .dot.high{ background:#d94a3d; } .legend-row .dot.mid{ background:#e2a33a; } .legend-row .dot.low{ background:#57a05e; } .co-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; background:var(--co); box-shadow:0 0 0 2px var(--co-sub); } .count-row.co-row span{ color:var(--co); font-weight:700; } .count-row.co-row b{ color:var(--co); } .card-title{ font-size:14px; font-weight:800; color:#555; margin-bottom:8px; } .hr{ border:none; border-top:1px dashed var(--accent-bg); margin:10px 0; } /* 確認カードの中のチェック（例：完全削除のとき「EXP も取り消す」） */ .chkline{ display:flex; align-items:flex-start; gap:10px; text-align:left; font-size:13.5px; font-weight:700; color:#444; background:#fdf3e0; border:1px solid #f0e0bd; border-radius:12px; padding:11px 13px; margin:0 0 12px; cursor:pointer; } .chkline input[type="checkbox"]{ width:20px; height:20px; margin:0; flex:0 0 auto; accent-color:#c0392b; } /* 詳細カード（.modal-box を左寄せの明細に使う） */ .modal-box.detail{ text-align:left; max-width:420px; } /* 詳細カードの中の「手でリマインド」（管理者だけ見えます） */ .acts.rmacts{ margin-top:8px; padding-top:10px; border-top:1px dashed #eee; } .acts.rmacts .btn{ white-space:nowrap; font-size:13px; padding:9px 12px; } .rmnote{ font-size:11.5px; color:#aaa; margin-top:6px; } .modal-box.detail .r{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:7px 0; border-bottom:1px dashed var(--accent-bg); } .modal-box.detail .r span{ color:#888; flex:0 0 auto; } .modal-box.detail .r b{ text-align:right; } .modal-box.detail .acts{ display:flex; gap:8px; margin-top:16px; } /* お知らせ用トースト */ .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:1100; background:#333; color:#fff; padding:11px 20px; border-radius:999px; font-size:14px; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.2); } /* 狭い画面では木を先に出す（カードを何枚もスクロールしないと木が見えないのを防ぐ） */ @media (max-width:859px){ .tree-layout > section{ order:-1; } } @media (min-width:860px){ .tree-layout{ grid-template-columns:250px 1fr; align-items:start; } } /* タスクの木だけ横を広く使う（実とラベルを並べる場所が要るため） */ @media (min-width:1100px){ .wrap-wide{ max-width:1180px; } } /* 狭い画面で日付が折り返さないように */ .item .h{ flex-wrap:wrap; gap:4px 10px; } .item .h .d{ white-space:nowrap; } .item .h .n{ text-align:right; } /* 削除（依頼者・管理者のみ） */ .btn-danger{ background:#c0392b; color:#fff; border:none; } .btn-danger:hover{ background:#a53222; } .tag.del{ background:#fdecea; color:#c0392b; } .item.is-deleted{ background:#faf8f5; border-color:#e6ded4; opacity:.85; } .item.is-deleted .body{ color:#888; } /* ============================================================ マスター編集（日報・申請サイトの「マスター管理」と同じ見た目） ・.export … 見出し＋説明＋中身をまとめる枠 ・.selrow … 「種類」の選択行 ・.mtable … 一覧表（項目が増えても列を足すだけで済む） ・.btn2 … 表の中／保存の小さめボタン ============================================================ */ .export{ background:#fff; border:2px solid var(--accent-bg); border-radius:14px; padding:16px; } .export>label{ font-weight:700; display:block; margin-bottom:8px; } .selrow{ display:flex; gap:10px; margin:4px 0 12px; flex-wrap:wrap; align-items:center; } .selrow select{ flex:1; min-width:150px; width:auto; padding:12px; font-size:15px; border:2px solid var(--accent-bg); border-radius:12px; font-weight:700; } .selrow>span{ font-size:14px; font-weight:700; color:#555; } .btn2{ border:2px solid var(--accent-bg); background:#fff; color:var(--accent); font-weight:800; border-radius:10px; padding:11px 16px; font-size:14px; cursor:pointer; font-family:inherit; width:auto; } .btn2.primary{ background:var(--accent); color:#fff; border-color:var(--accent); } .btn2.danger{ background:#fff; color:#c0392b; border-color:#f2c6c0; } .btn2.danger:disabled{ color:#bbb; border-color:#eee; } .btn2.sm{ padding:5px 10px; font-size:12px; border-radius:9px; } /* 表の中の「リセット」（社員ごとのEXP） */ .mtable td.rsrow{ white-space:nowrap; } .mtable td.rsrow button{ margin:0 2px; } .btn2:disabled{ opacity:.5; cursor:default; } .mtable{ border-collapse:collapse; width:100%; font-size:13px; background:#fff; } .mtable th, .mtable td{ border:1px solid #eee; padding:9px 8px; text-align:center; white-space:nowrap; } .mtable thead th{ background:var(--accent-bg); color:var(--accent); font-weight:800; position:sticky; top:0; } .mtable td.tl, .mtable th.tl{ text-align:left; } .mtable td.tl{ font-weight:700; } .mtable td input[type="number"]{ width:5.5em; text-align:center; margin:0; } .mtable tbody tr:nth-child(even){ background:#fafafa; } .mtable input[type="checkbox"]{ width:20px; height:20px; margin:0; accent-color:var(--accent); } /* 選べない人（退職・メール未登録）の行 */ .mtable tr.off{ color:#aaa; } .mtable tr.off td.tl{ font-weight:400; } .mtable .why{ font-size:11.5px; color:#a08b5a; } /* 会社名は会社色で（一覧が見分けやすい） */ .mtable td.co{ font-weight:700; color:var(--co); } /* 表を囲むスクロール枠（列が増えても画面から溢れない） */ .tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* 狭い画面だけに出す注記 */ .sp-only{ display:block; } @media (min-width:700px){ .sp-only{ display:none; } } /* 保存ボタン（内容を隠さないように、画面には貼り付けない） */ .savebar{ margin-top:14px; display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; } /* ============================================================ 管理者メニュー（日報・申請サイトの管理者メニューと同じ見た目） ・ボタンの背景は #FDF8E4（アイコンの丸は #FBF0D6） ・入口で管理者パスコードを聞く ============================================================ */ .menu-btn.admin{ background:#FDF8E4; border-color:#D9F0DC; } .menu-btn.admin .ico{ background:#FBF0D6; } /* まだ作っていないメニュー。 全体を薄くすると管理者メニューのクリーム色まで消えてしまうので、 文字だけ淡くして背景色は残します。 */ .menu-btn.soon{ cursor:default; } .menu-btn.soon .t{ color:#8e8e8e; } .menu-btn.soon .s{ color:#aaa; } .menu-btn.soon .ico{ opacity:.65; } .menu-btn.soon .arrow{ font-size:13px; font-weight:700; color:#aaa; white-space:nowrap; } /* 管理者以外がURLで直接開いたとき */ .naaccess{ text-align:center; color:#b0332a; font-weight:800; padding:40px 10px; } /* ============================================================ リマインド設定（管理者メニュー） 重要度（縦）× タイミング（横）のチェック表。 狭い画面でも押せるよう、表だけ横にスクロールさせます。 ============================================================ */ .rmwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:12px 0 4px; } .rmtable{ border-collapse:collapse; width:100%; min-width:430px; font-size:13px; } .rmtable th, .rmtable td{ border:1px solid #e8e8e4; padding:8px 4px; text-align:center; } .rmtable thead th{ background:var(--accent-bg); color:var(--accent); font-weight:800; font-size:11.5px; line-height:1.3; white-space:nowrap; } .rmtable tbody th{ background:#fafaf7; font-weight:800; color:#555; white-space:nowrap; } /* 期限をすぎてからの列は、ひと目で分かるよう色を変える */ .rmtable th:nth-child(n+6), .rmtable td:nth-child(n+6){ background:#fdf6f5; } .rmtable thead th:nth-child(n+6){ background:#f7e2df; color:#a0392f; } .rmtable input[type="checkbox"]{ width:22px; height:22px; margin:0; accent-color:var(--accent); cursor:pointer; } /* 管理者の設定画面のチェックは、ふつうの設定項目として落ち着いた見た目にする （黄色＋赤は「完全削除のときの確認」だけに残します） */ .card .chkline{ background:#fbfcfa; border-color:#e6ece7; } .card .chkline input[type="checkbox"]{ accent-color:var(--accent); } .selrow input[type="time"], .selrow input[type="number"]{ padding:10px 12px; font-size:15px; border:1px solid #ccc; border-radius:10px; } /* パスコード入力 */ .gate{ max-width:360px; margin:40px auto; } .gate input{ width:100%; padding:14px; font-size:16px; border:2px solid var(--accent-bg); border-radius:12px; box-sizing:border-box; } .gate .msg.err{ display:none; color:#b0332a; background:none; padding:8px 0 0; margin-top:0; font-weight:700; font-size:14px; } .gate .hint{ margin-top:10px; } /* 管理者メニュー：会議の記録を消す（書かれている日のリンク） */ #days a{ color:var(--accent); font-weight:700; text-decoration:none; white-space:nowrap; } #days a:hover{ text-decoration:underline; } /* ===== 昼礼の順番（会議室） ===================================== */ .kg-turn{ border:2px solid var(--accent); } .kg-now{ border-radius:14px; background:var(--co-bg, var(--accent-bg)); padding:16px 16px 14px; } .kg-now.none{ background:#f7f7f4; text-align:center; } .kg-now .big{ display:flex; align-items:center; gap:8px; font-size:22px; font-weight:800; margin-bottom:10px; } .kg-now.none .big{ display:block; font-size:18px; color:#666; } .kg-now .big .co-dot{ width:12px; height:12px; border-radius:50%; background:var(--co, #bbb); flex:none; } .kg-now .big .st{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:#fff; border:1px solid #e3e3dd; color:#666; } .kg-now .big .st.st-absent{ background:#FBEADA; border-color:#f0d3b6; color:#8a4b12; } .kg-now .big .st.st-proxy { background:#E7ECF4; border-color:#cfd9e8; color:#284b7a; } .kg-now .big .st.st-none { background:#f2f2ee; } .kg-now .a{ display:flex; gap:10px; font-size:16px; line-height:1.7; margin-top:2px; } .kg-now .a b{ flex:none; width:40px; font-size:12px; color:#888; font-weight:700; padding-top:4px; } .kg-now .nt{ margin-top:8px; font-size:14px; color:#555; } .kg-now .acts{ margin-top:12px; } .kg-roster{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; } .kg-roster .rchip{ font-size:13px; font-weight:700; padding:7px 11px; border-radius:999px; cursor:pointer; background:#fff; border:1px solid #e3e3dd; color:#aaa; } .kg-roster .rchip.posted{ border-color:var(--co, #e3e3dd); } .kg-roster .rchip.posted{ color:#333; } .kg-roster .rchip.on{ background:var(--accent); border-color:var(--accent); color:#fff; } .kg-roster .rchip.st-absent{ text-decoration:line-through; } @media (max-width:480px){ .kg-now .big{ font-size:20px; } .kg-turn .acts .btn{ flex:1; } } /* ============================================================ 社員マスター（会議）／昼礼の順番 … 1行1人 ============================================================ */ .kam-head{ display:flex; align-items:flex-end; gap:8px; padding:0 10px 8px; border-bottom:2px solid var(--accent-bg); margin-top:12px; } .kam-head .nm{ flex:1 1 auto; font-size:12px; font-weight:800; color:#999; } .kam-head .col{ flex:0 0 74px; text-align:center; } .kam-head .col b{ display:block; font-size:12.5px; color:#333; } .kam-head .col small{ display:block; font-size:10.5px; color:#aaa; } .kam-head .col .btn2{ margin-top:4px; padding:5px 6px; font-size:11px; width:100%; } .kam-row{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #ececec; border-left:7px solid var(--co, #ddd); border-radius:11px; padding:9px 10px; margin-top:7px; } .kam-row .grip{ flex:none; width:16px; text-align:center; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; color:#c9c7bf; font-size:17px; line-height:1; } .kam-row .grip:active{ cursor:grabbing; } .kam-row .no{ flex:none; width:22px; text-align:center; font-size:12px; font-weight:800; color:#aaa; } .kam-row .nm{ flex:1 1 auto; display:flex; align-items:center; gap:7px; min-width:0; } .kam-row .nm i{ width:11px; height:11px; border-radius:50%; background:var(--co, #bbb); flex:none; } /* 名前は「本名（略称）」。広い画面は横並び、細い画面は2行（下のメディアクエリ） */ .kam-row .nm .nmx{ display:flex; align-items:center; gap:3px; min-width:0; } .kam-row .nm b{ font-size:15px; font-weight:800; color:#333; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; } /* 略称（本名のうしろの「(略)」）。本名より1段うすく・小さく出します */ .kam-row .nm .ab{ font-size:12.5px; font-weight:700; color:#8d8d86; white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } .kam-row .nm .co{ font-size:11.5px; color:#aaa; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kam-row .col{ flex:0 0 74px; display:flex; align-items:center; justify-content:center; } /* LINE WORKS 未紐付けの印（名前のうしろに1つだけ） */ .kam-row .nm .nolw{ flex:none; font-style:normal; font-size:11px; font-weight:800; color:#c0392b; background:#fdecea; border-radius:50%; width:17px; height:17px; display:flex; align-items:center; justify-content:center; } .kam-row .ops{ margin-left:auto; display:flex; gap:5px; flex:none; } .kam-row .ops .btn2{ padding:7px 10px; font-size:13px; line-height:1; } .kam-row .ops .btn2:disabled{ opacity:.35; cursor:default; } .kam-row.dragging{ opacity:.95; border-color:var(--co, #ccc); box-shadow:0 6px 18px rgba(0,0,0,.14); } /* チェックボックス（指で押しやすいように、あたり判定を広くします） */ .ck{ display:flex; align-items:center; justify-content:center; width:44px; height:38px; margin:0; cursor:pointer; } .ck input{ width:22px; height:22px; margin:0; cursor:pointer; accent-color:var(--accent); } @media (max-width:520px){ .kam-row .nm .co{ display:none; } .kam-head .col, .kam-row .col{ flex-basis:52px; } .ck{ width:32px; } /* 細い画面では「本名」と「(略称)」を上下2行にします（横に並べると略称が切れるので） */ .kam-row{ padding:9px 6px; gap:6px; } .kam-row .nm{ gap:6px; } .kam-row .nm .nmx{ flex-direction:column; align-items:flex-start; gap:0; } .kam-row .nm .nmx b{ max-width:100%; font-size:14.5px; } .kam-row .nm .ab{ font-size:12px; max-width:100%; } .kam-row .nm .nolw{ width:15px; height:15px; font-size:10px; } } /* 会議に入る前の入口（順番・記録などは入ってから見せます） */ .kg-gate{ text-align:center; border-color:var(--accent); } .kg-gate .ico{ font-size:40px; line-height:1.1; } .kg-gate .t{ font-size:18px; font-weight:800; color:var(--accent); margin-top:6px; } .kg-gate .s{ font-size:13.5px; color:#666; line-height:1.8; margin-top:8px; } .kg-gate .hint{ margin-top:8px; } /* 「○○さんが入室しました」のお知らせ（画面の下。いつも1つだけ差し替えます） */ .kg-toast{ position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 16px); max-width:calc(100% - 32px); background:#26332b; color:#fff; font-size:14px; font-weight:700; padding:12px 18px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.22); opacity:0; pointer-events:none; z-index:1200; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .18s ease, transform .18s ease; } .kg-toast.show{ opacity:1; transform:translate(-50%, 0); } /* ============================================================ 終わったあとの1枚（会議のまとめ） ============================================================ */ .ks-head{ border-bottom:1px solid #eee; padding-bottom:10px; margin-bottom:12px; } .ks-title{ font-size:18px; font-weight:800; color:#333; } .ks-sec{ margin-top:14px; } .ks-sec:first-child{ margin-top:0; } .ks-h{ font-size:13px; font-weight:800; color:var(--accent); border-left:4px solid var(--accent); padding-left:8px; margin-bottom:7px; } .ks-li{ font-size:14.5px; color:#333; line-height:1.85; padding:3px 0 3px 12px; position:relative; word-break:break-word; } .ks-li::before{ content:'・'; position:absolute; left:0; color:#bbb; } .ks-by{ font-size:12px; color:#999; white-space:nowrap; } .ks-done{ font-size:11px; font-weight:800; color:#fff; background:#9aa; border-radius:4px; padding:1px 5px; } /* 貼る文（そのままの形で見せます） */ .ks-raw{ margin:10px 0 0; padding:12px; background:#faf9f5; border:1px solid #ececec; border-radius:9px; font-size:12.5px; line-height:1.75; color:#444; white-space:pre-wrap; word-break:break-word; font-family:inherit; max-height:340px; overflow:auto; -webkit-user-select:text; user-select:text; } /* ============================================================ 会議のボタンは「その会議の会社」の色にします 美華道＝青 ／ 林建設（ハヤケン）＝緑 見ている人の所属では変えません（会議トップの2つのカード） ============================================================ */ .entrybtn.co-bikado, .entrybtn.co-hayaken, .entrybtn.co-daiko{ border-color:var(--co-bg); } .entrybtn.co-bikado:hover, .entrybtn.co-hayaken:hover, .entrybtn.co-daiko:hover{ border-color:var(--co); } .entrybtn.co-bikado .t, .entrybtn.co-hayaken .t, .entrybtn.co-daiko .t{ color:var(--co); } .entrybtn.co-bikado .ico, .entrybtn.co-hayaken .ico, .entrybtn.co-daiko .ico{ display:inline-flex; align-items:center; justify-content:center; width:74px; height:74px; margin:0 auto 8px; border-radius:50%; background:var(--co-bg); } /* 会議履歴の一覧：枠ぜんぶを「その会議の会社」の色にします （左の線だけ会社の色で、まわりの枠は見ている人の色…では分かりにくいため） */ .item.co-bikado, .item.co-hayaken, .item.co-daiko{ border:2px solid var(--co-bg, #ececec); border-left:7px solid var(--co, #ddd); } /* ============================================================ Cafe Komachi ＝ 昼礼の「場」（画像案の構図） ・店内は SVG でその場に描いています（外の画像は読みません） ・左上に看板、右に司会（華小町）、その左にふきだし ・その下に「人＋今日の活動の付箋」を並べます ・読みやすさを最優先に、付箋は明るい紙の色・濃い文字にしています ============================================================ */ .cafe{ position:relative; border-radius:18px; overflow:hidden; margin-bottom:14px; background:#2a1d16; box-shadow:inset 0 0 60px rgba(0,0,0,.45); } .cafe-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; } .cafe-in{ position:relative; padding:10px 12px 14px; } /* 看板（左上） */ .cafe-sign{ font-size:15px; font-weight:800; letter-spacing:.16em; color:#F3D9A4; text-shadow:0 0 12px rgba(243,217,164,.5); } /* 司会は右、ふきだしはその左 */ .cafe-stage{ display:flex; align-items:flex-end; gap:6px; margin-top:-2px; } .cafe-host{ flex:none; width:auto; height:128px; order:2; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); } .cafe-say{ position:relative; order:1; flex:1 1 auto; min-width:0; align-self:center; background:#fff; color:#333; border-radius:14px; padding:10px 13px; font-size:14px; font-weight:700; line-height:1.7; box-shadow:0 4px 14px rgba(0,0,0,.3); } .cafe-say::after{ content:''; position:absolute; right:-9px; top:50%; margin-top:-8px; border:9px solid transparent; border-left-color:#fff; border-right:0; } /* 席：テーブル1つ＝1人。人形（左）＋今日の活動の付箋（右） まわりを少し暗い板で囲むと、行がそろって読みやすくなります */ .cafe-seats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; } .pseat{ display:flex; align-items:stretch; gap:6px; min-width:0; background:rgba(20,12,8,.38); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:6px 8px 6px 6px; box-shadow:0 3px 10px rgba(0,0,0,.28); } .pfig{ flex:none; width:62px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; } .pfig .fig{ display:block; width:58px; height:75px; margin:0 auto; } .pfig .nm{ margin-top:-1px; font-size:12.5px; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pfig .rls{ display:flex; flex-wrap:wrap; gap:2px; justify-content:center; margin-top:2px; } .pfig .rl{ font-size:9.5px; font-weight:800; border-radius:999px; padding:0 6px; background:rgba(255,255,255,.26); color:#fff; } .pfig .rl-turn{ background:#F3D9A4; color:#3a2a20; } .pfig .rl-host{ background:rgba(255,255,255,.92); color:#3a2a20; } /* 付箋（画像案のように人ごとに色を変えます。文字は濃くして読みやすく） */ .pseat .memo{ flex:1 1 auto; min-width:0; align-self:center; border-radius:9px; padding:6px 8px; font-size:11.5px; line-height:1.65; color:#3f3a30; box-shadow:0 2px 6px rgba(0,0,0,.35); } .pseat .memo .l{ display:flex; gap:4px; } .pseat .memo .l b{ flex:none; font-size:10px; font-weight:800; color:#7d7360; padding-top:1px; } .pseat .memo .l span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pseat .memo .nt{ color:#8a6410; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pseat .memo .none{ color:#8f8877; } .memo.m1{ background:#FBF0C4; } .memo.m2{ background:#FBDFE6; } .memo.m3{ background:#DFEFD9; } .memo.m4{ background:#FBE3CD; } .memo.m5{ background:#E6E0F5; } .memo.m6{ background:#D9E9F7; } /* いま話している人 */ .pseat.on{ background:rgba(243,217,164,.20); border-color:rgba(243,217,164,.85); box-shadow:0 0 0 1px rgba(243,217,164,.6), 0 0 18px rgba(243,217,164,.3); } .pseat.on .pfig .fig{ filter:drop-shadow(0 0 8px rgba(243,217,164,.95)); } .pseat.on .pfig .nm{ font-size:13.5px; } /* ★ いま声を出している人。華小町の店内で、その人のまわりがふわっと光ります。 「いま話す番」（.on ＝ 昼礼の順番）とは別ものです。 順番が回っていなくても、声を出せば光ります。 光は**人形の後ろに置いた丸**（.glow）で出します。 人形そのものに影を付ける形だと、服の色（会社の色）と光の色が似たときに ほとんど見えません。後ろに丸を敷けば、服が何色でも必ず分かります。 色は白に近いクリーム色です。暗い店内の写真の上でいちばんよく目立ちます。 ★ **点滅させません。** 話しているあいだは「ずっと光る」、 話していないあいだは「まったく光らない」の2つだけです。 ゆっくり明るさが変わると、光りはじめと消えかけの区別が付きにくく、 そのうえ画面のはしで動くものがちらついて、話の邪魔になるためです */ .pfig{ position:relative; } .pfig .fig{ position:relative; z-index:1; } /* 光より前に人形 */ .pfig .glow{ display:none; } .pseat.talking .pfig .glow{ display:block; position:absolute; left:50%; bottom:2%; width:165%; padding-top:165%; border-radius:50%; transform:translateX(-50%); pointer-events:none; z-index:0; background:radial-gradient(circle, rgba(255,252,228,.95) 0%, rgba(255,236,150,.70) 34%, rgba(255,226,120,.32) 54%, rgba(255,226,120,0) 70%); } /* 写真を置いていないとき（うすい背景）は、光だけだと見えないので席の枠も光らせます */ .cafe:not(.has-photo) .pseat.talking{ border-color:rgba(120,205,150,.9); box-shadow:0 0 0 2px rgba(120,205,150,.55), 0 0 16px rgba(120,205,150,.35); } /* 名前のふだにも小さく印を出します（光だけだと、誰かを見まちがえるためです） */ .pseat .memo .who b::after{ content:'🔊'; margin-left:4px; font-size:10px; opacity:0; transition:opacity .15s; } .pseat.talking .memo .who b::after{ opacity:1; } /* まだ入っていない人・不在の人 */ .pseat.away{ opacity:.55; } .pseat.st-absent{ opacity:.55; } /* スマホは2列のまま、席の中を「上＝人と名前／下＝付箋」の縦積みにします。 横に並べると付箋がせまくなって、午前・午後が切れてしまうためです。 縦積みにすると付箋が席のはば全部を使えるので、2列でも読めます */ @media (max-width:519px){ .pseat{ flex-direction:column; align-items:stretch; gap:4px; padding:6px 7px 7px; } .pfig{ width:auto; flex-direction:row; align-items:center; justify-content:flex-start; gap:6px; } .pfig .fig{ width:30px; height:39px; margin:0; flex:none; } .pfig .nm{ margin:0; font-size:12.5px; } .pfig .rls{ margin:0 0 0 auto; justify-content:flex-end; } .pseat .memo{ align-self:stretch; } } @media (max-width:520px){ .cafe-in{ padding:9px 9px 12px; } .cafe-host{ height:104px; } .cafe-say{ font-size:13px; padding:9px 11px; } } @media (min-width:760px){ .cafe-host{ height:168px; } .cafe-say{ font-size:15px; } .cafe-seats{ grid-template-columns:1fr 1fr 1fr; gap:10px; } .pfig{ width:74px; } .pfig .fig{ width:70px; height:90px; } .pseat .memo{ font-size:12.5px; } } /* ============================================================ 会議室：広い画面は3つに分けます（画像案のPC版の並び） 左＝メニュー ／ 中央＝カフェの場 ／ 右＝お願い・参加者 ★ 1100px 未満では .kg-col* が display:contents で消えるので、 スマホ・タブレットの並び順はこれまでと1つも変わりません ============================================================ */ /* 狭い画面（スマホ・タブレット）＝メニューは上に横に並ぶタブ。 中身（会議室・今日の活動・タスク・履歴）は、これまでどおり上から順に並びます */ .kg-main{ min-width:0; } .kg-colA, .kg-colR, .kg-colB{ display:contents; } @media (min-width:1100px){ .wrap-3{ max-width:1320px; } /* 外側：左メニュー ｜ 中身 */ .kg-shell{ display:grid; align-items:start; gap:14px; grid-template-columns:200px minmax(0,1fr); } .kg-side { position:sticky; top:16px; margin-bottom:0; } /* 会議室の中身だけ、さらに 中央 ｜ 右 に分かれます */ #room{ display:grid; align-items:start; gap:14px; grid-template-columns:minmax(0,1fr) 330px; } .kg-colA { display:block; grid-area:1 / 1 / 2 / 2; } .kg-colR { display:block; grid-area:1 / 2 / 3 / 3; position:sticky; top:16px; } .kg-colB { display:block; grid-area:2 / 1 / 3 / 2; } /* 右の列が画面より長くなったら、その中だけスクロールします */ .kg-colR{ max-height:calc(100vh - 32px); overflow:auto; padding-right:2px; } } @media (min-width:1440px){ .wrap-3{ max-width:1480px; } .kg-shell{ grid-template-columns:220px minmax(0,1fr); } #room{ grid-template-columns:minmax(0,1fr) 360px; } } /* 左メニューの中身 */ .kg-side-me{ background:#fff; border-radius:14px; padding:12px 13px; margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); } .kg-side-me .nm{ display:block; font-weight:800; font-size:14.5px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kg-side-me .rolechip{ margin-top:6px; } /* メニューの項目は**ボタン**です。押しても画面は移りません（中身が入れ替わるだけ） */ .kg-side-nav{ background:#fff; border-radius:14px; padding:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .kg-side-nav::-webkit-scrollbar{ height:0; } .kg-side-nav button{ flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:10px 12px; border:none; border-radius:10px; background:transparent; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; color:#444; white-space:nowrap; } .kg-side-nav button:hover{ background:#f3f3f3; } .kg-side-nav button.on{ background:var(--accent-bg, #E3F0E7); color:var(--accent, #1F5C37); } .kg-side-nav .i{ font-size:17px; line-height:1; } /* 狭い画面ではメニューを上に横並びにします（「自分」の欄は上のバーに出ているので省きます） ★ 言葉の長さは言語で変わるので、文字は削らず**横スクロール**にしています。 右端を白くぼかして「まだ続きがある」と分かるようにし、 押した項目は JS が見える位置まで寄せます */ .kg-side{ margin-bottom:14px; position:relative; } .kg-side-me{ display:none; } .kg-side-nav{ scroll-behavior:smooth; } .kg-side::after{ content:''; position:absolute; top:0; right:0; width:26px; height:100%; border-radius:0 14px 14px 0; pointer-events:none; background:linear-gradient(90deg, rgba(255,255,255,0), #fff); } @media (min-width:1100px){ .kg-side-me{ display:block; } .kg-side-nav{ display:block; overflow:visible; } .kg-side-nav button{ width:100%; gap:9px; } .kg-side::after{ display:none; } /* ★ 左のメニューも、右の列と同じように画面に貼り付けます。 上のほうにも sticky を書いていますが、そのあとに来る `.kg-side{ position:relative }`（狭い画面用）に上書きされて効いていませんでした。 同じ強さなら**あとに書いたほうが勝つ**ので、ここでもう一度書きます */ .kg-side{ position:sticky; top:16px; margin-bottom:0; max-height:calc(100vh - 32px); overflow:auto; } } /* 店内の写真（あとから差し替えられます） img/cafe_sp.webp … スマホ用（縦長） img/cafe_pc.webp … 広い画面用（横長） ★ ファイルが無いあいだは何も描かれず、下のSVGの店内がそのまま見えます。 画像を img/ に置くだけで切り替わります（CSSもHTMLも触りません）。 画像があるかどうかは JS が1回だけ調べます（無いときは読み込みません） */ .cafe-photo{ position:absolute; inset:0; background-position:center center; background-size:cover; background-repeat:no-repeat; } /* 広い画面では、カフェを「舞台」らしい高さにします （司会は上、席は下にそろえる。画像案と同じ立ち方） */ @media (min-width:1100px){ .cafe-in{ min-height:400px; } .cafe-host{ height:190px; } } /* ★ 写真があるときは高さの下限を外します。 下限が残っていると、幅のせまい画面で箱だけが縦に伸びて、 写真の左右が切り落とされます（1152px の画面で 22% も切れていました）。 */ .cafe.has-photo .cafe-in{ min-height:0; } /* 写真があるとき：名前や看板が沈まないよう、ごく薄く暗くします （上が明るい店内でも「Cafe Komachi」とふきだしが読めるように） */ .cafe.has-photo .cafe-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,12,8,.42) 0%, rgba(20,12,8,.16) 38%, rgba(20,12,8,.46) 100%); } /* 写真は縦横の比がきまっているので、その形に近づけて出します スマホ用＝3:4（縦長）／ PC用＝16:9（横長） ★ 中身のほうが高いときは、そのぶん伸びます（席が切れないように）。 aspect-ratio は「これより低くしない」ための目安として使っています */ .cafe{ display:flex; flex-direction:column; } .cafe-in{ flex:1 1 auto; display:flex; flex-direction:column; } .cafe-seats{ margin-top:auto; } /* ★ 写真があるときは、箱を**写真とまったく同じ比**にします。 こうしないと、中身が高くなったぶん箱が縦に伸びて、 background-size:cover が**写真の左右を切り落とします**（狭い画面ほどひどく切れます）。 ★ container-type:size を付けているので、中身の大きさは箱に影響しません。 席の大きさは cqw / cqh（箱に対する割合）で決めます。 container query が使えないブラウザには、その前の px の値が残ります。 */ .cafe.has-photo{ display:grid; grid-template-columns:minmax(0, 1fr); aspect-ratio:736 / 1440; container-type:size; } .cafe.has-photo > .cafe-in{ grid-area:1 / 1; min-width:0; min-height:0; } @media (min-width:760px){ .cafe.has-photo{ aspect-ratio:16 / 9; } } /* ============================================================ 写真があるときの置きかた（画像案の構図） ・華小町 … カウンターの内側に立っているように置きます ・ふきだし … その左 ・席 … 写真のテーブルの位置に、1テーブルに1人（s1〜s6） 位置は写真の中のテーブルを実測した % です。 **写真を差し替えるときは、この % も合わせて直してください。** cafe_pc.webp 1600×900（16:9 ／ テーブル 横3×縦2 ／ カウンター上端 28%） cafe_sp.webp 736×1440（23:45 ／ テーブル 横2×縦3 ／ カウンター上端 30%） ★ 比が変わったら .cafe.has-photo::before の aspect-ratio も直してください。 ここが合っていないと、写真とテーブルの位置がずれます。 席は「テーブルの真ん中」に置いています（translate(-50%,-50%)）。 付箋の行数で高さが変わっても、中心がずれないようにするためです。 ============================================================ */ .cafe.has-photo .cafe-in{ padding:0; } /* 看板は出しません。**写真に「Cafe Komachi」が描いてある**ので、 上から重ねると二重になります。 ★ 名前の入っていない写真に差し替えたときは、下の1行を消してください （消すと左上のすみに文字で出ます） */ .cafe.has-photo .cafe-sign{ display:none; } /* 司会とふきだしは、それぞれ位置を決めます（横に並べるのをやめます） */ .cafe.has-photo .cafe-stage{ display:block; margin:0; } .cafe.has-photo .cafe-host{ position:absolute; z-index:2; width:auto; transform:translateX(-50%); } .cafe.has-photo .cafe-say { position:absolute; z-index:3; align-self:auto; } /* ふきだしは華小町の**右**に出すので、しっぽは左向きにします。 ★ しっぽの大きさと角の丸みは、ふきだしと**いっしょに縮みます**。 角の丸みだけ 14px で固定していると、画面がせまくてふきだしが低いときに 左の辺がぜんぶ丸くなり、しっぽが離れて見えます（実際にそう見えていました）。 ★ しっぽは 1px だけふきだしに食い込ませて、すき間が出ないようにしています。 */ .cafe.has-photo .cafe-say{ border-radius:7px; } .cafe.has-photo .cafe-say::after{ right:auto; left:-7px; margin-top:-7px; border:0 solid transparent; border-top-width:7px; border-bottom-width:7px; border-right-width:7px; border-right-color:#fff; border-left-width:0; } /* 華小町はカウンターの**奥**に立っています。 カウンターより下（＝カウンターに隠れるところ）は切り取って出しません。 PC … 写真のカウンター天板の上端は y26.0% スマホ … 同じく y31.7% 絵の下の端をその線より下に置いて、はみ出したぶんを clip-path で切っています */ .cafe.has-photo .cafe-host{ will-change:clip-path; } /* 席は写真の上の座標に置きます。 ★ 席は「高さ0の目印」です。その目印（＝テーブルの天板の真ん中）から **人形は上へ**（いすに座っているように）、**付箋は下へ**（机の上に置いたように）伸びます。 ★ 名前と役割のふだは付箋の1行目に入っています（人形の下に置くと上下の席が重なるため） */ .cafe.has-photo .cafe-seats{ position:absolute; inset:0; display:block; margin:0; } .cafe.has-photo .pseat{ position:absolute; width:0; height:0; display:block; transform:none; background:none; border:none; box-shadow:none; padding:0; } /* 人形は目印（テーブルの天板）から**上**へ。すこし下にはみ出させて、 いすに腰かけて机に向かっているように見せます */ .cafe.has-photo .pseat .pfig{ position:absolute; left:0; width:auto; display:block; transform:translateX(-50%); } .cafe.has-photo .pseat .pfig .fig{ display:block; width:auto; margin:0; filter:drop-shadow(0 3px 7px rgba(0,0,0,.55)); } /* テーブルに隠れるところ（天板の奥の端より下）は切り取ります。 絵の下の端をテーブルより下に置いて、はみ出したぶんを clip-path で切っています。 PC … 天板の奥の端は中心から 3.2〜4.7% 上（平均 3.5%） スマホ … 同じく 1.8〜2.8% 上（平均 2.2%） */ .cafe.has-photo .pseat .pfig .fig{ will-change:clip-path; } /* 付箋は人のとなり（PC）／机の上（スマホ）。どちらにするかは下のメディアクエリで決めます */ .cafe.has-photo .pseat .memo{ position:absolute; align-self:auto; } /* 付箋の1行目（名前＋「司会」「いま」「あなた」） */ .pseat .memo .who{ display:flex; align-items:center; gap:4px; min-width:0; margin-bottom:2px; } .pseat .memo .who b{ font-size:12px; font-weight:800; color:#2f2a22; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pseat .memo .who .rl{ flex:none; font-size:9px; font-weight:800; border-radius:999px; padding:0 5px; background:rgba(0,0,0,.14); color:#3a3228; } .pseat .memo .who .rl-turn{ background:#E8B93E; color:#3a2a10; } .pseat .memo .who .rl-host{ background:#2f2a22; color:#fff; } /* 写真の上では、いま話している人の付箋をすこし浮かせます */ .cafe.has-photo .pseat.on .memo{ outline:2px solid #F3D9A4; outline-offset:1px; box-shadow:0 4px 14px rgba(0,0,0,.5); } /* 💬のひとことは席に出しません（高さが変わって上下の席が重なるため。 ぜんぶは右の「参加者」に出ています） */ .cafe.has-photo .pseat .memo .nt{ display:none; } /* ---- スマホ（cafe_sp.webp／テーブル 横2×縦3）---- */ @media (max-width:759px){ /* 看板（写真に描いてある「Cafe Komachi」）は x0〜25%・y5〜22% にあります。 華小町はその**右どなり**（左寄り）、ふきだしはさらに**右**に置きます */ /* 絵の下の端を y35%（カウンターの線 31.7% の少し下）に置き、はみ出した 3.3% だけ切ります。 こうすると、顔だけでなく肩から胸までカウンターの上に出ます */ .cafe.has-photo .cafe-host{ left:45%; bottom:65%; height:105px; height:15cqh; clip-path:inset(0 0 23px 0); clip-path:inset(0 0 3.3cqh 0); } .cafe.has-photo .cafe-say { left:64%; width:34%; bottom:73%; font-size:11px; line-height:1.45; padding:6px 8px; } .cafe.has-photo .cafe-say { font-size:2.9cqw; padding:1.5cqw 2.0cqw; border-radius:1.9cqw; } .cafe.has-photo .cafe-say::after{ left:calc(1px - 1.5cqw); margin-top:-1.5cqw; border-top-width:1.5cqw; border-bottom-width:1.5cqw; border-right-width:1.5cqw; } /* スマホは横に付箋を置く幅がないので、付箋は**机の上**（人形の真下）です */ .cafe.has-photo .pseat .pfig{ bottom:0; } /* 切り取りは**人形（svg）だけ**にかけます。人形の入れ物にかけると、 その後ろで光らせている丸（.glow）まで切れてしまうためです */ .cafe.has-photo .pseat .pfig .fig{ clip-path:inset(0 0 15px 0); clip-path:inset(0 0 2.2cqh 0); } .cafe.has-photo .pfig .fig{ height:74px; } .cafe.has-photo .pfig .fig{ height:10.5cqh; } .cafe.has-photo .pseat .memo{ left:-21cqw; width:42cqw; top:-1cqh; } .cafe.has-photo .pseat .memo{ font-size:10px; line-height:1.3; padding:2px 5px; } .cafe.has-photo .pseat .memo{ font-size:2.9cqw; padding:0.6cqw 1.4cqw; } .cafe.has-photo .pseat .memo .who{ margin-bottom:1px; } .cafe.has-photo .pseat .memo .who b{ font-size:11px; font-size:3.2cqw; } .cafe.has-photo .pseat .memo .who .rl{ font-size:8.5px; font-size:2.4cqw; } .cafe.has-photo .pseat .memo .l b{ font-size:9px; font-size:2.6cqw; } /* 写真のテーブル天板を測った位置です（736×1440） */ .cafe.has-photo .pseat.s1{ left:28.3%; top:45.7%; } .cafe.has-photo .pseat.s2{ left:73.6%; top:45.7%; } .cafe.has-photo .pseat.s3{ left:26.8%; top:60.5%; } .cafe.has-photo .pseat.s4{ left:74.9%; top:60.5%; } .cafe.has-photo .pseat.s5{ left:26.0%; top:77.6%; } .cafe.has-photo .pseat.s6{ left:75.5%; top:77.2%; } } /* ---- PC・タブレット（cafe_pc.webp／テーブル 横3×縦2）---- */ @media (min-width:760px){ /* 看板（写真に描いてある「Cafe Komachi」）は x4〜20%・y3〜18% にあります。 華小町はその**右どなり**（左寄り）、ふきだしはさらに**右**に置きます */ .cafe.has-photo .cafe-host{ left:30%; bottom:60%; height:151px; height:34cqh; clip-path:inset(0 0 62px 0); clip-path:inset(0 0 14cqh 0); } /* 席のキャラクターは y26% から上に出るので、ふきだしはそれより上に置きます */ .cafe.has-photo .cafe-say { left:42%; width:34%; bottom:77%; font-size:13px; line-height:1.55; padding:7px 10px; } /* ふきだしは1行ぶんしか高さがないので、角の丸みは**小さめ**にします。 丸みが大きいと左の辺のまっすぐな部分が足りず、しっぽが浮いて見えます */ .cafe.has-photo .cafe-say { font-size:1.55cqw; padding:0.9cqw 1.3cqw; border-radius:0.85cqw; } .cafe.has-photo .cafe-say::after{ left:calc(1px - 0.95cqw); margin-top:-0.95cqw; border-top-width:0.95cqw; border-bottom-width:0.95cqw; border-right-width:0.95cqw; } /* PCは横に余裕があるので、付箋は**人のとなり**（左）に置きます。 そのぶん人形を大きくできます（画像案と同じ見え方） */ .cafe.has-photo .pfig{ width:auto; } .cafe.has-photo .pseat .pfig{ bottom:0; } .cafe.has-photo .pseat .pfig .fig{ clip-path:inset(0 0 16px 0); clip-path:inset(0 0 3.5cqh 0); } .cafe.has-photo .pfig .fig{ height:106px; } .cafe.has-photo .pfig .fig{ height:24cqh; } .cafe.has-photo .pseat .memo{ right:5.5cqw; left:auto; width:15cqw; top:-6cqh; } .cafe.has-photo .pseat .memo{ font-size:11px; line-height:1.45; padding:4px 6px; } .cafe.has-photo .pseat .memo{ font-size:1.45cqw; padding:0.5cqw 0.8cqw; } .cafe.has-photo .pseat .memo .who b{ font-size:12px; font-size:1.6cqw; } .cafe.has-photo .pseat .memo .who .rl{ font-size:9px; font-size:1.2cqw; } .cafe.has-photo .pseat .memo .l b{ font-size:9.5px; font-size:1.3cqw; } /* 1行におさめず、折り返して読ませます（横幅がせまいため） */ .cafe.has-photo .pseat .memo .l{ display:block; } .cafe.has-photo .pseat .memo .l span{ white-space:normal; display:inline; } /* 写真のテーブル天板を測った位置です（1600×900） */ .cafe.has-photo .pseat.s1{ left:24.9%; top:50.1%; } .cafe.has-photo .pseat.s2{ left:52.8%; top:50.1%; } .cafe.has-photo .pseat.s3{ left:79.6%; top:50.1%; } .cafe.has-photo .pseat.s4{ left:24.6%; top:76.6%; } .cafe.has-photo .pseat.s5{ left:54.3%; top:76.7%; } .cafe.has-photo .pseat.s6{ left:81.7%; top:75.8%; } } /* ============================================================ 書類目録（書類作成会議） ・進捗はドーナツ1つ。提出済み（濃い）＋作成中（薄い）を重ねて描きます ・1行＝1つの書類。未着手／作成中／提出済み はボタンを押すだけ ============================================================ */ .kd-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; } .kd-donut{ flex:none; width:96px; height:96px; transform:rotate(-90deg); } .kd-donut circle{ fill:none; stroke-width:4.4; } .kd-donut .bg { stroke:#ececec; } .kd-donut .doing{ stroke:#F0C674; stroke-linecap:butt; } .kd-donut .done { stroke:var(--accent, #306C3B); stroke-linecap:butt; } .kd-donut .pct{ transform:rotate(90deg); transform-origin:21px 21px; fill:#333; font-size:9px; font-weight:800; text-anchor:middle; font-family:inherit; } .kd-legend{ flex:1 1 auto; min-width:0; } .kd-legend .l{ font-size:12.5px; color:#888; line-height:1.6; margin-bottom:6px; } .kd-legend .n{ display:flex; align-items:center; gap:6px; font-size:13px; color:#555; } .kd-legend .n b{ margin-left:auto; font-size:14px; color:#333; } .kd-legend .k{ width:10px; height:10px; border-radius:3px; flex:none; } .kd-legend .k-done { background:var(--accent, #306C3B); } .kd-legend .k-doing{ background:#F0C674; } .kd-legend .k-todo { background:#ececec; } .kd-row{ border:1px solid #ececec; border-left:4px solid #ddd; border-radius:12px; padding:10px 12px; margin-bottom:8px; background:#fff; } .kd-row.st-doing{ border-left-color:#F0C674; background:#fffdf3; } .kd-row.st-done { border-left-color:var(--accent, #306C3B); background:#f8fbf8; } .kd-row .nm{ font-size:14px; font-weight:700; color:#333; line-height:1.5; } .kd-row.st-done .nm{ color:#6f7a70; } .kd-row .nm .nt{ display:block; font-size:12px; font-weight:400; color:#999; margin-top:2px; } .kd-row .sw{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; } .kd-s{ flex:1 1 auto; min-width:76px; padding:7px 4px; border-radius:9px; cursor:pointer; border:1px solid #ddd; background:#fff; color:#888; font-size:12.5px; font-weight:700; font-family:inherit; } .kd-s.on.kd-todo { background:#f1f1ee; color:#555; border-color:#ccc; } .kd-s.on.kd-doing{ background:#F0C674; color:#5b4410; border-color:#dcae4d; } .kd-s.on.kd-done { background:var(--accent, #306C3B); color:#fff; border-color:var(--accent, #306C3B); } .kd-row .ac{ display:flex; gap:12px; margin-top:8px; } .kd-a{ font-size:12px; font-weight:700; color:var(--accent, #306C3B); background:none; border:none; padding:0; cursor:pointer; font-family:inherit; text-decoration:none; } .kd-a.kd-del{ color:#c0392b; margin-left:auto; } /* 書類1行に添える2行（UI.docLine） ・kd-tk … ひもづいたお願い（担当と期限は「お願い」が持ちます。書類には列を足しません） ・kd-up … 最後に直した人と日時。だれが動かしたかが分かるように */ .kd-tk{ display:block; margin-top:4px; font-size:12px; font-weight:700; color:var(--accent, #306C3B); } .kd-tk.is-done{ color:#8a9a8c; } .kd-up{ display:block; margin-top:2px; font-size:11.5px; font-weight:400; color:#aaa; } /* 書類のくわしく（doc.html）でいまの状態を出す札 */ .tag.kd-st.st-todo { background:#f1f1ee; color:#666; } .tag.kd-st.st-doing{ background:#F0C674; color:#5b4410; } .tag.kd-st.st-done { background:var(--accent, #306C3B); color:#fff; } /* お願いカードに出す「📄 書類名」の札（押すとその書類のくわしくへ） */ .tag.doc{ background:#F3EEE3; color:#7a6338; text-decoration:none; } /* 書類のくわしく（doc.html）は1件だけなので、名前の列を出さずボタンだけを並べます */ .kd-only{ margin-bottom:0; } .kd-only .sw{ margin-top:0; } @media (min-width:640px){ .kd-row{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; row-gap:6px; } .kd-row .nm{ grid-column:1; } .kd-row .sw{ grid-column:2; grid-row:1 / 3; margin-top:0; flex-wrap:nowrap; } .kd-s{ flex:0 0 auto; min-width:0; padding:7px 11px; } .kd-row .ac{ grid-column:1; margin-top:0; } /* 1件だけのときは、広い画面でも横に引きのばさず、ふつうに並べます */ .kd-only{ display:block; } .kd-only .sw{ flex-wrap:wrap; } } /* ============================================================ 画面共有（LiveKit） ・会議室の中に小さく映し、「⛶ 大きく見る」で画面いっぱいにします ・現場で図面を見るには拡大が要るので、大きい方はピンチで拡大できます ============================================================ */ .mt-box .acts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; } .mt-box .mt-n{ font-size:12.5px; color:#888; font-weight:700; margin-left:auto; } .mt-box .hint.ok { color:var(--accent, #306C3B); font-weight:700; } .mt-box .hint.err{ color:#c0392b; } .mt-stage{ position:relative; margin-top:10px; background:#000; border-radius:12px; overflow:hidden; } .mt-stage video{ display:block; width:100%; max-height:46vh; background:#000; cursor:zoom-in; object-fit:contain; } /* 横長でも縦長でも、絵は全部入れます */ .mt-full{ position:absolute; right:8px; bottom:8px; border:0; border-radius:9px; cursor:pointer; padding:7px 12px; font-size:12.5px; font-weight:800; font-family:inherit; background:rgba(0,0,0,.62); color:#fff; } /* ============================================================ 声（LiveKit の音声通話） ・会議に入ると自動でつながります。マイクは切った状態で始まります ・「話す」は押し間違えないよう、大きく・色が変わるボタンにします ============================================================ */ .vc-box .vc-st{ font-size:12.5px; font-weight:700; color:#999; } .vc-box .vc-st.on{ color:var(--accent, #306C3B); } .vc-box .vc-st.ng{ color:#c0392b; } .vc-mic{ width:100%; margin-top:10px; padding:16px; border-radius:12px; cursor:pointer; border:2px solid #ddd; background:#fff; color:#777; font-family:inherit; font-size:16px; font-weight:800; } .vc-mic.on{ background:var(--accent, #306C3B); border-color:var(--accent, #306C3B); color:#fff; } .vc-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .vc-box .hint.err{ color:#c0392b; } /* 残り時間（切り忘れを止めるタイマー）。5分を切ると色が変わります */ .vc-left{ margin-top:10px; font-size:13px; font-weight:800; color:#888; } .vc-left.soon{ color:#b8860b; } .vc-left.up { color:#c0392b; } /* 参加者の欄：いま話している人 */ .kg-att.talking{ box-shadow:0 0 0 2px var(--accent, #306C3B) inset; } /* 🔊 は、その人が話しているあいだだけ出します。 場所は always 取っておきます（出たり消えたりで行がガタつかないように） */ .vc-talkmark{ margin-left:6px; font-size:13px; visibility:hidden; } .kg-att.talking .vc-talkmark{ visibility:visible; } /* ---- 音量つまみ（0〜200%。**自分の聞こえ方だけ**が変わります） ---- 🔊 を押すと消す／前の大きさに戻す。100%のところに目印を置きます */ .vc-vol{ display:flex; align-items:center; gap:7px; margin-top:6px; } .vc-vol .ic{ flex:none; cursor:pointer; font-size:13px; line-height:1; padding:2px; user-select:none; } /* 司会・管理者は消せないので、押せる見た目にしません */ .vc-vol.floor .ic{ cursor:default; opacity:.6; } .vc-vol .pc{ flex:none; min-width:3.4em; text-align:right; font-size:11px; font-weight:800; color:#8a8a8a; font-variant-numeric:tabular-nums; } .vc-vol.off .pc{ color:#c0392b; } .vc-vol input[type=range]{ flex:1 1 auto; min-width:0; height:22px; margin:0; padding:0; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; /* 100%（まんなか）に目印。ここが「ふつうの大きさ」です */ background-image:linear-gradient(#c9c9c9, #c9c9c9); background-size:2px 10px; background-position:50% 50%; background-repeat:no-repeat; } .vc-vol input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:999px; background:#e3e3e3; } .vc-vol input[type=range]::-moz-range-track{ height:4px; border-radius:999px; background:#e3e3e3; } .vc-vol input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%; background:var(--accent, #306C3B); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); } .vc-vol input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--accent, #306C3B); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); } .vc-vol.off input[type=range]::-webkit-slider-thumb{ background:#c0392b; } .vc-vol.off input[type=range]::-moz-range-thumb{ background:#c0392b; } /* 画面共有の欄の中では、行を1本ぶん使います */ .mt-box .vc-vol{ flex-basis:100%; margin-top:8px; } .vc-quiet{ margin-left:6px; border:0; background:none; cursor:pointer; padding:2px 4px; font-size:13px; font-family:inherit; opacity:.55; } .vc-quiet:hover{ opacity:1; } /* 画面の上に貼り付ける（スマホで、記録を書きながら画面を見るため） 高さは「画面の高さの32%」と「横幅の16:9ぶん」の小さいほうにします。 縦長のスマホでは 56.25vw（＝16:9）に、横向きや広い画面では 32vh に落ち着きます。 ★ 貼り付けているあいだは body に余白を足して、下の中身が隠れないようにします */ :root{ --mt-pin-h: min(32vh, 56.25vw); } .mt-pin{ position:fixed; top:0; left:0; right:0; z-index:4010; background:#000; padding-top:env(safe-area-inset-top, 0px); box-shadow:0 2px 10px rgba(0,0,0,.35); } .mt-pin[hidden]{ display:none; } .mt-pinvid{ height:var(--mt-pin-h); background:#000; } .mt-pinvid video{ width:100%; height:100%; object-fit:contain; background:#000; display:block; cursor:zoom-in; max-height:none; } .mt-pinacts{ position:absolute; right:8px; bottom:8px; display:flex; gap:6px; } .mt-pinacts .mt-x{ padding:6px 10px; font-size:13px; } /* 貼り付けているあいだ、中身と言語切替をその下へずらします */ body.mt-pinned{ padding-top:calc(var(--mt-pin-h) + env(safe-area-inset-top, 0px)); } body.mt-pinned #i18nBar{ top:calc(var(--mt-pin-h) + env(safe-area-inset-top, 0px) + 8px); } /* 画面いっぱい（見るほう） z-index は言語切替（4000）より上にします。上に出ないと、 右上の「音を出す」が言語切替に隠れてしまうためです */ .mt-ov{ position:fixed; inset:0; z-index:4100; background:#000; } .mt-ov[hidden]{ display:none; } .mt-ovbar{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; gap:10px; padding:8px 12px; padding-top:max(8px, env(safe-area-inset-top)); /* 上に出っぱりのある機種向け */ background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0)); } .mt-ovname{ flex:1 1 auto; text-align:center; color:#dfe; font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mt-x{ border:0; border-radius:9px; cursor:pointer; padding:8px 12px; flex:none; font-size:12.5px; font-weight:800; font-family:inherit; background:rgba(255,255,255,.14); color:#fff; } /* touch-action:none … 端末そのもののピンチを止めて、こちらの拡大だけを効かせます */ .mt-ovstage{ position:absolute; inset:0; overflow:hidden; touch-action:none; } /* ★ 画面いっぱいで見るときは、**絵の全部が入る**ようにします。 幅だけ100%にして高さを絵まかせにすると、 スマホを横にしたときや、縦長の画面を共有されたときに、上下がはみ出して切れます。 等倍のときは指で動かせないので、切れたところは二度と見られません。 そこで枠いっぱいに広げ、object-fit:contain で**足りないところを黒帯**にします。 拡大したときは、枠ごと大きくなるので、これまでどおり指で動かして端まで見られます */ .mt-ovstage video{ position:absolute; left:50%; top:50%; width:100%; height:100%; max-height:none; object-fit:contain; transform:translate(-50%,-50%); transform-origin:center center; will-change:transform; background:#000; display:block; cursor:grab; } .mt-ovhint{ position:absolute; left:0; right:0; bottom:10px; text-align:center; color:#9aa; font-size:12px; pointer-events:none; } /* ============================================================ 文字起こし（AiNote などの会話の記録） ・全文は長いので、はじめは折りたたんで出します ・貼り付けた改行をそのまま見せたいので 
 です
   ============================================================ */
.kt-sum{ background:var(--accent-bg, #E3F0E7); border-radius:12px; padding:12px 14px;
         font-size:14px; line-height:1.8; color:#333; white-space:pre-wrap;
         margin:12px 0 10px; }
.kt-body{ margin:0; max-height:150px; overflow:hidden; position:relative;
          background:#fafaf8; border:1px solid #ececec; border-radius:12px;
          padding:12px 14px; font-size:13px; line-height:1.9; color:#444;
          white-space:pre-wrap; word-break:break-word;
          font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; }
.kt-body::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:52px;
                 background:linear-gradient(180deg, rgba(250,250,248,0), #fafaf8); }
.kt-body.open{ max-height:none; overflow:visible; }
.kt-body.open::after{ display:none; }
.kt-more{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.kt-more .hint{ margin-left:auto; }

/* 文字起こしを切っているときの「要約」欄。押せないことを見た目でも伝えます */
.checkrow.off{ opacity:.45; pointer-events:none; }

/* 管理者メニュー：なぜ切れるようにしてあるかの説明 */
.ks-why .r{ display:flex; gap:12px; padding:11px 0; border-top:1px solid #eee; }
.ks-why .r:first-child{ border-top:0; padding-top:2px; }
.ks-why .i{ flex:none; font-size:20px; line-height:1.3; }
.ks-why b{ display:block; font-size:13.5px; color:#2f2a22; margin-bottom:3px; }
.ks-why div div{ font-size:12.5px; line-height:1.85; color:#666; }

/* ---- 会話の中からさがした結果（会議履歴） ----
     ★ 「あの話、どの会議だったか」を引くための欄です。
       会議ごとにまとめ、見つかった行に**何分何秒のところか**を付けます */
.kt-found{ border:1px solid #e6e2d8; border-radius:14px; background:#fffdf7;
           padding:12px 14px; margin-bottom:14px; }
.kt-found-h{ font-size:12.5px; font-weight:800; color:#7d7360; margin-bottom:8px; }
.kt-found-m{ border-top:1px solid #efece4; padding:9px 0 7px; cursor:pointer; }
.kt-found-m:first-of-type{ border-top:0; }
.kt-found-m:hover{ background:#fbf7ec; border-radius:8px; }
.kt-found-m .t{ display:flex; align-items:baseline; gap:8px;
                font-size:13.5px; font-weight:800; color:var(--accent, #2f2a22); }
.kt-found-m .t .d{ margin-left:auto; font-size:11px; font-weight:700; color:#9a9384; }
.kt-found-m .l{ display:flex; gap:8px; margin-top:4px; font-size:12.5px; line-height:1.7; }
.kt-found-m .l .ts{ flex:none; font-size:11px; font-weight:800; color:#8a8a8a;
                    font-variant-numeric:tabular-nums; padding-top:2px; }
.kt-found-m .l .x{ color:#4a443a; overflow-wrap:anywhere; }
.kt-found-m .l .x b{ background:#ffe9a8; font-weight:800; border-radius:3px; padding:0 1px; }
/* 訳で見つかったときに添える原文。小さく・薄く、主役は訳のほう */
.kt-found-m .l .x .src{ display:block; margin-top:2px; font-size:11.5px; color:#9a9384; }
.kt-found-m .l .x .src b{ background:#f2ead2; }

/* 訳を見ているときの帯（kaigi_history.html）
     ★ 「いま訳を見ている」ことを隠しません。機械の聞き取りを機械が訳したものなので、
       原文にすぐもどれることが要ります */
.kt-tr{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
        background:#eef4fb; border:1px solid #d7e4f2; border-radius:12px;
        padding:8px 12px; margin-bottom:10px;
        font-size:12.5px; font-weight:700; color:#41546b; }
.kt-tr .i{ font-size:14px; }
.kt-tr .btn2{ margin-left:auto; }

/* ============================================================
   会議のリマインド設定（admin_kaigi_remind.html）
     いただいた申請サイトの「リマインド設定」と同じ組み立てです
       ・上：会社ごとのカード（ON/OFF ＋ 送る時刻 ＋ 送信済み ＋ リセット）
       ・下：送る日のカレンダー（会社ごと）
   ============================================================ */
.cards2{ display:grid; grid-template-columns:1fr; gap:0; }

/* チェックの行（カードの見出しを兼ねます） */
.checkrow{ display:flex; align-items:center; gap:10px; padding:2px 0 6px;
           font-size:15px; font-weight:800; cursor:pointer; }
.checkrow .box{ width:26px; height:26px; flex:none; border-radius:8px; border:2px solid #bbb;
                background:#fff; display:flex; align-items:center; justify-content:center;
                color:#fff; font-size:17px; }
.checkrow.on .box{ background:var(--accent); border-color:var(--accent); }

/* チェックOFF のときは下を薄くします（チェック自体は押せます） */
.kr-card.off .krbody{ opacity:.45; pointer-events:none; filter:grayscale(1); }

.kr-row{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.kr-row .lab{ width:88px; flex:none; font-weight:800; font-size:14px; }
.kr-row .in{ flex:1 1 auto; min-width:0; }
.kr-row input[type=time]{ width:100%; }

.statusrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
            margin-top:12px; padding-top:10px; border-top:1px dashed #ddd; }
.statusrow .stat{ flex:1 1 auto; font-size:13px; font-weight:800; }
.statusrow .stat.sent{ color:#1F7A43; }
.statusrow .stat.notyet{ color:#888; }

/* カレンダーは、いま見ている会社の色にします
     美華道＝青（co-bikado と同じ #1F3A5F）／ 林建設＝緑（管理者メニューの既定）
   --accent をこの中だけ差し替えるので、日のマス・タブ・保存ボタンがまとめて変わります */
.kr-cal{ margin-top:14px; }
.kr-cal.kr-co-mikado { --accent:#1F3A5F; --accent-bg:#DEE8F8; }
.kr-cal.kr-co-hayaken{ --accent:#1F5C37; --accent-bg:#E3F0E7; }

/* どちらの会社のカレンダーか */
.kr-cotabs{ display:flex; gap:8px; margin:10px 0 12px; flex-wrap:wrap; }
.kr-cotab{ border:2px solid var(--accent-bg); background:#fff; color:#666;
           border-radius:999px; padding:7px 16px; font-size:13.5px; font-weight:800;
           cursor:pointer; font-family:inherit; }
.kr-cotab.on{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* カレンダー */
.calhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.calhead .calttl{ font-weight:800; font-size:16px; }
.nav-btn{ border:2px solid var(--accent-bg); background:#fff; color:var(--accent);
          border-radius:8px; width:42px; height:38px; font-size:18px; font-weight:800;
          cursor:pointer; font-family:inherit; }
.nav-btn:hover{ background:var(--accent-bg); }

.calgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-h{ text-align:center; font-size:12px; font-weight:800; padding:4px 0; color:#666; }
.cal-h.sun{ color:#c0392b; } .cal-h.sat{ color:#2a68b0; }
.cal-cell{ min-height:54px; border:1.5px solid #e4e4e4; border-radius:8px; padding:4px 5px;
           cursor:pointer; display:flex; flex-direction:column; gap:1px;
           background:#fafafa; user-select:none; }
.cal-cell.empty{ border:none; background:transparent; cursor:default; }
.cal-cell.on{ background:var(--accent-bg); border-color:var(--accent); }
.cal-cell .dnum{ font-size:13px; font-weight:800; color:#333; }
.cal-cell.sun .dnum{ color:#c0392b; } .cal-cell.sat .dnum{ color:#2a68b0; }
.cal-cell .hol{ font-size:9px; color:#c0392b; line-height:1.2; word-break:break-all; }
.cal-cell .chk{ margin-top:auto; text-align:right; font-size:13px; font-weight:800; color:#ccc; }
.cal-cell.on .chk{ color:var(--accent); }
.cal-legend{ font-size:11.5px; color:#888; margin-top:8px; line-height:1.7; }

@media (min-width:860px){
  .cards2{ grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
  .cards2 .card{ margin-bottom:0; }
  .cal-cell{ min-height:74px; padding:6px 8px; }
  .cal-cell .dnum{ font-size:14px; }
  .cal-cell .hol{ font-size:11px; }
  .cal-h{ font-size:13px; }
  .calgrid{ gap:6px; }
}

/* ============================================================
   会議のタスク欄（kaigi_room.html の #ktkBox）
     ・会議中ずっと上に出ます。記録（メモ）とは別ものです
     ・未完了が上／完了は取り消し線をつけて下にたまります
     ・「＋つくる」を押したときだけ入力欄がひらきます（ふだんは畳んでいます）
   ============================================================ */
.kg-tasks .card-title{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.kg-tasks .card-title b{ font-size:12px; font-weight:800; color:var(--accent);
                         background:var(--accent-bg); border-radius:999px; padding:2px 9px; }
.ktk-addbtn{ margin-left:auto; flex:0 0 auto; padding:6px 12px; font-size:12.5px; }

/* つくる */
.ktk-form{ background:#fbfbf8; border:2px dashed var(--accent-bg); border-radius:12px;
           padding:12px; margin-bottom:12px; }
.ktk-form label{ display:block; font-size:12px; font-weight:800; color:#777; margin-bottom:4px; }
.ktk-form textarea{ width:100%; box-sizing:border-box; padding:10px; font-size:14px; line-height:1.6;
                    border:2px solid var(--accent-bg); border-radius:10px; font-family:inherit; resize:vertical; }
.ktk-form textarea:focus, .ktk-form input:focus, .ktk-form select:focus{ outline:none; border-color:var(--accent); }
.ktk-form input[type=date], .ktk-form select{ width:100%; box-sizing:border-box; padding:9px 10px;
                    font-size:14px; border:2px solid var(--accent-bg); border-radius:10px;
                    background:#fff; font-family:inherit; color:#333; }
.ktk-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ktk-form .acts{ display:flex; gap:8px; }
.ktk-form .acts .btn{ width:auto; flex:1 1 auto; padding:11px 14px; font-size:14px; }
.ktk-people{ margin-top:2px; }

/* 1件 */
.ktk-row{ background:#fffdf3; border:1px solid #f0e4bd; border-radius:11px;
          padding:10px 12px; margin-bottom:8px; }
.ktk-row .hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px; }
.ktk-row .who{ font-size:12.5px; font-weight:800; color:#6b5a2e; }
.ktk-row .who i{ font-style:normal; color:#bda96a; margin:0 6px; }
.ktk-row .mt{ margin-left:auto; font-size:11.5px; color:#a89a72; white-space:nowrap; }
.ktk-row .bd{ font-size:14.5px; font-weight:700; color:#3f3a2c; line-height:1.55;
              white-space:pre-wrap; word-break:break-word; }
.ktk-row .ac{ display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.ktk-a{ border:2px solid #e9dfc0; background:#fff; color:#8a7a4c; font-weight:800;
        font-size:12px; padding:5px 11px; border-radius:9px; cursor:pointer; font-family:inherit; }
.ktk-a.ok{ border-color:var(--accent); color:var(--accent); }
.ktk-a.ok:hover{ background:var(--accent); color:#fff; }
.ktk-a.del{ border-color:#f2c6c0; color:#c0392b; }
.ktk-a.del:hover{ background:#c0392b; border-color:#c0392b; color:#fff; }

/* 終わったもの：取り消し線をつけて、未完了の下にたまります（消すまで残ります） */
.ktk-row.done{ background:#f7f8f6; border-color:#e6e9e3; }
.ktk-row.done .bd{ text-decoration:line-through; text-decoration-color:rgba(0,0,0,.3); color:#8b8b84; }
.ktk-row.done .who{ color:#9a9a92; }
.ktk-row.done .who i{ color:#c3c3bb; }
.ktk-row.done .mt{ color:#aaa; }
.ktk-row.done .tag{ opacity:.55; }

@media (max-width:420px){
  .ktk-row .mt{ margin-left:0; width:100%; }
  .ktk-form .row{ grid-template-columns:1fr; }
}

/* ============================================================
   会議室の中の切り替え（左メニューを出したまま中身だけ入れ替える）
     ・広い画面では、一覧を2列に並べて左メニューぶんの幅を活かします
     ・1件を開いたとき（履歴の中身）は、読みやすい幅で止めます
   ============================================================ */
#vAct .card, #vHist .card, #vTasks .searchbar{ margin-bottom:14px; }
@media (min-width:1300px){
  #tvList, #avList, #hvList{ display:grid; grid-template-columns:1fr 1fr;
                             gap:0 14px; align-items:start; }
  #tvList > .empty, #avList > .empty, #hvList > .empty{ grid-column:1 / -1; }
  #hvOne{ max-width:860px; }
}

/* 「会議で決まったお願い」の印（連絡サイトの一覧・くわしく・編集）
   ふつうのお願いと見分けがつくよう、会社の色で塗りつぶした帯にしています
   （会社の色の帯 .tag.co は「所属会社」なので、こちらは色を反転させて別ものだと分かるように） */
.tag.mtg{ background:var(--co); color:#fff; box-shadow:inset 0 0 0 1px var(--co-sub); }

/* ============================================================
   開催中の会議の見出し（#head）を、PCでは左ペインの一番上に置きます
     ・DOM では「自分」「メニュー」の後ろに置き、order で上げています。
       こうすると狭い画面では タブ → 会議の見出し の順になり、
       上に来てほしいタブがいつもすぐ押せます
     ・200px に収めるため、字と余白を詰めてボタンは縦に並べます
   ============================================================ */
.kg-side #head{ margin-top:14px; margin-bottom:0; }
@media (min-width:1100px){
  .kg-side{ display:flex; flex-direction:column; }
  .kg-side #head{ order:-1; margin-top:0; margin-bottom:10px; padding:13px 14px; }
  .kg-side .kg-head{ flex-wrap:wrap; gap:6px; }
  .kg-side .kg-head > div{ min-width:0; }
  .kg-side .kg-head .kg-title{ font-size:16px; line-height:1.35; word-break:break-word; }
  .kg-side .kg-head .tag{ margin-left:0; font-size:11px; padding:2px 8px; }
  .kg-side #head .hint{ font-size:11.5px; margin-top:4px; }
  .kg-side #head .acts{ display:flex; flex-direction:column; gap:6px; margin-top:10px !important; }
  .kg-side #head .acts > *{ width:100%; box-sizing:border-box; text-align:center;
                            padding:9px 8px; font-size:12.5px; }
}

/* ============================================================
   昼礼の進行（台本）
     ① あいさつ ② 今日の活動 ③ お休みの人 ④ 決まったこと ⑤ タスクと締め
     ★ いまどの段かは、上の小さなチップで出します。
       終わった段はうすく、いまの段だけ色をつけます
   ============================================================ */
.kg-steps{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.kg-step{ display:inline-flex; align-items:center; gap:5px; flex:0 1 auto;
          font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:999px;
          border:2px solid #ececec; background:#fff; color:#aaa; white-space:nowrap; }
.kg-step i{ font-style:normal; font-size:13px; line-height:1; }
.kg-step.done{ border-color:var(--accent-bg); background:var(--accent-bg); color:var(--accent); opacity:.65; }
.kg-step.on  { border-color:var(--accent); background:var(--accent); color:#fff; }

/* 開始のあいさつに出す人数 */
.kg-nums{ display:flex; justify-content:center; gap:22px; margin:10px 0 4px; }
.kg-nums .n{ text-align:center; }
.kg-nums .n b{ display:block; font-size:26px; font-weight:800; color:var(--accent); line-height:1.2; }
.kg-nums .n span{ font-size:11.5px; color:#999; font-weight:700; }

/* お休みの人の代読 */
.kg-now.is-proxy{ background:#F3F4F1; }
.kg-now .pxt{ font-size:11.5px; font-weight:800; color:#7a7a70;
              background:#fff; border-radius:999px; padding:3px 10px;
              display:inline-block; margin-bottom:8px; }

/* 決まったこと・タスクの一覧（進行カードの中） */
.kg-decs{ text-align:left; margin-top:10px; max-height:280px; overflow:auto; }
.kg-decs .kg-note{ border-bottom-color:#e8e8e2; }
.kg-decs .kg-task{ margin-bottom:6px; }

/* 持ち時間（管理者メニューで「はかる」にしたときだけ出ます）
   残り30秒で黄色、すぎたら赤。**進みはしません**（知らせるだけ） */
.kg-timer{ margin-left:auto; flex:0 0 auto; font-size:15px; font-weight:800;
           font-variant-numeric:tabular-nums; color:#6b6b62;
           background:#fff; border:2px solid #e6e6e0; border-radius:999px; padding:2px 12px; }
.kg-timer.warn{ color:#9a6b12; background:#fdf3e0; border-color:#f0dcb0; }
.kg-timer.over{ color:#fff;    background:#c0392b; border-color:#c0392b; }

/* 管理者メニュー：昼礼の進行 */
.kc-quick{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* 持ち時間の操作（止める／つづき／0にもどす）。司会だけに出ます
   ★ 押しても順番は動きません。知らせ方を変えるだけです */
.kg-tctl{ display:inline-flex; gap:4px; flex:0 0 auto; margin-left:6px; }
.kg-tctl button{ border:2px solid #e6e6e0; background:#fff; color:#6b6b62; cursor:pointer;
                 font-size:13px; line-height:1; padding:5px 9px; border-radius:9px; font-family:inherit; }
.kg-tctl button:hover{ border-color:var(--accent); color:var(--accent); }
.kg-timer.hold{ color:#555; background:#ececea; border-color:#d8d8d2; }

/* 店内（Cafe Komachi）にも同じ持ち時間を出します。会議中はここを見ているためです */
.cafe-timer{ position:absolute; top:8px; right:10px; z-index:3;
             display:flex; align-items:center; gap:6px;
             background:rgba(255,255,255,.92); border-radius:999px; padding:4px 6px 4px 12px;
             box-shadow:0 2px 10px rgba(0,0,0,.25); }
.cafe-timer .t{ font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; color:#4a4a44; }
.cafe-timer.warn .t{ color:#9a6b12; }
.cafe-timer.over     { background:#c0392b; }
.cafe-timer.over .t  { color:#fff; }
.cafe-timer.hold .t  { color:#8a8a82; }
.cafe-timer .ctl{ display:inline-flex; gap:3px; }
.cafe-timer .ctl button{ border:none; background:#f1f1ec; color:#5c5c55; cursor:pointer;
                         font-size:12px; line-height:1; padding:5px 8px; border-radius:999px; font-family:inherit; }
.cafe-timer .ctl button:hover{ background:var(--accent); color:#fff; }
.cafe-timer.over .ctl button{ background:rgba(255,255,255,.85); }

@media (max-width:420px){
  .cafe-timer{ top:6px; right:8px; padding:3px 5px 3px 10px; }
  .cafe-timer .t{ font-size:14px; }
}

/* ============================================================
   管理者メニュー：バックアップの状況（admin_backup.html）
     ・見るだけの画面です。取る・戻すはサーバー側（cron と人の手）で行います
     ・.hintbox / .cmd は通知の状況（admin_notify.html）と同じ見た目にそろえています
   ============================================================ */
.hintbox{ font-size:12.5px; line-height:1.7; color:#7a6236; background:#FDF8E4;
          border:2px solid #F2E6C2; border-radius:12px; padding:12px; margin-bottom:14px; }
.hintbox ul{ margin:6px 0 0; padding-left:18px; }
.cmd{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; background:#f6f5f1;
      border:1px solid #e6e4dc; border-radius:8px; padding:8px 10px; margin-top:8px;
      overflow-x:auto; white-space:pre; color:#444; }

/* 取れているかどうかを、いちばん上で1目で分かるようにします */
.bk-head{ display:flex; align-items:center; gap:14px; border-left:6px solid #ddd; }
.bk-head .lamp{ font-size:28px; line-height:1; flex:0 0 auto; }
.bk-head .t{ font-size:16px; font-weight:800; color:#333; }
.bk-head .s{ font-size:12.5px; color:#888; margin-top:3px; line-height:1.6; }
.bk-head.s-ok  { border-left-color:var(--accent); }
.bk-head.s-ok   .t{ color:var(--accent); }
.bk-head.s-warn{ border-left-color:#d9a326; }
.bk-head.s-warn .t{ color:#9a6b12; }
.bk-head.s-ng  { border-left-color:#c0392b; }
.bk-head.s-ng   .t{ color:#c0392b; }

.bk-kv{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center; }
.bk-kv .k{ font-size:11px; color:#888; }
.bk-kv .v{ font-size:15px; font-weight:800; color:#444; margin-top:2px;
           font-variant-numeric:tabular-nums; word-break:break-all; }
@media (max-width:520px){ .bk-kv{ grid-template-columns:repeat(2,1fr); row-gap:12px; } }

.bk-row{ display:flex; align-items:baseline; gap:8px; border-top:1px solid #eee;
         padding:8px 0; font-size:12.5px; }
.bk-row:first-child{ border-top:none; }
.bk-row .nm{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:#555;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-row .sz{ color:#888; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bk-row .dt{ color:#aaa; white-space:nowrap; margin-left:auto; font-size:11.5px; }
.bk-row.newest .nm{ color:var(--accent); font-weight:700; }
@media (max-width:520px){ .bk-row .dt{ display:none; } }

/* ============================================================
   現場（sites.html / site.html）
     ・現場マスターと日報は申請サイト側。ここでは読むだけです
     ・会社の色（.co-*）と .tag は既存のものをそのまま使います
   ============================================================ */
.st-card{ display:block; background:#fff; border:1px solid #ececec; border-radius:14px;
          border-left:4px solid var(--co, var(--accent));
          padding:12px 14px; margin-bottom:10px; text-decoration:none; color:inherit;
          box-shadow:0 1px 3px rgba(0,0,0,.05); }
.st-card:active{ background:#fafaf8; }
.st-card .st-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.st-card .st-short{ font-size:17px; font-weight:800; color:var(--co, var(--accent)); }
.st-card .arrow{ margin-left:auto; color:#ccc; font-size:20px; line-height:1; }
.st-card .st-name{ font-size:13px; color:#555; margin-top:4px; }
.st-card .st-sub{ font-size:12px; color:#888; margin-top:6px; }
.st-card .st-when{ color:#aaa; }

.st-head .st-name{ font-size:16px; font-weight:800; color:#333; }
.st-head .st-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.st-head .hint{ margin-top:8px; }
.tag.open{ background:var(--accent-bg); color:var(--accent); }
.tag.tr{ background:#EDE7F6; color:#5C53A3; }

/* 日報1件 */
.st-np{ border-top:1px solid #eee; padding:10px 0; }
.st-np:first-child{ border-top:none; }
.st-np .l1{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.st-np .d{ font-size:12px; color:#999; font-variant-numeric:tabular-nums; }
.st-np .who{ font-size:13px; font-weight:800; color:#444; }
.st-np .tags{ display:inline-flex; gap:4px; flex-wrap:wrap; margin-left:auto; }
.st-np .w{ font-size:14px; color:#333; line-height:1.7; margin-top:4px; }
.st-np .nt{ font-size:13px; color:#777; line-height:1.7; margin-top:2px; }
.st-np .mb{ font-size:11.5px; color:#aaa; margin-top:3px; }
/* 申請サイトの日報をひらくボタン（別サイト・新しいタブ）
     行の右下に小さく置きます。行そのものは押せないままにして、
     原文を読む・文字を選んでコピーする、をじゃましないようにします */
.st-np .go{ display:flex; justify-content:flex-end; margin-top:6px; }
.btn-xs{ width:auto; padding:5px 12px; font-size:12px; font-weight:800;
         border-radius:9px; text-decoration:none; display:inline-block; }

/* 会議1件 */
.st-mtg{ display:flex; align-items:baseline; gap:8px; border-top:1px solid #eee;
         padding:10px 0; font-size:13px; text-decoration:none; color:inherit; }
.st-mtg:first-child{ border-top:none; }
.st-mtg .d{ color:#999; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.st-mtg .k{ color:var(--accent); font-weight:700; white-space:nowrap; }
.st-mtg .t{ color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-mtg .n{ color:#aaa; font-size:11.5px; white-space:nowrap; margin-left:auto; }
.st-mtg .arrow{ color:#ccc; }

/* 決まったこと */
.st-dec{ display:flex; gap:8px; border-top:1px solid #eee; padding:9px 0; font-size:13px; }
.st-dec:first-child{ border-top:none; }
.st-dec .d{ color:#999; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.st-dec .b{ color:#333; line-height:1.7; }

@media (min-width:760px){
  /* 広い画面では現場カードを2列に（現場が増えても一覧で見渡せるように） */
  #list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  #list .st-card{ margin-bottom:0; }
  #list .empty{ grid-column:1 / -1; }
}

/* 訳のとき、下に添える原文（訳が怪しいときに確かめられるように） */
.st-np .src{ font-size:12.5px; color:#9a9a92; line-height:1.7; margin-top:2px;
             padding-left:8px; border-left:2px solid #e8e8e2; }
.st-np .src .lg{ display:inline-block; font-size:10px; font-weight:800; color:#b3b3aa;
                 border:1px solid #e0e0d8; border-radius:4px; padding:0 4px; margin-right:6px;
                 vertical-align:1px; text-transform:uppercase; }

/* 現場のページは、見出しもその現場の会社の色にそろえます
   （UI.theme(company_color) が --accent を差し替えるので、ここは var を見るだけ） */
.st-page .card-title{ color:var(--accent); }
.st-page .st-head .st-name{ color:var(--accent); }