@charset "UTF-8";

:root {
  /* ブランドカラー */
  --primary-color: #5fbcdd;

  /* ベースカラー */
  --white: #fff;
  --black: #333;

  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-400: #bdbdbd;

  --border-color: #d5d7db;

  /* 曜日カラー */
  --saturday-color: #0059b3;
  --saturday-bg: #e6f2ff;
  --holiday-red: #cc0000;
  --holiday-red-bg: #ffebeb;
  --today-bg: #fff2a8;

  /* セマンティックカラー（エイリアス） */
  --sunday-color: var(--holiday-red);
  --sunday-bg: var(--holiday-red-bg);
  --other-month-bg: var(--gray-200);
  --hover-bg: var(--gray-100);
  --disabled-bg: var(--gray-100);
  --disabled-color: var(--gray-400);

  /* ローディング */
  --loading-border: var(--black);
}

/*--------------------------------------------------
  calendar table
--------------------------------------------------*/
.calendar-container {
  margin-top: 40px;
}

.c-calendar-table {
  border-collapse: collapse;
  border-left: solid 1px var(--border-color);
  border-top: solid 1px var(--border-color);
  width: 100%;
  table-layout: fixed;
}

.c-calendar-table th,
.c-calendar-table td {
  font-size: 14px;
  text-align: center;
  width: calc(100% / 7);
  border-right: solid 1px var(--border-color);
  border-bottom: solid 1px var(--border-color);
  vertical-align: top;
}

.c-calendar-table th {
  border-bottom: none;
  padding: 8px 0;
}

.c-calendar-table td .label {
  display: block;
  border-radius: 5px;
  padding: 6px 8px;
  margin: 2px;
  font-size: 11px;
  text-align: left;
  line-height: 1.25;
}

.c-calendar-table td .name {
  mix-blend-mode: color-burn;
}

.c-calendar-table .date {
  padding: 8px 0;
}

.c-calendar-table .schedule {
  vertical-align: top;
  height: 150px;
}

.c-calendar-table .schedule.other-month {
  background-color: var(--other-month-bg);
}

.c-calendar-table .saturday {
  color: var(--saturday-color);
  background-color: var(--saturday-bg);
}

.c-calendar-table .sunday,
.c-calendar-table .holiday {
  color: var(--sunday-color);
  background-color: var(--sunday-bg);
}

.c-calendar-table .today,
.c-calendar-table .today.sunday,
.c-calendar-table .today.saturday,
.c-calendar-table .today.holiday {
  color: inherit;
  background-color: var(--today-bg);
}

/*--------------------------------------------------
  month navigation
--------------------------------------------------*/
.month-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 15px 0;
}

.nav-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border: 1px solid var(--primary-color);
  background-color: var(--white);
  color: var(--primary-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.nav-button:hover:not(:disabled) {
  background-color: var(--primary-color);
  color: var(--white);
}

.nav-button:disabled {
  background-color: var(--disabled-bg);
  color: var(--disabled-color);
  border-color: var(--disabled-border);
  cursor: not-allowed;
  opacity: 0.6;
}

.nav-arrow {
  font-size: 18px;
  font-weight: bold;
}

.current-month {
  font-size: 18px;
  font-weight: bold;
  color: var(--black);
  min-width: 120px;
  text-align: center;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .sec-calendar {
    margin-top: 65px !important;
  }

  .c-calendar-table {
    width: 760px;
  }

  .c-calendar-table .schedule {
    height: 90px;
  }

  .calendar-content {
    overflow: visible;
    position: relative;
    overflow-y: visible;
    overflow-x: auto;
  }

  .month-navigation {
    gap: 10px;
    position: sticky;
    top: 120px;
    z-index: 10;
  }

  .nav-button {
    width: 100%;
    justify-content: center;
  }

  .tab-button {
    padding: 10px 16px;
  }

  .current-month {
    order: -1;
  }

  /* index4専用スタイル */
  .index4 .schedule-title {
    text-align: center;
  }
}

/*--------------------------------------------------
  loading
--------------------------------------------------*/
.c-loading {
  position: relative;
  height: 150px;
  display: none; /* デフォルトは非表示 */
}

.c-loading.is-visible {
  display: block;
}

.c-loading:before {
  content: "読み込み中";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 40px);
}

.c-loading:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 50px;
  height: 50px;
  border: 5px solid var(--loading-border);
  border-right: 5px solid transparent;
  border-radius: 50%;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
    opacity: 0.3;
  }
}