@charset "utf-8";

/* 電源構成・非化石証書使用状況 の図 */

  :root{
    --blue:#2f6fed;
    --green:#5cb84e;
  }
  *{box-sizing:border-box;}

  .c-box-energymix {
    margin:0;
    padding:40px 20px 0;
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  }

  .energymix-title{
    text-align:center;
    font-size:22px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height: 1.5em;
    margin:0 auto 40px;
  }
  .container{
    display:flex;
    justify-content:center;
    gap:80px;
    flex-wrap:wrap;
  }
  .chart-block{
    width:400px;
  }
  .donut-wrap{
    position:relative;
    width:340px;
    height:340px;
    margin:0 auto;
  }
  .donut{
    width:100%;
    height:100%;
    border-radius:50%;
    /* outer ring = green (100%), inner ring = blue (100%) via layered conic gradients */
    background:
      radial-gradient(circle at center, #fff 0 105px, transparent 105px),
      conic-gradient(var(--blue) 0 360deg);
    position:relative;
  }
  .donut::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background: conic-gradient(var(--green) 0 360deg);
    -webkit-mask: radial-gradient(circle at center, transparent 0 140px, #000 140px);
    mask: radial-gradient(circle at center, transparent 0 140px, #000 140px);
  }
  .donut-center{
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .donut-center .label{
    font-size:19px;
    font-weight:700;
    letter-spacing:0.15em;
    margin-bottom:8px;
  }
  .donut-center .date{
    font-size:13px;
    letter-spacing:0.03em;
    line-height:1.5;
    color:#333;
  }
  .pct-outer{
    position:absolute;
    top:0; left:0; right:0;
    text-align:center;
    font-size:20px;
    font-weight:800;
    letter-spacing:0.1em;
    color:#fff;
  }
  .pct-inner{
    position:absolute;
    top:36px; left:0; right:0;
    text-align:center;
    font-size:20px;
    font-weight:800;
    letter-spacing:0.1em;
    color:#fff;
  }
  .legend{
    margin-top:30px;
  }
  .legend-group{
    border:1px solid var(--blue);
    border-radius:4px;
    background: #fff;
    padding:14px 18px 14px 18px;
    position:relative;
    margin-bottom:18px;
  }
  .legend-group.green{
    border-color:var(--green);
  }
  .legend-title{
    position:absolute;
    top:-11px;
    left:14px;
    background: #fff;
    padding:0 8px;
    font-size:13px;
    color:#333;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .legend-row{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    margin-top:6px;
  }
  .swatch{
    width:12px;
    height:12px;
    display:inline-block;
  }
  .swatch.blue{background:var(--blue);}
  .swatch.green{background:var(--green);}
  .legend-row .pct{
    font-size:20px;
    font-weight:700;
    margin-left:auto;
  }
  .legend-row.blue-text .pct{color:var(--blue);}
  .legend-row.green-text .pct{color:var(--green);}