/*******************
 2tone
********************/
/* XDT */
#bodyColor .sub .navi .item[data-id="XDT"] .wrap {background: linear-gradient(#ed6c1f 50%, #f4f1e7 50%);}
#bodyColor .sub .navi .item[data-id="XDT"].focus .wrap {box-shadow: 0 0 0 2px #ed6c1f;-webkit-box-shadow: 0 0 0 2px #ed6c1f;-moz-box-shadow: 0 0 0 2px #ed6c1f;}

/* XCF */
#bodyColor .sub .navi .item[data-id="XCF"] .wrap {background: linear-gradient(#221815 50%, #b60014 50%);}
#bodyColor .sub .navi .item[data-id="XCF"].focus .wrap {box-shadow: 0 0 0 2px #b60014;-webkit-box-shadow: 0 0 0 2px #b60014;-moz-box-shadow: 0 0 0 2px #b60014;}

/* XCK */
#bodyColor .sub .navi .item[data-id="XCK"] .wrap {background: linear-gradient(#f6edd9 50%, #853c2d 50%);}
#bodyColor .sub .navi .item[data-id="XCK"].focus .wrap {box-shadow: 0 0 0 2px #853c2d;-webkit-box-shadow: 0 0 0 2px #853c2d;-moz-box-shadow: 0 0 0 2px #853c2d;}

/* XCH */
#bodyColor .sub .navi .item[data-id="XCH"] .wrap {background: linear-gradient(#853c2d 50%, #b0ced3 50%);}
#bodyColor .sub .navi .item[data-id="XCH"].focus .wrap {box-shadow: 0 0 0 2px #853c2d;-webkit-box-shadow: 0 0 0 2px #853c2d;-moz-box-shadow: 0 0 0 2px #853c2d;}

/* XCJ */
#bodyColor .sub .navi .item[data-id="XCJ"] .wrap {background: linear-gradient(#853c2d 50%, #f6edd9 50%);}
#bodyColor .sub .navi .item[data-id="XCJ"].focus .wrap {box-shadow: 0 0 0 2px #853c2d;-webkit-box-shadow: 0 0 0 2px #853c2d;-moz-box-shadow: 0 0 0 2px #853c2d;}

/* XFS */
#bodyColor .sub .navi .item[data-id="XFS"] .wrap {background: linear-gradient(#231916 50%, #403a3a 50%);}
#bodyColor .sub .navi .item[data-id="XFS"].focus .wrap {box-shadow: 0 0 0 2px #231916;-webkit-box-shadow: 0 0 0 2px #231916;-moz-box-shadow: 0 0 0 2px #231916;}

/* XFS */
#bodyColor .sub .navi .item[data-id="XFS"] .wrap {background: linear-gradient(#231916 50%, #403a3a 50%);}
#bodyColor .sub .navi .item[data-id="XFS"].focus .wrap {box-shadow: 0 0 0 2px #231916;-webkit-box-shadow: 0 0 0 2px #231916;-moz-box-shadow: 0 0 0 2px #231916;}

/* XFL */
#bodyColor .sub .navi .item[data-id="XFL"] .wrap {background: linear-gradient(#f4f1e7 50%, #e99aa6 50%);}
#bodyColor .sub .navi .item[data-id="XFL"].focus .wrap {box-shadow: 0 0 0 2px #e99aa6;-webkit-box-shadow: 0 0 0 2px #e99aa6;-moz-box-shadow: 0 0 0 2px #e99aa6;}

/* XFK */
#bodyColor .sub .navi .item[data-id="XFK"] .wrap {background: linear-gradient(#f4f1e7 50%, #b0ced3 50%);}
#bodyColor .sub .navi .item[data-id="XFK"].focus .wrap {box-shadow: 0 0 0 2px #b0ced3;-webkit-box-shadow: 0 0 0 2px #b0ced3;-moz-box-shadow: 0 0 0 2px #b0ced3;}

/* XFF */
#bodyColor .sub .navi .item[data-id="XFF"] .wrap {background: linear-gradient(#f4f1e7 50%, #231916 50%);}
#bodyColor .sub .navi .item[data-id="XFF"].focus .wrap {box-shadow: 0 0 0 2px #231916;-webkit-box-shadow: 0 0 0 2px #231916;-moz-box-shadow: 0 0 0 2px #231916;}

/* XFH */
#bodyColor .sub .navi .item[data-id="XFH"] .wrap {background: linear-gradient(#e99aa6 50%, #f4f1e7 50%);}
#bodyColor .sub .navi .item[data-id="XFH"].focus .wrap {box-shadow: 0 0 0 2px #e99aa6;-webkit-box-shadow: 0 0 0 2px #e99aa6;-moz-box-shadow: 0 0 0 2px #e99aa6;}

/* XDC */
#bodyColor .sub .navi .item[data-id="XDC"] .wrap {background: linear-gradient(#853c2d 50%, #7a815d 50%);}
#bodyColor .sub .navi .item[data-id="XDC"].focus .wrap {box-shadow: 0 0 0 2px #7a815d;-webkit-box-shadow: 0 0 0 2px #7a815d;-moz-box-shadow: 0 0 0 2px #7a815d;}

/* XFJ */
#bodyColor .sub .navi .item[data-id="XFJ"] .wrap {background: linear-gradient(#f4f1e7 50%, #853c2d 50%);}
#bodyColor .sub .navi .item[data-id="XFJ"].focus .wrap {box-shadow: 0 0 0 2px #853c2d;-webkit-box-shadow: 0 0 0 2px #853c2d;-moz-box-shadow: 0 0 0 2px #853c2d;}


/*******************
 1color
********************/
/* QBB */
#bodyColor .sub .navi .item[data-id="QBB"] .wrap {background-color: #f5f2e8;}
#bodyColor .sub .navi .item[data-id="QBB"].focus .wrap {background-color: #f5f2e8;box-shadow: 0 0 0 2px #f5f2e8;-webkit-box-shadow: 0 0 0 2px #f5f2e8;-moz-box-shadow: 0 0 0 2px #f5f2e8;}

/* KBV */
#bodyColor .sub .navi .item[data-id="KBV"] .wrap {background-color: #b5b6b6;}
#bodyColor .sub .navi .item[data-id="KBV"].focus .wrap {background-color: #b5b6b6;box-shadow: 0 0 0 2px #b5b6b6;-webkit-box-shadow: 0 0 0 2px #b5b6b6;-moz-box-shadow: 0 0 0 2px #b5b6b6;}

/* GAS */
#bodyColor .sub .navi .item[data-id="GAS"] .wrap {background-color: #221815;}
#bodyColor .sub .navi .item[data-id="GAS"].focus .wrap {background-color: #221815;box-shadow: 0 0 0 2px #221815;-webkit-box-shadow: 0 0 0 2px #221815;-moz-box-shadow: 0 0 0 2px #221815;}

/* NBR */
#bodyColor .sub .navi .item[data-id="NBR"] .wrap {background-color: #b60014;}
#bodyColor .sub .navi .item[data-id="NBR"].focus .wrap {background-color: #b60014;box-shadow: 0 0 0 2px #b60014;-webkit-box-shadow: 0 0 0 2px #b60014;-moz-box-shadow: 0 0 0 2px #b60014;}

/* DAM */
#bodyColor .sub .navi .item[data-id="DAM"] .wrap {background-color: #adccce;}
#bodyColor .sub .navi .item[data-id="DAM"].focus .wrap {background-color: #adccce;box-shadow: 0 0 0 2px #adccce;-webkit-box-shadow: 0 0 0 2px #adccce;-moz-box-shadow: 0 0 0 2px #adccce;}

/* NBS */
#bodyColor .sub .navi .item[data-id="NBS"] .wrap {background-color: #e296a1;}
#bodyColor .sub .navi .item[data-id="NBS"].focus .wrap {background-color: #e296a1;box-shadow: 0 0 0 2px #e296a1;-webkit-box-shadow: 0 0 0 2px #e296a1;-moz-box-shadow: 0 0 0 2px #e296a1;}

/* CBA */
#bodyColor .sub .navi .item[data-id="CBA"] .wrap {background-color: #853c2d;}
#bodyColor .sub .navi .item[data-id="CBA"].focus .wrap {background-color: #853c2d;box-shadow: 0 0 0 2px #853c2d;-webkit-box-shadow: 0 0 0 2px #853c2d;-moz-box-shadow: 0 0 0 2px #853c2d;}

/* EBT */
#bodyColor .sub .navi .item[data-id="EBT"] .wrap {background-color: #ed6d1e;}
#bodyColor .sub .navi .item[data-id="EBT"].focus .wrap {background-color: #ed6d1e;box-shadow: 0 0 0 2px #ed6d1e;-webkit-box-shadow: 0 0 0 2px #ed6d1e;-moz-box-shadow: 0 0 0 2px #ed6d1e;}

/* HAK */
#bodyColor .sub .navi .item[data-id="HAK"] .wrap {background-color: #f7eeda;}
#bodyColor .sub .navi .item[data-id="HAK"].focus .wrap {background-color: #f7eeda;box-shadow: 0 0 0 2px #f7eeda;-webkit-box-shadow: 0 0 0 2px #f7eeda;-moz-box-shadow: 0 0 0 2px #f7eeda;}

/* RCH */
#bodyColor .sub .navi .item[data-id="RCH"] .wrap {background-color: #213465;}
#bodyColor .sub .navi .item[data-id="RCH"].focus .wrap {background-color: #213465;box-shadow: 0 0 0 2px #213465;-webkit-box-shadow: 0 0 0 2px #213465;-moz-box-shadow: 0 0 0 2px #213465;}

/* LAL */
#bodyColor .sub .navi .item[data-id="LAL"] .wrap {background-color: #5d4381;}
#bodyColor .sub .navi .item[data-id="LAL"].focus .wrap {background-color: #5d4381;box-shadow: 0 0 0 2px #5d4381;-webkit-box-shadow: 0 0 0 2px #5d4381;-moz-box-shadow: 0 0 0 2px #5d4381;}

/* KBW */
#bodyColor .sub .navi .item[data-id="KBW"] .wrap {background-color: #3f3b3a;}
#bodyColor .sub .navi .item[data-id="KBW"].focus .wrap {background-color: #3f3b3a;box-shadow: 0 0 0 2px #3f3b3a;-webkit-box-shadow: 0 0 0 2px #3f3b3a;-moz-box-shadow: 0 0 0 2px #3f3b3a;}

/* JAM */
#bodyColor .sub .navi .item[data-id="JAM"] .wrap {background-color: #7a815d;}
#bodyColor .sub .navi .item[data-id="JAM"].focus .wrap {background-color: #7a815d;box-shadow: 0 0 0 2px #7a815d;-webkit-box-shadow: 0 0 0 2px #7a815d;-moz-box-shadow: 0 0 0 2px #7a815d;}

/* QBA */
#bodyColor .sub .navi .item[data-id="QBA"] .wrap {background-color: #eeefef;}
#bodyColor .sub .navi .item[data-id="QBA"].focus .wrap {background-color: #eeefef;box-shadow: 0 0 0 2px #eeefef;-webkit-box-shadow: 0 0 0 2px #eeefef;-moz-box-shadow: 0 0 0 2px #eeefef;}


#bodyColor .sub .navi .item .wrap {
	padding-top: 0%;
	margin: auto;
	width: 3.5vw;
	height: 3.5vw;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
}
#bodyColor .sub .navi .item.focus .wrap {
	padding-top: 0%;
	margin: auto;
	border: solid 3px #fff;
	width: 3.5vw;
	height: 3.5vw;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
}

@media screen and (max-width: 580px) {
	#bodyColor .sub .navi .item .wrap {
		width: 9.3vw;
		height: 9.3vw;
	}
	#bodyColor .sub .navi .item.focus .wrap {
		width: 9.3vw;
		height: 9.3vw;
	}
}