/*----------------------------------------------
予約画面
----------------------------------------------*/

#app .fieldset .form-control .form-radio-wrap {
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 30px;
  margin: 20px 0;
}
#app .fieldset .form-control .form-radio-wrap:hover,
#app .fieldset .form-group .form-label-wrap:hover {
  cursor: pointer;
}
#app .fieldset .form-control .form-radio-wrap:last-of-type {
  border-bottom: 2px solid #ccc;
}
#app .fieldset .form-control .form-radio-wrap .form-label-wrap-text {
  margin: 0 0 0;
  flex: 1;
  width: inherit;
}
#app .fieldset .form-control .form-radio-wrap input[type="radio"] {
  width: 20px;
  margin-right: 20px;
}
#app .fieldset .form-control .form-radio-wrap .form-label-wrap-text .form-label-name {
  margin-bottom: 10px;
  font-size: 16px;
}
#app .fieldset .form-control .form-radio-wrap .form-label-wrap-text .form-label-desc {
  font-size: 14px;
}
#app .fieldset .form-control .form-radio-wrap .form-label-wrap-text .form-label-desc + div {
  border-top: 1px dashed #ccc;
  margin-top: 10px;
  padding-top: 10px;
}
.form-label-wrap-selected {
  display: none;
}
.form-label-wrap-image {
  width: 200px;
}
#app .fieldset .form-control .form-radio-wrap .form-label-wrap-text .form-label-price {
  display: none;
}

#app .fieldset .form-control .form-radio-wrap:has(input:checked) {
  border: 2px solid #459bac;
  background: #e3f6f9;
}
.js-animation-loading_reservation_dt {
  height: 400px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.js-animation-loading_reservation_time {
  height: 100px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.block-loading {
  width: 100px;
}
/*#calendar {
  height: 400px;
}*/
#app .fieldset .form-control .form-select-wrap select.is-selected {
  border-color: #459bac;
  background-color: #e3f6f9;
}
#app table.calendar tr td {
  padding: 2px 0;
}
#app table.calendar tr td.select .click-on {
  border: 2px solid #459bac;
  background-color: #e3f6f9;
}
#app table.calendar tr td.select .click-off {
  border: 2px solid #459bac;
}
#app table.calendar tr td.select {
  background-color: #fff;
}
#app table.calendar tr td.closed .click-off {
  background-color: #fbe8e8;
}
#app table.calendar tr td.closed .click-off .stock {
  color: #dc0000;
}
#app table.calendar tr td.prevmonth .click-off,
#app table.calendar tr td.nextmonth .click-off {
  padding: 0;
}
#app table.calendar tr td > div.click-on {
  border: 2px solid #939393;
  background-color: #fff;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin: 0px 2px;
  border-radius: 4px;
  padding: 5px 0 6px;
}
#app table.calendar tr td > div.click-on:hover {
  opacity: .8;
}
#app table.calendar tr td > div.click-off {
  background: #f5f5f5;
}
#app table.calendar tr td.today > div.click-off {
  background: #eee;
}
#app .daily-calendar {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 0;
}
#app .daily-calendar .time-list::after {
  content: '';
  min-width: calc(4% - 10px);
}
#app .daily-calendar .time-slider {
  overflow-x: inherit;
  overflow-y: inherit;
  padding: 0 4%;
  min-height: 100px;
}
#app .daily-calendar .time-list .time {
  min-width: 130px;
  border: 2px solid #ccc;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 1;
}
#app .daily-calendar .time-list .time.active:hover {
  background-color: #f6feff;
  opacity: .8;
}
#app .daily-calendar .time-list .time.active .time-text {
  border-color: #459bac;
  color: #459bac;
  font-weight: bold;
}

#app .daily-calendar .time-list .time.active {
  border: 2px solid #459bac;
}
#app .daily-calendar .time-list .time.active .status-text {
  color: #459bac;
}
#app .daily-calendar .time-list .time-text,
#app .daily-calendar .time-list .status-text {
  padding: 10px;
}
#app .daily-calendar .time-list .time-text {
  border-bottom: 1px dashed #ccc;
}
#app .daily-calendar .time-list .click-on {
  
}
#app .daily-calendar .time-list .click-on .status-text {
  color: #459bac;
}
#app .daily-calendar .time-list .click-off {
  background: #eee;
}
#app .daily-calendar .time-list .click-off .time-text,
#app .daily-calendar .time-list .click-off .status-text {
  color: #ababab;
}
#app .daily-calendar .time-list .time.active .click-on {
  background-color: #e3f6f9;
}
#app #daily-calendar-button #daily-prev, 
#app #daily-calendar-button #daily-next {
  width: 15%;
}

#app .action-buttons {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .form-label-content {
    display: block;
  }
  #app .fieldset .form-control .form-radio-wrap {
    padding: 30px 20px;
  }
  #app .fieldset .form-control .form-radio-wrap .form-label-wrap-text {
    padding-left: 0;
    margin-top: 20px;
  }
  #app .fieldset .form-control .form-radio-wrap {
    width: 92%;
    margin: 20px auto;
  }
  #app #daily-calendar-button #daily-prev, 
  #app #daily-calendar-button #daily-next {
    width: 30%;
  }
  #app .calendar-container .form-error {
    padding: 0 4%;
  }
}

/*----------------------------------------------
予約確認画面
----------------------------------------------*/
.eat-reservation-confirm--total {
  display: none;
}
.block-member-info--items-use-spoofing-protection {
  background: #efefef;
  padding: 20px;
  text-align: center;
  margin: 10px 0 30px;
}
.block-member-info--items-use-spoofing-protection .constraint {
  display: inline-block;
  margin-right: 20px;
}
.block-member-info--items-use-spoofing-protection .constraint .required:after {
  display: block;
  padding: 0.4em .6em 0.5em;
  line-height: 1;
  font-size: 13px;
}
.block-member-info--items-use-spoofing-protection .form-control input[type="checkbox"] {
  vertical-align: text-bottom;
}
.block-member-info--items-use-spoofing-protection .form-control label {
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
}
.eat_reservation_confirm_content .note-area {
  padding-left: 1em;
  border-left: 1px solid #ccc;
  margin: 1em 0;
}
.page-applyentry .block-apply--coupon {
  display: none;
}


/* 利用規約モーダル */
.block-member-terms--body {
  font-size: 13px;
}

/*----------------------------------------------
予約完了画面
----------------------------------------------*/

.block-inquiry-completed--customer-name {
  margin-top: 30px;
}

/*----------------------------------------------
チェックイン画面
----------------------------------------------*/
.page-applycheck .block-apply-check--header {
  background: #f5f5f5;
}
.page-applycheck .block-apply-check {
  margin: 40px auto 90px;
}
.page-applycheck .block-common-alert-list {
  width: inherit;
  margin: 0 auto 15px;
  border: 1px solid #ebccd1;
  background-color: #f2dede;
}
@media screen and (max-width: 768px) {
  .page-applycheck .block-apply-check .block-apply-check--body {
    margin: 0 10px;
  }
  .page-applycheck .block-common-alert-list {
    margin: 0 10px 15px;
  }
}

/*----------------------------------------------
チェックイン画面（QR）
----------------------------------------------*/
.page-checkin .block-apply-checkin--header {
  background: #f5f5f5;
} 
.page-checkin .block-apply-checkin--qr-caution {
  margin-top: 20px;
  width: 230px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.page-checkin .block-apply-checkin--qr-caution .block-apply-checkin--qr-caution-annotation {
  font-size: 12px;
  line-height: 1.5;
  display: inline-block;
  font-weight: normal;
  margin: 15px 0 0px;
  color: #555;
}
@media screen and (max-width: 768px) {
  .page-checkin .block-apply-checkin--qr-caution {
    width: inherit;
    padding: 0 12px;
  }
}

/*----------------------------------------------
キャンセル画面
----------------------------------------------*/
.page-applycancel .modal-dialog .modal-footer {
  display: flex;
  gap: 10px;
}
.page-applycancel .modal-dialog input[value="戻る"] {
  background: #eee;
  color: #666;
}

.page-applycancel .modal-dialog  input[value="キャンセルする"] {
  border: 1px solid #ca2b2c!important;
  color: #ca2b2c!important;
  background: #ffebe8!important;
}
.page-applycancel .fieldset-vertical .form-label {
  margin: 15px 5px 10px 0px;
}
.page-applycancel .action-buttons {
  margin: 20px 0 40px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.page-applycancel .action-buttons .action {
  width: 100%;
}
.page-applycancel .action-buttons .action:nth-child(1) {
  order: 2;
}

.page-applycancel .action-buttons .action:nth-child(2) {
  order: 1;
}


/*----------------------------------------------
キャンセル完了画面
----------------------------------------------*/
.page-applycancelcomplete .block-order-cancellation-completed--back-to-mypage {
    display: none;
  }
.page-applycancelcomplete .block-order-cancellation-completed--message {
    text-align: center;
  }
.page-applycancelcomplete .eat_reservation_completion_home {
    margin-top: 50px;
  }
.page-applycancelcomplete .block-order-cancellation-completed {
    margin-top: 50px;
  }


/*----------------------------------------------
共通
----------------------------------------------*/
.block-header-logo {
  width: 200px;
}
#header + .pane-main {
  min-height: calc(100vh - 200px);
  max-width: 750px;
  margin: 0 auto;
}
.pane-header > .container {
  height: inherit;
  padding: 20px 0;
}
.pane-topic-path,
.block-topic-path {
  background: #fff;
}
.pane-footer {
  background: #eee;
}
.pane-footer #footernav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
}
.pane-footer #copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding-right: 2.5em;
}
.pane-footer #copyright a {
  display: block;
}
.pane-footer #copyright small {
  display: inline-block;
  text-align: left;
  margin-right: 20px;
  line-height: 1.5;
  font-size: 10px;
}
.action-buttons .btn.block-apply--forward {
  background: #32a2c5;
}
.btn-default {
  border: 1px solid #32a2c5;
  color: #32a2c5;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn-default:hover {
  background-color: #30c9e3!important;
  border-color: #30c9e3!important;
  color: #fff!important;
}
.btn-primary {
  background: #32a2c5!important;
  border: 1px solid #32a2c5!important;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn-primary:hover {
  background-color: #30c9e3!important;
  border-color: #30c9e3!important;
  color: #fff!important;
}
.block-order-cancellation--back {
  color: #666;
  border-color: #999;
}
.block-order-cancellation--back:hover {
  color: #666!important;
  border-color: #999!important;
  background: #eee!important;
}
.btn-danger {
  border: 1px solid #ca2b2c;
  color: #ca2b2c;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn-danger:hover {
  background: #ca2b2c;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .pane-footer {
    padding: 30px 15px 80px;
  }
  .pane-footer #footernav {
    display: block;
  }
}