.price {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

.price li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--secondary-color);
  /* background-image: linear-gradient(#F5F0EB 2px, transparent 2px), linear-gradient(90deg, #F5F0EB 2px, transparent 2px); */
  /* background-size: 30px 30px; */
  /* background-position: 15px 15px; */
  background-position: center;
  background-size: cover;
  background-color: #ffffff;
}



.price li .price-title {
  background-color: var(--secondary-color);
  color: #fff;
  text-align: center;
  width: 80%;
  max-width: 504px;
  margin: 0 auto;
}

.price li .price-title {
  letter-spacing: 0.1em;
}

.price li .comment {
  width: 90%;
  max-width: 750px;
}

.price li dl {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 90%;
  max-width: 750px;
}

@media (max-width: 767px) {
  .price li+li {
    margin-top: calc(50/var(--base-font-size-row-value) * 1rem);
  }

  .price li {
    padding: calc(60/var(--base-font-size-row-value) * 1rem) calc(5/var(--base-font-size-row-value) * 1rem);
    /* background-image: linear-gradient(#F5F0EB 1px, transparent 1px), linear-gradient(90deg, #F5F0EB 1px, transparent 1px); */
    /* background-size: 15px 15px; */
    /* background-position: 8px 8px; */
  }

  

  .price li .price-title {
    padding: calc(7/var(--base-font-size-row-value) * 1rem);
    margin-bottom: calc(20/var(--base-font-size-row-value) * 1rem);
  }

  .price li .price-title h3 {
    font-size: calc(20/var(--base-font-size-row-value) * 1rem);
  }

  .price li .price-title p {
    font-size: calc(11/var(--base-font-size-row-value) * 1rem);
  }

  .price li .comment {
    font-size: calc(11/var(--base-font-size-row-value) * 1rem);

  }

  .price li dl {
    font-size: calc(20/var(--base-font-size-row-value) * 1rem);
    letter-spacing: 0.05rem;
  }

  .price li dl+dl {
    margin-top: calc(10/var(--base-font-size-row-value) * 1rem);
  }

  .price li .comment+dl,
  .price li dl+.comment {
    margin-top: calc(30/var(--base-font-size-row-value) * 1rem);
  }

}

@media (min-width: 768px) {
  .price li+li {
    margin-top: calc(100/var(--base-font-size-row-value) * 1rem);
  }

  .price li {
    padding: calc(100/var(--base-font-size-row-value) * 1rem);
  }

  

  .price li .price-title {
    padding: calc(15/var(--base-font-size-row-value) * 1rem);
    margin-bottom: calc(40/var(--base-font-size-row-value) * 1rem);
  }

  .price li .price-title h3 {
    font-size: calc(40/var(--base-font-size-row-value) * 1rem);
  }

  .price li .price-title p {
    font-size: calc(16/var(--base-font-size-row-value) * 1rem);
  }

  .price li dl {
    font-size: calc(55/var(--base-font-size-row-value) * 1rem);
  }

  .price li dl+dl {
    margin-top: calc(20/var(--base-font-size-row-value) * 1rem);
  }

  .price li .comment+dl,
  .price li dl+.comment {
    margin-top: calc(60/var(--base-font-size-row-value) * 1rem);
  }
}