@charset "utf-8";
/* CSS Document */

<style type="text/css">
/* --- 全体のBOX定義 ---------------------------------------- */
.box {
  position   : relative;
  max-width  : 100%;
  width      : 100%;
  height     : 500px;
  margin     : 0;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
	position   : absolute;
	max-width  : 100%;
	top        : 188px;
	left      : center;
	right      : center;
	bottom     : 0;
	opacity    : 0;
	width      : 100%;
	height     : 500px;
	margin     : 0;
	animation  : bgAnime 25s infinite;   /* 4画像 × 各5s = 20s */
	font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: lighter;
	color: #666666;

  
}



  
  


/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
	background-image : url(../photo/title/001.png);   /* 背景の画像を指定 */
	font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
	font-size: 16px;
	font-weight: lighter;
	line-height: 2px;
}
.box .src2 {
  background-image : url(../photo/title/002.png);   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.box .src3 {
  background-image : url(../photo/title/003.png);   /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.box .src4 {
  background-image : url(../photo/title/004.png);   /* 背景の画像を指定 */
  animation-delay  : 15s;
}
.box .src5 {
  background-image : url(../photo/title/005.png);   /* 背景の画像を指定 */
  animation-delay  : 20s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}


</style>