@charset "utf-8";


/* =====================================================================
*
*    reflection.css INDEX
*
*    // リフレクション シリーズのスタイル
*
*
*    0. Common
*
*    1. Top
*       1.1. Top - Line Up
*
*    2. REFLECTION
*       2.1. REFLECTION - Line Up
*       2.2. REFLECTION - Hair Arrangement
*            2.2.1. Head
*            2.2.2. Pre
*            2.2.3. Arrange 1
*            2.2.4. Arrange 2
*       2.3. REFLECTION - Chroma Thermique Fig
*
*    3. CHROMA RICHE
*       3.1. CHROMA RICHE - Line Up
*
*    4. Side Contents
*
* =================================================================== */


/* ================================================================== */
/*                                                                    */
/* ! 0. Common */
/*                                                                    */
/* ================================================================== */

body.ind #line #iconAbout {
	background: url(../images/line_info.jpg) no-repeat;
}

.panel .ptopHeadRF {
	width: 674px;
	height: 41px;
	padding: 1px 20px 0 20px;
	overflow: hidden;
	background: url(../images/col_base_top_rf.png) no-repeat;
}

body.ind #line .unit .detail .type {
	color: #CA5D84;
}


/* ================================================================== */
/*                                                                    */
/* ! 1. Top */
/*                                                                    */
/* ================================================================== */

#lineupTable h1 {
	background: url(../images/ttl.png) no-repeat;
}

#lineupTable table.container {
	background: url(../images/table_bg.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 1.1. Top - Line Up */
/*                                                                    */
/* ------------------------------------------------------------------ */

/* ---------------------------------
*    REFLECTION
*/

body.index #line1 h3 a {
	width: 334px;
	height: 22px;
	margin-bottom: 17px;
	background: url(../images/line_ref_ttl.jpg) 0 -22px no-repeat;
}
body.index #line1 h3 a:hover { background-position: 0 0; }

body.index #line1 p {
	height: 34px;
	background: url(../images/line_ref_desc.gif) no-repeat;
}


/* ---------------------------------
*    CHROMA RICHE
*/

body.index #line2 h3 a {
	width: 380px;
	height: 22px;
	margin-bottom: 17px;
	background: url(../images/line_chroma_ttl.jpg) 0 -22px no-repeat;
}
body.index #line2 h3 a:hover { background-position: 0 0; }

body.index #line2 p {
	height: 34px;
	background: url(../images/line_chroma_desc.gif) no-repeat;
}


/* ================================================================== */
/*                                                                    */
/* ! 2. REFLECTION */
/*                                                                    */
/* ================================================================== */

body.ref h1 {
	height: 56px;
	background: url(../reflection/images/ttl.png) no-repeat;
}

body.ref .ttlDesc {
	padding: 14px 20px 10px 20px;
	line-height: 100%;
}

body.ref .ttlDesc strong {
	height: 28px;
	background: url(../reflection/images/ttl_desc.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.1. REFLECTION - Line Up */
/*                                                                    */
/* ------------------------------------------------------------------ */

body.ref #line h2 {
	float: left;
	width: 122px;
	height: 41px;
	background: url(../reflection/images/line_panel_ttl.jpg) no-repeat;
}

#line #luRef1 h3 { width: 203px; background: url(../reflection/images/line_ttl1.jpg) no-repeat; }
#line #luRef2 h3 { width: 117px; background: url(../reflection/images/line_ttl2.jpg) no-repeat; }
#line #luRef3 h3 { width: 205px; background: url(../reflection/images/line_ttl3.jpg) no-repeat; }
#line #luRef4 h3 { width: 202px; background: url(../reflection/images/line_ttl4.jpg) no-repeat; }
#line #luRef5 h3 { width: 160px; background: url(../reflection/images/line_ttl5.jpg) no-repeat; }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.2. REFLECTION - Hair Arrangement */
/*                                                                    */
/* ------------------------------------------------------------------ */

body.hair h1 {
	height: 56px;
	background: url(../reflection/images/ttl.png) no-repeat;
}


/* ---------------------------------
*    Process Box
*/

body.hair .pro {
    width: 694px;
    margin: 0 7px;
    background: url(../reflection/images/arr_pro_bg_mid.gif) repeat-y;
}

body.hair .pro .container {
    width: 694px;
    padding: 0 0 22px 0;
    background: url(../reflection/images/arr_pro_bg_btm2.gif) left bottom no-repeat;
}

body.hair .pro .cont {
    width: 694px;
    background: url(../reflection/images/arr_pro_bg_top.gif) no-repeat;
}

body.hair .pro ul {
    width: 674px;
    padding: 13px 10px 9px 10px;
    background: url(../reflection/images/arr_pro_arraw2.gif) left 112px no-repeat;
}

body.hair .pro li.pro1,
body.hair .pro li.pro2 {
    float: left;
    width: 184px;
    padding: 0 33px 0 14px; 
}

body.hair .pro li.pro3 {
    float: left;
    width: 184px;
    padding: 0 14px 0 14px; 
}

body.hair .pro .proTtl,
body.hair .pro .proPic {
    margin-bottom: 14px;
}

body.hair .finish .proPic {
	display: block;
    margin-right: auto;
    margin-bottom: 14px;
    margin-left: auto;
}


/* ---------------------------------
*    Process Box (Vertical)
*/

body.hair .proV {
    width: 411px;
    margin: 0 0 0 7px;
    background: #F3F3F3 url(../reflection/images/arr_pro_v_bg_btm2.gif) left bottom no-repeat;
}

body.hair .proV .cont {
    width: 411px;
    background: url(../reflection/images/arr_pro_v_bg_top1.gif) no-repeat;
}

body.hair .proV ul {
    width: 391px;
    padding: 0 10px 17px 10px;
}

body.hair .proV li {
	padding: 13px 0 0 0;
}

	body.hair .proV li.pro2, body.hair .proV li.pro3 {
		background: url(../reflection/images/arr_pro_arraw1.gif) center 13px no-repeat;
	}

body.hair .proV .box {
	width: 391px;
	background: url(../reflection/images/arr_pro_v_bg_mid.gif) repeat-y;
} 

body.hair .proV .boxContainer {
	padding-bottom: 14px;
	background: url(../reflection/images/arr_pro_v_bg_btm1.gif) left bottom no-repeat;
}

body.hair .proV .boxCont {
	width: 363px;
	padding: 14px 14px 0 14px;
	background: url(../reflection/images/arr_pro_v_bg_top2.gif) no-repeat;
}

body.hair .proV .proTtl {
    margin-left: 14px;
}

body.hair .proV .proPic {
	margin-bottom: 14px;
}

body.hair .finish {
	width: 332px;
	background: url(../reflection/images/arr_pro_finish_bg_mid.gif) repeat-y;
}

body.hair .finish .cont {
	background: url(../reflection/images/arr_pro_finish_bg_btm.gif) left bottom no-repeat;
}

body.hair .finish ul {
	width: 284px;
	padding: 17px 24px 31px 24px;
	background: url(../reflection/images/arr_pro_finish_bg_top.gif) left top no-repeat;
}

body.hair .finish .proTtl {
	padding-bottom: 14px;
}


/* ---------------------------------
*    Point
*/

body.hair .point {
    width: 670px;
    padding: 34px 17px 22px 21px;
}

body.hair .point .pointPic { float: left; padding-top: 3px; }

body.hair .point .bal {
    float: right;
    width: 591px;
    background: url(../reflection/images/arr_point_bg_mid.jpg) repeat-y;
}

body.hair .point .bal .container {
    background: url(../reflection/images/arr_point_bg_btm.jpg) left bottom no-repeat;
}

body.hair .point .bal .cont {
    background: url(../reflection/images/arr_point_bg_top.jpg) no-repeat;
}

body.hair .point .bal dl {
    width: 541px;
    padding: 20px 21px 22px 29px;
    background: url(../reflection/images/arr_point_bg_arraw.jpg) left 20px no-repeat;
	color: #0088AF;
}

body.hair .point .bal dl p { color: #0088AF; }


/* ---------------------------------
*    Point (Vertical)
*/

body.hair .pointV {
    width: 312px;
    padding: 34px 10px 22px 10px;
}

body.hair .pointV .pointPic { float: right; padding-top: 3px; }

body.hair .pointV .bal {
    float: left;
    width: 233px;
    background: url(../reflection/images/arr_point_v_bg_mid.jpg) repeat-y;
}

body.hair .pointV .bal .container {
    background: url(../reflection/images/arr_point_v_bg_btm.jpg) left bottom no-repeat;
}

body.hair .pointV .bal .cont {
    background: url(../reflection/images/arr_point_v_bg_top.jpg) no-repeat;
}

body.hair .pointV .bal dl {
    width: 183px;
    padding: 20px 29px 22px 21px;
    background: url(../reflection/images/arr_point_v_bg_arraw.jpg) left 20px no-repeat;
	color: #0088AF;
}

body.hair .pointV .bal dl p { color: #0088AF; }

body.hair strong { font-weight: bold; color: #C75684; }

	/* ------------------------------------------------------------------ */
	/*                                                                    */
	/* ! 2.2.1 Head */
	/*                                                                    */
	/* ------------------------------------------------------------------ */
	
	body.hair #head h3 {
		width: 238px;
		height: 41px;
		background: url(../reflection/images/arr_head_subttl.jpg) no-repeat;
	}
	
	body.hair #head .head {
		width: 674px;
		padding: 27px 17px 28px 17px;
		background: url(../../../common/images/bdr_panel.jpg) left bottom no-repeat;
	}

	body.hair #arrCatch {
		width: 674px;
		height: 286px;
	}
	

	/* ---------------------------------
	*    Catch
	*/

	body.hair #arrCatch #arrCatchImg {
		float: left;
	}

	body.hair #arrCatch .cont {
		position: relative;
		float: right;
		background: url(../reflection/images/arr_head_catch2.jpg) no-repeat;
	}

	body.hair #arrCatch h2 {
		width: 392px;
		height: 285px;
	}
	
	body.hair #arrCatchBtn {
		position: absolute;
		left: 26px;
		top: 226px;
	}

	body.hair #arrHeadDesc {
		width: 674px;
		height: 111px;
		margin: 27px 0 54px 0;
		background: url(../reflection/images/arr_head_desc.gif) no-repeat;
	}


	/* ---------------------------------
	*    Soka
	*/
	
	body.hair #soka { width: 674px; }

	body.hair #sokaPic {
		float: left;
		padding: 0 0 0 17px;
	}

	body.hair #soka .cont {
		float: right;
		width: 420px;
		padding-top: 18px;
	}
	
	body.hair #soka .cont p {
		margin: 27px 0 0 0;
	}


	/* ------------------------------------------------------------------ */
	/*                                                                    */
	/* ! 2.2.2 pre */
	/*                                                                    */
	/* ------------------------------------------------------------------ */

	body.hair #pre h4 {
		width: 674px;
		height: 23px;
		margin: 27px 17px 0 17px;
		background: url(../reflection/images/arr_pre_ttl.jpg) no-repeat;
	}
	
	body.hair #pre .desc {
		padding: 17px 17px 27px 17px;
	}
	

	/* ------------------------------------------------------------------ */
	/*                                                                    */
	/* ! 2.2.3 Arrange 1 */
	/*                                                                    */
	/* ------------------------------------------------------------------ */
	
	body.hair #arr1 { margin-top: 34px; }
	
	body.hair #arr1 h3 {
		height: 41px;
		background: url(../reflection/images/arr_arr1_subttl.jpg) no-repeat;
	}
	
	#arr1Pro1 { width: 708px; padding-top: 34px; }
	
	#arr1Pro1 .proV .pro3 .attention { padding-top: 10px; }
	
	#arr1pic1 { float: right; padding-right: 10px; }
	
	#arr1Pro2 {
		width: 708px;
		padding-top: 34px;
		padding-bottom: 17px;
		background: url(../reflection/images/arr_pro_arraw1.gif) 380px 19px no-repeat;
	}
	
	#arr1pic2 { float: left; padding-left: 17px; }

	#arr1Pro2Box {
		float: right;
		width: 332px;
		margin-top: 10px;
		margin-right: 7px;
	}


	/* ------------------------------------------------------------------ */
	/*                                                                    */
	/* ! 2.2.4 Arrange 2 */
	/*                                                                    */
	/* ------------------------------------------------------------------ */

	body.hair #arr2 { margin-top: 34px; }
	
	body.hair #arr2 .pmid { padding-top: 34px; }
	
	body.hair #arr2 h3 {
		height: 41px;
		background: url(../reflection/images/arr_arr2_subttl.jpg) no-repeat;
	}

	#arr2Pro1 {
		width: 708px;
		padding-top: 34px;
		background: url(../reflection/images/arr_pro_arraw1.gif) 521px 19px no-repeat;
	}
	
	#arr2pic1 { float: left; padding-left: 17px; }

	#arr2Pro1Box {
		float: right;
		width: 332px;
		margin-top: 10px;
		margin-right: 7px;
	}

	body.hair #arr2 dt { float: left; }
	body.hair #arr2 dd.focusPic { float: right; }
	body.hair #arr2 dd.desc { clear: left; zoom: 1; } 


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.3. REFLECTION - Chroma Thermique Fig */
/*                                                                    */
/* ------------------------------------------------------------------ */

#line #luRef5 .thmBox { margin-bottom: 34px; }

#ThermiqueFig {
	clear: both;
	width: 674px;
	background: url(../chroma_riche/images/line4_fig_bg_mid.jpg) repeat-y;
}

#ThermiqueFig .container {
	padding-top: 35px;
	background: url(../chroma_riche/images/line4_fig_bg_top.jpg) no-repeat;
}

#ThermiqueFig .cont {
	padding: 0 27px 53px 37px;
	background: url(../chroma_riche/images/line4_fig_bg_btm.jpg) left bottom no-repeat;
}

#ThermiqueFig .figBoxL {
	float: left;
	width: 276px;
	padding: 0 35px 0 0;
	background: url(../chroma_riche/images/line4_fig_bg_plus.gif) right center no-repeat;
}

#ThermiqueFig .figBoxR {
	float: right;
	width: 275px;
}

#ThermiqueFig .fig {
	float: right;
	margin: 10px 0 0 7px;
}

#ThermiqueFig h4 {
	margin: 10px 0 7px 0;
	color: #00BEF3;
	font-weight: bold;
}

#luRef5 #attentionText1 {
	height: 27px;
	background: url(../chroma_riche/images/line4_fig_desc1.gif) center top no-repeat;
}

#luRef5 #attentionText2 {
	height: 28px;
	background: url(../chroma_riche/images/line4_fig_desc2.gif) center top no-repeat;
}


/* ================================================================== */
/*                                                                    */
/* ! 3. CHROMA RICHE */
/*                                                                    */
/* ================================================================== */

body.chroma h1 {
	height: 56px;
	background: url(../chroma_riche/images/ttl.png) no-repeat;
}

body.chroma .ttlDesc {
	padding: 14px 20px 10px 20px;
	line-height: 100%;
}

body.chroma .ttlDesc strong {
	height: 28px;
	background: url(../chroma_riche/images/ttl_desc.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.1. CHROMA RICHE - Line Up */
/*                                                                    */
/* ------------------------------------------------------------------ */

body.chroma #line h2 {
	float: left;
	width: 142px;
	height: 41px;
	background: url(../chroma_riche/images/line_panel_ttl.jpg) no-repeat;
}

#line #luChroma1 h3 { width: 195px; background: url(../chroma_riche/images/line_ttl1.jpg) no-repeat; }
#line #luChroma2 h3 { width: 215px; background: url(../chroma_riche/images/line_ttl2.jpg) no-repeat; }
#line #luChroma3 h3 { width: 231px; background: url(../chroma_riche/images/line_ttl3.jpg) no-repeat; }


/* ================================================================== */
/*                                                                    */
/* ! 4. Side Contents */
/*                                                                    */
/* ================================================================== */

body.index #sideCont {
	margin-top: 72px;
}

body.ind #sideCont {
	margin-top: 25px;
}

body.hair #sideCont {
	margin-top: 22px;
}

body.develop #sideCont {
	margin-top: 22px;
}