/* -------------------------------------------------- */
/* Created by Indocat  */
/* URL:https://indocat.net/  */
/* Created:September 5, 2025  */
/* -------------------------------------------------- */

/* 5枚スライダーのスタイル */

.slider_5{
    position:relative;
    overflow:hidden;
    text-align:center;
}

.slider_5 ul{
    height:460px;
    margin:0 auto;
    padding:0 auto;
    list-style:none;
}

.slider_5 ul li{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:40s;
}

.slider_5 ul li img{
    width:100%;
    height:100%;
    margin:0 auto;
    padding:0 auto;
    object-fit: cover;
    object-position:50% 50%
}

/* 5枚 スライダーのアニメーション */

.slider_5 ul li:nth-child(1){
    animation-name:slider_5;
    animation-delay:-1s;
}
.slider_5 ul li:nth-child(2){
    animation-name:slider_5;
    animation-delay:7s;
    opacity:0;
}

.slider_5 ul li:nth-child(3){
    animation-name:slider_5;
    animation-delay:15s;
    opacity:0;
}

.slider_5 ul li:nth-child(4){
    animation-name:slider_5;
    animation-delay:23s;
    opacity:0;
}

.slider_5 ul li:nth-child(5){
    animation-name:slider_5;
    animation-delay:31s;
    opacity:0;
}

@keyframes slider_5{
  0%{
    opacity:0;
  }
  5%{
    opacity:1;
  }
  20%{
    opacity:1;
  }
  25%{
    opacity:0;
  }
  100%{
    opacity:0;
  } 
}


/*===============================================
画面の横幅が1024pxまで（Nest Hub iPad Pro）
===============================================*/

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

/* -------------------------------------------------- */
/* Eyecatch slider */

.slider_5 ul{
    height:87vh;
}

}

/*===============================================
画面の横幅が912pxまで（Suefsce Pro）
===============================================*/

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

/* -------------------------------------------------- */
/* Eyecatch slider */

.slider_5 ul{
    height:83vh;
}

}

/*===============================================
画面の横幅が800pxまで（iPad mini）
===============================================*/

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

/* -------------------------------------------------- */
/* Eyecatch slider */

.slider_5 ul{
    height:80vh;
}

}

/*===============================================
画面の横幅が640pxまで（SP）
===============================================*/

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

/* -------------------------------------------------- */
/* Eyecatch slider */

.slider_5 ul{
    height:75vh;
}

/*===============================================
画面の横幅が430pxまで（iPhone 14 Pro Max）
===============================================*/

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

/* -------------------------------------------------- */
/* Eyecatch slider */

.slider_5 ul{
  height:80vh;
}


}