@charset "UTF-8";

.lp_wrap .float {
  position: fixed;
  bottom: 0%;
  right: 50%;
  z-index: 10;
  transform: translateX(50%);
  width: 100%;
  max-width: 750px;
  display: none;
}
/* -------------------------------------------- */
.lp_wrap .trouble .slider0 {
  position: absolute;
  top: 2.8%;
  left: 0%;
  width: 216%;
  display: flex;
}
.lp_wrap .trouble .slider0 div {
  animation: 14s trouble_marquee linear infinite
}
@keyframes trouble_marquee {
  to {
    transform: translateX(-100%);
  }
}
.lp_wrap .trouble .deco li {
  position: absolute;
}
.lp_wrap .trouble .deco li:nth-child(1) {
  top: 22.8%;
  left: 6.4%;
  width: 14.667%;
  transform-origin: 100% 100%;
  animation: 0.6s trouble_deco ease-in-out alternate infinite;
}
.lp_wrap .trouble .deco li:nth-child(2) {
  top: 26.6%;
  left: 76.3%;
  width: 10.133%;
  transform-origin: 0% 30%;
  animation: 0.6s trouble_deco ease-in-out alternate infinite;
}
@keyframes trouble_deco {
  0%, 50% {
    transform: rotate(0deg);
  }
  50.1%, 100% {
    transform: rotate(30deg);
  }
}
.lp_wrap .case .balloon {
  position: absolute;
  top: -5.6%;
  left: 6.4%;
  width: 88.8%;
}
.lp_wrap .case .balloon.trigger img {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .case .balloon.trigger.move img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .case .slider_wrap {
  position: absolute;
  top: 12.7%;
  left: 0%;
  width: 100%;
}
.lp_wrap .case .slider_wrap img {
  width: 73.86666%;
  margin: auto;
}
.lp_wrap .case .slider_wrap .slick-arrow {
  position: absolute;
  top: 45.9%;
  width: 9.388%;
  z-index: 1;
}
.lp_wrap .case .slider_wrap .slick-arrow.prev {
  left: 3%;
}
.lp_wrap .case .slider_wrap .slick-arrow.next {
  right: 1.4%;
}
.lp_wrap .case .slider_wrap .slider .slick-dots {
  bottom: -3.8%;
  height: 2.5%;
}
.lp_wrap .case .slider_wrap .slider .slick-dots li {
  width: auto;
  height: 100%;
  margin: 0% 1%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.lp_wrap .case .slider_wrap .slider .slick-dots li.slick-active {
  background-color: #0c0606;
}
.lp_wrap .miss {
  margin-bottom: -7.3%;
  z-index: 1;
}
.lp_wrap .miss .head1 {
  position: absolute;
  top: 7%;
  left: 20.9%;
  width: 58.667%;
}
.lp_wrap .miss .head1.trigger {
  transition: 0.6s cubic-bezier(0.25, 0.1, 0.45, 1.48);
  transform: scale(0);
  opacity: 0;
}
.lp_wrap .miss .head1.trigger.move {
  transform: scale(1);
  opacity: 1;
}
.lp_wrap .miss .head2 li {
  position: absolute;
}
.lp_wrap .miss .head2 li:nth-child(1) {
  top: 29.73%;
  left: 16.6%;
  width: 20.267%;
}
.lp_wrap .miss .head2 li:nth-child(2) {
  top: 29.25%;
  left: 64.6%;
  width: 20.267%;
}
.lp_wrap .miss .head2 li.trigger img,
.lp_wrap .miss .head2 li.trigger ~ li img {
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .miss .head2 li:nth-child(1) img {
  transition: 0.6s;
}
.lp_wrap .miss .head2 li:nth-child(2) img {
  transition: 0.6s 0.3s;
}
.lp_wrap .miss .head2 li.trigger.move img,
.lp_wrap .miss .head2 li.trigger.move ~ li img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .miss .head3 li {
  position: absolute;
}
.lp_wrap .miss .head3 li:nth-child(1) {
  top: 51.9%;
  left: 4.9%;
  width: 34.933%;
}
.lp_wrap .miss .head3 li:nth-child(2) {
  top: 51.8%;
  left: 64.1%;
  width: 29.867%;
}
.lp_wrap .miss .head3 li.trigger img,
.lp_wrap .miss .head3 li.trigger ~ li img {
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .miss .head3 li:nth-child(1) img {
  transition: 0.6s;
}
.lp_wrap .miss .head3 li:nth-child(2) img {
  transition: 0.6s 0.3s;
}
.lp_wrap .miss .head3 li.trigger.move img,
.lp_wrap .miss .head3 li.trigger.move ~ li img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .miss .icon li {
  position: absolute;
  width: 31.067%;
  transform: scale(0);
  opacity: 0;
}
.lp_wrap .miss .icon li:nth-child(1) {
  top: 84.1%;
  left: 4.3%;
  transition: 0.6s cubic-bezier(0.25, 0.1, 0.45, 1.48);
}
.lp_wrap .miss .icon li:nth-child(2) {
  top: 81.45%;
  left: 34.9%;
  transition: 0.6s cubic-bezier(0.25, 0.1, 0.45, 1.48) 0.3s;
}
.lp_wrap .miss .icon li:nth-child(3) {
  top: 84.1%;
  left: 66.4%;
  transition: 0.6s cubic-bezier(0.25, 0.1, 0.45, 1.48) 0.6s;
}
.lp_wrap .miss .icon li.trigger.move,
.lp_wrap .miss .icon li.trigger.move ~ li {
  transform: scale(1); 
  opacity: 1;
}
.lp_wrap .delicate .head li {
  position: absolute;
}
.lp_wrap .delicate .head li:nth-child(1) {
  top: 7%;
  left: 3.1%;
  width: 31.867%;
  animation: 1s delicate_head ease-in-out alternate infinite;
}
.lp_wrap .delicate .head li:nth-child(2) {
  top: 21.9%;
  left: 3%;
  width: 27.733%;
  animation: 1s delicate_head -0.5s ease-in-out alternate infinite;
}
@keyframes delicate_head {
  0% {
    transform: translateY(-7%);
  }
  100% {
    transform: translateY(7%);
  }
}
.lp_wrap .offer .btn {
  position: absolute;
  top: 72.9%;
  left: 9.3%;
  width: 79.8666%;
  animation: 2s offer_btn ease-in-out infinite;
}
@keyframes offer_btn {
  0%, 60%, 100% {
    transform: translateX(0%);
  }
  10% {
    transform: translateX(-4%);
  }
  20% {
    transform: translateX(4%);
  }
  30% {
    transform: translateX(-4%);
  }
  40% {
    transform: translateX(2%);
  }
  50% {
    transform: translateX(-1%);
  }
}
.lp_wrap .preference_top {
  margin-bottom: -47%;
  z-index: 5;
}
.lp_wrap .preference_top .slider0 {
  position: absolute;
  top: 4.8%;
  left: 0%;
  width: 308.2666%;
  display: flex;
}
.lp_wrap .preference_top .slider0 div {
  animation: 20s preference_top_marquee linear infinite
}
@keyframes preference_top_marquee {
  to {
    transform: translateX(-100%);
  }
}
.lp_wrap .preference_top .head {
  position: absolute;
  top: 20.7%;
  left: 0%;
  width: 100%;
}
.lp_wrap .preference_top .head.trigger {
  transition: 0.6s cubic-bezier(0.25, 0.1, 0.45, 1.48);
  transform: scale(0);
  opacity: 0;
}
.lp_wrap .preference_top .head.trigger.move {
  transform: scale(1);
  opacity: 1;
}
.lp_wrap .preference1 {
  margin-bottom: -30%;
  z-index: 4;
}
.lp_wrap .preference1 .comp {
  position: absolute;
  top: 55.35%;
  left: 3.8%;
  width: 93.2%;
}
.lp_wrap .preference1 .comp.trigger img {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .preference1 .comp.trigger.move img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .preference2 {
  margin-bottom: -41%;
  z-index: 3;
}
.lp_wrap .preference2 .comp {
  position: absolute;
  top: 52.6%;
  left: 2.9%;
  width: 94.933%;
}
.lp_wrap .preference2 .comp.trigger img {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .preference2 .comp.trigger.move img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .preference3 {
  margin-bottom: -21%;
  z-index: 2;
}
.lp_wrap .preference3 .comp {
  position: absolute;
  top: 57.25%;
  left: 2.7%;
  width: 94.4%;
}
.lp_wrap .preference3 .comp.trigger img {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .preference3 .comp.trigger.move img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .preference4 {
  margin-bottom: -18%;
  z-index: 1;
}
.lp_wrap .preference4 .comp {
  position: absolute;
  top: 57.15%;
  left: 2.7%;
  width: 94.4%;
}
.lp_wrap .preference4 .comp.trigger img {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .preference4 .comp.trigger.move img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .onepush .circle {
  position: absolute;
  top: 36.7%;
  left: 66.5%;
  width: 26.933%;
  animation: 12s cycle1 linear infinite;
}
@keyframes cycle1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
.lp_wrap .less {
  margin-top: -6%;
}
.lp_wrap .less .circle1 {
  position: absolute;
  top: 0.33%;
  left: 13.2%;
  width: 23.6%;
  animation: 12s cycle1 linear infinite;
}
.lp_wrap .less .circle2 {
  position: absolute;
  top: 0.33%;
  left: 63.2%;
  width: 23.6%;
  animation: 12s cycle1 linear infinite;
}
.lp_wrap .less .head {
  position: absolute;
  top: 59.3%;
  left: 14.8%;
  width: 70%;
}
.lp_wrap .less .head.trigger {
  transition: 0.6s cubic-bezier(0.25, 0.1, 0.45, 1.48);
  transform: scale(0);
  opacity: 0;
}
.lp_wrap .less .head.trigger.move {
  transform: scale(1);
  opacity: 1;
}
.lp_wrap .reward .head li {
  position: absolute;
}
.lp_wrap .reward .head li:nth-child(1) {
  top: 15.15%;
  left: 17.2%;
  width: 6.533%;
}
.lp_wrap .reward .head li:nth-child(2) {
  top: 18.43%;
  left: 5.6%;
  width: 9.333%;
}
.lp_wrap .reward .head li.trigger img ,
.lp_wrap .reward .head li.trigger ~ li img {
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .reward .head li:nth-child(1) img {
  transition: 0.6s;
}
.lp_wrap .reward .head li:nth-child(2) img {
  transition: 0.6s 0.3s;
}
.lp_wrap .reward .head li.trigger.move img ,
.lp_wrap .reward .head li.trigger.move ~ li img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .reward .let1 li {
  position: absolute;
  transition: 0.8s;
}
.lp_wrap .reward .let1 li:nth-child(1) {
  top: 35.9%;
  left: 0%;
  width: 99.067%;
  transform: translateX(-101%);
}
.lp_wrap .reward .let1 li:nth-child(2) {
  top: 40.73%;
  right: 0%;
  width: 84.533%;
  transform: translateX(101%);
}
.lp_wrap .reward .let1 li.trigger.move,
.lp_wrap .reward .let1 li.trigger.move ~ li {
  transform: translateX(0);
}
.lp_wrap .reward .let2 li {
  position: absolute;
  transition: 0.8s;
}
.lp_wrap .reward .let2 li:nth-child(1) {
  top: 61.6%;
  right: 0%;
  width: 54.133%;
  z-index: 2;
  transform: translateX(101%);
}
.lp_wrap .reward .let2 li:nth-child(2) {
  top: 65.2%;
  left: 0%;
  width: 57.867%;
  z-index: 1;
  transform: translateX(-101%);
}
.lp_wrap .reward .let2 li.trigger.move,
.lp_wrap .reward .let2 li.trigger.move ~ li {
  transform: translateX(0);
}
.lp_wrap .reward .let3 li {
  position: absolute;
  transition: 0.8s;
}
.lp_wrap .reward .let3 li:nth-child(1) {
  top: 72.4%;
  left: 0%;
  width: 67.2%;
  transform: translateX(-101%);
}
.lp_wrap .reward .let3 li:nth-child(2) {
  top: 78.15%;
  right: 0%;
  width: 54.267%;
  transform: translateX(101%);
}
.lp_wrap .reward .let3 li.trigger.move,
.lp_wrap .reward .let3 li.trigger.move ~ li {
  transform: translateX(0);
}
.lp_wrap .influence .photo li {
  position: absolute;
  top: 20.4%;
  width: 88.4%;
  transition: 0.8s 0.4s;
}
.lp_wrap .influence .photo li:nth-child(1) {
  left: -47.2%;
  transform: translateX(10%);
}
.lp_wrap .influence .photo li:nth-child(2) {
  left: 58.5%;
  transform: translateX(-10%);
}
.lp_wrap .influence .photo li.trigger.move,
.lp_wrap .influence .photo li.trigger.move ~ li {
  transform: translateX(0);
}
.lp_wrap .mechanism .slider0 {
  position: absolute;
  top: 0.75%;
  left: 0%;
  width: 633.6%;
  display: flex;
}
.lp_wrap .mechanism .slider0 div {
  animation: 20s mechanism_marquee linear infinite
}
@keyframes mechanism_marquee {
  to {
    transform: translateX(-100%);
  }
}
.lp_wrap .mechanism .head {
  position: absolute;
  top: 4.4%;
  left: 15.7%;
  width: 68.667%;
}
.lp_wrap .mechanism .skin li {
  position: absolute;
}
.lp_wrap .mechanism .skin li:nth-child(1) {
  top: 19.65%;
  left: 0%;
  width: 48.933%;
  transition: 0.6s;
  transform: translateX(-101%);
}
.lp_wrap .mechanism .skin li:nth-child(2) {
  top: 30.13%;
  left: 0%;
  width: 48.933%;
  transition: 0.6s 0.3s;
  transform: translateX(-101%);
}
.lp_wrap .mechanism .skin li:nth-child(3) {
  top: 39.58%;
  left: 0%;
  width: 48.933%;
  transition: 0.6s 0.6s;
  transform: translateX(-101%);
}
.lp_wrap .mechanism .skin li:nth-child(4) {
  top: 24.2%;
  left: 47.2%;
  width: 29.067%;
  transition: 0.8s 0.9s;
  clip-path: inset(0 100% 0 0);
}
.lp_wrap .mechanism .skin li.trigger.move,
.lp_wrap .mechanism .skin li.trigger.move ~ li {
  transform: translateX(0);
  clip-path: inset(0);
}
.lp_wrap .mechanism .movie1 {
  position: absolute;
  top: 54.4%;
  left: 3.7%;
  width: 44.533%;
  overflow: hidden;
  border-radius: min(36px, 5vw);
}
.lp_wrap .mechanism .movie2 {
  position: absolute;
  top: 54.4%;
  left: 50.3%;
  width: 44.533%;
  overflow: hidden;
  border-radius: min(36px, 5vw);
}
.lp_wrap .mechanism .icon {
  position: absolute;
  top: 49.3%;
  left: 10.4%;
  width: 77.733%;
}
.lp_wrap .rhythm {
  margin: -42% 0 -50%;
  z-index: 1;
}
.lp_wrap .rhythm .bg {
  position: absolute;
  top: 16%;
  right: 0%;
  width: 20%;
  height: 10%;
  background: #dfd7ca;
  z-index: -1;
}
.lp_wrap .rhythm .head {
  position: absolute;
  top: -0.5%;
  left: 75.8%;
  width: 20.4%;
}
.lp_wrap .rhythm .head.trigger img {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .rhythm .head.trigger.move img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .rhythm .foam {
  position: absolute;
  top: 50.6%;
  left: 0%;
  width: 100%;
}
.lp_wrap .rhythm .foam.trigger {
  transition: 0.8s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .rhythm .foam.trigger.move {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .rhythm .goods {
  position: absolute;
  top: 45.9%;
  left: 12.4%;
  width: 78.267%;
  transition: 0.8s 0.4s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .rhythm .foam.trigger.move ~ .goods {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .rhythm .let {
  position: absolute;
  top: 63.9%;
  left: 0%;
  width: 100%;
  transition: 0.6s 0.8s;
  opacity: 0;
}
.lp_wrap .rhythm .foam.trigger.move ~ .let {
  opacity: 1;
}
.lp_wrap .together .goods li {
  position: absolute;
  transition: 0.6s;
}
.lp_wrap .together .goods li:nth-child(1) {
  top: 16.12%;
  left: 0%;
  width: 63.467%;
  transform: translateX(-101%);
}
.lp_wrap .together .goods li:nth-child(2) {
  top: 14.23%;
  left: 22.4%;
  width: 75.467%;
  transform: translateX(105%);
}
.lp_wrap .together .goods li.trigger.move,
.lp_wrap .together .goods li.trigger.move ~ li {
  transform: translateX(0);
}
.lp_wrap .last .head li {
  position: absolute;
}
.lp_wrap .last .head li:nth-child(1) {
  top: 22.7%;
  left: 15.3%;
  width: 6.667%;
}
.lp_wrap .last .head li:nth-child(2) {
  top: 36.35%;
  left: 5.7%;
  width: 6.4%;
}
.lp_wrap .last .head li.trigger img,
.lp_wrap .last .head li.trigger ~ li img {
  opacity: 0;
  transform: translateY(-20%);
}
.lp_wrap .last .head li:nth-child(1) img {
  transition: 0.6s;
}
.lp_wrap .last .head li:nth-child(2) img {
  transition: 0.6s 0.3s;
}
.lp_wrap .last .head li.trigger.move img,
.lp_wrap .last .head li.trigger.move ~ li img {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .last .goods {
  position: absolute;
  top: 51.7%;
  left: 1.5%;
  width: 51.733%;
}
.lp_wrap .last .goods.trigger {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .last .goods.trigger.move {
  opacity: 1;
  transform: translateY(0);
}
/* -------------------------------------------- */
.lp_wrap .faq {
  background-color: #1aa6ba;
}
.lp_wrap .faq .head {
  width: 24.8%;
  margin: auto;
  padding: 15% 0 10%;
}
.lp_wrap .faq dl {
  padding: 0% 6.867% 10%;
}
.lp_wrap .faq dl dt {
  position: relative;
  cursor: pointer;
  z-index: 1;
}
.lp_wrap .faq dl dt::before {
  height: 37%;
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0%;
  z-index: -1;
  transition: 0.3s;
}
.lp_wrap .faq dl dt::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: 4%;
  width: 5.256%;
  height: 100%;
  background: url("../image/faq-arrow.png") center center/contain no-repeat;
  transition: 0.4s;
  transform: rotate(0deg);
}
.lp_wrap .faq dl dt.open::after {
  transform: rotate(90deg);
}
.lp_wrap .faq dl div:nth-of-type(n + 2) {
  margin-top: 4%;
}
.lp_wrap .faq dl dd {
  position: relative;
  transition: 0.4s;
  padding: 0 3.633%;
  margin-top: -1%;
}
.lp_wrap .faq dl dd div {
  display: none;
}