@charset "UTF-8";

body[data-page='products01'] {
  .main {
    /* =====================
    MV
  ===================== */
    .u-mv {
      &::before {
        background-image: url('../img/products/products01/mv.png');
      }
      @media (width <= 768px) {
        &::before {
          background-image: url('../img/products/products01/mv_2x.png');
        }
      }
    }
  }
}
body[data-page='products02'] {
  .main {
    /* =====================
    MV
  ===================== */
    .u-mv {
      &::before {
        background-image: url('../img/products/products02/mv.png');
      }
      @media (width <= 768px) {
        &::before {
          background-image: url('../img/products/products02/mv_2x.png');
        }
      }
    }
  }
}
.main {
  /* =====================
    製品情報
  ===================== */
  .products {
    position: relative;
    padding-block: 101px 104px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 118 * 1vw) calc((100 / 750) * 128 * 1vw);
    }

    /* ==== ボタンセット ==== */
    .tab-btn {
      inline-size: 1120px;
      margin-inline: auto;
      background-color: #d9d9d9;
      padding-block: 32px;
      padding-inline: 60px;
      display: block grid;
      justify-items: center;

      @media (width <= 768px) {
        inline-size: calc((100 / 750) * 670 * 1vw);
        padding-block: calc((100 / 750) * 60 * 1vw);
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }

      .description {
        text-align: center;

        @media (width <= 768px) {
          text-align: left;
        }
      }

      .wrap {
        display: block flex;
        justify-content: center;
        gap: 30px;
        margin-block-start: 29px;

        @media (width <= 768px) {
          flex-direction: column;
          margin-block-start: calc((100 / 750) * 40 * 1vw);
          gap: calc((100 / 750) * 40 * 1vw);

          .btn-txt {
            padding-inline: calc((100 / 750) * 32 * 1vw);
          }
        }

        .u-anchor[data-color='yellow'] {
          pointer-events: none;
        }
      }
    }

    /* ==== 製品情報 ==== */
    .products_content {
      margin-block-start: 86px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 750) * 86 * 1vw);
      }
      .u-h2-title[data-position='center'] {
        @media (width <= 768px) {
          justify-items: start;
        }
      }

      .products-list {
        display: block flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 40px;
        row-gap: 40px;
        margin-block-start: 78px;
        padding-inline: 40px;

        @media (width <= 768px) {
          column-gap: calc((100 / 750) * 40 * 1vw);
          row-gap: calc((100 / 750) * 54 * 1vw);
          margin-block-start: calc((100 / 750) * 67 * 1vw);
          padding-inline: 0;
        }

        & li {
          display: block grid;
          justify-items: center;
          row-gap: 20px;

          @media (width <= 768px) {
            row-gap: calc((100 / 750) * 22 * 1vw);
          }

          .title {
            font-size: 20px;
            font-weight: bold;
            line-height: 1.7;

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

          .picture {
            @media (width <= 768px) {
              & img {
                width: 100%;
              }
            }
          }
          .u-anchor {
            @media (width <= 768px) {
              margin-block-start: calc((100 / 750) * 10 * 1vw);
              .btn-txt {
                padding-inline: calc((100 / 750) * 85 * 1vw);
              }
            }
          }
        }
      }
    }
  }
}

body[data-page='products02'] {
  .main {
    /* ==== 製品情報 ==== */
    .products_content {
      .products-list {
        & li {
          .u-anchor {
            @media (width <= 768px) {
              .btn-txt {
                padding-inline: calc((100 / 750) * 59 * 1vw);
              }
            }
          }
        }
      }
    }
  }
}