@charset "UTF-8";
/* CSS Document */

/* フォトで切り替えの場合
https://global-web-design.com/1829/
https://zenn.dev/ohtasoji/articles/16b7391074bcdb
 */
.img-box{
  width: 100%;
  height: 46vw;
/*  max-height: 630px; */
  overflow: hidden;
  position: relative;
}
.img-box .top_photo{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 46vw;
/*    max-height: 630px;  */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
  animation-name: fade;
  animation-duration: 17s;
/* ループ */
  animation-iteration-count: infinite;
}

@keyframes fade {
 0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  80%{
    opacity: 0;
/* 拡大 
https://zero-plus.io/media/transform-elements-with-transform/

    transform: scale(1.2);
*/
  }
  100%{
    opacity: 0;
/* スマホメニューより下 */
    z-index: 0;
}
}

.img-box .top_photo:nth-of-type(1){
	background-image: url(../../topimage/top_slider/01.jpg);
	animation-delay: 0s;
}
.img-box .top_photo:nth-of-type(2){
	background-image: url(../../topimage/top_slider/02.jpg);
	animation-delay: 3s;
}
.img-box .top_photo:nth-of-type(3){
	background-image: url(../../topimage/top_slider/03.jpg);
	animation-delay: 6s;
}
.img-box .top_photo:nth-of-type(4){
	background-image: url(../../topimage/top_slider/04.jpg);
	animation-delay: 9s;
}
.img-box .top_photo:nth-of-type(5){
	background-image: url(../../topimage/top_slider/05.jpg);
	animation-delay: 12s;
}
/* ここまで */