/* CSS Document */


.btnBooth input[type="radio"] {
  display: none;
  &:not(:disabled) ~ label {
    cursor: pointer;
  }
  &:disabled ~ label {
    color: hsla(150, 5%, 75%, 1);
    border-color: hsla(150, 5%, 75%, 1);
    box-shadow: none;
    cursor: not-allowed;
  }
}
.btnBooth label {
  height: 100%;
  display: block;
  background: white;
  border: 2px solid hsla(150, 75%, 50%, 1);
  border-radius: 20px;
  padding: 1rem;
  margin-bottom: 1rem;
  margin: 1rem;
  text-align: center;
  box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
  position: relative;
}
.btnBooth input[type="radio"]:checked + label {
  background: hsla(150, 75%, 50%, 1);
  color: hsla(215, 0%, 100%, 1);
  box-shadow: 0px 0px 20px hsla(150, 100%, 50%, 0.75);
  &::after {
    color: hsla(215, 5%, 25%, 1);
    font-family: FontAwesome;
    border: 2px solid hsla(150, 75%, 45%, 1);
    content: "\f00c";
    font-size: 24px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    background: white;
    box-shadow: 0px 2px 5px -2px hsla(0, 0%, 0%, 0.25);
  }
}
.btnBooth input[type="radio"]#control_05:checked + label {
  background: red;
  border-color: red;
}


@media only screen and (max-width: 700px) {
  section {
    flex-direction: column;
  }
	#leftPane{
		height: auto!important;
	}

}


#booking{}
	#booking .subTitle{
		line-height: 1em;
		}

#calendar{}
	#calendar .fc-col-header-cell a{
		color: #000;
		text-decoration: none;
		}

#rsvStep2{
	margin-top: 1em;
	margin-bottom: 1em;
	}
	#rsvStep2 label{}
		#rsvStep2 label:before,
		#rsvStep2 label:after{
			content: none;
			}
	#rsvStep2 .radiobox{}
		#rsvStep2 .radiobox > div+div{
			margin-top: 0.8em;
			}
		#rsvStep2 .radiobox label{
			width: 100%;
			padding: 0.5em;
			padding-left: 2em;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"/></svg>') 0.5em center no-repeat;
			background-size: 1em 1em;
			border: 1px solid currentColor;
			text-align: center;
			cursor: pointer;
			}
		#rsvStep2 .radiobox input[type=radio]:checked+label{
			background-color: #ff0000;
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 24 24"><path fill="rgba(255,255,255,1)" d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"/></svg>');
			background-size: 1em 1em;
			border-color: transparent;
			color: #fff;
			}

#zabuto{}
	#zabuto table{
		width: 100%;
		margin: 1em 0 0 0;
		}
	#zabuto th,
	#zabuto td{
		width: auto;
		padding: 0;
		background: #000;
		border: 1px solid #fff;
		text-align: center;
		line-height: 1em;
		vertical-align: middle;
		}
	#zabuto div{
		margin: 0;
		padding: 0;
		}
	#zabuto span{
		margin: 0;
		padding: 0;
		}
	#zabuto table+div{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: flex-end;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		margin-top: 0.5em;
		}
		#zabuto table+div span{}
			#zabuto table+div span:first-child{
				display: none;
				}
	#zabuto .calendar-month-header{}
		#zabuto .calendar-month-header th,
		#zabuto .calendar-month-header td{
			padding: 0.5em 0;
			border: none;
			}
	#zabuto .calendar-dow-header{}
		#zabuto .calendar-dow-header th,
		#zabuto .calendar-dow-header td{
			padding: 0.5em 0;
			font-weight: normal;
			background: rgba(255,255,255,0.2);
			}
			#zabuto .calendar-dow-header th:nth-child(1),
			#zabuto .calendar-dow-header td:nth-child(1){
				background: rgba(255,100,0,0.2);
				}
			#zabuto .calendar-dow-header th:nth-child(7),
			#zabuto .calendar-dow-header td:nth-child(7){
				background: rgba(0,100,255,0.2);
				}
	#zabuto .calendar-dow{}
		#zabuto .calendar-dow th,
		#zabuto .calendar-dow td{
			padding: 0;
			line-height: 1em;
			}
			#zabuto .calendar-dow th:nth-child(1),
			#zabuto .calendar-dow td:nth-child(1){
				background: rgba(255,100,0,0.2);
				}
			#zabuto .calendar-dow th:nth-child(7),
			#zabuto .calendar-dow td:nth-child(7){
				background: rgba(0,100,255,0.2);
				}
		#zabuto .calendar-dow div{
			padding: 0.5em 0;
			margin: 0;
			line-height: 1em;
			}
			#zabuto .calendar-dow div:hover,
			#zabuto .calendar-dow div:active{
				cursor: pointer;
				background: #ff3333;
				color: #fff;
				}
		#zabuto .calendar-dow .rate-10{
			position: relative;
			color: rgba(255,255,255,0.5);
			pointer-events: none;
			overflow: hidden;
			}
			#zabuto .calendar-dow .rate-10:before,
			#zabuto .calendar-dow .rate-10:after{
				content: "";
				position: absolute;
				top: 50%;
				left: -20%;
				width: 140%;
				height: 2px;
				margin-top: -1px;
				background: red;
				}
			#zabuto .calendar-dow .rate-10:before{
				transform: rotate(45deg);
				}
			#zabuto .calendar-dow .rate-10:after{
				transform: rotate(-45deg);
				}
	#zabuto .calendar-month-navigation{
		cursor: pointer;
		}
	#zabuto .day{
		color: #555;
		}
	#zabuto .selected{}
		#zabuto .selected div{
			background-color: #f00;
			color: #fff;
			}
	#zabuto .legend{}
		#zabuto .legend ul{
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-ms-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-ms-flex-pack: flex-end;
			-webkit-justify-content: flex-end;
			justify-content: flex-end;
			list-style: none;
			}
		#zabuto .legend .rate-10{}
			#zabuto .legend .rate-10:before{
				content: "×";
				color: red;
				font-size: 1.6em;
				line-height: 1em;
				}
	#zabuto .ls-today{
		background: rgba(255,240,0,0.2);
		font-weight: bold;
		}
	#zabuto .ls-void{
		pointer-events: none;
		color: #555;
		}
	#zabuto .ls-valid{
		color: #fff;
		cursor: pointer;
		}
	#zabuto .badge-today{
		padding: 0.3em;
		margin: -0.3em;
		}
	#zabuto .day:not(.ls-void){
		color: inherit;
		}

#timeTableWrapper{
	margin: 1em 0 0 0;
	overflow: hidden;
	border: 1px solid #fff;;
	}
	#timeTableWrapper th,
	#timeTableWrapper td{
		width: auto;
		padding: 0;
		border: none;
		text-align: center;
		line-height: 1em;
		vertical-align: middle;
		}
	#timeTableWrapper .fc-axis{
		padding: 0 0.5em;
		background: rgba(255,255,255,0.1);
		}
	#timeTableWrapper .fc-head{
		border-bottom: 1px solid #fff;
		background: rgba(255,255,255,0.2);
		}
	#timeTableWrapper .fc-widget-header{
		border-right: 0;
		}
		#timeTableWrapper .fc-widget-header th,
		#timeTableWrapper .fc-widget-header td{
			padding: 0.5em;
			border: 1px solid #666;
			}
		#timeTableWrapper .fc-widget-header .fc-sun{
			background: rgba(255,100,0,0.2);
			}
		#timeTableWrapper .fc-widget-header .fc-sat{
			background: rgba(0,100,255,0.2);
			}
	#timeTableWrapper .fc-widget-content{}
		#timeTableWrapper .fc-widget-content th,
		#timeTableWrapper .fc-widget-content td{
			border: 1px solid #666;
			}
	#timeTableWrapper .fc-highlight-container{
		pointer-events: none;
		}
	#timeTableWrapper .fc-event-container{
		margin: 0;
		}
	#timeTableWrapper .fc-now-indicator-line{
		background: #fff000;
		border: none;
		left: -100%;
		width: 1000%;
		height: 1px;
		}
	#timeTableWrapper .fc-now-indicator-arrow{
		border-left-color: #fff000;
		}
	#timeTableWrapper .fc-today{
		background: rgba(255,240,0,0.2);
		}
	#timeTableWrapper .fc-event{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		width: 50%;
		background: none;
		margin: 0 !important;
		border: none;
		border-radius: 0;
		overflow: hidden;
		border-bottom: solid #ccccb0 1px;
		}
		#timeTableWrapper .fc-event-container a.fc-event:last-child{
			border: none;
			}
		#timeTableWrapper .fc-event:hover,
		#timeTableWrapper .fc-event:active{
			cursor: pointer;
			}
		#timeTableWrapper .fc-event:hover .prg,
		#timeTableWrapper .fc-event:active .prg{
			background: #ff3333;
			}
	#timeTableWrapper .prg{
		width: 100%;
		padding: 2px;
		color: #fff;
		line-height: 1.2em;
		transition: background 0.2s ease-out;
		}
		#timeTableWrapper .fc-event .prg p{
			margin: 0;
			font-size: 11px;
			line-height: 1.2em;
			}
	#timeTableWrapper .prg-1{
		background: #3fa9f5;
		}
	#timeTableWrapper .prg-2{
		background: #7ac943;
		}
	#timeTableWrapper .selected{
		background: #ff3333;
		}
	#timeTableWrapper .ls-full{
		pointer-events: none;
		text-align: center;
		background: #666;
		color: #ccc;
		}
#rsvStep3{ margin-bottom: 20px;}
#rsvStep4{ }
	#rsvStep4 dl{
		margin-top: 1em;
		}
	#rsvStep4 ul{
		margin-left: 2em;
		}
	#rsvStep4 .notePane{
		display: none;
		}

#waitingForNextProc{
	z-index: 9999;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:99999;
	opacity:0.8;
	background-color:rgba(0,0,0,0.95);
	transition:all 350ms 0s ease;
	display: flex;
	
	}
	#waitingForNextProc p{
		color:white;
		width:100%;
		font-weight: 800;
		padding-bottom: 1em;
		margin-top: -2em;
		}
	#waitingForNextProc svg{
			width: 100%;
			}
	#waitingForNextProc .wait{
		margin: auto;
		text-align: center;
		width:100%;
		}

.reservationNote{
	margin-bottom: 1em;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	}
	.reservationNote:empty{
		display: none;
		}

[class$="Layer"]{
	display: none;
	}
	[class$="Layer"] > div{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		z-index: 100;
		}
	[class$="Layer"] > div > div{
		width: 100%;
		padding: 1em;
		text-align: center;
		}
	[class$="Layer"] p{
		color: #fff;
		line-height: 1.2em;
		}

.fullLayer{}
	.fullLayer > div{
		background-color: rgba(0,0,0,0.8);
		}
	.fullLayer .reservationNote{
		margin-bottom: 0.5em;
		}
	.fullLayer h3{
		font-size: 1.2em;
		font-weight: bold;
		}
	.fullLayer p{
		margin-top: 1em;
		font-weight: normal;
		}

.loadingLayer{}
	.loadingLayer > div{
		background: rgba(0,0,0,0.8);
		}
	.loadingLayer p{
		font-weight: bold;
		}
	.loadingLayer .loader{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 10em;
			height: 10em;
			margin: -5em;
			border: 2px solid #fff000;
			border-top-color: transparent;
			border-radius: 100%;
			animation: spin 0.75s infinite linear;
			}
		@keyframes spin {
				from {
				transform: rotate(0deg);
				}
				to {
				transform: rotate(360deg);
				}
			}


/* for mobile */

@media (max-width: 767px) {
/*767以下px*/
#calendar{}
	#calendar .fc-col-header-cell a{
		font-size: 0.5em;
		}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#timeTableWrapper{}
	#timeTableWrapper .fc-scroller{
		height: 100vw !important;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#timeTableWrapper{}
	#timeTableWrapper .fc-scroller{
		height: 50vw !important;
		}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#timeTableWrapper{
	height: 25.5em !important;
	}
#calendar{}
	#calendar .fc-col-header-cell a{
		font-size: 0.75em;
		}

}


@media (min-width: 992px) {
/*992px以上*/
#timeTableWrapper{}
	#timeTableWrapper .fc-scroller{
		height: 23.5em !important;
		}
#calendar{}
	#calendar .fc-col-header-cell a{
		font-size: 0.8em;
		}

}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1200px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}

@media (max-width: 621px) {
/*767以下px*/
#calendar{}
	#calendar .fc-col-header-cell a{
		font-size: 0.75em;
		}
}
/* ie */
@media all and (-ms-high-contrast: none) {
#rsvStep2{}
	#rsvStep2 .radiobox label{
		padding: 0.5em;
		}
}