@charset "utf-8";
/* wizard common */
body {
	/*margin-bottom:130px;*/
}
#contents{
	text-align:left;
	color: #333;
	padding-bottom:35px;
}
.subTitle{
	font-weight:bold;
}
.pageTitle {
	overflow:hidden;
}
.reserveStepWrap{
	background-color:#FFFFFF;
	margin-top:-10px;
	padding:10px 0;
}
.reserveStepWrap ul{
	display:block;
	width:160px;
	margin:0 auto;
}
.reserveStepWrap ul:after{
	display:block;
	content:'';
	clear:both;
}
.reserveStepWrap ul li{
	float:left;
	font-size:30px;
	padding:0 7px 10px 7px;
	color:#AAAAAA;
}
.reserveStepWrap ul li.active{
	color:#000000;	
}
.shopMessageWarp{
	/*background-color:#d4cccc;*/
	margin-top:-10px;
	margin-bottom:10px;
}
.shopMessageWarp .contentsTitle{
	padding:10px 0;
	font-weight:bold;
	color:#776868;
	text-shadow:1px 1px 1px rgba(255,255,255,.5);
}
.reserveNotice{
	background-color:rgba(255,255,255,.6);
	padding:10px;
	margin-bottom:10px;
	margin-top:20px;
	font-size:14px;
	line-height:140%;
	border-radius:5px;
}
.searchResultItemWrap .reserveNotice {
	margin-top: 10px;
	margin-bottom: 10px;
}
.reserveNotice.course{
	margin-top: 10px;
	background-color: rgba(215, 215, 215, 0.6);
}
.shopMessageWarp .anchor{
	padding:10px;
	text-align:center;
}
.shopMessageWarp .anchor a{
	display:inline-block;
	background-color:#FFFFFF;
	border:1px solid #887e7e;
	border-radius:4px;
	font-size:14px;
	padding:10px 30px;
	box-shadow:1px 1px 3px rgba(0,0,0,.4);
}
.shopMessageWarp .anchor a:hover{
	background-color:#ece7e7;
	text-shadow:1px 1px 1px #FFFFFF;
}

body[id^="reserve"] .table{
	width:100%;
}
body[id^="reserve"] .table .courseName{
	width:100%;
}

.itemListWrap{
	width:100%;
}
.itemListWrap:after{
	display:block;
	content:'';
	clear:both;
}
.itemListWrap .itemWrap{
	float:left;
	width:49%;
	margin-bottom:10px;
	background-color:#FFFFFF;
	box-shadow:1px 1px 5px rgba(0,0,0,.1);
}
.itemListWrap .itemWrap.setNull{
	box-shadow: 0px 0px 0px;
	width:90%;
	margin:0 auto !important;
}
.itemListWrap .itemWrap.setNull .anchor{
	max-height: 79px;
	height: 100%;
}
.itemListWrap .itemWrap:nth-child(odd){
	margin-right:1%;
}
.itemListWrap .itemWrap:nth-child(even){
	margin-left:1%;
}
.itemWrap .photo{
	width:140px;
	position:relative;
}
.itemWrap .photo img{
	width:100%;
}
.itemWrap .photo span.noImage{
	display:block;
	width:100%;
	height:80px;
	text-align:center;
	background-color:#ece7e7;
	border:1px solid #d4cccc;
	color:#887e7e;
	padding-top:30px;
	font-size:14px;
}
.itemWrap .data{
	font-size:14px;
	width: calc(100% - 160px);
}
.itemWrap .data > div{
	padding: 0 0 10px 0px;
}
.itemWrap .data > div.extraPrice{
	border-bottom: 1px solid #000000;
	padding-bottom: 0px;
	margin-bottom: 10px;
	margin-top:-10px;
}
.itemWrap .itemName{
	font-size:16px;
	font-weight:bold;
}
.itemWrap .nominationPrice > span{
	display:block;
}
.itemWrap .nominationPrice > span span:first-child{
	display:inline-block;
	width:calc(100% - 75px);
	position:relative;
}
.itemWrap .nominationPrice > span span:last-child{
	width:70px;
	text-align:right;
	display:inline-block;
}
.itemWrap .nominationPrice > span span:first-child:after{
	display:inline-block;
	position:absolute;
	content:'：';
	right:-12px;
}
.itemWrap .attendanceIcon{
	display:inline-block;
	vertical-align: top;
}
.itemWrap .attendanceIcon span{
	display:inline-block;
	background-color:#FFFFFF;
	padding:2px 5px;
	line-height:normal;
	background-color:#ea7171;
	color:#FFFFFF;
	border-radius:3px;
	font-size:12px;
	border: 1px solid #ea7171;
}
.itemWrap .scheduleIconWrap{
	display:inline-block;
	vertical-align: top;
	position: relative;
}

.itemWrap .scheduleIconWrap .scheduleIcon{
	width:100%;
	display: inline-block;
}
.itemWrap .scheduleIconWrap .scheduleIcon .image {
	display: inline-block;
}
.itemWrap .scheduleIconWrap .scheduleIcon .image img {
	width: auto;
}
.itemWrap .scheduleIconWrap .scheduleIcon .text{
	border:1px solid;
	border-radius:3px;
	padding:2px 5px;
	display:inline-block;
	line-height:normal;
	font-size:12px;
	width: max-content;
	max-width: 220px;
	width: max-content;
}
.itemWrap .scheduleIconWrap.noText {
	padding:0px;
	height:0px;
}
.itemWrap .scheduleIconWrap.noText .scheduleIcon .text{
	border:1px solid transparent;
	padding:0px;
	font-size: 0px;
	line-height: 0px;
}
@media screen and (max-width: 640px) {
	.itemWrap .scheduleIconWrap {
		max-width: 200px;
	}
	.itemWrap .scheduleIconWrap .scheduleIcon .text{
		max-width: 100%;
	}
}

.itemWrap .itemComment{
	line-height:120%;
	word-break: break-all;
}
.itemWrap .anchor{
	text-align:center;
}
.itemWrap .anchor a{
	display:inline-block;
	padding: 8px 8px;
	width: 110px;
	text-align: center;
	border:1px solid #EC4141;
	background-color:#EC4141;
	border-radius:4px;
	color:#FFFFFF;
	box-sizing:border-box;
	line-height:1;
	text-decoration:none;
}
.itemWrap .anchor a:hover{
	/*background-color:#ffffff;
	color:#887e7e;*/
	opacity:.4;
	text-decoration:none;
}
.modal__content .anchor a{
	display:inline-block;
	padding:8px 28px;
	border:1px solid #887e7e;
	background-color:#887e7e;
	border-radius:4px;
	color:#FFFFFF;
	font-size:14px;
}
.modal__content .anchor a:hover{
	background-color:#ffffff;
	color:#887e7e;
}

@media screen and (max-width:640px) {
	.itemListWrap{
		width:100%;
		margin:0 auto;
	}
	.itemListWrap .itemWrap{
		float:none;
		width:100%;
	}
	.itemListWrap .itemWrap:nth-child(odd){
		margin-right:0%;
	}
	.itemListWrap .itemWrap:nth-child(even){
		margin-left:0%;
	}
}

/* wizard2 */
.courseName span,
.travelCostName span,
.nominateName span{
	display:block;
}
.courseName span:first-child,
.travelCostName span:first-child,
.nominateName span:first-child{
	font-weight:bold;
	font-size:14px;
	margin-bottom:6px;
}
.courseName span:nth-last-child(2),
.courseName span:last-child,
.travelCostName span:nth-last-child(2),
.travelCostName span:last-child,
.nominateName span:nth-last-child(2),
.nominateName span:last-child{
	font-size:12px;
	margin-bottom:3px;
}
.courseName span:last-child,
.travelCostName span:last-child,
.nominateName span:last-child{
	margin-bottom:0px;
}
.courseName span em,
.travelCostName span em,
.nominateName span em{
    display: inline-block;
    font-size: 18px;
    color: #FFFFFF;
    padding: 5px 3px 3px 3px;
    background: #f17717;
    border-radius: 30px;
    min-width: 28px;
    height: 28px;
    margin-right: 3px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    top: 2px;
	line-height: 110%;
	white-space: nowrap;
}
.course .anchor,
.travelCost .anchor,
.nominate .anchor{
	text-align:right;
	font-size:12px;
}
.courseInformation,
.travelCostInformation,
.nominateInformation{
	font-size:14px;
	padding:10px;
}
.modal__content .footer a:first-child{
	margin-right:20px;
}
.modal__content{
    max-height:calc(100vh - 100px);
    height:auto;
}
.js-modal1 .modal__content .body{
	/*max-height:300px !important;*/
	/*height: calc(100% - 109px) !important;*/
}
.js-modal2 .modal__content .body{
	/*max-height:300px !important;*/
	/*height: calc(100% - 109px) !important;*/
}
.btn-modal-close{
	display:none !important;
}
/* wizard3 */
.outPutDate{
	background-color:#70a5ab;
	color:#FFFFFF;
	padding:10px;
	text-align:center;
}
.outPutDateCtrl{
	width:180px !important;
	margin: 0 auto;
}
.outPutDateCtrl a{
	display:block;
	background-color:rgba(222, 238, 240, 1);
	text-align:center;
	width:60px;
	padding:10px 0;
	font-size:14px;
	border:1px solid #70a5ab;
	cursor:text;
	color:#70a5ab;
	text-decoration:none;
}
.outPutDateCtrl a.active{
	display:block;
	background-color:#ffffff;
	text-align:center;
	width:60px;
	padding:10px 0;
	font-size:14px;
	border:1px solid #70a5ab;
	cursor:pointer;
	color:#70a5ab;
}
.outPutDateCtrl a.active:hover{
	background-color:rgba(222, 238, 240, 1);
	color:#70a5ab;
}
.calendarWrap{
	background-color:#FFFFFF;
	padding:10px;
	overflow: hidden;
	box-sizing: border-box;
	color:#333;
	margin-top:20px;
}
.calendarWrap table{
	width:100%;
	text-align:center;
	font-size:14px;
}
.calendarWrap th,
.calendarWrap td{
	padding:5px 0;
}
.calendarWrap thead th span{
	display:block;
}
th.sat{
	color:#4384fb;
}
th.sun{
	color:#FF5722;
}
.calendarWrap thead th{
	text-align:center;
	border-bottom:1px solid #000000;
	border-right:1px dotted #bdbdbd;
}
.calendarWrap thead th:first-child{
	width:12.5%;
	white-space:nowrap;
}
.calendarWrap thead th:nth-child(n+2){
	width:12.5%;
}
.calendarWrap thead th:last-child{
	border-right:0px dotted #ffffff;
}
.calendarWrap tbody th,
.calendarWrap tbody td{
	text-align:center;
	border-bottom:1px solid #bdbdbd;
	border-right:1px dotted #bdbdbd;
}
@media screen and (max-width: 430px) {
	.calendarWrap tbody th{
		font-size:90%;
	}
}
@media screen and (max-width: 400px) {
	.calendarWrap thead th,
	.calendarWrap tbody th,
	.calendarWrap tbody td{
		font-size:85%;
	}
}

.calendarWrap tbody td:last-child{
	border-right:0px dotted #ffffff;
}
.calendarWrap tbody tr:last-child th,
.calendarWrap tbody tr:last-child td{
	border-bottom:0px solid #ffffff;
}
.calendarWrap a{
	display:block;
	color:#FF5722;
	font-size:20px;
	text-decoration:none;
}
.calendarWrap a:hover{
	color:#228fff;
}

/* reserveWizard4 */
.cutomerWrap{
	background-color:#FFFFFF;
	padding:10px;
}
#reserveWizard4 .subTitle{
	font-weight:bold;
	color:#887e7e;
	padding-bottom:10px;
	border-bottom:1px dotted #887e7e;
	text-align:center;
	margin-bottom:20px;
}
.checkReserveData .table {
	margin-top:10px;
	font-size:14px;
	border:1px solid #887e7e;
}
.checkReserveData .table .th,
.checkReserveData .table .td{
	padding:5px 10px;
}
.checkReserveData .table .th{
	width:110px;
}
.checkReserveData .table .th.custmerComment{
	white-space:initial;
	word-break:break-all
}
.checkReserveData .table .td{
	width:calc(100% - 110px);
	background-color:#FFFFFF;
}
.checkReserveData .table .td span{
	display:inline-block;
	position:relative;
	padding-right:10px;
}
.checkReserveData .table .td span:last-child{
	padding-right:0px;
}
.checkReserveData .table .td span:after{
	display:block;
	content:'|';
	position:absolute;
	top:0;
	right:2px;
	color:#999999;
}
.checkReserveData .table .td span:last-child:after{
	display:inline;
	content:'';
	position:static;
}
.checkReserveData .subTitle {
	text-align: center;
}
.checkCustomerData .floatWrap{
	width:95%;
	margin:0 auto;
	margin-top:10px;
	font-size:14px;
}
.checkCustomerData .floatWrap:after{
	display:block;
	content:'';
	clear:both;
}
.checkCustomerData .floatWrap > div{
	float:left;
}
.checkCustomerData .floatWrap > div:first-child{
	width:150px;
	line-height:240%;
}
.checkCustomerData .floatWrap > div:last-child{
	width:calc(100% - 150px);
	line-height:240%;
}
.checkCustomerData .floatWrap > div input{
	width:100%;
	font-size:14px;
	padding:2px;
}
.checkCustomerData .blockWrap > div textarea{
	width:100%;
	font-size:14px;
	padding:2px;
}
.checkCustomerData .blockWrap{
	width:95%;
	margin:0 auto;
	margin-top:10px;
	font-size:14px;
}
.checkCustomerData .checkFirst label{
	cursor:pointer;
}
.checkCustomerData .checkFirst label .table > div > div{
	vertical-align:middle;
	padding:0px;
}
.checkCustomerData .checkFirst label .table > div > div:first-child{
	width:30px;
	text-align:center;
}
.checkCustomerData .checkFirst label .table > div > div:last-child{
	width:calc(100% - 30px);
	padding-left:10px;;
}
#reserveTimeWizard3 input[type=checkbox],
#reserveWizard4 input[type=checkbox]{
	width:28px;
	height:28px;
	border:1px solid #000000;
	background-color:#FFFFFF;
	border-radius:50%;
	position:relative;
}
#reserveTimeWizard3 input[type=checkbox]:after,
#reserveWizard4 input[type=checkbox]:after{
	display:block;
	width:28px;
	height:28px;
	border:1px solid #a9a9a9;
	position:absolute;
	content:'';
	z-index:2;
	background-color:#FFFFFF;
}
#reserveTimeWizard3 input[type=checkbox]:checked:after,
#reserveWizard4 input[type=checkbox]:checked:after{
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
	content:'\f00c';
	z-index:3;
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
	font-size:30px;
	line-height:20px;
}
#reserveTimeWizard3 label,
#reserveWizard4 label{
	display:block;
	padding:3px 5px;
	margin-right:10px;
	line-height:1.4;
}

#reserveTimeWizard3 label:hover,
#reserveWizard4 label:hover{
	background-color:#f5d1d1;
	border-radius:4px;
}
#reserveTimeWizard3 label input[type=radio],
#reserveWizard4 label input[type=radio]{
	width:auto;
}

#reserveTimeWizard3 label input[type=radio],
#reserveWizard4 label input[type=radio]{
	width:auto;
}

#reserveTimeWizard3 .creditPayPer,
#reserveWizard4 .creditPayPer{
	 padding-left:25px;
	 line-height:100%;
	 margin-bottom:5px;
	 color:#666666;
}
#reserveTimeWizard3 .responsiveWrapComplete{
	padding-bottom: 10px;
}
.checkByelaw a{
	display:block;
	width:90%;
	margin:0 auto;
	text-align:center;
	border:1px solid #887e7e;
	color:#887e7e;
	padding:10px 0;
	border-radius:4px;
	background-color:#ece7e7;
}
.checkByelaw a:hover{
	border:1px solid #887e7e;
	color:#ffffff;
	background-color:#887e7e;
}
#reserveWizard4 .btnSubmitWrap,
#reserveTimeWizard3 .btnSubmitWrap{
	margin-top:10px;
}
#reserveWizard4 .btnSubmitWrap{
	padding:10px;
}
#reserveWizard4 .btnSubmitWrap a,
#reserveTimeWizard3 .btnSubmitWrap a{
	display:block;
	text-align:center;
	background-color: #ec4141;
	color:#FFFFFF;
	padding:10px 0;
	borde-radius:4;
}
#reserveWizard4 .btnSubmitWrap a:hover,
#reserveTimeWizard3 .btnSubmitWrap a:hover{
	background-color: #f5d1d1;
	color:#887e7e;
}

.noNominateBtn{
	text-align:center;
}
.noNominateBtn a{
	display: inline-block;
	background-color: #EC4141;
	color: #FFFFFF;
	padding: 10px 15px;
	border-radius: 4px;
	border: 1px solid #EC4141;
	line-height:1;
	text-decoration:none;
}
.noNominateBtn a:hover{
	display:inline-block;
	opacity:.4;
	padding:10px 15px;
	border-radius:4px;
	text-decoration:none;
}



#reserveWizard1 .startTimeAble{
	display:none;
}
#reserveTimeWizard1 .itemWorkTime{
	line-height:1;
}
#reserveTimeWizard1 .itemWorkTime i{
	vertical-align: middle;
	margin-top:-2px;
}
#reserveTimeWizard1 .attendanceIcon{
	display:none;
}
#reserveTimeWizard1 .scheduleIconWrap{
	display:inline-block;
	line-height:1;
}
[id^=reserveTimeWizard] .calendarWrap:after{
	display:block;
	content:'';
	clear:both;
}

[id^=reserveTimeWizard] .title{
	width:100%;
	text-align:center;
	border-bottom:1px solid #70a5ab;
	padding-bottom:10px;
	margin-bottom:10px;
	font-weight:bold;
}
#reserveTimeWizard1 .schedule{
	width:46%;
	float:left;
	margin-right:2%;
	margin-left:2%;
}
#reserveTimeWizard1 .scheduleWrap{
	overflow: hidden;
	display: flex;
	justify-content:center;
	position: relative;
	overflow: hidden;
	width: 200%;
	padding-top: 10px;
}
#reserveTimeWizard1 [data-calendernum="2"].scheduleWrap{
	width: 100%;
}
#reserveTimeWizard1 #loopCalender{
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
#reserveTimeWizard1 .scheduleWrap .calenderParentsWrap{
	width: 100%;
}
#reserveTimeWizard1 .schedule .calendar th {
	text-align: center;
}
#reserveTimeWizard1 [name=reserveTimeWizard1]{
	margin-top:10px;
	padding-top:10px;	
}
#formReserveWork .responsiveWrap{
	background-color:#FFFFFF;
	padding-top: 10px;
	padding-bottom: 40px;
}
#reserveWizard4 .inputWrap{
	margin-top:10px;
}
#reserveWizard4 .flexCol2 > div:nth-child(odd){
	width: 170px;
	text-align: right;
	padding-right: 50px;
	box-sizing: border-box;
}
#reserveWizard4 .flexCol2 > div:nth-child(even){
	width:calc(100% - 170px);
}
@media screen and (max-width: 640px) {
	#reserveWizard4 .flexCol2 > div:nth-child(odd){
		width:100%;
	}
	#reserveWizard4 .flexCol2 > div:nth-child(even){
		width:100%;
	}
}
#reserveWizard4 input{
	width:100%;
}
#reserveWizard4 textarea{
	min-width:100%;
	/*height:280px;*/
	display:block;
	box-sizing:border-box;
}



/*@media screen and (max-width: 768px){*/
@media screen and (max-width: 640px){
	#reserveTimeWizard1 .scheduleWrap{
		overflow: hidden;
		display: flex;
		justify-content:center;
		position: relative;
		overflow: hidden;
		width: 400%;
		padding-top: 10px;
	}
	#reserveTimeWizard1 .schedule{
		width: 96%;
		margin-right:2%;
		margin-left:2%;
	}
	.schedule{
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
		background-color:#FFFFFF;
	}
	/*
	.thisScheduleList.noActive{
		transform: translate(-110%, 0);
	}
	.thisScheduleList.ative{
		transform: translate(0, 0);
	
	}
	.nextScheduleList.noActive{
		transform: translate(10%, 0);
	}
	.nextScheduleList.active{
		transform: translate(-109%, 0);
	
	}
	*/
	#reserveTimeWizard1 #loopCalender .schedule .head div.pcBtn a,
	#reserveTimeWizard1 #loopCalender > div:first-child .head .spBtn.prevBtn,
	#reserveTimeWizard1 #loopCalender > div:last-child .head .spBtn.nextBtn{
		display:none;
	}
	.checkCustomerData .floatWrap > div:first-child,
	.checkCustomerData .floatWrap > div:last-child{
		width:100%;
		line-height:initial;
	}
}
#reserveTimeWizard1 .schedule .head{
	width:100%;
	text-align:center;
	position:relative;
	margin-bottom:20px;
}
#reserveTimeWizard1 .schedule .head span{
	font-size:16px;
}
#reserveTimeWizard1 .schedule .head div{
	position:absolute;
	top:-7px;
}
#reserveTimeWizard1 .schedule .head div.nextBtn{
	right:0px;
	background-color:#FFFFFF;
}
#reserveTimeWizard1 .schedule .head div a{
	border:1px solid #887e7e;
	width:40px;
	font-size:14px;
	padding-top:5px;
	padding-bottom:5px;
	border-radius:4px;
	background-color:#887e7e;
	color:#FFFFFF;
}
#reserveTimeWizard1 .schedule .head div a:hover{
	border:1px solid #887e7e;
	width:40px;
	font-size:14px;
	padding-top:5px;
	padding-bottom:5px;
	border-radius:4px;
	background-color:#FFFFFF;
	color:#887e7e;
}
@media screen and (min-width: 641px){
	/*
	#reserveTimeWizard1 .schedule .head div a{
		display:none;
	}
	*/
	#reserveTimeWizard1 .schedule .head div.spBtn a,
	#reserveTimeWizard1 .calenderParentsWrap:first-child > div:last-child .head > .pcBtn.prevBtn,
	#reserveTimeWizard1 .calenderParentsWrap:last-child > div:first-child .head > .pcBtn.nextBtn,
	#reserveTimeWizard1 [data-calenderevenodd=even] .calenderParentsWrap:last-child > div:last-child .head > .pcBtn.prevBtn,
	#reserveTimeWizard1 [data-calenderevenodd=even] .calenderParentsWrap:last-child > div:last-child .head > .pcBtn.nextBtn{
		display:none;
	}
}
table.calendar a{
	font-size:14px
}
table.calendar th{
	color:#333333;
}
table.calendar th:first-child{
	color:#FF0000;
}
table.calendar th:last-child{
	color:#0000FF;
	border-right:0px;
}
table.calendar tr th,
table.calendar tr td{
	background-color:#ffffff;
}

table.calendar tr th:first-child,
table.calendar tr td:first-child{
	background-color:#fff8f8;
}
table.calendar tr th:last-child,
table.calendar tr td:last-child{
	background-color:#f4f4ff;
}
table.calendar a.setNoDay{
	pointer-events:none;
	color:#AAAAAA;

}
table.calendar td.active{
	background-color:#ff5c5c !important;
}
table.calendar td.active a{
	color:#FFFFFF;
}
.startDayWrap {
	background-color: #FFFFFF;
	padding: 10px;
	margin-top:20px;
	box-sizing: border-box;
}
.startDayWrap .information{
	padding: 5px;
	margin-bottom:10px;
	text-align:center;
}
.starTimeWrap {
	/*width:330px;*/
	margin:0 auto;
	text-align:center;
}
.startDayWrap .starTimeWrap > div{
	/*float:left;*/
	display:inline-block;
	margin-top:3px;
	margin-bottom:3px;
}
.startDayWrap .starTimeWrap > div:nth-child(2){
	padding-top:8px
}
.startDayWrap .starTimeWrap > div > span{
	display:inline-block;
}
.course,
.travelCost,
.nominate{
	background-color: #FFFFFF;
	padding: 10px;
	margin-top:20px;
	box-sizing:border-box;
}
/*#reserveTimeWizard1 .itemListWrap .itemWrap.active{*/
.itemListWrap .itemWrap.active{
	background-color:#ffe4e4;
}
.itemListWrap .multiCourseLabel  .itemWrap.active{
	background-color:#fff;
}
/*#reserveTimeWizard1 .itemListWrap .itemWrap.active a{*/
.itemListWrap:not(.course) .itemWrap.active a{
	/*background-color:#d2d0d0;*/
	opacity:.4;
	pointer-events:none;
}

.option{
	background-color: #FFFFFF;
	padding: 10px;
	margin-top:20px
}
.option label{
	display:inline-block;
	margin-right:15px;
	font-size:14px;
}
.btnModalOpen{
	text-align:center;
	padding-top:5px;
	padding-bottom:10px;
	margin-bottom:10px;
}
.btnModalOpen a{
	background-color:#41add2;
	padding:3px 10px;
	border-radius:4px;
	color:#FFFFFF;
	border:1px solid #1b7b9c;
	box-shadow:1px 1px 1px #1b7b9c;
}
.btnModalOpen a:hover{
	background-color:#c6e9f5;
	color:#1b7b9c;
}

.modal__content .anchor a {
    display: inline-block;
    padding: 8px 10px;
    border: 1px solid #EC4141;
    background-color: #EC4141;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 14px;
	line-height:1;
	box-sizing:border-box;
	text-decoration:none;
}
#reserveTimeWizard1 .modal__content .anchor a:hover ,
#reserveWizard2 .modal__content .anchor a:hover {
	opacity:.4;
	text-decoration:none;
}
.searchResultItemWrap > div{
	display:none;
}
.btnReturnTopWrap{
	position:fixed;
	bottom:100px;
	right:10px;
	z-index:5;
}
.btnReturnTopWrap a{
	font-size:40px;
	color:#887e7e;
}
.btnReturnTopWrap a:hover{
	color:#d4cccc;
}

#reserveWizard1 .timeWizard {
	display:none;
}
#reserveTimeWizard1 .wizard {
	display:none;
}

#reserveTimeWizard1 .shopMessageWarp,
#reserveTimeWizard2 .shopMessageWarp{
	padding-bottom:20px;
}
.searchResultItemWrap .information{
	text-align:center;
}
.table > div > div {
    vertical-align: top;
    padding: 10px;
}
#reserveTimeWizard1 .noNominateBtn{
	padding-top:10px;
	padding-bottom:10px;
}
#reserveTimeWizard2 .table .th{
	width: 110px;
}
#reserveTimeWizard2 .head dd:after{
	display: none;
	content: "";
	clear: both;
}
#reserveTimeWizard2 .schedule.reserveInfo {
	font-size: 14px;
}
#reserveTimeWizard2 .schedule.reserveInfo .th,
#reserveTimeWizard2 .schedule.reserveInfo .td{
	padding:5px 10px;
}

.reserveTellWrap ,
.reserveTimeTableWrap {
	padding: 10px;
	background-color: #FFFFFF;
}
table.reserveTimeTable {
	width:100%;
	background-color:#FFFFFF;
	color:#333;
}
table.reserveTimeTable tr:nth-child(2n) th,
table.reserveTimeTable tr:nth-child(2n) td{
	background-color:#fff8f8;
}
table.reserveTimeTable th,
table.reserveTimeTable td{
	padding:10px 0px;
	border-bottom:1px solid #DDDDDD;
	border-right:1px solid #EEEEEE;
	text-align: center;
}
table.reserveTimeTable tr:last-child th,
table.reserveTimeTable tr:last-child  td{
	border-bottom:0px solid #DDDDDD;
}
table.reserveTimeTable tr th:last-child,
table.reserveTimeTable tr td:last-child{
	border-right:0px solid #DDDDDD;
}

table.reserveTimeTable tr:nth-child(n + 2) th{
	width:50px;
}
table.reserveTimeTable td{
	text-align:center;
	width:calc(100% - 50px);
}
table.reserveTimeTable tr td a{
	background-color:#ff9400;
	color:#FFFFFF;
	padding:3px 10px;
	border-radius:4px;
	text-decoration:none;
}
table.reserveTimeTable tr td a:hover{
	background-color:#fbc67c;
	color:#bb7900;
}
@media screen and (max-width: 760px){
	table.reserveTimeTable th,
	table.reserveTimeTable td{
		padding:0px;
	}
	table.reserveTimeTable tr:nth-child(n + 2) th{
		width:30px;
	}
	table.reserveTimeTable td{
		width:calc(100% - 30px);
	}
	table.reserveTimeTable td a{
		padding:3px 5px;
		font-size:12px;
		display:inline-block;
		white-space:nowrap;
		margin-top:5px;
		margin-bottom:5px;
	}
}
.notice {
	margin-top:20px;
	font-size:14px;
	text-align:center;
}
.notice a{
	display:inline-block;
	margin-top:10px;
	padding:10px 10px;
	background-color:#e66f6f;
	color:#FFFFFF;
	border-radius:4px;
	width:80%;
	font-size:16px;
}
.notice a:hover{
	background-color:#ffaaaa;
}
.itemListWrap .itemWrap.noItem{
	text-align:center;
	width:100%;
	padding:10px ;
}

#reserveTimeWizard1 .reserveStepWrap ul,
#reserveTimeWizard2 .reserveStepWrap ul,
#reserveTimeWizard3 .reserveStepWrap ul,
#reserveTimeWizard4 .reserveStepWrap ul {
    width: 125px;
}
#reserveTimeWizard1 .reserveStepWrap li:last-child,
#reserveTimeWizard2 .reserveStepWrap li:last-child,
#reserveTimeWizard3 .reserveStepWrap li:last-child,
#reserveTimeWizard4 .reserveStepWrap li:last-child{
	display:none;
}

/*現在の予約時間*/
.calendarWrap td.now{
	pointer-events:none;
	background-color:#FF5722;
}
.calendarWrap a.now{
	pointer-events:none;
	color:#ffffff;
}

/* 利用規約 */
input.disabled:after{
	background-color:#CCCCCC !important;
}
a.disabled{
	pointer-events:none;
	background-color:#CCCCCC !important;
}
.noticeTerm {
	margin-top: 5px;
	display: block;
	font-size: 14px;
	color: #454545;
}
[name=termText]{
	height:120px;
	resize: none;
}
.termTextWrap{
	position:relative;
}
.termTextWrap span{
	display:none;
}
.termTextWrap.isScroll1 span:last-child{
	display:block;
	text-align:center;
	background-color:#ece7e7;
	color:#FFFFFF;
	margin-top:-1px;
}
.termTextWrap.isScroll0 span:first-child{
	display:block;
	text-align:center;
	background-color:#ece7e7;
	color:#FFFFFF;
	margin-bottom:-1px;
}
.js-modalInquiry .bodyInquiry > div{
	margin:5px 0;
}
.js-modalInquiry a{
	color:#FF5722;
}
.js-modalInquiry a:hover{
	color:#228fff;
}


@media screen and (min-width:981px) {
	.spBr{
		display:none;
	}
}
@media screen and (max-width:980px) {
	.spBr{
		display:inline-block;
	}
}

.btnBackWrap {
	left:0;
	background-color:#FFF;
	width:100%;
	padding:5px;
	border-bottom:1px solid #70a5ab;
	z-index:105;
	box-sizing:border-box;
}
.btnBackWrap.fixed {
	position:fixed;
	top:35px;
}
@media screen and (max-width:640px) {
	.btnBackWrap.fixed {
		top:35px;
	}
}
.btnBackWrap .responsiveWrap{
	position:relative;
	margin:0 auto;
	width:1200px;
	text-align:left;
}
.btnBackWrap a {
	display: inline-block;
	border: 1px solid #FFFFFF;
	padding: 8px 15px;
	border-radius: 4px;
	font-size: 14px;
	background-color: #EC4141;
	color: #FFFFFF;
	line-height: 1;
	text-decoration: none;
}
.btnBackWrap a:hover{
	text-decoration:none;
	opacity:.4;
}

@media screen and (max-width:640px) {
	.btnBackWrap .responsiveWrap{
		width:95%;
	}
}

/*-- step -----------------------------*/
.table.step{
	width:160px !important;
	margin:10px auto -10px auto;
	box-sizing:border-box;
}
.table.step .th,
.table.step .td{
	padding:3px;
	box-sizing:border-box;
	line-height:100%;
	vertical-align:middle;
}
.table.step .th{
	border: 1px solid #70a5ab;
	background-color: #70a5ab;
	color: #FFFFFF;
}
.table.step .td{
	width:20px;
	height:20px;
	font-size:16px;
	border: 0px solid #70a5ab;
	background-color: #FFFFFF;
	color: #70a5ab;
}
.table.step .td.active {
	width:30px;
}
.table.step .td.active > div{
	position:relative;
}
.table.step .td.active > div > span{
	position:absolute;
	font-size:22px;
	bottom:-8px;
	left:0;
	right:0;
}


.formError {
	margin: 10px 0;
	background: #FFF;
	padding: 10px;
	box-sizing: border-box;
	color: #FF0000;
	border: 1px solid #FF0000;
}
.formComplate {
	margin: 10px 0;
	background: #FFF;
	padding: 10px;
	box-sizing: border-box;
	color: #03a9f4;
	border: 1px solid #03a9f4;
}
.required{
	position:relative;
}
.required:after{
	display:inline-block;
	position:absolute;
	content:'必須';
	width:38px;
	height:16px;
	color:#FFFFFF;
	background-color:#FF0000;
	border:1px solid #FF0000;
	font-size:11px;
	text-align:center;
	line-height:150%;
	top: 1px;
	left:3px;
	border-radius:4px;
}
.itemListWrap.checkReserveData {
	margin-top: 20px;
}
#reserveWizard4 form.complate .flexCol2 > div:nth-child(odd){
	color:#939393;
}

@media screen and (max-width:640px) {
	.table.step{
		margin:3px auto;
	}
	#reserveWizard4 .flexCol2 > div:nth-child(odd){
		text-align:left;
	}
	.flexWrap > div{
		margin-bottom:5px;
	}
}


/* tabs ----------------------------------*/
/*タブ切り替え全体のスタイル*/
.tabs {
	background-color: #b9aea4;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 100%;
	margin: 0px auto 0 auto;
	overflow:hidden;
	counter-reset: listCounter;
}

/*タブのスタイル*/
.tab_item {
	height: 50px;
	border-bottom: 3px solid #b9aea4;
	background-color: #FFFFFF;
	line-height: 50px;
	font-size: 16px;
	text-align: center;
	color: #454545;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	position:relative;
}
.tabs input + .tab_item:before,
.tabs input + .tab_item:after{
	position:absolute;
	display:block;
	content:'';
	width: 0;
	height: 0;
	top:0;
	border-style: solid;
}
.tabs input + .tab_item:before{
	right:-26px;
	z-index:1;
	top:1;
	border-width: 25px 0 25px 25px;
	border-color: transparent transparent transparent #FFFFFF;
}
.tabs input + .tab_item:after{
	right:-24px;
	z-index:2;
	border-width: 25px 0 25px 25px;
	border-color: transparent transparent transparent #FFFFFF;
}
.tabs input:checked + .tab_item:before{
	border-color: transparent transparent transparent #FFFFFF;
	z-index:1;
}
.tabs input:checked + .tab_item:after{
	border-color: transparent transparent transparent #b9aea4;
	z-index:1;
}

.tab_item:hover {
	background-color:#e6e6e6;
}
.tabs input + .tab_item:hover:after{
	border-color: transparent transparent transparent #e6e6e6;
}
.tabs input:checked + .tab_item:hover {
	background-color:#d6d1cd;
}
.tabs input:checked + .tab_item:hover:after {
	border-color: transparent transparent transparent #d6d1cd;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 0;
	clear: both;
	background-color:#FFFFFF;
	position:relative;
}
.tab_content .upBtnWrap,
.tab_content .bottomBtnWrap{
	position:absolute;
	width:100%;;
}
.tab_content .bottomBtnWrap{
	bottom:0;
}
.tab_content .itemListWrap ,
.tab_content .playList {
	overflow: hidden;
	/*min-height: 300px;*/
	max-height: 50vh;
	overflow-y: auto;
	margin-top:20px;
}
/*選択されているタブのコンテンツのみを表示*/
#tabs_travelCost:checked ~ #tabs_travelCost_contents,
#tabs_nominate:checked ~ #tabs_nominate_contents ,
#tabs_optionPlay:checked ~ #tabs_optionPlay_contents {
	display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
	background-color: #b9aea4;
	color: #fff;
	pointer-events:none;
}
/*オプションプレイがない時、タブを非表示*/
.tabs.freeOptionPlayNull.basicPlayNull.optionPlayNull label[for=tabs_optionPlay]{
	display:none;
}
.tabs.basicPlayNull > #tabs_optionPlay_contents .playWrap.basicPlayList{
	display:none;
}
.tabs.freeOptionPlayNull > #tabs_optionPlay_contents .playWrap.freeOptionPlayList{
	display:none;
}
.tabs.optionPlayNull > #tabs_optionPlay_contents .playWrap.optionPlayList{
	display:none;
}
.tabs.freeOptionPlayNull.basicPlayNull.optionPlayNull ~.footer.anchor label[for=tabs_optionPlay]{
	display:none;
}

/*オプションのnullをチェックするclassがある時、modal body を非表示*/
#reserveTimeWizard1 .tabs.basicPlayNull #tabs_optionPlay_contents .playListWrap .playWrap:nth-child(1){
	display:none;
}
#reserveTimeWizard1 .tabs.freeOptionPlayNull #tabs_optionPlay_contents .playListWrap .playWrap:nth-child(2){
	display:none;
}
#reserveTimeWizard1 .tabs.optionPlayNull #tabs_optionPlay_contents .playListWrap .playWrap:nth-child(3){
	display:none;
}

/*タブ横幅*/
.tab_item {
	width: calc(100% / 3);
}
.tabs.freeOptionPlayNull.basicPlayNull.optionPlayNull .tab_item ,
.tabs.travelCostNull .tab_item ,
.tabs.reserveNominateNull .tab_item {
    width:calc(100% / 2);
}
.tabs.freeOptionPlayNull.basicPlayNull.optionPlayNull.travelCostNull .tab_item ,
.tabs.freeOptionPlayNull.basicPlayNull.optionPlayNull.reserveNominateNull .tab_item ,
.tabs.travelCostNull.reserveNominateNull .tab_item {
    width:calc(100% / 1);
}

/*#reserveTimeWizard1 .modal__content .setNull .anchor a {*/
.modal__content .setNull .anchor a {
    display:block;
    width:100%;
    height:100%;
    line-height:62px;
    box-sizing:border-box;
}
/*#reserveTimeWizard1 .modal__content .setNull.active .anchor a {*/
.modal__content .setNull.active .anchor a {
	background-color: #ffe4e4;
	border:1px solid #ffe4e4;
	color:#000000;
}
.tabs span.subTitle {
	padding: 10px 20px;
	border-bottom: 1px solid #887e7e;
	color: #887e7e;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	.tabs input + .tab_item:before{
		right:-16px;
		border-width: 25px 0 25px 16px;
	}
	.tabs input + .tab_item:after{
		right:-14px;
		border-width: 25px 0 25px 15px;
	}
	.tab_item span {
		font-size: 14px;
		width: calc(100% - 20px);
		text-align: left;
		padding-left: 20px;
		counter-increment: listCounter;
		position:relative;
	}
	.tab_item span:after {
		display:inline-block;
		content:counter(listCounter);
	}
	.tabs span.subTitle {
		display: block;
	}
}
.upBtnWrap,
.bottomBtnWrap {
	display: block;
	text-align: center;
	background: #EEEEEE;
	display: none;
	animation:blinkUpBottomBtnWrap 0.8s ease-in-out infinite alternate;
}
@keyframes blinkUpBottomBtnWrap{
	0% {opacity:1;}
	20% {opacity:1;}
	100% {opacity:0;}
}
.annotation{
	color:#FF0000;
}
.annotation span{
	font-weight: bold;
}
input[name=reserveFreeSelect1Value],
select[name=reserveFreeSelect1Value]{
	width:100%;
}

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
.attentionMessage{
	color:#FF0000;
	line-height:130%;
}
[name=reserveTimeWizard3],
[name=reserveWizard4]{
	background-color:#FFFFFF;
}

#reserveWizard5 .table > div:nth-last-child(n+2) .th {
	border-bottom: 1px solid #FFFFFF;
}
.calendarWrap .td.option span:not(:last-child)::after {
	display: inline;
	content: "|";
	padding-left: 3px;
}

#reserveWizard3 #contents{
	padding-bottom:5px;
}
.iconNotice {
	display:block;
	position:sticky;
	bottom:40px;
	padding:10px;
	background-color:#FFF;
	margin-top:10px;
	border:2px solid #e42f2f;
	border-radius:4px;
	font-size:14px;
	width:calc(100%);
	line-height:1;
	box-sizing:border-box;
}
.iconNotice .flexBpx{
	display:flex;
	gap: 5px 15px;
	align-items:center;
	flex-wrap:wrap;
}
.iconNotice .iconColor{
	color:#FF5722;
}
.iconNotice .icon{
	font-size:18px;
	vertical-align:middle;
	display:inline-flex;
	align-items:center;
}
.iconNotice .icon + span:before{
	color:#000;
	font-size:14px;
	content:'：';
}
.iconNotice dd:not(last-child){
	margin-right:10px;
}
@media screen and (max-width:640px){
	.iconNotice {
		font-size:14px;
		padding:7px;
		width:calc(100% - 90px);
	}
}

#reserveWizard2 .itemListWrap.course label.multiCourseLabel,
#reserveTimeWizard1 .itemListWrap.course label.multiCourseLabel{
	cursor:pointer;
}
#reserveWizard2 .itemListWrap label.multiCourseLabel .itemWrap,
#reserveTimeWizard1 .itemListWrap label.multiCourseLabel .itemWrap{
	transition:0.3s;
}
#reserveWizard2 .itemListWrap label.multiCourseLabel:hover .itemWrap,
#reserveTimeWizard1 .itemListWrap label.multiCourseLabel:hover .itemWrap{
	background-color:#d6e8ec;
}
#reserveWizard2 .courseCheckBox,
#reserveTimeWizard1 .courseCheckBox{
	align-content:center;
}
#reserveWizard2 [name="courseIdArray[]"],
#reserveTimeWizard1 [name="tmpCourseIdArray[]"]{
	display:none;
}
#reserveWizard2 [name="courseIdArray[]"] + label,
#reserveTimeWizard1 [name="tmpCourseIdArray[]"] + label{
	position:relative;
	display:block;
	width:30px;
	height:30px;
	border:1px solid #AAA;
	background-color:#CCC;
	border-radius:3px;
	transition:0.3s;
	box-sizing:border-box;
}
#reserveWizard2 [name="courseIdArray[]"] + label:before,
#reserveWizard2 [name="courseIdArray[]"] + label:after,
#reserveTimeWizard1 [name="tmpCourseIdArray[]"] + label:before,
#reserveTimeWizard1 [name="tmpCourseIdArray[]"] + label:after{
	position:absolute;
	display:block;
	content:'';
	width:20px;
	height:12px;
	border-left:2px solid #EFEFEF;
	border-bottom:2px solid #EFEFEF;
	transform:rotate(-55deg);
	transition:0.3s;
	margin:auto;
	top:0;
	bottom:7px;
	left:0;
	right:0;
}
#reserveWizard2 [name="courseIdArray[]"]:checked + label,
#reserveTimeWizard1 [name="tmpCourseIdArray[]"]:checked + label{
	background-color:#316dff;
}
#reserveWizard2 [name="courseIdArray[]"]:checked + label:before,
#reserveWizard2 [name="courseIdArray[]"]:checked + label:after,
#reserveTimeWizard1 [name="tmpCourseIdArray[]"]:checked + label:before,
#reserveTimeWizard1 [name="tmpCourseIdArray[]"]:checked + label:after{
	border-left:2px solid #ffffff;
	border-bottom:2px solid #ffffff;
	transform:rotate(-45deg);
}
#reserveWizard2 .courseIdArraySubmit.pointerEventsNone,
#reserveTimeWizard1 .courseIdArraySubmit.pointerEventsNone{
	background-color:#AAA;
	border-color:#AAA;
}
#reserveWizard2 .courseIdArraySubmit.pointerEventsNone:before,
#reserveTimeWizard1 .courseIdArraySubmit.pointerEventsNone:before{
	content:'コースを1つ以上、選択してください';
}
#reserveWizard2 .courseIdArraySubmit ,
#reserveTimeWizard1 .courseIdArraySubmit {
	display:block;
	width:80%;
	clear: both;
	margin:0 auto;
	border-radius:4px;
	padding:10px;
	text-align:center;
	text-decoration:none;
	transition: 0.3s;
}
#reserveWizard2 .courseIdArraySubmit:before,
#reserveTimeWizard1 .courseIdArraySubmit:before {
	content:'次へ';
}
#reserveWizard2 .btnSubmitWrap {
	position:sticky;
	bottom:40px;
	clear:both;
	width:100%;
	background-color:rgba(255,255,255,.6);
	border-top:3px solid rgba(0,0,0,.4);
	padding-top:5px;
}
@media screen and (max-width:640px){
	#reserveWizard2 .courseIdArraySubmit{
		font-size:15px;
		width:85%;
		box-sizing:border-box;
	}
}
@media screen and (max-width:380px){
	#reserveWizard2 .courseIdArraySubmit{
		font-size:13.3px;
	}
}