@charset "UTF-8";
/* ▼▼▼ インスタグラム
=====================================*/
.insta_wrap {
  /* slickスライダーが適用されるため、flexboxのスタイルは削除 */
}

.insta_wrap li {
  /* slickスライダーが自動的にスタイルを適用 */
}

.insta_wrap a {
  display: block;
  padding-top: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.insta_wrap .slick-slide {
  padding: 0 10px;
}

/* arrowsカスタム - mainVisualと同じスタイル */
.insta_wrap .slick-prev,
.insta_wrap .slick-next {
  width: 36px;
  height: 41px;
  top: 50%;
  z-index: 1;
}

.insta_wrap .slick-prev {
  left: -50px!important;
}

.insta_wrap .slick-next {
  right: -50px!important;
}

.insta_wrap .slick-next:before {
  content: "";
  display: block;
  width: 36px;
  height: 41px;
  background: url(../img/top/next.png) no-repeat top center!important;
  background-size: cover;
}

.insta_wrap .slick-prev:before {
  content: "";
  display: block;
  width: 36px;
  height: 41px;
  background: url(../img/top/prev.png) no-repeat top center!important;
  background-size: cover;
}

.insta_wrap .slick-prev:before,
.insta_wrap .slick-next:before {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .insta_wrap .slick-prev {
    left: 5px!important;
  }
  
  .insta_wrap .slick-next {
    right: 5px!important;
  }

  .insta_wrap .slick-next { 
    width: 25px;
    height: 40px;
  }

  .insta_wrap .slick-next:before {
    width: 25px;
    height: 40px;
  }


  .insta_wrap .slick-prev {
    width: 25px;
    height: 40px;
  }

  .insta_wrap .slick-prev:before {
    width: 25px;
    height: 40px;
  }
}