.comparing {
  position: relative;
  width: 80%;
  margin: 0 auto 3.75rem;
  background: linear-gradient(180deg, var(--white) 62%, var(--light-blue) 62%);
}

.comparing-features-wrap {
  display: flex;
  justify-content: center;
  gap: 1.625rem;
  margin: 2.5rem auto 0;
}

.comparing-features {
  border-radius: 1.5rem;
  background: var(--white);
  max-width: 34.375rem;
  p {
    text-align: center;
    padding: 0.625rem;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 1.5rem 1.5rem 0 0;
  }
  ul {
    margin: 1.25rem 5rem 2.5rem;
    li {
      height: 1.8125rem;
      margin-bottom: 0.625rem;
      white-space: nowrap;
      font-size: 1.125rem;
      font-weight: 700;
    }
  }
}

/* Excelだと */
.excel-features {
  border: 1px solid var(--light-gray);
  p {
    background: var(--light-gray);
  }
  ul li::before {
    display: inline-block;
    content: url("/img/comparing/gray-checkbox.svg");
    margin-right: 0.8125rem;
    transform: translateY(0.2rem);
  }
}

/* hubstepなら */
.hubstep-features {
  border: 1px solid var(--primary-main-color);
  p {
    background: var(--primary-main-color);
    color: var(--white);
  }
  ul li::before {
    display: inline-block;
    content: url("/img/comparing/green-checkbox.svg");
    margin-right: 0.8125rem;
    transform: translateY(0.2rem);
  }
}

/* 画像 */
.comparing-visual-wrap {
  display: flex;
  justify-content: center;
  margin: 0 1rem;
}
.excel-to-hubstep {
  background: url("/img/comparing/excel-to-hubstep.svg") no-repeat center center /
      auto,
    radial-gradient(circle, var(--light-blue) 50%, transparent 50%);
  border-radius: 100%;
  max-width: 25rem;
  width: 100%;
  height: 15rem;
  margin-top: -5.5rem;
  position: relative;
}
.dummy {
  width: 25rem;
}

/* 吹き出し */
.speech-bubble {
  position: relative;
  max-width: 22.875rem;
  margin-top: 1.125rem;
  margin-left: 0.5rem;
  padding: 1rem 3.25rem;
  border-radius: 1.5rem;
  background: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  border: 2px solid var(--light-blue);
  height: fit-content;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70px;
    border-style: solid;
    border-width: 2.5rem;
    border-color: var(--white) transparent transparent transparent;
    transform: rotate(90deg) scale(0.3, 1);
  }
}

@media (max-width: 1180px) {
  .comparing {
    width: 100%;
    background: linear-gradient(
      to bottom,
      var(--white) 15rem,
      var(--light-blue) 15rem
    );
    padding-bottom: 5.25rem;
  }
  .comparing-wrap {
    display: flex;
    flex-direction: column-reverse;
    gap: 1.5rem;
    margin: 0 1rem;
  }
  .comparing-features-wrap {
    margin: 0;
  }
  .comparing-features {
    ul {
      li {
        height: inherit;
        white-space: inherit;
        padding-left: 1rem;
        text-indent: -1.18rem;
      }
    }
  }
  .comparing-visual-wrap {
    flex-direction: column;
    align-items: center;
  }
  .excel-to-hubstep {
    margin-top: 1.5rem;
  }

  .speech-bubble {
    max-width: inherit;
    padding: 1rem 1.25rem;
    margin-top: -1.7rem;
    &::before {
      display: none;
    }
    &::after {
      content: "";
      position: absolute;
      top: -65px;
      right: 50px;
      border-style: solid;
      border-width: 2.5rem;
      border-color: var(--white) transparent transparent transparent;
      transform: rotate(180deg) scale(0.3, 1);
    }
  }
}
@media (max-width: 768px) {
  .excel-to-hubstep {
    max-width: 17.5rem;
    background: url("/img/comparing/excel-to-hubstep.svg") no-repeat center
        center / contain,
      radial-gradient(circle, var(--light-blue) 50%, transparent 50%);
    background-size: 90%;
    background-position: center;
  }
}

@media (max-width: 600px) {
  .comparing-features-wrap {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .comparing {
    background: linear-gradient(
      to bottom,
      var(--white) 17rem,
      var(--light-blue) 17rem
    );
    h2 {
      margin: 0 2rem;
    }
    .h2-logo {
      display: block;
      margin: auto;
      margin-bottom: 0.5rem;
    }
    .h2-ruby {
      display: none;
    }
  }
  .excel-to-hubstep {
    margin-top: 0;
  }
  .speech-bubble {
    &::after {
      top: -50px;
    }
  }
}