<div class="cp_ipradio09">
  <label for="d_rb1">
    <input type="radio" id="d_rb1" name="cpipr09" value="" />
    <div>ネコ<span>猫</span></div>
  </label>
  <label for="d_rb2">
    <input type="radio" id="d_rb2" name="cpipr09" value="" />
    <div>イヌ<span>犬</span></div>
  </label>
  <label for="d_rb3">
    <input type="radio" id="d_rb3" name="cpipr09" value="" />
    <div>ウサギ<span>兎</span></div>
  </label>
  <label for="d_rb4">
    <input type="radio" id="d_rb4" name="cpipr09" value="" />
    <div>トリ<span>鳥</span></div>
  </label>
  <label for="d_rb5">
    <input type="radio" id="d_rb5" name="cpipr09" value="" />
    <div>リス<span>栗鼠</span></div>
  </label>
</div>

.cp_ipradio09 {
  margin: 2em auto;
}
/*ラベルの設定*/
.cp_ipradio09 label {
  position: relative;
  display: flex;
  align-items: center;
}
.cp_ipradio09 label input[type='radio'] {
  margin-right: 15px;
}
/*checked時に出る吹き出しの設定（デフォルト）*/
.cp_ipradio09 label input[type='radio']:checked + div span {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  margin: 0 0 0 20px;
  padding: 2px 8px;
  color: #ffffff;
  background-color: #2e9b72;
  border-radius: 4px;
  visibility: visible;
  transition: transform 200ms ease;
  transform: translateX(0px);
}
.cp_ipradio09 label input[type='radio']:checked + div span:before {
  position: absolute;
  top: 5px;
  left: -5px;
  content: '';
  width: 6px;
  height: 10px;
  background-color: #2e9b72;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
/*checked時に出る吹き出しの設定（動き）*/
.cp_ipradio09 label div {
  position: relative;
}
.cp_ipradio09 label div span {
  visibility: hidden;
  transform: translateX(-10px);
}
/*checked時に出る吹き出しの設定（色）*/
.cp_ipradio09 label:nth-of-type(1) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(1) input[type='radio']:checked + div span:before {
  background-color: #2e9b72;
}
.cp_ipradio09 label:nth-of-type(2) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(2) input[type='radio']:checked + div span:before {
  background-color: #36509a;
}
.cp_ipradio09 label:nth-of-type(3) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(3) input[type='radio']:checked + div span:before {
  background-color: #f7c735;
}
.cp_ipradio09 label:nth-of-type(4) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(4) input[type='radio']:checked + div span:before {
  background-color: #a62e7a;
}
.cp_ipradio09 label:nth-of-type(5) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(5) input[type='radio']:checked + div span:before {
  background-color: #da3c41;
}