@charset "utf-8";
/* 電源構成・非化石証書使用状況・CO₂排出係数 CSS Document */

a[id] {
    display: flow-root;
    padding-top: 10px;
    margin-top: -10px;
}

#pagetitle.template_c2 {
    background-image: url(/dcms_media/image/kv_power-supply.webp);
    background-position: bottom;
}

.contents.-subpage {
    padding-bottom: 80px;
}

.inner_min {
    max-width: 1200px;
    width: 100%;
}

.contact_mid06 .mid06box .btn_box {
    max-width: unset;
}

.contact_mid06 {
    padding: 80px 0;
}

.contact_mid06 .mid06box {
    margin-bottom: 0;
}

.contact_mid06 .mid06box .btn_box {
    max-width: unset;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

.contact_mid06 .mid06box .btn_box .btn01 {
    margin-bottom: 0;
}

.contact_mid06 .mid06box .btn_box .btn01.lay_dgr {
    background-color: #333;
}

.contact_mid06 .mid06box .btn_box .btn01.lay_dgr a {
    color: #fff;
}

#container {
    margin-bottom: 0;
}

.m_T40 {
    margin-top: 40px;
}

.m_T80 {
    margin-top: 80px !important;
}

#pagetitle.template_c2 {
    margin-bottom: 0;
}

.wrap02 {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
}

.wrap02 div {
    width: calc(100% / 2);
}

.wrap02 div img {
    margin-bottom: 10px;
}

.text-b {
    font-weight: bold;
}

.c-box-white-shadow:last-child, .c-box-white-shadow--unshadow:last-child {
    margin-bottom: 0;
    width: 1200px;
    margin: 0 auto;
}

.m_T20 {
margin-top: 20px;
}

/* 円グラフ */
  :root{
    --blue:#3f6fc4;
    --wholesale-blue:#2f6fed;
    --green:#5cb84e;
    --gray:#b3b3b3;
    --header-bg:#e6e6e6;
    /* --text-dark:#333; */
  }
  *{box-sizing:border-box;}

  .pie-chart{
    max-width:1200px;
    margin:0 auto;
  }
  .menu-section{
    margin-bottom:48px;
  }
  .menu-title{
    background:var(--blue);
    color:#fff;
    font-weight:700;
    font-size:18px;
    padding:12px 20px;
    border-radius:3px;
    margin-bottom:22px;
  }
  .charts-row{
    display:flex;
    gap:60px;
    flex-wrap:wrap;
  }
  .chart-col{
    flex:1 1 460px;
    min-width:380px;
  }
  .sub-header{
    background:var(--header-bg);
    border:1px solid #ccc;
    border-radius:3px;
    text-align:center;
    font-size:16px;
    font-weight:600;
    padding:10px 12px;
    margin-bottom:36px;
  }
  .pie-wrap{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .pie{
    width:240px;
    height:240px;
    border-radius:50%;
    flex-shrink:0;
  }
  .callout{
    position:relative;
    margin-top:26px;
    border:2px solid var(--blue);
    border-radius:4px;
    background:#fff;
    padding:12px 22px;
    font-weight:700;
    font-size:17px;
    color:var(--blue);
    text-align:center;
    line-height:1.6;
  }
  .callout::before{
    content:"";
    position:absolute;
    top:-13px;
    left:50%;
    transform:translateX(-50%);
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:13px solid var(--blue);
  }
  .callout.green{
    border-color:var(--green);
    color:var(--green);
  }
  .callout.green::before{
    border-bottom-color:var(--green);
  }
  .callout.wholesale{
    border-color:var(--wholesale-blue);
    color:var(--wholesale-blue);
  }
  .callout.wholesale::before{
    border-bottom-color:var(--wholesale-blue);
  }
  .callout .pct{
    font-size:17px;
  }

  @media (min-width: 1572px){
    .charts-row{
      flex-wrap:nowrap;
    }
    .chart-col{
      flex:1 1 0;
      min-width:0;
    }
  }

.pont_area_02 {
    padding: 40px 30px;
    text-align: center;
    border: 3px solid #333;
    border-radius: 10px;
    margin-top: 40px;
}
.text_impuct04 {
    font-size: 30px;
    margin: 20px auto;
    display: inline-block;
}

  @media (max-width: 600px){
    /* body{
      padding:20px 12px;
    } */
     .c-box-white-shadow:last-child, .c-box-white-shadow--unshadow:last-child {
    width: 90%;
}

.contact_mid06 .mid06box .btn_box {
    width: 90%;
}
    .menu-section{
      margin-bottom:32px;
    }
    .menu-title{
      font-size:15px;
      padding:10px 14px;
      margin-bottom:16px;
    }
    .charts-row{
      flex-direction:column;
      gap:32px;
    }
    .chart-col{
      flex:1 1 auto;
      min-width:0;
      width:100%;
    }
    .sub-header{
      font-size:14px;
      padding:8px 10px;
      margin-bottom:22px;
    }
    .pie{
      width:150px;
      height:150px;
    }
    .callout{
      margin-top:18px;
      padding:10px 14px;
      font-size:14px;
    }
    .callout .pct{
      font-size:15px;
    }

        .pont_area_02 {
        padding: 10px;
        line-height: 1.5;
    }

    .text_impuct04 {
        font-size: 24px;
    }
  }