@charset "UTF-8";

.main {
  .business {
    padding-block: 129px 130px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 130 * 1vw) calc((100 / 750) * 130 * 1vw);
    }
    .business_content {
      position: relative;
      display: block flex;
      gap: 90px;

      @media (width <= 768px) {
        display: block flow;
      }

      .side-menu {
        position: sticky;
        top: 0;
        left: 0;
        inline-size: 180px;
        block-size: 100%;

        @media (width <= 768px) {
          position: relative;
          inline-size: 100%;
          display: block flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: calc((100 / 750) * 10 * 1vw) calc((100 / 750) * 20 * 1vw);
        }

        & > li {
          border-top: 1px solid #172f49;

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

          &:last-child {
            border-bottom: 1px solid #172f49;
          }

          @media (width <= 768px) {
            &:last-child {
              border-bottom: none;
            }
          }
          .u-hover {
            display: block grid;
            justify-items: center;
            inline-size: 100%;
            padding-block: calc(36px + var(--leading-trim)) calc(30px + var(--leading-trim));

            .no {
              font-family: var(--yumin);
              font-size: 30px;
              font-weight: 600;
              line-height: 1.13;

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 40 * 1vw);
              }
            }
            .title {
              font-family: var(--yumin);
              font-size: 22px;
              font-weight: 600;
              line-height: 1.55;

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 28 * 1vw);
                line-height: 1.21;
              }
            }
            & span[lang='en'] {
              font-size: 12px;
              font-weight: 500;
              line-height: 2;
              color: #98afe8;

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 14 * 1vw);
              }
            }
          }
        }
      }
      .business-list {
        @media (width <= 768px) {
          margin-block-start: calc((100 / 750) * 63 * 1vw);
        }
        & > li {
          padding-block: calc(70px + var(--leading-trim)) 58px;
          border-top: 1px solid #172f49;

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

          .h2-title {
            position: relative;
            display: block flex;
            align-items: flex-end;
            gap: 20px;

            @media (width <= 768px) {
              display: block flow;
            }

            .title {
              position: relative;
              display: block flex;
              align-items: flex-start;
              gap: 2px;
              font-family: var(--yumin);
              font-size: 40px;
              font-weight: 600;
              line-height: 1.5;

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 46 * 1vw);
                display: block flow;
                padding-left: calc((100 / 750) * 14 * 1vw);
              }

              &::before {
                content: '';
                display: block flow;
                inline-size: 8px;
                aspect-ratio: 1/1;
                border-radius: 50rem;
                background-color: var(--secondary);
                flex-shrink: 0;
                pointer-events: none;

                @media (width <= 768px) {
                  inline-size: calc((100 / 750) * 12 * 1vw);
                  position: absolute;
                  top: calc((100 / 750) * -6 * 1vw);
                  left: 0;
                }
              }
            }
            & > span[lang='en'] {
              font-size: 14px;
              font-weight: 500;
              line-height: 3.3;
              color: #98afe8;

              @media (width <= 768px) {
                display: block flow;
                font-size: calc((100 / 750) * 18 * 1vw);
                line-height: 1;
                padding-left: calc((100 / 750) * 14 * 1vw);
              }
            }
          }

          .h3-title {
            inline-size: fit-content;
            font-family: var(--yumin);
            font-size: 22px;
            font-weight: 600;
            line-height: 1.8;
            color: #fff;
            padding-inline: 20px;
            padding-block: calc(14px + var(--leading-trim));
            background-color: #172f49;
            margin-block-start: 23px;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 30 * 1vw);
              padding-inline: calc((100 / 750) * 24 * 1vw);
              padding-block: calc((100 / 750) * 9 * 1vw);
              margin-block-start: calc((100 / 750) * 37 * 1vw);
            }
          }
          &:last-child {
            padding-block: calc(70px + var(--leading-trim)) 0;

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