.green{
  color:green;
  font-weight:bold;
  }
.blue{
  color:blue;
  }  
.red{
  color:red;
  }  
  
.small{
  color:green;
  font-size:9px;
  text-align:center;
  } 
#titlegraph{
                float:left;
            }
h4{
  text-align:center;
  }
  
#chart1{
   float:left;
   margin-right:20px;
   }

@media screen and (min-width: 768px) {
  .chart_container {
    width: 640px;
    margin: auto;
  }
}
  #title2, #title3{
        text-align:center;
        }

  #itembypref li{
           display:inline-block;
           font-size:20px;
           width:60px;
           cursor:pointer;
           text-align:center
           /* box-shadow */
           box-shadow:0px 0px 6px 3px #59dd59;
           -moz-box-shadow:0px 0px 6px 3px #59dd59;
           -webkit-box-shadow:0px 0px 6px 3px #59dd59;

           /* border-radius */
           border-radius:6px;
           -moz-border-radius:6px;
           -webkit-border-radius:6px;

           /* border */
           border:1px solid #cccccc;
           
 }
 #itembypref li.on{
          color:red;
          }
 #itembypref li.off{
          color:green;
          }



 #item li{
           display:inline-block;
           font-size:14px;
           width:60px;
           cursor:pointer;
 }
 #item li.on{
          color:red;
          }
 #item li.off{
          color:green;
          }

 
 
 #mf li{
           display:inline-block;
           font-size:14px;
           width:60px;
           cursor:pointer;
 }
#mf li.on{
          color:red;
          }
#mf li.off{
          color:green;
          }
 
 
 #pref li{
           display:inline-block;
           font-size:14px;
           width:70px;
           cursor:pointer;
 }

 #pref li.on{
          color:red;
          }
 #pref li.off{
          color:green;
          }

#charttitle{
text-align:center;
           } 
     
     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:1000px;
            }

   footer {
        background-color: black;
        color: white;
        height: 34px;
        line-heiht: 32px;
        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;
   }

   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;
        line-style: none;
        margin : 0px auto;
   }

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

   ul#Nav001 li a {
        background: url(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(yajirushi.gif) no-repeat 2px 0px;
        color: #F90;
   }
    
   article {
        background-color: white;
        display: block;
        padding-left: 50px;
        padding-right: 50px;
        padding-top:10px ;
        text-align: left;
        color:darkblue;
   }