@charset "Shift_JIS";
// CSS

.main{
	display: none;
}
.main{
	display: none;
}
.sp_main{
	display: inline;
	margin: 0 0 10% 0;
	padding: 0;
}

.sp_main_imgBox{
    	height: 150vw;
	overflow: hidden;
    	position: relative;
}
.sp_main_img{
	opacity: 0;
	width: 100%;
    	height: 100vw;
    	object-fit: cover;
    	position: absolute;
    	left: 0;
    	top: 0;
    	-webkit-animation: anime 36s 0s infinite;
    	animation: anime 36s 0s infinite;
}
.sp_main_img img{
	width: 100%;
}
.sp_main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s;
}
.sp_main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s;
}
.sp_main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s;
}
.sp_main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s;
}
.sp_main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s;
}
@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         transform: scale(1.2);
         z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         -webkit-transform: scale(1.2);
         z-index:9;
    }
    100% { opacity: 0 }
}
@media all and (min-width: 768px) {
.sp_main{
	display: none;
}
.main{
	display: inline;
	margin: 0 0 10% 0;
	padding: 0;
}
.main_imgBox{
    	height: 50vw;
	overflow: hidden;
    	position: relative;
}
.main_img{
	opacity: 0;
	width: 100%;
    	height: 50vw;
    	object-fit: cover;
    	position: absolute;
    	left: 0;
    	top: -100px;
    	-webkit-animation: anime 36s 0s infinite;
    	animation: anime 36s 0s infinite;
}
.main_img img{
	width: 100%;
}
.main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s;
}
.main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s;
}
.main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s;
}
.main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s;
}
.main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s;
}

@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         transform: scale(1.2);
         z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         -webkit-transform: scale(1.2);
         z-index:9;
    }
    100% { opacity: 0 }
}
}

.no-hover-effect img {
  pointer-events: none;
}