ul.usage-guide {
  box-sizing: border-box;
  width: 900px;
  padding: 5px 20px;
}

ul.usage-guide li {
  display: inline-block;
  font-size: 12px;
  position: relative;
  width: 150px;
}

ul.usage-guide li:nth-last-of-type(n + 2) {
  margin-right: 10px;
}

ul.usage-guide li::before, ul.usage-guide li::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
}

ul.usage-guide li::before {
  width: 30px;
  height: 10px;
  margin-right: 5px;
}

ul.usage-guide li::after {
  width: 30px;
  height: 2px;
  margin-right: 5px;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(-50%, -50%);
}

ul.usage-guide li:nth-of-type(1)::before{
    background-color: rgb(199,21,133);
}
ul.usage-guide li:nth-of-type(2)::before{
    background-color: rgb(105,105,105);
}
ul.usage-guide li:nth-of-type(3)::before{
    background-color: rgb(255,140,0);
}
ul.usage-guide li:nth-of-type(4)::before{
    background-color: rgb(0,191,255);
}
ul.usage-guide li:nth-of-type(5)::before{
    background-color: rgb(255,255,0);
}
ul.usage-guide li:nth-of-type(6)::before{
    background-color: rgb(0,128,0);
}
ul.usage-guide li:nth-of-type(7)::before{
    background-color: rgb(50,205,50);
}
ul.usage-guide li:nth-of-type(8)::before{
    background-color: rgb(100,149,237);
}
ul.usage-guide li:nth-of-type(9)::before{
    background-color: rgb(255,228,181);
}
ul.usage-guide li:nth-of-type(10)::before{
    background-color: rgb(211,211,211);
}
ul.usage-guide li:nth-of-type(11)::before{
    background-color: rgb(250,128,114);
}
ul.usage-guide li:nth-of-type(12)::before{
    background-color: rgb(65,105,225);
}
ul.usage-guide li:nth-of-type(13)::before{
    background-color: rgb(128,0,0);
}
ul.usage-guide li:nth-of-type(14)::before {
    background-color: rgb(75,0,130);
}
ul.usage-guide li:nth-of-type(15)::after {
    background-color: rgb(255,0,0);
}

.hanrei{
 display: flex;
  justify-content: center;
}

/* 恬撹タグのちらつき契峭 */
#chartSetdt{
  visibility:hidden;
} 
#tableSetdt{
  visibility:hidden;
} 

#men_graph {
    position: relative;
    width: 90%;
  	max-width: 90%; 
}

.demand_top{
  display: flex;
}

.demand_title{
  display: flex;
  align-items: center;
  width: 200px;
}

.demand_comment{
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 85%;
}

@media screen and (max-width: 768px) {
  #men_graph {
    position: relative;
  width:100%;
  max-width: 100%; 
  }
  
  .demand_top{
    flex-direction: column;
    flex: 1;
  }

  .demand_comment{
    margin-top: 10px;
  }
}