@charset "UTF-8";

/* タブ全体を囲むコンテナの設定 */
.tab-switch {
    display: flex; /* タブを横並びに */
    flex-wrap: wrap; /* 幅に応じて折り返し */
    margin: auto;/* コンテナの中央寄せ */
    justify-content: center;/* タブの中央寄せ */
    gap: 0 5px;/* タブ間の余白 */
}

/* 各タブボタンの設定 */
.tab-switch > label {
    flex: 1 1 auto; /* タブが均等に幅をとるが、幅を超えると折り返す */
    order: -1; /* 上部に表示する */
    position: relative; /* 絶対位置指定用の基準 */
    padding: .7em 1em; /* 上下左右の内側余白 */
    background-color: #f2f3f4; /* 背景色 */
    color: #999; /* 文字色 */
    text-align: center; /* 文字を中央揃え */
    cursor: pointer; /* ポインターを指アイコンに変更 */
    transition:.3s all;/*変化を滑らかに*/
}

/* タブボタンのホバーおよび選択状態のスタイル */
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
    background-color: #757F96; /* ホバー/選択時の背景色 */
    color: #fff; /* ホバー/選択時の文字色 */
}

/* ラジオボタン自体は非表示 */
.tab-switch input {
    display: none; /* 見た目に表示されないようにする */
}

/* タブコンテンツのスタイル */
.tab-switch > div {
    display: none; /* 初期状態では非表示 */
    width: 100%; /* コンテンツ幅を全体に */
    padding: 1.5em 1em; /* 内側余白 */
}

/* 選択されたタブのコンテンツを表示 */
.tab-switch label:has(:checked) + div {
    display: block; /* 選択されたタブに対応するコンテンツを表示 */
}

/* カレンダーのベース */
.calendar-wrap {
  margin: 0 auto;
  max-width: 1110px;
  display: flex;
  flex-direction: column;
  border: 2px solid #000;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

/* パソコン版カレンダー */

.calendar {
  width: 100%;
  border-collapse: collapse;
}
.calendar th, .calendar td {
  border: 1px solid #000;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
.calendar th {
  border: 1px solid #000;
  padding: 6px 10px;
}
.calendar td {
  border: 1px solid #000;
  padding: 6px 10px;
}

/* スマホ版カレンダー */
@media screen and (max-width: 420px){
    .calendar-wrap {
    display: flex;
    flex-direction: column;
    }
}
  .calendar th,
  .calendar td {
    padding: 6px;
    font-size: 12px;
  }
  .calendar th {
    padding: 3px 6px;
  }

.calendar, .sun {
  color: #e17f7e;
  background-color: #f8e4e2;
}
.calendar, .sat {
  color: #7ab6f3;
  background-color: #e7f6fd;
}
.calendar, .mute {
  color: #aaa;
}
.calendar, .today {
  background-color: #7d7d7d;
}
.calendar, .off {
  background-color: #fadcdb;
}