@charset "UTF-8";

#calendar{width:100%; font-family: 'Noto-M';}
#calendarBody{margin:0px; font-family: 'Noto-M';}

.selecter{text-align:center; border-width:0px;}

table.calendar {
	padding:0;
	margin: 0;
	width:100%;
}

table.calendar th {
	padding-bottom:10px;
	text-align: left;
	color: #ffffff;
}
table.calendar div, table.calendar a{
	width:100%;
	padding: 0.5em 0;
	text-align:center;
/*	background-color: rgb(255,255,255);*/
/*	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px;*/
}

table.calendar div.selectBt{cursor: pointer; width:12px; margin:0 20px; padding:0;}

.dateTd{
	color:rgb(200,200,200);
}
.weekName{
	text-align:center;
	font-size:0.8em;
}
table.calendar td {
	padding:1.5px;
	width:59px;
	text-align:center;
	vertical-align: middle;
	line-height: normal;
	color: gray;
}
table.calendar td.click {
	cursor: pointer;
}
table.calendar td.Today {
	color: #ffffff;
}
table.calendar td.Sat {
	color: #999999;
}
table.calendar td.Info {
	color: #cdcdcd;
}

.Today a{color:rgb(0, 215, 230);}

td.toDo a{background-color:rgb(255,255,255); display:block; border:1px solid rgb(240,240,240);
	cursor:pointer;
	-webkit-transform:translate(0,0);-moz-transform:translate(0,0);
	transform:translate(0,0);
	-webkit-transition:all .2s ease;
	-moz-transition:all .2s ease;
	-ms-transition:all .2s ease;
	-o-transition:all .2s ease;
	transition:all .2s ease;
	-webkit-box-shadow:3px 3px 0 0 rgb(200,200,200);
	-moz-box-shadow:3px 3px 0 0 rgb(200,200,200);
	box-shadow:3px 3px 0 0 rgb(200,200,200);
	-moz-border-radius: 3em;
	-webkit-border-radius:3em;
	border-radius:3em;
}

td.toDo a:hover{
	color: rgb(0, 215, 230);
	transform:translate(3px,3px);
	-moz-transform:translate(3px,3px);
	-webkit-transform:translate(3px,3px);
	-o-transform:translate(3px,3px);
	-ms-transform:translate(3px,3px);
	-webkit-box-shadow:1px 1px 0 0 rgb(100,100,100);
	-moz-box-shadow:1px 1px 0 0 rgb(100,100,100);
	box-shadow:1px 1px 0 0 rgb(100,100,100);
}

td.toDo a.clicked{
	background-color:rgb(255,255,255); display:block; border:1px solid rgb(240,240,240);
	transform:translate(3px,3px);
	-moz-transform:translate(3px,3px);
	-webkit-transform:translate(3px,3px);
	-o-transform:translate(3px,3px);
	-ms-transform:translate(3px,3px);
	-moz-box-shadow:3px 3px 0 0 rgb(200,200,200) inset;
	-webkit-box-shadow:3px 3px 0 0 rgb(200,200,200) inset;
	box-shadow: 3px 3px 0 0 rgb(200,200,200) inset;
}

table.calendar td.noInfo {
	color: black;
}
table.calendar td.Sun, table.calendar td.Sun-info {
	color: rgb(155,100,30);
	font-weight:bold;
}
table.calendar td.holyday {
	color: rgb(155,100,30);
}
table.calendar td.noreservation {
	color: gray;
}
table.calendar td.xday {
	background:rgb(245, 245, 230);
	font-weight: bolder;
	color: rgb(155,100,30);
	cursor:pointer;
}
table.calendar td.birthday {
	font-weight: bolder;
	color: rgb(155,100,30);
}

.holyday{color: rgb(155,100,30);}
.xday{color: rgb(50,100,100);}

.thisMonth{text-align:center; margin:0;}
.MonthYear{width:100%; text-align:center; margin:0; }
#calToday{color: rgb(155,100,30);}
#selectTime{}

#calCaption{position:absolute; color:#000000; font-size:1em; padding:1em; background:rgb(255,255,255); visibility:hidden; z-index:999;
	border:1px solid rgb(200, 200, 200);
	width:10em;
	margin-left:-36px;
	-moz-border-radius: 3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:3px 3px 0 0  rgba(200, 200, 200, 1);
	-webkit-box-shadow:3px 3px 0 0 rgba(200, 200, 200, 1);
	box-shadow: 3px 3px 0 0 rgba(200, 200, 200, 1);
}

#calCaption .close{width:1.5em; height:1.5em; background-position:50% 50%; position:absolute; right:.5em; top:.5em; background-color: rgb(255,255,255); cursor:pointer;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
}
.svg .close{background-image: url(../img/close.svg)}
.no-svg .close{background-image: url(../img/close.png)}

#calCaption .capText{margin-top: .5em;}

#calDir{position:absolute; top: -11px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 11px solid rgb(200, 200, 200);
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 0px) and (max-width: 999px){
	table.calendar {
		font-size: 16px;
	}
	table.calendar td {
		padding:2px;
	}
	table.calendar div, table.calendar a{
		padding: 2px 0;
	}
	table.calendar th {
		padding-bottom:5px;
	}
}