@charset "utf-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トラステック標準WEBサイト PHP + BootStrap
宮川動物病院　カスタム対応
	ver.2025.07.09.miyagawa-ah.com
	採用ページスライドショー　スタイルシート
────────────────────────────────────────
FileName:		/resources/css/recruit-background-slider.css
Editor:			TRUSTEC
Description:	採用ページスライドショー　スタイルシート
────────────────────────────────────────
2025/05/30:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/



/* :::::  [SECTION : BACKGROUND-SLIDESHOW] ::::: */

/* Section
--------- --------- --------- ------- */
#index-slideshow {
}

/* Slideshow Setting
--------- --------- --------- ------- */
.background-slider{
}
.background-slider .slider-item {
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0;
	/*
	 4枚を4s毎で計16s
	 infiniteで繰り返す
	 */
	z-index: 0;
	animation: pseudoAnimation 16s infinite;
}
.slider-item img{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.background-slider .slider-item.slider-item1 {
}
.background-slider .slider-item.slider-item2 {
	animation-delay: 4s;
}
.background-slider .slider-item.slider-item3 {
	animation-delay: 8s;
}
.background-slider .slider-item.slider-item4 {
	animation-delay: 12s;
}


/* 16sのうち最初の約4sだけ表示する */
@keyframes pseudoAnimation {
	0% {	opacity: 0;	}
	5% {	opacity: 1;	} /* 表示タイミングをずらしてフェードイン風に */
	30% {	opacity: 1;	}
	35% {	opacity: 0;	}
	100% {	opacity: 0;	}
}