@charset "UTF-8";

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

  /* =====================
    works
  ===================== */
  .works {
    position: relative;
    padding-block-start: 81px;
    padding-block-end: 112px;

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

    &::before {
      content: '';
      display: block flow;
      background-position: center;
      background: url(../img/_common/bg.png) lightgray 0% 0% / 100% repeat;
      inline-size: 100%;
      block-size: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0.1;
    }
    @media (width <= 768px) {
      &::before {
        background: url(../img/_common/bg.png) lightgray 0% 0% / 150% repeat;
      }
    }
    .u-inner {
      padding-inline: 120px;

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

      .btn-list {
        display: block flex;
        gap: 24px;

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

        .item {
          background-color: var(--primary);
          inline-size: fit-content;
          border-radius: 10px;

          @media (width <= 768px) {
            inline-size: 100%;
            border-radius: calc((100 / 390) * 10 * 1vw);
          }

          .btn {
            display: block flow;
            inline-size: 100%;
            block-size: 100%;
            padding-block: 14px;
            padding-inline: 33px;

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

            .btn-txt {
              position: relative;
              color: #fff;
              display: block flex;
              align-items: center;
              gap: 8.2px;

              @media (width <= 768px) {
                gap: calc((100 / 390) * 8.2 * 1vw);
                justify-content: space-between;
              }

              &::before {
                content: '';
                display: block flow;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url('../img//works//btn_arrow.svg');
                inline-size: 7px;
                block-size: 10px;
                position: absolute;
                top: 50%;
                right: 9px;
                transform: translateY(-50%);
                z-index: 3;
              }

              @media (width <= 768px) {
                &::before {
                  inline-size: calc((100 / 390) * 7 * 1vw);
                  block-size: calc((100 / 390) * 10 * 1vw);
                  right: calc((100 / 390) * 9 * 1vw);
                }
              }
              &::after {
                content: '';
                display: block flow;
                inline-size: 26px;
                aspect-ratio: 1/1;
                background-color: #fff;
                flex-shrink: 0;
                border-radius: 50rem;
              }

              @media (width <= 768px) {
                &::after {
                  inline-size: calc((100 / 390) * 26 * 1vw);
                }
              }
            }
          }
          @media (any-hover: hover) {
            &:hover {
              background-color: var(--secondary);
            }
          }
        }
      }

      .js-target {
        margin-block-start: 80px;

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

        .list {
          display: block grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 40px 32px;
          padding-inline: 24px;
          margin-block-start: 40px;

          @media (width <= 768px) {
            grid-template-columns: 1fr;
            gap: calc((100 / 390) * 16 * 1vw);
            padding-inline: 0;
            margin-block-start: calc((100 / 390) * 32 * 1vw);
          }
          .item {
            & img {
              border-radius: 10px;

              @media (width <= 768px) {
                border-radius: calc((100 / 390) * 10 * 1vw);
                inline-size: 100%;
              }
            }
          }
        }
      }
    }
  }
}