<div class="cp_ipradio">
	<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_ipradio {
	width: 90%;
	margin: 2em auto;
	text-align: left;
}
.cp_ipradio label {
	position: relative;
	display: block;
	width: 100%;
	margin: 2px 0 0;
	padding: 10px 0;
}
.cp_ipradio label input[type='radio'] {
	position: relative;
	z-index: 1;
	display: inline-block;
	float: left;
	margin-top: 3px;
	margin-right: 15px;
}
.cp_ipradio label input[type='radio']:checked + div span {
	position: absolute;
	top: -5px;
	left: 100%;
	display: inline-block;
	visibility: visible;
	clear: both;
	margin: 0 0 0 20px;
	padding: 8px 15px;
	transition: transform 200ms ease;
	transform: translateX(0px);
	text-align: center;
	white-space: nowrap;
	color: #ffffff;
	border-radius: 4px;
	background-color: rgba(34, 34, 34, 0.9);
	box-shadow: 0 0 10px rgba(34, 34, 34, 0.2);
}
.cp_ipradio label input[type='radio']:checked + div span:before {
	position: absolute;
	top: 4px;
	left: -1px;
	content: '';
	transform: rotate(45deg);
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(34, 34, 34, 0.9);
}
.cp_ipradio label div {
	position: relative;
	display: inline-block;
}
.cp_ipradio label div span {
	position: absolute;
	visibility: hidden;
	transition: transform 200ms ease;
	transform: translateX(-10px);
}
.cp_ipradio label:nth-of-type(1) input[type='radio']:checked + div span {
	background-color: #2e9b72;
}
.cp_ipradio label:nth-of-type(1) input[type='radio']:checked + div span:before {
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(46,156,114, 0.9);
}
.cp_ipradio label:nth-of-type(2) input[type='radio']:checked + div span {
	background-color: #36509a;
}
.cp_ipradio label:nth-of-type(2) input[type='radio']:checked + div span:before {
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(54,80,154, 0.9);
}
.cp_ipradio label:nth-of-type(3) input[type='radio']:checked + div span {
	background-color: #f7c735;
}
.cp_ipradio label:nth-of-type(3) input[type='radio']:checked + div span:before {
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(247,199,53, 0.9);
}
.cp_ipradio label:nth-of-type(4) input[type='radio']:checked + div span {
	background-color: #a62e7a;
}
.cp_ipradio label:nth-of-type(4) input[type='radio']:checked + div span:before {
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(166,46,122, 0.9);
}
.cp_ipradio label:nth-of-type(5) input[type='radio']:checked + div span {
	background-color: #da3c41;
}
.cp_ipradio label:nth-of-type(5) input[type='radio']:checked + div span:before {
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(218,60,65, 0.9);
}