@charset "utf-8";

/* =============================================================
申し込みフォーム共通
============================================================= */
.day-calendar{
	max-width: 520px;
	margin: 0 auto 20px;
	background-color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
}

.day-calendar table.mtssb-timetable-link{
	width: 520px;
	border-collapse: collapse;
}

.day-calendar .mtssb-timetable-date{
	padding: 8px 10px;
	background-color: #f79f3e;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}

.day-calendar .mtssb-timetable-link tbody tr:first-child{display: none;}

.day-calendar .mtssb-timetable-link th,
.day-calendar .mtssb-timetable-link td{
	width: 50%;
	padding: 6px 10px;
	font-size: 18px;
	text-align: center;
	box-sizing: border-box;
}

.day-calendar .mtssb-timetable-link .day-left,.day-calendar .mtssb-timetable-link .day-right{
	border-color: #ccc;
	border-style: solid;
}

.day-calendar .mtssb-timetable-name,.day-calendar .mtssb-daily-action{display: none;}

.day-calendar .mtssb-timetable-link .day-left{
	border-width: 0 0 1px 1px;
	border-radius: 0;
	line-height: normal;
	background-color: #ffedd9;
}

.day-calendar .mtssb-timetable-link .day-right{border-width: 0 1px 1px 1px;}
.day-calendar .mtssb-timetable-link .calendar-mark{font-size: 20px;}
.day-calendar .mtssb-timetable-link .calendar-mark a.booking-timelink{font-weight: bold;}

.calendar-mark.vacant > a.booking-timelink{
    color: #333;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 5px #ddd;
    transition: opacity .3s;
}

.calendar-mark.vacant > a.booking-timelink:hover{
    opacity: .7;
}

.calendar-mark.vacant .open{display: none;}

.calendar-mark.vacant > a .open{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.calendar-mark.vacant > a .close{display: none;}

.calendar-mark .mark{
    margin-right: 2px;
}

.calendar-mark.vacant .open .mark{
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    color: #ff71b2;
    font-size: 26px;
}

@media only screen and (max-width:640px){
	.day-calendar{max-width: 380px;}
	.day-calendar table.mtssb-timetable-link{width: 100%;}
	
	.day-calendar .mtssb-timetable-date{
		padding: 8px 5px;
		font-size: 16px;
	}
	
	.day-calendar .mtssb-timetable-link th,.day-calendar .mtssb-timetable-link td{
		font-size: 16px;
	}

    .day-calendar .mtssb-timetable-link .calendar-mark{font-size: 16px;}
    
    .calendar-mark.vacant .open .mark{font-size: 24px;}
}

/* EOF */