@charset "UTF-8";

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

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

  /* =====================
    shop
  ===================== */
  .shop {
    padding-block-start: 114px;
    padding-block-end: 113px;
    background-color: #f8f4ef;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 65 * 1vw);
      padding-block-end: calc((100 / 390) * 63 * 1vw);
    }
    .description {
      margin-inline-start: 40px;

      @media (width <= 768px) {
        margin-inline-start: 0;
      }
    }
    .shop-list {
      background-color: #fff;
      padding-block: 39px;
      padding-inline: 80px;
      margin-block-start: 80px;

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 47 * 1vw);
        padding-inline: calc((100 / 390) * 32 * 1vw) calc((100 / 390) * 12 * 1vw);
        margin-block-start: calc((100 / 390) * 48 * 1vw);
      }
      & > ul {
        display: block grid;
        grid-template-columns: repeat(3, 340px);
        gap: 32.2px 24px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 16 * 1vw);
        }
        & > li {
          position: relative;
          white-space: nowrap;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 14 * 1vw);
            line-height: 1.5;
            white-space: wrap;
          }
        }
        @media (width <= 768px) {
          .u-cube {
            align-items: start;
            &::before {
              inline-size: calc((100 / 390) * 9 * 1vw);
              block-size: calc((100 / 390) * 9 * 1vw);
              margin-block-start: calc((100 / 390) * 6 * 1vw);
            }
          }
        }
      }
    }
  }
}