*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 600px;
}
.slider{
  margin: 0 auto;
}
.slider img{
  width: 100%;
}
.slick-slide{
  opacity: .3;
  padding: 10px;
}
.slick-current{
  opacity: 1;
}
/*まずは矢印とdotsの擬似要素をリセット↓*/
.slick-arrow::before,
.slick-dots li button::before {
  content: '';
}
/*.slick-arrowのスタイル*/
.slick-arrow{
  background: #fff;
  transition: .3s;
}
.slick-arrow::before{
  display: block;
  height: 10px;
  position: absolute;
  width: 10px;
}
.slick-arrow:hover{
  background: #fff;
  opacity: .8;
}
/*.slick-prev(左矢印)のスタイル*/
.slick-prev{
  transform: rotate(45deg);
}
.slick-prev::before{
  border-left: 2px solid #3398db;
  border-top: 2px solid #3398db;
  left: 5px;
  top: 4px;
  transform: rotate(-90deg);
}
/*.slick-next(右矢印)のスタイル*/
.slick-next{
  transform: rotate(-45deg);
}
.slick-next::before{
  border-right: 2px solid #3398db;
  border-top: 2px solid #3398db;
  right: 5px;
  top: 4px;
  transform: rotate(90deg);
}
/*.slick-dotsのスタイル*/
.slick-dots li button{
  background: #fff;
  height: 10px;
  opacity: .8;
  transition: .3s;
  transform: rotate(45deg);
  width: 10px;
}
.slick-dots li.slick-active button{
  background: #3398db;
  border: 3px solid #fff;
  opacity: 1;
  transform: rotate(45deg) scale(1.1);
}

/*ad*/
.ad{
  margin: 100px auto;
  max-width: 1000px;
}