@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

/* ===========================
basic
=============================*/
img { border: 0px; vertical-align: bottom; }

/* ===========================
float clear
=============================*/
/* For modern browsers */
.cf:before,
.cf:after { content: ""; display: table; }
 .cf:after { clear: both; }
 
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom: 1; }

/* ===========================
table
=============================*/
.plan_sp { width: 100%; border-spacing: 3px; }
.plan_sp th { padding: 5px 10px; text-align: left; color: #262525; background: #e7e3cf; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-align: center; }
.plan_sp td { padding: 5px 10px; background: #f8f7f1; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-align: center; }
.plan_sp .s_price {	color: #F00; font-weight: bold; line-height: 115%; }
.plan_sp .entry { text-align: left; width: 135px; }
.plan_sp .entry img { width: 30px; margin: 0; padding: 0; border: 0; }
.plan_sp .s_entry { text-align: left; width: 115px; }
.plan_sp .s_entry img { width: 25px; margin: 0; padding: 0; border: 0; }
.plan_sp .s_price .included { font-size: 94%; }
.plan_sp .p_info { text-align: left; }
.plan_sp .p_category { background: #5f9500; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin: 0 0 30px 0; padding: 2px 10px; color: #FFF; font-size: 94%; }
.plan_sp p { margin: 3px 0; }
.plan_sp .c_link a { display: block; background: #e40101; color: #FFF; text-decoration: none; padding: 5px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.plan_sp .c_link a:hover { background: #000; color: #FFF; }
.plan_sp .sat { color: #0266a6; }
.plan_sp .sun { color: #d60000; }

/* ===========================
reserve_status
=============================*/
.reserve_status .status_sp { padding: 0; margin: 0; list-style-type: none; }
.reserve_status .status_sp { width: 100%; background: #FFFFFF; margin-bottom: 10px; }
.reserve_status .status_sp li {	text-align: center; float: left; background: #e7e4dd; color: #0d1300; padding-top: 10px; padding-bottom: 10px; margin-right: 0.5%; margin-bottom: 5px; cursor: pointer; }
@media screen and (min-width: 650px){
.reserve_status .status_sp li { width: 12%; }
}
@media screen and (max-width: 649px){
.reserve_status { font-size: 94%; }
.reserve_status p { font-size: 94%; }
.reserve_status .status_sp li { width: 24.5%; }
}
.reserve_status .status_sp li:hover { background: #686153; color:#FFFFFF; }
.reserve_status .status_sp li.status_sp_active { background: #686153; color: #FFFFFF; font-weight: bold; -moz-border-radius: 15px; -webkit-border-radius: 15px;	border-radius: 15px; }
.reserve_status .status_sp_box { clear: both; display: none; }
.reserve_status .status_sp_active { display: block; }

.reserve_status .status_sp_table { width: 100%; border-spacing: 2px; }
.reserve_status .status_sp_table th { text-align: center; padding: 10px; width: 14.3%; }
.reserve_status .status_sp_table td { text-align: center; vertical-align: top; line-height: 130%; }
.reserve_status .status_sp_table a { padding: 10px; display: block; text-decoration: none; color: #000; }
.reserve_status .status_sp_table a:hover { background: #EEE; }

.reserve_status .c_red01 { color: #F00; }
.reserve_status .c_blue01 { color: #046585; }
.reserve_status .c_grey01 { color: #999999; }
.reserve_status .c_grey02 { color: #cbcbcb; }
.reserve_status .c_green01 { color: #348414; }
.reserve_status .saturday { background: #e4f4fe; }
.reserve_status .weekday { background: #f3f3f3; }
.reserve_status .holiday { background: #fedfdf; }
.reserve_status p { padding: 0; margin: 0; }
.reserve_status .p_10 { padding: 10px; }
.reserve_status .a_center { text-align: center; }
.reserve_status .f_small { font-size: 88%; }
.reserve_status .left_box { float: left; margin-right: 10px; }

.reserve_status .sub_table { background: #FFFFFF; border-spacing: 4px; width: 100%; margin-top: 20px; }
.reserve_status .sub_table th { background: #f0ece1; padding: 7px 8px; text-align: center; border-radius: 2px; }
.reserve_status .sub_table td { background: #f8f7f0; padding: 7px 8px; vertical-align: top; border-radius: 2px; }

.reserve_status .change_button {	text-align: center; margin-top: 15px; }
.reserve_status a.change_button {	display: block;	color: #FFF;	text-decoration: none;	padding: 5px 10px;	-moz-border-radius: 5px;
	-webkit-border-radius:5px;	border-radius: 5px;	background: #989171;	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius: 5px;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #989171), color-stop(1, #b2ab8d));
	background-image: -o-linear-gradient(bottom, #989171 0%, #b2ab8d 100%);
	background-image: -moz-linear-gradient(bottom, #989171 0%, #b2ab8d 100%);
	background-image: -webkit-linear-gradient(bottom, #989171 0%, #b2ab8d 100%);
	background-image: -ms-linear-gradient(bottom, #b2ab8d 0%, #989171 100%);
	background-image: linear-gradient(to bottom, #b2ab8d 0%, #989171 100%);
}
.reserve_status a.change_button:hover {	background: #000;	color: #FFFFFF; }


/* ===========================
script_calendar_table_menu
============================*/
.script_calendar_table_menu { padding: 0; margin: 0; font-size: 13px; }
.script_calendar_table_menu li { text-align: center; float: left;	width: 12%; margin-right: 0.5%; 	margin-bottom: 5px; }
.script_calendar_table_menu li { list-style: none; }
.script_calendar_table_menu li a { padding: 10px; display: block; background: #e7e4dd; color: #000; text-decoration: none; }
.script_calendar_table_menu li a:hover { background: #686153; color: #FFF; }
.script_calendar_table_menu .tab_select a { background: #686153; color: #FFFFFF; font-weight: bold; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }

/* ===========================
script_calendar_table
============================*/
.script_calendar_table { width: 100%; border-collapse: collapse; font-size: 13px; }
.script_calendar_table th.sat { background: #ddf1fe; }
.script_calendar_table th.holiday { background: #fedfdf; }
.script_calendar_table th {
	text-align: center; padding: 5px 2px; line-height: 120%; color: #000; border: 2px #FFF solid; font-weight: normal;
	background: #e7e3cf;
	background: -webkit-linear-gradient(#f6f3e7 30%, #e7e3cf 68%, #f6f3e7 100%);
	background: -o-linear-gradient(#f6f3e7 30%, #e7e3cf 68%, #f6f3e7 100%);
	background: linear-gradient(#f6f3e7 30%, #e7e3cf 68%, #f6f3e7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f3e7', endColorstr='#f6f3e7',GradientType=0 );
}
.script_calendar_table td { text-align: center; padding: 5px 2px; background: #f8f7f1; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border: 2px #FFF solid; }
.script_calendar_table td .plan_img { padding-left: 5px; padding-right: 5px; }
.script_calendar_table td .plan_name { padding: 5px; }
.script_calendar_table td .plan_limit { background: #e5cf38; color: #460000; text-align: center; margin-left: 3px; margin-right: 3px; margin-bottom: 5px; padding: 3px; font-size: 12px; }
.script_calendar_table td dl { width: 96%; margin: 0; padding: 0 2%; }
.script_calendar_table td dt { float: left; width: 35%; text-align: left; }
.script_calendar_table td dd { float: right; width: 45%; font-weight: bold; color: #F10000; text-align: right; }
.script_calendar_table .category {
	text-align: left; padding: 13px 15px; color: #FFF; font-weight: bold;
	background: #222;
	background: -webkit-linear-gradient(#333 30%, #222 68%, #333 100%);
	background: -o-linear-gradient(#333 30%, #222 68%, #333 100%);
	background: linear-gradient(#333 30%, #222 68%, #333 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#333',GradientType=0 );
}
.script_calendar_table .real a { color: #ED0007; text-decoration: none; }
.script_calendar_table .req a { color: #01436d; text-decoration: none; }
.script_calendar_table .holiday { background: #fedfdf; }
.script_calendar_table .sat { background: #ddf1fe; }
.script_calendar_table .other { background: #d8d7ca; }
.script_calendar_table .other_link a { color: #818181; }
.script_calendar_table .plan_icon { padding: 2px 5px; margin-bottom: 2px; background: #ffba00; text-align: center; color: #3a2a00; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.script_calendar_table td a { color: #000; text-decoration: none; }
.script_calendar_table td a:hover { color: #E90000; text-decoration: underline; }
.script_calendar_table p { margin: 0; padding: 0; text-align: left; }

/* ===========================
script_calendar_sma
============================*/
.script_calendar_sma a { color: #000000;	text-decoration: none; }
.script_calendar_sma .month_title { background: #EEEEEE; padding: 10px; line-height: 170%; text-align: center; display: flex; justify-content: space-between; list-style: none; }
.script_calendar_sma .month_title li { text-align: center; }
.script_calendar_sma .month_title li a {	display: block;	color: #FFFFFF;	text-decoration: none;	padding: 2px 10px;	background: #06C;	-moz-border-radius:5px;	-webkit-border-radius:5px;	border-radius:5px;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017db1), color-stop(1, #01a1e3));
	background-image: -o-linear-gradient(bottom, #017db1 0%, #01a1e3 100%);
	background-image: -moz-linear-gradient(bottom, #017db1 0%, #01a1e3 100%);
	background-image: -webkit-linear-gradient(bottom, #017db1 0%, #01a1e3 100%);
	background-image: -ms-linear-gradient(bottom, #01a1e3 0%, #017db1 100%);
	background-image: linear-gradient(to bottom, #01a1e3 0%, #017db1 100%);
}
.script_calendar_sma .month_title li a:hover {	background: #000000;	color: #FFFFFF; }
.script_calendar_sma .category { background: #000; color: #FFF; padding: 10px; margin: 10px 0 0 0; text-align: center; }

.script_calendar_sma .o_plan {	box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.2);	margin: 10px 5px 5px 5px;	padding: 8px;	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	border-radius: 5px;	border: 1px #E4E4E4 solid; }
.script_calendar_sma .o_plan p { padding: 0; margin: 0; }
.script_calendar_sma .o_plan dl { margin: 5px 0 0 0; padding: 0; }
.script_calendar_sma .o_plan dt { float: left; line-height: 140%; color: #3B2800; }
.script_calendar_sma .o_plan dd { float: right; text-align: right; font-weight: bold; color: #EB0000; line-height: 32px; }
.script_calendar_sma .o_plan dt img { margin-right: 1px; width: 32px; height: 32px; }
.script_calendar_sma .o_plan .plan_img { margin-bottom: 5px; }
.script_calendar_sma .o_plan .plan_limit { background: #e5cf38; color: #460000; text-align: left; margin-bottom: 5px; padding: 3px 10px; font-size: 94%; }

.script_calendar_sma .change_button {	text-align: center; }
.script_calendar_sma a.change_button {	display: block;	color: #FFF;	text-decoration: none;	padding: 5px 10px;	-moz-border-radius: 5px;
	-webkit-border-radius:5px;	border-radius: 5px;	background: #989171;	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius: 5px;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #989171), color-stop(1, #b2ab8d));
	background-image: -o-linear-gradient(bottom, #989171 0%, #b2ab8d 100%);
	background-image: -moz-linear-gradient(bottom, #989171 0%, #b2ab8d 100%);
	background-image: -webkit-linear-gradient(bottom, #989171 0%, #b2ab8d 100%);
	background-image: -ms-linear-gradient(bottom, #b2ab8d 0%, #989171 100%);
	background-image: linear-gradient(to bottom, #b2ab8d 0%, #989171 100%);
}
.script_calendar_sma a.change_button:hover {	background: #000;	color: #FFFFFF; }

/* ===========================
link button
============================*/
.script_more_link { text-align: center; margin-top: 20px; }
.script_more_link a { display: block; background: #e1dcc7; color: #3f2706; text-decoration: none; padding: 15px 5px; margin-left: 5%; margin-right: 5%; border-radius: 10px; }
.script_more_link a:hover { background: #000; color: #FFF; }
.script_more_link i { margin-right: 7px; }

@media screen and (max-width: 650px) {
	.script_more_link a { margin-left: 1%; margin-right: 1%; }
}
