@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/business/mv.png');
  }
  /* =====================
    実績 一覧
  ===================== */
  .business {
    position: relative;
    padding-block: 120px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 64 * 1vw);
    }

    .business-list {
      counter-reset: number;

      .item {
        position: relative;
        margin-inline: auto;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url('../img/business/business_bg.png');
        inline-size: 1200px;
        min-block-size: 440px;
        padding-inline: 80px;
        padding-block: 80px;
        border-radius: 20px;

        @media only screen and (width <= 768px) {
          inline-size: 100%;
          min-block-size: unset;
          padding-inline: calc((100 / 390) * 24 * 1vw);
          padding-block: calc((100 / 390) * 32 * 1vw) calc((100 / 390) * 48 * 1vw);
          border-radius: calc((100 / 390) * 20 * 1vw);
        }

        .wrap {
          display: block flex;
          align-items: center;
          justify-content: space-between;
          gap: 40px;

          @media only screen and (width <= 768px) {
            flex-direction: column;
            gap: calc((100 / 390) * 24 * 1vw);
          }

          .unit {
            .title {
              position: relative;
              font-size: 24px;
              font-weight: 500;
              display: block flex;
              align-items: center;
              gap: 16px;

              @media only screen and (width <= 768px) {
                font-size: calc((100 / 390) * 24 * 1vw);
                gap: calc((100 / 390) * 12 * 1vw);
              }

              &::before {
                counter-increment: number;
                content: '0' counter(number);
                background-image: var(--gradation);
                font-family: var(--title);
                font-size: 48px;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                flex-shrink: 0;
              }

              @media only screen and (width <= 768px) {
                &::before {
                  font-size: calc((100 / 390) * 40 * 1vw);
                }
              }
            }
            .description {
              margin-block-start: 1em;
            }
          }

          .img {
            display: block flow;
            flex-shrink: 0;

            @media only screen and (width <= 768px) {
              inline-size: 100%;
            }
          }
        }

        &:nth-child(even) {
          .wrap {
            flex-direction: row-reverse;

            @media only screen and (width <= 768px) {
              flex-direction: column;
            }
          }
        }

        & + .item {
          margin-block-start: 48px;

          @media only screen and (width <= 768px) {
            margin-block-start: calc((100 / 390) * 48 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    対応建物
  ===================== */
  .conformance {
    position: relative;
    padding-block: 120px;
    background-color: #f3ffff;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 64 * 1vw);
    }

    .u-inner {
      h3.title {
        position: relative;
        font-size: 24px;
        font-weight: 500;
        color: var(--primary);
        display: block flex;
        align-items: center;
        gap: 16px;
        justify-content: center;

        @media only screen and (width <= 768px) {
          font-size: calc((100 / 390) * 24 * 1vw);
          gap: calc((100 / 390) * 16 * 1vw);
        }

        &::before {
          content: '';
          display: block;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/_common/icon_logo.svg');
          inline-size: 25.4px;
          aspect-ratio: 16/13;
          flex-shrink: 0;
        }

        @media only screen and (width <= 768px) {
          &::before {
            inline-size: calc((100 / 390) * 24 * 1vw);
          }
        }
      }
      .description {
        text-align: center;
        margin-block-start: 58px;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 48 * 1vw);
        }
      }

      .list {
        margin-block-start: 40px;
        margin-inline: 130px;
        display: block grid;
        grid-template-columns: repeat(4, 220px);
        justify-content: space-between;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 40 * 1vw);
          margin-inline: 0;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }

        .item {
          background-color: #fff;
          border-radius: 20px;
          box-shadow: 0px 0px 20px rgba(199, 241, 255, 0.6);
          display: block grid;
          place-content: center;
          aspect-ratio: 1 / 1;

          @media only screen and (width <= 768px) {
            border-radius: calc((100 / 390) * 20 * 1vw);
            box-shadow: 0px 0px calc((100 / 390) * 20 * 1vw) rgba(199, 241, 255, 0.6);

            .img {
              inline-size: calc((100 / 390) * 120 * 1vw);
            }
          }

          h4.title {
            text-align: center;
            font-weight: 500;
            color: var(--primary);
          }
        }
      }
      .u-anchor {
        margin-block-start: 54px;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 48 * 1vw);
        }
      }
    }
  }
}