@charset "UTF-8";

.topimage{
	margin:auto;
	background-image: url("../img/bg.jpg");
	position:relative;
	width:100%;
	text-align: center;
}

.topanime{
  position   : relative;
  width:80%;
  min-width  : 720px;
  max-width  : 800px;
  height     : 514px;
  margin     : auto;
  overflow   : hidden;	
}

.topanime .bgImg{
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 4s; 
  animation-fill-mode: forwards;
}
.topanime .src1 {
  background-image : URL("../img/top1.jpg");   /* 背景の画像を指定 */
}
.topanime .src2 {
  background-image : URL("../img/top2.jpg");   /* 背景の画像を指定 */
  animation-delay  : 2s;
}
.topanime .src3 {
  background-image : URL("../img/top3.jpg");   /* 背景の画像を指定 */
  animation-delay  : 4s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
  33% { opacity: 1; }
  66% { opacity: 1; }
 100% { opacity: 1; }
}

.topanime img {
	display:none;
}