@charset "UTF-8";

/*----＞＞スライドショー--------*/
/*----＞＞画像初期設定----*/
.bg_slideshow{
	position: relative;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
    background-color: #000;
}

.bg_slideshow:after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 16px);
    width: -webkit-calc(100% - 16px);
    height: calc(100vh - 16px);
    height: -webkit-calc(100vh - 16px);
    border: 8px solid #fff;
}

.bg_slideshow li span{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: 0;
	-webkit-animation: bgAnimation 48s linear infinite 0s;
	animation: bgAnimation 48s linear infinite 0s;
}


/*----＞＞画像アニメーション設定----*/
.bg_slideshow li:nth-child(1) span {
	background-image: url(../img/bg01.jpg)
}
.bg_slideshow li:nth-child(2) span {
	background-image: url(../img/bg02.jpg);
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
.bg_slideshow li:nth-child(3) span {
	background-image: url(../img/bg03.jpg);
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
.bg_slideshow li:nth-child(4) span {
	background-image: url(../img/bg04.jpg);
	-webkit-animation-delay: 36s;
	animation-delay: 36s;
}

@keyframes bgAnimation {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	4% {
		opacity: 1;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	20% {
		opacity: 1;
	}
	32% {
		opacity: 0;
	}
	100% { opacity: 0 }
}
@-webkit-keyframes bgAnimation {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-in;
	}
	4% {
		opacity: 1;
		-webkit-animation-timing-function: ease-out;
	}
	20% {
		opacity: 1;
	}
	32% {
		opacity: 0;
	}
	100% { opacity: 0 }
}


/*----＞＞アニメーション未対応時--------*/
.no-cssanimations .bg_slideshow li span{
	opacity: 1;
}