@charset "UTF-8";
/* CSS Document */
input[name="calendar-tab"] {
  display: none; }

.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  padding: 0 10px;
  border-bottom: 2px solid #06589f; }
  @media (min-width: 768px) {
    .tab-buttons {
      display: none; } }

.tab-label {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: #e0e0e0;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.2rem; }

#tab-place1:checked ~ .tab-buttons .label-place1,
#tab-place2:checked ~ .tab-buttons .label-place2 {
  background-color: #06589f;
  color: #fff; }

.calview {
  display: none;
  /* 初期状態は両方非表示 */ }
  @media (min-width: 768px) {
    .calview {
      display: block !important;
      flex: 1; } }

#tab-place1:checked ~ .calendar-wrapper .place1,
#tab-place2:checked ~ .calendar-wrapper .place2 {
  display: block;
  /* 選択された方だけ表示 */ }

.callink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #06589f; }
  .callink #view_month {
    margin-right: auto;
    color: #06589f;
    font-size: 2rem; }
    @media (min-width: 768px) {
      .callink #view_month {
        font-size: 2.4rem; } }
  .callink button {
    border: 0;
    background: #00913a;
    margin-left: 5px;
    color: #fff;
    font-size: 1.6rem;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 6px; }
    @media (min-width: 768px) {
      .callink button {
        font-size: 2rem; } }
    .callink button.none {
      background: #ddd;
      cursor: none; }

.calendar {
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  font-size: 1.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  /* すき間を少し狭く */
  height: calc(100vh - 250px);
  overflow: auto;
  /* パソコン用に入れていた「1日の開始位置ずらし」をリセット */
  /* 縦並びの時は「日付 + 曜日」や「予定」が見えるように横幅いっぱいに広げる */ }
  @media (min-width: 768px) {
    .calendar {
      overflow: visible;
      height: auto;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: 3em;
      grid-auto-rows: minmax(100px, auto);
      gap: 8px;
      max-width: 100%;
      margin: 0 auto 20px; } }
  .calendar .day-of-week, .calendar .day-of-week-sat, .calendar .day-of-week-sun {
    display: none; }
    @media (min-width: 768px) {
      .calendar .day-of-week, .calendar .day-of-week-sat, .calendar .day-of-week-sun {
        display: block;
        text-align: center;
        padding: 10px 0;
        background-color: #f5f5f5;
        border-radius: 4px; } }
  .calendar .day-of-week-sat {
    color: #007bff; }
  .calendar .day-of-week-sun {
    color: #dc3545; }
  @media (min-width: 768px) {
    .calendar .first-day {
      grid-column-start: var(--start); } }
  .calendar .dates {
    text-align: left;
    /* 左寄せ */
    padding: 12px 15px;
    display: flex;
    background: #fff;
    border: 1px solid #eee; }
    .calendar .dates.holiday {
      background: #ffe6e6;
      border: 1px solid #ffd9d9; }
    .calendar .dates .hol {
      margin: 0 !important; }
      @media (min-width: 768px) {
        .calendar .dates .hol {
          text-align: center; } }
    .calendar .dates .date {
      margin-right: 10px;
      width: 4em; }
    @media (min-width: 768px) {
      .calendar .dates {
        flex-direction: column;
        min-height: 4em;
        padding: 5px; }
        .calendar .dates .date {
          text-align: right;
          margin: 0;
          width: auto; } }
    .calendar .dates .reserve_datas {
      width: 100%; }
      .calendar .dates .reserve_datas .reserve_data {
        border-radius: 4px;
        padding: 3px;
        display: block; }
        .calendar .dates .reserve_datas .reserve_data + .reserve_data {
          margin-top: 4px; }
        @media (min-width: 768px) {
          .calendar .dates .reserve_datas .reserve_data {
            display: block; } }
        .calendar .dates .reserve_datas .reserve_data p {
          margin: 0 !important;
          font-size: 1.2rem;
          line-height: 1.3; }
        .calendar .dates .reserve_datas .reserve_data.type_1 {
          background: #cce3f8;
          border: solid 1px #0074dd; }
        .calendar .dates .reserve_datas .reserve_data.type_2 {
          background: #d3e8d3;
          border: solid 1px #228b22; }
        .calendar .dates .reserve_datas .reserve_data.type_3 {
          background: #ffcccc;
          border: solid 1px #ff0000; }

@media print {
  /* 1. 印刷時、画面幅を強制的に1200px（PC表示の基準）にする */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    zoom: 0.8 !important;
    transform-origin: top left !important; }

  /* 2. タブ切り替えボタンなど印刷に不要な要素を消す */
  .tab-buttons {
    display: none !important; }

  /* 3. カレンダーをPC用の表示（横並び・両方表示）にする */
  .calview {
    display: block !important;
    flex: 1 !important; }

  .calendar {
    grid-template-columns: repeat(7, 1fr) !important;
    grid-template-rows: 3em !important;
    grid-auto-rows: minmax(100px, auto) !important;
    gap: 8px !important; }
    .calendar .day-of-week, .calendar .day-of-week-sat, .calendar .day-of-week-sun {
      display: block !important; }
    .calendar .first-day {
      grid-column-start: var(--start) !important; }
    .calendar .dates {
      flex-direction: column !important;
      min-height: 4em !important;
      padding: 5px !important; }
      .calendar .dates .date {
        text-align: right !important;
        margin: 0 !important;
        width: auto !important; }

  /* 4. 背景色や枠線の色を印刷に強制反映させる（ブラウザ対策） */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important; } }