/* Swiper 共通 */
.swiper {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


/* PREV/NEXT 丸ボタン */
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
  width: 40px;               /* 正円の幅 */
  height: 40px;              /* 正円の高さを幅と揃える */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: transparent;
  position: absolute;
  top: 200px;
  transform: translateY(-50%);
  pointer-events: auto;
  z-index: 10;
}

/* デフォルトの矢印非表示 */
.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after {
  display: none;
}

/* 丸ボタン矢印 */
.swiper .swiper-button-prev::before,
.swiper .swiper-button-next::before {
  content: "";
  position: absolute;
  width: 10px;      /* 矢印サイズ */
  height: 10px;
  border-top: 2px solid;
  border-right: 2px solid;
}

/* area ごとの色 */
.area_yellow .swiper-button-prev,
.area_yellow .swiper-button-next {
  background-color: #5e1711;
}
.area_yellow .swiper-button-prev::before,
.area_yellow .swiper-button-next::before {
  border-color: #f5d682;
}

.area_red .swiper-button-prev,
.area_red .swiper-button-next {
  background-color: #f5d682;
}
.area_red .swiper-button-prev::before,
.area_red .swiper-button-next::before {
  border-color: #5e1711;
}

/* 左右の位置 */
.swiper .swiper-button-prev { left: 6%; }
.swiper .swiper-button-next { right: 6%; }

/* 左矢印 */
.area_yellow .swiper-button-prev::before,
.area_red .swiper-button-prev::before {
  transform: translateX(1px) rotate(-135deg);
}

/* 右矢印 */
.area_yellow .swiper-button-next::before,
.area_red .swiper-button-next::before {
  transform: translateX(-2px) rotate(45deg);
}