@charset "UTF-8";

/* ------------------------------------------------------------------
イベント詳細：予約枠（event_yoyaku）専用スタイル
single-event.php の予約枠UI と CF7（予約枠あり版 ID:10294）用
------------------------------------------------------------------ */

/* ------------------------------------------- 満枠表示 - */
.event-thanks {
  font-family: "NotoSerifJP", sans-serif;
  font-size: 4.8vw;
  font-weight: 400;
  line-height: 1.75em;
  text-align: center;
}

@media screen and (min-width: 751px) {
  .event-thanks {
    font-size: 1.667vw;
  }
}

@media screen and (min-width: 1441px) {
  .event-thanks {
    font-size: 24px;
    font-size: 2.4rem;
  }
}

/* ------------------------------------------- 「ご来店日時」見出し - */
.form-reserve-list-head {
  margin-bottom: 2vw;
}

.form-reserve-list-head p {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0.7em;
  font-family: "NotoSerifJP", sans-serif;
  font-size: 4vw;
  font-weight: 500;
}

@media screen and (min-width: 751px) {
  .form-reserve-list-head {
    margin-bottom: 1.4vw;
  }

  .form-reserve-list-head p {
    font-size: 1.25vw;
  }
}

@media screen and (min-width: 1441px) {
  .form-reserve-list-head {
    margin-bottom: 20px;
  }

  .form-reserve-list-head p {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

/* ------------------------------------------- 予約枠リスト - */
.reserve-list {
  margin-bottom: 6vw;
  padding: 0.5em 0;
  max-height: 60vw;
  overflow-y: auto;
}

.reserve-list-block:nth-child(n + 2) {
  margin-top: 6vw;
}

.reserve-date {
  margin-bottom: 0.8em;
  font-size: 4vw;
  font-weight: 500;
}

.reserve-time-list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2vw;
  list-style: none;
  padding: 0;
  margin: 0;
}

.reserve-time-list li a {
  display: inline-block;
  padding: 0.7em 1.5em;
  border-radius: 5em;
  border-color: #e4e4e4;
  border-style: solid;
  border-width: 0.533vw;
  font-size: 3.733vw;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.reserve-time-list li.close a {
  position: relative;
  background: #e4e4e4;
  pointer-events: none;
}

.reserve-time-list li.close a:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  display: block;
  width: 70%;
  height: 0.533vw;
  background-color: #383838;
}

#your-kiboudate {
  pointer-events: none;
}

@media screen and (min-width: 751px) {
  .reserve-list {
    margin-bottom: 2.083vw;
    max-height: 25.694vw;
  }

  .reserve-list-block:nth-child(n + 2) {
    margin-top: 2.083vw;
  }

  .reserve-date {
    font-size: 1.25vw;
  }

  .reserve-time-list {
    gap: 0.694vw;
  }

  .reserve-time-list li a {
    border-radius: 2.778vw;
    border-width: 0.139vw;
    font-size: 1.111vw;
    transition: background-color .5s;
  }

  .reserve-time-list li a:hover {
    background-color: #e4e4e4;
  }

  .reserve-time-list li.close a:before {
    height: 0.139vw;
  }
}

@media screen and (min-width: 1441px) {
  .reserve-list {
    margin-bottom: 30px;
    max-height: 370px;
  }

  .reserve-list-block:nth-child(n + 2) {
    margin-top: 30px;
  }

  .reserve-date {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .reserve-time-list {
    gap: 10px;
  }

  .reserve-time-list li a {
    border-radius: 40px;
    border-width: 2px;
    font-size: 16px;
    font-size: 1.6rem;
  }

  .reserve-time-list li.close a:before {
    height: 2px;
  }
}