@charset "UTF-8";

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

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

  /* =====================
    products
  ===================== */
  .products {
    padding-block-start: 113px;
    padding-block-end: 109px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 65 * 1vw);
      padding-block-end: calc((100 / 390) * 63 * 1vw);
    }
    .products-about {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 56px;
      .picture {
        flex-shrink: 0;
      }

      @media (width <= 768px) {
        display: block grid;
        justify-items: center;
        gap: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 8 * 1vw);
        .description {
          grid-area: 1/1/2/3;
          font-size: calc((100 / 390) * 16 * 1vw);
          padding-inline: 5px;
        }
        .picture {
          & img {
            inline-size: calc((100 / 390) * 175 * 1vw);
          }
          &[data-id='01'] {
            grid-area: 2/1/3/2;
          }
          &[data-id='02'] {
            grid-area: 2/2/3/3;
          }
        }
      }
    }
    .product-list {
      margin-block-start: 64px;
      .season {
        .season_wrap {
          display: block grid;
          grid-template-columns: max-content auto;
          gap: 0 90px;
          padding-block: 55px;
          padding-inline: 60px;
          border: solid 1px #f3e8d8;

          @media (width <= 768px) {
            grid-template-columns: 1fr;
            row-gap: calc((100 / 390) * 0 * 1vw);
            padding-inline: calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 40 * 1vw);
          }
          &:not(:first-child) {
            border-block-start: none;
          }

          .season-title {
            grid-area: 1/1/3/2;
            inline-size: 126px;
            block-size: 126px;
            border-radius: 50rem;
            border: solid 2px #cbb088;
            color: #cbb088;
            text-align: center;
            display: block grid;
            place-content: center;

            @media (width <= 768px) {
              grid-area: 1/1/2/2;
              inline-size: calc((100 / 390) * 170 * 1vw);
              block-size: unset;
              grid-template-columns: repeat(2, auto);
              align-items: center;
              gap: calc((100 / 390) * 8 * 1vw);
              margin-inline: auto;
              padding-block: calc((100 / 390) * 8 * 1vw);
              border-width: 1px;
            }

            & span[lang='en'] {
              font-family: var(--title);
              font-size: 16px;
              font-weight: 300;
              line-height: 1.2;
              text-transform: uppercase;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 15 * 1vw);
                display: inline;
              }
            }
            .title {
              font-family: var(--title);
              font-size: 40px;
              font-weight: 200;
              line-height: 1.2;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 24 * 1vw);
              }
            }
          }
          .vege {
            grid-area: 1/2/2/3;

            @media (width <= 768px) {
              grid-area: 2/1/3/2;
              margin-block-start: calc((100 / 390) * 30 * 1vw);
            }
          }
          .fruit {
            grid-area: 2/2/3/3;

            @media (width <= 768px) {
              grid-area: 3/1/4/2;
              margin-block-start: calc((100 / 390) * 18 * 1vw);
            }
          }
          .item-list {
            display: block grid;
            grid-template-columns: repeat(5, 184px);
            gap: 6px;
            margin-block-start: 24px;
            margin-block-end: 48px;

            @media (width <= 768px) {
              grid-template-columns: repeat(2, calc((100 / 390) * 160 * 1vw));
              gap: calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 6 * 1vw);
              margin-block-start: calc((100 / 390) * 12 * 1vw);
              margin-block-end: calc((100 / 390) * 0 * 1vw);
            }
            & li {
              border: solid 1px #f3e8d8;
              background-color: #fffaf3;
              text-align: center;

              &:nth-child(10n + 6),
              &:nth-child(10n + 7),
              &:nth-child(10n + 8),
              &:nth-child(10n + 9),
              &:nth-child(10n + 10) {
                background-color: transparent;
              }

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 14 * 1vw);
                line-height: 1.64;

                &:nth-child(10n + 6),
                &:nth-child(10n + 7),
                &:nth-child(10n + 8),
                &:nth-child(10n + 9),
                &:nth-child(10n + 10) {
                  background-color: #fffaf3;
                }
                &:nth-child(4n + 3),
                &:nth-child(4n + 4) {
                  background-color: transparent;
                }
              }
            }
          }
        }
      }
    }
  }
}