.img-frame {
	position: relative;
	width: 70%;
	height: 300px;
	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/kako_tytl.png");
	animation: slide-animation-01 24s infinite;
}
.img-02 {
	background-image: url("image/sozai_tytl.png");
	animation: slide-animation-02 24s infinite;
}
.img-03 {
	background-image: url("image/recre_tytl.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); }
}
.msg{
	font-size: 20px;
	color: #fff;
	position: absolute;
	top: 70%;
	left: 70%;
	transform: translate(-70% , -70%);
}
.msg-01, .msg-02{
	text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
}
.img-03.cover::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .7);
}
.msg-03{
	z-index:1;
}