/* 基本となる文字のサイズなど ---------------------------------------*/
body{
  background-image: url(./image/bg048.gif);
  font-size:85%;                   /* 文字サイズ（85%=small） */
  line-height:16px;
  padding:0px;
  margin:12px ;
  font-family:Arial,Meiryo,メイリオ,MS Pゴシック,ヒラギノ角ゴ Pro W3,Verdana,Sans-serif;
}

h2{
  line-height:23px;
}


/* リンク設定 ----------------------------------------------------------*/
a{text-decoration:none;}       /*   リンクの飾り（なし） */
a:link{color:black;}           /* リンクの色（白） */
a:visited{color:black;}        /* 訪問済みリンクの色（白） */
a:hover{color: blue; text-decoration: underline;}




/*=================
 スクロールボタン
==================*/

.inner, .inner2 {
  display: flex;
  justify-content: left;
  background-color: withe;
  min-height:1px;
  width:100%;
  margin: 0 0 20px 0;
}

  {
  display: flex;
  justify-content: center;
  background-color: withe;
  min-height:1px;
  width:100%;
  margin: 0 0 20px 0;
}




@media only screen and (max-width: 599px){
.btn-left{display: none;}
.btn-right{display: none;}

.btn-left2{display: none;}
.btn-right2{display: none;}

}

  /* タブレット用、PC */
@media only screen and (min-width: 600px){

.btn-left, .btn-left2{
  display: flex;
  border: 0px solid #333333;
  padding: 2px;
  border-radius: 10px;
  cursor: pointer;
  width: 20px;
  background-color: #888888 ;
  align-items: center;
  margin:160px 2px 160px 0px;
  }
 .btn-left:hover{
  background-color: #333333 ;
  }
 .btn-left img{
  width: 20px ;
  }
 .btn-left2:hover{
  background-color: #333333 ;
  }
 .btn-left2 img{
  width: 20px ;
  }


.btn-right, .btn-right2 {
  display: flex;
  border: 0px solid #000;
  padding: 2px;
  border-radius: 10px;
  cursor: pointer;
  width: 20px;
  background-color: #888888 ;
  align-items: center;
  margin:160px 0px 160px 2px;
 }
 
 .btn-right:hover, .btn-right2:hover{
  background-color: #333333 ;
 }
 .btn-right img, .btn-right2 img{
  width: 20px ;
  }


}


.db_main{
text-align:left;
}


.time_main, .time_main2{
  border: 0px solid #ebebeb;
  margin: 0px 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 0 0 12px 0;

  max-width: 100%;
  height: calc(100% + 10px);
}




/*=============
テーブルの設定
=============*/


table{
  border-collapse: separate;
  border-spacing: 0px;
}


table tbody{
    background-color: white;

}

table td { 
  vertical-align: middle; 
  border-right:1px solid silver;
  border-bottom:1px solid silver;
  text-align: center;
  white-space: nowrap;
  padding: 0px;

}



/* 出発 ----------------------------------------------*/
.rrr{
  position:absolute; right:0px; top:0px;
}




/* 路線名の説明 ----------------------------------------------*/

.title td{
  background-color: mediumaquamarine;
  font-size:140%;
  padding:8px 0px;
  color:white;
  line-height:18pt;
}


/* 路線名の設定 ----------------------------------------------*/

table tr td:nth-of-type(1).route{background-color: white; }

.route{
  width: 1em ;padding: 0px 1px;
}


td.w1sta{width: 45px;background-color: beige;  border-right-width: 0px; 
}

/*--距離と駅名--*/

.w{background-color: beige; padding:0px;}
.w1{padding: 0px calc(13px + 1em) 0px 13px; background-color: beige;}
.w2{padding: 0px 11px; background-color: beige;}
.yomi{padding: 0px 5px; background-color: beige; text-align: left; } /* 駅名　ひらがな*/
.w_eng{padding: 0px 15px 0px 10px; background-color: beige; text-align:left;}


/* 背景色 ----------------------------------------------*/
.ash td{background-color:#cccccc;}
.pink td{background-color:#ed9db9;}
.green td{background-color:#ffffff;}
.lightgreen td{background-color:#ccffcc;}
.sawan td{background-color:#ccffcc;}
.gray td{background-color:#d4d4d4;}




/*=================
 時刻表のスクロール
==================*/

table.sticky .fixed{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  left: 0px;
    z-index: 1;
  }


table.sticky {
  border-left:1px solid silver; 
  border-top:1px solid silver; 

}



----------------




.w1hi_dist{
  min-width: 4em;
  background-color: beige;
  font-size:100%;
  padding:0px;
  color:black;
  line-height:12pt;
}/*--高速鉄道用の措置--*/

.w1dist{width: 40px;background-color: beige;}

.w1di{min-width: 40px;text-align:right;padding:0px 5px;}
.w1di_sp{text-align: center;}
.bow{
  text-align:center;

  }









/* 列車名の設定 ----------------------------------------------*/


td.w2lo{min-width: 3em;white-space: nowrap;}/* 区間車 */
td.w2ra{min-width: 3em;background-color:#d5ffaa;white-space: nowrap;}/* 区間快 */
td.w2hu{min-width: 3em;background-color:#d5eaff;white-space: nowrap;}/* 復興 */
td.w2chu{min-width: 3em;background-color:#ffffd5;white-space: nowrap;}/* 莒光 */
td.w2tze{min-width: 3em;background-color:#ffd5aa;white-space: nowrap;}/* 自強 */
td.w2tzepp{min-width: 3em;background-color:#ffd5aa;white-space: nowrap;}/* PP自強 */
td.w2tze3000{min-width: 3em;background-color:#ccccff;white-space: nowrap;}/* 日立自強 */


td.w2pu{min-width: 3em;background-color:#ffd5d5;white-space: nowrap;}/* 普悠瑪 */
td.w2ta{min-width: 3em;background-color:#ffd5d5;white-space: nowrap;}/* 太魯閣 */
.blue{color:blue;}
.red{color:#dc143c;}



td.w2hi{min-width: 3em;white-space: nowrap;}/* 高鉄&阿里山 */




.bold{font-weight:bold;}

/* 列車の種類---------------------------------*/
.type td{
  white-space: nowrap;
  padding:1px 2px;
}

.name td{
  padding:1px 4px 1px 4px;
}





/* 時刻表の設定 ----------------------------------------------*/



td#w2t{border-top-width: 0px;}
td#w2tb{border-top-width: 0px;border-bottom-width: 0px;}
td#w2b{border-bottom-width: 0px;}




/* PDFとフォームの設定 ----------------------------------------------*/





  /* スマホ、タブレット端末 */
@media only screen and (max-width: 999px){

.pdf_ads{
  width: 100%;
  display: block; 
  	padding: 5px 0px 10px 0px;
  	text-align:left;
  }

.pdf_file{
  display:none;
  }
}

  /* PC */
@media only screen and (min-width: 1000px){

.pdf_ads{
    max-width:1070px;
	display: -webkit-flex;
	display: flex;
	text-align:left;
	align-items: flex-end;

	background-color: transparent;
	padding: 5px 0px 5px 0px;
  }
  .pdf_file{
  margin:0;
  }
  .pdf_file img{margin-right:5px;}

}



.form_pdf{
  display:block;
  height:100%;
  white-space: nowrap;
  padding:0px 25px 5px 10px;
  text-align:left;
  }





/* 広告表示の設定 ----------------------------------------------*/



.item_ads{
  display:block;
  text-align: right;
  align-self: center;
  max-width:750px;
  max-height:200px;
  padding:0 0 0px 10px;}


@media (max-width:499px) { .item_ads { display:none;} } 
@media (min-width:500px) { .adslot_1 { max-width: 468px; max-height: 90px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 140px; } }
@media (min-width:1000px) { .adslot_1 { padding:30px 0 0 5px; width: 728px; height: 140px; } }







/* ２重線の設定 ----------------------------------------------*/
.one {line-height:0px;}

/* 表の枠線をなくす ----------------------------------------------*/
td#nob {border:0px;}


/* 備考欄 ----------------------------------------------*/
td.bik{
  vertical-align: top;

}






/* 列車名を説明するテーブル ----------------------------------------------*/

.name td{
  padding:1px 4px 1px 4px;
}






/* 列車の種類（列車名を説明する上部のテーブル）---------------------------------*/

.sta{border: 0px; background-color: transparent;}
.stationname{
  padding:0px 30px 0px 0px;
  border: 0px;text-align:left;
  background-color: transparent;
  vertical-align: top; 
  }



/* 各路線の注意事項 ----------------------------------------------*/

div#note2{
  border: 1px silver solid; 
  margin: 0px;
  padding: 2px 2px 18px 2px;
  max-width:700px;
  min-height:100px;
  background-color: white;
  line-height:18px;

}



/* 列車名 ----------------------------------------------*/

.train_name{
  max-width: 360px;
  border: 0px solid #ebebeb;
  margin: 5px 0px 10px 0px;

}

.train_name table{
  border-collapse: collapse;
    background-color: white;
    width:100%;

}


.train_name td{
  vertical-align: middle; 
  padding:0px;
  border:1px solid silver;
  text-align: center;
  white-space: nowrap;

}


.timefooter{
  max-width: 340px;
  border: 0px solid #ebebeb;
  margin: 5px 0px 10px 0px;
  background-color: white;
  padding:10px;
  text-align:center;

}