@charset "shift_jis";

/* 「かづきメイク」の流れ-------------------------------------------------------*/

/*ステップタイトル＝回り込み解除*/
.how_to h5{
clear:both;
padding:17px 0 15px 0;
}

/*このページのトップへ*/
.how_to .to_top{
clear:both;
width:900px;
text-align:right !important;
}

/* 寄せる */
.flt_l{float:left;}
.flt_r{float:right;}

/*強調テキストはオレンジ色に*/
.how_to strong{
font-weight:normal;
color:#ff6d00;
}

/*アイコン「準備」「１」「２」「３」の背景画像*/

.how_to dl dt{/*準備*/
background-image:url(../img/common/ico_ready.gif);
background-repeat:no-repeat;
background-position:top left;
min-height:30px;/*IEでもmin-height*/
height: auto !important;
height: 30px;
padding:0px 0px 15px 60px;
font-weight:normal;
line-height:20px;
}

.how_to .ico_1,.ico_2,.ico_3{/*1、2、3*/
background-repeat:no-repeat;
background-position:top left;
padding:0px 0px 20px 42px;
}

.how_to .ico_1{background-image:url(../img/common/ico_1.gif);}
.how_to .ico_2{background-image:url(../img/common/ico_2.gif);}
.how_to .ico_3{background-image:url(../img/common/ico_3.gif);}

.how_to dl ol{/*ドットライン*/
background-image: url(../img/common/dot.gif);
background-repeat: repeat-x;
background-position: left top;
padding:15px 0px 0px 0px;
}

.how_to dl dd li{
margin:0px 0px 0px 16px;
line-height:20px;
}


/*Step 1----------------------------------------*/

/*スキンケア商品の使用順*/

#st1_item li{
float:left;
position:relative;
background-repeat:no-repeat;
font-size:11px;
text-align:left;
letter-spacing:-0.025em;
}

#st1_item img{
width:125px;
height:150px;
}

#st1_item li p{
position:absolute;
left:23px;
top:161px;
width:90px;
}

#st1_1,#st1_2,#st1_3,#st1_4,#st1_5{
width:155px;
height:220px;
}

#st1_6{
width:126px;
height:220px;
}

#st1_1{background-image:url(../img/how_to/st1_1.jpg);}
#st1_2{background-image:url(../img/how_to/st1_2.jpg);}
#st1_3{background-image:url(../img/how_to/st1_3.jpg);}
#st1_4{background-image:url(../img/how_to/st1_4.jpg);}
#st1_5{background-image:url(../img/how_to/st1_5.jpg);}
#st1_6{background-image:url(../img/how_to/st1_6.jpg);}

/*BOX1*/

#st1_box1{
clear:both;
float:left;
background-image:url(../img/how_to/st1_box1.jpg);
background-repeat:no-repeat;
width:540px;
height:220px;
position:relative;
margin:12px 0 0 0;
}

#st1_box1 p{
position:absolute;
left:20px;
top:41px;
width:190px;
line-height:20px;
}

#st1_box1 strong{
color:#d0955b;
font-weight:bold;
}

/*BOX2*/

#st1_box2{
float:right;
background-image:url(../img/how_to/st1_box2.jpg);
background-repeat:no-repeat;
width:345px;
height:220px;
position:relative;
margin:12px 0 0 0;
}

#st1_box2 p{
position:absolute;
left:20px;
top:41px;
width:145px;
line-height:20px;
}

#st1_box2 #st1_box2_item{
position:absolute;
left:195px;
top:170px;
line-height:19px;
}

/*spacer*/
#st1_box2 .item1_img{
width:40px;height:120px;left:180px;top:40px;}
#st1_box2 .item2_img{
width:115px;height:120px;left:220px;top:40px;}


/*Step 2----------------------------------------*/
#st2 {
	clear:both;
}
#st2 dl{
float:left;
width:420px;
margin-right:40px;
}

/*BOX1*/

#st2_1{
float:left;
background-image:url(../img/how_to/st2_1.jpg);
background-repeat:no-repeat;
width:218px;
height:230px;
position:relative;
margin:0px 0 0 0;
}

/*商品名・画像（spacer）位置調整*/

#st2_1 .item1,.item2,.item1_img,.item2_img{/*まず絶対配置*/
	position:absolute;
}

#st2_1 .item1{left:39px;top:200px;}/*商品名*/

#st2_1 .item2{left:136px;top:200px;}

#st2_1 .item1_img{/*spacer*/
width:70px;height:70px;
left:-15px;top:-90px;}

#st2_1 .item2_img{
width:60px;height:180px;
left:-14px;top:-187px;}


/*Step 3----------------------------------------*/

#st3 dl{
float:left;
width:330px;
margin-right:20px;
}

#st3_1{
float:left;
width:204px;
margin-right:20px;
}

/*BOX1*/

#st3_3{
float:left;
background-image:url(../img/how_to/st3_3.jpg);
background-repeat:no-repeat;
width:325px;
height:340px;
position:relative;
margin:0px 0 0 0;
}

/*商品名・画像（spacer）位置調整*/

#st3_3 .item1,.item2,.item1_img,.item2_img,.txt_point{/*まず絶対配置*/
position:absolute;}

#st3_3 .item1{left:50px;top:138px;}/*商品名*/

#st3_3 .item2{left:182px;top:138px;}

#st3_3 .item1_img{/*spacer*/
width:120px;height:120px;
left:-10px;top:-130px;}

#st3_3 .item2_img{
width:140px;height:120px;
left:-20px;top:-130px;}

#st3_3 .txt_point{
width:135px;
left:175px;top:205px;
line-height:20px;
}

/*Step 4-----------------------------------------------------------------*/
#st4 h6{
clear:both;
padding:15px 0 15px 0;
}

#st4 .ttl2{
padding:0px 0 15px 0;
}

#st4 ol{
padding:0px 0 0px 0;
}

/*St4_st1---------------------------------*/

#st4_st1_lft{/*最初のテキスト部分*/
float:left;
width:340px;
margin-right:30px;
}

#st4_st1_1{
float:left;
width:475px;
height:145px;
background-image:url(../img/how_to/st4_st1_1.jpg);
background-repeat:no-repeat;
position:relative;
}

/*商品名・画像（spacer）位置調整*/

#st4_st1_1 .item1_img,.item1,.txt_point{/*まず絶対配置*/
position:absolute;}

#st4_st1_1 .item1_img{/*spacer*/
width:70px;height:125px;
left:-90px;top:-40px;}

#st4_st1_1 .item1{left:115px;top:52px;}/*商品名*/

#st4_st1_1 .txt_point{
width:135px;
left:310px;top:30px;
line-height:20px;
}

/*St4_st2---------------------------------*/

#st4_st2_lft{/*最初のテキスト部分*/
float:left;
width:250px;
margin-right:10px;
}

#st4_st2_3{
float:left;
width:230px;
height:280px;
background-image:url(../img/how_to/st4_st2_3.jpg);
background-repeat:no-repeat;
position:relative;
}

/*商品名・画像（spacer）位置調整*/

#st4_st2_3 .item1_img,.item1,.txt_point{/*まず絶対配置*/
position:absolute;}

#st4_st2_3 .item1_img{/*spacer*/
width:130px;height:95px;
left:10px;top:-100px;}

#st4_st2_3 .item1{left:65px;top:110px;}/*商品名*/

#st4_st2_3 .txt_point{
width:135px;
left:70px;top:170px;
line-height:20px;
}

/*St4_st3---------------------------------*/

#st4_st3_lft{/*最初のテキスト部分*/
float:left;
width:264px;
margin-right:10px;
}

#st4_st3_2{
float:left;
width:280px;
height:210px;
background-image:url(../img/how_to/st4_st3_2.jpg);
background-repeat:no-repeat;
position:relative;
}

/*商品名・画像（spacer）位置調整*/

#st4_st3_2 .item1_img,.item1,.txt_point{/*まず絶対配置*/
position:absolute;}

#st4_st3_2 .item1_img{/*spacer*/
width:130px;height:85px;
left:40px;top:0px;}

#st4_st3_2 .item1{left:200px;top:16px;}/*商品名*/
#st4_st3_2 .item2{left:200px;top:55px;}/*商品名*/

#st4_st3_2 .txt_point{/*「ポイント」テキスト*/
width:195px;
left:70px;top:115px;
line-height:20px;
}

/*Step 5-----------------------------------------------------------------*/

#st5 h6{
clear:both;
padding:15px 0 15px 0;
}

#st5 .ttl2{
padding:0px 0 15px 0;
}

#st5 ol{
padding:0px 0 15px 0;
}

/*St5_st1---------------------------------*/
#st5_st1_lft{/*最初のテキスト部分*/
float:left;
width:260px;
margin-right:10px;
}

#st5_st1_2{
float:left;
width:460px;
height:235px;
background-image:url(../img/how_to/st5_st1_2.jpg);
background-repeat:no-repeat;
position:relative;
}

/*商品名・画像（spacer）位置調整------*/

#st5_st1_2 .item1_img,.item1,.item2_img,.item2,.item3_img,.item3,.item4_img,.item4,.txt_point{/*まず絶対配置*/
position:absolute;}

/*spacer*/
#st5_st1_2 .item1_img{
width:70px;height:70px;left:40px;top:0px;}
#st5_st1_2 .item2_img{
width:70px;height:70px;left:137px;top:0px;}
#st5_st1_2 .item3_img{
width:90px;height:70px;left:228px;top:0px;}
#st5_st1_2 .item4_img{
width:70px;height:75px;left:350px;top:0px;}

/*商品名*/
#st5_st1_2 .item1{left:50px;top:78px;}
#st5_st1_2 .item2{left:157px;top:78px;}
#st5_st1_2 .item3{left:238px;top:78px;}
#st5_st1_2 .item4{left:350px;top:78px;width:95px;}

/*ここがポイント*/
#st5_st1_2 .txt_point{
width:360px;
left:70px;top:155px;
line-height:20px;
}

/*St5_st2---------------------------------*/
#st5_st2_lft{/*最初のテキスト部分*/
float:left;
width:277px;
margin-right:10px;
}

#st5_st2_2{
float:left;
width:375px;
height:205px;
background-image:url(../img/how_to/st5_st2_2.jpg);
background-repeat:no-repeat;
position:relative;
}

/*商品名・画像（spacer）位置調整------*/

#st5_st2_2 .item1_img,.item1,.item2_img,.item2,.item3_img,.item3,.item4_img,.item4,.txt_point{/*まず絶対配置*/
position:absolute;}

/*spacer*/
#st5_st2_2 .item1_img{
width:90px;height:100px;left:0px;top:0px;}
#st5_st2_2 .item2_img{
width:90px;height:100px;left:0px;top:103px;}

/*商品名*/
#st5_st2_2 .item1{left:108px;top:45px;}
#st5_st2_2 .item2{left:108px;top:132px;}

/*ここがポイント*/
#st5_st2_2 .txt_point{
width:160px;
left:195px;top:45px;
line-height:20px;
}

/*St5_st3---------------------------------*/
#st5_st3_lft{/*最初のテキスト部分*/
float:left;
width:265px;
margin-right:10px;
}

#st5_st3_2{
float:left;
width:365px;
height:210px;
background-image:url(../img/how_to/st5_st3_2.jpg);
background-repeat:no-repeat;
position:relative;
}

/*商品名・画像（spacer）位置調整------*/

#st5_st3_2 .item1_img,.item1,.item2_img,.item2,.item3_img,.item3,.item4_img,.item4,.txt_point{/*まず絶対配置*/
position:absolute;}

/*spacer*/
#st5_st3_2 .item1_img{
width:130px;height:150px;left:0px;top:0px;}
#st5_st3_2 .item2_img{
width:100px;height:150px;left:130px;top:0px;}
#st5_st3_2 .item3_img{
width:120px;height:150px;left:230px;top:0px;}

/*商品名*/
#st5_st3_2 .item1{left:36px;top:160px;}
#st5_st3_2 .item2{left:150px;top:160px;}
#st5_st3_2 .item3{left:267px;top:160px;}

/*ここがポイント*/
#st5_st3_2 .txt_point{
width:360px;
left:70px;top:155px;
line-height:20px;
}

/*St5_st4---------------------------------*/
#st5_st4_lft{/*左側*/
float:left;
width:505px;
margin-right:0px;
}

#st5_st4_lft ol{/*テキスト部分*/
float:left;
width:230px;
margin-right:0px;
}

#st5_st4_2{
float:left;
width:390px;
height:235px;
background-image:url(../img/how_to/st5_st4_2.jpg);
background-repeat:no-repeat;
position:relative;
}

/*商品名・画像（spacer）位置調整------*/

#st5_st4_2 .item1_img,.item1,.item2_img,.item2,.item3_img,.item3,.item4_img,.item4,.txt_point{/*まず絶対配置*/
position:absolute;}

/*spacer*/
#st5_st4_2 .item1_img{
width:100px;height:100px;left:90px;top:5px;}
#st5_st4_2 .item2_img{
width:100px;height:100px;left:220px;top:5px;}


/*商品名*/
#st5_st4_2 .item1{left:100px;top:110px;}
#st5_st4_2 .item2{left:210px;top:110px;}


/*ここがポイント*/
#st5_st4_2 .txt_point{
width:305px;
left:70px;top:155px;
line-height:20px;
}

/*St5_st5---------------------------------*/
#st5_st5_lft{/*最初のテキスト部分*/
float:left;
width:230px;
margin-right:20px;
}

#st5_st5_2{
float:left;
width:390px;
height:275px;
background-image:url(../img/how_to/st5_st5_2.jpg);
background-repeat:no-repeat;
position:relative;
}

/*商品名・画像（spacer）位置調整------*/

#st5_st5_2 .item1_img,.item1,.item2_img,.item2,.item3_img,.item3,.item4_img,.item4,.txt_point{/*まず絶対配置*/
position:absolute;}

/*spacer*/
#st5_st5_2 .item1_img{
width:100px;height:110px;left:120px;top:10px;}
#st5_st5_2 .item3_img{
width:100px;height:110px;left:250px;top:10px;}

/*商品名*/
#st5_st5_2 .item1{left:105px;top:113px;}
#st5_st5_2 .item3{left:245px;top:113px;}

/*ここがポイント*/
#st5_st5_2 .txt_point{
width:305px;
left:70px;top:197px;
line-height:20px;
}