@charset "utf-8";


/*スライドショーのキーフレーム設定 （ループ全体30秒の中のそれぞれの表示秒数割合）
---------------------------------------------------------------------------*/
/* 1枚目 */
@keyframes slide1 {
	0% {opacity: 0;}       /* slide4 のフェードアウトと同時にフェードイン開始 */
    6.66% {opacity: 1;}    /* 約2秒で完全表示 (30s × 0.0666 ≈ 2s) */
	12.5% {opacity: 1;}
	17.5% {opacity: 0;}
	100% {opacity: 0;}
}

/* 2枚目 */
@keyframes slide2 {
	0% {opacity: 0;}
	12.5% {opacity: 0;}
	17.5% {opacity: 1;}
	30% {opacity: 1;}
	35% {opacity: 0;}
	100% {opacity: 0;}
}

/* 3枚目 */
@keyframes slide3 {
	0% {opacity: 0;}
	30% {opacity: 0;}
	35% {opacity: 1;}
	45% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 0;}
}

/* 4枚目（残り15秒間をすべて使う） */
@keyframes slide4 {
	0% {opacity: 0;}
	45% {opacity: 0;}
	50% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}

/*4枚の画像の共通設定*/
.slide1,.slide2,.slide3,.slide4 {
	width: 100%;height: 100%;
	position: absolute;right: 0px;top: 0px;z-index: -1;
	text-indent: -9999px;
}

/*１枚目画像*/
.slide1 {
	animation: slide1 30s linear infinite, opa1 1s linear;
	background: url(../img/1.jpg) no-repeat center center/cover;
}

/*２枚目画像*/
.slide2 {
	animation: slide2 30s linear infinite;
	background: url(../img/2.jpg) no-repeat center center/cover;
}

/*３枚目画像*/
.slide3 {
	animation: slide3 30s linear infinite;
	background: url(../img/3.jpg) no-repeat center center/cover;
}

/*4枚目画像*/
.slide4 {
	animation: slide4 30s linear infinite;
	background: url(../img/4_251224.jpg) no-repeat center center/cover;
}