/* ========== 基本 ========== */ * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif; background: #f4f6f9; color: #222; font-size: 14px; } a { color: #1a63b0; } /* ========== ヘッダー / フッター ========== */ .site-header { background: #1f4e79; color: #fff; padding: 14px 20px 10px; } .header-inner h1 { margin: 0; font-size: 22px; } .tagline { margin: 4px 0 6px; font-size: 12.5px; color: #cfe0f0; } .site-nav a { color: #cfe0f0; margin-right: 14px; font-size: 12.5px; } .site-footer { margin-top: 30px; padding: 16px 20px 26px; background: #1f4e79; color: #cfe0f0; font-size: 12px; text-align: center; } .site-footer a { color: #fff; } /* ========== 広告枠 ========== AdSense導入までは非表示。有効化 = にする(README参照) */ .ad-slot { display: none; } body.ads-on .ad-slot { /* display:blockにするのは、AdSenseレスポンシブ広告()がflex内で幅0になるのを避けるため */ display: block; max-width: 1100px; margin: 10px auto; min-height: 90px; background: #eceff3; border: 1px dashed #b8c2cc; text-align: center; } body.ads-on .ad-label { display: none; } /* 広告ON時はプレースホルダ文言を消す */ .ad-label { color: #98a4b0; font-size: 12px; line-height: 90px; } /* ========== レイアウト ========== */ /* アプリ本体はワイドモニタで月全体が見えるよう広めに(31日分の表が約1450px) */ .container { max-width: 1780px; margin: 0 auto; padding: 0 16px; } /* ========== ツールバー ========== */ .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1px solid #d5dbe2; border-radius: 8px; padding: 10px 12px; margin-top: 10px; } .toolbar-sep { width: 1px; height: 24px; background: #d5dbe2; margin: 0 4px; } .month-picker { font-weight: 600; } .month-picker input { margin-left: 6px; padding: 4px 6px; border: 1px solid #b8c2cc; border-radius: 5px; } .btn { display: inline-block; padding: 6px 14px; border: 1px solid #b8c2cc; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13.5px; color: #222; } .btn:hover { background: #f0f4f8; } .btn-primary { background: #1a63b0; border-color: #1a63b0; color: #fff; font-weight: 600; } .btn-primary:hover { background: #144e8c; } .btn-danger { border-color: #c0392b; color: #c0392b; } .btn-danger:hover { background: #fdf0ee; } .file-btn { position: relative; } /* ========== タブ ========== */ .tabs { display: flex; gap: 4px; margin-top: 14px; } .tab { padding: 8px 18px; border: 1px solid #d5dbe2; border-bottom: none; border-radius: 8px 8px 0 0; background: #e4e9ef; cursor: pointer; font-size: 14px; } .tab.active { background: #fff; font-weight: 700; color: #1a63b0; } .tab-panel { display: none; background: #fff; border: 1px solid #d5dbe2; border-radius: 0 8px 8px 8px; padding: 14px; } .tab-panel.active { display: block; } .tab-panel h2 { font-size: 16px; margin: 6px 0 8px; } .hint { color: #667; font-size: 12.5px; } /* ========== 欠員警告 ========== */ .shortage-panel { background: #fdecea; border: 1px solid #e74c3c; border-radius: 6px; color: #a93226; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; } .shortage-panel ul { margin: 4px 0 0 18px; padding: 0; } .shortage-panel.ok { background: #eafaf1; border-color: #27ae60; color: #1e8449; } /* ========== 凡例 ========== */ .legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; font-size: 12.5px; } .legend-item { display: inline-flex; align-items: center; gap: 4px; } .legend-chip { display: inline-block; width: 22px; height: 16px; border: 1px solid #99a; border-radius: 3px; text-align: center; font-size: 11px; line-height: 16px; } /* ========== シフト表グリッド(Excel風) ========== */ .grid-wrap { overflow: auto; max-height: 66vh; border: 2px solid #8fa3b8; background: #fff; } .grid-table { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; } .grid-table th, .grid-table td { border-right: 1px solid #c3cdd8; border-bottom: 1px solid #c3cdd8; padding: 3px 4px; text-align: center; white-space: nowrap; min-width: 34px; background: #fff; } .grid-table thead th { position: sticky; top: 0; z-index: 3; background: #dce6f1; font-weight: 600; } .grid-table thead tr:nth-child(2) th { top: 25px; font-weight: 400; font-size: 11.5px; } .grid-table .name-col { position: sticky; left: 0; z-index: 2; background: #eef2f7; min-width: 90px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; text-align: left; padding-left: 8px; font-weight: 600; } .grid-table thead .name-col { z-index: 4; background: #dce6f1; } .grid-table .sat { color: #1a63b0; } .grid-table .sun { color: #c0392b; } .grid-table td.closed { background: #e8e8e8 !important; color: #999; } .grid-table td.cell { cursor: pointer; } .grid-table td.cell:hover { outline: 2px solid #1a63b0; outline-offset: -2px; } .grid-table td.wish { background: #f5d7d7 !important; color: #a93226; } .grid-table td.off-day { color: #aab; } .grid-table td.locked { box-shadow: inset 0 0 0 2px #e67e22; } .grid-table .sum-col { background: #f4f8ee; font-weight: 600; } .grid-table tfoot td { background: #f7f3e8; font-size: 12px; } .grid-table tfoot .name-col { background: #efe9d8; } .grid-table tfoot td.short { background: #fdecea; color: #c0392b; font-weight: 700; } .grid-table tfoot td.surplus { background: #fdf3e3; color: #b9770e; font-weight: 700; } /* ========== セル編集ポップアップ ========== */ .cell-popup[hidden] { display: none; } /* display:flex が hidden 属性(UAスタイル)に勝つのを防ぐ */ .cell-popup { position: absolute; z-index: 50; background: #fff; border: 1px solid #8fa3b8; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.2); padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 130px; } .cell-popup .pop-title { font-size: 11.5px; color: #667; padding: 0 2px 2px; } .cell-popup button { border: 1px solid #c3cdd8; border-radius: 5px; background: #fff; padding: 5px 8px; cursor: pointer; text-align: left; font-size: 13px; } .cell-popup button:hover { background: #eef4fb; } /* ========== 設定テーブル ========== */ .table-scroll { overflow-x: auto; } .settings-table { border-collapse: collapse; width: 100%; margin-bottom: 10px; } .settings-table th, .settings-table td { border: 1px solid #d5dbe2; padding: 6px 8px; font-size: 13px; text-align: center; } .settings-table th { background: #eef2f7; } .settings-table input[type="text"], .settings-table input[type="number"], .settings-table input[type="time"] { border: 1px solid #b8c2cc; border-radius: 4px; padding: 3px 5px; font-size: 13px; } .settings-table input[type="number"] { width: 56px; } .settings-table .num-narrow { width: 44px; } .settings-table .sym-input { width: 40px; text-align: center; } .settings-table label.chk { margin-right: 8px; white-space: nowrap; } .req-inputs input { width: 40px; margin: 0 1px; } .weekday-checks label { margin-right: 10px; } .general-block { margin: 8px 0 14px; } .general-block > label { font-weight: 600; margin-right: 8px; } .del-btn { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 15px; } /* スタッフ詳細設定(展開行) */ .expand-btn { border: 1px solid #b8c2cc; border-radius: 4px; background: #fff; width: 24px; height: 24px; cursor: pointer; font-size: 14px; line-height: 1; color: #1a63b0; } .expand-btn:hover { background: #eef4fb; } .expand-row td { background: #f6f9fc; text-align: left; padding: 10px 14px; } .expand-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; align-items: center; } .expand-grid > label { font-weight: 600; white-space: nowrap; } .expand-grid .hint { display: inline; margin-left: 6px; } .staff-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ========== ドキュメントページ ========== */ .doc-page { background: #fff; border: 1px solid #d5dbe2; border-radius: 8px; padding: 18px 24px; margin: 14px auto 0; line-height: 1.8; max-width: 1060px; /* 文章ページは読みやすい幅を維持 */ } .doc-page h2 { border-left: 4px solid #1a63b0; padding-left: 8px; font-size: 17px; margin-top: 24px; } .doc-page dt { font-weight: 700; margin-top: 10px; } .doc-page dd { margin-left: 1em; } /* ========== 印刷 ========== */ @media print { * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .site-header, .site-footer, .toolbar, .tabs, .ad-slot, .hint, .legend, .shortage-panel, .cell-popup { display: none !important; } .tab-panel { border: none; padding: 0; } .tab-panel:not(#tab-grid) { display: none !important; } #tab-grid { display: block !important; } .grid-wrap { max-height: none; overflow: visible; border-width: 1px; } body { background: #fff; } @page { size: A4 landscape; margin: 8mm; } } /* ========== スマホ ========== */ @media (max-width: 640px) { .toolbar { font-size: 12px; } .btn { padding: 5px 9px; font-size: 12px; } .tabs { overflow-x: auto; } .tab { padding: 7px 10px; font-size: 12.5px; white-space: nowrap; flex-shrink: 0; } }