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:20px 30px;
  }
  
  
  
  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;
}
.bgray{
  background-color: aliceblue;
}
.bbold{
  background-color: aliceblue;
}
.title{
  text-align: center;
  font-size: 1.2em;

}
/* --------------------- 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;
 }
 /* ----------------------------------------------------- */


 .sticky_table thead th  {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left:0;
  background-color: #4f2bef;
  color:white;
  font-weight: normal;
  z-index: 100;
 }
  .sticky_table tbody th:nth-child(1) {
  position: sticky;
  position: -webkit-sticky;
  left:0;
  z-index: 10;
  /* background-color:  #4f2bef; */
  background-color:  green;
  color:white;
  font-weight: normal;
  width:300px;
  font-weight: normal;
}


#tbl_sotetsu,#tbl_sotetsu th,#tbl_sotetsu td{
  border: 1px darkblue solid;
  border-collapse: collapse;
  
}

#tbl_sotetsu tr:hover{
  font-weight: bold;
}

#tbl_sotetsu th,td{
  font-size: 11px;
  text-align: center;
}
/* -------------------------------------------------------------------------- */
.blue{
  color:blue;
}
.green{
  color:green;
}
/* ------------------------------------------------------------- */

#rosen li,#noborikudari li,#youbi li{
  display: inline-block;
  border: 1px solid darkblue;
  cursor: pointer;
  border-radius: 5px;
  padding: 2px 10px;
  margin-right: 5px;
}
.menutitle{
  font-size: 1.2em;
  text-align: center;
  z-index: 1000;
}
#sotetsu_area {
  height: 300px;
  overflow-y: scroll;
  with:80%
}

#tbl_sotetsu,#tbl_sotetsu th,#tbl_sotetsu td{
  border: 1px darkblue solid;
  border-collapse: collapse;
}
#tbl_sotetsu td{
  cursor: pointer;
}
table caption{
  font-weight: bold;
  color:teal;
  font-size: 1.2em;
}
#tbl1 tbody td{
  cursor: pointer;
}
#tbl1_area{
  height:200px;
}
#tbl1,#tbl1 th,#tbl1 td{
  border: 1px darkblue solid;
  border-collapse: collapse;
}

.blue{
  color:blue;
}
.green{
  color:green;
}
/* ------------------------------------------------------------- */
/* #tbl_list td,#tbl_list th{
  padding: 1px 10px;
  text-align: center;
  font-size: 12px;
}
#tbl_list tbody tr{
  cursor: pointer;
}

#tbl_list td:nth-of-type(2){
  text-align: left;
} */
/* #by_pref tr td:nth-of-type(3),
#by_pref tr td:nth-of-type(4),
#by_pref tr td:nth-of-type(5),
#by_pref tr td:nth-of-type(6),
#by_city tr td:nth-of-type(3),
#by_city tr td:nth-of-type(4),
#by_city tr td:nth-of-type(5),
#by_city tr td:nth-of-type(6)
{
  text-align:right;
} */
/* #by_pref tr td:nth-of-type(1),
#by_pref tr td:nth-of-type(2),
#by_city tr td:nth-of-type(1),
#by_city tr td:nth-of-type(2){
  text-align:left;
} */

#rosen li,#noborikudari li,#youbi li{
  display: inline-block;
  border: 1px solid darkblue;
  cursor: pointer;
  border-radius: 5px;
  padding: 2px 10px;
  margin-right: 5px;
}
.menutitle{
  font-size: 1.2em;
  text-align: center;
  z-index: 1000;
}
ul li.on{
  background-color: #5a63ec;
  color:white;
}
ul li.off{
  background-color: white;
  color:#5a63ec;
}
#stntbl td.stn{
  border: #4f2bef 1px solid;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
}