@charset "UTF-8";
/*
	bace
=========================================*/
body {
	background:url(../images/page_back.gif) #fff repeat-x left top !important;
}

#header,
#main {
    position:static !important;
}
#header {
    height:auto !important;
    z-index:auto !important;
}
#main {
	padding:0 !important;
}

.bbarMain {
	width:940px !important;
	background:url(../images/contents_back.gif) repeat-y left top !important;
	margin:0 auto !important;
}
.bbarFooter {
	background:none !important;
}

/*
	beauty bar header
=========================================*/
.bbarHeader {
	width:940px !important;
	margin:0 auto !important;
	background:url(../images/contents_back.gif) repeat-y left top !important;
}
.bbarHeader .clr {
	padding:0 57px 6px 27px;
	background:url(../images/binder_top.gif) no-repeat left top;
}
.bbarHeader h1 {
	width:122px;
	float:left;
}
.bbarHeader ul {
	padding-top:77px;
	float:right;
	width:633px;
}
.bbarHeader ul li {
	float:left;
	width:200px;
}
.bbarHeader ul li.gmenuLeft {
	margin-right:24px;
}
.bbarHeader ul li.gmenuCenter {
	margin-right:9px;
}


/*
	beauty bar add
=========================================*/
.bbarMain #bbarAdd {
	width:880px;
	height:340px;
	position:relative;
	margin:0 0 27px 30px;
	background:url(../images/index/main_visual.jpg) no-repeat left top;
}
#bbarAdd div,
#bbarAdd h2,
#bbarAdd p,
#bbarAdd ul {
	position:absolute;
	z-index:0;
}
#bbarAdd .doveMark {
	left:17px;
	top:27px;
}
#bbarAdd p {
	left:346px;
	top:66px;
}
#bbarAdd h2 {
	left:343px;
	top:107px;
}
#bbarAdd .present {
	left:735px;
	top:35px;
	z-index:1;
}
#bbarAdd ul {
	left:330px;
	top:243px;
}
#bbarAdd ul li {
	float:left;
}
#bbarAdd ul li.secretLeft {
	margin-right:20px;
}
#bbarAdd ul li.secretCenter {
	margin-right:20px;
}
#bbarAdd .beautyBar {
	left:16px;
	top:297px;
}

/*
	beauty bar contents box
=========================================*/
.bbarMain #bbarContentsBox {
	width:880px;
	margin:0 0 40px 30px;
	padding-top:38px;
	background:url(../images/dv_line.gif) repeat-x left top;
}

#bbarContentsBox .developerBox01 {
	padding:0 23px 30px 31px;
}
#bbarContentsBox .developerBox01 .left {
	width:500px;
	float:left;
}
#bbarContentsBox .developerBox01 .right {
	width:297px;
	float:right;
}
#bbarContentsBox .developerBox01 .left h3 {
	padding-bottom:13px;
}
#bbarContentsBox .developerBox01 .left dt {
	padding-bottom:10px;
}
#bbarContentsBox .developerBox01 .left dd {
	font-size:12px;
	line-height:20px;
	color:#4c4c4c;
}

#bbarContentsBox .developerBox02 {
	padding:0 30px 0 12px;
}
#bbarContentsBox .developerBox02 .left {
	width:420px;
	float:left;
}
#bbarContentsBox .developerBox02 .right {
	width:380px;
	float:right;
}
#bbarContentsBox .developerBox02 .left dl {
	padding:4px 0 10px 19px;
}
#bbarContentsBox .developerBox02 .left dt {
	padding-bottom:10px;
}
#bbarContentsBox .developerBox02 .left dd {
	font-size:12px;
	line-height:20px;
	color:#4c4c4c;
}

#bbarContentsBox .preciousBox01 {
	padding:0 29px 18px 31px;
}
#bbarContentsBox .preciousBox01 .left {
	width:622px;
	float:left;
}
#bbarContentsBox .preciousBox01 .right {
	width:122px;
	float:right;
}
#bbarContentsBox .preciousBox01 .left h3 {
	padding-bottom:18px;
}
#bbarContentsBox .preciousBox02 {
	padding:0 29px 0 27px;
}
#bbarContentsBox .preciousBox02 .left {
	width:270px;
	float:left;
}
#bbarContentsBox .preciousBox02 .right {
	width:511px;
	float:right;
}
#bbarContentsBox .preciousBox02 .left dt {
	padding-bottom:5px;
}
#bbarContentsBox .preciousBox02 .left dd {
	padding-left:4px;
	font-size:12px;
	line-height:20px;
	color:#4c4c4c;
}

#bbarContentsBox .historyBox {
	padding:0 29px 0 31px;
}
#bbarContentsBox .historyBox .left {
	width:290px;
	float:left;
}
#bbarContentsBox .historyBox .right {
	width:490px;
	float:right;
	padding-top:3px;
}
#bbarContentsBox .historyBox .left h3 {
	padding-bottom:14px;
}
#bbarContentsBox .historyBox .left dt {
	padding-bottom:16px;
}
#bbarContentsBox .historyBox .left dd {
	font-size:12px;
	line-height:20px;
	color:#4c4c4c;
}
#bbarContentsBox .historyBox .right ul.pacPh01 {
	padding-bottom:15px;
	margin-bottom:20px;
	border-bottom:solid 1px #ccc;
}
#bbarContentsBox .historyBox .right ul.pacPh02 {
	padding-bottom:17px;
}
#bbarContentsBox .historyBox .right ul.pacPh01 li,
#bbarContentsBox .historyBox .right ul.pacPh02 li {
	float:left;
}

/*
	wash mistake box
=========================================*/
.bbarMain #mistakeBox {
	width:880px;
	margin-left:30px;
	padding-bottom:50px;
	background:url(../images/wash/mistake_back.jpg) no-repeat 9px 78px;

}
#mistakeBox ul {
	margin-bottom:49px;
	padding-top:5px;
}
#mistakeBox li {
	float:left;
}
#mistakeBox .hadaBox {
	width:822px;
	margin-left:29px;
}
#mistakeBox .hadaBox .left {
	width:350px;
	float:left;
}
#mistakeBox .hadaBox .right {
	width:371px;
	float:right;
}
#mistakeBox .hadaBox .left h3 {
	padding:8px 0 20px 0;
}

/*
	skin care box
=========================================*/
.bbarMain #skinCareBox {
	margin-left:59px;
	width:820px;
	padding:40px 0;
	border-top:dotted 1px #999;
}
#skinCareBox .step {
	width:588px;
	float:left;
}
#skinCareBox .skincare {
	width:202px;
	float:right;
	background-color:#c5e3fb;
}

#skinCareBox .step h3 {
	padding:9px 0 10px 0;
}
#skinCareBox .step ul.stepBox01 {
	padding-top:19px;
	width:207px;
	float:left;
}
#skinCareBox .step ul.stepBox01 li {
	padding-left:3px;
}
#skinCareBox .step ul.stepBox02 {
	padding-top:26px;
	width:176px;
	float:left;
}

#skinCareBox .step li.padB01 {
	padding-bottom:28px;
}
#skinCareBox .step li.padB02 {
	padding-bottom:31px;
}
#skinCareBox .step li.padB03 {
	padding-bottom:34px;
}
#skinCareBox .step .illustBox {
	width:205px;
	float:left;
}

#skinCareBox .skincare h4 {
	padding:12px 0 19px 0;
}
#skinCareBox .skincare ul {
	padding:0 0 12px 14px;
	background:url(../images/wash/skincare_end.gif) no-repeat left bottom;
}
#skinCareBox .skincare li {
	padding-bottom:18px;
}

/*
	present box
=========================================*/
#bbarContentsBox .presentBox {
	width:879px;
	background-color:#2c9ff0;
	margin-top:-10px;
}
#bbarContentsBox .presentBox .presentTitle {
	padding:9px 0 2px 80px;
	background:url(../images/wash/present_top.gif) no-repeat left top;
}
#bbarContentsBox .presentBox .presentTitle .leftImg {
	width:100px;
	float:left;
	padding-top:15px;
}
#bbarContentsBox .presentBox .presentTitle h3 {
	width:547px;
	float:left;
	padding-top:15px;
}
#bbarContentsBox .presentBox .presentTitle .rightImg {
	width:121px;
	float:left;
}

#bbarContentsBox .presentBox .presentEx {
	width:821px;
	margin-left:29px;
	background-color:#fff;
}
#bbarContentsBox .presentBox .presentEx .preTitle {
	height:107px;
	padding-left:31px;
	background:url(../images/wash/present_back.jpg) no-repeat right top;
}
#bbarContentsBox .presentBox .presentEx .preTitle h4 {
	padding:21px 0 4px 0;
}
#bbarContentsBox .presentBox .presentEx .preTitle p {
	color:#4d4d4d;
	font-size:10px;
}

#bbarContentsBox .presentBox .presentEx dl {
	margin:0 30px 0px 31px;
	padding:15px 24px 12px 24px;
	border:solid 2px #a7d5f9;
}
#bbarContentsBox .presentBox .presentEx dt {
	padding-bottom:10px;
	color:#2d9ff0;
	font-weight:bold;
}
#bbarContentsBox .presentBox .presentEx dd li {
	font-size:12px;
	line-height:18px;
	color:#4d4d4d;
	padding-left:1em;
	text-indent:-1em;
}
#bbarContentsBox .presentBox .presentEx dd li a {
	text-decoration:underline;
}

#bbarContentsBox .presentBox .presentEnd {
	padding:0 0 4px 295px;
	background:url(../images/wash/present_end.gif) #fff no-repeat left top;
}


/*
	beauty bar contents end
=========================================*/
.bbarMain .bbarContentsEnd {
	background:url(../images/binder_end.gif) no-repeat left bottom;
	height:10px;
}

.next_area {
	text-align:center;
	margin:15px 0 0 0 ;
}

/*
	float clear
=========================================*/
.clr,
.bbarMain .bbarHeader,
.bbarHeader ul,
#bbarAdd ul,
#bbarContentsBox .developerBox01,
#bbarContentsBox .developerBox02,
#bbarContentsBox .preciousBox01,
#bbarContentsBox .preciousBox02,
#bbarContentsBox .historyBox,
#bbarContentsBox .historyBox .right ul,
#mistakeBox ul,
#mistakeBox .hadaBox,
.bbarMain #skinCareBox,
#bbarContentsBox .presentBox .presentTitle {
    overflow: hidden;
}
.clr:after,
.bbarMain .bbarHeader:after,
.bbarHeader ul:after,
#bbarAdd ul:after,
#bbarContentsBox .developerBox01:after,
#bbarContentsBox .developerBox02:after,
#bbarContentsBox .preciousBox01:after,
#bbarContentsBox .preciousBox02:after,
#bbarContentsBox .historyBox:after,
#bbarContentsBox .historyBox .right ul:after,
#mistakeBox ul:after,
#mistakeBox .hadaBox:after,
.bbarMain #skinCareBox:after,
#bbarContentsBox .presentBox .presentTitle:after {
    content: "";
    display: block;
    clear: both;
    height: 0px;
    overflow: hidden;
}
* html .clr,
* html .bbarMain .bbarHeader,
* html .bbarHeader ul,
* html #bbarAdd ul,
* html #bbarContentsBox .developerBox01,
* html #bbarContentsBox .developerBox02,
* html #bbarContentsBox .preciousBox01,
* html #bbarContentsBox .preciousBox02,
* html #bbarContentsBox .historyBox,
* html #bbarContentsBox .historyBox ul .pacPh01,
* html #mistakeBox ul,
* html #mistakeBox .hadaBox,
* html .bbarMain #skinCareBox,
* html #bbarContentsBox .presentBox .presentTitle {
    height: 1em;
    overflow: visible;
}