@charset "UTF-8";
/*------------------------------
  データでわかる東3冷凍機（/data/）
------------------------------*/

.page-data{
  .data{
    background-color: var(--white-through);
    padding-bottom: 14rem;
    @media screen and (max-width: 768px) {
      padding-bottom: 6rem;
    }
    h2{
      font-size: max(2.1rem,14px);
      font-weight: 700;
      color: var(--main);
      text-align: center;
      position: relative;
      padding-bottom: 2rem;
      @media screen and (max-width: 768px) {
        font-size: 1.8rem;
      }
      &::after{
        content: "";
        position: absolute;
        left: calc(50% - 2rem);
        bottom: 0;
        width: 4rem;
        height: 0.3rem;
        background-color: #0056a9;
      }
    }
  }
  .data-grid{
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: max(0.1rem,1px) solid var(--border);
    border-left: max(0.1rem,1px) solid var(--border);
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      margin-top: 2rem;
    }
    li{
      position: relative;
      background-color: var(--white);
      height: 32rem;
      border-right: max(0.1rem,1px) solid var(--border);
      border-bottom: max(0.1rem,1px) solid var(--border);
      @media screen and (max-width: 768px) {
        height: auto;
        padding-bottom: 2.5rem;
      }
    }
    h3{
      border-left: 0.3rem solid var(--accent);
      font-size: max(1.8rem,12px);
      font-weight: 500;
      padding-left: 1em;
      padding-block: 1em;
      @media screen and (max-width: 768px) {
        font-size: 1.6rem;
        padding-block: 0.6em;
      }
    }
    .icon{
      margin-top: 2rem;
      height: 10rem;
      display: grid;
      place-content: center;
      @media screen and (max-width: 768px) {
        margin-top: 0;
        height: 6rem;
      }
      img{
        width: calc(var(--iw) * 0.1rem);
        @media screen and (max-width: 768px) {
          width: calc(var(--iw) * 0.075rem);
        }
      }
    }
    .num{
      text-align: center;
      span{
        display: inline-block;
      }
      .count{
        font-size: 10rem;
        font-family: var(--font-roboto);
        color: #0056a9;
        font-feature-settings: "pnum";
        letter-spacing: -0.02em;
        @media screen and (max-width: 768px) {
          font-size: 6rem;
        }
      }
      .unit{
        font-size: 4rem;
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 2.8rem;
        }
      }
    }
    .caption{
      font-size: 1.4rem;
      position: absolute;
      right: 2rem;
      bottom: 1.8rem;
      @media screen and (max-width: 768px) {
        bottom: 1.2rem;
        right: 1.5rem;
      }
    }
    .graph{
      width: 23rem;
      height: 23rem;
      margin-inline: auto;
      border-radius: 50%;
      position: relative;
      /* background-color: #0056a9; */
      &::after{
        content: "";
        display: block;
        width: 7rem;
        height: 7rem;
        border-radius: 50%;
        background-color: var(--white);
        position: absolute;
        top: calc(50% - 3.5rem);
        left: calc(50% - 3.5rem);
      }
      img{
        opacity: 0;
        transform: translateY(2rem);
        transition: transform 1s ease 0.4s, opacity 1s ease 0.4s;
      }
      &[data-animate="shown"]{
        img{
          transform: translateY(0);
          opacity: 1;
        }
      }
      &.graph01{
        padding: 1.5rem 2rem 0 1.2rem;
        background-image: conic-gradient(
          var(--c01) var(--g01),
          var(--c02) var(--g01) var(--g02),
          var(--c03) var(--g02) var(--g03),
          var(--c04) var(--g03) var(--g04),
          var(--c05) var(--g04) var(--g05),
          var(--c06) var(--g05) var(--g06),
          transparent var(--g06) 100%
        );
        &[data-animate="shown"]{
          animation: graph01 1s ease forwards;
        }
      }
      &.graph02{
        padding: 5.8rem 1.6rem 0 2.2rem;
        background-image: conic-gradient(
          var(--c01) var(--g01),
          var(--c02) var(--g01) var(--g02),
          transparent var(--g02) 100%
        );
        &[data-animate="shown"]{
          animation: graph02 1s ease forwards;
        }
      }
      &.graph03{
        padding: 2.2rem 4rem 0 8.3rem;
        background-image: conic-gradient(
          var(--c01) var(--g01),
          var(--c02) var(--g01) var(--g02),
          transparent var(--g02) 100%
        );
        &[data-animate="shown"]{
          animation: graph03 1s ease forwards;
        }
      }
    }
  }
}