.col2{
display:flex;
flex-wrap:wrap;
}

.col2 .col_left{
width:calc(100% - 350px);
}
.col2 .col_right{
	width:350px;
	box-sizing:border-box;
	padding-left:30px;
}
.reservebox{
background-color:#EFEFEF;
border:solid 1px #999999;
padding:20px;
border-radius:5px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
font-size:18px;
position:relative;
color:#333333;
z-index:50;
}
.reservebox.reserve_monthly .calcrow,
.reservebox.reserve_monthly .reservebox_form,
.reservebox.reserve_monthly .reservebox_price{
display:none;
}
.reservebox_monthlytext{
font-size:80%;
display:none;
}
.reservebox.reserve_monthly .reservebox_monthlytext{
display:block;
}
.reservebox_price{
	margin-bottom:20px;

}
.reservebox_price .bold{
font-weight:700;
font-size:140%;
margin-right:5px;
}



.reservebox_form_row{
	display:flex;
	flex-wrap:wrap;
}
.reservebox_checkin{
	font-size:100%;
	width:50%;
	box-sizing:border-box;
	border:solid 1px #8e0013;
	border-radius:40px 0px 0 40px;
	padding:10px;
	font-weight:400;
		cursor:pointer;
}
.reservebox_checkinout_label{
	display:flex;
	flex-wrap:wrap;
	margin-bottom:2px;
	width:100%;
}
.reservebox_checkinout_label .label{
	font-size:60%;
	font-weight:700;
	display:block;
	width:50%;
	text-align:center;
}

.reservebox_checkout{
	font-size:100%;
	width:50%;
	box-sizing:border-box;
	border-right:solid 1px #8e0013;
	border-top:solid 1px #8e0013;
	border-bottom:solid 1px #8e0013;
	border-radius:0px 40px 40px 0px;
	padding:10px;
	font-weight:400;
	cursor:pointer;
	
}

.reservebox_checkout_form,
.reservebox_checkin_form{
	font-weight:400;
	text-align:center;
}

.reservebox_nop{
	padding:0px;
	margin-top:20px;
}
.reservebox_nop > .label{
	font-size:60%;
	font-weight:700;
	display:block;
	margin-bottom:7px;
}
.reservebox_nop_inr{
	display:flex;
	flex-wrap:wrap;
	
}
.form_nop_pet,
.form_nop_baby,
.form_nop_child,
.form_nop_adult{
	font-size:100%;
	width:50%;
	box-sizing:border-box;
	padding:10px;
	font-weight:400;
	cursor:pointer;
	text-align:center;
}
.form_nop_adult{
	border-radius:20px 0px 0px 0px;
	border-top:solid 1px #8e0013;
	border-left:solid 1px #8e0013;
	border-right:solid 1px #8e0013;
}
.form_nop_child{
	border-radius:0px 20px 0px 0px;
	border-top:solid 1px #8e0013;
	border-right:solid 1px #8e0013;
}
.form_nop_baby{
	border-radius:0px 0px 0px 20px;
	border-bottom:solid 1px #8e0013;
	border-left:solid 1px #8e0013;
	border-right:solid 1px #8e0013;
}


.form_nop_pet{
	border-radius:0px 0px 20px 0px;
	border-bottom:solid 1px #8e0013;
	border-right:solid 1px #8e0013;
}



.form_nop_pet .label,
.form_nop_baby .label,
.form_nop_child .label,
.form_nop_adult .label{
	font-size:60%;
	font-weight:700;
	display:inline-block;
	width:40px;
}
.form_nop_pet .vlabel,
.form_nop_baby .vlabel,
.form_nop_child .vlabel,
.form_nop_adult .vlabel{
	font-size:60%;
	margin-left:5px;
}


.reservebox .btn{
	display:block;
	padding:10px;
	text-align:center;
	color:#FFFFFF;
	/*
	background: radial-gradient(circle at 10% 20%, rgb(0, 93, 133) 0%, rgb(0, 181, 149) 90%);
	*/
	background-color:#8e0013;
	font-size:80%;
	border-radius:5px;
	margin-top:15px;
}
.reservebox_reservetype{
	margin:0px;
	padding:0px 0px 10px;
	list-style-type:none;
	display:flex;
	flex-wrap:wrap;
	font-size:80%;
	
}
.reservebox_reservetype li{
	width:50%;
	margin:0px;
	padding:0px;
}



.litemodal_checkinout_datepicker{
display:none;
background-color:#FFFFFF;
border:solid 1px #999999;
padding:20px;
border-radius:5px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
position:absolute;
top:0%;
left:auto;
right:0%;
width:600px;
box-sizing:border-box;
}

.litemodal_checkinout_datepicker_inr{
flex-wrap:wrap;
display:flex;
width:100%;
}
#checkinout_datepicker{
	width:100%;
	box-sizing:border-box;
	font-size:80%;
}

#calendar_monthly .ui-datepicker-calendar,
.litemodal_checkinout_datepicker .ui-datepicker-calendar{
	border-collapse:collapse;
}
#calendar_monthly .ui-datepicker-calendar td,
.litemodal_checkinout_datepicker .ui-datepicker-calendar td{
	position:relative;
	box-sizing:border-box;
	text-align:center;
}

.litemodal_checkinout_datepicker .ui-datepicker-calendar td:before{
	position:relative;
	content:"";
	display:block;
	width:100%;
	padding-top:100%;

}
#calendar_monthly .ui-datepicker-calendar td:before{

	position:relative;
	content:"";
	display:block;
	width:100%;
	padding-top:65%;

}
#calendar_monthly .ui-datepicker-calendar td.ui-datepicker-unselectable:before{
display:none !important;
}

#calendar_monthly_wrap{
	position:absolute;
	bottom:0%;
	transform:translate(0%,-100%);
	background-color:#FFFFFF;
	padding:50px 15px 15px;
	border:solid 1px #666666;
	display:none;
	z-index:1001;
}
.btn_open_calendar_monthly{
background-color:#8e0013;
color:#FFFFFF;
padding:3px 10px;
display:inline-block;
margin-top:5px;
font-size:75%;

}

.btn_close_calendar_monthly{
position:absolute;
top:10px;
right:10px;
color:#FFFFFF;
background-color:#000000;
border-radius:5px;
z-index:30;
font-size:75%;
padding:3px 10px;
}
#calendar_monthly{
position:static;
}
#exn_v_monthly_startdate{
display:block;
}


#calendar_monthly .ui-datepicker-calendar td a,
.litemodal_checkinout_datepicker .ui-datepicker-calendar td a{
	background-color:transparent;
	background-image:none;
	text-align:center;
	border:none;
	border-radius:50px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:80%;
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
}
#calendar_monthly .ui-datepicker-calendar td a:before,
.litemodal_checkinout_datepicker .ui-datepicker-calendar td a:before{
	content:"";
	display:none;
	width:100%;
	padding-top:100%;
	border-radius:50px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:-1;
}
#calendar_monthly .ui-datepicker-calendar td.ui-datepicker-current-day a,
.litemodal_checkinout_datepicker .ui-datepicker-calendar td a.selected{
	color:#FFFFFF;
}

#calendar_monthly .ui-datepicker-calendar td.ui-datepicker-current-day a:before,
.litemodal_checkinout_datepicker .ui-datepicker-calendar td a.selected:before{
	background-color:#000000;
	color:#FFFFFF;
	display:block;
	
}


.litemodal_checkinout_datepicker .ui-datepicker-calendar td a.intermediate{

	color:#000000;
}

.litemodal_checkinout_datepicker .ui-datepicker-calendar td a.intermediate:before{
	background-color:#DDDDDD;
	color:#000000;
	display:block;
}

#calendar_monthly .ui-widget-header,
.litemodal_checkinout_datepicker .ui-widget-header{
	background-color:#FFFFFF;
	background-image:none;
	border:none;
}
#calendar_monthly .ui-widget.ui-widget-content,
.litemodal_checkinout_datepicker .ui-widget.ui-widget-content{
	border:none;
}
#calendar_monthly .ui-datepicker-prev span.ui-icon,
.litemodal_checkinout_datepicker .ui-datepicker-prev span.ui-icon{
	background-image:none;
}
#calendar_monthly .ui-widget-header .ui-datepicker-prev.ui-state-hover,
.litemodal_checkinout_datepicker .ui-widget-header .ui-datepicker-prev.ui-state-hover{
	background-image:none;
	border:none;
	background-color:#ffffff;
	top:0%;
	left:1px;
}
#calendar_monthly .ui-datepicker-prev,
.litemodal_checkinout_datepicker .ui-datepicker-prev{
	overflow:hidden;
	top:0%;
	left:1px;
	cursor:pointer;
}
#calendar_monthly .ui-datepicker-prev:before,
.litemodal_checkinout_datepicker .ui-datepicker-prev:before{
content:"";
display:block;
height:1px;
width:70%;
position:absolute;
top:50%;
left:0%;
background-color:#000000;
transform:translate(-50%,-50%) rotate(-45deg);
}
#calendar_monthly .ui-datepicker-prev:after,
.litemodal_checkinout_datepicker .ui-datepicker-prev:after{
content:"";
display:block;
height:1px;
width:70%;
position:absolute;
top:50%;
left:0%;
background-color:#000000;
transform:translate(-50%,-50%) rotate(45deg);
}

#calendar_monthly .ui-datepicker-next span.ui-icon,
.litemodal_checkinout_datepicker .ui-datepicker-next span.ui-icon{
	background-image:none;
}
#calendar_monthly .ui-datepicker-next,
.litemodal_checkinout_datepicker .ui-datepicker-next{
	overflow:hidden;
	top:0%;
	right:0%;
	cursor:pointer;
}

#calendar_monthly .ui-widget-header .ui-datepicker-next.ui-datepicker-next-hover,
#calendar_monthly .ui-widget-header .ui-datepicker-next.ui-state-hover,
.litemodal_checkinout_datepicker .ui-widget-header .ui-datepicker-next.ui-datepicker-next-hover,
.litemodal_checkinout_datepicker .ui-widget-header .ui-datepicker-next.ui-state-hover{
	background-image:none;
	border:none;
	background-color:#ffffff;
	top:0%;
	right:0% !important;
}
#calendar_monthly .ui-datepicker-next:before,
.litemodal_checkinout_datepicker .ui-datepicker-next:before{
content:"";
display:block;
height:1px;
width:70%;
position:absolute;
top:50%;
right:1px;
background-color:#000000;
transform:translate(50%,-50%) rotate(-45deg);
}
#calendar_monthly .ui-datepicker-next:after,
.litemodal_checkinout_datepicker .ui-datepicker-next:after{
content:"";
display:block;
height:1px;
width:70%;
position:absolute;
top:50%;
right:1px;
background-color:#000000;
transform:translate(50%,-50%) rotate(45deg);
}
#calendar_monthly{
font-size:80%;
}

#checkinout_row{
	display:flex;
	flex-wrap:wrap;
	width:100%;
}
.checkinout_row_left{
	width:50%;
	padding:10px;
	box-sizing:border-box;
}
.checkinout_row_right{
	width:50%;
	padding:10px;
	box-sizing:border-box;
}

.checkinout_stay{
font-weight:700;
font-size:120%;
margin-bottom:7px;
}
.checkinout_span{
	color:#CCCCCC;
	font-size:75%;
}

.checkinoutwrap{
	display:flex;
	flex-wrap:wrap;
}
.checkinoutwrap .modal_checkin{
	border:solid 1px #8e0013;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
	width:50%;
	box-sizing:border-box;
	padding:10px;
}
.checkinoutwrap .modal_checkout{
	border-top:solid 1px #8e0013;
	border-right:solid 1px #8e0013;
	border-bottom:solid 1px #8e0013;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
	width:50%;
	box-sizing:border-box;
	padding:10px;
}
.checkinoutwrap .modal_checkin .label,
.checkinoutwrap .modal_checkout .label{
	font-size:60%;
	display:block;
	margin-bottom:7px;
}
.checkinoutwrap .modal_checkin .v,
.checkinoutwrap .modal_checkout .v{
	font-size:80%;

	display:block;
}

#checkinout_bottom{
padding-top:20px;
	text-align:right;
	width:100%;
}
#checkinout_bottom .btn_close{
	display:inline-block;
	text-decoration:none;
	background-color:#000000;
	border-radius:10px;
	padding:15px 20px; 
	line-height:100%;
	color:#FFFFFF;
	font-size:80%;
}
.calcrow{
padding-top:20px;
font-size:70%;
}
.calcrow table{
	border-collapse:collapse;
}
.calcrow table td{
	padding:5px;
}



.litemodal_nop{
display:none;
background-color:#FFFFFF;
border:solid 1px #999999;
padding:20px;
border-radius:5px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
position:absolute;
top:0%;
left:auto;
right:0%;
width:600px;
box-sizing:border-box;
}

.nop_baby,
.nop_pet,
.nop_child,
.nop_adult{
	display:flex;
	flex-wrap:wrap;
	padding-top:0px;
	padding-bottom:25px;
	width:100%;
}

.nop_pet .label,
.nop_baby .label,
.nop_child .label,
.nop_adult .label{
	display:block;
	position:relative;
	line-height:100%;
	width:70%;
	text-align:left;
	display:flex;
	align-items:center;
	
}
.nop_pet .label .text,
.nop_baby .label .text,
.nop_child .label .text,
.nop_adult .label .text{
	font-size:90%;
	display:block;
	clear:both;
	text-align:left;
}
.nop_baby .label .sub,
.nop_child .label .sub,
.nop_pet .label .sub,
.nop_adult .label .sub{
position:absolute;
left:0%;
top:auto;
bottom:0%;
transform:translate(0%,50%);
	font-size:70%;
	display:block;
	clear:both;
	text-align:left;
	
}



ul.ctr_num{
	display:flex;
	width:30%;
	margin:0px;
	padding:0px;
	list-style-type:none;
}
ul.ctr_num li{
	margin:0px;
	padding:0px;
	width:33.33%;
	display:flex;
	line-height:100%;
	justify-content:center;
	align-items:center;
}
ul.ctr_num li a{
	display:flex;
	position:relative;
	width:40px;
	border-radius:50%;
	border:solid 1px #CCCCCC;
	background-color:#FFFFFF;
	line-height:100%;
	justify-content:center;
	align-items:center;
}
ul.ctr_num li a:before{
	content:"";
	display:block;
	padding-top:100%;
}
ul.ctr_num li a span{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	line-height:100%;
}
ul.ctr_num li span.v{
font-size:120%;
font-weight:700;
display:flex;
	line-height:100%;
	justify-content:center;
	align-items:center;
}
.litemodal_nop #nop_bottom{
padding-top:10px;
	text-align:right;
	width:100%;
}
.litemodal_nop #nop_bottom .btn_close{
	display:inline-block;
	text-decoration:none;
	background-color:#000000;
	border-radius:10px;
	padding:15px 20px; 
	line-height:100%;
	color:#FFFFFF;
	font-size:80%;
}

#calendar_monthly .ui-datepicker-calendar td.td_calendar_day_disabled a,
#checkinout_datepicker .ui-datepicker-calendar td.td_calendar_day_disabled a{
color:#CCCCCC;
cursor:default;
}


.view_sp{
	display:none;
}

@media screen and (max-width: 770px) {
.view_sp{
	display:block;
}
	.col2{
		display:block;
		flex-wrap:wrap;
	}
	.col2 .col_left{
	width:100%;
	}
	.col2 .col_right{
	width:100%;
	padding:0%;
	}
	
.reservebox{
width:100%;
box-sizing:border-box;
background-color:#EFEFEF;
border:none;
padding:3vw;
border-radius:0px;
box-shadow: none;
font-size:4.5vw;
position:relative;

}
	.col2 .col_right h3{
	    margin: 3em 0 1.5em;
    padding: 1.1em .2em 1em;
    font-size: 5.5vw;
    font-weight: 400;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
	}
	.litemodal_checkinout_datepicker{
		position:static;
		padding:0%;
		width:100%;
		box-shadow: none;
		border:none;
		
	}
	.litemodal_checkinout_datepicker_inr{
		display:block;
	}
	#checkinout_datepicker{
		width:100%;
		overflow-x:scroll;
	}
	
	.reservebox.open_nop .calcrow,
	.reservebox.open_datepicker .calcrow,
	.reservebox.open_nop .btnwrap,
	.reservebox.open_datepicker .btnwrap,
	.reservebox.open_nop .reservebox_row,
	.reservebox.open_datepicker .reservebox_row{
		display:none;
	}
	.litemodal_nop{
		position:static;
		width:100%;
		padding:0%;
		border:none;
		box-shadow: none;
	}
	.reservebox .nop_pet .label .sub{
		transform:translate(0%,70%);
	}
	
	.reservebox .btn{
		padding:4vw;
		font-size:100%;	
	}
}


/*お客様情報フォーム start*/
.customerformarea2{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100%;
	max-width:640px;
	z-index:1001;
	box-sizing:border-box;
	padding:40px 20px 20px;
	background-color:#FFFFFF;
	margin: 0 auto;
	display:none;
}
.customerformarea2 .btn_close{
	position:absolute;
	top:5px;
	right:5px;
	background-color:#333333;
	color:#FFFFFF;
	text-decoration:none;
	border-radius:3px;
	display:inline-block;
	padding:5px 10px;
	line-height:100%;
	font-size:80%;
	
}

.customerformarea2 table{
	table-layout:fixed;
	border-collapse:collapse;
}
.customerformarea2 table td,
.customerformarea2 table th{
	text-align:left;
	font-weight:400;
	padding:4px;
}
.customerformarea2 table th{
	width:18%;
}
.customerformarea2 table td{
width:82%;
}
.customerformarea2 table td table{
	table-layout:fixed;
	width:100%;
}

.customerformarea2 table td table.reserveform_nop td{
width:25%;
font-size:90%;
padding-top:0%;
font-weight:700;
}
.customerformarea2 table td table.reserveform_nop td .label{
	margin-right:3px;
}
.customerformarea2 table td.td_customerformarea2_checkinout{
	vertical-align:middle;
}
#exn_lavel_checkout{
	display:inline-block;
	width:85px;
	font-size:75%;
}


#exn_lavel_checkin{
	display:inline-block;
	width:75px;
	font-size:75%;
}

#exn_v_checkout,
#exn_v_checkin{
	display:inline-block;
	width:140px;
	font-weight:700;
	min-height:10px;
}

.customerformarea2 .tbl_exon_reserveform{
margin-bottom:30px;
width:100%;
}
.customerformarea2 .tbl_exon_customerform{
table-layout:fixed;
}
.customerformarea2 .tbl_exon_customerform th{
	width:26%;
	font-size:90%;
}
.customerformarea2 .tbl_exon_customerform td{
	width:74%;
}

.customerformarea2 input[type="text"]{
	padding:4px;
	border:solid 1px #CCCCCC;
	border-radius:4px;
	font-size:85%;
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
}
#exn_modalbg{
width:100%;
position:fixed;
top:0%;
left:0%;
height:100%;
width:100%;
background-color:rgba(0,0,0,0.5);
display:none;
z-index:1000;

}
#exn_modalbg2{
width:100%;
position:fixed;
top:0%;
left:0%;
height:100%;
width:100%;
background-color:rgba(0,0,0,0.5);
display:none;
z-index:1000;

}



#client_zip0{
  width:50px;
  margin-left:5px;
  margin-right:5px;
}
#client_zip1{
  width:65px;
  margin-left:5px;
  margin-right:5px;
}
.label_required{
  font-size:75%;
  color:#FF0000;
  margin-left:5px;
}
.addrrow{
margin-bottom:10px;
}
.client_addr{
width:100%;
}

.client_email {
width:100%;
}
.exon_bookingform_title{
margin-bottom:10px;
}

.customerformarea2 h3.exon_bookingform_title{
	margin: 0em 0 1em;
	padding: 0.3em 0.5em 0.3em;
	font-size: 16px;
	font-weight: 700;
	background-color:#EFEFEF;
	color:#33333;

		
}


#btn_exe_exn{
	display:block;
	padding:10px;
	min-width:150px;
	text-align:center;
	color:#FFFFFF;

	background-color:#8e0013;
	border-radius:5px;
	margin-top:15px;
	margin-left:auto;
	margin-right:auto;
	border:none;
	width:100%;
}
.row_monthly{
    display:none;
}
.reserve_monthly .row_monthly{
    display:table-row;
}
.reserve_monthly .row_daily{
    display:none;
}

.error_msg{
display:none;
color:#FF0000;
}
.error_msg.show{
	display:block;
}

@media screen and (max-width: 770px) {

.customerformarea2 h3.exon_bookingform_title{

	font-size: 4.8vw;
	margin: 0em 0 1em;
	padding: 0.4em .2em 0.4em;
	line-height:100%;
	font-weight: 400;
	border-top: none;
}

	.customerformarea2{
		padding:10vw 3vw 3vw;
		font-size:4.0vw;
		max-height:76vh;
	}
	.customerformarea2 .btn_close{
		top:1vw;
		right:1vw;
		padding: 2vw 3vw;
		
		
	}
	.customerformarea2 .tbl_exon_reserveform{
		margin-bottom:3vw;	
	}
	
    .col_right .reservebox_reservetype{
        font-size:100%;
    }
    .reservebox_checkinout_label .label{
        font-size:85%;
    }
	.form_nop_pet .label,
	.form_nop_baby .label,
	.form_nop_child .label,
	.form_nop_adult .label{
		font-size:80%;
		margin-left:5px;
		width:16vw;
	}
	.form_nop_pet .vlabel,
	.form_nop_baby .vlabel,
	.form_nop_child .vlabel,
	.form_nop_adult .vlabel{
		font-size:80%;
		margin-left:5px;
	}
	.calcrow{
		font-size:100%;
	}
	
	.checkinout_row_left{
		width:100%;
		padding-bottom:0%;
		display:flex;
	}
	.checkinout_row_left .checkinout_stay{
		margin-right:3vw;	
		margin-bottom:0%;
		display:flex;
		align-items:center;
	}
	.checkinout_row_left .checkinout_span{
		display:flex;
		align-items:center;
	}
	.checkinout_row_right{
		width:100%;
	}
	
	#calendar_monthly_wrap{
		position:absolute;
		bottom:auto;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		max-width:96vw;

	}
	#calendar_monthly_scroll{
		width:100%;
		overflow-x:scroll;
	}
	.customerformarea2_scroll{
		overflow-y:auto;
		max-height:70vh;
	}
	.customerformarea2 table td table.reserveform_nop td{
		font-size:80%;

	}


}
/*お客様情報フォーム end*/