#hidari{
    height: 93%;
    width: calc(100% - 305px); /* コンテナの幅を調整 */
    float:left;
    background-color: #16135C;
    margin-left:10px;
}
#hidari1{
    height: 93%;
    width: calc(100% - 450px); /* コンテナの幅を調整 */
    float:left;
    background-color: #16135C;
    margin-left:10px;
}
#migi{
	float:right;
	width:420px;
	height:92%;
	border: 2px solid #999;
	background-color:#FFFFFF;
    margin-right:10px;
    font-size: 12px;
    padding: 2px;
}  
#migi1{
	float:right;
	width:270px;
	height:90%;
	border: 2px solid #999;
	background-color:#FFFFFF;
    margin-right:10px;
    font-size: 12px;
    padding: 2px;
}
#main{
    width: 100%;
    height: 100%;
}
 #box-a {
    display: flex; 
    border: 2px solid #FFF;
    border-radius: 10px;
    width: 100%;
    height: 450px;
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 5px;
}        
#box-b {
  display: flex;
  gap: 10px;
  width: 240px;
  height: 220px;
  border: 2px solid #FFF;
  border-radius: 10px;
  margin-top: 6px;
}
  
#box-c {
  display: flex;
  gap: 10px;
  width: 240px;
  height: 220px;
  border: 2px solid #FFF;
  border-radius: 10px;
  margin-top: 6px;
}        
#box-d {
  display: flex;
  width: 240px;
  height: 250px;
  border: 2px solid #FFF;
  border-radius: 10px;
  margin-left: 6px;
  padding:10px;   
}    
#box-e {
  display: flex;
  width: 240px;
  height: 250px;
  border: 2px solid #FFF;
  border-radius: 10px;
  margin-left: 6px;
  padding:10px;   
} 
#box-f {
  display: flex;
  gap: 10px;
  max-width: 400px;
  min-height: 250px;
  border: 2px solid #FFF;
  border-radius: 10px;
  margin-top: 6px;
} 
#box-g {
    display: block;  /* ← 元に戻す */
    overflow-y: auto;

    border: 2px solid #FFF;
    border-radius: 10px;
    width: 100%;
    height: 450px;
    background-color: #FFFFFF !important;
    z-index: 999;
}
 
#tate{
    width: 270px;            
}        

#sourceLineChart {
  width: 100% !important;
  height: 100% !important;
  display: block;
}        
.legend {
  color: white;
  font-size: 13px;
  margin-top: 0px;
}
.legend .box {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  margin-left: 6px;
  border: 1px solid white;
  vertical-align: middle;
} 
.wrapbox{
  display: -webkit-box; /*Android4.3*/
  display: -moz-box;    /*Firefox21*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*PC-Safari,iOS8.4*/
}

.flex-box {
    display: flex;
    gap: 6px;
    padding: 2px;
  }
.flex-box1 {
  display: flex;
  justify-content: flex-end; /* ← これが必要！！ */
  gap: 8px; /* ボタン同士に間を空ける（あったほうがきれい） */
  align-items: center; /* 縦方向も揃えるならこれも */
}
 
.chart-container {
    display: flex;
  height: 100%;
    width: 100%;
}
.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.chart-container1 {
    display: flex;
  height: 100%;
    width: 100%;
    background-color: #FDF9F9;
}
.chart-container1 canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}