@charset "utf-8";
/* CSS Document */

#colorpallet ul{
	overflow:hidden;
	margin:0;
	padding:0;
}
#colorpallet li{
	list-style:none;
	float:left;
	margin:0 4px 4px 0;
	width:21px;
	height:21px;
}
#colorpallet input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
}
#colorpallet input[type=checkbox] + label {
    position: relative;
    display: inline-block;
    margin-right: 12px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
}
 
@media (min-width: 1px) {
#colorpallet input[type=checkbox] {
	display: none;
	margin: 0;
}
/* 通常時 */
#colorpallet input[type=checkbox] + label::before {
	content: "";
	position: absolute;
	top: -13px;
	left: 0;
	display: block;
	width: 21px;
	height: 21px;
	margin-top: 0px;
}
#colorpallet input[type=checkbox].color01 + label::before{
	background:url(../images/color.png) 0 0;
}
#colorpallet input[type=checkbox].color02 + label::before{
	background:url(../images/color.png) 0 -30px;
}
#colorpallet input[type=checkbox].color03 + label::before{
	background:url(../images/color.png) 0 -60px;
}
#colorpallet input[type=checkbox].color04 + label::before{
	background:url(../images/color.png) 0 -90px;
}
#colorpallet input[type=checkbox].color05 + label::before{
	background:url(../images/color.png) 0 -120px;
}
#colorpallet input[type=checkbox].color06 + label::before{
	background:url(../images/color.png) 0 -150px;
}
#colorpallet input[type=checkbox].color07 + label::before{
	background:url(../images/color.png) 0 -180px;
}
#colorpallet input[type=checkbox].color08 + label::before{
	background:url(../images/color.png) 0 -210px;
}
#colorpallet input[type=checkbox].color09 + label::before{
	background:url(../images/color.png) 0 -240px;
}
#colorpallet input[type=checkbox].color10 + label::before{
	background:url(../images/color.png) 0 -270px;
}
#colorpallet input[type=checkbox].color11 + label::before{
	background:url(../images/color.png) 0 -300px;
}
#colorpallet input[type=checkbox].color12 + label::before{
	background:url(../images/color.png) 0 -330px;
}
#colorpallet input[type=checkbox].color13 + label::before{
	background:url(../images/color.png) 0 -360px;
}
#colorpallet input[type=checkbox].color14 + label::before{
	background:url(../images/color.png) 0 -390px;
}
#colorpallet input[type=checkbox].color15 + label::before{
	background:url(../images/color.png) 0 -420px;
}
#colorpallet input[type=checkbox].color16 + label::before{
	background:url(../images/color.png) 0 -450px;
}
#colorpallet input[type=checkbox].color17 + label::before{
	background:url(../images/color.png) 0 -480px;
}
#colorpallet input[type=checkbox].color18 + label::before{
	background:url(../images/color.png) 0 -510px;
}
#colorpallet input[type=checkbox].color19 + label::before{
	background:url(../images/color.png) 0 -540px;
}
#colorpallet input[type=checkbox].color20 + label::before{
	background:url(../images/color.png) 0 -570px;
}
#colorpallet input[type=checkbox].color21 + label::before{
	background:url(../images/color.png) 0 -600px;
}
#colorpallet input[type=checkbox].color22 + label::before{
	background:url(../images/color.png) 0 -630px;
}

/* hover時 */
#colorpallet input[type=checkbox]:checked + label::after {
	position: absolute;
	content: "";
	top: -13px;
	left: 0px;
	width: 21px;
	height: 21px;
	display: block;
}
#colorpallet input[type=checkbox].color01:checked + label::after{
	background:url(../images/color.png) -30px 0;
}
#colorpallet input[type=checkbox].color02:checked + label::after{
	background:url(../images/color.png) -30px -30px;
}
#colorpallet input[type=checkbox].color03:checked + label::after{
	background:url(../images/color.png) -30px -60px;
}
#colorpallet input[type=checkbox].color04:checked + label::after{
	background:url(../images/color.png) -30px -90px;
}
#colorpallet input[type=checkbox].color05:checked + label::after{
	background:url(../images/color.png) -30px -120px;
}
#colorpallet input[type=checkbox].color06:checked + label::after{
	background:url(../images/color.png) -30px -150px;
}
#colorpallet input[type=checkbox].color07:checked + label::after{
	background:url(../images/color.png) -30px -180px;
}
#colorpallet input[type=checkbox].color08:checked + label::after{
	background:url(../images/color.png) -30px -210px;
}
#colorpallet input[type=checkbox].color09:checked + label::after{
	background:url(../images/color.png) -30px -240px;
}
#colorpallet input[type=checkbox].color10:checked + label::after{
	background:url(../images/color.png) -30px -270px;
}
#colorpallet input[type=checkbox].color11:checked + label::after{
	background:url(../images/color.png) -30px -300px;
}
#colorpallet input[type=checkbox].color12:checked + label::after{
	background:url(../images/color.png) -30px -330px;
}
#colorpallet input[type=checkbox].color13:checked + label::after{
	background:url(../images/color.png) -30px -360px;
}
#colorpallet input[type=checkbox].color14:checked + label::after{
	background:url(../images/color.png) -30px -390px;
}
#colorpallet input[type=checkbox].color15:checked + label::after{
	background:url(../images/color.png) -30px -420px;
}
#colorpallet input[type=checkbox].color16:checked + label::after{
	background:url(../images/color.png) -30px -450px;
}
#colorpallet input[type=checkbox].color17:checked + label::after{
	background:url(../images/color.png) -30px -480px;
}
#colorpallet input[type=checkbox].color18:checked + label::after{
	background:url(../images/color.png) -30px -510px;
}
#colorpallet input[type=checkbox].color19:checked + label::after{
	background:url(../images/color.png) -30px -540px;
}
#colorpallet input[type=checkbox].color20:checked + label::after{
	background:url(../images/color.png) -30px -570px;
}
#colorpallet input[type=checkbox].color21:checked + label::after{
	background:url(../images/color.png) -30px -600px;
}
#colorpallet input[type=checkbox].color22:checked + label::after{
	background:url(../images/color.png) -30px -630px;
}

}