@charset "utf-8";

#slider {
	position: relative;
	width: 100%;
	height: 480px;
	overflow: hidden;
	background: url(../img/loading.gif) no-repeat center center;
}

#slider ul {
	position: absolute;
	top: 0;
	left: 0;
}

#slider li {
	float: left;
}

#slider #prev,
#slider #next {
	position: absolute;
	top: 220px;
	cursor: pointer;
}

#slider #prev {
	left: 20px;
}

#slider #next {
	right: 20px;
}

/* for script */
#slider ul,
#slider #next,
#slider #prev {
	visibility: hidden;
}

#slider .layer {
	width: 900px;
	height: 480px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/dot.gif) repeat 0 0 #666;
	opacity: 0.5;
	filter: alpha(opacity=50);
}

/* SP対応 — JSスライダーを無効化し、先頭画像1枚を全幅表示 */
@media only screen and (max-width: 768px) {
	#slider {
		height: auto !important;
		margin-top: 0;
		overflow: hidden;
		background: none !important;
	}

	#slider ul {
		position: relative !important;
		width: 100% !important;
		left: auto !important;
		margin-left: 0 !important;
		visibility: visible !important;
		display: flex;
		flex-direction: column;
	}

	#slider li {
		float: none;
		width: 100% !important;
		display: none;
	}

	/* 先頭の1枚だけ表示 */
	#slider li:first-child {
		display: block;
	}

	#slider li img {
		width: 100%;
		height: auto;
		display: block;
	}

	#slider #prev,
	#slider #next {
		display: none !important;
	}

	#slider .layer {
		display: none !important;
	}
}