@charset "UTF-8";

/*////////////////////////////////////////////////////////

usage

////////////////////////////////////////////////////////*/

.usageTitle {
	width:567px;
	height:57px;
	margin-bottom:20px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}

#oily {
	background:url(../images/usage/oily/h1_tit.jpg) left top no-repeat;
}

#subfusc {
	background:url(../images/usage/subfusc/h1_tit.jpg) left top no-repeat;
}

#wrinkle {
	background:url(../images/usage/wrinkle/h1_tit.jpg) left top no-repeat;
}

#normal {
	background:url(../images/usage/normal/h1_tit.jpg) left top no-repeat;
}

#redskin {
	background:url(../images/usage/redskin/h1_tit.jpg) left top no-repeat;
}

#faceBox,
#faceBox2 {
	width:567px;
	position:relative;
	overflow:hidden;
}

h2 {
	width:567px;
	height:57px;
	margin-bottom:30px;
	background:url(../images/usage/h2_title.jpg) no-repeat left top;
}

h3 {
	width:313px;
	height:37px;
	background:url(../images/usage/h3_title.jpg) no-repeat left top;
}


/* faceBox left 
------------------------------------------------------- */

#faceBox .left {
	width:313px;
	padding-left:4px;
	float:left;
}

#faceLabel {
	width:60px;
	height:16px;
	margin-bottom:7px;
	background:url(../images/usage/label_before.gif);
}

#faceWrapper {
	background:url(../images/usage/arrow_right.gif) repeat-x left center;
}

#faceWrapper img {
	border:1px solid #CCCCCC;
	margin-bottom:20px;
}

.left dl {
	padding:15px 0;
	border-bottom:1px solid #CCCCCC;
	position:relative;
	overflow:hidden;
}

.left dt {
	width:80px;
	float:left;
}

.left dd {
	width:225px;
	font-size:10px;
	float:left;
}

.left dd div.tit {
	margin-bottom:5px;
	font-size:11px;
	font-weight:bold;
}

.stit{
	letter-spacing:-1px;
	font-weight:bold;
	font-size:95%;
}


/* faceBox right 
------------------------------------------------------- */

#faceBox .right {
	width:225px;
	float:right;
}

#faceBox .right img {
	border:1px solid #CCCCCC;
}

.btnMakeup {
	margin-top:12px;
}

.btnMakeup a {
	width:185px;
	height:32px;
	margin:auto;
	background:url(../images/usage/btn_makeup.gif) left top;
	display:block;
}

.step1 {
	margin-bottom:12px;
	padding-bottom:40px;
	background:url(../images/usage/arrow_down.gif) no-repeat center bottom;
}

.label1,
.label2 {
	width:45px;
	height:18px;
	margin-bottom:6px;
}

.label1 {
	background-image:url(../images/usage/label_step1.gif);
}

.label2 {
	background-image:url(../images/usage/label_step2.gif);
}


/* faceBox2 left
------------------------------------------------------- */

#faceBox2 .left {
	width:270px;
	float:left;
}


/* faceBox2 right
------------------------------------------------------- */

#faceBox2 .right {
	width:290px;
	float:right;
}

#labelEyes,
#labelCheeks,
#labelLips,
#labelPoint {
	width:59px;
	height:14px;
	background-repeat:no-repeat;
	background-position:left top;
	padding-bottom:5px;
}

#labelEyes {
	background-image:url(../images/usage/label_eyes.gif);
}

#labelCheeks {
	background-image:url(../images/usage/label_cheeks.gif);
}

#labelLips {
	background-image:url(../images/usage/label_lips.gif);
}

#labelPoint {
	background-image:url(../images/usage/label_point.jpg);
}

.face {
	float:left;
	width:81px;
	margin-bottom:17px;
	border:1px solid #CCCCCC;
}

.itemBox {
	width:200px;
	float:right;
	position:relative;
	overflow:hidden;
}

#faceBox2 dl {
	width:200px;
	position:relative;
	overflow:hidden;
}

#faceBox2 dt {
	width:55px;
	padding-bottom:2px;
	float:left;
}

#faceBox2 dd {
	width:133px;
	padding-bottom:2px;
	font-weight:bold;
	letter-spacing:-1px;
	vertical-align: middle;
	float:right;
}







/* left navigation
------------------------------------------------------- */

#usageLeft01 a {
	background-image:url(../images/usage/lnavi_01.gif);
}

#usageLeft02 a {
	height:34px !important;
	background-image:url(../images/usage/lnavi_02.gif);
}

#usageLeft03 a {
	background-image:url(../images/usage/lnavi_03.gif);
}

#usageLeft04 a {
	height:34px !important;
	background-image:url(../images/usage/lnavi_04.gif);
}

#usageLeft05 a {
	background-image:url(../images/usage/lnavi_05.gif);
}

#leftNavi ul li.current a {
	background-position:right top;
}