/*
 * ご予約
 * お客様ページ専用
*/
@charset 'utf-8';

/*
 * login.php
 */
.Login{
	width:					330px;
	margin:					30px auto;
}
.Login table{
	margin-top:				10px;
}
.Login td{
	padding:				5px;
}
.Login td.Submit{
	text-align:				center;
}

.Msg {
	padding:				10px;
	color:					#ff0000;
	font-weight:			bold;
}

/*
 * list.php
 */
/* カレンダーエリア(未使用になったDatePicker) */
.CalendarArea {
	width:				790px;
	margin:				10px auto;
}

/* お客様情報 */
.UserInfo {
	width:					720px;
	margin:					10px auto;
	border:					1px solid #dcdcdc;
	background-color:		#f5f5f5;
	padding:				5px;
}
.UserInfo p{
	font-weight:			bold;
}
.UserInfo table{
	width:						98%;
	margin:						0px auto 10px;
	border-top:					1px solid #a9a9a9;
	border-bottom:				1px solid #a9a9a9;
}
.UserInfo table th{
	text-align:					right;
	padding-right:				20px;
}

/* 週送りエリア */
.WeekSelectArea {
	width:						100%;
	margin:						20px auto 20px;
	padding:					5px 0px;
	border-top:					2px dotted #dcdcdc;
	border-bottom:				2px dotted #dcdcdc;
}
.WeekSelectArea div{
	width:						33.3%;
	float:						left;
}
.WeekSelectArea div.Left{
	text-align:					left;
}
.WeekSelectArea div.Center{
	text-align:					center;
}
.WeekSelectArea div.Right{
	text-align:					right;
}
.WeekSelectArea:after {
	content:					'';
	display:					block;
	clear:						both;
}

/* セル色説明エリア */
.ColorManual {
	width:						100%;
	margin:						20px auto 20px;
	padding:					5px 0px;
}
.ColorManual:after {
	content:					'';
	display:					block;
	clear:						both;
}
.ColorManual .ColorBox{
	float:						left;
	margin:						0px 10px;
}
.ColorManual .ColorBox:after{
	content:					'';
	display:					block;
	clear:						both;
}

.ColorManual .ColorBox div{
	width:						60px;
	height:						20px;
	border:						1px solid #a9a9a9;
	box-sizing:					border-box;
	float:						left;
}
.ColorManual .ColorBox div:after{
	content:					'';
	display:					block;
	clear:						both;
}

.ColorManual .ColorBox span{
	margin-left:				5px;
}

.ColorManual .Able{
	background-color:		#fff;
}
.ColorManual .Unable{
	background-color:		#dcdcdc;
}
.ColorManual .SelfReserved{
	background-color:		#006400;
}
.ColorManual .Reserved{
	background-color:		#8b0000;
}


/* 予約エリア */
.ReserveDayArea {
	width:						100%;
	margin:						20px auto 20px;
}
.ReserveDayArea p{
	font-weight:				bold;
	font-size:					140%;
}
.ReserveDayArea table{
	width:						100%;
	font-size: 					75%;
	margin-bottom:				10px;
}
.ReserveDayArea table th{
	border:						1px solid #a9a9a9;
	font-weight:				nomal;
	background-color:			#f5f5f5;
}
.ReserveDayArea table th.Blank{
	border:						none;
	background-color: 			#fff;
	width:						105px;
}
.ReserveDayArea table th.Time{
	text-align:					center;
	padding:					3px 2px;
}
.ReserveDayArea table td{
	width:						40px;
	min-width:					36px;
	height:						32px;
	border:						1px solid #a9a9a9;
	box-sizing:					border-box;
	text-align:					center;
}
.ReserveDayArea table td.Blank{
	border:						none;
	background-color: 			#fff;
	height:						5px;
}
.ReserveDayArea table td a{
	display:					block;
	text-decoration:			none;
	height:						100%;
}
.ReserveDayArea table th.Type{
	width:						110px;
}

.ReserveDayArea table td.Able{
	background-color:		#fff;
}
.ReserveDayArea table td.Able:hover{
	background-color:		#ffff00;
}

.ReserveDayArea table td.Unable{
	background-color:		#dcdcdc;
}

.ReserveDayArea table td.TimeOver{
	background-color:		#dcdcdc;
	color:						#fff;
	text-align:					center;
}
.ReserveDayArea table td.Reserved{
	background-color:		#8b0000;
	color:						#fff;
	text-align:					center;
}
.ReserveDayArea table td.SelfReserved{
	background-color:		#006400;
	color:						#fff;
	text-align:					center;
}
.Reserved a, .SelfReserved a{
	color:						#fff;
}
.Unable a{
	color:						#000;
}




/*
 * detail.php
 */
.ReserveHeader {
	width:						100%;
	max-width:					1600px;
	min-width:					1200px;
	background-color:		#2f4f4f;
	color:						#fff;
	font-size:					130%;
	padding:					10px 0;
	margin:						3px auto 10px;
}
.ReserveHeader span{
	margin-left:				15px;
}

.ReserveWrap {
	width:						100%;
	max-width:					1600px;
	min-width:					1200px;
	padding:					5px 0 20px;
	margin:						0px auto;
}
/* 767以下はタブレット＆スマホ */
@media (max-width: 767px){
	.ReserveWrap {
		max-width:					100%;
		min-width:					100%;
	}

	.ReserveHeader {
		max-width:					100%;
		min-width:					100%;
	}
}