@charset "utf-8";
/* CSS Document */


@media (max-width: 767px) {
.slider img{width: 100%; height:auto; margin: 0;padding:0;z-index: 50;}
.slider:before{ content:""; display: block; padding:0;margin: 0;z-index: 50;}

.slider {
  position:relative;width: 100%; height:auto;
	z-index: 50; margin:0 0 0px 0;background-color:#fff
}



.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 100;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 0px solid #fff;/*矢印の色*/
    border-right: 0px solid #fff;/*矢印の色*/
    height: 0px;
    width: 0px;
}

.slick-prev {
    left:2.5%;display: none;
    transform: rotate(-135deg);
}

.slick-next {
    right:2.5%;display: none;
    transform: rotate(45deg);
}


    
.slick-dots {
	position: relative;
	z-index: 2;
    text-align:center;
	margin:-30px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    border: 0px solid #888;
    width:1px;
    height:1px;
    display:block;
    border-radius:0%;
    background:#fff;
}

.slick-dots .slick-active button{
    background:#000;
}}



@media (min-width: 768px) {

.slider img{width: 100%; height:auto; margin: 0px 0 0px 0;padding:0;vertical-align: bottom;
    object-fit: cover;}
.slider:before{ content:""; display: block; padding:0;margin: 0;}

.slider {
  position:relative;
	z-index: 0; margin:0px 0 0px 0;object-fit: cover;
}


.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 10;
    top: 42%;
    cursor: pointer;
    outline: none;
    height:50px;
    width: 50px;
}

.slick-prev {
    left:1.0%;
    transform: rotate(0deg);
}

.slick-next {
    right:0.0%;
    transform: rotate(-0deg);
}


    
.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-30px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    border: 0px solid #888;
    width:3px;/*ドットボタンのサイズ*/
    height:3px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:0%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#000;/*ドットボタンの現在地表示の色*/
}}
@media (max-width: 767px) {

    .slick-prev, 
    .slick-next {
        display: none!important;
    }
}