overflow: hidden;/*==================================================
スライダーのためのcss
===================================*/
.slider {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
/* slick-trackが親要素を突き抜けるのを防ぐ */
.slider .slick-list {
    overflow: hidden;
}

/* slick-trackの巨大な幅を無効化 */
.slider .slick-list  .slick-track {
    width: 100% !important;
    transform: translate3d(0, 0, 0) !important; /* 横移動を停止 */
}

/* スライドを同じ位置に重ねる */
.slider .slick-list  .slick-track .slider-item {
    float: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
	height: max-content;
    opacity: 0;
    transition: opacity 2000ms; /* JSのspeedと合わせる */
}

/* アクティブなスライドだけ表示 */
.slider .slick-list  .slick-track .slider-item.slick-active {
    position: relative !important; /* 1枚目だけ高さを出すためにrelative */
    opacity: 1;
    z-index: 10;
}

.slider .slick-list  .slick-track .slider-item  img {
  width: 100%;
  display: block;
}

.slick-arrow,
.slick-dots{
	position: absolute;
}
/*.slick-dots{
    left: 50%;
}*/
.slick-dots {
    display: flex;
    justify-content: center;
	width: 100%;
    padding: 1em 0;
}

.slick-dots li {
    width: 40px;
    height: 4px;
    margin: 0 5px;
    background: #fff;
    cursor: pointer;
}

.slick-dots li:hover,
.slick-dots li.slick-active {
    background: coral;
}
.slick-dots li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.slick-prev,
.slick-next {
    position:absolute;
	top: 50%;
	transform: translateY(-50%);
    display: flex;	
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: #ffffff9c;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
	z-index: 99;
}
.slick-prev {
    left: 0.5%;
}
.slick-next {
    right: 0.5%;
}
.slick-next::before,
.slick-prev::before{
    /*position:absolute;*/
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #4b4b4b;
	font-size: 2em;
    /*width:10px;
    height:10px;
    border-right: 2px solid #FFF;
    border-top: 2px solid #FFF;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);*/
}
.slick-next::before{
	content: '\f105';
}
.slick-prev::before{
	content: '\f104';
}

@media all and (max-width:750px){
	.slick-prev,
	.slick-next {
		top: initial;
		bottom: 1%;
		transform: none;
	}
}