#bill_aggregation {
  padding-top: 60px;
  overflow: hidden;
  line-height: normal;
  text-align: center;

  h2 {
    margin-bottom: clamp(30px, 1.377rem + 2.12vw, 42px);
    font-size: clamp(22px, 0.919rem + 1.95vw, 33px);
    line-height: 1.65;
  }

  h3 {
    margin-bottom: clamp(26px, 0.712rem + 3.89vw, 48px);
    font-size: clamp(18px, 0.627rem + 2.12vw, 30px);
    line-height: 1.65;
  }

  section {
    padding-top: clamp(30px, 0.216rem + 7.08vw, 70px);
    padding-right: 20px;
    padding-left: 20px;
  }

  .firstview {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: clamp(30px, 0.299rem + 6.73vw, 68px);

    .target {
      width: 17.5em;
      margin-bottom: clamp(15px, 0.212rem + 3.1vw, 32.5px);
      padding: 8.5px 0 9.5px;
      border-top: 1px solid #CCCCCC;
      border-bottom: 1px solid #CCCCCC;
      font-size: clamp(14px, 0.792rem + 0.35vw, 16px);
    }

    > img {
      width: clamp(334px, -0.115rem + 89.56vw, 840px);
      height: auto;
    }
  }

  .summary {
    padding-bottom: clamp(45px, -0.091rem + 12.39vw, 115px);

    .comparison {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(10px, -0.205rem + 3.54vw, 30px);
    }

    > hgroup {
      margin-bottom: clamp(26px, 0.546rem + 4.6vw, 52px);

      > h3 {
        margin-bottom: clamp(12px, 0.501rem + 1.06vw, 18px);
      }
    }

    .comparison-before,
    .comparison-after {
      width: clamp(333px, 14.009rem + 29.03vw, 497px);
      height: clamp(340px, 13.783rem + 31.86vw, 520px);
      border-radius: 5px;
      background-color: #FFFFFF;
      box-shadow: 0px 3px 6px #C2C2C229;

      > h4 {
        border-radius: 5px 5px 0 0;
        color: #FFFFFF;
        font-size: clamp(16px, 0.668rem + 1.42vw, 24px);
        line-height: clamp(44px, 1.837rem + 3.89vw, 66px);
      }

      > img {
        width: clamp(265px, 11.17rem + 23.01vw, 395px);
        height: auto;
        margin-top: clamp(22px, 1.085rem + 1.24vw, 29.5px);
      }

      > p {
        font-size: clamp(14px, 0.626rem + 1.06vw, 20px);
      }
    }

    .comparison-before {
      > h4 {
        background-color: #A9A9A9;
      }
    }

    .comparison-after {
      > h4 {
        background-color: #03AF7A;
      }
    }
  }

  .benefits {
    padding-bottom: clamp(60px, 0.183rem + 15.22vw, 146px);
    background-image: url('../../img/pre/bill-aggregation/background_bill.png');
    background-position: bottom -100px left -40px;
    background-size: clamp(276px, 5.303rem + 50.97vw, 492px) auto;
    background-repeat: no-repeat;
    background-color: #03AF7A;

    > h3 {
      color: #FFFFFF;

      > span {
        font-size: clamp(24px, 0.256rem + 5.31vw, 54px);
      }
    }

    .benefit-list {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 1024px;
      margin: 0 auto;
      gap: clamp(12px, 0.46rem + 1.24vw, 19px);
    }

    .benefit-list__item {
      width: clamp(334px, 13.989rem + 29.38vw, 500px);
      height: clamp(188px, 7.311rem + 18.94vw, 295px);
      padding-top: clamp(0px, -0.747rem + 3.19vw, 18px);
      border-radius: 5px;
      background-color: #FFFFFF;

      > img {
        width: clamp(141px, 6.572rem + 9.56vw, 195px);
        height: auto;
      }

      > P {
        font-size: clamp(14px, 0.709rem + 0.71vw, 18px);
      }
    }
  }

  .how-to {
    container-type: inline-size;
    position: relative;
    padding-bottom: clamp(78px, 2.635rem + 9.56vw, 132px);

    .how-to__content {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 1fr auto 1fr;
      max-width: 1024px;
      margin: 0 auto;
      padding-top: clamp(20px, -0.16rem + 6.02vw, 54px);
      padding-right: 20px;
      padding-bottom: 65px;
      padding-left: 20px;
      background-color: #EBF9F0;

      @container (width <= 786px) {
        grid-template-rows: repeat(5, auto);
        grid-template-columns: auto;
      }

      > p {
        align-self: center;
        color: #03AF7A;
        font-weight: bold;
        font-size: clamp(13px, 0.605rem + 0.88vw, 18px);

        @container (width <= 786px) {
          margin-bottom: 15px;
        }
      }

      .how-to__text-before {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
      }

      .how-to__text-after {
        position: relative;
        grid-row: 1 / 2;
        grid-column: 3 / 4;

        &::before,
        &::after {
          display: block;
          position: absolute;
          width: 2.5em;
          height: 2px;
          background-color: #03AF7A;
          content: '';
        }
        &::before {
          top: 1.5em;
          left: 50%;
          transform: rotateZ(65deg) translate(-3.7em, 7.8em);
        }
        &::after {
          top: 1.5em;
          right: 50%;
          transform: rotateZ(-65deg) translate(3.5em, 7.5em);
        }

        @container (width <= 786px) {
          grid-row: 4 / 5;
          grid-column: 1 / 2;
        }
      }

      .how-to__img-before {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        justify-self: center;
        width: clamp(298px, 13.813rem + 20.53vw, 414px);
        height: auto;

        @container (width <= 786px) {
          grid-row: 2 / 3;
        }
      }

      .how-to__img-after {
        grid-row: 2 / 3;
        grid-column: 3 / 4;
        align-self: center;
        justify-self: center;
        width: clamp(240px, 10.852rem + 17.7vw, 340px);
        height: auto;

        @container (width <= 786px) {
          grid-row: 5 / 6;
          grid-column: 1 / 2;
        }
      }

      .how-to__img-arrow {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        align-self: center;
        justify-self: center;

        > img {
          width: 35px;
        }

        @container (width <= 786px) {
          grid-row: 3 / 4;
          grid-column: 1 / 2;
          margin-top: 28px;
          margin-bottom: 30px;
        }
      }
    }

    .how-to__img-ppl {
      position: absolute;
      bottom: 0;
      left: 53%;
      width: clamp(174px, 6.395rem + 19.12vw, 282px);
      height: auto;
      transform: translateX(-50%);

      @media screen and (width <= 670px) {
        left: 60%;
      }
    }
  }

  .contact-form {
    container-type: inline-size;
    display: flex;
    column-gap: 86px;
    row-gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: clamp(40px, 0.509rem + 8.5vw, 88px);
    padding-right: 20px;
    padding-bottom: clamp(40px, 1.007rem + 6.37vw, 76px);
    padding-left: 20px;

    > p {
      font-size: clamp(16px, 0.751rem + 1.06vw, 22px);
      text-align: left;

      @container (width <= 1011px) {
        text-align: center;
      }
    }

    > a {
      width: 307px;
    }
  }
}