.reservation-web {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: 100px auto 0;
  padding: 24px 16px 48px;
  color: var(--liff-text);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
    background: transparent;
}
.reservation-web *, .reservation-web *::before, .reservation-web *::after {
  box-sizing: border-box;
}
.reservation-web > .liff-stack {
  padding: 0;
}
.reservation-web h1 {
  margin: 0 0 8px;
  font-size: 24px;
  color: var(--liff-primary-dark);
}
.reservation-web h2 {
  font-size: 18px;
}
.reservation-web .reservation-web-lead {
  margin-bottom: 24px;
  color: var(--liff-muted);
}
.reservation-web .container {
  padding: 0;
}
.reservation-web .card {
  border: 1px solid var(--liff-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(31, 42, 40, 0.0509803922);
}
.reservation-web .card-body {
  padding: 20px 16px;
}
.reservation-web .btn-primary {
  background: var(--liff-primary);
  border-color: var(--liff-primary);
}
.reservation-web input:not([type=checkbox]):not([type=radio]), .reservation-web .btn {
  min-height: 48px;
  font-size: 16px;
}
.reservation-web .nav-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 0;
}
.reservation-web .nav-item {
  margin: 0 !important;
  min-width: 0;
}
.reservation-web .nav-link {
  width: 100%;
  height: 100%;
  min-height: 48px;
  padding: 10px 8px;
  font-size: 14px;
  border: 1px solid var(--liff-border);
  border-radius: 10px;
  color: var(--liff-primary-dark);
}
.reservation-web .nav-link.active {
  background: var(--liff-primary);
  color: #fff;
  border-color: var(--liff-primary);
}
.reservation-web .form-check {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0;
}
.reservation-web .form-check-input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
}
.reservation-web .form-check-label {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.reservation-web .alert-danger, .reservation-web .liff-alert[role=alert] {
  color: #8b1120;
  background: #fdecee;
  border: 1px solid #f1b8bf;
  border-radius: 10px;
}
.reservation-web .liff-alert[role=status] {
  color: var(--liff-primary-dark);
  background: #e6f2ef;
  margin-bottom: 16px;
}
.reservation-web .alert ul {
  padding-inline-start: 20px;
  margin: 0;
}
.reservation-web .liff-history-heading {
  margin: 16px 0;
  font-size: 18px;
}
.reservation-web .liff-booking-card__header {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  padding: 0;
  background: none;
}
.reservation-web .liff-booking-card__group {
  font-size: 16px;
}
.reservation-web .liff-booking-card__actions .liff-button {
  font-size: 14px;
}
.reservation-web .liff-booking-card {
  min-width: 0;
}
.reservation-web .liff-booking-card__number {
  white-space: normal;
}
.reservation-web :focus-visible {
  outline: 2px solid var(--liff-primary);
  outline-offset: 3px;
}
.reservation-web--login {
  max-width: 640px;
}
.reservation-web .reservation-web-registration {
  margin-top: 20px;
}
@media (min-width: 992px) {
  .reservation-web {
    margin-top: 120px;
    padding-top: 40px;
  }
  .reservation-web .card-body {
    padding: 28px;
  }
  .reservation-web--bookings .liff-booking-card {
    grid-template-columns: minmax(0, 1fr) 240px;
    column-gap: 32px;
    padding: 24px;
  }
  .reservation-web--bookings .liff-booking-card > :not(.liff-booking-card__actions) {
    grid-column: 1;
  }
  .reservation-web--bookings .liff-booking-card__actions .liff-button {
    height: auto;
    flex: 0 0 auto;
  }
  .reservation-web--bookings .liff-booking-card__actions {
    grid-column: 2;
    grid-row: 1/span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

body:has(.reservation-web) {
  background: var(--liff-background);
}

.reservation-web--flow .second-narrow-image-title {
  display: none;
}
.reservation-web--flow > section, .reservation-web--flow .liff-reservation-flow, .reservation-web--flow .liff-reservation-calendar {
  padding: 16px 0 !important;
}
.reservation-web--flow .row {
  --ngcc-gutter-x: 0;
}
.reservation-web--flow .row > [class*=col-lg-] {
  width: 100%;
  min-width: 0;
}
.reservation-web--flow .steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  font-size: 12px;
}
.reservation-web--flow .liff-reservation-calendar .nav-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.reservation-web--flow input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .reservation-web--flow select, .reservation-web--flow textarea {
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  font-size: 16px;
  border: 1px solid var(--liff-border);
  border-radius: 8px;
}
.reservation-web--flow .liff-reservation-flow .d-flex.justify-content-between {
  flex-wrap: wrap;
  gap: 12px;
}
.reservation-web--flow .liff-reservation-flow .d-flex.justify-content-between > .btn {
  flex: 1 1 220px;
}
.reservation-web--flow .liff-reservation-flow .table {
  width: 100%;
  table-layout: fixed;
}
.reservation-web--flow .liff-reservation-flow .table td, .reservation-web--flow .liff-reservation-flow .table th {
  overflow-wrap: anywhere;
}
.reservation-web--flow .liff-reservation-flow .player-row .row {
  gap: 8px;
}
.reservation-web--flow .liff-booking-complete__heading {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  background: none;
}
.reservation-web--flow .liff-booking-complete .liff-card {
  padding: 24px 16px;
}
.reservation-web--flow.reservation-web--complete {
  max-width: 720px;
}
@media (min-width: 992px) {
  .reservation-web--flow.reservation-web--plans > .liff-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .reservation-web--flow.reservation-web--plans > .liff-stack > .liff-card {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .reservation-web--flow.reservation-web--plans .liff-card .liff-button {
    margin-top: auto;
    min-height: 48px;
  }
}

.reservation-web--flow .input-group:has(.group-nin) {
  min-width: 130px;
  width: 160px;
  max-width: 100%;
  flex-wrap: nowrap;
}
.reservation-web--flow .input-group:has(.group-nin) .group-nin {
  width: auto;
  flex: 1 1 auto;
}

.reservation-web--member .second-narrow-image-title, .reservation-web--member .second-image-title, .reservation-web--account .second-narrow-image-title, .reservation-web--account .second-image-title, .reservation-web--qr .second-narrow-image-title, .reservation-web--qr .second-image-title {
  display: none;
}
.reservation-web--member .liff-profile, .reservation-web--account .liff-profile, .reservation-web--qr .liff-profile {
  padding: 16px 0 !important;
}
.reservation-web--member header, .reservation-web--account header, .reservation-web--qr header {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  background: none;
}
.reservation-web--member input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .reservation-web--member select, .reservation-web--member textarea, .reservation-web--account input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .reservation-web--account select, .reservation-web--account textarea, .reservation-web--qr input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .reservation-web--qr select, .reservation-web--qr textarea {
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  font-size: 16px;
  border: 1px solid var(--liff-border);
  border-radius: 8px;
  padding: 10px 12px;
}
.reservation-web--member .liff-filter, .reservation-web--account .liff-filter, .reservation-web--qr .liff-filter {
  margin: 20px 0;
}
.reservation-web--member .liff-filter select, .reservation-web--member .liff-history-filter select, .reservation-web--account .liff-filter select, .reservation-web--account .liff-history-filter select, .reservation-web--qr .liff-filter select, .reservation-web--qr .liff-history-filter select {
  width: 100%;
  background: #fff;
}
.reservation-web--member .liff-history-filter, .reservation-web--account .liff-history-filter, .reservation-web--qr .liff-history-filter {
  margin: 16px 0;
}
.reservation-web--member .liff-profile .row, .reservation-web--account .liff-profile .row, .reservation-web--qr .liff-profile .row {
  --ngcc-gutter-x: 16px;
}
.reservation-web--member .liff-profile .col-12.col-md-10, .reservation-web--account .liff-profile .col-12.col-md-10, .reservation-web--qr .liff-profile .col-12.col-md-10 {
  width: 100%;
}
.reservation-web--member .alert-danger, .reservation-web--member .invalid-feedback, .reservation-web--account .alert-danger, .reservation-web--account .invalid-feedback, .reservation-web--qr .alert-danger, .reservation-web--qr .invalid-feedback {
  background: #fdecee;
  color: #8b1120;
  padding: 12px;
  border-radius: 10px;
}
.reservation-web--member .liff-registration .registration-input-group, .reservation-web--account .liff-registration .registration-input-group, .reservation-web--qr .liff-registration .registration-input-group {
  flex-wrap: nowrap;
}
.reservation-web--member .liff-registration .registration-input-group > input, .reservation-web--account .liff-registration .registration-input-group > input, .reservation-web--qr .liff-registration .registration-input-group > input {
  flex: 1 1 0;
  width: 0;
}
.reservation-web--member .liff-registration .form-check-inline, .reservation-web--account .liff-registration .form-check-inline, .reservation-web--qr .liff-registration .form-check-inline {
  display: inline-flex;
  margin-right: 16px;
}
.reservation-web--member .liff-registration .alert ul, .reservation-web--account .liff-registration .alert ul, .reservation-web--qr .liff-registration .alert ul {
  list-style: disc outside;
}
.reservation-web--member .liff-registration .input-group-text, .reservation-web--account .liff-registration .input-group-text, .reservation-web--qr .liff-registration .input-group-text {
  min-height: 48px;
  display: flex;
  align-items: center;
}
.reservation-web--member .liff-article img, .reservation-web--account .liff-article img, .reservation-web--qr .liff-article img {
  max-width: 100%;
}
.reservation-web--member .liff-history-link, .reservation-web--account .liff-history-link, .reservation-web--qr .liff-history-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (min-width: 992px) {
  .reservation-web--member .liff-stack, .reservation-web--account .liff-stack, .reservation-web--qr .liff-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .reservation-web--member .liff-stack > .liff-card, .reservation-web--account .liff-stack > .liff-card, .reservation-web--qr .liff-stack > .liff-card {
    margin-top: 0;
  }
  .reservation-web--member .liff-filter, .reservation-web--account .liff-filter, .reservation-web--qr .liff-filter {
    max-width: 480px;
  }
  .reservation-web--member .liff-registration, .reservation-web--account .liff-registration, .reservation-web--qr .liff-registration {
    max-width: none;
  }
  .reservation-web--member .liff-registration table, .reservation-web--account .liff-registration table, .reservation-web--qr .liff-registration table {
    display: table;
    width: 100%;
  }
  .reservation-web--member .liff-registration tbody, .reservation-web--account .liff-registration tbody, .reservation-web--qr .liff-registration tbody {
    display: table-row-group;
  }
  .reservation-web--member .liff-registration tr, .reservation-web--account .liff-registration tr, .reservation-web--qr .liff-registration tr {
    display: table-row;
  }
  .reservation-web--member .liff-registration th, .reservation-web--member .liff-registration td, .reservation-web--account .liff-registration th, .reservation-web--account .liff-registration td, .reservation-web--qr .liff-registration th, .reservation-web--qr .liff-registration td {
    display: table-cell;
    padding: 16px;
  }
  .reservation-web--member .liff-registration th, .reservation-web--account .liff-registration th, .reservation-web--qr .liff-registration th {
    width: 26%;
  }
  .reservation-web--member .liff-registration .btn, .reservation-web--account .liff-registration .btn, .reservation-web--qr .liff-registration .btn {
    max-width: 480px;
    margin-inline: auto;
  }
  .reservation-web--member .liff-menu-grid--member, .reservation-web--account .liff-menu-grid--member, .reservation-web--qr .liff-menu-grid--member {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.reservation-web--qr {
  max-width: 640px;
}

.reservation-web--qr > .liff-card {
  padding: 20px 16px !important;
}

.reservation-web--account .liff-profile__actions {
  max-width: 640px;
  margin-inline: auto;
}

@media (max-width: 1199.98px) {
  body:has(.reservation-web) > header .header-inner {
    flex-wrap: nowrap;
    gap: 16px;
    min-height: 64px;
    padding: 10px 16px;
  }
  body:has(.reservation-web) > header .header-inner > h1 {
    flex: 1 1 auto;
    min-width: 0;
  }
  body:has(.reservation-web) > header .header-inner > h1 img {
    max-width: 100%;
    object-fit: contain;
  }
  body:has(.reservation-web) > header .header-inner > .navi-box {
    flex: 0 0 44px;
    align-self: center;
    padding: 0;
  }
  body:has(.reservation-web) > header .header-inner .toggle {
    width: 44px;
    height: 44px;
    bottom: auto;
    gap: 4px;
  }
  body:has(.reservation-web) > header .header-inner .navi-box .toggle .toggle-inner {
    width: 30px;
    height: 15px;
    flex: 0 0 15px;
  }
  body:has(.reservation-web) > header .header-inner .toggle p {
    position: static;
    transform: none;
    margin: 0;
    line-height: 1.3;
  }
}
.reservation-web--flow .liff-reservation-calendar .calendar-box {
  border: 0;
  overflow: visible;
  font-family: inherit;
}
.reservation-web--flow .liff-reservation-calendar .calendar-box .calendar-header,
.reservation-web--flow .liff-reservation-calendar .calendar-box .calendar-body {
  border: 0;
}
.reservation-web--flow .liff-reservation-calendar .calendar-box .calendar-header > div {
  border: 0;
  padding: 0;
  background: transparent;
}
.reservation-web--flow .liff-reservation-calendar .calendar-box .calendar-body .day {
  display: block;
  min-height: 64px;
  padding: 4px 0;
  border: 0;
  background: #f5f7f6;
  font-family: inherit;
}
.reservation-web--flow .liff-reservation-calendar .calendar-box .calendar-body .day .date {
  display: inline;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
}
.reservation-web--flow .liff-reservation-calendar .calendar-box .calendar-body .price-box-slim {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 9px;
}

.reservation-web--flow .liff-reservation-flow .liff-companion-form {
  font-size: 15px;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .d-flex:not(.form-check):not(.player-choice-row), .reservation-web--flow .liff-reservation-flow .liff-companion-form .d-lg-flex {
  display: block !important;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .player-choice-row {
  display: flex !important;
  justify-content: space-between;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .col-3, .reservation-web--flow .liff-reservation-flow .liff-companion-form .col, .reservation-web--flow .liff-reservation-flow .liff-companion-form .w-25 {
  width: 100% !important;
  max-width: none;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .py-2, .reservation-web--flow .liff-reservation-flow .liff-companion-form .px-3, .reservation-web--flow .liff-reservation-flow .liff-companion-form .mx-1, .reservation-web--flow .liff-reservation-flow .liff-companion-form .mb-2, .reservation-web--flow .liff-reservation-flow .liff-companion-form .mb-3 {
  padding: 0 !important;
  margin: 0 !important;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .border {
  border: 0 !important;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .border-bottom {
  padding: 12px !important;
  border-color: var(--liff-border) !important;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .bg-gray-100 {
  background: transparent !important;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .bg-primary {
  padding: 8px 12px !important;
  background: var(--liff-primary-dark) !important;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .fs-sm, .reservation-web--flow .liff-reservation-flow .liff-companion-form .fs-xs {
  font-size: inherit !important;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .form-check {
  flex-direction: row !important;
  padding: 0;
  margin: 0;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .form-check-input {
  appearance: auto;
  flex: 0 0 20px;
  margin: 0;
  background-image: none !important;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .form-check-label {
  min-height: 0;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .input-group {
  display: block;
  width: 100%;
  min-width: 0;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .input-group-text {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form input[type=text], .reservation-web--flow .liff-reservation-flow .liff-companion-form select, .reservation-web--flow .liff-reservation-flow .liff-companion-form textarea {
  width: 100% !important;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--liff-border);
  border-radius: 10px !important;
  background: #fff;
  color: var(--liff-text);
  font: inherit;
  font-size: 16px;
}
.reservation-web--flow .liff-reservation-flow .liff-companion-form .btn {
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

.reservation-web--flow .liff-reservation-confirm {
  font-size: 15px;
}
.reservation-web--flow .liff-reservation-confirm .liff-confirm-group .d-flex {
  display: block !important;
}
.reservation-web--flow .liff-reservation-confirm .liff-confirm-group .col-3, .reservation-web--flow .liff-reservation-confirm .liff-confirm-group .col {
  width: 100%;
  max-width: none;
}
.reservation-web--flow .liff-reservation-confirm .liff-confirm-group .py-2, .reservation-web--flow .liff-reservation-confirm .liff-confirm-group .px-3 {
  padding: 0 !important;
}
.reservation-web--flow .liff-reservation-confirm .liff-confirm-group .bg-gray-100 {
  background: transparent !important;
}
.reservation-web--flow .liff-reservation-confirm .liff-confirm-group .fs-sm {
  font-size: inherit !important;
}
.reservation-web--flow .liff-reservation-confirm .liff-confirm-group .border-bottom {
  padding: 12px;
  border-color: var(--liff-border) !important;
}
.reservation-web--flow .liff-reservation-confirm .liff-confirm-group .badge {
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: inherit;
  font: inherit;
}
.reservation-web--flow .liff-reservation-confirm .liff-confirm-group .me-2 {
  margin-right: 0 !important;
}
.reservation-web--flow .liff-reservation-confirm .liff-confirm-group {
  border: 1px solid var(--liff-border) !important;
}
.reservation-web--flow .liff-reservation-confirm .bg-primary {
  padding: 8px 12px !important;
  background: var(--liff-primary-dark) !important;
}
.reservation-web--flow .liff-reservation-confirm form > .d-flex {
  display: block !important;
}
.reservation-web--flow .liff-reservation-confirm .btn {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 15px;
}

.reservation-web--account .liff-player-edit form.liff-stack > p, .reservation-web--account .liff-player-edit form.liff-stack > button {
  grid-column: 1/-1;
}
.reservation-web--account .liff-player-edit form.liff-stack > fieldset {
  min-width: 0;
}

.reservation-web--password-reset {
  max-width: 720px;
  margin-top: 32px;
}