@import url(lower.css);

.features {
  padding-top: max(10vw, 60px);
  display: flex;
  align-items: start;
  .title-common {
    position: sticky;
    top: 160px;
    width: max(30%, 200px);
  }
  .contents {
    flex: 1;
  }
  h3 {
    font-size: max(1.8vw, 1.3em);
    background-color: var(--bg-c);
    padding: 0.3em 0.8em;
    border-radius: 8px 0 0 8px;
    margin: 0 -5vw 5vw 0;
    display: flex;
    gap: 0.3em;
    &::before {
      content: attr(data-num) ".";
    }
  }
  p {
    width: 80%;
    line-height: 1.8;
    margin: 0 0 5vw auto;
  }
  canvas {
    width: 100% !important;
    opacity: 0;
    transition: opacity 0.4s;
    &.show {
      opacity: 1;
    }
  }
}
.cost {
  margin-top: max(8vw, 60px);
  p {
    margin-bottom: 0;
    ~ p {
      margin-top: 1em;
    }
  }
}

@media (width < 768px) {
  .features {
    flex-direction: column;
    padding-bottom: 20px;
    gap: 50px;

    .title-common {
      position: relative;
      top: 0;
      width: 100%;
    }
    p {
      width: 100%;
    }
  }
  .cost canvas {
      width: 100% !important;
      margin-right: auto;
    
  }
}