@charset "UTF-8";

.main {

  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/business/mv.png');
  }

  /* =====================
    実績 一覧
  ===================== */
  .overview {
    position: relative;
    padding-block: 130px 260px;
    overflow: hidden;

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

    .u-inner {
      position: relative;
      z-index: 5;

      .u-hgroup {
        & h2.title {
          inline-size: 244px;
        }

        @media only screen and (width <=768px) {
          inline-size: fit-content;
          margin-inline: auto;
          justify-items: center;

          & span[lang='en'] {
            justify-content: center;
            text-align: center;

            &::after {
              content: '';
              display: inline-block;
              inline-size: calc((100 / 390) * 16 * 1vw);
              aspect-ratio: 1/1;
              border-radius: 50rem;
              background-color: var(--secondary);
              flex-shrink: 0;
            }
          }

          & h2.title {
            inline-size: 100%;

            &::after {
              content: '';
              display: block flow;
              inline-size: 100%;
              block-size: 1px;
              background-color: var(--secondary);
            }
          }
        }
      }

      .wrap {
        position: relative;
        display: block flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        margin-block-start: 52px;

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

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

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

        .unit {
          position: relative;

          @media (width <=768px) {
            margin-block-start: 0;
          }

          .catch {
            font-family: var(--serif);
            font-size: 38px;
            font-weight: 600;
            line-height: 1.4;

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

          .description {
            margin-block-start: 3.1em;

            @media only screen and (width <=768px) {
              margin-block-start: 2em;
            }
          }
        }
      }
    }
  }

  /* =====================
    対応建物
  ===================== */
  .business {
    position: relative;
    padding-block: 90px 160px;

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

    .u-inner {
      .wrap {
        position: relative;
        display: block flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;

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

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

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

        .unit {
          position: relative;

          @media (width <=768px) {
            margin-block-start: 0;
          }

          .catch {
            font-family: var(--serif);
            font-size: 38px;
            font-weight: 600;
            line-height: 1.4;

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

          .description {
            margin-block-start: 3.1em;

            @media only screen and (width <=768px) {
              margin-block-start: 2em;
            }
          }
        }
      }

      .section {
        margin-block-start: 110px;

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

        .question {
          position: relative;
          inline-size: fit-content;
          background-color: #fff;
          padding-inline: 29px;
          padding-block: 20px;
          font-family: var(--serif);
          font-size: 28px;
          font-weight: 600;
          line-height: 1.4;
          text-align: center;
          border-radius: 10px;
          margin-inline: auto;
          z-index: 3;

          @media only screen and (width <=768px) {
            font-size: calc((100 / 390) * 22 * 1vw);
            padding-inline: calc((100 / 390) * 20 * 1vw);
            padding-block: calc((100 / 390) * 15 * 1vw);
            border-radius: calc((100 / 390) * 10 * 1vw);
          }

          &::before {
            content: '';
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/business/fukidashi.svg');
            inline-size: 85px;
            block-size: 80px;
            position: absolute;
            bottom: -47px;
            right: 156px;
            z-index: -1;
          }

          @media only screen and (width <=768px) {
            &::before {
              inline-size: calc((100 / 390) * 64 * 1vw);
              block-size: auto;
              aspect-ratio: 85/80;
              position: absolute;
              bottom: calc((100 / 390) * -40 * 1vw);
              right: calc((100 / 390) * 64 * 1vw);
            }
          }
        }

        .img {
          display: block flow;
          margin-block-start: 47px;
          margin-inline: auto;

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

        .solution {
          margin-block-start: 49px;
          display: block grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(2, auto);
          gap: 30px;

          @media only screen and (width <=768px) {
            grid-template-columns: 1fr;
            gap: calc((100 / 390) * 30 * 1vw);
          }

          .unit {
            display: block grid;
            grid-template-rows: subgrid;
            grid-template-columns: 1fr;
            grid-row: span 2;
            row-gap: 0;

            .title {
              position: relative;
              font-weight: bold;
              line-height: 1.4;
              display: block flex;
              align-items: center;
              column-gap: 10px;
              border-radius: 10px 10px 0 0;
              padding-inline: 20px;
              padding-block: 20px;
              color: white;

              @media only screen and (width <=768px) {
                padding-inline: calc((100 / 390) * 20 * 1vw);
                padding-block: calc((100 / 390) * 15 * 1vw);
                border-radius: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 10 * 1vw) 0 0;
              }

              &::before {
                content: '';
                display: block flow;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
              }
            }

            .list {
              display: block flow;
              background-color: #fff;
              padding-inline: 20px;
              padding-block: 40px;
              border-radius: 0 0 10px 10px;

              @media only screen and (width <=768px) {
                padding-inline: calc((100 / 390) * 20 * 1vw);
                padding-block: calc((100 / 390) * 30 * 1vw);
                border-radius: 0 0 calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 10 * 1vw);
              }

              .item {
                position: relative;
                display: block flex;
                align-items: start;
                gap: 10px;
                font-size: 15px;

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

                &::before {
                  content: '';
                  display: block flow;
                  inline-size: 29.1px;
                  aspect-ratio: 1/1;
                  border-radius: 50rem;
                  flex-shrink: 0;
                }

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

                &::after {
                  content: '';
                  display: block flow;
                  background-repeat: no-repeat;
                  background-size: contain;
                  background-position: center;
                  background-image: url('../img/business/icon_check.svg');
                  inline-size: 21px;
                  aspect-ratio: 21/18;
                  position: absolute;
                  top: 6px;
                  left: 5px;
                }

                @media only screen and (width <=768px) {
                  &::after {
                    inline-size: calc((100 / 390) * 14 * 1vw);
                    top: calc((100 / 390) * 6 * 1vw);
                    left: calc((100 / 390) * 5 * 1vw);
                  }
                }

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

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

            &[data-id='01'] {
              .title {
                background-color: #f0b501;

                &::before {
                  background-image: url('../img/business/icon_01.svg');
                  inline-size: 46px;
                  block-size: 62px;
                }

                @media only screen and (width <=768px) {
                  &::before {
                    aspect-ratio: 46/62;
                    inline-size: calc((100 / 390) * 40 * 1vw);
                  }
                }
              }

              .list {
                .item {
                  &::before {
                    background-color: #f0b501;
                  }
                }
              }
            }

            &[data-id='02'] {
              .title {
                background-color: #4073b6;

                &::before {
                  background-image: url('../img/business/icon_02.svg?v=2');
                  inline-size: 61px;
                  block-size: 50px;
                }

                @media only screen and (width <=768px) {
                  &::before {
                    aspect-ratio: 61/50;
                    inline-size: calc((100 / 390) * 50 * 1vw);
                  }
                }
              }

              .list {
                .item {
                  &::before {
                    background-color: #4073b6;
                  }
                }
              }
            }

            &[data-id='03'] {
              .title {
                background-color: #37a7a0;

                &::before {
                  filter: brightness(0) invert(1);
                  background-image: url('../img/business/icon_03.svg');
                  inline-size: 56px;
                  block-size: 54px;
                }

                @media only screen and (width <=768px) {
                  &::before {
                    aspect-ratio: 56/54;
                    inline-size: calc((100 / 390) * 48 * 1vw);
                  }
                }
              }

              .list {
                .item {
                  &::before {
                    background-color: #37a7a0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}