@charset "UTF-8";
/* CSS Document */


p.tx{
	font-size: 1rem;
	font-weight: bold;
	line-height: 190%;
	margin-top: 2rem;
	}
	@media only screen and (max-width: 480px) {
		p.tx{
			font-size: 0.8rem;
			line-height: 150%;
			margin-top: 1.5rem;
			}
		}
	@media only screen and (max-width: 360px) {}
	@media only screen and (max-width: 260px) {}



.select_sec{
	margin: 1rem 0 5rem 0;
	}

.select_sec___wrap{
	display: flex;
	justify-content: space-between;
	}

/*個別囲み*/
.select_sec___item{
	width: 48%;
	}
.select_sec___item a.btn{
	position: relative;
	display: block;
	background: #fff;
	border: solid 2px #395DAA;
	border-radius: 5px;
	color: #395DAA;
	text-align: center;
	padding: 2rem;
	height: 8rem;
	transition: .2s;
	}
.select_sec___item a.btn:hover{
	background: #395DAA;
	color: #fff;
	}

.select_sec___item span{
	display: block;
	font-weight: bold;
	}

.select_sec___item .ttl_wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	width: 100%;
	}

/*店名*/
.select_sec___item .ttl_name{
	font-size: 2rem;
	line-height: 2.5rem;
	}
/*のご来店予約*/
.select_sec___item .ttl_tx{
	font-size: 1.3rem;
	margin-top: 0.2rem;
	}

	@media only screen and (max-width: 900px) {
		#main{
			width: 94%;
			margin-left: auto;
			margin-right: auto;
			}
		.select_sec___item a.btn{
			padding: 2rem;
			height: 5.5rem;
			}
		/*店名*/
		.select_sec___item .ttl_name{
			font-size: 1.8rem;
			line-height: 2rem;
			}
		/*のご来店予約*/
		.select_sec___item .ttl_tx{
			font-size: 1.2rem;
			margin-top: 0.5rem;
			}
		}
	@media only screen and (max-width: 650px) {
		.select_sec___item a.btn{
			padding: 1.5rem 0.5rem;
			height: 5rem;
			}
		/*店名*/
		.select_sec___item .ttl_name{
			font-size: 1.5rem;
			line-height: 1.8rem;
			}
		/*のご来店予約*/
		.select_sec___item .ttl_tx{
			font-size: 1rem;
			margin-top: 0.2rem;
			}
		}
	@media only screen and (max-width: 540px) {
		.select_sec___wrap{
			display: block;
			justify-content: center;
			}
		.select_sec___item a.btn{
			padding: 1rem 0.5rem;
			height: 4rem;
			}
		/*個別囲み*/
		.select_sec___item{
			width: 100%;
			margin-bottom: 1rem;
			}
		.select_sec___item .ttl_name br{
			display: none;
			}
		/*店名*/
		.select_sec___item .ttl_name{
			font-size: 1.4rem;
			line-height: 1.5rem;
			}
		/*のご来店予約*/
		.select_sec___item .ttl_tx{
			font-size: 1rem;
			margin-top: 0.2rem;
			}
		}
	@media only screen and (max-width: 400px) {
		.select_sec___item a.btn{
			padding: 1rem 0.5rem;
			height: 3.5rem;
			}
		/*店名*/
		.select_sec___item .ttl_name{
			font-size: 1.25rem;
			}
		/*のご来店予約*/
		.select_sec___item .ttl_tx{
			font-size: 0.95rem;
			}
}
	@media only screen and (max-width: 360px) {}
	@media only screen and (max-width: 260px) {}






/*予約可能な内容について*/
.select_step2_sec{
	margin: 2rem 0 1rem 0;
	}

.select_step2___wrap{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	}

.select_step2___item{
	position: relative;
	width: 31%;
	margin-bottom: 2rem;
	}
.select_step2___item .btn{
	background:#E0F3FD;
	border-radius: 5px;
	color: #395DAA;
	padding: 2rem 1.5rem 2rem 1.2rem;
	transition: .2s;
	}

.select_step2___item span{
	display: block;
	font-weight: bold;
	}

.ph_wrap{
	width: 70%;
	margin: 0 auto 1rem auto;
	}
.ph_wrap img{
	width: 100%;
	height: auto;
	}

.ttl_wrap{
	width: 100%;
	}

/*品名*/
.select_step2___item .ttl_name{
	font-size: 1.4rem;
	line-height: 1.8rem;
	text-align: center;
	}
/*詳細について*/
.select_step2___item p{
	color: #000;
	font-size: 1rem;
	margin-top: 0.5rem;
	}

	@media only screen and (max-width: 900px) {
		.select_step2___item{
			width: 48%;
			}
		.select_step2___item .btn{
			padding: 1.5rem 1rem 1.5rem 1rem;
			}
		/*品名*/
		.select_step2___item .ttl_name{
			font-size: 1.25rem;
			line-height: 1.6rem;
			}
		/*詳細について*/
		.select_step2___item p{
			font-size: 0.9rem;
			margin-top: 0.5rem;
			text-align: center;
			}
		}
	@media only screen and (max-width: 650px) {
		.select_step2___item:nth-last-child(-n+2){
			margin-bottom: 0;
			}
		/*品名*/
		.select_step2___item .ttl_name{
			font-size: 1.1rem;
			line-height: 1.5rem;
			}
		/*詳細について*/
		.select_step2___item p{
			font-size: 0.85rem;
			margin-top: 0.3rem;
			}
		}
	@media only screen and (max-width: 540px) {
		.select_step2___item .btn{
			padding: 2rem 0.5rem 1.5rem 0.5rem;
			}
		/*品名*/
		.select_step2___item .ttl_name{
			font-size: 0.9rem;
			}
		/*詳細について*/
		.select_step2___item p{
			font-size: 0.8rem;
			}
		}
	@media only screen and (max-width: 480px) {}
	@media only screen and (max-width: 400px) {
		/*品名*/
		.select_step2___item .ttl_name{
			font-size: 0.9rem;
			line-height: 1.2rem;
			}
		/*詳細について*/
		.select_step2___item p{
			font-size: 0.8rem;
			}
		}
	@media only screen and (max-width: 260px) {}








.circle_box{
	position: absolute;
	top: -0.5rem;
	right: 0.5rem;
	display: inline-block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #395DAA;
	border: solid 2px #395DAA;
	}
.circle_box___wrap{
	position: absolute;
	display: inline-block;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width :80px;
	text-align:center;
	}

.circle_box span{
	color: #fff;
	line-height: 120%;
	}
.circle_box .num{
	font-size: 1.25rem;
	}
.circle_box .unit{
	font-size: 1rem;
	}

.select_step2___item a.btn:hover + .circle_box{
	background: #fff;
	}
.select_step2___item a.btn:hover + .circle_box span{
	color: #395DAA;
	}
	@media only screen and (max-width: 650px) {
		.circle_box{
			width: 70px;
			height: 70px;
			}
		.circle_box___wrap{
			width :70px;
			}
		.circle_box .num{
			font-size: 1.1rem;
			}
		.circle_box .unit{
			font-size: 0.9rem;
			}
		}
	@media only screen and (max-width: 540px) {
		.circle_box{
			top: -1rem;
			right: 0.5rem;
			width: 56px;
			height: 56px;
			}
		.circle_box___wrap{
			width :56px;
			}
		.circle_box .num{
			font-size: 0.9rem;
			}
		.circle_box .unit{
			font-size: 0.75rem;
			}
		}
	@media only screen and (max-width: 480px) {}
	@media only screen and (max-width: 360px) {}
	@media only screen and (max-width: 260px) {}






.submit_button{}

.submit_button a{
	display: block;
	background: #fff;
	border: solid 2px #3569c1;
	border-radius: 0.5rem;
	margin: 2rem auto 6rem auto;
	padding: 1.4rem 1rem 1.2rem 1rem;
	width: 70%;
    text-align: center;
	transition: .2s;
	}

.submit_button a span{
	color: #3569c1;
	font-size: 1.6em;
	font-weight: bold;
	}

.submit_button a:hover{
	background: #3569c1;
	border: solid 2px #3569c1;
	}

.submit_button a:hover span{
	color: #fff;
	}





/*日付選択*/

.monthly-calendar{
	padding-bottom: 2rem;
	}
.monthly-calendar table{
	margin: 0 auto;
	}

.calendar-caption{
	color: #395DAA;
	font-size: 1.2rem!important;
	font-weight: bold;
	margin-bottom: 1.5rem;
	}


/*カレンダーの「ー」非表示*/
.calendar-marking{
	display: none;
	}
a.calendar-daylink .calendar-marking{
	display: block;
	}


td.day-box{
	height: 80px;
	}

td.day-box .day-number{}


/*前の月、次の月*/
.monthly-prev-next{}


/*前の月*/
.monthly-prev-next .monthly-prev{}
.monthly-prev-next .monthly-prev a{}
.monthly-prev-next .monthly-prev a:before{
	content: "\f053";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right:5px;
	}


/*次の月*/
.monthly-prev-next .monthly-next{}

.monthly-prev-next .monthly-next a{}
.monthly-prev-next .monthly-next a:after{
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left:5px;
	}



.monthly-prev-next .monthly-prev .no-link,
.monthly-prev-next .monthly-next .no-link{
	color: #aaa!important;
	}




/*戻るボタン*/

.mtssb-daily-action{}

.mtssb-daily-action button{
	color: #395DAA;
	background: #fff;
	border: solid 1px #395DAA;
	border-radius: 3px;
	font-size: 1rem;
	font-weight: bold;
	padding: 0.5rem 1rem!important;
	cursor: pointer;
	transition: .2s;
	}

.mtssb-daily-action button:hover{
	color: #fff;
	background: #395DAA;
	border: solid 1px #395DAA;
	}





/*時間選択*/

.day-calendar{}

.mtssb-timetable-link{
	margin: 0 auto;
	}


.mtssb-timetable-name{
	/*color: #395DAA;
	font-size: 1.5rem;
	font-weight: bold;*/
	margin-bottom: 0.5rem;
	}

.mtssb-timetable-date{
	color: #395DAA;
	font-size: 1.2rem!important;
	font-weight: bold;
	margin-bottom: 1rem;
	}



/*確認画面*/

#booking-option-table{
	
}

#booking-option-table td:first-of-type label.field-item{
	display: block;
	}





/*確認するボタン*/

#action-button{}

#action-button button{
	background: #fff;
	border: solid 1px #3569c1;
	color: #3569c1!important;
	font-size: 1.3em;
	font-weight: normal;
	border-radius: 50px;
	margin: 3rem auto 4rem auto;
	padding: 12px 20px;
	width: 50%;
	display: block;
    text-align: center;
	}
#action-button button:hover{
	background: #3569c1;
	color: #fff!important;
	border: solid 1px #3569c1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	}
#action-button button:active{
	background: #3569c1;
	color: #fff;
	}



/*TOPページ 利用について*/

.caption_ttl{
	color: #3569c1;
	font-size: 1.2em;
	margin: 2rem 0 0.5rem 0!important;
	}





.caution_box{
	display: block;
	background:#E0F3FD;
	border-radius: 5px;
	padding: 1.2rem 1.5rem 1.2rem 1.5rem;
	}
	@media only screen and (max-width: 650px) {
		.caution_box ul li{
			line-height: 150%;
			margin-bottom: 0.4rem;
			}
		.caution_box ul li:last-child{
			margin-bottom: 0;
			}
		}
	@media only screen and (max-width: 540px) {
		.caution_box{
			padding: 0.8rem 1rem 0.8rem 1rem;
			}
		}
	@media only screen and (max-width: 480px) {}
	@media only screen and (max-width: 360px) {}
	@media only screen and (max-width: 260px) {}