.graph_container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 1400px;
      margin: auto;
    }

    .row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .card {
      background: white;
      padding: 24px 32px 20px 32px;
      flex: 1;
      min-width: 0;
      font-weight: bold;
      text-align: left;
    }

    .double-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .tall-card {
      flex: 1;
      display: flex;
      justify-content: top;
      align-items: left;
      background: white;
/*      padding: 40px;*/
      padding: 24px 48px 20px 32px;    
      min-width: 200px;
    }

    .icon-placeholder {
      width: 86px;
      height: 84px;
/*      background: #ddd;*/
      border-radius: 8px;
      margin-right: 8px;
    }

    .number {
      font-size: 1.8em;
      margin-bottom: 4px;
      text-align: right;
    }
    .num_orange {
      color: #FF7F00;
    }
    .number span {
      font-size: 3em;
      font-family: 'Lexend Mega', sans-serif;
      letter-spacing: -0.05em;
    }
    .mf_per{
    text-align: left;
    font-size:20px;
    }


    .number span.size_m{
      font-size: 2em;
      padding: 0 6px;    
    }
    .number span.size_s{
      font-size: 1em;
    }



    .label {
      font-size: 1.1em;
      color: #FF7F00;
      background: #FFF2DD;
      padding: 16px 24px;
      width: auto;
      font-weight: bold;
      text-align: center;
      display: inline-block;
      border-radius: 12px;
      margin-bottom: 16px;
    }


    .data_box .bg_map img{
        width: 100%;
        max-width: 360px;
    }


    .graph_area {
/*      padding: 20px 0;*/
      display: flex;
        max-height: 280px;
    }

    .txt_area_3{
        
    }

    .graph_area .inbox {
      display: flex;
      align-items: baseline;
      font-size: 1.2em;
      font-weight: bold;
    }
    .graph_area .inbox span {
      font-size: 2.2em;
      font-family: 'Lexend Mega', sans-serif;
    }
    .graph_area .inbox p {
      min-width: 60px;
      margin-right: 16px;
      line-height: 100%;
    }
    .orange { color: #FF7F00; }
    .eme_green { color: #3CC0CF; }
    .blue { color: #0093F6; }
    .en_graph {
      width: 240px;
      height: 240px;
      border-radius: 50%;
    }

    .horizontal {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 24px;
    }

    .age-structure {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 48px;
    }

    .vline {
      width: 1px;
      background: #ccc;
    }

    .vline-red-adjusted {
      display: inline-block;
      width: 2px;
      height: 0.6em;
      background: #DCDCDC;
      vertical-align: middle;
/*
      margin-left: 6px;
      margin-right: 6px;
*/
      margin: 0 6px 14px 6px;
    }

    .bars {
      font-size: 0.9em;
      line-height: 1.6;
      width: 100%;
    }
    .bar-block {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .bar {
      height: 24px;
      background: #FF7F00;
      border-radius: 4px;
    }
    .bar-label {
      font-weight: normal;
    }
      

      

    .bar-width-9 { width: 180px; }
    .bar-width-15 { width: 300px; }
    .bar-width-11 { width: 220px; }
    .bar-width-7 { width: 140px; }


       .data_col_7{
          width: 70%
      }
      
      
    @media (min-width: 681px) {  
    .bars_graph{
        float: right;
        vertical-align: middle;
        padding-right: 32px;
        }    
        
    .data_box .bars_graph img{
        width: 100%;
        max-width: 440px;
        }
        
    .bor_tp_lt{
        border-radius: 20px 0 0 0;  
      }  
     .bor_tp_rt{
        border-radius: 0 20px 0 0;  
      } 
      
     .bor_btm_lt{
        border-radius: 0 0 0 20px;  
      }  
     .bor_btm_rt{
        border-radius: 0 0 20px 0;  
      }
        
     .bor_top{
        border-radius: 0 20px 20px 0;  
      }     
        
    .bg_map{
        text-align: left;    
        }    
        
      }
      
      
    @media (min-width: 800px) {
        .graph_area{
            padding: 0 32px;
        }
        .graph_area_img{
            padding-left: 24px;
        }
        
        .data_col_3{
          width: 30%;
          border-right: #DCD0BE solid 1px;
          padding-right:48px;
      }
}

      
      @media (max-width: 680px) {
      .row {
        flex-direction: column;
      }
        .graph_area{
            padding: 0 32px;
            display:inline-block;
            
        }      
          
        .data_col_3{
            width: 100%;
            border-bottom: #DCD0BE solid 1px;
          }  
          
            
      .double-card {
        flex-direction: column;
      }
      .horizontal, .age-structure {
        flex-direction: column;
      }
          
    .number{
        font-size: 1.5em;
        }  
          
    }