@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;
    padding-block-start: 91px;
    padding-block-end: 128px;

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

    .u-inner {
      & > .description {
        margin-block-start: 35px;
        text-align: center;
        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 24 * 1vw);
          text-align: left;
        }
      }

      .img-list {
        display: block grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        gap: 40px;
        margin-block-start: 71px;

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

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

      .works-list {
        margin-block-start: 72px;

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

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

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

        .u-list {
          margin-block-start: 23px;

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

        &[data-id='2'] {
          margin-block-start: 56px;

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