@charset "UTF-8";
/* ==========================================================================//
//
// WEB予約フォーム
//
// ========================================================================== */
.sec_form .sec_ttl {
  margin-bottom: 16px;
}
@media all and (min-width: 751px) {
  .sec_form .sec_ttl {
    margin-bottom: 20px;
  }
}

/* ==========================================================================//
//
// 予約　カレンダーページ
//
// ========================================================================== */
.mix-calendar th, .mix-calendar td, .timetable-calendar th, .timetable-calendar td, .multiple-calendar th, .multiple-calendar td, .monthly-calendar th, .monthly-calendar td {
  border: none;
}

.monthly-calendar {
  margin-bottom: 0;
}
.monthly-calendar .calendar-title {
  margin-top: 0;
  margin-bottom: 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}
@media all and (min-width: 751px) {
  .monthly-calendar .calendar-title {
    font-size: 21px;
    margin-bottom: 30px;
  }
}
.monthly-calendar .calendar-caption {
  position: relative;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  font-weight: 400;
  font-size: 14px;
  padding-top: 20px;
}
@media all and (min-width: 751px) {
  .monthly-calendar .calendar-caption {
    font-size: 18px;
    padding-top: 34px;
  }
}
.monthly-calendar .monthly-prev-next {
  position: absolute;
  bottom: -5px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 90%;
}
@media all and (min-width: 751px) {
  .monthly-calendar .monthly-prev-next {
    bottom: 0;
  }
}
.monthly-calendar .monthly-prev-next .monthly-prev,
.monthly-calendar .monthly-prev-next .monthly-next {
  font-size: 11px;
}
@media all and (min-width: 751px) {
  .monthly-calendar .monthly-prev-next .monthly-prev,
  .monthly-calendar .monthly-prev-next .monthly-next {
    font-size: 15px;
  }
}
.monthly-calendar .monthly-prev-next .monthly-prev > *,
.monthly-calendar .monthly-prev-next .monthly-next > * {
  position: relative;
}
.monthly-calendar .monthly-prev-next .monthly-prev > *::before,
.monthly-calendar .monthly-prev-next .monthly-next > *::before {
  position: absolute;
  content: "";
  border-top: 1px solid #505050;
  border-right: 1px solid #505050;
  aspect-ratio: 1;
  width: 0.5em;
  top: 50%;
}
.monthly-calendar .monthly-prev-next .monthly-prev > * {
  padding-left: 0.8em;
}
.monthly-calendar .monthly-prev-next .monthly-prev > *::before {
  left: 0;
  -webkit-transform: translate(0, -50%) rotate(-135deg);
          transform: translate(0, -50%) rotate(-135deg);
}
.monthly-calendar .monthly-prev-next .monthly-next > * {
  padding-right: 0.8em;
}
.monthly-calendar .monthly-prev-next .monthly-next > *::before {
  right: 0;
  -webkit-transform: translate(0, -50%) rotate(45deg);
          transform: translate(0, -50%) rotate(45deg);
}
.monthly-calendar .monthly-prev-next .monthly-prev:has(.no-link),
.monthly-calendar .monthly-prev-next .monthly-next:has(.no-link) {
  opacity: 0.5;
}

@media all and (min-width: 751px) {
  .booking_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 60px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
  .booking_wrap .lead {
    position: sticky;
    top: 110px;
  }
}

.links {
  margin-bottom: 30px;
}
.links .link_btn:not(:last-child) {
  margin-bottom: 8px;
}
.links .link_btn a {
  position: relative;
  display: block;
  background-color: #32BED1;
  border-radius: 30px;
  color: #fff;
  padding: 9px 30px;
}
.links .link_btn a::before {
  position: absolute;
  content: "";
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  aspect-ratio: 1;
  width: 8px;
  top: 50%;
  right: 26px;
  -webkit-transform: translate(-50%, -75%) rotate(135deg);
          transform: translate(-50%, -75%) rotate(135deg);
}
.links .link_btn a .name {
  font-weight: 500;
  font-size: 14px;
}
.links .link_btn a .field {
  font-size: 12px;
  margin-top: 2px;
}

.wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 14px;
}
@media all and (min-width: 751px) {
  .wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 20px;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
.wrap .monthly-calendar table {
  border-collapse: separate;
  border-spacing: 2px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  width: 100%;
  font-size: 12px;
  padding: 5px 10px 20px;
}
@media all and (min-width: 751px) {
  .wrap .monthly-calendar table {
    font-size: 15px;
    border-spacing: 4px;
    padding: 20px 30px 35px;
  }
}
.wrap .monthly-calendar table .day-box.holiday .day-number,
.wrap .monthly-calendar table .day-box.sun .day-number {
  color: #c65252;
}
.wrap .monthly-calendar table thead .week-title {
  font-weight: 400;
}
.wrap .monthly-calendar table thead .week-title.sun {
  color: #c65252;
}
.wrap .monthly-calendar table th {
  font-size: inherit;
  padding: 10px 0;
}
.wrap .monthly-calendar table tbody .day-box {
  padding: 4px;
}
@media all and (min-width: 751px) {
  .wrap .monthly-calendar table tbody .day-box {
    padding: 8px 4px 4px;
  }
}
.wrap .monthly-calendar table tbody .day-box .calendar-mark {
  line-height: 1.1;
}
@media all and (min-width: 751px) {
  .wrap .monthly-calendar table tbody .day-box .calendar-mark {
    line-height: 1.2;
  }
}
.wrap .monthly-calendar table tbody .day-box .calendar-mark .calendar-daylink {
  position: relative;
  display: block;
  color: #32BED1;
}
.wrap .monthly-calendar table tbody .day-box .calendar-mark .calendar-daylink::before {
  position: absolute;
  content: "";
  top: -22px;
  left: -4px;
  right: -4px;
  bottom: -6px;
}
@media all and (min-width: 751px) {
  .wrap .monthly-calendar table tbody .day-box .calendar-mark .calendar-daylink::before {
    top: -30px;
  }
}
.wrap .monthly-calendar table tbody .day-box.no-day {
  background-color: #fff;
}
.wrap .monthly-calendar table tbody .day-box.disable {
  background-color: #f0f0f0;
}
.wrap .monthly-calendar table tbody .day-box.disable .day-number {
  opacity: 0.5;
}
.wrap .monthly-calendar table tbody .day-box.disable .calendar-mark {
  opacity: 0.5;
}
.wrap .monthly-calendar table tbody .day-box:not(.no-day, .disable) {
  border: 1px solid #DCE2E2;
}
@media (hover: hover) {
  .wrap .monthly-calendar table tbody .day-box:not(.no-day, .disable) {
    position: relative;
  }
  .wrap .monthly-calendar table tbody .day-box:not(.no-day, .disable)::before {
    position: absolute;
    content: "";
    border: 2px solid #32BED1;
    inset: -1px;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 0;
  }
  .wrap .monthly-calendar table tbody .day-box:not(.no-day, .disable):hover::before {
    opacity: 1;
  }
}
.wrap .monthly-calendar table tbody .schedule-note {
  display: none;
}
.wrap .monthly-calendar table tbody .calendar-mark {
  font-size: 1.3em;
}

.calendar {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.calendar_inner {
  background-color: #F2F6F7;
  border-radius: 10px;
  padding: 20px 10px;
}
@media all and (min-width: 751px) {
  .calendar_inner {
    padding: 35px 40px 26px;
  }
}
.calendar_inner .calendar_ttl {
  font-size: 21px;
  text-align: center;
  margin-bottom: 15px;
}

.map {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background: #379BC8;
  border-radius: 10px;
}
.map .map_text {
  padding: 20px;
  color: #fff;
}
@media all and (min-width: 751px) {
  .map .map_text {
    padding: 60px 40px 40px;
  }
}
.map .discount {
  font-size: 25px;
  border-bottom: 1px solid #5EAFD3;
  padding-bottom: 10px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
@media all and (min-width: 751px) {
  .map .discount {
    font-size: 42px;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}
.map .discount span {
  color: #20627C;
  background: #fff;
  padding: 0 10px;
  display: block;
  border-radius: 10px;
  font-size: 11px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  letter-spacing: 0;
}
@media all and (min-width: 751px) {
  .map .discount span {
    font-size: 14px;
    padding: 0 20px;
  }
}
@media all and (max-width: 750px) {
  .map .map_iamge {
    padding-bottom: 20px;
  }
}

.note {
  text-align: right;
  font-size: 11px;
  line-height: 1.8;
  margin-top: 10px;
}
@media all and (min-width: 751px) {
  .note {
    font-size: 11px;
  }
}
.note .vacant {
  color: #32BED1;
}
.note .disable {
  color: #9EA7AD;
}

/* 日付選択ページ
 ---------------------------------------------------------- */
.calendar {
  background-color: #F2F6F7;
  border-radius: 10px;
}

.day-calendar .mtssb-timetable-link {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  border-spacing: 0 6px;
  padding: 15px 34px 20px;
}
@media all and (min-width: 751px) {
  .day-calendar .mtssb-timetable-link {
    padding: 40px 10%;
    border-spacing: 0 12px;
  }
}
.day-calendar .mtssb-timetable-link caption {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 12px;
}
@media all and (min-width: 751px) {
  .day-calendar .mtssb-timetable-link caption {
    font-size: 20px;
    margin-bottom: 30px;
  }
}
.day-calendar .mtssb-timetable-link caption .mtssb-timetable-name {
  display: inline-block;
  margin-right: 1em;
}
.day-calendar .mtssb-timetable-link caption .mtssb-timetable-date {
  display: inline-block;
}
.day-calendar .mtssb-timetable-link tbody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
}
@media all and (min-width: 751px) {
  .day-calendar .mtssb-timetable-link tbody {
    gap: 20px 30px;
  }
}
.day-calendar .mtssb-timetable-link tbody tr:first-child {
  display: none;
}
.day-calendar .mtssb-timetable-link tbody tr {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
@media all and (min-width: 751px) {
  .day-calendar .mtssb-timetable-link tbody tr {
    width: calc((100% - 60px) / 3);
  }
}
.day-calendar .mtssb-timetable-link tbody th,
.day-calendar .mtssb-timetable-link tbody td {
  font-size: 14px;
  line-height: inherit;
}
@media all and (min-width: 751px) {
  .day-calendar .mtssb-timetable-link tbody th,
  .day-calendar .mtssb-timetable-link tbody td {
    font-size: 15px;
  }
}
.day-calendar .mtssb-timetable-link .day-left {
  border: none;
  width: auto;
  font-weight: 400;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  width: 85%;
}
@media all and (min-width: 751px) {
  .day-calendar .mtssb-timetable-link .day-left {
    top: 10px;
    -webkit-transform: unset;
            transform: unset;
    width: 100%;
  }
}
.day-calendar .mtssb-timetable-link .day-right {
  border: none;
  border-radius: 0;
  width: 100%;
}
.day-calendar .mtssb-timetable-link .calendar-mark {
  text-align: left;
  font-size: inherit;
}
@media all and (min-width: 751px) {
  .day-calendar .mtssb-timetable-link .calendar-mark {
    text-align: center;
  }
}
.day-calendar .mtssb-timetable-link .calendar-mark.full {
  background-color: #f0f0f0;
  opacity: 0.5;
  padding: 12px 24px;
}
@media all and (min-width: 751px) {
  .day-calendar .mtssb-timetable-link .calendar-mark.full {
    padding: 34px 10px 8px;
  }
}
.day-calendar .mtssb-timetable-link .calendar-mark .booking-timelink {
  position: relative;
  border: 1px solid #DCE2E2;
  font-weight: 500;
  color: #32BED1;
  padding: 12px 24px;
}
@media all and (min-width: 751px) {
  .day-calendar .mtssb-timetable-link .calendar-mark .booking-timelink {
    padding: 34px 10px 8px;
  }
}
@media (hover: hover) {
  .day-calendar .mtssb-timetable-link .calendar-mark .booking-timelink::before {
    position: absolute;
    content: "";
    inset: -1px;
    border: 2px solid #32BED1;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .day-calendar .mtssb-timetable-link .calendar-mark .booking-timelink:hover::before {
    opacity: 1;
  }
}

.calendar:has(.day-calendar) {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 150px;
}
@media all and (min-width: 751px) {
  .calendar:has(.day-calendar) {
    padding-bottom: 30px;
    margin-bottom: 230px;
  }
}

.mtssb-daily-action {
  position: absolute;
  bottom: -100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media all and (min-width: 751px) {
  .mtssb-daily-action {
    bottom: -150px;
  }
}
.mtssb-daily-action .btn {
  padding-right: unset;
  padding-left: 75px;
}
@media all and (min-width: 751px) {
  .mtssb-daily-action .btn {
    padding-left: 100px;
    padding-right: unset;
  }
}
.mtssb-daily-action .btn::before {
  right: unset;
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg) rotateX(0deg);
          transform: translateY(-50%) rotate(180deg) rotateX(0deg);
}
@media (hover: hover) {
  .mtssb-daily-action .btn::before {
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
  }
  .mtssb-daily-action .btn:hover::before {
    background-color: #F2F6F7;
    -webkit-transform: translateY(-50%) rotate(180deg) rotateX(360deg);
            transform: translateY(-50%) rotate(180deg) rotateX(360deg);
  }
}

/* ==========================================================================//
//
// 予約内容入力ページ
//
// ========================================================================== */
.reserve_form {
  /* 注意事項 */
  /* ==========================================================================//
   //
   // 予約内容確認ページ
   //
   // ========================================================================== */
}
.reserve_form .content-form {
  /* ご予約内容欄
    ---------------------------------------------------------- */
  /* フォーム欄
    ---------------------------------------------------------- */
  /* 利用時間 */
}
.reserve_form .content-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.reserve_form .content-form fieldset table {
  margin: 0;
}
.reserve_form .content-form legend {
  display: none;
}
.reserve_form .content-form table {
  width: 100%;
}
.reserve_form .content-form .required {
  color: #c65252;
}
.reserve_form .content-form #booking-reservation-fieldset {
  background-color: #EAF7FF;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 30px;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking-reservation-fieldset {
    padding: 20px 40px;
  }
}
.reserve_form .content-form #booking-reservation-fieldset table tbody tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking-reservation-fieldset table tbody tr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.reserve_form .content-form #booking-reservation-fieldset table tbody tr th,
.reserve_form .content-form #booking-reservation-fieldset table tbody tr td {
  border: none;
  padding: 0;
  line-height: inherit;
}
.reserve_form .content-form #booking-reservation-fieldset table tbody tr th {
  width: auto;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
}
@media all and (max-width: 750px) {
  .reserve_form .content-form #booking-reservation-fieldset table tbody tr th {
    padding-bottom: 10px;
    border-bottom: 1px solid #DCE2E2;
  }
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking-reservation-fieldset table tbody tr th {
    width: 300px;
    text-align: left;
    font-size: 15px;
    border-right: 1px solid #DCE2E2;
    padding: 20px;
  }
}
.reserve_form .content-form #booking-reservation-fieldset table tbody tr td {
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  padding-top: 10px;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking-reservation-fieldset table tbody tr td {
    text-align: left;
    font-size: 15px;
    padding-left: 40px;
    padding-top: 0;
  }
}
.reserve_form .content-form .booking-form-people-number-row {
  display: none !important;
  margin-top: 30px;
}
.reserve_form .content-form #booking_client-fieldset table,
.reserve_form .content-form #booking-option-fieldset table {
  text-align: left;
  width: 100%;
  border-collapse: collapse;
}
.reserve_form .content-form #booking_client-fieldset table tr,
.reserve_form .content-form #booking-option-fieldset table tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1em; /* 項目同士の間隔 */
}
.reserve_form .content-form #booking_client-fieldset table tr:not(:last-child),
.reserve_form .content-form #booking-option-fieldset table tr:not(:last-child) {
  margin-bottom: 30px;
}
.reserve_form .content-form #booking_client-fieldset table th,
.reserve_form .content-form #booking_client-fieldset table td,
.reserve_form .content-form #booking-option-fieldset table th,
.reserve_form .content-form #booking-option-fieldset table td {
  width: 100%;
  text-align: left;
  font-size: inherit;
  line-height: inherit;
  border: none;
  padding: 0;
}
.reserve_form .content-form #booking_client-fieldset table th,
.reserve_form .content-form #booking-option-fieldset table th {
  width: auto;
  font-weight: 400;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking_client-fieldset table th,
  .reserve_form .content-form #booking-option-fieldset table th {
    width: 260px;
  }
}
.reserve_form .content-form #booking_client-fieldset table td,
.reserve_form .content-form #booking-option-fieldset table td {
  /* セレクトボックス デフォルトの矢印 非表示 */
  /* Firefox用 */
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking_client-fieldset table td,
  .reserve_form .content-form #booking-option-fieldset table td {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.reserve_form .content-form #booking_client-fieldset table td label.field-item,
.reserve_form .content-form #booking-option-fieldset table td label.field-item {
  margin-right: 41px;
}
.reserve_form .content-form #booking_client-fieldset table td input[type=number],
.reserve_form .content-form #booking_client-fieldset table td input[type=text],
.reserve_form .content-form #booking_client-fieldset table td input[type=email],
.reserve_form .content-form #booking_client-fieldset table td input[type=tel],
.reserve_form .content-form #booking-option-fieldset table td input[type=number],
.reserve_form .content-form #booking-option-fieldset table td input[type=text],
.reserve_form .content-form #booking-option-fieldset table td input[type=email],
.reserve_form .content-form #booking-option-fieldset table td input[type=tel] {
  margin: 0;
  background: #F2F6F7;
  border: none;
  border-radius: 3px;
  font-size: inherit;
  padding: 12px 10px;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking_client-fieldset table td input[type=number],
  .reserve_form .content-form #booking_client-fieldset table td input[type=text],
  .reserve_form .content-form #booking_client-fieldset table td input[type=email],
  .reserve_form .content-form #booking_client-fieldset table td input[type=tel],
  .reserve_form .content-form #booking-option-fieldset table td input[type=number],
  .reserve_form .content-form #booking-option-fieldset table td input[type=text],
  .reserve_form .content-form #booking-option-fieldset table td input[type=email],
  .reserve_form .content-form #booking-option-fieldset table td input[type=tel] {
    padding: 20px 16px;
  }
}
.reserve_form .content-form #booking_client-fieldset table td ::-webkit-input-placeholder, .reserve_form .content-form #booking-option-fieldset table td ::-webkit-input-placeholder {
  font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
  color: #9EA7AD;
}
.reserve_form .content-form #booking_client-fieldset table td ::-moz-placeholder, .reserve_form .content-form #booking-option-fieldset table td ::-moz-placeholder {
  font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
  color: #9EA7AD;
}
.reserve_form .content-form #booking_client-fieldset table td :-ms-input-placeholder, .reserve_form .content-form #booking-option-fieldset table td :-ms-input-placeholder {
  font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
  color: #9EA7AD;
}
.reserve_form .content-form #booking_client-fieldset table td ::-ms-input-placeholder, .reserve_form .content-form #booking-option-fieldset table td ::-ms-input-placeholder {
  font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
  color: #9EA7AD;
}
.reserve_form .content-form #booking_client-fieldset table td ::placeholder,
.reserve_form .content-form #booking-option-fieldset table td ::placeholder {
  font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
  color: #9EA7AD;
}
.reserve_form .content-form #booking_client-fieldset table td select,
.reserve_form .content-form #booking-option-fieldset table td select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  padding-right: 1em;
}
.reserve_form .content-form #booking_client-fieldset table td select::-ms-expand,
.reserve_form .content-form #booking-option-fieldset table td select::-ms-expand {
  display: none;
}
.reserve_form .content-form #booking_client-fieldset table td input[type=radio], .reserve_form .content-form #booking_client-fieldset table td input[type=checkbox],
.reserve_form .content-form #booking-option-fieldset table td input[type=radio],
.reserve_form .content-form #booking-option-fieldset table td input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
}
.reserve_form .content-form #booking_client-fieldset table td input[type=radio]::before, .reserve_form .content-form #booking_client-fieldset table td input[type=checkbox]::before,
.reserve_form .content-form #booking-option-fieldset table td input[type=radio]::before,
.reserve_form .content-form #booking-option-fieldset table td input[type=checkbox]::before {
  /* ベースの四角 */
  content: "";
  left: 0;
  top: 0;
  position: absolute;
  display: block;
  background: #fff;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #DCE2E2;
}
.reserve_form .content-form #booking_client-fieldset table td input[type=radio]::after, .reserve_form .content-form #booking_client-fieldset table td input[type=checkbox]::after,
.reserve_form .content-form #booking-option-fieldset table td input[type=radio]::after,
.reserve_form .content-form #booking-option-fieldset table td input[type=checkbox]::after {
  /* チェックを入れた時の表示 */
  content: "";
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #505050;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.reserve_form .content-form #booking_client-fieldset table td input[type=radio]:checked::after, .reserve_form .content-form #booking_client-fieldset table td input[type=checkbox]:checked::after,
.reserve_form .content-form #booking-option-fieldset table td input[type=radio]:checked::after,
.reserve_form .content-form #booking-option-fieldset table td input[type=checkbox]:checked::after {
  opacity: 1;
}
.reserve_form .content-form #booking_client-fieldset table .booking-seimei,
.reserve_form .content-form #booking-option-fieldset table .booking-seimei {
  display: none;
  text-align: left;
  font-size: 0.9em;
}
.reserve_form .content-form #booking_client-fieldset table .booking-seimei:last-of-type,
.reserve_form .content-form #booking-option-fieldset table .booking-seimei:last-of-type {
  margin-left: 1em;
}
.reserve_form .content-form #booking_client-fieldset table .booking-seimei[for=booking-mei], .reserve_form .content-form #booking_client-fieldset table .booking-seimei[for=booking-mei_kana],
.reserve_form .content-form #booking-option-fieldset table .booking-seimei[for=booking-mei],
.reserve_form .content-form #booking-option-fieldset table .booking-seimei[for=booking-mei_kana] {
  display: none;
}
.reserve_form .content-form #booking_client-fieldset table .booking-seimei[for=booking-mei] + input, .reserve_form .content-form #booking_client-fieldset table .booking-seimei[for=booking-mei_kana] + input,
.reserve_form .content-form #booking-option-fieldset table .booking-seimei[for=booking-mei] + input,
.reserve_form .content-form #booking-option-fieldset table .booking-seimei[for=booking-mei_kana] + input {
  display: none;
}
.reserve_form .content-form #booking_client-fieldset table .content-text,
.reserve_form .content-form #booking-option-fieldset table .content-text {
  width: 100%;
}
.reserve_form .content-form #booking_client-fieldset table .booking-option-number,
.reserve_form .content-form #booking-option-fieldset table .booking-option-number {
  text-align: left;
  width: 100%;
}
.reserve_form .content-form #booking_client-fieldset table .error-message,
.reserve_form .content-form #booking-option-fieldset table .error-message {
  color: #c65252;
  margin-top: 0.5em;
}
.reserve_form .content-form label {
  margin-bottom: 10px;
  display: block;
}
.reserve_form .content-form #booking_client-fieldset {
  text-align: right;
}
.reserve_form .content-form #booking_client-fieldset table {
  margin-top: 14px;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking_client-fieldset table {
    margin-top: 20px;
  }
}
.reserve_form .content-form #booking_client-fieldset table tr:nth-child(4) td input#client-address2 {
  display: none;
}
.reserve_form .content-form #booking-option-fieldset {
  margin-top: 20px;
}
.reserve_form .content-form #booking-option-fieldset #booking-option-usage_time {
  margin: 0;
  padding: 12px 10px;
  background: #F2F6F7;
  border: none;
  border-radius: 3px;
  font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
  font-size: inherit;
  width: 100%;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking-option-fieldset #booking-option-usage_time {
    padding: 20px 16px;
  }
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(1) td {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking-option-fieldset tr:nth-child(1) td {
    width: 50.05%;
  }
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(1) td::after {
  position: absolute;
  content: "";
  background-image: url(../../images/service/space/ico_select_arrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 14px;
  height: 8px;
  top: 20px;
  right: 15px;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form #booking-option-fieldset tr:nth-child(1) td::after {
    top: 25px;
    right: 20px;
  }
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(1) td .error-message {
  width: 100%;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(2) th {
  margin-bottom: 10px;
  display: block;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(2) td {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(2) td label {
  display: unset;
  cursor: pointer;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(2) td .error-message {
  width: 100%;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(3) {
  margin-top: 60px;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(3) th {
  display: none;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(3) td {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(3) td label {
  display: unset;
  cursor: pointer;
  position: relative;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(3) td label::after {
  content: "に同意する";
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(3) td .error-message {
  margin-top: 5px;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(4) {
  margin: 0;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(4) td {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 20px;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(4) td label {
  margin-right: 0;
  display: unset;
  cursor: pointer;
  position: relative;
}
.reserve_form .content-form #booking-option-fieldset tr:nth-child(4) .error-message {
  margin-top: 5px;
}
.reserve_form .content-form .submit_btn {
  width: min(155px, 100%);
}
@media all and (min-width: 751px) {
  .reserve_form .content-form .submit_btn {
    width: min(250px, 100%);
  }
}
.reserve_form .content-form .btn {
  padding-right: 75px !important;
}
@media all and (min-width: 751px) {
  .reserve_form .content-form .btn {
    padding-right: 100px !important;
  }
}
.reserve_form .notice {
  text-align: center;
}
.reserve_form .notice p {
  display: inline-block;
  margin-top: 40px;
  color: #c65252;
  text-align: left;
}
@media all and (min-width: 751px) {
  .reserve_form .notice p {
    margin-top: 60px;
  }
}
.reserve_form #booking-confirm-fieldset {
  background-color: #F2F6F7;
  border-radius: 10px;
  padding: 12px 20px 30px;
  margin-top: 20px;
}
@media all and (min-width: 751px) {
  .reserve_form #booking-confirm-fieldset {
    padding: 40px 80px 80px;
    margin-top: 0px;
  }
}
.reserve_form #booking-confirm-fieldset table {
  text-align: left;
}
.reserve_form #booking-confirm-fieldset table tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding: 18px 0;
}
@media all and (min-width: 751px) {
  .reserve_form #booking-confirm-fieldset table tr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    gap: 20px;
    padding: 24px 0;
  }
}
.reserve_form #booking-confirm-fieldset table tr:not(:last-child) {
  border-bottom: 1px solid #DCE2E2;
}
.reserve_form #booking-confirm-fieldset table tr#confirmation-number_of_people td {
  position: relative;
}
.reserve_form #booking-confirm-fieldset table tr#confirmation-number_of_people td::after {
  content: "人";
}
.reserve_form #booking-confirm-fieldset table tr#confirmation-privacy {
  display: none;
}
.reserve_form #booking-confirm-fieldset table th,
.reserve_form #booking-confirm-fieldset table td {
  text-align: left;
  font-size: inherit;
  line-height: inherit;
  border: none;
  padding: 0;
}
.reserve_form #booking-confirm-fieldset table th {
  width: auto;
  font-weight: 500;
}
@media all and (min-width: 751px) {
  .reserve_form #booking-confirm-fieldset table th {
    width: 260px;
  }
}
.reserve_form #booking-confirm-fieldset table td {
  line-height: 1.7;
}
@media all and (min-width: 751px) {
  .reserve_form #booking-confirm-fieldset table td {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.reserve_form #booking-confirm-fieldset table td input {
  margin: 0;
  border: 1px solid #DCE2E2;
  border-radius: 3px;
  font-size: inherit;
  padding: 12px 10px;
}
@media all and (min-width: 751px) {
  .reserve_form #booking-confirm-fieldset table td input {
    padding: 14px 12px;
  }
}
.reserve_form #booking-confirm-fieldset .option-confirm-header {
  display: none;
}
.reserve_form #booking-confirm-fieldset .booking-form-people-number-row,
.reserve_form #booking-confirm-fieldset tr:has(.option-confirm-header) {
  display: none !important;
}
.reserve_form #booking-confirm-fieldset #confirmation-booking-message-title {
  display: none;
}

/* ==========================================================================//
//
// Thanksページ
//
// ========================================================================== */
.reserve_thanks p {
  line-height: 1.78;
}
.reserve_thanks p:not(:last-child) {
  margin-bottom: 1em;
}
.reserve_thanks .tx {
  text-align: center;
  font-size: 17px;
}
@media all and (min-width: 751px) {
  .reserve_thanks .tx {
    text-align: left;
    font-size: 22px;
  }
}
@media (hover: hover) {
  .reserve_thanks .tel span {
    position: relative;
  }
  .reserve_thanks .tel span::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    bottom: 4px;
    left: 0;
    background-color: #505050;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }
  .reserve_thanks .tel:hover span::after {
    width: 100%;
  }
}
.reserve_thanks .c-btn {
  margin-top: 60px;
}
@media all and (min-width: 751px) {
  .reserve_thanks .c-btn {
    margin-top: 100px;
  }
}