@charset "utf-8";
.slide {
    position   : relative;
    overflow   : hidden;
                        /* 画像のサイズに合わせて変更ください */
    width      : 100vw;
    height     : 100vh;
    margin     : auto;      /* サンプルは中央寄せの背景：白 */
    background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
    display    : block;
    position   : absolute;
    width      : inherit;
    opacity    : 0;
    animation  : slideAnime 20s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 10s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
    0% { opacity: 0; top: -10% }
    50% { opacity: 1; top: 0% }
    75% { opacity: 0;}
    100% { opacity: 0;}
}
/*画面幅1600px以上の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1600px){

	.slide {height: 820px;}

}

/*画面幅0320px以上の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:0320px){

	.slide {height: 910px;}

}

/*画面幅1200px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px){

	.slide {height: 510px;}

}

/*画面幅1000px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px){

	.slide {height: 370px;}

}

/*画面幅800px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

	.slide {height: 380px;}

}

/*画面幅620px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:620px){

	.slide {height: 300px;}

}

/*画面幅500px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:500px){

	.slide {height: 240px;}

}

/*画面幅420px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:420px){
.slide {
    height     : 90vh;
}
/*=== 画像の設定 ======================================= */
.slide img {
    display    : block;
    position   : absolute;
    width      : inherit;
    height     : inherit;
    object-fit: cover; 
    opacity    : 0;
    animation  : slideAnime 20s ease infinite;
}
 /*=== スライドのアニメーション ========================= */
 @keyframes slideAnime{
    0% { opacity: 0;}
    50% { opacity: 1;}
    75% { opacity: 0;}
    100% { opacity: 0;}
}
}