/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 01 2023 | 17:32:31 */
/* 背景スライド */
/* HTML
	<div class="bkslide">
		<div class="bkslideoverlay"></div>　オーバーレイ画像
		<div class="bksptb"></div>　　　　　タブレット／スマホ向け背景画像
		<div class="sldimg sldimg1"></div>　PC向け背景画像：1枚目
		<div class="sldimg sldimg2"></div>　PC向け背景画像：2枚目
	</div>
*/
.home {
	position: relative;
	background: transparent !important;
}
.bkslide {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.bkslideoverlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("https://wireddesign.jp/ud/nh/jpn/wp-content/uploads/2023/10/overlay01.png");
	background-attachment: fixed;
	z-index: -97;
}
.bksptb {
	display: none;
}
.sldimg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	opacity: 0;
	animation: slider-1 24s linear infinite; /* アニメーション名 1回の秒数 一定速度 繰り返し */
}
/*
	　　　　　 ▼開いた時はここから（-2s）

	1枚目　├fi┼──10──┼fo┤　　　　　├fi┼──10──┼fo┤
	2枚目　┼fo┤　　　　　├fi┼──10──┼fo┤　　　　　├fi┼──10──┼fo┤

	　　　　　　　　　　　 ▲2枚目は12秒ずらすが、起点が-2sなので、12－2で、10秒ずらす

	完全表示は10秒
	前後のフェードは2秒ずつ　と考えて

	　　　 ├fi┼──10──┼fo┼──10──┤
	　　　  0   2          12  14          24

	この間を1本のアニメーションと考え (2+10+2+10)=24
	各間隔を％で算出する
*/
@keyframes slider-1 {
	  0% {		opacity: 0;		}
	  8.33% {	opacity: 1;		}	/*  2秒後までに =( 2÷24)x100 */
	 50% {		opacity: 1;		}	/* 12秒後までは =(12÷24)x100 */
	 58.33% {	opacity: 0;		}	/* 14秒後までは =(14÷24)x100 */
	100% {		opacity: 0;		}	/* 残り10秒は非表示 */
}
.sldimg1 {
	z-index: -98;
	background-image: url("https://wireddesign.jp/ud/nh/jpn/wp-content/uploads/2023/10/home-bk-pc-2560x1600-01.jpg");
	animation-delay: -2s;
}
.sldimg2 {
	z-index: -99;
	background-image: url("https://wireddesign.jp/ud/nh/jpn/wp-content/uploads/2023/10/home-bk-pc-2560x1600-02.jpg");
	animation-delay: 10s;
}
@media screen and (max-width:  770px) {
	.sldimg { display: none; }
	.bksptb {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		background-image: url("https://wireddesign.jp/ud/nh/jpn/wp-content/uploads/2023/10/home-bk-tb-770x1024-01.jpg");
		z-index: -98;
	}
}
@media screen and (max-width:  400px) {
	.bksptb {
		background-image: url("https://wireddesign.jp/ud/nh/jpn/wp-content/uploads/2023/10/home-bk-sp-400x850-01.jpg");
	}
}


