.cp_menu {
	/*max-width: 360px;*/
	width:auto;
	margin: 0 auto;
	padding: 0;
}



.cp_menu a {
	display: block;
	padding: 10px;
	text-decoration: none;
	color: #000000;
	line-height: 1;
}
.cp_menu a:hover {
	background-color: #dcdcdc;
	color:#ff0000;
}
.cp_menu label {
	display: block;
	position:relative;
	margin: 0 0 1px 0;
	padding: 12px 12px 12px 32px;
	line-height: 1;
	color: #fff;
	background: #696969;
	cursor: pointer;
}






.cp_menu label::before {
	position: absolute;
	content: '▽';
	color: #fff;
	left: 0.5em;
	top: 25%;
}
.cp_menu input {
	display: none;
}
.cp_menu ul {
	margin: 0;
	padding: 0;
	background: #f4f4f4;
	list-style: none;
}
.cp_menu li {
	overflow-y: hidden;
	max-height: 0;
	transition: all 0.5s;
}


/*リストが増えたらULごとに追加してください*/
#cp_menu_bar1:checked ~ #link1 li,
#cp_menu_bar2:checked ~ #link2 li,
#cp_menu_bar3:checked ~ #link3 li,
#cp_menu_bar4:checked ~ #link4 li,
#cp_menu_bar5:checked ~ #link5 li,
#cp_menu_bar6:checked ~ #link6 li,
#cp_menu_bar7:checked ~ #link7 li,
#cp_menu_bar8:checked ~ #link8 li,
#cp_menu_bar9:checked ~ #link9 li,
#cp_menu_bar10:checked ~ #link10 li,
#cp_menu_bar11:checked ~ #link11 li,
#cp_menu_bar12:checked ~ #link12 li,
#cp_menu_bar13:checked ~ #link13 li,
#cp_menu_bar14:checked ~ #link14 li,
#cp_menu_bar15:checked ~ #link15 li,
#cp_menu_bar16:checked ~ #link16 li,
#cp_menu_bar17:checked ~ #link17 li {
	max-height: 46px;
	opacity: 1;
}