.text-page-primary {
  color: var(--color-macular);
}
.bg-page-light {
  background-color: var(--color-macular-light);
}
.title-normal {
  font-size: 24px;
  color: var(--color-macular);
  font-weight: 700;
}
.macular .treatment #treatment1:checked ~ label[for="treatment1"] .iconfont,
.macular .treatment #treatment2:checked ~ label[for="treatment2"] .iconfont,
.macular .treatment #treatment3:checked ~ label[for="treatment3"] .iconfont,
.macular .treatment #treatment4:checked ~ label[for="treatment4"] .iconfont {
  transform: rotate(180deg);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.macular-test-list {
  list-style: none;
  counter-reset: custom-counter;
}
.macular-test-list li {
  counter-increment: custom-counter;
  position: relative;
  padding-left: 22px;
}
.macular-test-list li::before {
  content: counter(custom-counter);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  background-color: var(--color-macular);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 1024px) {
  .title-normal {
    font-size: 30px;
  }
  .macular-test-list li {
    padding-left: 48px;
  }
  .macular-test-list li::before {
    width: 34px;
    height: 34px;
    font-size: 26px;
  }
}