/*ttps://www.shinobi.jp/affiliate/%E3%80%90%E3%82%B3%E3%83%94%E3%83%9A%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B%E3%80%91%E8%87%AA%E4%BD%9Cjavascript%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC/#2*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  max-width: 100vw;
  overflow: hidden;
  width: 100%;
  position: relative;
}

/**/
.next {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
  float:left;
}

.next::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-top: solid 3px #828282;
  border-right: solid 3px #828282;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 15px;
  top: 10px;
}

.next:hover {
/*  background-color: #fff;*/
  transition: all 0.3s;
}

.prev {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}

.prev::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-top: solid 3px #828282;
  border-right: solid 3px #828282;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  position: absolute;
  left: 15px;
  top: 10px;
}


@media screen and (min-width: 768px) {
  .next {
    right: 230px;
  }
  .next::after {
    right: 0px;
  }

.prev {
  left: 230px;
}
  .prev::after {
    left: 0px;
  }
}
@media screen and (min-width: 1024px) {
  .next {
    right: 330px;
  }
  .next::after {
    right: 0px;
  }

.prev {
  left: 330px;
}
  .prev::after {
    left: 0px;
  }
}
@media screen and (min-width: 1280px) {
  .next {
    right: 460px;
  }
  .next::after {
    right: 0px;
  }

.prev {
  left: 460px;
}
  .prev::after {
    left: 0px;
  }
}

.prev:hover {
/*  background-color: #fff;*/
  transition: all 0.3s;
}


.slider {
  width: 2000vw;
  display: flex;
  margin: 0 auto;
}

.slider1 {
  transform: translateX(0);
  transition: all 0.3s;
}

.slider2 {
  transform: translateX(-100vw);
  transition: all 0.3s;
}

.slider3 {
  transform: translateX(-200vw);
  transition: all 0.3s;
}

.slider4 {
  transform: translateX(-300vw);
  transition: all 0.3s;
}

.slider5 {
  transform: translateX(-400vw);
  transition: all 0.3s;
}

.slider6 {
  transform: translateX(-500vw);
  transition: all 0.3s;
}

.slider7 {
  transform: translateX(-600vw);
  transition: all 0.3s;
}

.slider8 {
  transform: translateX(-700vw);
  transition: all 0.3s;
}

.slider9 {
  transform: translateX(-800vw);
  transition: all 0.3s;
}

.slider10 {
  transform: translateX(-900vw);
  transition: all 0.3s;
}

.slider11 {
  transform: translateX(-1000vw);
  transition: all 0.3s;
}

.slider12 {
  transform: translateX(-1100vw);
  transition: all 0.3s;
}

.slider13 {
  transform: translateX(-1200vw);
  transition: all 0.3s;
}

.slider14 {
  transform: translateX(-1300vw);
  transition: all 0.3s;
}

.slider15 {
  transform: translateX(-1400vw);
  transition: all 0.3s;
}

.slider16 {
  transform: translateX(-1500vw);
  transition: all 0.3s;
}

.slider17 {
  transform: translateX(-1600vw);
  transition: all 0.3s;
}

.slider18 {
  transform: translateX(-1700vw);
  transition: all 0.3s;
}

.slider19 {
  transform: translateX(-1800vw);
  transition: all 0.3s;
}

.slider20 {
  transform: translateX(-1900vw);
  transition: all 0.3s;
}

.content {
  width: 100%;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}


.indicator {
  width: 100%;
  position: absolute;
  bottom: 10px;
  display: flex;
  z-index: 10;
  justify-content: center;
  align-items: center;
}