/*┌──────────────────────────────────────
/*│  汎用スタイルシート v0.0.1 (2008/05/23)
/*│  style.css
/*│  Copyright (c) HOKKAIDO CHUO BUS CO., LTD.
/*│  http://www.chuo-bus.co.jp/
/*│  ogawa_tak@gim.chuo-bus.co.jp
/*└─────────────────────────────────────*/
/*============================================================================*/
/*                        [ 本来Commonにあるべきもの ]                        */
/*============================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
svg text {font-family: 'Noto Sans JP', sans-serif;}

.AftC:after { /* 回解除 */
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;/* 見えない存在 */
}

.AftA:after { /* 改行 */
	content: "\A";
	white-space: pre;
}
#TopScreen {
	position:relative;
}
@media screen and (max-width: 767pt){

	/* 全体・ヘッダー */
	body {background-image:none;}
	#Wallpaper {background-image:none;}
	#Container {
		width: 100%;
		background-image:none;
	}
	#ContainerMain {
		width: 100%;
		background-image:none;
	}
	#ContainerMain>a>img,
	#TopScreen>img {width: 100%;}

	#LeftNavi{
		margin: 0 auto;
		float: none;
	}

	#ContainerTop, 
	#HdrObject, 
	h1, 
	/*#RouteSeachMenu, */
	.ClearLine {display:none;}



	#FareTab img {width: 100%;}

	/* 内容 */
	#Main {
		width: 100%;
		margin:0;
	}
	#CenterContents {width: 100%;}
	#CenterContents>img:nth-of-type(1) {width: 100%;}
	#BusNamePink {font-size: 24px;}
	#RouteSearchMenuTabPink {display:none;}
	.TabbedPanelsContentGroup {margin:0;}


	/* 時刻表 */
	//#TimeTab {display:none;}


	/* フッター */
	#Contents1Col, 
	#Copyright {display:none;}

}

/*============================================================================*/
/*                             [ レイアウト関係 ]                             */
/*============================================================================*/
/*-- [ コンテンツ ] ----------------------------------------------------------*/
.ObjList div.ListMain {
	width : 600px;
	float : left;
}
#TimeTab, #FareTab, #AttentionTab {
	/*overflow : scroll;
	overflow : hidden;
	width :auto;*/
	margin : 0 20px 20px 0;
	border : none;
	/*width  : 400px;*/
	/*height : 200px;*/
	overflow: hidden;
}


#AttentionTab table, #TimeTab table, #FareTab table,
#FareTab2 table, #FareTab3 table {
	border : 1px solid #a0a0a0;
	border-collapse: collapse;
	border-spacing  : 0;
	width :auto;
}
#AttentionTab table th, #AttentionTab table td, 
#TimeTab table th, #TimeTab table td,
#FareTab table th, #FareTab table td,
#FareTab2 table th, #FareTab2 table td,
#FareTab3 table th, #FareTab3 table td {
	border  : 1px solid #a0a0a0;
	padding : 4px;
}
#FareTab2 table th, #FareTab3 table th {
	width : 130px;
}
#TimeTab table td{ text-align:right; }
#TimeTab table th.Kbn, #TimeTab table th.Map{ width : 25px; }
* html #TimeTab table th.Kbn, * html #TimeTab table th.Map{ width : 35px; }
#TimeTab table th.BusStop{ width : 170px; }
* html #TimeTab table th.BusStop{ width : 160px; }
#TimeTab table th.Unko{ width : 205px; }
* html #TimeTab table th.Unko{ width : 195px; }
#TimeTab table th.Rosn{ 
	width : auto;
	word-break: keep-all;
	overflow:visible;
	height: 60px;
 }
* html #TimeTab table th.Rosn{ width : auto; }
.FakeContainer {
	margin : 0 0 20px;
	border : none;
	width  : 400px;
	height : 100px;
	overflow: hidden;
}
#FareTab, #FareTab2, #FareTab3 {
	float : left;
}

p.ToTop {
	text-align:left;
	margin:0 10px;
	padding:15px;
}
ul.SearchSetList {
	margin:15px;
	padding:0;
	list-style:none;
}
ul.SearchSetList li.Pink {
	line-height:14px;
	padding:6px 0 6px 30px;
	margin-bottom:7.5px;
	margin-left:35px;
	text-align:left;
	background:url(/highway.en/img/search/search_list_icon.gif) left top no-repeat;
}
ul.SearchSetList li.Blue {
	line-height:14px;
	padding:6px 0 6px 30px;
	margin-bottom:7.5px;
	margin-left:35px;
	text-align:left;
	background:url(/highway.en/img/search/search_list_icon_blue.gif) left top no-repeat;
}
.R0 { color : #BD002F } /* 赤*/
.R1 { color : #00BDBD } /* 水色 */
.R2 { color : #BD5E00 } /* オレンジ */
.R3 { color : #0000BD } /* 青 */
.R4 { color : #BCBC00 } /* 黄色 */
.R5 { color : #BD00BD } /* 紫 */
.R6 { color : #3F7D00 } /* 緑 */
.R7 { color : #BDBDBD } /* グレー */

.U0 { background-color : #D8FFB0 } /* 緑 */
.U1 { background-color : #FFC8FF } /* 紫 */
.U2 { background-color : #FFFFA4 } /* 黄色 */
.U3 { background-color : #C1C1FF } /* 青 */
.U4 { background-color : #FFCB97 } /* オレンジ */
.U5 { background-color : #BBFFFF } /* 水色 */
.U6 { background-color : #FFBFCF } /* 赤*/
.U6_ { 
	background-color : #FFBFCF;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoxMDAlO2hlaWdodDoxMDAlOyI+PGxpbmUgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PC9zdmc+');
 } /* 斜め線 */
.U7 { background-color : #E3E3E3 } /* グレー */
.U7_ { 
	/*background-color : #E3E3E3;*/
	background-color : #FFFFA4;
	//background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoxMDAlO2hlaWdodDoxMDAlOyI+PGxpbmUgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PC9zdmc+');
 } /* 斜め線 */



#SetRightList {
	height : 500px;
	overflow: scroll;
	
}
#sumUntin {
	margin: -75px 0px 0px 500px;
	border: double 5px #ff0000;
	padding: 5px;
	font-size:11pt;
}
div #HDM1 {
	width  : 400px;
	height : 40px;
	background : url( 'img/btn_next_dia.jpg' ) top left no-repeat;
	background-position : 0 -40;
	display: inline-block;
}
div #HDM1:hover { background-position : 0 -40px; }

.navBtns {display:none;}
#ReserveBtn, #PrintBtn {display:inline;}

#LeftNavi>a {
	display:hidden;
}
@media screen and (max-width: 767pt){
	#LeftNavi>a {
		display:inline;
	}

}

#BenriGuide {
	position:absolute;
	top:200px;
	left:20px;
}
#Rakutoku30off {
	position:absolute;
	top:180px;
	right:20px;
}

@media screen and (max-width: 767pt){
	#TopScreen {
		text-align:center;
	}
	#BenriGuide {
		position:relative;
		top:0;
		left:0;

	}

	#Rakutoku30off {
		position:relative;
		top:0;
		right:0;
	}

}

/*-- [ 角丸ボタン ] ----------------------------------------------------------*/
.Button {
	overflow: hidden;
	        border-radius: 5px;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	width:170px;
	height:60px;
	text-align: center;
	line-height:64px;
	padding-right:11px;
	margin:0 auto;
	font-weight: bold;
	font-size:14pt;
}
.Button:after { /* 回解除 */
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;/* 見えない存在 */
}
.Button>a {
	color:#FFF;
	width:100%;
	height:64px;
	display: block;
}
.Button>a>span {
	/*display: block;*/
	float: right;
}




/*-- [ 色 ] ------------------------------------------------------------------*/

/* 文字色 */
.Oudoiro {color:#cfb872;}
.Pink    {color:#df64a5;}
.Red     {color:#d54044;}
.Blue    {color:#2b8fc6;}
.Orange  {color:#f1950a;}
.Green   {color:#2daab5;}

/* 背景色 */
.BgOudoiro {background-color:#cfb872;}
.BgPink    {background-color:#df64a5;}
.BgRed     {background-color:#d54044;}
.BgBlue    {background-color:#2b8fc6;}
.BgOrange  {background-color:#f1950a;}
.BgGreen   {background-color:#4bae7f;}
.BgBGreen  {background-color:#2daab5;}
.BgBGrey   {background-color:#708F8F;}

/*-- [ 変動運賃 ] ------------------------------------------------------------*/
.fareCal {
	float: left;
	empty-cells: show;
	border-collapse: collapse;
	/*border: solid thin;*/
	margin-bottom: 1em;
	width: 340px;
	/*width: 100%;*/
	margin-right:10px;
}
.fareCal th:nth-of-type(1) {color: red;}
.fareCal th:nth-of-type(7) {color: blue;}
.fareCal th[colspan="7"]:nth-of-type(1) {color: canvastext;}
.fareCal th.holiday {color: red;}
.fareCal th, .fareCal td {
	font-weight: normal;
	border: thin dotted #333333;
	padding: 5px;
	text-align: center;
}
.fareCal th {border-top: thin solid #333333;}
.fareCal td {border-bottom: thin solid #333333;}

caption {text-align: left;}
.fareCal {
	empty-cells: show;
	border-collapse: collapse;
	/*border: solid thin;*/
	/*margin-bottom: 100px;*/
	width: 345px;
	float: left;
	caption-side: top;
}

.marginDown {
	margin-bottom: 40px;
}
.fareCal+.fareCal {margin-left:1em}
.fareCal:nth-of-type(3) {margin-left:0}
@media screen and (max-width: 767px){
	.fareCal:nth-of-type(1) {margin-right:0}
}
.fareCal th:nth-of-type(1) {color: red;}
.fareCal th:nth-of-type(7) {color: blue;}
.fareCal th[colspan="7"]:nth-of-type(1) {color: canvastext;}
.fareCal th.holiday {color: red;}
.fareCal th, .fareCal td {
	font-weight: normal;
	border: thin dotted #333333;
	padding: 5px;
	text-align: center;
}
.fareCal th {border-top: thin solid #333333;}
.fareCal td {border-bottom: thin solid #333333;}


.fareCal td[colspan="7"] {border-top: solid thin;}
.fareCal tr {
	border-left: solid thin;
	border-right: solid thin;
}
.fareCal tr.tempRow {
	border-left: transparent;
	border-right: transparent;
}

.fareCal tr.tempRow>th, 
.fareCal tr.tempRow>td {
	border-color: transparent;
	color:  transparent;
}

/*----------------------------------------------------------------------------*/

/*
div.Box>a {
	display: block;
	overflow: hidden;
}

div.Box>a[tabindex]::before {
	font-size: 12px; font-size: 1.2rem;
	color:#BDBEBD;
	content: '\f0d7';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: .5em;
	vertical-align: .1em;
}
div.Box>a[tabindex].Open::before {
	content: '\f0d8';
}

div.Box>div {
	padding-left:2em;
	position: relative;
	max-height:0;
	top:0;
	overflow: hidden;
	transition: .5s;
}
div.Box>div.Open {
	max-height: 100vh;
	transition: .5s;
}

@media screen and (max-width: 767pt){
	div.Box>div {
		padding-left:1em;
	}

}
*/

/*----------------------------------------------------------------------------*/
/*
.fare {
	empty-cells: show;
	border-collapse: collapse;
	border: solid thin #333333;
	margin-bottom: 40px;
	width: 100%;
}
.fare th, .fare td {
	font-weight: normal;
	border: thin solid #333333;
	padding: 5px;
	text-align: center;
}
*/
/*----------------------------------------------------------------------------*/
.Flash {
	animation: flash 1s linear infinite;
	background: #5e66ff;
	color:#FFF;
	        border-radius: 5px;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	font-weight:700;
}

@keyframes flash {

	48%,52% {opacity: 1;}
	50%  {opacity: 0;}
}

/*----------------------------------------------------------------------------*/
/**/
.Box {
	text-align: center;
	width: 100%;
	position: relative;
	overflow: auto;
}

.Box>div{
	position: relative;
	overflow: hidden;
	display: inline-block;
	margin: 0 auto;
	clear: both;
	
}


/*----------------------------------------------------------------------------*/
.fare {
	empty-cells: show;
	border-collapse: collapse;
	border: solid thin #333333;
	margin: 0 auto 40px;
	width: auto;
	font-size: 10px; font-size: 1.0rem;
	caption-side: top;
}
.fare th, .fare td {
	font-weight: normal;
	border: thin solid #333333;
	padding: 5px;
	text-align: center;
}


.fareA{background-color:#FFBFCF}
.fareB{background-color:#FFCB97}
.fareC{background-color:#BBFFFF}
.fareS{background-color:#D8FFB0}

.fareTop td{border-bottom: thin dotted #333333;}
.fareBottom td{border-top: thin dotted #333333;}

/*----------------------------------------------------------------------------*/
.Box.Solid>div {
	overflow-x: auto;/* tableタグのはみ出た要素を隠す */
	white-space: nowrap;/* テキストの折り返しなし */
}

.time {
	empty-cells: show;
	border-collapse: collapse;
	border: solid thin #333333;
	margin: 0 auto 40px;
	width: auto;
	font-size: 10px; font-size: 1.0rem;
	text-align: left;
}
.time th, .time td {
	font-weight: normal;
	border: thin solid #333333;
	padding: 5px;
	text-align: center;
}
.time td:nth-of-type(1) {
	text-align: left;
}
/*----------------------------------------------------------------------------*/
.txt-underline {text-decoration: underline;}
.font-red {color:red;}
/*----------------------------------------------------------------------------*/

#RouteSeachMenu li a#NenmatsuNenshi {
	overflow: hidden;
	        border-radius: 5px;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	color: #fff;
	padding: 0 1em;
	width:auto;
	height:74px;
	text-align: center;
	line-height:74px;

	margin:0 auto;
	font-weight: bold;
	font-size:14pt;
	background-color:#df64a5;
}

