@charset "UTF-8";
#calendar-wrapper {
  width: 90%;
  max-width: 1000px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px; /* 各月カレンダーの間隔 */
}

/* PC: 横並び（1〜2個でも中央揃え） */
@media (min-width: 1024px){
  #calendar-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 270px)); /* 空列を作らず中央寄せが効く */
    justify-content: center;
    justify-items: center;
    align-items: start;
    gap: 30px;
  }
  #calendar-wrapper [id^="calendar"]{
    width: 270px;
    max-width: 270px;
  }
}

/* 各カレンダー共通 */
#calendar-wrapper [id^="calendar"] {
  max-width: 270px;
  width: 100%;
  font-size: 0.9rem;
  background-color: transparent;
  color: #fff;
}

/* 休日表示 */
.fc-h-event .fc-event-main-frame {
  justify-content: center;
}

.fc-h-event .fc-event-title-container {
  flex-grow: initial;
  flex-shrink: initial;
}

.fc-event.fc-event-red {
  background-color: transparent !important;
  border-color: transparent !important;
}

.fc-event.fc-event-red .fc-event-title {
  color: red !important;
}

/* カレンダー月タイトル */
#calendar-wrapper .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
  flex-wrap: wrap !important;
}

#calendar-wrapper .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
  width: 100%;
}

#calendar-wrapper h2.fc-toolbar-title {
  width: 100%;
  text-align: center;
}

/* スクロールグリッド背景を透明化 */
#calendar-wrapper .fc-scrollgrid,
#calendar-wrapper .fc-scrollgrid table {
  background-color: transparent !important;
  border:none;
}

/* 曜日行背景（透過） */
#calendar-wrapper .fc-col-header,
#calendar-wrapper .fc-col-header-cell {
  background-color: transparent !important;
  color: #fff;
  border:none;
  font-weight: bold;
  text-align: center;
}

/* 日付セル背景 */
#calendar-wrapper .fc-daygrid-day {
  background-color: transparent !important;
  border-color: #333;
}

/* 今日のハイライト */
#calendar-wrapper .fc-day-today {
  background-color: rgba(255,255,255,0.1) !important;
}

/* 日付数字 */
#calendar-wrapper .fc-daygrid-day-number {
  font-size: 0.9em;
  color: inherit;
}

/* 当月以外の日付はグレー */
#calendar-wrapper td.fc-day-other .fc-daygrid-day-number-moved {
  color: #888 !important;
}

/* ㊡マーク */
#calendar-wrapper .fc-holiday-marker {
  color: red;
  text-align: center;
  font-weight: bold;
  font-size: calc(1rem + 0.3vw);
  line-height: 1.2;
}

/* 日付と㊡の配置 */
#calendar-wrapper .fc-daygrid-day-events {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 2px;
  padding: 0;
  box-sizing: border-box;
}

#calendar-wrapper .fc-daygrid-day-number-moved,
#calendar-wrapper .fc-holiday-marker {
  margin: 0;
}

.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
  margin-bottom: 0 !important;
}

/*border削除*/
.fc-scrollgrid,
.fc-scrollgrid * {
  border: none !important;
}

/* スティッキーヘッダーの背景透過 */
.fc .fc-scrollgrid-section-sticky > * {
  background: transparent !important;
}