.product-promote {
  margin-bottom: 120px;

  @media screen and (max-width: 768px) {
    margin-bottom: 60px;
  }

  .promote {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;

    @media screen and (max-width: 768px) {
      gap: 24px;
      flex-wrap: wrap;
      flex-direction: column-reverse;
    }

    &:nth-child(even) {
      flex-direction: row-reverse;

      @media screen and (max-width: 768px) {
        flex-direction: column-reverse;
      }
    }

    .promote-image {
      width: 46%;

      @media screen and (max-width: 768px) {
        width: 100%;
      }

      .promote-image__image {
        display: block;
        width: 100%;
        height: 100%;
      }

      &.pc {
        display: block;

        @media screen and (max-width: 768px) {
          display: none;
        }
      }

      &.sp {
        display: none;

        @media screen and (max-width: 768px) {
          display: block;
        }
      }
    }

    .promote-description {
      width: 46%;

      @media screen and (max-width: 768px) {
        width: 100%;
      }

      .promote-description__title {
        width: 100%;
        color: rgb(var(--color-foreground));
        font-weight: var(--mymoods-font-weight-black);
        font-size: 24px;
        line-height: 1.2;
        text-align: center;
        margin-bottom: 32px;
      }

      .promote-description__description {
        width: 100%;
        color: rgb(var(--color-foreground));
        font-weight: var(--mymoods-font-weight-regular);
        font-size: 16px;
        line-height: 1.5;
        word-break: break-word;
        margin-bottom: 32px;

        @media screen and (max-width: 768px) {
          font-size: 14px;
        }
      }

      .promote-description__button-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;

        .promote-description__button {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 24px;
          height: 48px;
          border: 1px solid var(--mymoods-blue);
          border-radius: 10px;
          background-color: var(--mymoods-blue);
          color: white;
          font-weight: var(--mymoods-font-weight-bold);
          font-size: 16px;
          text-decoration: none;
          transition: .3s;

          &:hover {
            background-color: transparent;
            color: var(--mymoods-blue);
          }
        }
      }
    }
  }
}