@charset "utf-8";

*:hover{
	transition: all  0.2s ease;
}

#section-breadcrumb{
	margin-top:100px;
}

.wrap{
	max-width:960px;
	margin:20px auto;
	padding-top:20px;
}
.card-body{
	padding:1.5rem 2.25rem;
}



@media(min-width : 992px) and (max-width : 1199px) {
	.wrap{
		max-width:800px;
	}
}


@media(min-width : 768px) and (max-width : 991px) {
	.wrap{
		max-width:700px;
	}
}


@media(max-width:767px) {
	.wrap{
		max-width:95%;
	}
	
	.card-body{
		padding:1rem;
	}
}

.area-active{
	display:block;
}

.date-disable,
.area-disable{
	display:none !important;
}




/*
h1
*******************************************/

h1{
	text-align:center;
	font-size:24px;
	font-weight:bold;
	color:#fff;
	margin-bottom:12px;
}



/*
datepicker
*******************************************/

input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator {
	color: transparent;
	position: relative;
}

input[type=date],
input[type=month]{
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
}

/*
day
*******************************************/

.datepicker--day-name{
	color:#fff;
	background:#333;
}

.datepicker--cell-day:nth-child(7n+1) ,
.datepicker--cell-day.holiday{
	color:#da4453;
}

.datepicker--cell.-current-{
	font-weight:bold;
	color:#F989B1;
	background:#fce9f0;
}

.datepicker--cell-day:nth-child(7n) {
	color:#3bafda;
}

.datepicker--cell.-selected-, .date{
	color:#fff !important;
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade-{
	color:#dedede !important;
}


/*
searchbox-status
**************************************/


.searchbox-status input:hover,
.searchbox-status select:hover{
	cursor:pointer;
}

.searchbox-status{
	width:100%;
	padding:20px 30px 30px 30px;
	margin:20px auto 0px auto;
	background:#F989B1;
	border-radius:10px;
}

.form-control:disabled, .form-control[readonly]{
	background:#fff;
}

#departure_pref,
#departure_region{
	-webkit-appearance: none;
	background: url(/static/img/common/icon/i-nav-dep.png) #fff no-repeat 96% 50%;
	padding: 8px 12px;
}

#bus_brand{
	-webkit-appearance: none;
	background: url(/static/img/common/icon/i-nav-arrow-off.gif) #fff no-repeat 96% 50%;
	padding: 8px 12px;
}


#departure_date{
	background: url(/static/img/common/icon/i-nav-day.png) #fff no-repeat 96% 50% !important;
	padding: 8px 12px;
	color:#000 !important;
}

input#departure_date::placeholder,
#departure_date.datepicker{
	color: #666 !important;
	text-align: left !important;
	font-size: 16px;
}

.datepicker--cell.-disabled-{
	color:#aaa !important;
}

.datepicker--cell.-disabled-.-focus-{
	background:none !important;
}

input#departure_date::placeholder {
	position: relative;
	top: 0.1em;
}

@media(max-width:767px) {
	.searchbox-status{
		width:95%;
		padding:25px;
		margin:10px auto 10px auto;
	}
	.searchbox-status .mb-15{
		margin-bottom:15px;
	}
	
	.datepicker { 
		margin-left: 100px;
		z-index: 1000;
	}	
	
	.-bottom-right- .datepicker--pointer, .-top-right- .datepicker--pointer{
		left:10px;
	}
}

/*
disc-box
**************/

.disc-box{
	padding:0px 30px 30px 20px;
}

.disc-box a{
	font-size:16px;
	color:#337ab7;
	text-decoration:underline;
}

.disc-box a:hover{
	text-decoration:none;
}

@media(max-width:767px) {
	.disc-box{
		padding:10px 30px 20px 30px;
	}
}

/*
result-box
**************/

.result-box .card-header{
	padding:0;
}

.result-box .card-header {
	padding:20px 30px;
	background:#fff;
}
.result-box li a .card-header{
	display:block;
	color:#333;
	font-weight:bold;
	text-decoration:none;
	position: relative;
	background:rgba(0,0,0,.03);
}

.result-box li .card-header{
	padding:20px 30px;
	display:block;
	color:#333;
	font-weight:bold;
	text-decoration:none;
	position: relative;
	background:#fff;
}

.result-box li a:hover .card-header{
	background:#feebf2;
}

.result-box li.status02 a.area-ttl:hover{
	cursor:pointer;
	background:#feebf2;
}

.result-box a .card-header:after{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 15px;
	content: "\f077";
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	color:#333;
}

.result-box a.collapsed .card-header:after{
	content: "\f078";
}

.result-box .card-header dt{
	font-size:24px;
	float:left;
}

.result-box .card-header dd{
	font-size:24px;
	float:right;
	margin-right:30px;
}

.result-box .card-header dl:after{
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

.result-box .card-header a dd{
	color:#cc0000;
}

.result-box .card-header a dd:before{
	color:#cc0000;
	content:"\f071";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	margin-right:10px;
}

.result-box .card-header dd{
	color:#339900;
}

.status01 .card-header,
.status02 .card-header{
	border-bottom:none;
}

@media(min-width:768px) {
	ul.date-list > li + li{
		margin-top:10px !important;
	}
}
@media(max-width:767px) {
	.result-box .card-header dt,
	.result-box .card-header dd{
		text-align:center !important;
		font-size:16px;
	}
	
	.result-box .card-header dt{
		width:180px;
	}
	.result-box .card-header dd{
		width:120px;
	}
	
	.result-box li .card-header,
	.result-box li a .card-header{
		padding:10px 5px;
	}
	
	.result-box li a:hover .card-header{
		background:rgba(0,0,0,.03);
	}
}
@media(max-width:374px) {
	.result-box .card-header dt,
	.result-box .card-header dd{
		text-align:center !important;
		font-size:14px;
	}
	
	.result-box .card-header dt{
		width:145px;
	}
	.result-box .card-header dd{
		width:90px;
	}
	
}

a.rosen-link{
	border:none;
	font-size:18px;
	outline:none;
	color:#337ab7;
	text-align:left;
	text-decoration:underline !important;
	padding:0 100px 0 55px;
	position: relative;
	word-wrap: break-word;
	outline:none;
	display:block;
	letter-spacing:-0.7px;
	
}

a.rosen-link:hover{
	text-decoration:none !important;
}

a.rosen-link.bus-day{
	background:url(/st/3/ja/pc/bus/sys/img/ico/icon_hirukou.png) no-repeat left center;
}

a.rosen-link.bus-night{
	background:url(/st/3/ja/pc/bus/sys/img/ico/icon_yakou.png) no-repeat left center;
}

a.rosen-link.bus-day-night{
	background:url(/st/3/ja/pc/bus/sys/img/ico/icon_hirukou_yakou.png) no-repeat left center;
}

a.rosen-link:hover{
	text-decoration:none;
}

a.rosen-link:after{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right:0px;
	content: "\f151";
	font-size:24px;
	font-weight:900;
	font-family: "Font Awesome 5 Free";
	color:#F53D7E;
	padding:0;
	text-align:center;
	border-radius:4px;
}

a.rosen-link:focus{
	outline:none;
}

a.rosen-link.collapsed:after{
	content: "\f150";
}

a.rosen-link .num{
	position:absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right:36px;
	color:#333;
	font-size:20px;
	font-weight:bold;
}

@media(max-width:767px) {
	a.rosen-link .num{
		right:20px;
		font-size:16px;
	}
	.rosen-ttl-box{
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		background:#fff;
		padding:5px 0;
	}
}

.brand-name{
	font-size:14px;
	color:#666;
	padding-right:0px;
	margin:5px 0 10px 0;
	word-wrap: break-word;
}

.txt-note{
	font-weight:bold;
	padding:15px;
	color:#cc0000;
	border:1px solid #ccc;
	border-bottom:none;
}

ul.suspend_details{
	margin-left:-10px;
	margin-right:-10px;
}
ul.suspend_details li{
	padding:20px 10px 10px 10px;
}
ul.suspend_details li{
	border-top:1px dotted #ccc;
}

@media(max-width:767px) {
	a.rosen-link{
		font-size:14px;
		padding-right:50px;
		margin-left:0px;
		display:block;
	}
	a.rosen-link:after{
		right:-3px;
	}
	a.rosen-link:after{
		font-size:20px;
	}
	
	ul.suspend_details{
		margin-left:-10px;
		margin-right:-10px;
	}
	ul.suspend_details li{
		padding:15px 10px 5px 10px;
	}
	ul.suspend_details li{
		border-top:1px dotted #ccc;
	}
}
@media(max-width:374px) {
	a.rosen-link{
		font-size:13px;
		padding-left:50px;
		padding-right:60px;
	}
	a.rosen-link .num{
		font-size:14px;
		right:17px;
	}
}
.date-list table{
	width:100%;
	font-size:16px;
	margin:0 auto 20px auto;
	table-layout: fixed;
}
.date-list table th{
	width:125px;
	background:#eee;
}

.date-list table th,
.date-list table td{
	border:1px solid #ccc;
	padding:10px;
	word-wrap: break-word !important;
}

.date-list table td a{
	color:#337ab7;
	text-decoration:underline !important;
}
.date-list table td a:hover{
	text-decoration:none !important;
}

@media(max-width:767px) {
	.txt-note{
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	.date-list table{
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	.date-list table th{
		width:105px;
	}

	.brand-name{
		font-size:12px;
		margin:2px 0 5px 0;
	}

}

.area-name{
	display:inline-block;
}

.status-num{
	width:110px;
	display:inline-block;
	text-align:right;
	float:right;
}

/*
area-list
*****************************/

ul.area-list{
	width:100%;
	margin:0 auto;
}

ul.area-list dl{
	font-size:22px;
}

ul.area-list dl:after{
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

ul.area-list dt,
ul.area-list dd{
	display:inline-block;
	padding:15px 30px;
	font-weight:bold;
}
ul.area-list dt{
	width:40%;
}
ul.area-list dd{
	width:50%;
	float:right;
	text-align:right!important;
	padding-right:40px!important;
}

ul.area-list a{
	text-decoration:none;
}

ul.area-list > li{
	border:1px solid #ccc;
	border-radius:5px;
}

ul.area-list > li + li{
	margin-top:5px;
}

.area-in{
	padding:15px 30px;
}

@media(min-width : 768px) and (max-width : 991px) {
	ul.area-list{
		width:100%;
	}
}

@media(max-width:767px) {
	ul.area-list{
		width:97%;
	}
	ul.area-list dl{
		font-size:16px;
	}
	ul.area-list dt, 
	ul.area-list dd{
		padding:10px 15px;
	}
	
	.area-in{
		padding:10px;
	}
}


@media(max-width:374px) {
	ul.area-list dl{
		font-size:16px;
	}
}

a.area-ttl{
	display:block;
	position: relative;
	color:#333;
	background: #feebf2;
}
a.area-ttl:after{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 15px;
	content: "\f0d8";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size:20px;
	color: #333;
}
a.area-ttl.collapsed:after{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 15px;
	content: "\f0d7";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size:20px;
	color: #333;
}

/*
btn-sort-set
*****************************/
.btn-sort-set ul.btn-group{
	margin:0 0 10px 0px;
}

.btn-sort-set ul.btn-group li.btn,
.btn-sort-set ul.btn-group li.btn:focus-within{
	margin:5px 3px !important;
	padding:5px 0px 5px 12px;
	color:#333;
	border:1px solid #ccc;
	border-radius:3px !important;
	display:inline-block;
	width:130px;
	text-align:center;
	position: relative;
}

.btn-sort-set ul.btn-group li.btn:first-child{
	margin-left:0 !important;
}

.btn-sort-set ul.btn-group li input[type=checkbox] {
	display: none;
}



.btn-sort-set ul.btn-group li{
	display:inline-block;
}

.btn-sort-set ul.btn-group li.btn:focus,
.btn-sort-set ul.btn-group li.btn:active,
.btn-sort-set ul.btn-group li.btn:visited,
.btn-sort-set ul.btn-group li.btn.active{
	color:#fff !important;
	background:#F53D7E !important;
	cursor:pointer;
}

.btn-sort-set ul.btn-group li.active:hover{
	opacity:0.8;
}



.btn-sort-set ul.btn-group li.btn:before{
	color:#fff !important;
}


.btn-sort-set ul.btn-group li.btn:before{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 10px;
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-size: 10px;
	font-weight: 900;
	color:#ccc !important;
}

.btn-sort-set ul.btn-group li.btn.active:before,
.btn-sort-set ul.btn-group li.btn.active:hover:before{
	color:#fff !important;
}

@media(max-width:1199px) {
	.btn-sort-set ul.btn-group li.btn:hover,
	.btn-sort-set ul.btn-group li.btn:focus,
	.btn-sort-set ul.btn-group li.btn:active,
	.btn-sort-set ul.btn-group li.btn:visited{
		color:#333 !important;
		background:#fff !important;
	}
	
	.btn-sort-set ul.btn-group li.btn.active{
		color:#fff !important;
		background:#F53D7E !important;
	}
	
	.btn-sort-set ul.btn-group li.active:hover{
		opacity:1.0;
	}
	.btn-sort-set ul.btn-group li.btn:before{
		color:#ccc ;
	}
	.btn-sort-set ul.btn-group li.btn:hover:before{
		color:#ccc;
	}
	
	.btn-sort-set ul.btn-group li.btn:hover:before,
	.btn-sort-set ul.btn-group li.btn:active:before{
		color:#ccc !important;
	}
	
	
}

@media(max-width:767px) {
	.btn-sort-set ul.btn-group{
		text-align:center;
		margin-left:0;
	}
	
	.btn-sort-set ul.btn-group li.btn{
		font-size:12px;
		padding:5px 0px 5px 10px;
		margin-top:10px !important;
		margin-bottom:7px !important;
		border-radius:5px;
		letter-spacing:1px;
		width:75px;
		text-align:center;
	}
	
	.btn-sort-set ul.btn-group li.btn:before{
		left:3px;
	}
	
	.btn-sort-set ul.btn-group li:nth-child(2) {
		width:95px;
		padding-left:10px;
	}
	
}

@media(max-width:374px) {
	.btn-sort-set ul.btn-group{
		display:block;
	}
	.btn-sort-set ul.btn-group li{
		width:130px !important;
	}
	.btn-sort-set ul.btn-group li:nth-child(1) ,
	.btn-sort-set ul.btn-group li:nth-child(2) {
		margin-bottom:0 !important;
	}
	
	.btn-sort-set ul.btn-group li:nth-child(1) ,
	.btn-sort-set ul.btn-group li:nth-child(3) {
		margin-left:0 !important;
	}
}


/*
枠無し調整
**********************/

@media(max-width:767px) {

	.wrap{
		max-width:100%;
	}
	
	.searchbox-status h1{
		font-size:18px;
	}

	.card{
		border:none;
	}
	
	ul.date-list{
		border-bottom:1px solid rgba(0,0,0,.125);
	}

	.card-header {
		border-top: 1px solid rgba(0,0,0,.125);
		border-bottom:none;
	}

	ul.date-list > li:last-child{
		/*border-bottom: 1px solid rgba(0,0,0,.125);*/
	}

	.card-body{
		padding:0;
	}
	ul.area-list{
		width:100%;
	}

	ul.area-list{
		margin-bottom:0px;
	}

	ul.area-list > li{
		border:none;
	}

	ul.area-list > li + li{
		margin-top:0;
		border-top:1px dotted #fff;
	}

	.result-box .card-header dt{
		text-align:left !important;
		padding-left:10px;
	}
	.area-in{
		padding:5px 10px 5px 10px;
	}
	
	a.area-ttl:hover{
		background:#feebf2;
	}
	
	.area-active{
		border-top:1px solid #fff !important;
	}
	
	ul.area-list .area-ttl dt{
		padding-left:15px;
	}
	
	ul.area-list a.area-ttl,
	ul.area-list a.area-ttl:hover{
		background:#feebf2;
	}
	
	.result-box li.status02 .card-header a:hover{
		background:rgba(0,0,0,.03);
	}
	
	table th, 
	table td{
		font-size:14px;
	}
}


#suspend_message,
#normal_message{
	margin:40px 0;
	padding:30px;
	box-shadow:0px 0px 3px 1px rgba(0,0,0,0.1);
	border-radius:5px;
	background:#fffdf6;
}

#suspend_message h2,
#normal_message h2{
	color:#fff;
	font-size:20px;
	font-weight:bold;
	background:#cc0000;
	margin:-30px -30px 30px -30px;
	padding:15px;
	text-align:center;
	border-radius:5px 5px 0 0;
}

#suspend_message h2 i,
#normal_message h2 i{
	color:#fff;
	font-size:20px;
	margin-right:10px;
}

#suspend_message a,
#normal_message a{
	color:#337ab7;
	text-decoration: underline;
}

#suspend_message a:hover,
#normal_message a:hover{
	text-decoration: none;
}

#suspend_message a i,
#normal_message a i{
	color:#333;
}

.txt-link {
	margin:7px;
}

#suspend_message li,
#normal_message li{
	padding-left:20px;
	position: relative;
}

#suspend_message li:before,
#normal_message li:before{
	content:"※";
	position: absolute;
	top:0px;
	left: 0;
}

#data_time{
	margin-top:20px;
	padding:0 15px 15px 0;
	text-align:right;
}

@media(max-width:767px) {
	#suspend_message,
	#normal_message{
		width:95%;
		margin:30px auto;
	}
	#suspend_message h2,
	#normal_message h2{
		font-size:18px;
	}
}

/*
運休なし
**********************/

.status-label01{
	color:#339900 !important;
}

.status-label01 i{
	margin-right:15px;
}



/*
運休あり
**********************/
.status-label02{
	color:#cc0000 !important;
}

.status-label02 i{
	margin-right:15px;
}

/*
緊急メッセージ枠
**********************/

#additional_message{
	margin:0px 0 20px 0;
	padding:20px 30px;
	border:1px solid #f38585;
	line-height:1.7;
	border-radius:5px;
	background:#fffdf6;
}

#additional_message .tit-lv2{
	font-size:20px;
	font-weight:bold;
	color:#cc0000;
}

#additional_message .txt-bld{
	font-weight:bold;
}

#additional_message .txt-red{
	color:#cc0000;
}

#additional_message .txt-l{
	font-size:24px;
}

#additional_message a{
	color:#337ab7;
	text-decoration:underline;
	position: relative;
	padding-left:15px;
}

#additional_message a:hover{
	text-decoration:none;
}

#additional_message a:before{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	content:"\f0da";
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	color:#333;
}


@media(max-width:767px) {
	#additional_message{
		margin:0px 10px 15px 10px;
		padding:17px;
		border:1px solid #f38585;
		line-height:1.7;
		border-radius:5px;
		background:#fffdf6;
		font-size:14px;
	}

	#additional_message .tit-lv2{
		font-size:16px;
		text-align:center;
	}

	#additional_message .txt-l{
		font-size:18px;
	}

	#additional_message a:before{
		position: absolute;
		top:10px;
		left: 0;
		content:"\f0da";
		font-family: "Font Awesome 5 Free";
		font-weight:900;
		color:#333;
	}
	#additional_message a{
		padding-left: 15px;
		display:inline-block;
	}
}

.info-link{
	background:#feebf2;;
	border-radius:4px;
	display:block;
	padding:15px 20px;
	margin-bottom:20px;
}

.info-link li + li{
	margin-top:5px;
}

.info-link p{
	margin-bottom:0 !important;
}

.info-link p + p{
	margin-top:10px;
}

.info-link a{
	color:#cc0000;
	font-size:16px;
	font-weight:bold;
	text-decoration:underline;
}

.info-link a:hover{
	text-decoration:none;
}

@media(max-width:767px) {
	.info-link{
		padding:10px;
	}
	.info-link a{
		font-size:14px;
		display:inline-block;
	}
	.info-link p + p{
		margin-top:10px;
	}
}

.in-box .bin_show + .bin_show:before{
	content:" , ";
}



/*
loader
******************************/


#loader {
    position: fixed;
    top:calc(50% - 120px/2);
    left:calc(50% - 180px/2);
	width: 180px;
	height: 120px;
	text-align: center;
	color: #333;
	z-index: 1000000;
	background:rgba(255,255,255,0.8);
	padding:20px;
	border-radius: 10px;
	border:3px solid #666;
}

#loader p{
	padding:15px;
	font-size:18px;
	font-weight:bold;
}

/* =========================================================
	追加カスタマイズ
========================================================= */
.info-howto {
	margin:40px 0;
	padding:30px;
	box-shadow:0px 0px 3px 1px rgba(0,0,0,0.1);
	border-radius:5px;
	background:#fffdf6;
	background: #f0f5fa;
}
@media (max-width: 767px) {
	.info-howto {
		width: 95%;
		margin: 30px auto;
	}
}
.info-howto a {
	color: #337ab7;
	text-decoration: underline;
}
.info-howto a i {
	color: #333;
}
.info-howto h2 {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	background: #337ab7;
	margin: -30px -30px 30px -30px;
	padding: 15px;
	text-align: center;
	border-radius: 5px 5px 0 0;
}
.info-howto span {
	font-weight: normal;
}