@import url(common.css);

main div.gif {
  max-width: 935px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

main div.gif p {
  max-width: 130px;
}

main section {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 50px;
}

main section h2 {
  font-size: 50px;
}
@media screen and (max-width: 767px) {
  main section h2 {
    font-size: 30px;
  }
}

main section br {
  display: none;
}
@media screen and (max-width: 991px) {
  main section br {
    display: unset;
  }
}

main section.blue {
  background-color: #43c6ec;
  border-radius: 50px;
}

main section.blue h3 {
  padding-bottom: 10px;
}

main section.blue img.statue {
  width: 95%;
}

main section.blue h2 {
  padding-bottom: 30px;
}

main section.pink {
  background-color: #f15283;
  border-radius: 50px;
}

main section.pink h3 span {
  white-space: nowrap;
}

@media screen and (max-width: 575px) {
  main section.pink h3 {
    font-size: 20px;
  }
  main section.pink h3 span {
    font-size: 12px;
    line-height: 25px;
  }
  main section.pink img {
    max-width: 90px;
  }
}

main section.pink div {
  max-width: 830px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
}

main section.pink .button {
  margin-top: -60px;
}
@media screen and (max-width: 767px) {
  main section.pink .button img {
    margin-top: 30px;
    max-width: 150px;
  }
}

main section.pink .button:hover {
  opacity: 0.7;
}

main section.blue div {
  max-width: 788px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 991px) {
  main section.blue div {
    width: 90%;
  }
}

main section.blue div p.price1 {
  text-align: right;
}
@media screen and (max-width: 991px) {
  main section.blue div p.price1 {
    width: 150px;
    margin-right: 10px;
    margin-left: auto;
  }
}
@media screen and (max-width: 575px) {
  main section.blue div p.price1 {
    width: 100px;
    margin-right: 10px;
    margin-left: auto;
  }
}

main section.blue div p.price2 {
  text-align: left;
}
@media screen and (max-width: 991px) {
  main section.blue div p.price2 {
    width: 60px;
  }
}
@media screen and (max-width: 575px) {
  main section.blue div p.price2 {
    width: 30px;
  }
}

main section.blue div p.price3 {
  text-align: right;
  font-size: 79px;
  margin-top: -220px;
}
@media screen and (max-width: 991px) {
  main section.blue div p.price3 {
    text-align: center;
    margin-top: -150px;
    font-size: 50px;
  }
}
@media screen and (max-width: 575px) {
  main section.blue div p.price3 {
    font-size: 20px;
    margin-top: -70px;
  }
}

main section.blue div p span {
  font-size: 227px;
}
@media screen and (max-width: 991px) {
  main section.blue div p span {
    font-size: 120px;
  }
}
@media screen and (max-width: 575px) {
  main section.blue div p span {
    font-size: 70px;
  }
}

main section.blue div aside {
  text-align: right;
}
@media screen and (max-width: 575px) {
  main section.blue div aside {
    font-size: 15px;
  }
}