<div class="cp_ipradio10">
  <label>
    <input type="radio" name="cpipr10" checked>
    <span class="option-input"></span>
    <span class="text">ネコ</span>
  </label>
  <label>
    <input type="radio" name="cpipr10">
    <span class="option-input"></span>
    <span class="text">イヌ</span>
  </label>
  <label>
    <input type="radio" name="cpipr10">
    <span class="option-input"></span>
    <span class="text">ウサギ</span>
  </label>
</div>

.cp_ipradio10 {
  margin: 6em 2em;
}
/*通常時のラベルの設定*/
.cp_ipradio10 label {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 12px 0;
  cursor: pointer;
}
/*デフォルトのラジオボタンの設定*/
.cp_ipradio10 input[type=radio] {
  opacity: 0;
}
/* ラジオボタンの設定 */
.cp_ipradio10 .option-input {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid #666666;
  border-radius: 50%;
  margin-right: 16px;
}
.cp_ipradio10 .option-input::before,
.cp_ipradio10 .option-input::after {
  position: absolute;
  content: '';
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  transform: scale(0);
  transform-origin: center center;
}
.cp_ipradio10 .option-input:before {
  background: #666666;
  opacity: 0;
  transition: .3s;
}
.cp_ipradio10 .option-input::after {
  background: #da3c41;
  opacity: .4;
  transition: .6s;
}
/* テキスト設定 */
.cp_ipradio10 .text {
  color: #666666;
}
/*checked時のサイズと色の設定*/
.cp_ipradio10 input:checked + .option-input::before {
  opacity: 1;
  transform: scale(.6);
}
/*focus・hover時のサイズと色の設定*/
.cp_ipradio10 input:hover + .option-input,
.cp_ipradio10 input:focus + .option-input {
  border: 2px solid #da3c41;
}
.cp_ipradio10 input:hover + .option-input:before,
.cp_ipradio10 input:focus + .option-input:before {
  background: #da3c41;
}
.cp_ipradio10 input:hover ~ .text {
  color: #da3c41;
}
.cp_ipradio10 input:focus + .option-input::after,
.cp_ipradio10 input:active + .option-input::after {
  opacity: .1;
  transform: scale(2.6);
}