@charset "utf-8";



.main_imgBox_pc {
    height: 100vh;
    overflow: hidden;
    position: relative; 
}
.main_imgBox_sp {
    display: none;
}
.main_img {
    z-index:10;
    opacity: 0;

    width: 100%;
    height:100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
}

.main_img.anime{

    -webkit-animation: anime 36s 0s infinite;

    animation: anime 36s 0s infinite; 
}

.main_img:nth-of-type(2) {
    -webkit-animation-delay: 6s;
    animation-delay: 6s; 
}

.main_img:nth-of-type(3) {
    -webkit-animation-delay: 12s;
    animation-delay: 12s; 
}

.main_img:nth-of-type(4) {
    -webkit-animation-delay: 18s;
    animation-delay: 18s; 
}

.main_img:nth-of-type(5) {
    -webkit-animation-delay: 24s;
    animation-delay: 24s; 
}

.main_img:nth-of-type(6) {
    -webkit-animation-delay: 30s;
    animation-delay: 30s; 
}


@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         transform: scale(1.05);
                    z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         -webkit-transform: scale(1.05);
            z-index:9;
    }
    100% { opacity: 0 }
}



@media (max-width: 600px) {
    .openingAnime_pc{
        display:none;
    }
    .main_imgBox_pc {
        display: none;
    }
    .main_imgBox_sp {
        display: block;
        height: 100vh;
        overflow: hidden;
        position: relative; 
    }
    .main_img {
        z-index:10;
        opacity: 0;
        width: 100%;
        height:600px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        left: 0;
        top: 0;
    }
.main_img.anime{

    -webkit-animation: anime 36s 0s infinite;

    animation: anime 36s 0s infinite; 
}    
    .main_img:nth-of-type(2) {
        -webkit-animation-delay: 6s;
        animation-delay: 6s; 
    }
    
    .main_img:nth-of-type(3) {
        -webkit-animation-delay: 12s;
        animation-delay: 12s; 
    }
    
    .main_img:nth-of-type(4) {
        -webkit-animation-delay: 18s;
        animation-delay: 18s; 
    }
    
    .main_img:nth-of-type(5) {
        -webkit-animation-delay: 24s;
        animation-delay: 24s; 
    }
    
    .main_img:nth-of-type(6) {
        -webkit-animation-delay: 30s;
        animation-delay: 30s; 
    }
   
    
    @keyframes anime {
        0% {
            opacity: 0;
        }
        8% {
            opacity: 1;
        }
        17% {
            opacity: 1;
        }
        25% {
            opacity: 0;
            transform: scale(1.05);
            z-index:9;
        }
        100% { opacity: 0 }
    }
    
    @-webkit-keyframes anime {
        0% {
            opacity: 0;
        }
        8% {
            opacity: 1;
        }
        17% {
            opacity: 1;
        }
        25% {
            opacity: 0;
            -webkit-transform: scale(1.05);
            z-index:9;
        }
        100% { opacity: 0 }
    }

}