@charset "utf-8";
/*
	Booking アプリケーション用 Style
*/

/* datepicker */
	/* タイトルのフォントサイズ */
	.ui-datepicker .ui-datepicker-title select {
	font-size: 0.9em;
	margin: 1px 0;
	}
	/* タイトルのbox サイズ */
	.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
	width: 60%;
	}
	/* Boxの大きさ */
	.ui-datepicker {
	width: 13em;
	padding: .2em .2em 0;
	display: none;
	}

/* 郵便番号 */
#contactPostcode1,
#contactPostcode2 {
	width: 4em;
}

/* booking タイトル */

div#booking_title{
clear:both;
margin:5px auto;
padding:0;
width:95%;
position:relative;
line-height:0px;
display: block;
height: 120px;
background:#f9f9f9 url(../img/titleBg.jpg)  scroll center;
border:4px solid #ebebeb;
}

div#booking_title .slogan{
position:absolute;
max-width:100%;
height:auto;
bottom:10px;
left:10px;
padding:5px 10px;
line-height:1.4;
color:#fff;
background-color: rgba(0,0,0,0.4);
}

div#booking_title .slogan h2{
padding-bottom:5px;
font-size:20px;
}


/* booking_body アプリの内容 */


/*******************************
	予約カレンダー
	margin-top: 10px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 10px;
*******************************/

div#bookCalendar {
	text-align: center;
}

div#bookCalendar .table {
	float: left;
	margin: auto;
	padding: 10px;
	border: 0px;
}

div#bookCalendar caption {
	color:black;
	text-align: center;
}
div#bookCalendar table {
	width: 182px;	/* 26x7 */

	border-collapse: separate;
	border-spacing: 0px;
	border-color: black;
}
div#bookCalendar tr td{
	height: 31px;
	width: inherit;
	margin: none;
	color: #888;
	font-size:10px;
	padding: 0px;
	text-align: center; /* center; */
	vertical-align: top;
	border-bottom:1px solid #ddd;
}
div#bookCalendar tr:nth-child(even) {
	background: #f9f9f9;
}
div#bookCalendar .sun {
	color: #f00;
}
div#bookCalendar .sat {
	color: #00f;
}
div#bookCalendar .REQ {
	background:#f9f9f9 url(../img/sankaku16.gif) no-repeat scroll 5px 14px;
}
div#bookCalendar .CFM {
	background:#fff url(../img/batsu16.gif) no-repeat scroll 5px 14px;
}
div#bookCalendar .VAC {
	background:#fff url(../img/maru16.gif) no-repeat scroll 5px 14px;
}
div#bookCalendar .today {
	background: #888;
	color: #e6b422;
}
div#bookCalendar .today:hover {
	background: #fff;
	color: #f00;
}


div.booking_body label{
	display: inline;
}
div.booking_body form div {
	margin-bottom: 0;
	padding: 0.2em;
}
div.booking_body span.REQ,
div.booking_body span.CFM,
div.booking_body span.VAC {
	padding: 0px;
	margin: 2px;
}

div.booking_body span.REQ {
	background: lightyellow url(../img/sankaku16.gif) no-repeat scroll 0px 0px;
}
div.booking_body span.CFM {
	background: lightyellow url(../img/batsu16.gif) no-repeat scroll 0px 0px;
}
div.booking_body span.VAC {
	background: lightyellow url(../img/maru16.gif) no-repeat scroll 0px 0px;
}

/* booking_form アプリの内容 */

/*
	Booking アプリケーション用 Style
*/

/* 入力フォームとボタン */
input[type=submit].button2,
form .submit input[type=submit].button2 {
	color: white;
	margin: 10px;
	padding: 0.3em 2em 0.3em 2em;
	text-decoration: none;
	text-shadow: none;
	background-color: #6AAA16;
	background-image: none;
}
input[type=submit].button2:hover,
input[type=submit].button2:focus,
form .submit input[type=submit].button2:hover,
form .submit input[type=submit].button2:focus {
	color: black;
	background-image: url(../img/buttonBg.png);
}

div.booking_form input[type=submit]:hover,
div.booking_form input[type=submit]:focus,
div.booking_actions a.button:hover,
div.booking_actions a.button:focus {
 color: white;
 text-decoration: none;
 text-shadow: none;
 background-color: #6AAA16;
 background-image: none;
}
div.booking_actions a.button,
div.booking_form input[type=submit] {
	display: block;
	width: 154px;
	text-align: center;
	font-weight:normal;
	padding: 4px 8px;
	color:#333;
	border:1px solid #bbb;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-decoration: none;
	min-width: 0;
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-user-select: none;
	user-select: none;
}
div.booking_form h2 {
	font-size: 32px;
	font-weight: bold;
	color: #8aaa16;
	line-height: 2;
}
div.booking_form h3 {
	color: #8aaa16;
	font-size: 24px;
	font-weight: bold;
	line-height: 2;
}

div.booking_body textarea,
div.booking_body select {
	font-size: 100%;
}

div.booking_body {
	width:90%;
	margin: 10px auto 10px auto;
	padding: none;
	background: lightyellow;
	color: #000;
	text-align: left;
	border: 4px solid #e4e4e4;
	font-size: 14px;
	font-family: verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

div.booking_form {
	display: inline-block;
	width: 70%;
	text-align: left;
	vertical-align: middle;
	padding:none;
	border: none;
	margin: 10px;
	border-right: solid 1px #6AAA16;
}
div.booking_actions p {
	text-align: left;
}
div.booking_actions {
	display: inline-block;
	width: 24%;
	text-align: center;
	vertical-align: middle;
	padding: 5px;
	border: none;
	margin: none;
}

@media only screen and (max-width:569px){
	div.booking_body {
		width:90%;
		margin: 5px auto 5px auto;
		padding: 10px;
		text-align: left;
	}

	div.booking_form,
	div.booking_actions {
		width: 100%;
		display: block;
		padding: 10px 0px 10px 0px;
	}
	div.booking_form {
		border-right: none;
		border-bottom: solid 1px #6AAA16;
	}
}