/* =======年次交番表ローテーション======== */ * { box-sizing: border-box; } body { font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; padding: 5px 20px 20px 20px; margin: 0; background: #c9caca; color: #222; } /* ------------見出し------------------ */ h1 { font-size: 24px; color: #1565c0; margin: 5px 0 15px; } h2 { font-size: 18px; margin: 15px 0 8px; } /* ------------コントロール-------------- */ #controls { background: #e5f5db; border: 1px solid #cfd8dc; border-radius: 6px; padding: 12px; margin-bottom: 10px; } .control-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } label { font-size: 16px; } input[type="date"] { font-size: 15px; padding: 5px 8px; } textarea { width: 100%; max-width: 260px; margin-top: 2px; font-size: 15px; line-height: 2.56; background: #e8f0f3; padding: 8px; border: 1px solid #a978f8; border-radius: 4px; resize: vertical; } button { border: 1px solid #90a4ae; background: #ffffff; border-radius: 4px; padding: 7px 13px; font-size: 14px; cursor: pointer; } button:hover { background: #eef6fb; } button:active { transform: translateY(1px); } #generateBtn { background: #1976d2; color: white; border-color: #1976d2; } #generateBtn:hover { background: #1565c0; } #addPersonBtn { margin-top: 6px; background: #225704; color: white; border-color: #022503; } /* -----------------情報------------------- */ .info-box { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; padding: 8px; background: #f5f9fc; border: 1px solid #d7e1e7; border-radius: 4px; } .info-box strong { color: #1565c0; } /* ---------------人員一覧-------------------- */ #personList { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .person-button { background: #ffffff; border: 1px solid #90a4ae; padding: 5px 9px; border-radius: 4px; cursor: pointer; } .person-button.active { background: #1976d2; color: #ffffff; border-color: #1976d2; } /* ---------------ツールバー----------------- */ .toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } /* -----------------カレンダー--------------- */ .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: -2px; } .day { min-height: 125px; border: 1px solid #ccc; background: #ffffff; font-size: 18px; padding: 5px; overflow: hidden; } .day-header { min-height: auto; font-weight: bold; text-align: center; padding: 5px; background: #eef3f6; border: 1px solid #cbd5da; } .national-holiday { background: #ffcccc; } .day-header.sunday { color: #d32f2f; } .day-header.saturday { color: #1565c0; } .day.empty { background: #f0f0f0; } .rotation-date-head.sunday, .rotation-date-head.holiday-header { color: #d32f2f; } .rotation-date-head.saturday { color: #1565c0; } /* --------------日付タイプ--------------------- */ .day.weekday { background: #ffffff; } .day.saturday { background: #ddeeff; } .day.holiday { background: #ffdddd; } /* ----------------個人状態----------------- */ .day.yobi { background: #d8f5d1; } .day.off { background: #ffe8aa; } .day.work { background: #ffffff; } /* ------------カレンダー内部---------------- */ .date-number { font-weight: bold; font-size: 13px; margin-bottom: 3px; } .holiday-name { color: #c62828; font-size: 11px; margin-bottom: 2px; } .shift { font-weight: bold; margin-top: 4px; } .koban { font-size: 16px; font-weight: bold; color: #0d47a1; margin-top: 3px; } .job { margin-top: 3px; line-height: 1.35; } .status { display: inline-block; margin-top: 4px; padding: 2px 5px; border-radius: 3px; font-weight: bold; } .status.off { background: #ffd54f; } .status.reserve { background: #a5d6a7; } .status.work { background: #bbdefb; } /* -------------日別一覧-------------------- */ #dailyAllList { margin-top: 20px; } .daily-card { background: #ffffff; border: 1px solid #cfd8dc; border-radius: 5px; margin-bottom: 12px; padding: 10px; } .daily-title { font-weight: bold; font-size: 16px; margin-bottom: 8px; } .daily-table { width: 100%; border-collapse: collapse; font-size: 12px; } .daily-table th, .daily-table td { border: 1px solid #d0d7dc; padding: 4px 6px; text-align: left; } .daily-table th { background: #eef3f6; } /* --------------検証結果--------------------- */ .audit-result { margin-top: 20px; background: #ffffff; border: 1px solid #cfd8dc; border-radius: 5px; padding: 10px; } .audit-ok { color: #2e7d32; font-weight: bold; } .audit-ng { color: #c62828; font-weight: bold; } .audit-warning { color: #ef6c00; font-weight: bold; } .audit-line { margin: 4px 0; } /* ===========年次交番表月間マトリクス=========== */ #mainCalendar { width: 100%; overflow-x: auto; margin-top: 8px; } .rotation-table { border-collapse: collapse; table-layout: fixed; min-width: max-content; font-size: 11px; } .rotation-table th, .rotation-table td { border: 1px solid #999; box-sizing: border-box; } .person-name-head { position: sticky; left: 0; z-index: 3; width: 70px; min-width: 70px; padding: 5px; background: #eef3f6; } .rotation-date-head { width: 50px; min-width: 50px; padding: 4px; text-align: center; background: #eef3f6; } .rotation-date-head.sunday { color: #d32f2f; } .rotation-date-head.saturday { color: #1565c0; } .rotation-dow { font-size: 10px; margin-top: 2px; } .person-name { position: sticky; left: 0; z-index: 2; width: 70px; min-width: 70px; padding: 5px; text-align: left; background: #ffffff; font-weight: bold; } .rotation-cell { width: 50px; min-width: 50px; height: 58px; padding: 3px; text-align: center; vertical-align: middle; background: #ffffff; } .rotation-type { font-size: 10px; } .rotation-koban { font-size: 13px; font-weight: bold; color: #0d47a1; margin-top: 2px; } .rotation-shift { font-weight: bold; margin-top: 2px; } .rotation-status { margin-top: 2px; font-weight: bold; } .rotation-off { background: #ffe8aa; font-weight: bold; } .rotation-reserve { background: #d8f5d1; } .rotation-summary-row th, .rotation-summary-row td { height: 30px; padding: 4px; text-align: center; font-weight: bold; } .summary-label { position: sticky; left: 0; z-index: 2; background: #eef3f6; text-align: left; } .rotation-summary-cell { background: #f7f7f7; } .info-message { margin-left: 12px; color: #d32f2f; font-weight: bold; } #nameInput.setup-area { display: flex; align-items: flex-start; gap: 24px; } .person-input-area { display: flex; align-items: flex-start; gap: 10px; } .person-input-area textarea { width: 320px; resize: vertical; } .person-input-area button { height: 40px; padding: 6px 18px; } .rotation-setting-area { min-width: 270px; padding: 14px; border: 1px solid #ccc; border-radius: 8px; background: #fff; } .setting-title { margin-bottom: 12px; font-weight: bold; font-size: 16px; } .setting-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } .setting-row label { margin-right: 15px; } .setting-row input { width: 70px; padding: 4px 6px; text-align: right; } .required-staff-setting { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ddd; font-weight: bold; } /* =============印刷============= */ @media print { /*------B4 横：一覧表------------*/ @page mainPage { size: B4 landscape; margin: 7mm; } /*------A4 横：個人カレンダー-----*/ @page personPage { size: A4 landscape; margin: 8mm; } /*--------一覧印刷----------*/ body.print-main { page: mainPage; } body.print-main > * { visibility: hidden !important; } body.print-main #mainCalendarTitle, body.print-main #mainCalendarTitle *, body.print-main #mainCalendar, body.print-main #mainCalendar * { visibility: visible !important; } body.print-main #mainCalendarTitle { position: absolute; left: 0; top: 0; width: 100%; margin: 0 0 5mm 0; } body.print-main #mainCalendar { position: absolute; left: 0; top: 12mm; width: 100%; height: auto; max-height: none; overflow: visible !important; } body.print-main #mainCalendar table { width: 100%; table-layout: fixed; border-collapse: collapse; } body.print-main #mainCalendar th, body.print-main #mainCalendar td { padding: 1.5mm 1mm; font-size: 7pt; line-height: 1.15; } /*-----------個人カレンダー----------*/ body.print-person { page: personPage; } body.print-person > * { visibility: hidden !important; } body.print-person #personCalendarTitle, body.print-person #personCalendarTitle *, body.print-person #personCalendar, body.print-person #personCalendar * { visibility: visible !important; } body.print-person #personCalendarTitle { position: absolute; left: 0; top: 0; width: 100%; margin: 0 0 5mm 0; } body.print-person #personCalendar { position: absolute; left: 0; top: 15mm; width: 100%; height: auto; max-height: none; overflow: visible !important; } body.print-person #personCalendar { display: grid; } body.print-person #personCalendar .day { font-size: 10pt; } /*印刷時の不要表示*/ body.print-main .toolbar, body.print-main #nameInput, body.print-main .info-box, body.print-person .toolbar, body.print-person #nameInput, body.print-person .info-box { display: none !important; } } .general-info-area { width: 600px; padding: 12px 14px; border: 1px solid #ccc; border-radius: 8px; background: #e1ebb8; } .general-info-title { margin-bottom: 8px; font-weight: bold; } .general-info-area ul { margin: 0; padding-left: 20px; } .general-info-area li { margin-bottom: 4px; } p{color: #1565c0;font-weight: bold;} /* ------------レスポンシブ------------- */ @media (max-width: 900px) { .calendar-grid { gap: 2px; } .day { min-height: 110px; padding: 3px; font-size: 11px; } .koban { font-size: 12px; } } @media (max-width: 650px) { body { padding-left: 6px; padding-right: 6px; } .calendar-grid { grid-template-columns: repeat(7, minmax(80px, 1fr)); overflow-x: auto; } .day, .day-header { min-width: 80px; } .control-row { align-items: flex-start; flex-direction: column; } }