:root {
  --bar-height: 16px; /* プログレスバーの高さ */
  --fill-height: 12px; /* 中のバーを少し小さく */
  --fill-side-padding: 4px; /* 左右の縁取り分 */
}

.progress-wrapper {
  width: 100%;
  padding-top: 30px;
  margin-bottom: 35px;
}

/* .progress-wrapper-input1 {
  padding-top: 30px;
} */

.progress-wrapper-under {
  width: 100%;
  padding-top: 0px;
  margin-bottom: 40px;
}

.progress-container {
  display: flex;
  align-items: center;
  width: 344px;
  margin: 0 auto;
  gap: 5px;
  padding-left: 15px;
  padding-right: 16px;
  box-sizing: border-box;
}

.progress-bg {
  position: relative;
  width: 100%;
  height: var(--bar-height); /* 背景バーの高さ */
  background: #f7f7f7;
  border-radius: calc(var(--bar-height) / 2);
  overflow: hidden;
  padding: 2px; /* 内側の余白を作って前景バーを小さく見せる */
  box-sizing: border-box;
}

.progress-fill,
.progress-fill-footer {
  height: var(--fill-height); /* 前景バーは少し小さく */
  background: linear-gradient(270deg, #0c77d6 0%, #48a4f9 100%);
  position: absolute;
  top: 50%;
  left: var(--fill-side-padding); /* 左右を少し内側に */
  transform: translateY(-50%); /* 中央に配置 */
  width: 0;
  border-radius: calc(var(--fill-height) / 2);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 10px;
  color: #2288dd;
}

/* .progress-container {
  width: 344px;
  margin: 0 auto;
} */

@media screen and (min-width: 1024px) {
  .progress-wrapper,
  .progress-container {
    width: 700px;
  }
}