@charset "utf-8";

.scroll-hint-icon{
	z-index:10;
}

/* vacant-info
******************************/
#vacant{
	margin-bottom:60px;
}
#vacant-info{
	position: relative;
	box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	border-radius: 5px;
}

#vacant .title02-set{
	margin-top:20px !important;
}

#vacant .txt-now{
	color:#333 !important;
	margin-bottom:5px;
}

#vacant .txt-zaiko{
	color:#333 !important;
	margin-bottom:20px;
}

#vacant-info .tab-pane{
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	overflow:hidden;
	margin:10px 5px;
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

#vacant-info .nav{
	padding:20px;
	background:url(/static/3/img/bus_search/ja/bg-stripe.png),#fff;
	text-align:center;
	display:flex;
	justify-content: center;
	width:100%;
	flex-wrap: wrap;
}

#vacant-info .nav li{
	width:75px;
	font-size:14px;
	text-align:center;
	line-height:1.0;
	float:none;
	display:inline-block;
	padding: 5px 2.5px;
}

#vacant-info .nav li a{
	display:block;
	color:#333;
	font-weight:bold;
	background:#fff;
	padding:7px 0;
	border-radius:20px;
	border:1px solid #fdd7e5;
}

#vacant-info .nav li a:hover,
#vacant-info .nav li a.active{
	background:#FDD7E5;
	text-decoration:none;
}

#vacant-info table{
	font-size:14px;
	width:98%;
	margin:12px auto 12px 10px;
	
}


#vacant-info table th{
	line-height:1.5 !important;
	vertical-align:middle;
}

#vacant-info table thead th{
	text-align:center;
	border-top:none;
	color:#666;
	border-bottom:1px solid #E7E7E7;
}

#vacant-info table th:first-child,
#vacant-info table td.route_title{
	width:110px;
	background:#F6F6F6;
	padding-left:15px;
	padding-right:15px;
	position: sticky;
	left: 0px;
	z-index:10;
	border-color:#E7E7E7;
}

#vacant-info table td.route_title{
	padding-left:10px;
	padding-right:10px;
	color:#000;
}
#vacant-info table td.route_title a{
	color:#333;
}


#vacant-info table span{
	color:#333;
}
#vacant-info table .vc-sat{
	background:#f2fafd;
	color:#3d94f5;
}
#vacant-info table .vc-sat span{
	color:#3d94f5;
}

#vacant-info table .vc-hol{
	background:#fdf2f7;
	color:#f53d7e;
}
#vacant-info table .vc-hol span{
	color:#f53d7e;
}

#vacant-info table .vc-none{
	color:#bbb !important;
	background:#eee !important;
}

#vacant-info table td{
	padding:11px;
	line-height:1.0;
	vertical-align:middle;
	text-align:center;
}

#vacant-info table th:nth-child(n+1),
#vacant-info table td:nth-child(n+1){
	padding-left:3px;
	padding-right:3px;
}

#vacant-info table td .i-01:before{
	border:3px solid #333;
	content: "";
	border-radius:20px;
	width:18px;
	height:18px;
	display:inline-block;
}

#vacant-info table td.vc-none .i-01:before{
	border-color: #bbb;
	
}

#vacant-info table td .i-02:before{
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	content: "\f00d";
	font-size:18px;
}

#vacant-info table td span{
	font-weight:bold;
	font-size:17px;
}

#vacant-info table .vc-none span{
	color:#bbb !important;
}

#vacant-info table td.vc-sat span:before{
	border-color:#3d94f5;
}

#vacant-info table td.vc-hol span:before{
	border-color:#f53d7e;
}



@media(max-width:375px) {
	#vacant-info .nav li{
		font-size:12px;
	}
	
	#vacant-info table{
		width:890px;
		font-size:12px;
		position:relative;
	}
	#vacant-info table .vc-none{
		display:none;
	}
	
	#vacant-info table td.route_title{
		padding-left:10px;
	}
	
	#vacant-info table th:first-child, 
	#vacant-info table td.route_title{
		width:95px;
		min-width:95px;
		left: -1px;
	}
}

@media(min-width : 375px) and (max-width : 768px)  {

	#vacant-info .nav{
		text-align:center;
		padding:15px 8px;
	}

	
	#vacant-info table{
		margin:0;
		width:890px;
		font-size:12px;
		position:relative;
	}
	
	#vacant-info.v_01 table {
	    width: 100%;
	}
	#vacant-info table .vc-none{
		display:none;
	}
	
	#vacant-info table th,
	#vacant-info table td{
		padding:10px 5px;
	}
	
	#vacant-info table th:first-child,
	#vacant-info table td.route_title{
		width:110px;
		padding-left:5px;
		padding-right:5px;
		left: -1px;
	}
	
	#vacant-info table td.route_title{
		text-align:left;
	}
	
}

@media(min-width : 768px) and (max-width : 992px) {
	#vacant-info table{
		width:890px;
		font-size:12px;
		position:relative;
	}
	
	#vacant-info.v_01 table {
	    width: 100% !important;
	}
	
	#vacant-info.v_01 .scroll-hint-icon-wrap{
		display:none !important;
	}
	#vacant-info table .vc-none{
		display:none;
	}
	
}


@media(min-width : 992px) and (max-width : 1199px) {
	#vacant-info table{
		width:890px;
		font-size:14px;
		position:relative;
	}
	
	#vacant-info table td.route_title{
		font-size:15px;
	}
	
}