/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
	width:100%;
	margin:0 auto;
	padding: 0;
	list-style-type: none;
	position: relative;
 }
 .slider li{
	 display: inline-block;
 }
 
 .slider img {
	 width:100%;/*スライダー内の画像を横幅100%に*/
	 height:auto;
 }
 @media only screen and (min-width: 768px) {
	.slick-track {
		display: flex;
		gap: 40px;
		will-change: transform;
	  }
}
   
@media only screen and (max-width: 767px) {
	.slick-track {
		display: flex;
		gap: 15px;
	  }
}
  .slick-slide {
	height: auto !important;
  }
 /*slickのJSで書かれるタグ内、スライド左右の余白調整*/
 
 .slider .slick-slide {
	 margin:0 20px;
 }
 .slick-slider{
	position: relative;
 }
 
 /*矢印の設定*/
 
 /*戻る、次へ矢印の位置*/
 .slick-prev,
 .slick-next{
	 position: absolute;
	 z-index: 1;
	 top: 100%;
	 height: 40px;
	 width: 40px;
	 cursor: pointer;/*マウスカーソルを指マークに*/
	 outline: none;/*クリックをしたら出てくる枠線を消す*/
	 background-color: #fff;
	 border-radius: 50px;
	 border: solid 1px #000;
	 
 }

 .slick-prev {/*戻る矢印の位置と形状*/
	top: 104% !important;
	 left: 25%;
 }
 
 .slick-next {/*次へ矢印の位置と形状*/
	top: 104% !important;
	 right: 25%;
 }

@media only screen and (max-width: 767px) and (min-width: 0) {
	.slick-prev,
	.slick-next {
		top: 104% !important;
		height: 40px;
	 	width: 40px;
	}
	.slick-prev {/*戻る矢印の位置と形状*/
		left: -1%;
	}

	.slick-next {/*戻る矢印の位置と形状*/
		right: -1%;
	}

}

 .slick-prev::before, 
 .slick-next::before{
	position: absolute;/*絶対配置にする*/
	content: '';
	top: 32%;
	left: 37%;
	border-top: 2px solid #000;/*矢印の色*/
	border-right: 2px solid #000;/*矢印の色*/
	height: 15px;
	width: 15px;
	transform: rotate(-135deg);
 }
 .slick-next::before{
	transform: rotate(45deg);
	right: 37%;
	left: auto;
 }


 @media only screen and (max-width: 767px) and (min-width: 0) {
	.slick-prev::before, 
	.slick-next::before{
		top: 32%;
		left: 41%;
		border-top: 2px solid #000;/*矢印の色*/
		border-right: 2px solid #000;/*矢印の色*/
		height: 15px;
	   	width: 15px;
	}
	.slick-next::before{
		left: 23%;
	}
 }
 
 /*ドットナビゲーションの設定*/
 @media only screen and (min-width: 768px) {
	.slick-dots {
		text-align:center;
		width: 320px;
		margin:0 auto;
		padding: 0;
	}
}   
@media only screen and (max-width: 767px) {
	.slick-dots {
		text-align:center;
		width: 80%;
		margin:0 auto;
		padding: 0 20px;
	}
}

 .slick-dots li {
	 display:inline-block;
	 margin:0 5px;
	 padding: 0 !important;
 }
 .slick-dots li:before{
	background: none !important;
 }
 .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px !important;
    height: 12px !important;
    padding: 10px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
	border-radius: 50%;
	background:#9F9F9F;/*ドットボタンの色*/
}
 .slick-dots .slick-active button{
	 background:#00A0E1/*ドットボタンの現在地表示の色*/
 }

 .slick-dots li button:before {
	display: none !important;
 }

/* @media only screen and (min-width: 768px) {
	.slick-dots {
		display: block;
	}
} */