@charset "UTF-8";
/* ---------------------------------------------------------------

	sitename: d プログラム｜資生堂
	use for: 肌タイプ診断ページ用

--------------------------------------------------------------- */
/* ----------------------------------------------------------
 *
 * SKIN TYPE
 *
 * ---------------------------------------------------------- */

 /* index.html [肌タイプ診断] */
/* find */
body,html { background-color:transparent; margin:0px;}

.inner　a img, img.opa { border-style:none; outline:none; border:none; }
.inner　img { border:none; vertical-align:bottom; outline:none; vertical-align:bottom; }

#howto1 { width:788px; height:300px !important; min-height:300px; position:relative; background-color:transparent; background:url("../img/product/pop/back1.png") no-repeat;}
#howto2 { width:788px; height:552px !important; min-height:552px; position:relative; background-color:transparent; background:url("../img/product/pop/back10.png") no-repeat;}
#howto3 { width:788px; height:552px !important; min-height:552px; position:relative; background-color:transparent; background:url("../img/product/pop/back10.png") no-repeat;}
#howto4 { width:788px; height:552px !important; min-height:552px; position:relative; background-color:transparent; background:url("../img/product/pop/back10.png") no-repeat;}
#howto5 { width:788px; height:296px !important; min-height:296px; position:relative; background-color:transparent; background:url("../img/product/pop/back5.png") no-repeat;}
#howto6 { width:788px; height:552px !important; min-height:552px; position:relative; background-color:transparent; background:url("../img/product/pop/back10.png") no-repeat;}
#point1 { width:788px; height:552px !important; min-height:552px; position:relative; background-color:transparent; background:url("../img/product/pop/back10.png") no-repeat;}
#point { width:788px; height:364px !important; min-height:364px; position:relative; background-color:transparent; background:url("../img/product/pop/back_p.png") no-repeat;}
#monitor { width:788px; height:332px !important; min-height:332px; position:relative; background-color:transparent; background:url("../img/product/pop/back_m.png") no-repeat;}

#howto1 .inner,
#howto2 .inner,
#howto3 .inner,
#howto4 .inner,
#howto5 .inner,
#howto6 .inner { display:block; margin:0 auto; width:700px; }

#point .inner .ttl,
#point1 .inner .ttl,
#monitor .inner .ttl,
#howto1 .inner .ttl,
#howto2 .inner .ttl,
#howto3 .inner .ttl,
#howto4 .inner .ttl,
#howto5 .inner .ttl,
#howto6 .inner .ttl { display:block; padding:35px 0 27px; }

#point .inner { display:block; margin:0 auto; width:700px; }
#point .inner  .ttl { display:block; margin:0 auto; width:700px; }

#point1 .inner { display:block; margin:0 auto; width:700px; }
#point1 .inner  .ttl { display:block; margin:0 auto; width:700px; }

#monitor .inner { display:block; margin:0 auto; width:700px; }
#monitor .inner  .ttl { display:block; margin:0 auto; width:700px; }

#monitor ul.huk { list-style: none; display:block; width:735px; padding:0; }
#monitor ul.huk li { display:block; float:left; list-style: none; width:340px; }
#monitor ul.huk li:nth-child(2n) { margin:0 0 24px 0; }
#monitor ul.huk li:nth-child(2n+1) { margin:0 24px 24px 0; }

.inner　.ibloc { display:block; margin-left:2px; }

#point .inner .ibloc { display:block; margin-left:0px; }
#point1 .inner .ibloc { display:block; margin-left:0px; }
#pt1 { padding-bottom:16px; }
.close { position:absolute; top:-9px; left:720px; cursor:pointer; }


/* スクロール */	
#scroll {	
margin-top:1px;	
padding-top:1px;	
position: relative;	
width: 788px;	
height: 547px;	
overflow: hidden;	
}	
#scroll .scrollbar {	
position: absolute;	
top: 0;	
right: 0;	
width: 5px;	
height: 548px;	
z-index: 1;	
}	
#scroll .scrollbar .track {	
position: absolute;	
top: 5px;	
left: 0;	
background: #EEE;	
width: 5px;	
height: 540px;	
z-index: 2;	
}	
#scroll .scrollbar .track .thumb {	
position: absolute;	
top: 0;	
left: 0;	
background: #3BBDDE;	
width: 5px;	
z-index: 3;	
cursor: pointer;	
font-size: 0;	
line-height: 0;	
}	
#scroll .scrollbar .up {	
position: absolute;	
top: 0;	
left: 0;	
width: 5px;	
height: 5px;	
background: #DDD;	
z-index: 2;	
cursor: pointer;	
font-size: 0;	
line-height: 0;	
}	
#scroll .scrollbar .down {	
position: absolute;	
top: 543px;	
left: 0;	
width: 5px;	
height: 5px;	
background: #DDD;	
z-index: 2;	
cursor: pointer;	
font-size: 0;	
line-height: 0;	
}	

.pb30{
	padding-bottom:30px;
}