@charset "UTF-8";

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

FV案1

-------------------------------------------------- */
.wrapper .fv .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0%;
    width: 100%;
    max-width: 1366px;
    height: 100vh;
    z-index: 4;
    background-color: #ffffff;
}
.wrapper .fv .logo img {
    width: 20%;
    filter: blur(10px);
    opacity: 0;
    transition-duration: 1.6s;
}
.wrapper .fv .logo img.move {
    transform: scale(0.8);
    filter: blur(0px);
    opacity: 1;
}
.wrapper .fv .logo img.move2 {
    filter: blur(10px);
    opacity: 0;
}
.wrapper .fv .fv1 {
    position: absolute;
    top: 0%;
    left: 26.6%;
    width: 54.319%;
    z-index: 2;
    transition: 1s ease-in-out;
    opacity: 0;
    transform: translateY(100%);
}
.wrapper .fv .fv1.move {
    opacity: 1;
    transform: translateY(0%);
}
.wrapper .fv .fv2 {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 29.575%;
    z-index: 2;
    transition: 1s ease-in-out;
    opacity: 0;
    transform: translateY(-100%);
}
.wrapper .fv .fv2.move {
    opacity: 1;
    transform: translateY(0%);
}
.wrapper .fv .fv3 {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 31.918%;
    height: 0%;
    z-index: 2;
    background: url("../images/fv1/potanini_fv3_pc.png") bottom center no-repeat;
    background-size: 100%;
    transition: 1s ease-in-out;
}
.wrapper .fv .fv3.move {
    height: 100%;
}
.wrapper .fv .fv4 {
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 8.638%;
    height: 0%;
    z-index: 2;
    background: url("../images/fv1/potanini_fv4_pc.png") bottom center no-repeat;
    background-size: 100%;
    transition: 1s ease-in-out;
}
.wrapper .fv .fv4.move {
    height: 49.5%;
}
.wrapper .fv .fv5 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 20.204%;
    height: 0%;
    z-index: 1;
    background: url("../images/fv1/potanini_fv5_pc.png") top center no-repeat;
    background-size: 100%;
    transition: 1s ease-in-out;
}
.wrapper .fv .fv5.move {
    height: 53%;
}
.wrapper .fv .fv6 {
    position: absolute;
    top: 2%;
    left: 20%;
    width: 20.204%;
    z-index: 1;
    transition-duration: 2s;
    opacity: 0;
}
.wrapper .fv .fv6.move {
    opacity: 1;
}
.wrapper .fv .goods {
    position: absolute;
    bottom: 3%;
    left: 23%;
    width: 6.295%;
    z-index: 3;
    transition-duration: 1s;
    opacity: 0;
}
.wrapper .fv .goods.move {
    opacity: 1;
}