@charset "utf-8";

@import "base_layout.css";
@import "common_parts.css";
@import "news.css";


/* ご案内
-------------------------------------------------------*/
.side .box{
	margin:0 auto 10px auto;
	padding:12px 0;
	width:240px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:0px 0px 3px #AAA;
	-moz-box-shadow:0px 0px 3px #AAA;
	-webkit-box-shadow:0px 0px 3px #AAA;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.side .bg_train{
	background: url(../../img/side/bg_pink.jpg);
}
.side .bg_bus{
	background: url(../../img/side/bg_blue.jpg);
}
.side .box_status{
	margin:5px auto;
	width:208px;
}
.side .box_status .ttl{
	padding:5px 10px;
	border-radius: 5px 5px 0 0;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border:1px solid #FFF;
	box-shadow:0px 2px 2px #AAA;
	-moz-box-shadow:0px 2px 2px #AAA;
	-webkit-box-shadow:0px 2px 2px #AAA;
	background:-webkit-gradient(linear,center top, center bottom,from(#fefefe), to(#e2e2e2));
	background:-moz-linear-gradient(top, #fefefe, #e2e2e2);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffefefe',endColorstr='#ffe2e2e2');
	background: linear-gradient(to bottom, #fefefe, #e2e2e2);
}
.side .box_status .ttl .ttl_status{
	padding-top:4px;
	width:44px;
	height:16px;
	float:left;
}
.side .box_status .ttl .btn_renew a{
	padding:3px 5px;
	width:37px;
	height:16px;
	border:2px solid #FFF;
	float:right;
}
.side .box_status .ttl .btn_renew a:hover{
	background-color:#999;
}
.side .bg_train .btn_renew a{
	background-color:#f14a4a;
}
.side .bg_bus .btn_renew a{
	background-color:#004e97;
}
.side .box_status .txt{
	padding:5px 10px;
	border-right:1px solid #FFF;
	border-left:1px solid #FFF;
	border-bottom:1px solid #FFF;
}
.side .btn{
	padding-left:1px;
}
.side .btn img{
	float:left;
}
.side .banner{
	margin:140px auto 0 auto;
	width:222px;
}
.side .banner li img{
	width:100%;
}
.side .areaInfo .box #areaStatus{
	margin:5px auto 0;
	width:238px;
	/*height:130px;*/
	height:110px;
	overflow:hidden;
}
@media screen and (max-width: 768px) {
/*tablet*/
.side .areaInfo{
	margin:10px 0;
	width:100%;
	display:table;
}
.side .box{
	margin:5px 1%;
	border:2px solid #FFF;
	padding:12px 0;
	width:46%;
	display:table-cell;
}
.side .btn{
	padding:0;
	text-align:center;
}
.side .btn img{
	float: none;
	display:inline-block;
}
.side .banner{
	margin:10px 0 0 0;
	width:100%;
}
.side .banner li{
	border-right:2px solid #FFF;
	border-left:2px solid #FFF;
	width:20%;
	float:left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.side .banner li img{
	width:100%;
}
}
@media screen and (max-width: 479px) {
/*sp*/
.side .areaInfo{
	display: block;
}
.side .box{
	margin:10px auto;
	width:98%;
	border: none;
	display:block;
}
.side .banner li{
	margin:1px auto;
	width:98%;
	float: none;
}
}



/*carousel
************************************************************************************/
#carousel{
	padding: 15px 30px 0;
	width: 726px;
	border:1px solid #EEE;
	box-shadow:0px 2px 2px #CCC;
	-moz-box-shadow:0px 2px 2px #CCC;
	-webkit-box-shadow:0px 2px 2px #CCC;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#carousel img{
	width:100%;
}
@media screen and (max-width: 768px) {
/*tablet*/
#carousel{
	width: 100%;
}
}
@media screen and (max-width: 479px) {
/*sp*/
}


.box_info{
	margin:15px 0 0 0;
	padding:3px 6px;
	width:100%;
	border:3px solid #be2723;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.box_info .ttl{
	padding-top:12px;
	padding-left:2px;
	width:133px;
	float:left;
}
.box_info .list{
	padding-right:4px;
	width:548px;
	float:right;
}
.box_info .list li{
	margin:4px;
	width:100%;
	background:#eeeeee;
	display: table;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.box_info .list li .cate{
	padding:4px 10px 4px 4px;
	width:73px;
	display: table-cell;
}
.box_info .list li .cate img{
	display:block;
}
.box_info .list li .txt{
	padding:4px 0;
	display: table-cell;
	vertical-align:middle;
	font-size:14px;
}
@media screen and (max-width: 768px) {
/*tablet*/
.box_info .ttl{
	width:100%;
	float:none;
}
.box_info .list{
	padding:0;
	width:100%;
	float:none;
}
}
@media screen and (max-width: 479px) {
/*sp*/
}