// リセットCSS（すでに指定済なら不要）
* {
  box-sizing: border-box;
}

// 🚩：重要なポイント
input[type="range"] {
  -webkit-appearance: none; // 🚩これ無しだとスタイルがほぼ全く反映されないので注意
  appearance: none;
  cursor: pointer; // カーソルを分かりやすく
  outline: none; // スライダーのアウトラインは目障りになるので消す
  background: #8acdff; // バーの背景色
  height: 14px; // バーの高さ
  width: 100%; // スライダーの幅
  border-radius: 10px; // バーの端の丸み
  border: solid 3px #dff1ff; // バーまわりの線
  // -webkit-向けのつまみ
  &::-webkit-slider-thumb {
    -webkit-appearance: none; // 🚩デフォルトのつまみのスタイルを解除
    background: #53aeff; // 背景色
    width: 24px; // 幅
    height: 24px; // 高さ
    border-radius: 50%; // 円形に
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); // 影
  }
  // -moz-向けのつまみ
  &::-moz-range-thumb {
    background: #53aeff; // 背景色
    width: 24px; // 幅
    height: 24px; // 高さ
    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);
  }
}