
.fv-slide{
	width: 100%;
	display: block;
	overflow: hidden;
    position: relative;
}

.img-frame{
    width: 100%;
    min-height: 650px;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    height: 100vh;
}


.img-01, .img-02, .img-03, .img-04{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.img-01{
   background-image: url("../img/fv1.jpg");
	background-position:  center bottom;
   animation: slide-animation-01 32s infinite;
}
.img-02{
   background-image: url("../img/fv2.jpg");
   animation: slide-animation-02 32s infinite;
}
.img-03{
	background: url("../img/fv3.jpg") center bottom no-repeat;
	animation: slide-animation-03 32s infinite;
	background-size: cover;
}

.img-04{
	background: url("../img/fv4.jpg") center bottom no-repeat;
	animation: slide-animation-04 32s infinite;
	background-size: cover;
}


@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  25% {opacity: 1;}
  30% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide-animation-02 {
    0% {opacity: 0;}
  25% {opacity: 0; transform: scale(1.15);}
  30% {opacity: 1;}
  50% {opacity: 1;}
  55% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}

@keyframes slide-animation-03 {
	0% {opacity: 0;}
	50% {opacity: 0;  transform: scale(1.0);}
	55% {opacity: 1;}
	75% {opacity: 1;}
	80% {opacity: 0; transform: scale(1.15);}
	100% {opacity: 0;}
}

@keyframes slide-animation-04 {
    0% {opacity: 0;}
  70% {opacity: 0;  transform: scale(1.15);}
  75% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1);}
}





@media(max-width:800px){


	.img-02{
	   background-image: url("../img/fv2-sp.jpg");
	   animation: slide-animation-02 32s infinite;
	}

}




/*
写真三枚の時

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}

@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
*/

	
