body {
     
    font-size: 15px;
    font-family: "メイリオ"," Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", "Arial", "Verdana",             "sans-serif";
    margin: 0px auto;
}

article {
    background-color: white;
    display: block;
    padding-left: 50px;
    padding-right: 50px;
    padding-top:10px ;
    text-align:center;
    min-height:500px;
    height:auto !important;
    /* height:500px; */
  }
  
  #pic{
    float:left;
    margin:10px;
  }
  
  
  
  header,footer {
    position: relative;
    width:100%;
    background-color: hsl(180, 50%, 40%);
    /* background-color: black; */
    color: white;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
header h3 {
    margin: 0px auto;
    text-align: center;
}

nav {
    background: lightblue;
    color: white;
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0px;
    text-decoration: none;
}


nav ul, nav li {
    list-style-type:none;
    margin : 0px auto;
}

ul#Nav001 li {
    font-size: 13px;
    display: inline-block;
  }

ul#Nav001 li a {
    background: url(../pic/yajirushi.gif) no-repeat 0px 0px;
    color: #666;
    height: 20px;
    margin-left: 17px;
    padding-left: 22px;
    padding-top: 2px;
    text-decoration: none;
}

ul#Nav001 li a:hover {
    background: url(../pic/yajirushi.gif) no-repeat 2px 0px;
    color: #F90;
}

article {
    background-color: white;
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    padding-top:10px ;
    text-align: left;
    color:darkblue;
}

.pagetop {
display: none;
position: fixed;
bottom: 30px;
right:50px;
z-index: 200;
}
.pagetop a {
display: block;
background-color: #93f09a;
text-align: center;
color: green;
font-size: 12px;
text-decoration: none;
padding: 5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.6;
opacity:0.6;
}
.pagetop a:hover {
display: block;
background-color: #b2d1fb;
text-align: center;
color: #fff;
font-size: 12px;
text-decoration: none;
padding:5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.6;
opacity: 0.6;
}

#menu li,#ulitem li{
    display: inline-block;
    border: 1px solid darkblue;
    cursor: pointer;
    border-radius: 5px;
    padding: 2px 10px;
    margin-right: 10px;
}
#menu li:hover,#ulitem li:hover{
font-weight: bold;
color:darkgreen;
}
#ulitem li.on{
   background-color: navajowhite;
}
#ulitem li.off{
   background-color: white;
}

.menutitle{
    font-size: 1.2em;
    text-align: center;
    z-index: 1000;
}
.setsumei{
  width:60%;
  margin: auto;

}

hr.double {
    border-top: 5px double skyblue;
    text-align: center;
  }
  
ht.double::after {
    display: inline-block;
    position: relative;
    top: -45px;
    padding: 0 3px;
    background: #fff;
    color: skyblue;
    font-size: 30px;
  }
.right{
  text-align: right;
}
.center{
  text-align: center;
}
/* --------------------- tooltip----------------------------------------------------- */

.tooltip {
    position: relative;
    cursor: pointer;
    padding: 0.2em;/*文字周りの余白*/
    color: #010101;/*文字色*/
    background: #eaf3ff;/*背景色*/
    border-bottom: solid 2px #516ab6;/*下線*/
 }
 
 /* ツールチップ全体の設定 */
 .tooltip::before,
 .tooltip::after {
   position: absolute;
   opacity: 0;
   transition: all 0.3s;
 }
 
 /* 吹き出しのひげ部分 */
 .tooltip::before {
   content: "";
   border: 10px solid transparent;
   border-bottom-color: #000;
   top: 10px;
   left: 10px;
 }
 
 /* 吹き出しの本体 */
 .tooltip::after {
   content: attr(data-tooltip);
   display: block;
   padding: 7px 13px;
   background: #000;
   border-radius: 3px;
   font-size: 12px;
   font-weight: 600;
   color: #fff;
   top: 30px;
   left: 0;
 }
 
 /* マウスホバーしたときの設定 */
 .tooltip:hover::before{
   top: 16px;
   opacity: 1;
 }
 
 .tooltip:hover::after{
   top: 36px;
   opacity: 1;
 }
 /* ----------------------------------------------------- */
 #alldist td,#alldist th{
  border:1px darkblue solid;
  font-size: 12px;
 }
#alldist,#alldist th,#alldist td{
  border-collapse:collapse;
}
#alldist th{
  text-align: center;
}
#alldist td{
  cursor: pointer;
}

.sticky_table thead th  {
  /* 縦スクロール時に固定する */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: rgb(92, 145, 17);
  color:white;
  /* tbody内のセルより手前に表示する */
  z-index: 1;
}
table,table th,table td{
  border: 1px darkblue solid;
  border-collapse: collapse;
}
table caption{
  font-weight: bold;
  color:teal;
  font-size: 1.2em;
}
#shukei_table_area{
  width:80%;
  margin: auto;
}


table#shukei tr td:nth-of-type(2),td:nth-of-type(3),table#shukei tr td:nth-of-type(4),table#shukei tr td:nth-of-type(5),table#shukei tr td:nth-of-type(6){
  text-align:right;
  padding:0 10px;
}
table#shukei tr td:nth-of-type(5),
table#shukei tr td:nth-of-type(9),
table#shukei tr td:nth-of-type(13),
table#shukei tr td:nth-of-type(18){
  background-color: azure;
}


table#shukei tr td:nth-of-type(1){
  text-align:left;
  padding-left:10px;
}
table#shukei th{
  text-align: center;
}
table#shukei td{
  text-align: right;
  padding: 0 15px;
}
table#shukei td:nth-of-type(1){
  text-align: center;
}
table#station_length tr td:nth-of-type(6),table#alldist tr td:nth-of-type(4),table#alldist tr td:nth-of-type(5),table#alldist tr td:nth-of-type(6){
  text-align: right;
}

table#station_length th,table#station_length td{
  font-size: 12px;
  padding:3px 10px;
}

.tokkyu{
 color:red;
}
.kyuko{
 color:green;
}
.kaisoku{
 color:blue;
}  
.black{
  color:black; 
}

/* -------------------------------------------------------------------------- */
.blue{
  color:blue;
}
.green{
  color:green;
}
/* ------------------------------------------------------------- */
#mapid { height: 500px; }
#eki li{
  display: inline-block;
  border:1px darkcyan solid;
  border-radius: 5px;
  cursor: pointer;
  padding: 3px;
  margin-right: 10px;
}
#eki li.on{
  background-color: darkcyan;
  color:white;
}
#eki li.off{
  background-color: white;
  color:darkcyan
}
.container{
  display: flex;
}
.maptype{
  /* position: relative; */
  height:1em;
}
#comp{
  height: 2em;
}
#eki{
  position: relative;
  top:-1em;
}
#table_area,#table_station_area,#table_area2{
  height:500px;
  overflow-y: scroll;
  margin-bottom: 40px;
}
.waku{
  border: 1px solid darkblue;
  border-radius: 3px;
}

.bold_column{
  border-left: 3px solid green;
  border-right: 3px solid green;
}
.bold_row{
  border-top: 3px solid green;
  border-bottom: 3px solid green;
}
table#joukou th,table#joukou th{
  font-size: 12px;
}

table#joukou tr td:nth-of-type(4),
table#joukou tr td:nth-of-type(5),
table#joukou tr td:nth-of-type(6),
table#joukou tr td:nth-of-type(7),
table#joukou tr td:nth-of-type(9),
table#joukou tr td:nth-of-type(10),
table#joukou tr td:nth-of-type(11),
table#joukou tr td:nth-of-type(12),
table#joukou tr td:nth-of-type(13)
{
  text-align:right;
  padding:0 10px; 
}
table#joukou tr td:nth-of-type(1),
table#joukou tr td:nth-of-type(14){
  text-align: center;
}
table#joukou tr td:nth-of-type(2),
table#joukou tr td:nth-of-type(3)
{
  text-align: left;
  font-weight: bold;
  padding:0 10px; 
}
table#joukou tr td:nth-of-type(3){
  color:blue;
}
table#joukou tr td:nth-of-type(13){
  font-weight: bold;
}

table#joukou th{
  text-align: center;
  font-size: 1.1em;
}

.bold_column{
  border-left: 3px solid green;
  border-right: 3px solid green;
}
.bold_row{
  border-top: 3px solid green;
  border-bottom: 3px solid green;
}
.bold_column_th{
  border-left: 3px solid white;
  border-right: 3px solid white;
}
.bold_row_th{
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}

#wrap1,#wrap2{
  position: relative;
}
#train1,#train2{
  position: absolute;
  cursor: pointer;
}