.slider-dummy{
    position: relative;
    left:200px;
    min-width: 580px;
    max-width: 1600px;
    width:calc(100% - 200px);
    height:520px;
}





 .slider{
    position: absolute;
    top:123px;
    left:200px;
    min-width: 580px;
    max-width: 1600px;
    width:calc(100% - 200px);
    height:520px;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;

    font-family: 'Noto Serif JP', serif;
    color: rgb(255, 255, 255);
    font-size:2.6rem;
    text-shadow:4px 5px 4px rgba(0, 0, 0, 0.778);

}

#comment{
    position: absolute;
    bottom:30px;
    right:4%;
    line-height:3.4rem;
}


.slide1{
    will-change: animation;
    background-image: url('img/slider1.jpg');
    position: absolute;
    left:0;
    width:150%;
    height:100%;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    animation: fade1 60s linear infinite;
    
}

.slide2{
    will-change: animation;
    background-image: url('img/slider2.jpg');
    position: absolute;
    left:0;
    width:100%;
    height:200%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fade2 60s linear infinite;
    
}

.slide3{
    will-change: animation;
    background-image: url('img/slider3.jpg');
    position: absolute;
    left:0;
    width:150%;
    height:100%;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fade3 60s linear infinite;
}



.slide4{
    will-change: animation;
    background-image: url('img/slider-a2.JPG');
    position: absolute;
    left:0;
    width:150%;
    height:100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fade4 60s linear infinite;
}


.slide5{
    will-change: animation;
    background-image: url('img/slider-a1.JPG');
    position: absolute;
    left:0;
    width:150%;
    height:100%;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fade5 60s linear infinite;
}

.slide6{
    will-change: animation;
    background-image: url('img/slider-a3.JPG');
    position: absolute;
    left:0;
    width:150%;
    height:100%;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fade6 60s linear infinite;
}

.slide7{
    will-change: animation;
    background-image: url('img/slider-a4.JPG');
    position: absolute;
    left:0;
    width:150%;
    height:100%;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fade7 60s linear infinite;
}

.slide8{
    will-change: animation;
    background-image: url('img/slider-a8.JPG');
    position: absolute;
    left:0;
    width:150%;
    height:100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fade8 60s linear infinite;
}

/* 
.slide9{
    will-change: animation;
    background-image: url('img/slider-a6.JPG');
    position: absolute;
    left:0;
    width:150%;
    height:100%;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fade9 60s linear infinite;
}

.slide10{
    will-change: animation;
    background-image: url('img/slider-a7.JPG');
    position: absolute;
    left:0;
    width:150%;
    height:100%;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fade10 60s linear infinite;
} */

.ss1,.ss2,.ss3,.ss4,.ss5,.ss6,.ss7,.ss8{
    display:block;
    position: absolute;
    height:20px;
}

.ss1,.ss3,.ss5,.ss7{
    
    bottom:60px;
    right:30px;
}
.ss2,.ss4,.ss6,.ss8{
    top:40px;
    left:30px;
}


.ss1{animation: text1 60s linear infinite;}
.ss2{animation: text2 60s linear infinite;}
.ss3{animation: text3 60s linear infinite;}
.ss4{animation: text4 60s linear infinite;}
.ss5{animation: text5 60s linear infinite;}
.ss6{animation: text6 60s linear infinite;}
.ss7{animation: text7 60s linear infinite;}
.ss8{animation: text8 60s linear infinite;}




/* 

@keyframes fade1 {
    0% { opacity: 1;left:-20px;}

    9% { opacity: 1; }
    10% { opacity: 0;left:-300px; }

    99% { opacity: 0; left:0px;}
    100% { opacity: 1; left:-20px;}
}

@keyframes fade2 {
    0% { opacity: 0;}

    9% { opacity: 0;top:-500px;}
    10% { opacity: 1; }

    19% { opacity: 1; }
    20% { opacity: 0; top:0px;}
}

@keyframes fade3 {
    0% { opacity: 0; left:-300px; }

    19% { opacity: 0; left:-300px; }
    20% { opacity: 1; }

    29% { opacity: 1; }
    30% { opacity: 0; left:0px;}
}

@keyframes fade4 {
    0% { opacity: 0;}

    29% { opacity: 0;left:0%;}
    30% { opacity: 1; }

    39% { opacity: 1; }
    40% { opacity: 0;left:-30%; }
}

@keyframes fade5 {
    0% { opacity: 0;}

    39% { opacity: 0;left:-50%; }
    40% { opacity: 1; }

    49% { opacity: 1; }
    50% { opacity: 0;left:-20%;}
}

@keyframes fade6 {
    0% { opacity: 0;}

    49% { opacity: 0;left:0%;}
    50% { opacity: 1; }

    59% { opacity: 1; }
    60% { opacity: 0;left:-30%; }
}

@keyframes fade7 {
    0% { opacity: 0;}

    59% { opacity: 0;left:-30%; }
    60% { opacity: 1; }

    69% { opacity: 1; }
    70% { opacity: 0;left:0%;}
}

@keyframes fade8 {
    0% { opacity: 0;}

    69% { opacity: 0;left:0%;}
    70% { opacity: 1; }

    79% { opacity: 1; }
    80% { opacity: 0; left:-30%; }
}

@keyframes fade9 {
    0% { opacity: 0;}

    79% { opacity: 0; left:-30%; }
    80% { opacity: 1; }

    89% { opacity: 1; }
    90% { opacity: 0;left:0%;}
}

@keyframes fade10 {
    0% { opacity: 0; left:0%;}

    89% { opacity: 0; left:0%;}
    90% { opacity: 1; }

    99% { opacity: 1; }
    100% { opacity: 0; left:-30%; }
}

 */



 @keyframes fade1 {
    0% { opacity: 1;left:-20px;}

    12% { opacity: 1; }
    13% { opacity: 0;left:-300px; }

    99% { opacity: 0; left:0px;}
    100% { opacity: 1; left:-20px;}
}

@keyframes fade2 {
    0% { opacity: 0;}

    12% { opacity: 0;top:-500px;}
    13% { opacity: 1; }

    24% { opacity: 1; }
    25% { opacity: 0; top:0px;}
}

@keyframes fade3 {
    0% { opacity: 0; left:-300px; }

    24% { opacity: 0; left:-300px; }
    25% { opacity: 1; }

    36% { opacity: 1; }
    37% { opacity: 0; left:0px;}
}

@keyframes fade4 {
    0% { opacity: 0;}

    36% { opacity: 0;left:0%;}
    37% { opacity: 1; }

    49% { opacity: 1; }
    50% { opacity: 0;left:-30%; }
}

@keyframes fade5 {
    0% { opacity: 0;}

    49% { opacity: 0;left:-50%; }
    50% { opacity: 1; }

    61% { opacity: 1; }
    62% { opacity: 0;left:-20%;}
}

@keyframes fade6 {
    0% { opacity: 0;}

    61% { opacity: 0;left:0%;}
    62% { opacity: 1; }

    74% { opacity: 1; }
    75% { opacity: 0;left:-30%; }
}

@keyframes fade7 {
    0% { opacity: 0;}

    74% { opacity: 0;left:-30%; }
    75% { opacity: 1; }

    86% { opacity: 1; }
    87% { opacity: 0;left:0%;}
}

@keyframes fade8 {
    0% { opacity: 0;}

    86% { opacity: 0;left:0%;}
    87% { opacity: 1; }

    99% { opacity: 1; }
    100% { opacity: 0; left:-30%; }
}






@keyframes text1 {
    0% { opacity: 1;}

    12% { opacity: 1;}
    13% { opacity: 0;}

    99% { opacity: 0;}
    100% { opacity: 1;}
}

@keyframes text2 {
    0% { opacity: 0;}

    12% { opacity: 0;}
    13% { opacity: 1;}

    24% { opacity: 1;}
    25% { opacity: 0;}
    100% { opacity: 0; }
}

@keyframes text3 {
    0% { opacity: 0;}

    24% { opacity: 0; }
    25% { opacity: 1; }

    36% { opacity: 1; }
    37% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes text4 {
    0% { opacity: 0;}

    36% { opacity: 0;}
    37% { opacity: 1; }

    49% { opacity: 1; }
    50% { opacity: 0;}
    100% { opacity: 0; }
}

@keyframes text5 {
    0% { opacity: 0;}

    49% { opacity: 0;}
    50% { opacity: 1; }

    61% { opacity: 1; }
    62% { opacity: 0;}
    100% { opacity: 0; }
}

@keyframes text6 {
    0% { opacity: 0;}

    61% { opacity: 0;}
    62% { opacity: 1; }

    74% { opacity: 1; }
    75% { opacity: 0;}
    100% { opacity: 0; }
}

@keyframes text7 {
    0% { opacity: 0;}

    74% { opacity: 0;}
    75% { opacity: 1; }

    86% { opacity: 1; }
    87% { opacity: 0;}
    100% { opacity: 0; }
}

@keyframes text8 {
    0% { opacity: 0;}

    86% { opacity: 0;}
    87% { opacity: 1; }

    99% { opacity: 1; }
    100% { opacity: 0; }
}