.carousel{
  &__main{
    position: relative;
    width: 100%;
    // min-height: 768px;
    @include mediaS{
      min-height: inherit;
      // height: 667px;
    }
    &__item{
      opacity: 0;
      transition: opacity 4s linear, transform 7.5s linear; 
      position: relative;
      width: 100%;
      height: 100%;
      img{
        display: block; //下に余白できないように
        width: 100%;
        height: 100%;
        // min-height: 768px;
        object-fit: cover;
        height: calc(var(--vh, 1vh) * 100);
        @include mediaS{
          min-height: inherit;
          // height: 667px;
        }
      }
      &.show_{
        opacity: 1;
      }
      &:not(:first-child){
        position: absolute;
        top: 0;
        left: 0%;
      }
    }
    
  }
  // &__prev{
  //   position: absolute;
  //   top: 150px;
  //   left:20px;
  //   cursor: pointer;
  //   color: lightgray;
  //   &:hover{
  //     transition-duration: .2s;
  //     transform: translateX(-10px);
  //   }
  // }
  // &__next{
  //   position: absolute;
  //   top: 150px;
  //   right:20px;
  //   cursor: pointer;
  //   color:lightgray;
  //   &:hover{
  //     transition-duration: .2s;
  //     transform: translateX(10px);
  //   }
  // }
  // &__thumbnails{
  //   display: flex;
  //   justify-content: center;
  //   list-style: none;
  //   padding: 0;
  //   & li{
  //     cursor: pointer;
  //     opacity: 0.4;
  //     &:hover{
  //       opacity: 1;
  //     }
  //     &.current{
  //       opacity: 1;
  //     }
  //   }
  //   & img{
  //     width: 80px;
  //   }
  // }
}


@keyframes fadeImg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}