@charset "utf-8";

/* ================================================= カレンダーの表示設定 */
#CALENDAR{
	background-color: #ffffff;
    position: absolute;
    padding: 10px;
    border: 2px #cccccc solid;
    width: 350px;
    max-width: calc(100% - 60px);
    border-radius: 10px;
    box-shadow: 0px 0px 25px rgb(0 0 0 / 5%);
}
#CALENDAR TABLE{
	width : calc(100% - 20px);
	margin : 10px;
}
#CALENDAR TABLE TD{
	padding : 0px;
}
#CALENDAR TABLE TR:nth-of-type(1) TD:nth-last-of-type(1){
	text-align : right;
}
#CALENDAR TABLE TH, .calendar_now STRONG{
	font-weight : normal;
	line-height: 1.1em;
}
.calendar_now{
	font-size : 16px;
	padding : 3px 0px 0px 0px;
	text-align : center;
}
.calendar_now STRONG{
	font-size : 30px;
}
#CALENDAR TABLE THEAD{
	border-bottom : 1px var(--color-gray) solid;
}
#CALENDAR TABLE TBODY TH{
	padding : 10px 0px 10px 0px;
}
#CALENDAR TABLE TBODY TD{
	cursor : pointer;
	padding : 2px 0px;
}
#CALENDAR TABLE TBODY TH, #CALENDAR TABLE TBODY TD{
	width : calc(100% / 7);
	text-align : center;
	height : 30px;
	font-size : 16px;
	letter-spacing: 0;
	vertical-align : middle;
}
.today SPAN, .click_today SPAN{								/* 今日の表示 */
	font-size: 14px;
	margin : 0px auto 0px auto;
	z-index : 1;
	display : -webkit-flex;
	display : flex;
	-webkit-align-items : center;
	align-items : center;
	-webkit-justify-content : center;
	justify-content : center;
	position : relative;
	width : 30px;
	height : 30px;
	border-radius : 30px;
}
.today SPAN{
	background-color : var(--color-red);
	color : #ffffff;
}
.calendar_prev, .calendar_next{
	background-repeat : no-repeat;
	color : var(--color-lightgray);
}
.calendar_prev{
	background-image : url(/img/arrow_left.png);
	padding : 0px 0px 0px 30px;
	background-size : contain;
}
.calendar_next{
	background-image : url(/img/arrow_right.png);
	padding : 0px 30px 0px 0px;
	background-position : 100% 0px;
	background-size : contain;
}
#CALENDAR TABLE TBODY TD.else_day{
	color : #dddddd;
	cursor : default;
}
#CALENDAR TABLE TBODY TD.empty{
	padding : 0px;
	height : 5px;
	cursor : default;
	border-bottom : 0px none #ffffff;
}
input[type="button"].calendar {
    border: 1px var(--color-red) solid;
    padding: 5px;
    background-color: var(--color-red);
    color: #ffffff;
    cursor: pointer;
}
#DAY_SELECT{
	color : #ffffff;
	background-color : var(--color-black);
	font-size : 15px;
	border : 0px none #ffffff;
	border-radius : 0px;
	float : right;
	padding : 2px 5px 2px 5px;
	margin : -2px 0px 0px 0px;
}
#CALENDAR input[type="button"].calendar{
	margin: auto;
	margin-bottom: 5px;
	display: block;
}


/* ----------------------------------------------------------------------------- */
/* 350px以下 */
/* ----------------------------------------------------------------------------- */
@media screen and (max-width : 350px){
	input[type="button"].calendar {
		letter-spacing: 0;
		font-size: 12px;
	}
}