@charset "UTF-8";

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

    @media (width <= 768px) {
      background-image: url('../img/works/mv_2x.png');
    }
  }

  /* =====================
    Works
  ===================== */
  .works {
    position: relative;
    overflow: hidden;

    .section {
      padding-block-start: 92px;
      padding-block-end: 128px;

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 54 * 1vw);
        padding-block-end: calc((100 / 390) * 73 * 1vw);

        &[data-id='2'] {
          padding-block-start: calc((100 / 390) * 62 * 1vw);
        }
      }
      .h2-title {
        position: relative;
        font-family: var(--yumin);
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 0.72px;
        display: block flex;
        gap: 12px;
        align-items: center;

        &::before {
          content: '';
          inline-size: 64px;
          block-size: 1px;
          background-color: #549fd6;
        }

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 20 * 1vw);
          letter-spacing: calc((100 / 390) * 0.6 * 1vw);
          gap: calc((100 / 390) * 12 * 1vw);

          &::before {
            inline-size: calc((100 / 390) * 48 * 1vw);
          }
        }
      }

      .wrap {
        padding-inline-start: 40px;
        margin-block-start: 48px;

        @media (width <= 768px) {
          padding-inline-start: 0;
          margin-block-start: calc((100 / 390) * 21 * 1vw);
        }

        .h3-title {
          font-family: var(--yumin);
          font-size: 22px;
          font-weight: 600;

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

        .description {
          margin-block-start: 19px;

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

        .works-list {
          margin-block-start: 41px;
          display: block flex;
          gap: 16px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 33 * 1vw);
            flex-wrap: wrap;
            gap: calc((100 / 390) * 12 * 1vw);
          }

          & > li {
            padding-inline: 30px;
            padding-block: 9.5px;
            border-radius: 50rem;
            border: solid 2px #549fd6;

            @media (width <= 768px) {
              padding-inline: calc((100 / 390) * 22 * 1vw);
              padding-block: calc((100 / 390) * 6.4 * 1vw);
              border: calc((100 / 390) * 2 * 1vw) solid #549fd6;
            }
          }
        }
      }

      .loop {
        margin-block-start: 80px;
        display: block flex;
        gap: 24px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 40 * 1vw);
          gap: calc((100 / 390) * 24 * 1vw);
        }

        .loop-box {
          display: block flex;
          animation: loop-list 40s linear infinite;
          gap: 24px;
          flex-shrink: 0;

          @media (width <= 768px) {
            animation: loop-list 40s linear infinite;
            gap: calc((100 / 390) * 24 * 1vw);
          }
          .loop-item {
            width: fit-content;
            display: block;
            flex-shrink: 0;
            & img {
              @media (width <= 768px) {
                inline-size: calc((100 / 390) * 239 * 1vw);
              }
            }
          }
        }
      }

      &[data-id='2'] {
        .loop {
          .loop-box {
            animation: loop-list-reverse 40s linear infinite;
          }
        }
      }
    }
  }
}

/* 右から左 */
@keyframes loop-list {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
/* 右から左 */
@keyframes loop-list-reverse {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}