.progress-wrap {
  opacity: 1;
  position: fixed;
  left: 50%;
  transition: opacity 0.3s ease; 
  -webkit-transform: translateX(-50%); 
          transform: translateX(-50%);
  background-color: #fff;
  pointer-events: none;
}
.progress-wrap.is-bottom {
  opacity: 0;
}
@media (max-width: 767.98px) {
  .progress-wrap {
    top: 18.66667vw;
    border: 0.26667vw solid #601d7f;
    border-top: none;
    border-radius: 0 0 1.33333vw 1.33333vw;
    width: 82.66667vw;
    height: 12.8vw;
    box-shadow: 0 0 1.46667vw rgba(0, 0, 0, 0.25);
  }
}
@media (min-width: 768px) {
  .progress-wrap {
    top: 13.08594vw;
    border: 0.09766vw solid #601d7f;
    border-top: none;
    border-radius: 0 0 0.48828vw 0.48828vw;
    width: 45.11719vw;
    height: 5.46875vw;
    box-shadow: 0 0 0.97656vw rgba(0, 0, 0, 0.15);
  }
}
@media (min-width: 1024px) {
  .progress-wrap {
    top: 136px;
    border: 1px solid #601d7f;
    border-top: none;
    border-radius: 0 0 5px 5px;
    width: 462px;
    height: 56px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  }
}

.progress-bar-visible {
  opacity: 0;
  position: relative;
  z-index: 3; 
  transition: opacity 0.3s ease;
}
.progress-bar-visible.is-active {
  opacity: 1;
}

.progress-bar {
  border-radius: 100vmax;
  height: 100%;
  transition: -webkit-transform 0.1s linear;
  transition: transform 0.1s linear;
  transition: transform 0.1s linear, -webkit-transform 0.1s linear;
  background-color: #804ea5; 

  will-change: transform;
}

.progress-bar-wrap {
  position: relative;
  border-radius: 100vmax;
}
@media (max-width: 767.98px) {
  .progress-bar-wrap {
    margin: 3.2vw auto 0; 
    border: 0.26667vw solid #e2dfe7;
    width: 75.46667vw;
    height: 2.66667vw;
  }
}
@media (min-width: 768px) {
  .progress-bar-wrap {
    margin: 1.36719vw auto 0; 
    border: 0.19531vw solid #e2dfe7;
    width: 42.38281vw;
    height: 1.36719vw;
  }
}
@media (min-width: 1024px) {
  .progress-bar-wrap {
    margin: 14px auto 0; 
    border: 2px solid #e2dfe7;
    width: 434px;
    height: 14px;
  }
}

.progress-percent {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  letter-spacing: 0; 
  color: #804ea5;
  font-weight: bold;
}
@media (max-width: 767.98px) {
  .progress-percent {
    top: 2.26667vw;
    font-size: 3.73333vw;
  }
}
@media (min-width: 768px) {
  .progress-percent {
    top: 1.36719vw;
    font-size: 1.36719vw;
  }
}
@media (min-width: 1024px) {
  .progress-percent {
    top: 14px;
    font-size: 14px;
  }
}