.kv-slide {
    transition: transform 1s cubic-bezier(0.07,0.4,0.25,1);
    opacity:1;
    transform: translateY(-100%);
    transform: translateY(min(-100%, -56.25vw));
}

.kv-slide.active {
    transform: translateY(0%);
}

.kv-slide.notransition,
.front-pic.notransition
.back-pic.notransition .back-pic__part{
    transition:none;
}

.kv-bg-area > div{
    background-image:none;
    background-size:100%;
    aspect-ratio:16/9;
    position: absolute;
    width: max(100%, calc(100svh * 16 / 9));
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    height: auto;
}

.front-pic,
.back-pic{
    background-color: #19423a;
}

.front-pic {
    transition:clip-path 1.0s cubic-bezier(0.07,0.4,0.25,1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.kv-slide-2 .front-pic,
.kv-slide-4 .front-pic{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.back-pic{
    display:flex;
    flex-wrap:wrap;
}
.front-pic.gohalf{
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);

}

.kv-slide-2 .front-pic.gohalf,
.kv-slide-4 .front-pic.gohalf{
    clip-path: polygon(0% 0, 50% 0, 50% 100%, 0% 100%);
}

.front-pic.hide{
    transition:clip-path 1.0s cubic-bezier(0.7,0,.95,.65);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.kv-slide-2 .front-pic.hide,
.kv-slide-4 .front-pic.hide{
    clip-path: polygon(0% 0, 0% 0, 0% 100%, 0% 100%);
}

.back-pic.hidePicPart .back-pic__part{
    opacity:0;
}

.back-pic__part{
    width:6.25%;
    height:11.12%;
    /*margin-left:-0.1px;
    margin-top:-0.1px;*/
    border: solid rgba(0, 0, 0, 0.1) .1px;
    /*border:solid red 1px;*/
    background-color:rgba(0,0,0,0.6);
    transition:opacity;
}


.kv-slide-1 .front-pic{
    background-color:#19423a;
    background-image:url(/img/01_line.png);
}

.kv-slide-2 .front-pic{
    background-color:#135169;
    background-image:url(/img/02_line.png);
}

.kv-slide-3 .front-pic{
    background-color:#60769f;
    background-image:url(/img/03_line.png);
}

.kv-slide-4 .front-pic{
    background-color:#7aa049;
    background-image:url(/img/04_line.png);
}


.kv-slide .back-pic{
    background-size:1300% 100%;
    background-position:0% 0%;
}

.kv-slide.active .back-pic{
   animation:changemosaic 1s steps(12,start) 1s;
   animation-fill-mode:forwards;
}

.kv-slide-1 .back-pic{
    background-image:url(/img/01_color.webp);
}

.kv-slide-2 .back-pic{
    background-image:url(/img/02_color.webp);
}

.kv-slide-3 .back-pic{
    background-image:url(/img/03_color.webp);
}

.kv-slide-4 .back-pic{
    background-image:url(/img/04_color.webp);
}


.kv-navi__item{
    border-bottom:none;
    opacity:0.6;
    transition:opacity 0.3s ease-out;
}

.kv-navi__item.active{
    opacity:1;
}



.kv-navi__item:before{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background-color:rgba(255,255,255,0.6);
}

@keyframes changemosaic{
    0%{background-position:0% 0%;}
    100%{background-position:100% 0%;}
}

.kv-navi__item:after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    transform-origin:left;
    transform:scaleX(0);
    
    background-color:#fff;
}

.kv-navi__item.active:after{
    transition:transform 4s linear;
    transform:scaleX(1);
}

.kv-navi__item.hide{
    transition:opacity 1s ease-out;
    opacity:0.6;
}

.kv-navi__item.hide:after{
    transform-origin:right;
    transform:scaleX(0);
    transition:transform 1s linear;
    /*transition:opacity 1s ease-out;
    opacity:0;*/
}

.kv-navi__item.hideend:after{
    /*transform:scaleX(0);*/
}

/*文字が右に捌ける*/
.kv-title__sub.hide img,
.kv-title__main.hide img,
.kv-title__text.hide img {
    transform: translateX(105%);
    transition-duration:0.4s;
}

.kv-title__sub.hide img{
    transition-delay:0s;
}
.kv-title__main.hide>div img{
    transition-delay:0.2s;
    transition-duration:0.6s;
}
.kv-title__text.hide img {
   transition-delay:0.5s;
}

@media screen and (max-width:768px){

    .kv-slide {
        transition-duration: 1.2s;
       
    }

    .kv-slide.active .back-pic{
        animation-delay:1.6s;
    }

    .kv-bg-area > div {
        height:100svh;
    }

    .front-pic {
        transition:clip-path 1.0s cubic-bezier(0.07,0.4,0.25,1) 0.4s;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    }
   
    .front-pic.gohalf{
        clip-path: polygon(0% 0%, 100% 0%, 100% calc(47svh + 14vw), 0% calc(47svh + 14vw)) !important;
    
    }

    .front-pic.hide{
        transition:clip-path 0.7s cubic-bezier(0.7,0,.95,.65);
        clip-path: polygon(0% 0, 100% 0, 100% 0, 0% 0%) !important;
    }

    .kv-bg-area > div{
        width: max(100%, calc(100svh * 16 / 9));
    }
}