.hint {
  --arrow-height: 1.6vw;
  --arrow-right: 4.2666666667vw;
  --border-radius: 1.0666666667vw;
  --padding: 3.2vw;
  --shadow-top: 1.0666666667vw;
  --shadow-blur: 2.1333333333vw;
}
@media (min-width: 720px) {
  .hint {
    --arrow-height: 0.703125vw;
  }
}
@media (min-width: 720px) {
  .hint {
    --arrow-right: 2.5vw;
  }
}
@media (min-width: 720px) {
  .hint {
    --border-radius: 0.3125vw;
  }
}
@media (min-width: 720px) {
  .hint {
    --padding: 0.9375vw;
  }
}
@media (min-width: 720px) {
  .hint {
    --shadow-top: 0.3125vw;
  }
}
@media (min-width: 720px) {
  .hint {
    --shadow-blur: 0.625vw;
  }
}
@media (min-width: 1281px) {
  .hint {
    --arrow-height: 0.46875vw;
  }
}
@media (min-width: 1281px) {
  .hint {
    --arrow-right: 1.6666666667vw;
  }
}
@media (min-width: 1281px) {
  .hint {
    --border-radius: 0.2083333333vw;
  }
}
@media (min-width: 1281px) {
  .hint {
    --padding: 0.625vw;
  }
}
@media (min-width: 1281px) {
  .hint {
    --shadow-top: 0.2083333333vw;
  }
}
@media (min-width: 1281px) {
  .hint {
    --shadow-blur: 0.4166666667vw;
  }
}
@media (min-width: 2400px) {
  .hint {
    --arrow-height: 11.25px;
  }
}
@media (min-width: 2400px) {
  .hint {
    --arrow-right: 40px;
  }
}
@media (min-width: 2400px) {
  .hint {
    --border-radius: 5px;
  }
}
@media (min-width: 2400px) {
  .hint {
    --padding: 15px;
  }
}
@media (min-width: 2400px) {
  .hint {
    --shadow-top: 5px;
  }
}
@media (min-width: 2400px) {
  .hint {
    --shadow-blur: 10px;
  }
}
.hint {
  padding: var(--padding);
  border-radius: var(--border-radius);
  background: var(--color-paper-white);
  box-shadow: 0 0 var(--shadow-blur) 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  margin: var(--arrow-height) calc(var(--arrow-right) * -1) 0 0;
}
.hint__arrow-icon {
  position: absolute;
  top: 0;
  right: var(--arrow-right);
  height: var(--arrow-height);
  transform: translate(50%, -97%);
}