/*=============================================================
	各種スライダ―
	MediaQueryは下部へまとめて記載
=============================================================*/
/* JavaScriptが有効な場合、対象を隠す */
html.enable-javascript .slider-sample{
  visibility: hidden;
}
/* 画像すべてを読み終えたら、対象を表示する */
html.enable-javascript.window-load .slider-sample{
  visibility: visible;
}
/*------------------------------------------------------------
	Main Slider
-------------------------------------------------------------*/
.main-slider-area {
	width: 100%;
	min-height: 580px;
}
	#main-slide {
		position: relative;
		width: auto;
		height: 580px;
	}
		#main-slide div img {
			width: auto;
			height: 550px;
			object-fit: cover;
		}
/*-----------------------------------------------------------*/	
ul.slick-list {
    overflow: visible;
}
ul.slider {
    max-width: 300px;
    margin: 0 auto;
}
	ul.slick-dots01 {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		list-style: none;
		text-align: center;
		margin: 0 auto;
		padding: 0;
	}
	ul.slick-dots {
		position: absolute;
		bottom: 15px;
		width: 100%;
		list-style: none;
		text-align: center;
		margin: 0 auto;
		padding: 0;
	}
		ul.slick-dots01 li,
		ul.slick-dots li {
			display: inline-block;
			width: auto;
			height: auto;
			margin: 0;
			padding: 0;
			cursor: pointer;
		}
			ul.slick-dots01 li button,
			ul.slick-dots li button {
				font-size: 0;
				line-height: 0;
				padding: 0;
				cursor: pointer;
				color: transparent;
				border: 0;
				text-indent: -9999px;
				display: block;
				width: 8px;
				height: 8px;
				margin: 0 8px;
				outline: 0;
				border-radius: 5px;
				transition-duration: 0.3s;
				background-color: #3b2f23;
			}
			ul.slick-dots01 li button:hover,
			ul.slick-dots01 li.slick-active button,
			ul.slick-dots li button:hover,
			ul.slick-dots li.slick-active button {
			    border-radius: 0px;
			    width: 12px;
			    height: 12px;
			}
@media screen and (max-width: 450px) {
	.main-slider-area {
		width: 100%;
		min-height: 250px;
	}
		#main-slide {
			position: relative;
			width: 100%;
			height: 250px;
		}
			#main-slide div img {
				width: 100%;
				height: 250px;
				object-fit: contain;
			}
			ul.slick-dots01 {
				position: absolute;
				bottom: -25px;
				left: 0;
				width: 100%;
				list-style: none;
				text-align: center;
				margin: 0 auto;
				padding: 0;
			}
}