.modal-content {
	width: 80% ;
	margin: 0 ;
	padding: 10px 20px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
	text-align: center;
}

#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}
.chart_container{
	float:left;
	margin-right: 30px;
}
#pic{
	float:left;
	margin:20px;
}
#mokuji{
	margin-left:200px;
}
ul#item1 li ,ul#item2 li{
  display: inline-block;
  width:200px;
  text-decoration: none;
  cursor: pointer;
}

ul#item1 li.on,ul#item2 li.on{
  color:blue;
  font-weight: bold;
}
ul#item1 li.off,ul#item2 li.off{
  color:black;
  font-weight: normal;
}
#item2,#item1{
  margin:5px 25px 2px 25px;
}
h4{
	text-align: center;
	color:green;
}
.pp1{
  border-radius: 10px;
  border: 2px solid rgb(137, 241, 145);
  background: rgba(#7edf93, 0.96);
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;   /* Firefox用 */
}
.pp2{
  border-radius: 10px;
  border: 2px solid rgb(141, 154, 240);
  background: rgba(#7edf93, 0.96);
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;   /* Firefox用 */
  padding-top: 10px;
  padding-bottom:10px;
  margin-top: 10px;
  margin-bottom:10px;
}
.svgarea{
  text-align: center;
}
@media screen and (min-width: 768px) {
  .chart_container {
    width: 640px;
    margin: auto;
  }
}
table#kouri{
	float:right;
	margin-left: 10px
}

table#kouri tr td:nth-of-type(2),table#kouri tr td:nth-of-type(4),table#kouri tr td:nth-of-type(6)  {
	text-align: right;
	padding-right: 10px;
}
table#kouri tr td:nth-of-type(1),table#kouri tr td:nth-of-type(3),table#kouri tr td:nth-of-type(56)  {
	padding-left: 10px;
}

        body {
             background: linear-gradient(to top, rgba(0,153,255,0.5), #009);
             background-color: black;
             font-size: 15px;
             font-family: "メイリオ"," Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", "Arial", "Verdana",             "sans-serif";
             margin: 0px auto;
             width:80%;
        }

        article {
               background-color: white;
               display: block;
               padding-left: 150px;
               padding-right: 150px;
               padding-top:10px ;
               /*text-align:center;*/
               min-height:500px;
               height:auto !important;
               height:500px;
          }

        footer {
             background-color: black;
             color: white;
             height: 34px;
             text-align: center;
            // width:1000px;
        }

        header {
             background-color: black;
             color: white;
             height: 40px;
             line-height: 40px;
             text-align: center;
            // width:1000px;
        }
        header h3 {
             margin: 0px auto;
             text-align: center;
             color: white;

        }

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

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

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

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

        hr {
              	border-top: 3px double #bbb;
              	border-color:pink;
             }

        hr.short {
        	border-top: 1px dotted #8c8b8b;
            border-color:green;
            width:60%;
            margin-left:10px;
        }

        .blue{
           color:blue;
           }
        .orange{
           color:orange;
           }
        .lightblue{
           color:rgb(34, 136, 242);
           }

        .green{
            color:green;
         }

        .red{
            color:red;
            }
        .center{
           text-align :center;
         }

        .bold{
           font-weight:bold;
          }

        .small{
          font-size:small;
					color:green;
        }