@charset "UTF-8";

/* =========================================================
  reservation
========================================================= */

.reservationDate h2 {
  margin: 1.5rem 0 1rem;
  font-size: 1.5rem;
  text-align: center;
}

.reservationDate .message {
  margin-bottom: 0.5rem;
  text-align: center;
}

.reservationDate .information {
  text-align: right;
}

.reservationDate .reservations {
  margin: 10px 0 40px;
}

.reservationDate .dateTable {
  width: 100%;
  text-align: center;
}

.reservationDate .dateTable tr:nth-child(odd) {
  background-color: var(--mono-color-8);
}

.reservationDate .dateTable tr:first-child {
  background-color: var(--main-color-10);
}

.reservationDate .dateTable th,
.reservationDate .dateTable td {
  padding: 12px;
  border: 1px solid var(--mono-color-6);
}

.reservationDate .dateTable th.place {
  text-align: left;
}

@media screen and (max-width: 959px) {
  .reservationDate .reservations {
    margin: 20px 0 0;
  }
}

.reservationCalendar h2 {
  font-size: 1.5rem;
  text-align: center;
}

.reservationCalendar .column {
  display: flex;
  justify-content: space-between;
  gap: 40px 60px;
}

.reservationCalendar .column .calender-col {
  width: calc(50% - 30px);
}

.reservationCalendar .calender {
  width: 100%;
  text-align: center;
}

.reservationCalendar .calender th,
.reservationCalendar .calender td {
  border: 1px solid var(--mono-color-6);
}

.reservationCalendar .calender th {
  padding: 12px;
}

.reservationCalendar .calender .cellTableHead {
  margin: 0 0 1rem;
  border: 0;
  font-size: 1.25rem;
}

.reservationCalendar .calender a {
  display: block;
  padding: 12px;
  font-size: 1.125rem;
}

@media screen and (max-width: 959px) {
  .reservationCalendar .column {
    flex-wrap: wrap;
  }

  .reservationCalendar .column .calender-col {
    width: 100%;
  }
}

@media screen and (max-width: 559px) {
}