/* カレンダー全体のスタイル（さらにコンパクト） */
#calendar-container {
  width: 220px;
  height: auto;
  background: #fff;
  position: fixed;
  top: 39px;
  right: 5px;
  z-index: 9999;
  padding: 3px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
  border: 1px solid #ccc;
  font-size: 11px;
  overflow: hidden;  /* ← スクロールを防止 */
}

/* カレンダー自体にもoverflowを指定（保険） */
.fc {
  overflow: hidden !important;
}


/* 月タイトル */
.fc .fc-toolbar-title {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

/* 前月・次月ボタン */
.fc .fc-button {
  font-size: 11px;
  padding: 1px 3px;
  height: 22px;
}

/* 曜日ヘッダー */
.fc .fc-col-header-cell-cushion {
  font-size: 11px;
  padding: 0px;
  line-height: 1;
}

/* 各日付セルの数字 */
.fc .fc-daygrid-day-number {
  font-size: 13px !important;
  padding: 0 1px !important;
  color: #000 !important;
  font-weight: 600;
  line-height: 1;
}

/* 各日付セル全体の高さとパディング */
.fc .fc-daygrid-day-frame {
  padding: 1px !important;
  height: 18px !important;
}
.fc-daygrid-day {
  min-height: 18px !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* 土日祝の背景 */
.fc .sun {
  background-color: #ffeaea !important;
}
.fc .sat {
  background-color: #eaf3ff !important;
}
.fc .holiday {
  background-color: #fff4e6 !important;
}


/* ===== スマホ用カレンダー開閉ボタン（2026-08-26 追加）=====
   PC（801px以上）では非表示。スマホでのみ表示し、カレンダーを開閉する。 */
.cal-toggle {
  display: none;
  position: fixed;
  top: 46px;
  right: 4px;
  z-index: 10000;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-size: 12px;
  line-height: 1;
  color: #333;
  background: #fff;
  border: 1px solid #C8A24A;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}
.cal-toggle:active { background: #fff8e8; }


/* ===== スマホ表示（800px以下）=====
   カレンダーは既定で折りたたみ、右上のボタンで開閉する。
   常時表示だと本文（ヘッダー画像・見出し）を覆い、幅も画面を圧迫していた
   ため（2026-08-26）。合わせて一段コンパクトにする。

   注意：display:none で隠すと FullCalendar が幅0で初期化され、日付セルが
   描画されない（開いても中身が空になる）。そのため display は保持したまま
   visibility+画面外退避で隠し、レイアウトを正しく計算させる。 */
@media screen and (max-width: 800px) {
  /* 開閉ボタンを表示 */
  .cal-toggle { display: inline-flex; }

  /* カレンダー本体：既定は画面右外へ退避して隠す（レイアウトは保持） */
  #calendar-container {
    width: 172px;      /* PCの220pxよりさらに小さく */
    top: 80px;         /* 開閉ボタン（top:46px）の下に出す */
    right: 4px;
    font-size: 10px;
    padding: 2px;
    transform: translateX(130%);   /* 画面右外へ退避 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;          /* 隠れている間はタップを拾わない */
    transition: transform .2s ease, opacity .2s ease;
  }
  #calendar-container.cal-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* 中の各パーツも一段小さくする */
  .fc .fc-toolbar-title { font-size: 11px; }
  .fc .fc-button { font-size: 10px; padding: 0 2px; height: 18px; }
  .fc .fc-col-header-cell-cushion { font-size: 10px; }
  .fc .fc-daygrid-day-number { font-size: 11px !important; }
  .fc .fc-daygrid-day-frame { height: 15px !important; }
  .fc-daygrid-day { min-height: 15px !important; }
}

/* ===== カレンダーの最小化（2026-09-02 追加）=====
   PCでは常時表示だったため、ヘッダー画像とナビの右端を覆っていた。
   右上の釦で畳むと、同じ位置に小さな見出しバーだけが残る。
   スマホには既存の .cal-toggle があるので、そちらでは出さない。 */
.cal-min {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 2;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 12px;
  line-height: 16px;
  color: #333;
  background: #fff;
  border: 1px solid #C8A24A;
  border-radius: 3px;
  cursor: pointer;
}
.cal-min:hover { background: #fff8e8; }

.cal-min-label { display: none; }

/* 最小化の釦のぶん、ツールバー右端（次月ボタン）を内側へ寄せて重なりを避ける */
#calendar-container > .fc-header-toolbar { padding-right: 20px; }

/* 畳んだ状態は「月の見出し行だけを残して高さを切り詰める」。
   中身を display:none で隠すと、FullCalendar が幅0のまま列幅(<col>)を
   確定してしまい、開き直しても日付セルが0幅のまま出てこなかった
   （2026-09-02 実測。window に resize を投げても戻らない）。
   高さで切り取るだけなら本体は常に正しい幅で描かれたままなので、
   開閉に再レイアウトが要らず、月の移動も畳んだまま使える。 */
#calendar-container.cal-collapsed {
  height: 30px;
}

@media screen and (max-width: 800px) {
  /* スマホは .cal-toggle が開閉を担うので、最小化の釦は出さない */
  .cal-min { display: none; }
  /* スマホは .cal-toggle が開閉を担うので、畳んだ指定は打ち消す */
  #calendar-container.cal-collapsed { height: auto; }
}
