@charset "UTF-8";

.main {
  position: relative;
  /* =====================
    MV
  ===================== */
  .u-mv {
    &::before {
      background-image: url('../img/business/mv.png');
    }
    @media (width <= 768px) {
      &::before {
        background-image: url('../img/business/mv_2x.png');
      }
    }
  }
  /* =====================
    事業内容
  ===================== */
  .introduction {
    position: relative;
    padding-block: 98px 104px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../../assets/img/business/explanation.png');
    min-block-size: 506px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 94 * 1vw) calc((100 / 750) * 128 * 1vw);
      background-image: url('../../assets/img/business/explanation_2x.png');
      background-position: center bottom;
      min-block-size: calc((100 / 750) * 1010 * 1vw);
    }
    & h3 {
      font-size: 32px;
      font-weight: 500;

      @media (width <= 768px) {
        font-size: calc((100 / 750) * 40 * 1vw);
      }
    }
    .description {
      margin-block-start: 24px;
      max-inline-size: 581px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 750) * 22 * 1vw);
        max-inline-size: unset;
      }
    }
  }
}

/* =====================
    事業の流れ
  ===================== */
.business {
  position: relative;
  padding-block: 0 104px;

  &::before {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../../assets/img/business/bg.png');
    inline-size: 100%;
    aspect-ratio: 1300 / 1184;
    bottom: 191px;
    left: 0;
    z-index: -1;
    pointer-events: none;
  }

  @media (width <= 768px) {
    padding-block: calc((100 / 750) * 68 * 1vw) calc((100 / 750) * 128 * 1vw);
    &::before {
      background-image: url('../../assets/img/business/bg_2x.png');
      aspect-ratio: 750/684;
      bottom: calc((100 / 750) * 876 * 1vw);
    }
  }
  .flow {
    @media (width <= 768px) {
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    .u-h2-title {
      @media (width <= 768px) {
        margin-inline: auto;
      }
    }
    .flow-list {
      display: block flex;
      flex-wrap: wrap;
      justify-content: center;
      column-gap: 80px;
      row-gap: 54px;
      margin-block-start: 40px;
      counter-reset: number 0;

      @media (width <= 768px) {
        flex-direction: column;
        align-items: center;
        column-gap: 0;
        row-gap: calc((100 / 750) * 126 * 1vw);
        margin-block-start: calc((100 / 750) * 38 * 1vw);
      }

      & li {
        inline-size: 279px;
        display: block grid;
        grid-template-rows: max-content auto;
        justify-items: center;
        gap: 30px;

        @media (width <= 768px) {
          inline-size: 100%;
          gap: calc((100 / 750) * 60 * 1vw);
        }

        .title {
          position: relative;
          display: block grid;
          place-content: center;
          text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.44);
          font-size: 36px;
          font-weight: bold;
          line-height: 0.53;
          text-align: center;
          color: #fff;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          inline-size: 240px;
          aspect-ratio: 1/1;

          &::before {
            counter-increment: number;
            content: counter(number);
            font-family: var(--title);
            font-style: italic;
            text-shadow: 0 0;
            position: absolute;
            bottom: -5px;
            left: -14px;
            display: block grid;
            place-content: center;
            font-size: 36px;
            font-weight: bold;
            line-height: 0.53;
            text-align: center;
            color: #333;
            inline-size: 80px;
            aspect-ratio: 1/1;
            border-radius: 50rem;
            background-color: #ffed00;
            pointer-events: none;
          }

          @media (width <= 768px) {
            text-shadow: calc((100 / 750) * 4 * 1vw) calc((100 / 750) * 4 * 1vw) calc((100 / 750) * 4 * 1vw) rgba(0, 0, 0, 0.44);
            font-size: calc((100 / 750) * 64 * 1vw);
            inline-size: calc((100 / 750) * 510 * 1vw);

            &::before {
              font-size: calc((100 / 750) * 48 * 1vw);
              inline-size: calc((100 / 750) * 140 * 1vw);
              bottom: calc((100 / 750) * -20 * 1vw);
              left: calc((100 / 750) * -20 * 1vw);
            }
          }
        }
        & p {
          @media (width <= 768px) {
            min-block-size: calc((100 / 750) * 130 * 1vw);
          }
        }
        &[data-id='1'] {
          .title {
            background-image: url('../../assets/img/business/flow_01.png');

            @media (width <= 768px) {
              background-image: url('../../assets/img/business/flow_01_2x.png');
            }
          }
        }
        &[data-id='2'] {
          .title {
            background-image: url('../../assets/img/business/flow_02.png');

            @media (width <= 768px) {
              background-image: url('../../assets/img/business/flow_02_2x.png');
            }
          }
        }
        &[data-id='3'] {
          .title {
            background-image: url('../../assets/img/business/flow_03.png');

            @media (width <= 768px) {
              background-image: url('../../assets/img/business/flow_03_2x.png');
            }
          }
        }
        &[data-id='4'] {
          margin-inline-start: 60px;

          @media (width <= 768px) {
            margin-inline-start: 0;
          }
          .title {
            background-image: url('../../assets/img/business/flow_04.png');

            @media (width <= 768px) {
              background-image: url('../../assets/img/business/flow_04_2x.png');
            }
          }
        }
        &[data-id='5'] {
          .title {
            background-image: url('../../assets/img/business/flow_05.png');

            @media (width <= 768px) {
              background-image: url('../../assets/img/business/flow_05_2x.png');
            }
          }
        }
        &:not(:first-child) {
          .title {
            &::after {
              content: '';
              display: block flow;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../img/_common/polygon.svg');
              inline-size: 30px;
              block-size: 52px;
              position: absolute;
              top: 50%;
              left: -70px;
              transform: translateY(-50%);
            }
          }
          @media (width <= 768px) {
            .title {
              &::after {
                inline-size: calc((100 / 750) * 48 * 1vw);
                block-size: calc((100 / 750) * 82 * 1vw);
                top: calc((100 / 750) * -104 * 1vw);
                left: 50%;
                transform: translateX(-50%) rotate(90deg);
              }
            }
          }
        }
      }
    }
  }
  .items {
    margin-block-start: 116px;

    @media (width <= 768px) {
      margin-block-start: calc((100 / 750) * 83 * 1vw);
    }
    .items-list {
      display: block grid;
      grid-template-columns: repeat(2, 400px);
      justify-content: center;
      gap: 30px;
      margin-block-start: 78px;

      @media (width <= 768px) {
        grid-template-columns: 1fr;
        margin-block-start: calc((100 / 750) * 77 * 1vw);
        gap: calc((100 / 750) * 30 * 1vw);
        padding-inline: calc((100 / 750) * 46 * 1vw);
      }

      & li {
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        border-radius: 20px;
        background-color: #ffed00;
        border: 2px solid #ffed00;
        transition: all 250ms ease 0s;
        @media (any-hover: hover) {
          &:hover {
            background-color: white;
          }
        }

        & a {
          padding-block: 18px;
          display: block flow;
        }

        @media (width <= 768px) {
          font-size: calc((100 / 750) * 32 * 1vw);

          & a {
            padding-block: calc((100 / 750) * 29 * 1vw);
          }
        }
      }
    }
    .description {
      margin-block-start: 40px;
      text-align: center;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 750) * 58 * 1vw);
      }
    }
  }
}