/* Scss Document */
.swiper-container {
  padding: 0;
  position: relative;
}

.swiper-container .swiper-scrollbar {
  position: absolute;
  top: 0;
  right: -10%;
}

.swiper-container .swiper-scrollbar .swiper-scrollbar-drag {
  background-color: #E1292A;
  width: 20% !important;
}

/*=============================================================
slider1
=============================================================*/

.slider1 {
  position: relative;
}

.slider1 .swiper-pagination {
  background-color: transparent;
  padding: 0 !important;
  height: 5px !important;
  border-radius: 5px !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  top: 0;
}

.slider1 .swiper-pagination .swiper-pagination-bullet {
  width: 10vw;
  height: 1px !important;
  background: #ACABA5 !important;
  margin: 0 !important;
  display: block !important;
  opacity: 1 !important;


}

@media screen and (max-width: 768.9px) {
  .slider1 .swiper-pagination .swiper-pagination-bullet {
    width: 30vw;
  }

}

.slider1 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #76572F !important;
  border-radius: 5px !important;
}

.slider1 .swiper-button-prev {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  z-index: 10;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376572F' stroke-width='1' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center;
  background-size: 48px 48px;
  left: 0;
}

.slider1 .swiper-button-prev:after {
  display: none;
}

.slider1 .swiper-button-next {
  position: absolute;
  top: 40%;
  width: 60px;
  height: 60px;
  z-index: 10;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376572F' stroke-width='1' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center;
  background-size: 48px 48px;
  right: 0;
  transform: translateY(-50%) scale(-1, 1);
}

.slider1 .swiper-button-next:after {
  display: none;
}

/*=============================================================
.slider_sp
=============================================================*/

.slider_sp .swiper-pagination {
  background-color: transparent;
  padding: 0 !important;
  height: 5px !important;
  border-radius: 5px !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  top: 0;
}

.slider_sp .swiper-pagination .swiper-pagination-bullet {
  width: 5vw;
  height: 1px !important;
  background: #ACABA5 !important;
  margin: 0 !important;
  display: block !important;
  opacity: 1 !important;


}

@media screen and (max-width: 768.9px) {
  .slider_sp .swiper-pagination .swiper-pagination-bullet {
    width: 100%;
  }

}

.slider_sp .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #76572F !important;
  border-radius: 5px !important;
}

.slider_sp .swiper-button-prev {
  background: url("../image/common/arrow01.png") no-repeat center center;
  left: 0;
}

.slider_sp .swiper-button-prev:after {
  display: none;
}

.slider_sp .swiper-button-next {
  background: url("../image/common/arrow01.png") no-repeat center center;
  right: 0;
  transform: scale(-1, 1);
}

.slider_sp .swiper-button-next:after {
  display: none;
}



/*=============================================================
slider_room
=============================================================*/
.slider_room {
  position: relative;
  padding: 0 0 50px 0;
}

/*写真枚数でのページネーションの不具合調整
.slider_room .swiper-pagination .swiper-pagination-bullet:first-of-type {
  background: #000 !important;
  display: none !important;
}*/

/* ページネーション配置 */
.slider_room .swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ドット本体 */
.slider_room .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: none;
  opacity: 1;
  position: relative;
}

.slider_room .swiper-pagination-bullet:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: #ACABA5;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* SVG */
.slider_room .swiper-pagination-bullet svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* 背景リング */
.slider_room .bg {
  fill: none;
  stroke: transparent;
  stroke-width: 2;
}

/* 進行リング */
.slider_room .progress {
  fill: none;
  stroke: #76572F;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* アクティブ時 */
.slider_room .swiper-pagination-bullet-active:before {
  background-color: #76572F;
}

.slider_room .swiper-pagination-bullet-active .progress {
  animation: progressCircle 4s linear forwards;
}

@keyframes progressCircle {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/*
.slider_room .swiper-pagination {
  background-color: transparent;
  padding: 0 !important;
  height: auto !important;
  height: 5px !important;
  border-radius: 5px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  bottom: 10px;
  z-index: 5;
}

.slider_room .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px !important;
  background: transparent !important;
  margin: 0 10px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #76572F !important;
  opacity: 1 !important;

}
.slider_room .swiper-pagination .swiper-pagination-bullet:before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background-color: #76572F !important;
  border-radius: 100px;
}

.slider_room .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #FFF !important;
  border: 1px solid red !important;
  animation: progress 4s linear forwards;
}

.slider_room .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background-color: #76572F;
}


.slider_room .swiper-button-prev {
  background: url("../image/common/arrow01.png") no-repeat center center;
  left: 0;
}

.slider_room .swiper-button-prev:after {
  display: none;
}

.slider_room .swiper-button-next {
  background: url("../image/common/arrow01.png") no-repeat center center;
  right: 0;
  transform: scale(-1, 1);
}

.slider_room .swiper-button-next:after {
  display: none;
}

/*=============================================================
slider_loop
=============================================================*/
.slider_loop {
  position: relative;
  padding: 0 0 50px 0;

  .swiper-wrapper {
    transition-timing-function: linear;
  }
}

/* ページネーション配置 */
.slider_loop .swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ドット本体 */
.slider_loop .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: none;
  opacity: 1;
  position: relative;
}

.slider_loop .swiper-pagination-bullet:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: #ACABA5;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* SVG */
.slider_loop .swiper-pagination-bullet svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* 背景リング */
.slider_loop .bg {
  fill: none;
  stroke: transparent;
  stroke-width: 2;
}

/* 進行リング */
.slider_loop .progress {
  fill: none;
  stroke: #76572F;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* アクティブ時 */
.slider_loop .swiper-pagination-bullet-active:before {
  background-color: #76572F;
}

.slider_loop .swiper-pagination-bullet-active .progress {
  animation: progressCircle 4s linear forwards;
}

@keyframes progressCircle {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}