@charset "UTF-8";

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

FV3

----------------------------------------------- */
.lp_wrap .fv3 .head {
    position: absolute;
    top: 6%;
    left: 0%;
    width: 100%;
}
.lp_wrap .fv3.trigger .head {
    transition: 1.6s 4s;
    transform: scale(1.2);
    opacity: 0;
    filter: blur(10px);
}
.lp_wrap .fv3.trigger.move .head {
    transform: scale(1);
    opacity: 1;
    filter: blur(0px);
}
.lp_wrap .fv3 .catch {
    position: absolute;
    top: 9%;
    left: 0%;
    width: 100%;
    transform-origin: bottom;
    transform: scale(0);
    opacity: 0;
    filter: blur(0px);
}
.lp_wrap .fv3.trigger.move .catch {
    animation:  5s fv3_catch 0.5s ease-out forwards;
}
@keyframes fv3_catch {
    0% {
        transform: scale(0);
        opacity: 0;
        filter: blur(0px);
    }
    20% {
        opacity: 1;
    }
    50% {
        filter: blur(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
        filter: blur(10px);
    }
}
.lp_wrap .fv3 .gel {
    position: absolute;
    top: 31%;
    left: 2%;
    width: 96%;
}
.lp_wrap .fv3.trigger .gel {
    transition: 1s 4s;
    opacity: 0;
}
.lp_wrap .fv3.trigger.move .gel {
    opacity: 1;
}
.lp_wrap .fv3 .foam {
    position: absolute;
    top: 24%;
    left: -7.466%;
    width: 114.933%;
}
.lp_wrap .fv3.trigger .foam {
    transform-origin: center 30%;
    transform: scale(0);
    opacity: 0;
}
.lp_wrap .fv3.trigger.move .foam {
    animation:  5s fv3_foam 0.5s ease-out forwards;
}
@keyframes fv3_foam {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    70% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.98);
        opacity: 0;
    }
}
.lp_wrap .fv3 .foam::after {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: url("https://k-cosme.jp/gold/prm/ten/a1/images/fv3-foam-warm.png") center center/contain no-repeat;
}
.lp_wrap .fv3.trigger .foam::after {
    transition: 3s 2s;
    opacity: 0;
}
.lp_wrap .fv3.trigger.move .foam::after {
    opacity: 1;
}
.lp_wrap .fv3 .goods {
    position: absolute;
    top: 31%;
    left: 32.8%;
    width: 34.4%;
}
.lp_wrap .fv3.trigger .goods {
    transition: 1.5s;
    transform: translateY(-20px);
    opacity: 0;
}
.lp_wrap .fv3.trigger.move .goods {
    transform: translateY(0px);
    opacity: 1;
}