<div class="cp_ipradio08">
  <ul>
    <li class="list_item">
      <input type="radio" class="option-input" name="cpipr08" id="c_rb1" />
      <label for="c_rb1">ネコ</label>
    </li>
    <li class="list_item">
      <input type="radio" class="option-input" name="cpipr08" id="c_rb2" />
      <label for="c_rb2">イヌ</label>
    </li>
    <li class="list_item">
      <input type="radio" class="option-input" name="cpipr08" id="c_rb3" />
      <label for="c_rb3">ウサギ</label>
    </li>
    <li class="list_item">
      <input type="radio" class="option-input" name="cpipr08" id="c_rb4" disabled/>
      <label for="c_rb4">トリ</label>
    </li>
  </ul>
</div>

.cp_ipradio08 {
  margin: 2em auto;
}
.cp_ipradio08 ul {
  list-style: none;
}
.cp_ipradio08 .list_item {
  margin-bottom: 10px;
}
/*ラジオボタンの設定*/
.cp_ipradio08 .option-input {
  display: none;
}
/*ラベルの設定*/
.cp_ipradio08 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s linear;
}
.cp_ipradio08 label::before {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 20px;
  content: '';
  transition: all 0.25s linear;
  border: 4px solid #da3c41;
  border-radius: 50%;
}
/*hover時のテキスト色と動き*/
.cp_ipradio08 .list_item:hover label {
  color: #da3c41;
}
.cp_ipradio08 .list_item:hover label::before {
  margin-right: 40px;
}
/*checked時の設定*/
.cp_ipradio08 .option-input:checked + label {
  color: #da3c41;
}
.cp_ipradio08 .option-input:checked + label::before {
  margin-right: 40px;
  background: #da3c41;
}
/*disabledの設定*/
.cp_ipradio08 .option-input:disabled + label {
  color: #b8b7b7;
  cursor: not-allowed;
}
.cp_ipradio08 .option-input:disabled + label::before {
  border: 4px solid #b8b7b7;
}