.img-frame {
	
	height: 60vh;
	overflow: hidden;
	z-index: 10;
	position: relative;
	max-width: 100%;
	overflow: hidden;
	/*margin: 0 auto;*/
}
@media screen and (max-width: 767px){
	.img-frame{
   width: 100%;
   height: 200px;
	}
}
.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('image/g11.png');
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url('image/g12.png');
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('image/g66.png');
   animation: slide-animation-03 24s 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);}
}
/*.img-frame {
	/*position: absolute;
	margin-top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 100;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s; /* 30秒に変更 */
	/*animation-iteration-count: infinite;
	transform: scale(1.5); /* 最初に画像を大きくしておく */
	/*vertical-align: bottom;
}*/

/*@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
		transform: scale(1); /* ここで画像サイズを1に戻す */
	/*}
	100%{
		opacity: 0;
		z-index: 0;
	}
}
.img-frame div:first-of-type{
	background-image: url(image/g11/pmg);
}
.img-frame div:nth-of-type(2){
	background-image: url(image/g12/png);
	animation-delay: 10s; /* 秒数を変更 */
/*}/*

.img-frame div:last-of-type{
	background-image: url(image/g66.png);
	animation-delay: 20s;   /* 秒数を変更 */
/*}
@media screen and (max-width:768px){
    .img{
        white-space: nowrap;
		
		vertical-align: bottom;
		width: 100%;
		height: auto;
        }
	

   }