<div class="cp_ipradio01">
  <input type="radio" id="radio1" name="cpipr01" />
  <label for="radio1">ネコ</label>
  <input type="radio" id="radio2" name="cpipr01" />
  <label for="radio2">イヌ</label>
  <input type="radio" id="radio3" name="cpipr01" />
  <label for="radio3">ウサギ</label>
  <input type="radio" id="radio4" name="cpipr01" disabled/>
  <label for="radio4">トリ</label>
</div>

.cp_ipradio01 input[type=radio] {
  display: none;
}
/*focus・hover・active・checked時のラベルの色*/
.cp_ipradio01 label:focus,
.cp_ipradio01 label:hover,
.cp_ipradio01 label:active,
.cp_ipradio01 input:checked + label {
  color: #da3c41;
}
/*focus・hover・active・checked時のラジオボタンの色*/
.cp_ipradio01 label:focus:before,
.cp_ipradio01 label:hover:before,
.cp_ipradio01 label:active:before,
.cp_ipradio01 input:checked + label:before {
  border-color: #da3c41;
  background: #ffffff;
}
/*通常時のラベルの色*/
.cp_ipradio01 label {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1em 1em 1em 3em;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;/*テキストがエリアを超えたら'…'で省略*/
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s ease;
}
/*通常時のラジオボタンの色*/
.cp_ipradio01 label:before {
  position: absolute;
  left: 1em;
  content: '';
  width: 10px;
  height: 10px;
  border: 3px solid #cccccc;
  border-radius: 50%;
}
/*チェック時の設定*/
.cp_ipradio01 input:checked + label:before {
  border-color: #da3c41;
  background: #da3c41;
}
/*無効の設定*/
.cp_ipradio01 input:disabled + label {
  color: rgba(0, 0, 0, 0.5);
  background: #efefef;
  cursor: not-allowed;
}
.cp_ipradio01 input:disabled + label:hover {
  border-color: rgba(0, 0, 0, 0.1);
}
.cp_ipradio01 input:disabled + label:before {
  border-color: #ffffff;
  background: #ffffff;
}