@charset "UTF-8";
/*運行状況
------------------------------------------------------------------------------*/
#display.today{
	background:#148BC5;
	max-width:999px;
	margin:0 auto;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
	border-radius:5px;
}
#display.today .explanatory {
	color:#FFF;
	font-size: 1em;
	padding-left: 1em;
	text-indent: -1em;
	display: block;
	margin-bottom: 2px;
}

#display.today a{
	/*color: #337ab7;*/
}
#display.today .images img{border-radius:5px;}

#lang-select{
	background:#106d9a;
	border-radius:5px 5px 0 0;
	font-weight:bold;
}
#lang-select a{
	color: #FFF;
	width: 25%;
	text-align: center;
	display: inline-block;
	padding:0.5em 0;
	text-decoration:none;
	position:relative;
}
#lang-select a:hover{
	color:#ffff88;
	text-decoration:none;
}


#status-wrap.JP #lang-select a:nth-child(1){color:#FFFF00;}
#status-wrap.EN #lang-select a:nth-child(2){color:#FFFF00;}
#status-wrap.CN #lang-select a:nth-child(3){color:#FFFF00;}
#status-wrap.KR #lang-select a:nth-child(4){color:#FFFF00;}

#status-wrap.JP #lang-select a:nth-child(1):after,
#status-wrap.EN #lang-select a:nth-child(2):after,
#status-wrap.CN #lang-select a:nth-child(3):after,
#status-wrap.KR #lang-select a:nth-child(4):after{
	content: " ";
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #FFF;
	position: absolute;
	bottom: -5px;
	left: calc(50% - 4.5px);
	border-radius: 5px;
}

#traffic-area{
	border-radius:0 0 5px 5px;
	border: solid 4px #106d9a;
	background: #FFF;
}
.traffic-area{
	color:#337ab7;
}
#traffic-list{
	margin:0;
	padding:0;
}

#traffic-list li{
	margin:0;
	padding:0;
	list-style:none;
	border-bottom:solid 1px #CCC;
	font-size:12.5px;
	font-size:11.5px;
}
#traffic-list li:last-child{
	border-bottom:none;
}
#traffic-list li a{
	display:block;
	display: flex;
	position:relative;
	padding: 0.1em 1em;
	width:100%;
	height:100%;
	/*min-height: 3.2em;*/
	/*min-height: 3.05em;*/
	min-height: 3.32em;
	font-weight:bold;
	text-decoration:none!important;
	text-decoration-color:none;
	align-items: center;
	box-sizing: border-box;
}
#traffic-list li .info{
	width: calc(100% - 2em);
	width: 68%;
	min-height: 1em;
	/*position:absolute;*/
	display:block;
}
#traffic-list li .detail{
	width: 100%;
	min-height: 1em;
	min-width: 40px;
	display:none;
	display:block;
	color:#000;
	text-decoration:none!important;
	text-align: center;
	font-size: 2.2em;
	font-weight:bold;
	font-family: Monaco, monospace;
}

/*
#traffic-list li a:hover .info{
	display:none;
}
*/
/*
#traffic-list li a:hover .detail{
	display:block;
	color:#000;
}
*/
#traffic-list li a:hover{
	text-decoration:none;
}

.traffic-status{
	float: right;
	font-weight:bold;
	position: relative;
	display:none;
}
.traffic-status i{
	font-weight:bold;
	font-size:  2.2em;
	position: absolute;
	margin-top: -0.3em;
	margin-left:-1.5em;
	text-align:center;
	width:2em;
	font-family: Monaco, monospace;
	/*font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif!important;*/
}

#traffic-status{white-space: nowrap;}


#traffic-status.ok .detail{
	color: goldenrod;
}
#traffic-status.ng .detail{
	color: goldenrod;
}
#traffic-status.st .detail{
	color: red;
}

/*
.traffic-status i.ok {
	color: #337ab7;
}
.traffic-status i.ng {
	color: goldenrod;
}
.traffic-status i.st {
	color: red;
}
*/

#status-wrap.JP .info{width: 100%;}
#status-wrap.EN .info{width: 100%;}
#status-wrap.CN .info{width: 100%;}
#status-wrap.KR .info{width: 100%;}

#status-wrap.JP #traffic-status{}
#status-wrap.EN #traffic-status{}
#status-wrap.CN #traffic-status{}
#status-wrap.KR #traffic-status{}



/*初回表示　日本語*/
#status-wrap.JP .traffic-area.JP{display:inline-block; /*font-size:0.9em;*/}
#status-wrap.JP .traffic-area.EN,
#status-wrap.JP .traffic-area.CN,
#status-wrap.JP .traffic-area.KR{display:none!important;}

#status-wrap.JP .detail.JP{}
#status-wrap.JP .detail.EN,
#status-wrap.JP .detail.CN,
#status-wrap.JP .detail.KR{display:none!important;}


#status-wrap.EN .traffic-area.EN{display:inline-block; /*font-size:0.9em;*/}
#status-wrap.EN .traffic-area.JP,
#status-wrap.EN .traffic-area.CN,
#status-wrap.EN .traffic-area.KR{display:none!important;}

#status-wrap.EN .detail.EN{}
#status-wrap.EN .detail.JP,
#status-wrap.EN .detail.CN,
#status-wrap.EN .detail.KR{display:none!important;}


#status-wrap.CN .traffic-area.CN{display:inline-block; /*font-size:0.9em;*/}
#status-wrap.CN .traffic-area.JP,
#status-wrap.CN .traffic-area.EN,
#status-wrap.CN .traffic-area.KR{display:none!important;}

#status-wrap.CN .detail.CN{}
#status-wrap.CN .detail.JP,
#status-wrap.CN .detail.EN,
#status-wrap.CN .detail.KR{display:none!important;}


#status-wrap.KR .traffic-area.KR{display:inline-block; /*font-size:0.9em;*/}
#status-wrap.KR .traffic-area.JP,
#status-wrap.KR .traffic-area.EN,
#status-wrap.KR .traffic-area.CN{display:none!important;}

#status-wrap.KR .detail.KR{}
#status-wrap.KR .detail.JP,
#status-wrap.KR .detail.EN,
#status-wrap.KR .detail.CN{display:none!important;}


@media (max-width: 999px) {
	#traffic-list li a{
		padding: 0.75em 0.5em;
	}
	.traffic-status i{
		margin-left: -0.6em;
		width: 1em;
	}
}

@media (min-width: 1000px) {
	.traffic-area.JP br,
	.traffic-area.CN br,
	.traffic-area.KR br{display:none;}
	.traffic-area.JP,
	.traffic-area.CN,
	.traffic-area.KR{/*font-size:1.1em!important;*/}
	.traffic-area.EN{/*font-size:1em!important;*/}
}
@media (min-width: 768px) and (max-width: 999px) {
	.traffic-area br{
		display:none;
	}
}
@media (min-width: 320px) and (max-width: 999px) {
	.traffic-area.JP,
	.traffic-area.CN,
	.traffic-area.KR{/*font-size:1em!important;*/}
}
@media (max-width: 375px){
	#status-wrap.EN .traffic-area.EN{
		/*font-size:0.8em;*/
	}
	#time .sub-ttl small{font-size:0.7em;}
}

@media (max-width: 375px){
	.lang_title {
		margin: -2em 0 0 0.5em;
	}
}

/*
@media (min-width: 768px) and (max-width: 999px) {
	.traffic-area.JP,
	.traffic-area.CN,
	.traffic-area.KR,
	.traffic-area.EN{font-size:1.8vw!important;}
}

@media (max-width: 767px){
	.traffic-area.JP,
	.traffic-area.CN,
	.traffic-area.KR,
	.traffic-area.EN{font-size:2vw!important;}
}
*/

@media (min-width: 768px) and (max-width: 999px) {
	#status-wrap .info {
	  font-size: 1.8vw;
	}
}
@media (max-width: 767px){
	#status-wrap .info {
	  font-size: 1.8vw;
	}
}
@media (max-width: 580px){
	#status-wrap .info {
	  font-size: 2.5vw;
	}
}
@media (max-width: 425px){
	#status-wrap .info {
	  font-size: 3vw;
	}
}
@media (max-width: 375px){
	#status-wrap .info {
	  font-size: 3.5vw;
	}
	/*#status-wrap .traffic-area.EN{font-size:1.2vw;}*/
	#status-wrap .info {
	  font-size: 3vw;
	}

}