.flicking-arrow-prev,
.flicking-arrow-next {
  position: absolute;
  top: 50%;
  width: 64px;
  height: 64px;
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 2;
}

.flicking-arrow-prev.is-circle,
.flicking-arrow-next.is-circle {
  background-color: #f2a65e;
  border-radius: 50%;
}

.flicking-arrow-disabled.is-circle {
  background-color: rgb(10 10 10 / 10%);
}

.flicking-arrow-prev.is-circle::before,
.flicking-arrow-prev.is-circle::after,
.flicking-arrow-next.is-circle::before,
.flicking-arrow-next.is-circle::after {
  background-color: white;
}

.flicking-arrow-prev {
  left: 10px;
}
.flicking-arrow-next {
  right: 10px;
}

.flicking-arrow-prev.is-outside {
  left: -74px;
}
.flicking-arrow-next.is-outside {
  right: -74px;
}

.flicking-arrow-prev::before,
.flicking-arrow-prev::after,
.flicking-arrow-next::before,
.flicking-arrow-next::after {
  content: "";
  width: 24px;
  height: 6px;
  position: absolute;
  background-color: rgb(250, 70, 22);
}
.flicking-arrow-prev::before {
  top: 50%;
  left: 22px;
  transform: rotate(-45deg);
  transform-origin: 0% 50%;
}
.flicking-arrow-prev::after {
  top: calc(50% - 4px);
  left: 22px;
  transform: rotate(45deg);
  transform-origin: 0% 50%;
}
.flicking-arrow-next::before {
  top: 50%;
  right: 22px;
  transform: rotate(45deg);
  transform-origin: 100% 50%;
}
.flicking-arrow-next::after {
  top: calc(50% - 4px);
  right: 22px;
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
}

.flicking-arrow-disabled,
.flicking-arrow-disabled {
  cursor: default;
}

.flicking-arrow-disabled::before,
.flicking-arrow-disabled::after,
.flicking-arrow-disabled::before,
.flicking-arrow-disabled::after {
  background-color: #e6e6e6;
}

.flicking-arrow-prev.is-thin::before,
.flicking-arrow-prev.is-thin::after,
.flicking-arrow-next.is-thin::before,
.flicking-arrow-next.is-thin::after {
  height: 3px;
}

.flicking-arrow-prev.is-thin::after,
.flicking-arrow-next.is-thin::after {
  top: calc(50% - 2px);
}