/* 現行の予約入力ページの日付・時間帯だけに適用する。 */
body.reservation-form-page .form02 input.datepicker,
body.reservation-form-page .form02 select,
body.reservation-lp-page #reservationform input.datepicker,
body.reservation-lp-page #reservationform select[name="time01"],
body.reservation-lp-page #reservationform select[name="time02"] {
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  min-height: 44px;
  padding: 8px 26px 8px 8px;
  width: 100%;
  min-width: 0;
}

body.reservation-form-page .form02 .p-form__inner__flex {
  height: auto;
}

body.reservation-form-page .form02 .p-form__inner__flex h4 {
  height: auto;
}

body.reservation-form-page .form02 .p-form__inner__flex__right {
  min-width: 0;
}

body.reservation-form-page .form02 .select__wrap::after {
  font-size: 12px;
  line-height: 1;
  right: 8px;
  bottom: 16px;
  pointer-events: none;
}

body.reservation-lp-page #reservationform .select-day,
body.reservation-lp-page #reservationform .select-time {
  min-width: 0;
}

/* 長い選択肢や見出しで、LPのフォーム全体が画面幅を超えないようにする。 */
body.reservation-lp-page #reservationform #form table {
  table-layout: fixed;
}

body.reservation-lp-page #reservationform table th {
  white-space: normal;
}

@media screen and (max-width: 766px) {
  body.reservation-form-page .form02 input.datepicker,
  body.reservation-form-page .form02 select {
    font-size: max(16px, 2.671154vw);
  }

  body.reservation-form-page .form02 .p-form__inner__flex h4 {
    width: 20%;
  }

  body.reservation-form-page .form02 .p-form__inner__flex__right {
    padding: 12px 8px;
  }

  body.reservation-form-page .l-header__nav:not(.panelactive) {
    visibility: hidden;
  }
}

/* 小さい端末では見出しを上段に置き、曜日まで入る幅を確保する。 */
@media screen and (max-width: 374px) {
  body.reservation-form-page .form02 .p-form__inner__flex {
    flex-direction: column;
  }

  body.reservation-form-page .form02 .p-form__inner__flex h4 {
    width: 100%;
    min-height: 36px;
  }
}