@charset "UTF-8";

.lp_wrap .price {
  padding: 80px 0;
}

@media all and (max-width: 750px) {

  .lp_wrap .price {
    padding: 36px 0;
  }
}

.lp_wrap .price .head1 {
  width: max-content;
  margin: 15% auto 3%;
  text-align: center;
  position: relative;
}

.lp_wrap .price .head1 span {
  letter-spacing: 0.1em;
}

.lp_wrap .price .head1 span:nth-of-type(1) {
  font-size: 2.7vw;
}

.lp_wrap .price .head1 span:nth-of-type(2) {
  font-size: 4.3vw;
  color: #fa5037;
}

.lp_wrap .price .head1 span:nth-of-type(3) {
  font-size: 2.7vw;
  color: #fa5037;
}

.lp_wrap .price .head1 span:nth-of-type(4) {
  font-size: 1.6vw;
}

.lp_wrap .price .head1 span:nth-of-type(5) {
  font-size: 2.7vw;
}

.lp_wrap .price .head1 br {
  display: none;
}

.lp_wrap .price .head1 .marker1 {
  position: absolute;
  top: -58%;
  left: 7%;
  z-index: -1;
  width: 43.535%;
}

.lp_wrap .price .head1 .marker1 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dashoffset: 0;
}

.lp_wrap .price .head1.trigger .marker1 svg mask path {
  transition: 0.8s;
  stroke-dasharray: 843 843;
  stroke-dashoffset: -843;
}

.lp_wrap .price .head1.trigger.move .marker1 svg mask path {
  stroke-dashoffset: 0 !important;
}

.lp_wrap .price .balloon {
  width: 51.171%;
  margin: 0% auto 5%;
  display: flex;
  justify-content: space-between;
}

.lp_wrap .price .balloon li {
  width: 48%;
  padding: 3% 0%;
  text-align: center;
  font-size: 2vw;
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: #fa5037;
  border-radius: 100vw 100vw 100vw 20vw;
}

.lp_wrap .price .head2 {
  width: max-content;
  margin: 0% auto 5%;
  position: relative;
}

.lp_wrap .price .head2 span {
  letter-spacing: 0.1em;
}

.lp_wrap .price .head2 span:nth-of-type(1) {
  font-size: 2.7vw;
}

.lp_wrap .price .head2 span:nth-of-type(2) {
  font-size: 4.3vw;
  color: #fa5037;
}

.lp_wrap .price .head2 span:nth-of-type(3) {
  font-size: 2.7vw;
  color: #fa5037;
}

.lp_wrap .price .head2 span:nth-of-type(4) {
  font-size: 4.3vw;
  color: #fa5037;
}

.lp_wrap .price .head2 br {
  display: none;
}

.lp_wrap .price .head2 .marker2 {
  position: absolute;
  top: 61%;
  left: 51%;
  z-index: -1;
  width: 56.878%;
}

.lp_wrap .price .head2 .marker2 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dashoffset: 0;
}

.lp_wrap .price .head2.trigger .marker2 svg mask path {
  transition: 0.8s;
  stroke-dasharray: 489 489;
  stroke-dashoffset: 489;
}

.lp_wrap .price .head2.trigger.move .marker2 svg mask path {
  stroke-dashoffset: 0 !important;
}

.lp_wrap .price .example {
  width: 73.06%;
  margin: 0% auto 10%;
  position: relative;
}

.lp_wrap .price .example h4 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  text-align: center;
  font-size: 2.2vw;
  letter-spacing: 0.15em;
}

.lp_wrap .price .example dl dt {
  position: absolute;
  top: 18.2%;
  padding: 1.6% 6.1%;
  font-size: 2vw;
  letter-spacing: 0.1em;
  color: #ffffff;
  background-color: #191928;
  border-radius: 100vw 100vw 100vw 100vw;
}

.lp_wrap .price .example dl dt:nth-of-type(1) {
  left: 11%;
}

.lp_wrap .price .example dl dt:nth-of-type(2) {
  right: 11%;
}

.lp_wrap .price .example dl dd span {
  position: absolute;
  width: 48%;
  text-align: center;
  letter-spacing: 0.05em;
}

.lp_wrap .price .example dl dd:nth-of-type(1) span {
  left: 0%;
}

.lp_wrap .price .example dl dd:nth-of-type(2) span {
  right: 0%;
}

.lp_wrap .price .example dl dd span:nth-child(1) {
  top: 67%;
  font-size: 2.7vw;
}

.lp_wrap .price .example dl dd span:nth-child(2) {
  top: 75.2%;
  font-size: 5.3vw;
  color: #fa5037;
}

.lp_wrap .price .example dl dd span:nth-child(3) {
  top: 90%;
  font-size: 1.1vw;
}

.lp_wrap .price .example dl dd span:nth-child(3) br {
  display: none;
}

.lp_wrap .price .head3 {
  width: max-content;
  margin: 0% auto 5%;
  position: relative;
}

.lp_wrap .price .head3 span {
  letter-spacing: 0.1em;
}

.lp_wrap .price .head3 span:nth-of-type(1) {
  font-size: 2.7vw;
}

.lp_wrap .price .head3 span:nth-of-type(2) {
  font-size: 4.9vw;
  color: #fa5037;
}

.lp_wrap .price .head3 span:nth-of-type(3) {
  font-size: 2.7vw;
  color: #fa5037;
}

.lp_wrap .price .head3 span:nth-of-type(4) {
  font-size: 4.2vw;
  color: #fa5037;
}

.lp_wrap .price .head3 br {
  display: none;
}

.lp_wrap .price .head3 .marker3 {
  position: absolute;
  top: 66%;
  left: 53%;
  z-index: -1;
  width: 56.878%;
}

.lp_wrap .price .head3 .marker3 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dashoffset: 0;
}

.lp_wrap .price .head3.trigger .marker3 svg mask path {
  transition: 0.8s;
  stroke-dasharray: 485 485;
  stroke-dashoffset: 485;
}

.lp_wrap .price .head3.trigger.move .marker3 svg mask path {
  stroke-dashoffset: 0 !important;
}

.lp_wrap .price .value {
  width: 73.06%;
  margin: 0% auto 7%;
  position: relative;
}

.lp_wrap .price .value dl dt,
.lp_wrap .price .value dl dd {
  position: absolute;
  width: 40%;
}

.lp_wrap .price .value dl dt {
  text-align: center;
  font-size: 2.2vw;
  letter-spacing: 0.1em;
  color: #fa5037;
}

.lp_wrap .price .value dl dd {
  font-size: 2vw;
  letter-spacing: 0.1em;
  line-height: 1.5em;
  color: #ffffff;
}

.lp_wrap .price .value dl dt:nth-of-type(1) {
  top: 9%;
  left: 4%;
}

.lp_wrap .price .value dl dt:nth-of-type(2) {
  top: 9%;
  right: 4%;
}

.lp_wrap .price .value dl dt:nth-of-type(3) {
  top: 67.3%;
  left: 4%;
}

.lp_wrap .price .value dl dt:nth-of-type(4) {
  top: 67.3%;
  right: 4%;
}

.lp_wrap .price .value dl dd:nth-of-type(1) {
  top: 21.3%;
  left: 8%;
}

.lp_wrap .price .value dl dd:nth-of-type(2) {
  top: 30%;
  left: 8%;
}

.lp_wrap .price .value dl dd:nth-of-type(3) {
  top: 38.3%;
  left: 8%;
}

.lp_wrap .price .value dl dd:nth-of-type(4) {
  top: 21.3%;
  left: 60%;
}

.lp_wrap .price .value dl dd:nth-of-type(5) {
  top: 38.3%;
  left: 60%;
}

.lp_wrap .price .value dl dd:nth-of-type(6) {
  top: 79.2%;
  left: 8%;
}

.lp_wrap .price .value dl dd:nth-of-type(7) {
  top: 88%;
  left: 8%;
}

.lp_wrap .price .value dl dd:nth-of-type(8) {
  top: 79.2%;
  left: 60%;
}

.lp_wrap .price .value dl dd:nth-of-type(9) {
  top: 88%;
  left: 60%;
}

.lp_wrap .price .let {
  text-align: center;
  font-size: 2.3vw;
  letter-spacing: 0.1em;
}

.lp_wrap .price .let br {
  display: none;
}

.lp_wrap .price .btn {
  margin-bottom: 10%;
}


/* .lp_wrap .price .btn a {
  display: block;
  width: 48.923%;
  margin: auto;
  font-size: 2.2vw;
  text-align: center;
  text-indent: -1em;
  text-decoration: none;
  letter-spacing: 0.15em;
  line-height: 4em;
  color: #191928;
  background-color: #96e100;
  border-radius: 100vw 100vw 100vw 100vw;
  position: relative;
} */

.lp_wrap .price .btn a::after {
  content: '';
  display: block;
  position: absolute;
  top: 0%;
  right: 0%;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: url('../image/pc/price-arrow.png') center center/contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .lp_wrap .price .btn a:hover {
    opacity: 0.8;
  }
}

@media all and (max-width: 750px) {
  .lp_wrap .price .head1 {
    margin: 20% auto 6%;
  }

  .lp_wrap .price .head1 span {
    letter-spacing: 0.075em;
    line-height: 1.4em;
  }

  .lp_wrap .price .head1 span:nth-of-type(1) {
    font-size: 5.6vw;
  }

  .lp_wrap .price .head1 span:nth-of-type(2) {
    font-size: 9.9vw;
    color: #fa5037;
  }

  .lp_wrap .price .head1 span:nth-of-type(3) {
    font-size: 5.6vw;
    color: #fa5037;
  }

  .lp_wrap .price .head1 span:nth-of-type(4) {
    font-size: 3.4vw;
  }

  .lp_wrap .price .head1 span:nth-of-type(5) {
    font-size: 5.6vw;
  }

  .lp_wrap .price .head1 br {
    display: block;
  }

  .lp_wrap .price .head1 .marker1 {
    top: -14%;
    left: 11%;
    width: 71.556%;
  }

  .lp_wrap .price .head1.trigger .marker1 svg mask path {
    stroke-dasharray: 1030 1030;
    stroke-dashoffset: -1030;
  }

  .lp_wrap .price .balloon {
    width: 79.333%;
    margin: 0% auto 10%;
  }

  .lp_wrap .price .balloon li {
    font-size: 3.6vw;
  }

  .lp_wrap .price .head2 {
    margin: 0% auto 10%;
    text-align: center;
  }

  .lp_wrap .price .head2 span {
    line-height: 1.4em;
  }

  .lp_wrap .price .head2 span:nth-of-type(1) {
    font-size: 4.8vw;
  }

  .lp_wrap .price .head2 span:nth-of-type(2) {
    font-size: 10.9vw;
  }

  .lp_wrap .price .head2 span:nth-of-type(3) {
    font-size: 6.8vw;
  }

  .lp_wrap .price .head2 span:nth-of-type(4) {
    font-size: 10.9vw;
  }

  .lp_wrap .price .head2 br {
    display: block;
  }

  .lp_wrap .price .head2 .marker2 {
    top: 80%;
    left: -12%;
    width: 124.137%;
  }

  .lp_wrap .price .head2.trigger .marker2 svg mask path {
    stroke-dasharray: 612 612;
    stroke-dashoffset: 612;
  }

  .lp_wrap .price .example {
    width: 84%;
    margin: 0% auto 15%;
  }

  .lp_wrap .price .example h4 {
    font-size: 4vw;
  }

  .lp_wrap .price .example dl dt {
    top: 19.9%;
    padding: 2% 5.7%;
    font-size: 2.8vw;
  }

  .lp_wrap .price .example dl dt:nth-of-type(1) {
    left: 9.5%;
  }

  .lp_wrap .price .example dl dt:nth-of-type(2) {
    right: 9.5%;
  }

  .lp_wrap .price .example dl dd span {
    width: 47.5%;
  }

  .lp_wrap .price .example dl dd span:nth-child(1) {
    top: 65.3%;
    font-size: 3.8vw;
  }

  .lp_wrap .price .example dl dd span:nth-child(2) {
    top: 72.8%;
    font-size: 7vw;
  }

  .lp_wrap .price .example dl dd span:nth-child(3) {
    top: 84.8%;
    font-size: 2.2vw;
    line-height: 1.5em;
  }

  .lp_wrap .price .example dl dd span:nth-child(3) br {
    display: block;
  }

  .lp_wrap .price .head3 {
    margin: 0% auto 10%;
    padding:  0 32px 32px;
    text-align: center;
  }

  .lp_wrap .price .head3 span {
    line-height: 1.4em;
  }

  .lp_wrap .price .head3 span:nth-of-type(1) {
    font-size: 4.8vw;
  }

  .lp_wrap .price .head3 span:nth-of-type(2) {
    font-size: 12.1vw;
  }

  .lp_wrap .price .head3 span:nth-of-type(3) {
    font-size: 6.8vw;
  }

  .lp_wrap .price .head3 span:nth-of-type(4) {
    font-size: 10.9vw;
  }

  .lp_wrap .price .head3 br {
    display: block;
  }

  .lp_wrap .price .head3 .marker3 {
    top: 82%;
    left: -4%;
    width: 106.666%;
  }

  .lp_wrap .price .head3.trigger .marker3 svg mask path {
    stroke-dasharray: 647 647;
    stroke-dashoffset: 647;
  }

  .lp_wrap .price .value {
    width: 84%;
    margin: 0% auto 14%;
  }

  .lp_wrap .price .value dl dt {
    width: 87.4%;
  }

  .lp_wrap .price .value dl dd {
    width: 80%;
  }

  .lp_wrap .price .value dl dt {
    text-align: center;
    font-size: 3.6vw;
    letter-spacing: 0.1em;
    color: #fa5037;
  }

  .lp_wrap .price .value dl dd {
    left: 14% !important;
    font-size: 3.2vw;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    color: #ffffff;
  }

  .lp_wrap .price .value dl dt:nth-of-type(1) {
    top: 5%;
    left: 6.4%;
  }

  .lp_wrap .price .value dl dt:nth-of-type(2) {
    top: 34%;
    right: 6.4%;
  }

  .lp_wrap .price .value dl dt:nth-of-type(3) {
    top: 58.5%;
    left: 6.4%;
  }

  .lp_wrap .price .value dl dt:nth-of-type(4) {
    top: 83%;
    right: 6.4%;
  }

  .lp_wrap .price .value dl dd:nth-of-type(1) {
    top: 11.3%;
  }

  .lp_wrap .price .value dl dd:nth-of-type(2) {
    top: 15.6%;
  }

  .lp_wrap .price .value dl dd:nth-of-type(3) {
    top: 20.3%;
  }

  .lp_wrap .price .value dl dd:nth-of-type(4) {
    top: 40.3%;
  }

  .lp_wrap .price .value dl dd:nth-of-type(5) {
    top: 44.4%;
  }

  .lp_wrap .price .value dl dd:nth-of-type(6) {
    top: 64.6%;
  }

  .lp_wrap .price .value dl dd:nth-of-type(7) {
    top: 69%;
  }

  .lp_wrap .price .value dl dd:nth-of-type(8) {
    top: 89.2%;
  }

  .lp_wrap .price .value dl dd:nth-of-type(9) {
    top: 93.5%;
  }

  .lp_wrap .price .value dl dd br {
    display: none;
  }

  .lp_wrap .price .let {
    font-size: 4.8vw;
    line-height: 1.416em;
  }

  .lp_wrap .price .let br {
    display: block;
  }

  .lp_wrap .price .btn {
    margin-bottom: 20%;
  }

  .lp_wrap .price .btn a {
    width: 97%;
    font-size: 4.8vw;
    text-indent: -2em;
  }

  .lp_wrap .price .btn a::after {
    background: url('../image/sp/price-arrow.png') center center/contain no-repeat;
  }
}