* {
  box-sizing: border-box;
}
.input-range {
  -webkit-appearance: none; /* これ無しだとスタイルがほぼ全く反映されないので注意*/
  appearance: none;
  cursor: pointer; /* カーソルを分かりやすく*/
  /*background: #8acdff;  バーの背景色*/
  /*background: #000000;*/
  background-image: url(slider.png);
  background-repeat: repeat-x;
  height: 10px; /*バーの高さ*/
  width: 70%; /* スライダーの幅*/
  border-radius: 10px;  /* バーの端の丸み*/
  border: solid 3px #dff1ff; /* バーまわりの線*/
  border: solid 6px #fff; /*バーまわりの線*/
  outline: 0; /* アウトラインを消して代わりにfocusのスタイルをあてる */
  &:focus {
    box-shadow: 0 0 3px rgb(0, 161, 255);
  }
  /* -webkit-向けのつまみ*/
  &::-webkit-slider-thumb {
    -webkit-appearance: none; /* デフォルトのつまみのスタイルを解除*/
    background: #53aeff; /* 背景色*/
    background: #ff4500; /* 背景色*/
    width: 20px; /* 幅*/
    height: 20px; /* 高さ*/
    border-radius: 50%; /* 円形に*/
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影*/
  }
  /* -moz-向けのつまみ*/
  &::-moz-range-thumb {
    background: #53aeff; /* 背景色*/
    width: 20px; /* 幅*/
    height: 20px; /* 高さ*/
    border-radius: 50%; /* 円形に*/
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影*/
    border: none; /* デフォルトの線を消す*/
  }
  /* Firefoxで点線が周りに表示されてしまう問題の解消*/
  &::-moz-focus-outer {
    border: 0;
  }
  /* つまみをドラッグしているときのスタイル*/
  &:active::-webkit-slider-thumb {
    box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
  }
}