@charset "UTF-8";
.lp_wrap .benefits{
  margin-top: -14%;
  z-index: 1;
}
.lp_wrap .benefits .icon01 li:nth-of-type(1) {
  position: absolute;
  top: 2.4%;
  left: 10.875%;
  width: 24.5%;
  border-radius: 70px;
  overflow: hidden;
}
.lp_wrap .benefits .icon01 li:nth-of-type(2) {
  position: absolute;
  top: 2.4%;
  left: 37.75%;
  width: 24.5%;
  border-radius: 70px;
  overflow: hidden;
}
.lp_wrap .benefits .icon01 li:nth-of-type(3) {
  position: absolute;
  top: 2.4%;
  right: 10.875%;
  width: 24.5%;
  border-radius: 70px;
  overflow: hidden;
}
.lp_wrap .benefits .icon01 li.trigger::after,
.lp_wrap .benefits .icon01 li.trigger ~ li::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 300%;
  height: 100%;
  background: linear-gradient(
    -135deg, 
    rgba(255,255,255,0) 30%, 
    rgba(255,255,255,0.6) 50%, 
    rgba(255,255,255,0) 70%
  );
  background-size: 300% 100%;
}
.lp_wrap .benefits .icon01 li.trigger.move::after,
.lp_wrap .benefits .icon01 li.trigger.move ~ li::after {
  animation: benefits01-shine 3s linear forwards;
}
@keyframes benefits01-shine {
  0% {
    background-position: -50% 0;
  }
  30% {
    background-position: 100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}
.lp_wrap .benefits .item {
  position: absolute;
  top: 12.3%;
  left: 23.1%;
  width: 53.8%;
}
.lp_wrap .benefits .item.trigger {
  opacity: 0;
  transform: translateY(-20%);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .benefits .item.trigger.move {
  opacity: 1;
  transform: translateY(0%);
}
.lp_wrap .benefits .seibun li {
  position: absolute;
}
.lp_wrap .benefits .seibun li:nth-child(1) {
  top: 26.5%;
  left: 0%;
  width: 79.125%;
  animation: benefits-seibun 3s 0s ease infinite;
}
.lp_wrap .benefits .seibun li:nth-child(2) {
  top: 46%;
  right: 0%;
  width: 27.25%;
  animation: benefits-seibun 3.5s 0s ease infinite;
}
.lp_wrap .benefits .seibun li:nth-child(3) {
  top: 63.7%;
  left: 0%;
  width: 69%;
  animation: benefits-seibun 4s 0s ease infinite;
}
.lp_wrap .benefits .seibun li:nth-child(4) {
  top: 82%;
  left: 32%;
  width: 62.5%;
  animation: benefits-seibun 4.5s 0.6s ease infinite;
}
@keyframes benefits-seibun{
  0%,100%{
    transform: translateY(0%);
  }
  50%{
    transform: translateY(5%);
  }
}
.lp_wrap .benefits .txt {
  position: absolute;
  top: 27.5%;
  left: 17.25%;
  width: 65.5%;
}
.lp_wrap .benefits .back li {
  position: absolute;
}
.lp_wrap .benefits .back li:nth-child(1) {
  top: 32.5%;
  left: 0%;
  width: 88.3%;
}
.lp_wrap .benefits .back li:nth-child(2) {
  top: 51.3%;
  right: 0%;
  width: 88.3%;
}
.lp_wrap .benefits .back li:nth-child(3) {
  top: 70%;
  left: 0%;
  width: 88.3%;
}
.lp_wrap .benefits .catch li {
  position: absolute;
}
.lp_wrap .benefits .catch li.trigger{
  opacity: 0;
  transition: 0.6s;
}
.lp_wrap .benefits .catch li.trigger.move{
  opacity: 1;
}
.lp_wrap .benefits .catch li:nth-child(1) {
  top: 31.5%;
  right: 7.5%;
  width: 22.9%;
}
.lp_wrap .benefits .catch li:nth-child(2) {
  top: 50.3%;
  left: 7.2%;
  width: 22.8%;
}
.lp_wrap .benefits .catch li:nth-child(3) {
  top: 69%;
  right: 7%;
  width: 22.9%;
}
.lp_wrap .benefits .icon02 li:nth-of-type(1) {
  position: absolute;
  top: 91%;
  left: 8.625%;
  width: 26.5%;
  border-radius: 100%;
  overflow: hidden;
}
.lp_wrap .benefits .icon02 li:nth-of-type(2) {
  position: absolute;
  top: 91%;
  left: 36.75%;
  width: 26.5%;
  border-radius: 100%;
  overflow: hidden;
}
.lp_wrap .benefits .icon02 li:nth-of-type(3) {
  position: absolute;
  top: 91%;
  right: 8.625%;
  width: 26.5%;
  border-radius: 100%;
  overflow: hidden;
}
.lp_wrap .benefits .icon02 li.trigger::after,
.lp_wrap .benefits .icon02 li.trigger ~ li::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    -135deg, 
    rgba(255,255,255,0) 30%, 
    rgba(255,255,255,0.6) 50%, 
    rgba(255,255,255,0) 70%
  );
  background-size: 300% 100%;
}
.lp_wrap .benefits .icon02 li.trigger.move::after,
.lp_wrap .benefits .icon02 li.trigger.move ~ li::after {
  animation: benefits02-shine 3s linear forwards;
}
@keyframes benefits02-shine {
  0% {
    background-position: -50% 0;
  }
  30% {
    background-position: 100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}