@charset "UTF-8";
.carousel {
  position: relative;
  width: 100%;
}
.carousel div {
  overflow: hidden;
  width: 100%;
}
.carousel div ul {
  overflow: hidden;
  position: relative;
  width: 200%;
}
.carousel div ul li {
  overflow: hidden;
  position: relative;
  float: left;
  width: 350px;
}
.carousel div ul li img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--spacing-l);
}
.carousel div ul li + li {
  margin-left: 30px;
}
.carousel ol li {
  position: absolute;
  top: 50%;
  margin-top: -25px;
}
.carousel ol li.prev {
  left: 0;
}
.carousel ol li.prev button:after {
  content: "❮";
}
.carousel ol li.next {
  right: 0;
}
.carousel ol li.next button:after {
  content: "❯";
}
.carousel ol li button {
  overflow: hidden;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}
.carousel ol li button span {
  position: absolute;
  top: -100000px;
}
.carousel ol li button:after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  color: #000;
}