.page_mv .page_mv_wrapper {
  background-image: url(../../../img/location/gifu/page_mv_img.webp);
}

.circle.active circle:nth-child(1) {
  stroke: #3da3ed;
  animation: anime01 0.8s forwards ease-in-out;
}
.circle.active circle:nth-child(2) {
  stroke: #2fc5d5;
  stroke-dashoffset: 80;
  animation: anime02 1s 1s forwards ease-in-out;
}

@keyframes anime01 {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 20, 100;
  }
}
@keyframes anime02 {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 80, 20;
  }
}

.vertical-bar-container.active :nth-child(1) .vertical-bar {
  --height: 70px;
}
.vertical-bar-container.active :nth-child(2) .vertical-bar {
  --height: 30px;
}
.vertical-bar-container.active :nth-child(3) .vertical-bar {
  --height: 30px;
}
.vertical-bar-container.active :nth-child(4) .vertical-bar {
  --height: 10px;
}
.vertical-bar-container.active .vertical-bar {
  height: var(--height);
}