:root{
  --bg:#f6f6f6;
  --surface:#ffffff;
  --line:#dadce0;
  --muted:#5f6368;
  --text:#202124;
  --blue:#1a73e8;
  --chip:#f8f9fa;
  --col-w:80px;
  --col-min:60px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;}
.page{display:grid;grid-template-columns:220px 1fr;height:calc(100vh - 37px);overflow:hidden;min-width:0;}
.sidebar{background:#f1f3f4;border-right:1px solid var(--line);padding:18px 14px;overflow-y:auto;}
.main{display:flex;flex-direction:column;height:calc(100vh - 37px);overflow:hidden;min-width:0;flex:1;}
.topbar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:#f1f3f4;flex-wrap:wrap;flex-shrink:0;}
.chip,.navbtn,.submit-btn{border:1px solid var(--line);background:var(--chip);border-radius:10px;color:var(--text);text-decoration:none;padding:7px 12px;font-size:13px;display:inline-flex;align-items:center;gap:6px;}
.navbtn{width:36px;height:36px;border-radius:999px;justify-content:center;padding:0;font-size:18px;}
.submit-btn{cursor:pointer}
.calendar-mini-title{display:flex;align-items:center;justify-content:space-between;margin:8px 0 14px;}
.calendar-mini-title .title{font-size:18px;font-weight:700}
.mini-weekdays,.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.mini-weekdays div{text-align:center;font-size:12px;color:var(--muted);padding:4px 0;}
.mini-day{min-height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text);text-decoration:none;}
.mini-day:hover{background:#e8eaed}
.mini-day.out{color:#b0b4b9}
.mini-day.selected{background:#202124;color:#fff;font-weight:700}
.mini-day.has-events{font-weight:700}
.staff-summary{margin-top:16px;font-size:13px;color:var(--muted);}
.controls{padding:12px 18px 6px;background:#f8f9fa;border-bottom:1px solid var(--line);flex-shrink:0;}
.staff-panel{display:none;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;}
.staff-panel.open{display:block}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.staff-item{border:1px solid #eceff1;background:#fafafa;border-radius:12px;padding:10px;}
.staff-item label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;}
.staff-order{margin-top:8px;font-size:13px;color:var(--muted)}
.staff-order input{width:72px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;}
.staff-actions{margin-top:12px}
.schedule-shell{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;}
.schedule-table{border-collapse:collapse;min-width:0;background:#fff;}
.schedule-table thead th{position:sticky;top:0;z-index:20;background:#f8f9fa;border:1px solid var(--line);padding:10px 8px;font-size:13px;font-weight:700;text-align:center;white-space:nowrap;}
.schedule-table .time-header{width:40px;min-width:40px;max-width:40px;background:#f1f3f4;}
.schedule-table .staff-header{}
.row-hour td{height:10px;border-top:1px solid var(--line);}
.row-half td{height:10px;border-top:1px dashed #ccc;}
.row-5min td{height:10px;}
.timecell{background:#f8f9fa;text-align:right;padding:0 4px;font-size:11px;color:var(--muted);white-space:nowrap;vertical-align:top;border-right:1px solid var(--line);position:sticky;left:0;z-index:10;}
.timecell .half-label{color:#aaa;font-size:10px;}
.emptycell{border-right:1px solid #eee;min-width:0;}
.eventcell{padding:1px 2px;vertical-align:top;border-right:1px solid var(--line);min-width:0;}
.eventcell .event{height:100%;border-radius:5px;padding:3px 5px;font-size:11px;line-height:1.4;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.1);}
.event-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.event-color-0{background:#dbe8fd;color:#174ea6;border-left:3px solid #1a73e8;}
.event-color-1{background:#dfe8c7;color:#2d6a0a;border-left:3px solid #0f9d58;}
.event-color-2{background:#eadcf8;color:#6a1b9a;border-left:3px solid #9c27b0;}
.event-color-3{background:#fde8c8;color:#8b4000;border-left:3px solid #f57c00;}
.event-color-4{background:#fdd8d8;color:#8b0000;border-left:3px solid #c62828;}
.event-color-5{background:#d0f0f3;color:#004d55;border-left:3px solid #00838f;}
.event-color-6{background:#ede0d4;color:#3e2723;border-left:3px solid #6d4c41;}
.event-color-7{background:#dcedc8;color:#2e4a00;border-left:3px solid #558b2f;}
.event-color-8{background:#fce4ec;color:#880e4f;border-left:3px solid #ad1457;}
.event-color-9{background:#eceff1;color:#263238;border-left:3px solid #37474f;}
.event-gray{background:#f1f3f4;color:#5f6368;border-left:3px solid #9aa0a6;}
.event-beige{background:#f5e1c6;color:#a05a00;border-left:3px solid #f57c00;}
.sidebar-toggle{display:none;}

@media (max-width:900px){
  .page{grid-template-columns:1fr}
  .sidebar{border-right:none;border-bottom:1px solid var(--line);height:auto;}
  body{height:auto;overflow:auto;}
  .main{height:auto;overflow:visible;}
  .sidebar{flex-shrink:0;height:auto;position:relative;z-index:500;}
  .sidebar-toggle{display:block;width:100%;padding:10px 16px;background:#f0f0f0;border:none;font-size:14px;font-weight:700;cursor:pointer;text-align:left;border-bottom:1px solid #ddd;}
  .sidebar-collapsible{display:none;background:#f1f3f4;}
  .sidebar-collapsible.open{display:block;}
  .schedule-shell{overflow:auto;-webkit-overflow-scrolling:touch;height:75dvh;min-height:400px;width:100%;border:1px solid #ddd;}
  .schedule-table{table-layout:fixed;width:max-content;border-collapse:separate;border-spacing:0;}
  .schedule-table thead th{position:sticky;top:0;z-index:100;background:#fff;border-bottom:2px solid #eee;}
  .schedule-table .time-header,.timecell{position:sticky;left:0;z-index:110;background:#f1f3f4;width:40px;min-width:40px;}
  .schedule-table thead th.time-header{top:0;left:0;z-index:120;background:#e8eaed;}
  .schedule-table .staff-header,.eventcell,.emptycell{width:calc((100vw - 40px) / 2.5);min-width:100px;font-size:11px;border-left:1px solid #eee;border-bottom:1px solid #eee;}
  .eventcell .event{font-size:10px;padding:4px 2px;border-radius:4px;}
  .eventcell .event .event-line{font-size:10px;}
  .modal-content{width:95vw;margin:20px auto;padding:14px;}
}

@media (max-width:700px){
  .page,.main{display:block!important;height:auto!important;overflow:visible!important;}
  .sidebar{flex-shrink:0;height:auto;position:relative;z-index:500;}
  .sidebar-toggle{display:block!important;width:100%;padding:10px 16px;background:#f0f0f0;border:none;font-size:14px;font-weight:700;cursor:pointer;text-align:left;}
  .sidebar-collapsible{display:none;background:#f1f3f4;}
  .sidebar-collapsible.open{display:block;}
  .schedule-shell{overflow:auto!important;-webkit-overflow-scrolling:touch!important;width:100%!important;height:calc(100dvh - 150px)!important;min-height:300px!important;border:1px solid #ccc;}
  .schedule-table{table-layout:fixed!important;width:max-content!important;border-collapse:separate!important;border-spacing:0;}
  .schedule-table thead th{position:sticky!important;top:0!important;z-index:100!important;background:#ffffff!important;border-bottom:2px solid #ddd!important;}
  .schedule-table .time-header{width:28px!important;min-width:28px!important;max-width:28px!important;background:#f1f3f4!important;position:sticky!important;left:0!important;z-index:20!important;}
  .timecell{width:28px!important;min-width:28px!important;max-width:28px!important;font-size:8px!important;padding:0 2px!important;position:sticky!important;left:0!important;z-index:5!important;background:#f1f3f4!important;}
  .schedule-table .staff-header{width:calc((100vw - 28px) / 3)!important;min-width:60px!important;max-width:calc((100vw - 28px) / 3)!important;font-size:9px!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;}
  .eventcell{width:calc((100vw - 28px) / 3)!important;min-width:60px!important;max-width:calc((100vw - 28px) / 3)!important;overflow:hidden!important;font-size:8px!important;}
  .emptycell{width:calc((100vw - 28px) / 3)!important;min-width:60px!important;max-width:calc((100vw - 28px) / 3)!important;overflow:hidden!important;}
  .eventcell .event{font-size:8px!important;padding:1px 2px!important;}
  .eventcell .event .event-line{font-size:8px!important;}
  .modal-content{width:95vw!important;margin:20px auto!important;padding:14px!important;}
}

.clickable-cell:hover{background:#e8f4fd!important;cursor:pointer;}

/* ===== PC版: 暦は常に展開、追加ボタン非表示 ===== */
@media (min-width: 901px) {
  .sidebar-toggle { display: none !important; }
  #sidebar-collapsible { display: block !important; }
  button[onclick="showAddToHome()"] { display: none !important; }
}

@media (min-width: 901px) {
  .add-to-home-btn { display: none !important; }
}

/* =========================================================
   カレンダー（position:absolute 方式、重なり予約の横並び対応）
   ========================================================= */
.cal-wrap { width:100%; background:#fff; position:relative; }
.cal-header { position:sticky; top:0; z-index:20; background:#f8f9fa; border-bottom:2px solid var(--line); }
.cal-time-header { background:#f1f3f4; padding:10px 4px; border-right:1px solid var(--line); }
.cal-staff-header { padding:10px 6px; font-size:13px; font-weight:700; text-align:center; white-space:nowrap; border-left:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; }
.cal-cap { display:flex; flex-wrap:wrap; gap:2px; justify-content:center; margin-top:4px; white-space:normal; cursor:pointer; }
.cal-cap .cap-seat { font-size:9px; font-weight:600; background:#eef6ff; color:#1c5d99; border:1px solid #cfe3f7; border-radius:3px; padding:0 3px; line-height:1.5; }
.cal-cap .cap-more { font-size:8px; color:#777; align-self:center; }
.cal-cap .cap-eq { font-size:9px; font-weight:600; background:#f0f7ee; color:#3b6b2e; border:1px solid #d6e8cf; border-radius:3px; padding:0 3px; line-height:1.5; }
/* 対応内容モーダル */
.capm-sec { margin-bottom:14px; }
.capm-sec:last-child { margin-bottom:0; }
.capm-h { font-size:.85em; font-weight:700; color:#555; margin-bottom:6px; border-bottom:1px solid #eee; padding-bottom:3px; }
.capm-item { font-size:.95em; color:#222; padding:3px 0 3px 8px; }
.capm-tags { display:flex; flex-wrap:wrap; gap:5px; }
.capm-tag { font-size:.82em; background:#eef3f8; border:1px solid #d6e2ec; border-radius:12px; padding:2px 9px; color:#33576f; }
.cal-body { position:relative; background:#fff; }
.cal-time-col {
  background:#f8f9fa;
  border-right:1px solid var(--line);
  position:sticky; left:0; z-index:10;
}
.cal-time-label { position:absolute; right:4px; font-size:11px; color:#666; white-space:nowrap; pointer-events:none; transform:translateY(-6px); }
/* 通常表示(100%)でも時刻を読みやすく：毎正時は太字＋青で強調、30分は控えめのまま少し濃く。 */
.cal-time-label.tl-hour { font-size:12.5px; font-weight:700; color:#1565c0; }
.cal-time-label.tl-half { color:#9aa0a6; font-size:10px; }
/* 全体表示（ズームアウト）時：時刻列をズームに反比例して拡大し、縮小されても時刻を読めるようにする。
   --cal-zoom / --time-col-w は _applyZoom() が <html> に付与する。 */
.cal-fit .cal-time-label { font-size: calc(12px / var(--cal-zoom, 1)); font-weight:700; color:#1976d2; transform: translateY(calc(-6px / var(--cal-zoom, 1))); }
.cal-fit .cal-time-label.tl-half { display:none; } /* 30分ラベルは省き、毎正時だけ大きく表示 */
/* 縮小/全体表示(cal-fit=ズーム<100%)のときは、親の固定高さ(calc(100vh-37px))と overflow:hidden を解除する。
   これをしないと documentElement の zoom で .main 自体が画面の40%等に縮み、その中に見える 0:00〜3:00 しか
   映らず下が真っ白になる。auto/visible にすると、その日の全予定(0:00〜24:00)が下へ伸び、ページごとスクロールで
   全体を見渡せる。100%(cal-fit解除)時は通常の内部スクロール枠(flex:1 / calc(100dvh-150px))に戻る。 */
.cal-fit .page, .cal-fit .main { height:auto !important; overflow:visible !important; }
.cal-fit .schedule-shell { height:auto !important; max-height:none !important; overflow:visible !important; }
.cal-staff-col {
  border-right:1px solid var(--line);
  cursor:pointer;
  background-image:
    linear-gradient(to bottom, #eee 1px, transparent 1px),
    linear-gradient(to bottom, #ccc 1px, transparent 1px),
    linear-gradient(to bottom, #999 1px, transparent 1px);
  background-size: 100% 10px, 100% 60px, 100% 120px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat-y;
}
.cal-event {
  position:absolute;
  padding:3px 5px;
  font-size:11px;
  line-height:1.35;
  overflow:hidden;
  border-radius:5px;
  box-shadow:0 1px 2px rgba(0,0,0,0.12);
  cursor:pointer;
  box-sizing:border-box;
  z-index:5;
}
.cal-event .event-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* モバイル（タブレット）調整 */
@media (max-width: 1024px) {
  .cal-staff-header { padding:8px 4px; font-size:11px; }
  .cal-event { font-size:10px; padding:2px 3px; }
  .cal-event .event-line { font-size:10px; }
}
/* モバイル（スマホ） */
@media (max-width: 600px) {
  .cal-staff-header { padding:6px 2px; font-size:9px; }
  .cal-event { font-size:8px; padding:1px 2px; }
  .cal-event .event-line { font-size:8px; }
  .cal-time-header, .cal-time-col { width:28px !important; }
  .cal-time-label { font-size:8px; right:2px; }
  /* 28px の細い時刻列に正時ラベル(既定12.5px/太字)を収める。
     これを入れないと "12:00"→"2:00"・"13:00"→"3:00" と画面左で頭が切れる。 */
  .cal-time-label.tl-hour { font-size:10px; }
  .cal-time-label.tl-half { font-size:8px; }
  /* 全体表示中は固定28pxを解除し、拡大した時刻列がグリッド枠どおりに収まるようにする */
  .cal-fit .cal-time-header, .cal-fit .cal-time-col { width:auto !important; }
  .cal-fit .cal-time-label { font-size: calc(12px / var(--cal-zoom, 1)); right:4px; }
  /* 狭い列では各バッジを縦に積み、1つずつ独立した囲みにして読みやすく */
  .cal-cap { flex-direction:column; align-items:stretch; gap:2px; margin-top:3px; }
  .cal-cap .cap-seat, .cal-cap .cap-eq { display:block; font-size:8px; padding:1px 3px; border-radius:3px; text-align:center; line-height:1.4; }
  .cal-cap .cap-more { display:block; font-size:8px; text-align:center; }
}


/* 【辞退された】黄黒踏切ストライプ枠 */
.event-declined {
    background: #fff !important;
    color: #333 !important;
    border: 3px solid transparent !important;
    border-image: repeating-linear-gradient(45deg, #000, #000 6px, #ffd700 6px, #ffd700 12px) 3 !important;
}