@charset "UTF-8";

/* -----------------------------------------------

基本スタイル

----------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    outline: none;
}
.lp_wrap {
    max-width: 750px;
    margin: auto;
    overflow: hidden;
}
.lp_wrap * {
    font-size: 10px;
    font-weight: normal;
    line-height: 1em;
}
.lp_wrap ul,
.lp_wrap dl {
    list-style: none;
}
.lp_wrap img,
.lp_wrap video {
    width: 100%;
    height: auto;
    vertical-align: top;
}
.lp_wrap > * {
    position: relative;
}
.lp_wrap .slider {
    display: none;
    cursor: grab;
}
.lp_wrap .slider:active {
    cursor: grabbing;
}
.lp_wrap .slider.slick-initialized {
    display: block;
}

/* -----------------------------------------------

FV

----------------------------------------------- */
.lp_wrap .fv1 .top {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    transition: 1.5s 1s;
    transform: translateX(-100%);
}
.lp_wrap .fv1.move .top {
    transform: translateX(0%);
}
.lp_wrap .fv1 .on {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    transition: 1.6s 4.8s;
}
.lp_wrap .fv1.move .on {
    opacity: 0;
}
.lp_wrap .fv1 .on .bottom {
    position: absolute;
    top: 47.4%;
    left: 0%;
    width: 100%;
    transition: 1.5s 1s;
    transform: translateX(100%);
}
.lp_wrap .fv1.move .on .bottom {
    transform: translateX(0%);
}
.lp_wrap .fv1 .on .svg {
    position: absolute;
    top: 39%;
    left: 28%;
    z-index: 1;
    width: 55%;
    transform: rotate(-10deg);
}
.lp_wrap .fv1 .on .svg #fv1-font #clipmask .maskpath {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5px;
    stroke-dasharray: 1325;
    stroke-dashoffset: 1325;
}
/* -------------------------------------------- */
.lp_wrap .fv2 .on {
    position: absolute;
    top: 25%;
    left: 14%;
    width: 72%;
    overflow: hidden;
}
.lp_wrap .fv2 .on img {
    transition: 1.5s 0.2s;
    transform: scale(1.3);
}
.lp_wrap .fv2.move .on img {
    transform: scale(1);
}
.lp_wrap .fv2 .logo {
    position: absolute;
    top: 4%;
    left: 13.933%;
    width: 72.133%;
    transition: 1s 0.8s;
    transform: translateY(-20px);
    opacity: 0;
}
.lp_wrap .fv2.move .logo {
    transform: translateY(0px);
    opacity: 1;
}
.lp_wrap .fv2 .head {
    position: absolute;
    top: 23.4%;
    left: 83%;
    width: 6.666%;
    transition: 1s 0.8s;
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}
.lp_wrap .fv2.move .head {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.lp_wrap .fv2 .icon li {
    position: absolute;
    opacity: 0;
}
.lp_wrap .fv2 .icon li:nth-child(1) {
    top: 75%;
    left: 6%;
    width: 31.2%;
    transition: 1.4s 1.6s;
}
.lp_wrap .fv2 .icon li:nth-child(2) {
    top: 74%;
    left: 40%;
    width: 23.6%;
    transition: 1.4s 1.8s;
}
.lp_wrap .fv2 .icon li:nth-child(3) {
    top: 76%;
    left: 68%;
    width: 25.066%;
    transition: 1.4s 2s;
}
.lp_wrap .fv2.move .icon li {
    opacity: 1;
}
.lp_wrap .fv2 .annotation {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    transition: 1.4s 1.6s;
    opacity: 0;
}
.lp_wrap .fv2.move .annotation {
    opacity: 1;
}
.lp_wrap .fv2 .svg {
    position: absolute;
    top: 13%;
    left: 0%;
    z-index: 1;
    width: 48%;
    transform: rotate(-10deg);
}
.lp_wrap .fv2 .svg #fv2-font #clipmask .maskpath {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 10px;
    stroke-miterlimit:10;
    stroke-dasharray: 1048;
    stroke-dashoffset: 1048;
}
/* -------------------------------------------- */
.lp_wrap .fv3 .top {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    transition: 1s 1s;
    opacity: 0;
}
.lp_wrap .fv3.move .top {
    opacity: 1;
}
.lp_wrap .fv3 .bottom {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    transition: 1s 1s;
    opacity: 0;
}
.lp_wrap .fv3.move .bottom {
    opacity: 1;
}
.lp_wrap .fv3 .goods {
    position: absolute;
    top: 35%;
    left: 39%;
    width: 34.533%;
    transition: 1s 0.2s;
    opacity: 0;
}
.lp_wrap .fv3.move .goods {
    opacity: 1;
}
.lp_wrap .fv3 .logo {
    position: absolute;
    top: 43%;
    left: 5%;
    width: 30.133%;
    transition: 1s 1s;
    filter: blur(5px);
    opacity: 0;
}
.lp_wrap .fv3.move .logo {
    filter: blur(0px);
    opacity: 1;
}
.lp_wrap .fv3 .head {
    position: absolute;
    top: 34%;
    left: 77%;
    width: 15.866%;
    transition: 1s 1s;
    filter: blur(5px);
    opacity: 0;
}
.lp_wrap .fv3.move .head {
    filter: blur(0px);
    opacity: 1;
}
.lp_wrap .fv3 .svg {
    position: absolute;
    top: 47%;
    left: 5%;
    z-index: 1;
    width: 41%;
    transform: rotate(-10deg);
}
.lp_wrap .fv3 .svg #fv2-font #clipmask .maskpath {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 10px;
    stroke-miterlimit:10;
    stroke-dasharray: 1048;
    stroke-dashoffset: 1048;
}

/* -----------------------------------------------

各コンテンツ

----------------------------------------------- */
.lp_wrap .offer .btn {
    position: absolute;
    top: 85.7%;
    left: 11.066%;
    width: 77.866%;
    animation: 1s offer_btn ease-in-out alternate infinite;
}

.lp_wrap .offer .btn button {
    border: none;
    cursor: pointer;
    background: inherit;
}

@keyframes offer_btn {
    from {
        transform: translateX(-2%);
    }
    to {
        transform: translateX(2%);
    }
}
/* -------------------------------------------- */
.lp_wrap .symptom .color li {
    position: absolute;
    opacity: 0;
}
.lp_wrap .symptom .color li:nth-child(1) {
    top: 0.3%;
    left: 0%;
    width: 12.666%;
    transition: 0.6s;
}
.lp_wrap .symptom .color li:nth-child(2) {
    top: 5.6%;
    right: 0%;
    width: 13.2%;
    transition: 0.6s 0.2s;
}
.lp_wrap .symptom .color li:nth-child(3) {
    top: 21.3%;
    left: 0%;
    width: 12.9333%;
    transition: 0.6s 0.4s;
}
.lp_wrap .symptom .color li:nth-child(4) {
    top: 31.5%;
    right: 0%;
    width: 13.2%;
    transition: 0.6s 0.6s;
}
.lp_wrap .symptom .color li:nth-child(5) {
    top: 42%;
    left: 72.2%;
    width: 13.333%;
    transition: 0.6s 0.8s;
}
.lp_wrap .symptom .color li:nth-child(6) {
    top: 47.2%;
    left: 0%;
    width: 12.666%;
    transition: 0.6s 1s;
}
.lp_wrap .symptom .color li:nth-child(7) {
    top: 52.5%;
    right: 0;
    width: 13.2%;
    transition: 0.6s 1.2s;
}
.lp_wrap .symptom.move .color li {
    opacity: 1;
}
.lp_wrap .symptom .head {
    position: absolute;
    top: 3%;
    left: 14.866%;
    width: 70.266%;
    transition: 0.6s 1.6s;
    opacity: 0;
}
.lp_wrap .symptom.move .head {
    opacity: 1;
}
.lp_wrap .symptom .goods {
    position: absolute;
    top: 16%;
    left: 12%;
    width: 76%;
    transition: 0.6s 2s;
    opacity: 0;
}
.lp_wrap .symptom.move .goods {
    opacity: 1;
}
.lp_wrap .symptom .let {
    position: absolute;
    top: 44%;
    left: 10%;
    width: 80%;
    transition: 0.6s 2.4s;
    opacity: 0;
}
.lp_wrap .symptom.move .let {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .pba {
    height: 100vh;
}
.lp_wrap .pba::before {
    content: "";
    display: block;
    position: fixed;
    top: 0%;
    right: 50%;
    transform: translateX(50%);
    z-index: -1;
    width: 100%;
    max-width: 750px;
    height: 100vh;
    background: #001c29 url("../images/pba.png") center top/contain no-repeat;
}
.lp_wrap .pba.hide::before {
    display: none;
}
/* -------------------------------------------- */
.lp_wrap .independence .head {
    position: absolute;
    top: 5%;
    left: 13.266%;
    width: 73.466%;
    transition: 0.6s;
    transform: translateY(-20px);
    opacity: 0;
}
.lp_wrap .independence .head.move {
    transform: translateY(0px);
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .instagram .slider_wrap {
    position: absolute;
    top: 31%;
    left: 0%;
    width: 100%;
}
.lp_wrap .instagram .slider_wrap:nth-of-type(2) {
    top: 64%;
}
.lp_wrap .instagram .slider_wrap .slider .slick-list .slick-track .slick-slide {
    position: relative;
}

/* -------------------------------------------- */
.lp_wrap .voice .photo {
    position: absolute;
    top: 12%;
    left: 0%;
    width: 77.866%;
    overflow: hidden;
    transition: 0.6s;
    transform: translateX(-100%);
    opacity: 0;
}
.lp_wrap .voice .photo.move {
    transform: translateX(0%);
    opacity: 1;
}
.lp_wrap .voice .no {
    position: absolute;
    top: 15%;
    left: 71%;
    width: 23.466%;
}
.lp_wrap .voice .review {
    position: absolute;
    top: 29.5%;
    left: 27%;
    width: 59.866%;
    overflow: hidden;
}
.lp_wrap .voice .review img {
    transition: 1s;
    transform: translateX(-100%);
}
.lp_wrap .voice .review.move img {
    transform: translateX(0%);
}
.lp_wrap .voice .review::after {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #ee86a1;
    transition: 1s;
    transform: translateX(-100%);
}
.lp_wrap .voice .review.move::after {
    transform: translateX(100%);
}
.lp_wrap .voice .photo2 {
    position: absolute;
    top: 39.5%;
    right: 0%;
    width: 77.866%;
    overflow: hidden;
    transition: 0.6s;
    transform: translateX(100%);
    opacity: 0;
}
.lp_wrap .voice .photo2.move {
    transform: translateX(0%);
    opacity: 1;
}
.lp_wrap .voice .no2 {
    position: absolute;
    top: 44%;
    left: 5%;
    width: 23.466%;
}
.lp_wrap .voice .review2 {
    position: absolute;
    top: 57%;
    left: 4%;
    width: 70.666%;
    overflow: hidden;
}
.lp_wrap .voice .review2 img {
    transition: 1s;
    transform: translateX(100%);
}
.lp_wrap .voice .review2.move img {
    transform: translateX(0%);
}
.lp_wrap .voice .review2::after {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #ee86a1;
    transition: 1s;
    transform: translateX(100%);
}
.lp_wrap .voice .review2.move::after {
    transform: translateX(-100%);
}
.lp_wrap .voice .photo3 {
    position: absolute;
    top: 67.5%;
    left: 0%;
    width: 77.866%;
    overflow: hidden;
    transition: 0.6s;
    transform: translateX(-100%);
    opacity: 0;
}
.lp_wrap .voice .photo3.move {
    transform: translateX(0%);
    opacity: 1;
}
.lp_wrap .voice .no3 {
    position: absolute;
    top: 71%;
    left: 70%;
    width: 23.466%;
}
.lp_wrap .voice .review3 {
    position: absolute;
    top: 85%;
    left: 26%;
    width: 71.2%;
    overflow: hidden;
}
.lp_wrap .voice .review3 img {
    transition: 1s;
    transform: translateX(-100%);
}
.lp_wrap .voice .review3.move img {
    transform: translateX(0%);
}
.lp_wrap .voice .review3::after {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #ee86a1;
    transition: 1s;
    transform: translateX(-100%);
}
.lp_wrap .voice .review3.move::after {
    transform: translateX(100%);
}
.lp_wrap .voice .water {
    position: absolute;
    top: 24%;
    left: 0%;
    width: 100%;
}
/* -------------------------------------------- */
.lp_wrap .question .sense li {
    position: absolute;
    right: 0%;
    transform: translateX(100%);
}
.lp_wrap .question .sense li:nth-child(1) {
    top: 52%;
    width: 59.733%;
    transition: 0.6s;
}
.lp_wrap .question .sense li:nth-child(2) {
    top: 60.7%;
    width: 68.533%;
    transition: 0.6s 0.2s;
}
.lp_wrap .question .sense li:nth-child(3) {
    top: 69%;
    width: 76.8%;
    transition: 0.6s 0.4s;
}
.lp_wrap .question .sense li.move,
.lp_wrap .question .sense li.move ~ li {
    transform: translateX(0%);
}
.lp_wrap .question .goods li {
    position: absolute;
}
.lp_wrap .question .goods li:nth-child(1) {
    top: 72%;
    left: 3%;
    width: 18%;
    animation: 1.6s question_goods1 ease-in-out alternate infinite;
}
@keyframes question_goods1 {
    from {
        transform: translateY(-5%);
    }
    to {
        transform: translateY(5%);
    }
}
.lp_wrap .question .goods li:nth-child(2) {
    top: 87%;
    left: 70%;
    z-index: 1;
    width: 26.133%;
    animation: 1.6s question_goods2 ease-in-out alternate infinite;
}
@keyframes question_goods2 {
    from {
        transform: translateY(5%);
    }
    to {
        transform: translateY(-5%);
    }
}
.lp_wrap .question .goods li:nth-child(3) {
    top: 93%;
    left: 10%;
    z-index: 1;
    width: 19.733%;
    animation: 2.3s question_goods3 ease-in-out alternate infinite;
}
@keyframes question_goods3 {
    from {
        transform: translateY(-10%);
    }
    to {
        transform: translateY(10%);
    }
}
/* -------------------------------------------- */
.lp_wrap .trouble .icon li {
    position: absolute;
    top: 24%;
    width: 14.533%;
    opacity: 0;
}
.lp_wrap .trouble .icon li:nth-child(1) {
    left: 19%;
    transition: 0.6s;
}
.lp_wrap .trouble .icon li:nth-child(2) {
    left: 34.8%;
    transition: 0.6s 0.2s;
}
.lp_wrap .trouble .icon li:nth-child(3) {
    right: 34.8%;
    transition: 0.6s 0.4s;
}
.lp_wrap .trouble .icon li:nth-child(4) {
    right: 19%;
    transition: 0.6s 0.6s;
}
.lp_wrap .trouble .icon li.move,
.lp_wrap .trouble .icon li.move ~ li {
    opacity: 1;
}
.lp_wrap .trouble .gif li {
    position: absolute;
    top: 84%;
    width: 34%;
}
.lp_wrap .trouble .gif li:nth-child(1) {
    left: 14%;
}
.lp_wrap .trouble .gif li:nth-child(2) {
    right: 14%;
}
/* -------------------------------------------- */
.lp_wrap .commitment .image {
    position: absolute;
    top: 24%;
    left: 20%;
    width: 66.4%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .commitment .image.move {
    opacity: 1;
}
.lp_wrap .commitment .image2 {
    position: absolute;
    top: 21%;
    left: 14.8%;
    width: 66.4%;
    transition: 0.6s 0.6s;
    opacity: 0;
}
.lp_wrap .commitment .image.move ~ .image2 {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .overmind .photo {
    position: absolute;
    top: 2%;
    left: 6.133%;
    width: 87.733%;
    overflow: hidden;
}
.lp_wrap .overmind .photo::before {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    left: calc(50% - 0.5px);
    z-index: 1;
    width: 1px;
    height: 0%;
    background-color: #ffffff;
    transition: 1s;
}
.lp_wrap .overmind .photo.move::before {
    height: 20%;
}
.lp_wrap .overmind .photo::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0%;
    left: calc(50% - 0.5px);
    z-index: 1;
    width: 1px;
    height: 0%;
    background-color: #ffffff;
    transition: 1s;
}
.lp_wrap .overmind .photo.move::after {
    height: 20%;
}
.lp_wrap .overmind .photo img {
    transition: 1s;
}
.lp_wrap .overmind .photo.move img {
    filter: blur(10px);
    transform: scale(1.1);
}
.lp_wrap .overmind .head {
    position: absolute;
    top: 9%;
    left: 32.8%;
    width: 34.4%;
    transition: 1s;
    opacity: 0;
}
.lp_wrap .overmind .photo.move ~ .head {
    opacity: 1;
}
.lp_wrap .overmind .head2 {
    position: absolute;
    top: 34.5%;
    left: 13.066%;
    width: 73.866%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .overmind .head2.move {
    opacity: 1;
}
.lp_wrap .overmind .head3 {
    position: absolute;
    top: 37.3%;
    left: 12.733%;
    width: 74.533%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .overmind .head3.move {
    opacity: 1;
}
.lp_wrap .overmind .let {
    position: absolute;
    top: 44%;
    left: 13.466%;
    width: 73.066%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .overmind .let.move {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .penetration {
    overflow: hidden;
}
.lp_wrap .penetration > img {
    transition: 1s;
}
.lp_wrap .penetration.move > img {
    filter: blur(10px);
    transform: scale(1.1);
}
.lp_wrap .penetration .head {
    position: absolute;
    top: 30%;
    left: 23.333%;
    width: 53.333%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .penetration.move .head {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .familiar .water {
    position: absolute;
    top: 37%;
    left: 21%;
    width: 58%;
    animation: 1.6s familiar_water ease-in-out alternate infinite;
}
@keyframes familiar_water {
    from {
        transform: translateY(-5%);
    }
    to {
        transform: translateY(5%);
    }
}
.lp_wrap .familiar .water img {
    animation: 1.2s familiar_water_img ease-in-out alternate infinite;
}
@keyframes familiar_water_img {
    from {
        transform: scaleX(1.05) scaleY(0.95);
    }
    to {
        transform: scaleX(0.95) scaleY(1.05);
    }
}
.lp_wrap .familiar .percent {
    position: absolute;
    top: 37%;
    left: 21%;
    width: 58%;
    animation: 1.6s familiar_water ease-in-out alternate infinite;
}
/* -------------------------------------------- */
.lp_wrap .mineral {
    overflow: hidden;
}
.lp_wrap .mineral > img {
    transition: 1s;
}
.lp_wrap .mineral.move > img {
    filter: blur(10px);
    transform: scale(1.1);
}
.lp_wrap .mineral .head {
    position: absolute;
    top: 32%;
    left: 12.266%;
    width: 75.466%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .mineral.move .head {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .balance .icon li {
    position: absolute;
    left: 77.5%;
    width: 17.333%;
    opacity: 0;
}
.lp_wrap .balance .icon li:nth-child(1) {
    top: 11%;
    transition: 0.6s;
}
.lp_wrap .balance .icon li:nth-child(2) {
    top: 27.4%;
    transition: 0.6s 0.2s;
}
.lp_wrap .balance .icon li:nth-child(3) {
    top: 43.8%;
    transition: 0.6s 0.4s;
}
.lp_wrap .balance .icon li:nth-child(4) {
    top: 60%;
    transition: 0.6s 0.6s;
}
.lp_wrap .balance .icon li.move,
.lp_wrap .balance .icon li.move ~ li {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .good .back {
    position: absolute;
    top: 29.3%;
    left: 0%;
    width: 100%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .good .back.move {
    opacity: 1;
}
.lp_wrap .good .let {
    position: absolute;
    top: 45%;
    left: 8%;
    width: 53.866%;
    transition: 0.6s 0.6s;
    opacity: 0;
}
.lp_wrap .good .back.move ~ .let {
    opacity: 1;
}
.lp_wrap .good .japan {
    position: absolute;
    top: 44%;
    left: 57%;
    width: 39.6%;
    transition: 0.6s 0.3s;
    opacity: 0;
}
.lp_wrap .good .back.move ~ .japan {
    opacity: 1;
}
.lp_wrap .good .back2 {
    position: absolute;
    top: 61.3%;
    left: 0%;
    width: 100%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .good .back2.move {
    opacity: 1;
}
.lp_wrap .good .let2 {
    position: absolute;
    top: 69%;
    left: 27%;
    width: 67.733%;
    transition: 0.6s 0.3s;
    opacity: 0;
}
.lp_wrap .good .back2.move ~ .let2 {
    opacity: 1;
}
.lp_wrap .good .on {
    position: absolute;
    top: 15.6%;
    left: 12.666%;
    width: 74.666%;
}
/* -------------------------------------------- */
.lp_wrap .step01 .left {
    position: absolute;
    top: 2%;
    left: -5%;
    width: 38.533%;
    transition: 0.6s;
    transform: translateX(-100%);
}
.lp_wrap .step01 .left.move {
    transform: translateX(0%);
}
.lp_wrap .step01 .right {
    position: absolute;
    top: 2%;
    left: 67%;
    width: 24.266%;
    transition: 0.6s;
    transform: translateX(150%);
}
.lp_wrap .step01 .left.move ~ .right {
    transform: translateX(0%);
}
.lp_wrap .step01 .goods {
    position: absolute;
    top: -8.6%;
    left: 35.533%;
    width: 28.933%;
    transition: 0.6s;
    transform: translateY(-20%);
    opacity: 0;
}
.lp_wrap .step01 .left.move ~ .goods {
    transform: translateY(0%);
    opacity: 1;
}
.lp_wrap .step01 .photo {
    position: absolute;
    top: 30%;
    left: 0%;
    width: 100%;
    overflow: hidden;
}
.lp_wrap .step01 .photo img {
    transition: 0.6s;
    filter: blur(10px);
    transform: scale(1.3);
}
.lp_wrap .step01 .photo.move img {
    filter: blur(1px);
    transform: scale(1);
}
.lp_wrap .step01 .component {
    position: absolute;
    top: 54%;
    left: 1.066%;
    width: 97.866%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .step01 .component.move {
    opacity: 1;
}
.lp_wrap .step01 .component2 {
    position: absolute;
    top: 73%;
    left: 1.066%;
    width: 97.866%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .step01 .component2.move {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .step02 .left {
    position: absolute;
    top: 2%;
    left: -5%;
    width: 38.533%;
    transition: 0.6s;
    transform: translateX(-100%);
}
.lp_wrap .step02 .left.move {
    transform: translateX(0%);
}
.lp_wrap .step02 .right {
    position: absolute;
    top: 2%;
    left: 65%;
    width: 24.666%;
    transition: 0.6s;
    transform: translateX(150%);
}
.lp_wrap .step02 .left.move ~ .right {
    transform: translateX(0%);
}
.lp_wrap .step02 .goods {
    position: absolute;
    top: -8%;
    left: 40.466%;
    width: 19.066%;
    transition: 0.6s;
    transform: translateY(-20%);
    opacity: 0;
}
.lp_wrap .step02 .left.move ~ .goods {
    transform: translateY(0%);
    opacity: 1;
}
.lp_wrap .step02 .photo {
    position: absolute;
    top: 31%;
    left: 0%;
    width: 100%;
    overflow: hidden;
}
.lp_wrap .step02 .photo img {
    transition: 0.6s;
    filter: blur(10px);
    transform: scale(1.3);
}
.lp_wrap .step02 .photo.move img {
    filter: blur(1px);
    transform: scale(1);
}
.lp_wrap .step02 .component {
    position: absolute;
    top: 56%;
    left: 0.533%;
    width: 98.933%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .step02 .component.move {
    opacity: 1;
}
.lp_wrap .step02 .component2 {
    position: absolute;
    top: 78%;
    left: 0.533%;
    width: 98.933%;
    transition: 0.6s;
    opacity: 0;
}
.lp_wrap .step02 .component2.move {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .technology .gif li {
    position: absolute;
    top: 75%;
    width: 41.8%;
}
.lp_wrap .technology .gif li:nth-child(1) {
    left: 6.7%;
}
.lp_wrap .technology .gif li:nth-child(2) {
    right: 8%;
}
/* -------------------------------------------- */
.lp_wrap .essential .skin li {
    position: absolute;
    top: 48%;
    right: 0%;
    transform: translateX(100%);
}
.lp_wrap .essential .skin li:nth-child(1) {
    width: 100%;
    transition: 0.6s;
}
.lp_wrap .essential .skin li:nth-child(2) {
    width: 77.333%;
    transition: 0.6s 0.4s;
}
.lp_wrap .essential .skin li:nth-child(3) {
    width: 50.4%;
    transition: 0.6s 0.8s;
}
.lp_wrap .essential .skin li:nth-child(4) {
    width: 24%;
    transition: 0.6s 1.2s;
}
.lp_wrap .essential .skin li.move,
.lp_wrap .essential .skin li.move ~ li {
    transform: translateX(0%);
}
/* -------------------------------------------- */
.lp_wrap .free .icon li {
    position: absolute;
    width: 22.933%;
    opacity: 0;
}
.lp_wrap .free .icon li:nth-child(1) {
    top: 13%;
    left: 38.533%;
    transition: 0.6s;
}
.lp_wrap .free .icon li:nth-child(2) {
    top: 22.5%;
    right: 4%;
    transition: 0.6s 0.2s;
}
.lp_wrap .free .icon li:nth-child(3) {
    top: 37%;
    right: 15%;
    transition: 0.6s 0.4s;
}
.lp_wrap .free .icon li:nth-child(4) {
    top: 37%;
    left: 15%;
    transition: 0.6s 0.6s;
}
.lp_wrap .free .icon li:nth-child(5) {
    top: 22.5%;
    left: 4%;
    transition: 0.6s 0.8s;
}
.lp_wrap .free .icon li.move,
.lp_wrap .free .icon li.move ~ li {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .test .head {
    position: absolute;
    top: -7%;
    left: 80%;
    width: 8.8%;
}
.lp_wrap .test .head2 {
    position: absolute;
    top: -1%;
    left: 69%;
    width: 8.8%;
}
/* -------------------------------------------- */
.lp_wrap .cycle .photo {
    position: absolute;
    top: 3%;
    left: 0%;
    width: 100%;
    transition: 0.6s;
    transform: translateX(-100%);
}
.lp_wrap .cycle.move .photo {
    transform: translateX(0%);
}
.lp_wrap .cycle .photo2 {
    position: absolute;
    top: 52%;
    left: 0%;
    width: 100%;
    transition: 0.6s;
    transform: translateX(100%);
}
.lp_wrap .cycle.move .photo2 {
    transform: translateX(0%);
}
.lp_wrap .cycle .head {
    position: absolute;
    top: 14.3%;
    left: 86%;
    width: 6.666%;
    transition: 0.6s 0.4s;
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}
.lp_wrap .cycle.move .head {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.lp_wrap .cycle .head2 {
    position: absolute;
    top: 26.2%;
    left: 77%;
    width: 6.666%;
    transition: 0.6s 0.6s;
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}
.lp_wrap .cycle.move .head2 {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.lp_wrap .cycle .circle {
    position: absolute;
    top: 24%;
    left: -42%;
    width: 98.133%;
    animation: 14s cycle_circle linear infinite;
}
@keyframes cycle_circle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.lp_wrap .cycle .catch {
    position: absolute;
    top: 42%;
    left: 0%;
    width: 69.6%;
    transition: 0.6s 1s;
    opacity: 0;
}
.lp_wrap .cycle.move .catch {
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap .package .gif {
    position: absolute;
    top: 53%;
    left: 10%;
    width: 80%;
}
/* -------------------------------------------- */
.lp_wrap .sdgs .slider_wrap {
    position: absolute;
    top: 66%;
    left: 0%;
    width: 100%;
}
.lp_wrap .sdgs .slider_wrap .slider .slick-list .slick-track .slick-slide {
    transform: scale(0.8);
    opacity: 0.3;
    transition-duration: 1.5s;
}
.lp_wrap .sdgs .slider_wrap .slider .slick-list .slick-track .slick-slide.slick-active {
    transform: scale(1);
    opacity: 1;
}
.lp_wrap .sdgs .slider_wrap .slider .slick-list .slick-track .slick-slide img {
    width: 88.83%;
    margin: auto;
}
/* -------------------------------------------- */
.lp_wrap .again .goods {
    position: absolute;
    top: 4%;
    left: 67%;
    width: 15.066%;
    transition: 0.6s;
    transform: translateY(-20px);
    opacity: 0;
}
.lp_wrap .again .goods.move {
    transform: translateY(0px);
    opacity: 1;
}
.lp_wrap .again .goods2 {
    position: absolute;
    top: 12%;
    left: 86%;
    width: 8.933%;
    transition: 0.6s 0.2s;
    transform: translateY(-20px);
    opacity: 0;
}
.lp_wrap .again .goods.move ~ .goods2 {
    transform: translateY(0px);
    opacity: 1;
}
/* -------------------------------------------- */
.lp_wrap.float {
    position: fixed;
    bottom: 0%;
    right: 50%;
    z-index: 10;
    transform: translateX(50%);
    width: 100%;
    display: none;
}
.lp_wrap.float .btn {
    position: absolute;
    top: 32%;
    left: 58%;
    width: 40.4%;
}

.lp_wrap.float .btn button {
    border: none;
    cursor: pointer;
    background: inherit;
}