/* CSS Document */


/* ---------------------------------------------------------------
■ nav
-----------------------------------------------------------------*/
@media print, screen and (min-width: 656px) {
	.sp_none{ display:none;}
	article{ margin-bottom:30px;}
	/*  wid */
	#reservation .wid{
		width:640px;
		margin:0 auto; padding:0;
		margin-bottom:30px;
	}
}

@media screen and (max-width: 655px) {
	.pc_none{ display:none;}
	article{ margin-bottom:15px;}
	/*  wid */
	#reservation .wid{
		width:100%;
		margin:0 auto; padding:0;
		margin-bottom:30px;
	}
	.article_width{ width:94%; margin-right:auto; margin-left:auto;}
}

/*============

navi

============
#reservation nav#navi{
	padding:0;
	margin:0;
	clear:both;
	width:100%;
	vertical-align:top;
	font-size:4px;
	line-height:4px;
}
#reservation nav#navi img{
	padding:0;
	margin:0;
	vertical-align:top;
	font-size:4px;
	line-height:4px;
}

*/


/*============
PC
============*/
@media print, screen and (min-width: 656px) {
/*	#reservation nav#navi_pc {
		border-bottom:1px solid #339ecc;
	}
	#reservation nav#navi_pc ul{
		padding:0;
		margin:0 auto;
		clear:both;
		width:640px;
	}
	#reservation nav#navi_pc li {
		border-right:0.5% solid #339ecc;
	}
	#reservation nav#navi_pc li:last-child {
		border-right:0 solid #339ecc;
	}
	#reservation nav#navi_pc li a{
		width:24.5%;
		float:left;
		text-align:center;
		padding:0.75em 0;
		border-right:1px solid #339ecc;
	}
	#reservation nav#navi_pc li a .space{
	}

	#reservation nav#navi_pc li.step1 a{
		border-left:1px solid #339ecc;
	}
	#reservation nav#navi_pc li.step1 a,
	#reservation nav#navi_pc li.step2 a,
	#reservation nav#navi_pc li.step3 a,
	#reservation nav#navi_pc li.step4 a{
		text-align:center;
		font-size:14px;
		line-height:18px;
		text-decoration:none;
	}

	#reservation nav#navi_pc li.step1.off a,
	#reservation nav#navi_pc li.step2.off a,
	#reservation nav#navi_pc li.step3.off a,
	#reservation nav#navi_pc li.step4.off a{
		color:#339ecc;
		font-weight:bold;
		background-size: 10px;
	 }

	#reservation nav#navi_pc li.step1.off a:hover,
	#reservation nav#navi_pc li.step2.off a:hover,
	#reservation nav#navi_pc li.step3.off a:hover,
	#reservation nav#navi_pc li.step4.off a:hover{
		color:#15b4f9;
		font-weight:bold;
		background-size: 10px;
	}

	#reservation nav#navi_pc li.step1.on a,
	#reservation nav#navi_pc li.step2.on a,
	#reservation nav#navi_pc li.step3.on a,
	#reservation nav#navi_pc li.step4.on a{
		background-color:#339ecc;
		color:#fff;
		font-weight:bold;
		background-size: 10px;
	}
	#reservation nav#navi_pc li.step1.on a:hover,
	#reservation nav#navi_pc li.step2.on a:hover,
	#reservation nav#navi_pc li.step3.on a:hover,
	#reservation nav#navi_pc li.step4.on a:hover{
		color:#fff;
	}
*/

	#reservation nav#navi_pc {
		border-bottom:1px solid #339ecc;
	}
	#reservation nav#navi_pc ul{
		padding:0;
		margin:0 auto;
		clear:both;
		width:640px;
	}
	#reservation nav#navi_pc li:last-child {
		border-right:1px solid #339ecc;
	}
	#reservation nav#navi_pc li{
		width:24.5%;
		border-right:0.5% solid #339ecc;
		float:left;
		text-align:center;
		padding:1em 0;
		border-right:1px solid #339ecc;
	}
	#reservation nav#navi_pc li .space{
	}

	#reservation nav#navi_pc li.step1{
		border-left:1px solid #339ecc;
	}
	#reservation nav#navi_pc li.step1,
	#reservation nav#navi_pc li.step2,
	#reservation nav#navi_pc li.step3,
	#reservation nav#navi_pc li.step4{
		text-align:center;
		font-size:14px;
		line-height:18px;
		text-decoration:none;
	}

	#reservation nav#navi_pc li.step1.off,
	#reservation nav#navi_pc li.step2.off,
	#reservation nav#navi_pc li.step3.off,
	#reservation nav#navi_pc li.step4.off{
		color:#339ecc;
		font-weight:bold;
		background-size: 10px;
	 }


	#reservation nav#navi_pc li.step1.on,
	#reservation nav#navi_pc li.step2.on,
	#reservation nav#navi_pc li.step3.on,
	#reservation nav#navi_pc li.step4.on{
		background-color:#339ecc;
		color:#fff;
		font-weight:bold;
		background-size: 10px;
	}

	#reservation .yoyaku_title img{
		width:30%;
	}

	br.br-sp { /* スマホでのみ有効になる改行 */
		display:none;
	}

}


/*============
SP
============*/
@media screen and (max-width: 655px) {
/*	#reservation nav#navi_sp{
		border-bottom:1px solid #339ecc;
		width:100%;
		margin:0 auto;
	}
	#reservation nav#navi_sp ul{
		padding:0;
		margin:0 auto;
		clear:both;
		width:98%;
	}
	#reservation nav#navi_sp li a{
		border-right:1px solid #339ecc;
		width:24.6%;
		float:left;
		padding:14px 0;
		margin:0 auto;
		height:2.5em;
		color:#fff;
		text-decoration:none;
	}

	#reservation nav#navi_sp li.step1 a{
		border-left:1px solid #339ecc;
	}
	#reservation nav#navi_sp li.step1 a,
	#reservation nav#navi_sp li.step2 a,
	#reservation nav#navi_sp li.step3 a,
	#reservation nav#navi_sp li.step4 a{
		text-align:center;
		font-size:14px;
		line-height:18px;
		text-decoration:none;
	}

	#reservation nav#navi_sp li.step1.off a,
	#reservation nav#navi_sp li.step2.off a,
	#reservation nav#navi_sp li.step3.off a,
	#reservation nav#navi_sp li.step4.off a{
		color:#339ecc;
		font-weight:bold;
		background-size: 10px;
	 }

	#reservation nav#navi_sp li.step1.on a,
	#reservation nav#navi_sp li.step2.on a,
	#reservation nav#navi_sp li.step3.on a,
	#reservation nav#navi_sp li.step4.on a{
		color:#fff;
		font-weight:bold;
		background-size: 10px;
		background-color:#339ecc;
	}
	#reservation nav#navi_sp li.step1 a:hover,
	#reservation nav#navi_sp li.step2 a:hover,
	#reservation nav#navi_sp li.step3 a:hover,
	#reservation nav#navi_sp li.step4 a:hover{
		color:#fff;
		font-weight:bold;
		background-size: 10px;
		background-color:#339ecc;
	}
*/

	#reservation nav#navi_sp{
		border-bottom:1px solid #339ecc;
		width:100%;
		margin:0 auto;
	}
	#reservation nav#navi_sp ul{
		padding:0;
		margin:0 auto;
		clear:both;
		width:98%;
	}
	#reservation nav#navi_sp li{
		border-right:1px solid #339ecc;
		width:24.6%;
		float:left;
		padding:14px 0;
		margin:0 auto;
		height:2.5em;
		color:#fff;
		text-decoration:none;
	}

	#reservation nav#navi_sp li.step1{
		border-left:1px solid #339ecc;
	}
	#reservation nav#navi_sp li.step1,
	#reservation nav#navi_sp li.step2,
	#reservation nav#navi_sp li.step3,
	#reservation nav#navi_sp li.step4{
		text-align:center;
		font-size:14px;
		line-height:18px;
		text-decoration:none;
	}

	#reservation nav#navi_sp li.step1.off,
	#reservation nav#navi_sp li.step2.off,
	#reservation nav#navi_sp li.step3.off,
	#reservation nav#navi_sp li.step4.off{
		color:#339ecc;
		font-weight:bold;
		background-size: 10px;
	 }

	#reservation nav#navi_sp li.step1.on,
	#reservation nav#navi_sp li.step2.on,
	#reservation nav#navi_sp li.step3.on,
	#reservation nav#navi_sp li.step4.on{
		color:#fff;
		font-weight:bold;
		background-size: 10px;
		background-color:#339ecc;
	}

	#reservation .yoyaku_title img{
		width:45%;
	}

}


/* ---------------------------------------------------------------
■ common
-----------------------------------------------------------------*/
#reservation{
	margin:0 auto;
	padding:0;
	width:100%;
}

/*  title */
#reservation h1.page-header{
	padding:20px 0 15px 0;
	margin:0 auto 0 auto;
	clear:both;
	font-size:24px;
	line-height:34px;
	font-weight:bold;
	text-align:center;
	color:#339ecc;
	border-top:10px solid #339ecc;
	border-bottom:3px solid #339ecc;
}
#reservation h1.page-header span{
	font-size:0.8em;
	line-height:1.2em;
}

#reservation h2.page-title{
	border-bottom:#bce2f3 3px solid;
	font-size:18px;
	line-height:26px;
	font-weight:bold;
	padding:30px 0 4px 0.2em;
	margin:0 0 15px 0;
	color:#339ecc;
}

option:disabled {
    color: #000000;
    background-color: #c4c4c4;
}



/* =======================

account page

==========================*/
#account{
	text-align:center;
}
#account p{
	padding:0;
	margin:0;
}

/* form */
@media print, screen and (min-width: 656px) {
	#account .account_inbox{
		width:600px;
		margin:30px auto;
	}
}
@media screen and (max-width: 655px) {
	#account .account_inbox{
		width:100%;
		margin:40px auto;
	}
}

#account .visiter{
	border:2px solid #339ecc;
	width:84%;
	padding:25px 2% 20px 2% ;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
    border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
}
#account .visiter h2{
	color:#e50012;
}
#account .visiter p{
	line-height:1.6em;
}

#account .text90{ font-size:90%; }
#account .text120{ font-size:120%; }
.text130{ font-size:130%; }
.text140{ font-size:140%; }

#account h2{
	text-align:center;
	font-size:1.1em;
	line-height:1.3em;
	padding:0;
	margin:0 0 6px 0;
}
#account h2 span{
	margin-left:1em;
	font-size:12px;
	line-height:14px;
	padding:4px 10px;
	color:#fff;
	background-color:#339ecc;

    border-radius: 4px;        /* CSS3草案 */
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 4px;   /* Firefox用 */
}
#account .form {
	font-size: 1em;
	line-height: 1.4em;
	margin-left:auto;
	margin-right:auto;
}
#account p{
	font-size: 1em;
	line-height: 1.6em;
}
#account .form input{
	vertical-align:middle;
}
#account .form .forminput{
	padding:6px;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-indent: 5px;
}
#account .form .forminput2{
	padding:10px 6px ;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-indent: 5px;
}

#account .buttons{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}


#account .mail{
	font-size:80%;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	background-color:#f8f8f8;
	padding:12px 15px;
	border:1px solid #ccc;
}
#account .mail h3{
	font-size:1em;
	font-weight:bold;
	color:#C30;
	padding:0;
	margin:12px 0 4px 0 ;
}
#account .mail p{
	font-size:0.9em;
	line-height:1.4em;
	padding:0 0 10px 0;
}
#account .mail ul{
	padding:0;
	margin:0 auto;
	width:88%;
}
#account .mail ul li{
	list-style:decimal;
	margin-bottom:10px;
	text-align:left;
}


/* =======================

TOP page

==========================*/

#reservation .yoyaku_title{
	text-align:center;
}
/* #reservation .yoyaku_title img{ */
/* 	width:30%; */
/* } */

#reservation .calendar { margin-bottom:5px; }
#reservation .calendar .controls {
    text-align: center;
	padding-top:14px;
}
#reservation .calendar .controls a {
    cursor: pointer;
}
#reservation .calendar .controls h4 {
    display: inline;
}
#reservation .calendar .days {
    font-size: 0;
}
#reservation .calendar .day {
    display: inline-block;
    font-size: 14px;
    position: relative;
    text-align: center;
    width: 14.2857%;
/*
border: solid 1px #fff; border-collapse: collapse;

*/
}
#reservation .calendar .day a {
    color: #333;
    cursor: pointer;
    display: block;
}
#reservation .calendar .day div.cell {
    padding: 20% 0;
	box-shadow: 0 0 0 1px #fff inset;
}
#reservation .calendar .days a:hover {
    background-color: #ff6600;
    text-decoration: none;
	color:#FFF;
}
#reservation .calendar .day.header {
    border-bottom: 1px solid gray;
}
#reservation .calendar .days a {
	ation:none;
    text-decoration: none;
}

/*　予約可能の日*/
#reservation .calendar .not-current {
    background-color: #fded92;
    color: #ffffff;
}
#reservation .calendar .not-current:hover {
    background-color: #ff6600;
	color:#fff;
}
/*　休業など、予約不可の日*/
#reservation .calendar .dayoff {
    background-color: #eee;
    color: #000;
}
#reservation .calendar .dayoff:hover{
    background-color: #eee;
    color: #000;
}
/*　過ぎた日*/
#reservation .calendar .past-days{
    background-color: #fff;
    color: #000;
}
#reservation .calendar .past-days:hover{
    background-color: #fff;
    color: #000;
}
/*　前月の日付（カレンダーの前列に残った日にち）*/
#reservation .calendar .past-month-day{
    background-color: #fff;
    color: #ccc;
}
#reservation .calendar .past-month-day:hover{
    background-color: #fff;
    color: #ccc;
}
/*　選択した日*/
#reservation .calendar .selected a{
    background-color: #ff6600;
    color: #ffffff;
}
/*選択された日*/
#reservation .calendar .selected-day{
    background-color: #ff6600;
    color: #ffffff;
}

#reservation .calender-right {
    float: right !important;
}
#reservation .calender-left {
    float: left !important;
}

#reservation .calendar .day-headers{
	clear:both;
	font-size:0;
	padding:0;
	margin:2px 0 8px 0;
}
#reservation .calendar .header{
	padding-top:8px;
	padding-bottom:4px;
}

#reservation .col-mark {
	clear:both;
	float:right;
}
#reservation .col-mark ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#reservation .col-mark ul li{
	float:left;
	margin-left:1em;
	vertical-align:middle;
    display: table-cell;
}
.col-mark ul .circle {
	border: 1px solid #dddddd;
    border-radius: 50%;
    display: block;
    float: left;
    height: 15px;
    margin: 3px 3px 0 0;
    width: 15px;
	vertical-align:middle;
}
.col-mark ul .available {
    background-color: #fded92;
}
.col-mark ul .selected {
    background-color: #ff6600;
	color:#FFF;
}
.col-mark ul .holiday {
    background-color: #eee;
}



/* form */
.form-group {
	font-size: 1em;
	line-height: 1.4em;
	text-align: left;
	margin-left:0.3em;
	margin-right:0.3em;
}
.form-group input{
	vertical-align:middle;
}

.form-group .pulldownList{
	margin:0 auto;
	padding:6px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-indent: 5px;
	vertical-align: middle;
}
.form-group .pulldownList option{
	padding:4px 0 0 10px;
	margin:0;
}
.form-group textarea {
	width:96%;
	margin:0 auto;
	padding:8px 2%;
	border: 1px solid #ccc;
	border-radius: 5px;
}
.form-group .forminput{
	padding:6px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-indent: 5px;
}

#reservation .yoyaku_content{
	background-color:#f8f8f8;
	padding:10px 3% 8px 3% ;
}
#reservation .yoyaku_content h3.page_title-h3{
	font-size:1em;
	line-height:1.3em;
	margin:8px 0 2px 0;
	padding:0;color:#339ecc;
}
#reservation .yoyaku_content p{ margin:0 0 14px 0; padding:0;}


/* selectedDate */
#reservation .selectedDate{
	margin:32px 0 0 0;
	padding:0;
}
#reservation .selectedDate p{
	line-height:1.4;
}
#reservation .selectedDate p.reserved-date{
	line-height:1.5;
	font-weight:bold;
	color:#339ecc;
	text-align:center;
	padding:10px 2% 10px 2% ;
	margin:0 auto 16px auto;
	border:2px solid #339ecc;
	width:92%;

    border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
}
.ondes {color: #bbb;}



#reservation .notice{
	background-color:#f8f8f8;
	padding:12px 15px;
	border:1px solid #ccc;
}
#reservation .notice h4{
	padding:0;
	margin:0;
	font-size:0.9em;
	line-height:1.3em;
	font-weight:bold;
	color:#333;
}
#reservation .notice p{
	padding:0;
	margin:0;
	font-size:0.9em;
	line-height:1.4em;
}


.form_complete{
	text-align: left;
	margin:0 0.5em;
}


.width90{
	width:90%;
	margin: 0 auto;
}

/* 予約依頼送信完了ぺーじ*/
.completeBox{
	margin-left:auto;
	margin-right:auto;
	padding:0;
}
@media print, screen and (min-width: 656px) {
	.completeBox .illust{
		margin:0 auto;
		text-align:center;
	}
	.completeBox .illust img{
		width:50%;
		margin:10px auto 0 auto;
	}
}

@media screen and (max-width: 655px) {
	.completeBox .illust{
		margin:0 auto;
		text-align:center;
	}
	.completeBox .illust img{
		width:80%;
		margin:10px auto 0 auto;
	}
}
.complete_notice{
	padding:14px 2% 4px 3%;
	border:1px solid #ccc;
	background-color:#f8f8f8;
}
.complete_notice p.red{
	color:#C33;
	font-weight:bold;
}
.complete_notice p.red{
	color:#C33;
	font-weight:bold;
}
.complete_notice span.important-title {
	font-size: 18px;
}
.complete_notice p{
	font-size:0.9em;
}


#rule{
	margin:0;
	padding:0;
}
#rule h2{
	font-size:1em;
	line-height:1.3;
	font-weight:bold;
	color:#339ecc;
	padding:0;
	margin:1em 0 6px 0;
}
#rule h2.ttl{
	font-size:1em;
	line-height:1.3;
	font-weight:bold;
	color:#000;
	padding:0;
	margin:15px 0 10px 0;
}
#rule p{
	padding:0 0 1em 0;
	margin:0;
}
#rule ol{
	padding:0 0.5em 0.3em 2em;
	margin:0;
	line-height:1.3em;
}
#rule ol li{
	margin:0 0 0.2em 0;
}