@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.sl_slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:1020px;
/*   width:94%;*/
    margin:0 auto;
}

.sl_slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.sl_slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
position: absolute;/*絶対配置にする*/
top: 42%;
cursor: pointer;/*マウスカーソルを指マークに*/
outline: none;/*クリックをしたら出てくる枠線を消す*/
border-top: 2px solid #FFF;/*矢印の色*/
border-right: 2px solid #FFF;/*矢印の色*/
height: 20px;
width: 20px;
}

.slick-prev {/*戻る矢印の位置と形状*/
left: -3%;
transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
right: -3%;
transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

#contents .slick-dots,
.installation_sec .slick-dots {
padding: 0;
text-align:center;
margin:30px 0 0 0;
}

#contents .slick-dots li,
.installation_sec .slick-dots li {
background: none;
display:inline-block;
margin:0 8px;
padding: 0;
}

.slick-dots button {
color: transparent;
outline: none;
width:12px;/*ドットボタンのサイズ*/
height:12px;/*ドットボタンのサイズ*/
display:block;
border-radius:50%;
background:#DDD;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
background:#ffdd21;/*ドットボタンの現在地表示の色*/
}



@media screen and (max-width: 599px) {

.sl_slider .slick-slide {
    margin:0 20px;
}
#contents .slick-dots {
margin: 20px 0 0 0;
}
.slick-dots button {
width:6px;/*ドットボタンのサイズ*/
height:6px;/*ドットボタンのサイズ*/
}
#contents .slick-dots li {
margin: 0 5px;
}
.sl_slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
width: 100%;
margin:0 auto;
}
.slick-prev {/*戻る矢印の位置と形状*/
left: 10%;
}

.slick-next {/*次へ矢印の位置と形状*/
right: 10%;
}

}