@charset "utf-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ファインレーベル株式会社　カスタム対応
	ver.2024.06.25.Custom-Finelabel
	ホームスライドショー　スタイルシート
────────────────────────────────────────
FileName:		/resources/css/index-background-slider.css
Editor:			TRUSTEC
Description:	ホームスライドショー　スタイルシート。
────────────────────────────────────────
2024/06/25:		サンプル開発開始。
────────────────────────────────────────
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/



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

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

/* Slideshow Setting
--------- --------- --------- ------- */
.background-slider {
	width: 100%;
	height: 96vh;
	overflow: hidden;

	position: absolute;
	top: 0;

/*	transform: skewY(-2deg);
	transform-origin: top left;*/
}

.background-slider .slider-item {
	background-size: cover;

	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	opacity: 0;

	/*
	 4枚を5s毎で計20s
	 infiniteで繰り返す
	 */
	animation: pseudoAnimation 20s infinite;
}
.slider-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.background-slider .slider-item.slider-item1 {
}
.background-slider .slider-item.slider-item2 {
	animation-delay: 5s;
}
.background-slider .slider-item.slider-item3 {
	animation-delay: 10s;
}
.background-slider .slider-item.slider-item4 {
	animation-delay: 15s;
}
.background-slider .slider-item.slider-item5 {
	animation-delay: 20s;
}
.background-slider .slider-item.slider-item6 {
	animation-delay: 25s;
}


.background-slider .slider-next-arrow {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.slider-next-arrow a {
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	font-size: 3rem;
	line-height: 3rem;
	padding: 0 0.5rem;
	opacity: 0.5;
	transition: 0.4s;
}
.slider-next-arrow a:hover,
.slider-next-arrow a:focus,
.slider-next-arrow a:active {
	opacity: 1;
}


/* 20sのうち最初の約5sだけ表示する */
@keyframes pseudoAnimation {
	0% {	opacity: 0;	}
	5% {	opacity: 1;	} /* 表示タイミングをずらしてフェードイン風に */
	25% {	opacity: 1;	}
	30% {	opacity: 0;	}
	100% {	opacity: 0;	}
}
.parallax {
	/* パララックスをつくる部分 */
/*	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;*/
}



/*
--------- --------- --------- ------- */
header {
	background-color: transparent;
	border-bottom: none;
}



/*
--------- --------- --------- ------- */
#firstview {
/*	position: relative;
	top: 86vh;*/

	margin-top: 84vh;
}
.firstview-over {
	background-color: #303030;
	transition: 0.7s;
}