@charset "UTF-8";

.lp_wrap .profit {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: url("../image/pc/profit-img.jpg") center center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  clip-path: inset(0% 50% 0% 50%);
}
.lp_wrap .profit .head2 {
  width: 68.667%;
  aspect-ratio: 938 / 77;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}
.lp_wrap .profit .head2 > span {
  font-size: 6.2vw;
  color: #ffffff;
  opacity: 0;
}
.lp_wrap .profit .head2 > span:nth-child(1) {
  transition: 0.6s 0.9s;
}
.lp_wrap .profit .head2 > span:nth-child(2) {
  transition: 0.6s 1s;
}
.lp_wrap .profit .head2 > span:nth-child(3) {
  transition: 0.6s 1.1s;
}
.lp_wrap .profit .head2 > span:nth-child(4) {
  color: #fa326e;
  transition: 0.6s 1.2s;
}
.lp_wrap .profit .head2 > span:nth-child(5) {
  color: #fa326e;
  transition: 0.6s 1.3s;
}
.lp_wrap .profit .head2 > span:nth-child(6) {
  transition: 0.6s 1.4s;
}
.lp_wrap .profit .head2 > span:nth-child(7) {
  transition: 0.6s 1.5s;
}
.lp_wrap .profit .head2 > span:nth-child(8) {
  transition: 0.6s 1.6s;
}
.lp_wrap .profit .head2 > span:nth-child(9) {
  transition: 0.6s 1.7s;
}
.lp_wrap .profit .head2 > span:nth-child(10) {
  transition: 0.6s 1.8s;
}
.lp_wrap .profit .head2 > span:nth-child(11) {
  transition: 0.6s 1.9s;
  margin: 0em -0.4em;
}
.lp_wrap .profit.move .head2 span {
  opacity: 1;
}
.lp_wrap .profit .head2 .marker2 {
  position: absolute;
  top: 90%;
  left: 20%;
  width: 36.065%;
  z-index: -1;
}
.lp_wrap .profit .head2 .marker2 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 401 401;
  stroke-dashoffset: 401;
  transition: 0.8s 2s;
}
.lp_wrap .profit.move .head2 .marker2 svg mask path  {
  stroke-dashoffset: 0 !important;
}
.lp_wrap .profit .head2 .bar {
  position: absolute;
  top: -140%;
  left: -8%;
  width: 37.953%;
  transition: 0.6s;
  opacity: 0;
}
.lp_wrap .profit.move .head2 .bar {
  opacity: 1;
}
.lp_wrap .profit .head2 .bar .marker1 {
  position: absolute;
  top: -6%;
  left: 5%;
  width: 38.483%;
}
.lp_wrap .profit .head2 .bar .marker1 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 417 417;
  stroke-dashoffset: 417;
  transition: 0.8s 0.8s;
}
.lp_wrap .profit.move .head2 .bar .marker1 svg mask path  {
  stroke-dashoffset: 0;
}
.lp_wrap .profit .head2 .bar .head1 {
  position: absolute;
  top: 30%;
  left: 14%;
  width: 75.561%;
  aspect-ratio: 269 / 34;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lp_wrap .profit .head2 .bar .head1 span {
  opacity: 0;
  font-size: 2.7vw;
}
.lp_wrap .profit .head2 .bar .head1 span:nth-child(1) {
  transition: 0.6s 0.1s;
}
.lp_wrap .profit .head2 .bar .head1 span:nth-child(2) {
  transition: 0.6s 0.2s;
}
.lp_wrap .profit .head2 .bar .head1 span:nth-child(3) {
  transition: 0.6s 0.3s;
}
.lp_wrap .profit .head2 .bar .head1 span:nth-child(4) {
  transition: 0.6s 0.4s;
}
.lp_wrap .profit .head2 .bar .head1 span:nth-child(5) {
  transition: 0.6s 0.5s;
}
.lp_wrap .profit .head2 .bar .head1 span:nth-child(6) {
  transition: 0.6s 0.6s;
}
.lp_wrap .profit .head2 .bar .head1 span:nth-child(7) {
  transition: 0.6s 0.7s;
}
.lp_wrap .profit.move .head2 .bar .head1 span {
  opacity: 1;
}
@media all and (max-width: 750px) {
  .lp_wrap .profit {
    aspect-ratio: 750 / 1300;
    position: static;
    background: url("../image/sp/profit-img.jpg") center center/cover no-repeat;
    pointer-events: all;
    clip-path: inset(0%);
  }
  .lp_wrap .profit .head2 {
    width: 74%;
    aspect-ratio: 556 / 412;
    display: block;
    position: relative;
    transform: translateY(50%);
  }
  .lp_wrap .profit .head2 > span {
    position: absolute;
    z-index: 1;
    font-size: 16vw;
  }
  .lp_wrap .profit .head2 > span:nth-child(1) {
    top: 21%;
    left: -5%;
  }
  .lp_wrap .profit .head2 > span:nth-child(2) {
    top: 21%;
    left: 18.5%;
  }
  .lp_wrap .profit .head2 > span:nth-child(3) {
    top: 20%;
    left: 41%;
  }
  .lp_wrap .profit .head2 > span:nth-child(4) {
    top: 56%;
    left: -5.2%;
  }
  .lp_wrap .profit .head2 > span:nth-child(5) {
    top: 55%;
    left: 19%;
  }
  .lp_wrap .profit .head2 > span:nth-child(6) {
    top: 55%;
    left: 42%;
  }
  .lp_wrap .profit .head2 > span:nth-child(7) {
    top: 89%;
    left: -5%;
  }
  .lp_wrap .profit .head2 > span:nth-child(8) {
    top: 89.5%;
    left: 19%;
  }
  .lp_wrap .profit .head2 > span:nth-child(9) {
    top: 89%;
    left: 41.7%;
  }
  .lp_wrap .profit .head2 > span:nth-child(10) {
    top: 88%;
    left: 66%;
  }
  .lp_wrap .profit .head2 > span:nth-child(11) {
    top: 88%;
    left: 91%;
  }
  .lp_wrap .profit .head2 .marker2 {
    top: 80%;
    left: -11%;
    z-index: 0;
    width: 80.935%;
  }
  .lp_wrap .profit .head2 .marker2 svg mask path {
    stroke-dasharray: 548 548;
    stroke-dashoffset: 548;
  }
  .lp_wrap .profit .head2 .bar {
    top: -18%;
    left: -5%;
    width: 64.028%;
  }
  .lp_wrap .profit .head2 .bar .marker1 {
    position: absolute;
    top: -6%;
    left: 5%;
    width: 38.483%;
  }
  .lp_wrap .profit .head2 .bar .head1 span {
    font-size: 4.8vw;
  }
}