/* CSS for MTS Simple Booking */
.wSct .monthly-calendar caption,
.wSct .day-calendar h3 {
	font-size: 32px;
    font-size: 2rem;
    letter-spacing: 0.25rem;
    line-height: 1.4;
    vertical-align: baseline;
    color: rgba(6,165,194,1);
    font-weight: 600;
	}

.wSct .monthly-calendar caption::after {
	content:"日付を選んで下さい";
	display:inline-block;
	font-size:1rem;
	color:rgba(51,51,51,1);
	}

.wSct .day-calendar h3 + p::after {
	content:"ご希望の時間・人数と残席数から時間を選んでください。";
	display:inline-block;
	margin-left:1rem;
	font-size:1rem;
	color:rgba(51,51,51,1);
	}

#booking-form fieldset {
	width:100%;
	padding:0;
	margin:0;
	border:0;
	}

#booking-form table {
	width:100%;
	margin:0 auto 1.5rem auto;
	border-spacing:0;
	border-top: 1px solid rgba(204,204,204,1);
    border-left: 1px solid rgba(204,204,204,1);
	}

#booking-form table tbody tr {
	flex-direction:row;
	}

#booking-form table th {
	text-align:center;
	vertical-align:middle;
	}

#booking-form table td {
	width:70%;
	}

#booking-form .td-header {
	width:100%;
	font-size:1.25rem;
	font-weight:600;
	text-align:center;
	}

#booking-form table th.booking-item ~ td {
	font-size:1.125rem;
	line-height:1.4;
	}

#booking-form .content-text.medium {
	width:100%;
	}

#booking-form .content-text.fat {
	width:100%;
	}

#booking-form input, #booking-form textarea {
	margin:0;
	}

#booking-form textarea {
	display:block;
	width:100%;
	height:100%;
	}

#action-button button {
    display: inline-block;
	width:200px;
    height: 3rem;
    margin: 20px 10px 0 10px;
	padding:0 10px;
    font-size: 1.25rem;
    line-height: 3rem;
    color: rgba(255,153,0,1);
    background-color: rgba(255,255,255,1);
    border: 1px solid rgba(255,153,0,1);
    border-radius: 10px;
    outline: none;
    transition: color .5s ease-out,background-color .5s ease-out;
	}

#action-button button:hover {
    color: rgba(255,255,255,1);
    background-color: rgba(255,153,0,1);
	cursor:pointer;
	}

.info-message.booking-completed {
	font-size:1.5rem;
	}

/* monthly calendar
-------------------------------------------------------*/
.monthly-calendar {
	width:100%;
	}

.monthly-calendar * {
	font-size:1rem;
	}

.monthly-calendar table {
	margin:0 auto;
	}

th.day-left,
th.day-right,
td.day-left,
td.day-right {
	border-radius:0;
	}

.monthly-calendar table tbody tr th {
	width:14.285%;
	}

.monthly-calendar table tbody tr td {
	width:14.285%;
	}

/*迎え*/
.meet .monthly-calendar .calendar-mark {
	position:relative;
	}

.meet .monthly-calendar .calendar-daylink {
	font-size:0;
}

.meet .monthly-calendar .calendar-daylink::before {
	content:"予約状況";
	font-size:1rem;
	color:rgba(17,17,17,1);
	}

/*送り*/
.send .monthly-calendar .calendar-mark {
	position:relative;
	}

.send .monthly-calendar .calendar-daylink {
	font-size:0;
}

.send .monthly-calendar .calendar-daylink::before {
	content:"予約状況";
	font-size:1rem;
	color:rgba(17,17,17,1);
	}

/*product1*/
.pd1 .monthly-calendar .calendar-mark {
	position:relative;
	}

.pd1 .monthly-calendar .calendar-daylink {
	font-size:0;
}

.pd1 .monthly-calendar .calendar-daylink::before {
	content:"予約状況";
	font-size:1rem;
	color:rgba(17,17,17,1);
	}

/*product2*/
.pd2 .monthly-calendar .calendar-mark {
	position:relative;
	}

.pd2 .monthly-calendar .calendar-daylink {
	font-size:0;
}

.pd2 .monthly-calendar .calendar-daylink::before {
	content:"予約状況";
	font-size:1rem;
	color:rgba(17,17,17,1);
	}


/* day calendar
-------------------------------------------------------*/
.day-calendar {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	}

.day-calendar * {
	font-size:1rem;
	}

.day-calendar table {
	width:100%;
	}

.day-calendar table tbody tr {
	flex-direction:row;
	}

th.day-right {
	line-height:2.5rem;
	}

.booking-timelink {
	line-height:2.5rem;	
	}

/*迎え*/
.meet .dat-calendar .calendar-mark {
	position:relative;
	}

.meet .day-calendar .booking-timelink::before {
	content:"残席数　";
	font-size:1rem;
	color:rgba(17,17,17,1);
	}

/*送り*/
.send .dat-calendar .calendar-mark {
	position:relative;
	}

.send .day-calendar .booking-timelink::before {
	content:"残席数　";
	font-size:1rem;
	color:rgba(17,17,17,1);
	}

/*product1*/
.pd1 .dat-calendar .calendar-mark {
	position:relative;
	}

.pd1 .day-calendar .booking-timelink {
	font-size:0;
	}

.pd1 .day-calendar .booking-timelink::before {
	content:"〇";
	font-size:1rem;
	color:rgba(17,17,17,1);
	}

/*product2*/
.pd2 .dat-calendar .calendar-mark {
	position:relative;
	}

.pd2 .day-calendar .booking-timelink {
	font-size:0;
	}

.pd2 .day-calendar .booking-timelink::before {
	content:"〇";
	font-size:1rem;
	color:rgba(17,17,17,1);
	}

/*フォーム
----------------------------------------------------*/ 
.content-text {
	border:1px solid rgba(204,204,204,1);
	outline:none;
	}

.aim {
	display:inline-block;
	margin-right:20px
	}

#booking-form .aim input{
	margin-right:3px	
	}

.pd1 tbody tr th label{
	font-size:0;
	}

.pd1 tbody tr th label::before{
	content:"予約件数";
	font-size:1rem;
	}

table.pd1 tbody tr:nth-child(2) {
	display:none;
	}

table.pd2 tbody tr:nth-child(2) {
	display:none;
	}

@media print,screen and (max-width:767px) {
#booking-form table tbody tr {
	flex-direction:column;
	}
	
#booking-form table th {
	width:100%;
	}

#booking-form table td {
	width:100%;
	}

.monthly-calendar table tbody tr:first-of-type {
	display:none;
	}

.monthly-calendar table tbody tr td.no-day {
	display:none;
	}

.monthly-calendar table tbody tr th {
	width:100%;
	}
	
.monthly-calendar table tbody tr td {
	width:100%;
	}

.monthly-calendar table tbody tr td.sun .day-number::after {
	content:"（日）";
	}

.monthly-calendar table tbody tr td.mon .day-number::after {
	content:"（月）";
	}

.monthly-calendar table tbody tr td.tue .day-number::after {
	content:"（火）";
	}

.monthly-calendar table tbody tr td.wed .day-number::after {
	content:"（水）";
	}

.monthly-calendar table tbody tr td.thu .day-number::after {
	content:"（木）";
	}

.monthly-calendar table tbody tr td.fri .day-number::after {
	content:"（金）";
	}

.monthly-calendar table tbody tr td.sat .day-number::after {
	content:"（土）";
	}
	
	}