/*
 * 参考: https://fuuno.net/web02/range_style/range_style.html
 */
input.simple-range {
  /* 標準 css を解除。 */
  appearance: none;

  height: 13px;
}

/*
 * track のカスタマイズ
 */

/* Safari, Chrome, Edge */
input.simple-range::-webkit-slider-runnable-track {
  background: #ccc;
  height: 4px;
  border-radius: 3px;
  margin: 0px 4px 0px 4px;
}
    
  /* Firefox */
input.simple-range::-moz-range-track {
  background-color: #ccc;
  height: 4px;
  border-radius: 3px;
  margin: 0px 4px 0px 4px;
}

/*
 * thumb のカスタマイズ
 */

/* Safari, Chrome, Edge */
input.simple-range::-webkit-slider-thumb {
  /* 標準 css を解除。 */
  appearance:none;

  /* thumb の形状 */
  background-color: white;
  border: solid 1px #999;
  border-radius: 50%;

  /* webkit 系は thumb が track の下にぶら下がるように描画されるのでその対応。
   * width, height を指定して thumb が track の上下中央に収まるように配置する。
   * その上で scale を使って thumb を拡大して、track の中央にあるように見せる。
   */
  width: 4px;
  height: 4px;
  transform: scale(3.5);
}

/* Firefox */
input.simple-range::-moz-range-thumb {

  /* thumb の形状 */
  background-color: white;
  border: solid 1px #999;
  border-radius: 50%;

  width: 4px;
  height: 4px;
  transform: scale(2.5);
}