<div class="cp_ipradio02">
  <label><input type="radio" class="option-input radio" name="cpipr02" checked />ネコ</label>
  <label><input type="radio" class="option-input radio" name="cpipr02" />イヌ</label>
  <label><input type="radio" class="option-input radio" name="cpipr02" />ウサギ</label>
  <label class="disabled"><input type="radio" class="option-input radio" name="cpipr02" disabled/>トリ</label>
</div>

.cp_ipradio02 label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
/*通常時のラジオボタンの色*/
.cp_ipradio02 .option-input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 20px;
  color: #ffffff;
  background: #d7cbcb;
  cursor: pointer;
  transition: all 0.15s ease-out 0s;
  /*デフォルト値を無効に*/
  border: none;
  outline: none;
  appearance: none;
}
/*hover時のラジオボタンの色*/
.cp_ipradio02 .option-input:hover {
  background: #d6a9a9;
}
/*checked時のラジオボタンの色*/
.cp_ipradio02 .option-input:checked {
  width: 30px;
  height: 30px;
  background: #da3c41;
}
/*checked時のラジオボタンのチェックマーク*/
.cp_ipradio02 .option-input:checked::before {
  position: absolute;
  content: '✔';
}
.cp_ipradio02 .option-input:checked::after {
  position: relative;
  content: '';
  background: #da3c41;
  animation: click-wave 0.8s ease;
}
.cp_ipradio02 .option-input.radio {
  border-radius: 50%;
}
.cp_ipradio02 .option-input.radio::after {
  border-radius: 50%;
}
/*無効の設定*/
.cp_ipradio02 .disabled {
  color: #9e9e9e;
}
.cp_ipradio02 .option-input:disabled {
  cursor: not-allowed;
  background: #b8b7b7;
}
.cp_ipradio02 .option-input:disabled::before {
  position: absolute;
  content: '✖︎';
}
/*クリックした時のアニメーション*/
@keyframes click-wave {
  0% {
    width: 30px;
    height: 30px;
    opacity: 0.35;
  }
  100% {
    transform: scale(8);
    opacity: 0;
  }
}