@charset "utf-8";


/* =====================================================================
*
*    qa.css INDEX
*
*    // ヘアケア Q&Aカテゴリのスタイル
*
*
*    1. Main Contents
*       1.1. Question List (Index)
*       1.2. Question List
*       1.3. Question
*
*    2. Side Contents
*       2.1. Product Info
*
* =================================================================== */


/* ================================================================== */
/*                                                                    */
/* ! 1. Main Contents */
/*                                                                    */
/* ================================================================== */

h1 {
	height: 56px;
	margin: 0 0 14px 0;
	background: url(../images/ttl.png) no-repeat;
}

#ttlDesc { padding: 0 20px; }


.panel .ptopHeadQa {
	width: 674px;
	height: 51px;
	margin: 34px 0 0 0;
	padding: 1px 20px 0 20px;
	overflow: hidden;
}

	body.color  .panel .ptopHeadQa { background: url(../images/color_col_base_top_qa.png) no-repeat; }
	body.thin   .panel .ptopHeadQa { background: url(../images/thin_col_base_top_qa.png) no-repeat; }
	body.curl   .panel .ptopHeadQa { background: url(../images/dry_col_base_top_qa.png) no-repeat; }
	body.scalp  .panel .ptopHeadQa { background: url(../images/scalp_col_base_top_qa.png) no-repeat; }
	body.dry    .panel .ptopHeadQa { background: url(../images/dry_col_base_top_qa.png) no-repeat; }
	body.damage .panel .ptopHeadQa { background: url(../images/damage_col_base_top_qa.png) no-repeat; }
	body.uv     .panel .ptopHeadQa { background: url(../images/uv_col_base_top_qa.png) no-repeat; }

hr.devide {
	display: block;	
	height: 2px;
	margin: 40px 0;
	background: url(../images/devider.jpg) center top no-repeat;
	border: 0;
}


/* ---------------------------------
*    Tooltip
*/

#balSet { display: none; }
#mopTip01 .tip { text-align: center; }
#mopTip01 .tip p { margin: 6px 0; }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 1.1. Question List (Index) */
/*                                                                    */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 1.2. Question List */
/*                                                                    */
/* ------------------------------------------------------------------ */

#qList {
	margin-top: 30px;
}

#qList .pmid .model {
	float: left;
	padding: 0 0 0 17px;
}

#qList .qCont {
	padding: 27px 0 28px 0;
	background: url(../../common/images/bdr_panel.jpg) left bottom no-repeat;
}
	#qList .first { padding: 0 0 27px 0; }
	#qList .last { padding: 27px 0 0 0; background: none; }

#qList .pmid {
	padding-top: 22px;
	padding-bottom: 22px;
}

#qList .pmid .cont {
	float: right;
	width: 437px;
	margin: 0 0 0 0;
	padding: 0 17px 0 0;
}

#qList .pmid h2 { height: 37px; background-position: 0 -20px; background-repeat: no-repeat; }

	body.color  #qList .pmid h2 { background-image: url(../images/color_subttl.jpg); }
	body.thin   #qList .pmid h2 { background-image: url(../images/thin_subttl.jpg); }
	body.curl   #qList .pmid h2 { background-image: url(../images/curl_subttl.jpg); }
	body.scalp  #qList .pmid h2 { background-image: url(../images/scalp_subttl.jpg); }
	body.dry    #qList .pmid h2 { background-image: url(../images/dry_subttl.jpg); }
	body.damage #qList .pmid h2 { background-image: url(../images/damage_subttl.jpg); }
	body.uv     #qList .pmid h2 { background-image: url(../images/uv_subttl.jpg); }

#qList .pmid h2 a { height: 20px; background-position: 0 -20px; background-repeat: no-repeat; }

	body.index #qList .pmid .color  h2 a { width: 139px; background-image: url(../images/color_subttl.jpg); }
	body.index #qList .pmid .thin   h2 a { width: 89px; background-image: url(../images/thin_subttl.jpg); }
	body.index #qList .pmid .curl   h2 a { width: 111px; background-image: url(../images/curl_subttl.jpg); }
	body.index #qList .pmid .scalp  h2 a { width: 92px; background-image: url(../images/scalp_subttl.jpg); }
	body.index #qList .pmid .dry    h2 a { width: 113px; background-image: url(../images/dry_subttl.jpg); }
	body.index #qList .pmid .damage h2 a { width: 163px; background-image: url(../images/damage_subttl.jpg); }
	body.index #qList .pmid .uv     h2 a { width: 112px; background-image: url(../images/uv_subttl.jpg); }

	body.index #qList .pmid h2 a:hover { background-position: 0 0; }

#qList .pmid ul {
	width: 437px;
	color: #555555;
}

#qList .pmid ul li {
	padding: 6px 0 6px 38px;
	line-height: 120%;
	text-indent: -15px;
}

	#qList .pmid ul li a         { color: #497288; text-decoration: none; font-weight: bold; }
		body.index #qList .pmid ul li a { font-weight: normal; }

	#qList .pmid ul li a:visited { color: #497288; text-decoration: none; }
	#qList .pmid ul li a:hover   { color: #00BEF3; text-decoration: underline; }
	#qList .pmid ul li a:active  { color: #00BEF3; text-decoration: underline; }

	body.index #qList .pmid .color  ul li { background: url(../images/color_icon_q.jpg) 0 3px no-repeat; }
	body.index #qList .pmid .thin   ul li { background: url(../images/thin_icon_q.jpg) 0 3px no-repeat; }
	body.index #qList .pmid .curl   ul li { background: url(../images/dry_icon_q.jpg) 0 3px no-repeat; }
	body.index #qList .pmid .scalp  ul li { background: url(../images/scalp_icon_q.jpg) 0 3px no-repeat; }
	body.index #qList .pmid .dry    ul li { background: url(../images/dry_icon_q.jpg) 0 3px no-repeat; }
	body.index #qList .pmid .damage ul li { background: url(../images/damage_icon_q.jpg) 0 3px no-repeat; }
	body.index #qList .pmid .uv     ul li { background: url(../images/uv_icon_q.jpg) 0 3px no-repeat; }

	body.color  #qList .pmid ul li { background: url(../images/color_icon_q.jpg) 0 3px no-repeat; }
	body.thin   #qList .pmid ul li { background: url(../images/thin_icon_q.jpg) 0 3px no-repeat; }
	body.curl   #qList .pmid ul li { background: url(../images/dry_icon_q.jpg) 0 3px no-repeat; }
	body.scalp  #qList .pmid ul li { background: url(../images/scalp_icon_q.jpg) 0 3px no-repeat; }
	body.dry    #qList .pmid ul li { background: url(../images/dry_icon_q.jpg) 0 3px no-repeat; }
	body.damage #qList .pmid ul li { background: url(../images/damage_icon_q.jpg) 0 3px no-repeat; }
	body.uv     #qList .pmid ul li { background: url(../images/uv_icon_q.jpg) 0 3px no-repeat; }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 1.3. Question */
/*                                                                    */
/* ------------------------------------------------------------------ */

.unit h3 {
	padding: 14px 0 0 47px;
	font-weight: bold;
	color: #E1ECEE;
}	

.unit .answer {
	padding: 17px 17px 22px 64px;
	background: url(../images/list_hd_a.jpg) 24px 17px no-repeat;
}

	body.color  .unit .answer { background: url(../images/color_list_hd_a.jpg) 24px 17px no-repeat; }
	body.thin   .unit .answer { background: url(../images/thin_list_hd_a.jpg) 24px 17px no-repeat; }
	body.curl   .unit .answer { background: url(../images/dry_list_hd_a.jpg) 24px 17px no-repeat; }
	body.scalp  .unit .answer { background: url(../images/scalp_list_hd_a.jpg) 24px 17px no-repeat; }
	body.dry    .unit .answer { background: url(../images/dry_list_hd_a.jpg) 24px 17px no-repeat; }
	body.damage .unit .answer { background: url(../images/damage_list_hd_a.jpg) 24px 17px no-repeat; }
	body.uv     .unit .answer { background: url(../images/uv_list_hd_a.jpg) 24px 17px no-repeat; }

.unit .answer p { line-height: 195%; margin-bottom: 12px; }

.unit a img { position: relative; z-index: 100; }

.unit a.arrowLink {
    padding: 0 0 0 14px;
    background: url(../../common/images/li_mark.gif) 0 2px no-repeat;
    text-decoration: none;
    font-weight: bold;
}
.unit a.arrowLink:visited { text-decoration: none; }
.unit a.arrowLink:hover   {
    background: url(../../common/images/li_mark_h.gif) 0 2px no-repeat;
    text-decoration: underline;
}
.unit a.arrowLink:active  { text-decoration: underline; }

.unit .g2l {
	clear: both;
	width: 93px;
	margin: 0 0 0 auto;
	padding: 5px 0 0 0;
}

.unit .g2l a {
	width: 93px;
	height: 10px;
	background: url(../images/btn_golist.gif) 0 -10px no-repeat;
}
.unit .g2l a:hover { background-position: 0 0; }

.unit .floatL { float: left; margin: 5px 27px 17px 0; }
.unit .floatR { float: right; margin: 5px 27px 17px 27px; }

.unit ol {
	margin: 0 0 12px 0;
	color: #555555;
}

.unit ol li {
	margin: 0 0 0 1.7em;
	list-style: decimal;
	line-height: 195%;
}


/* ------------------------------------------------------------------ */
/* ! ※乾燥毛Q&A */
/* ------------------------------------------------------------------ */

body.dry #q5 .floatR { position:relative; }

/* ------------------------------------------------------------------ */
/* ! ※頭皮Q&A */
/* ------------------------------------------------------------------ */

body.scalp #q2 .floatR { margin-right: 0; }
body.scalp #q5 .floatL { margin-top: 40px; }

/* ------------------------------------------------------------------ */
/* ! ※くせ毛Q&A */
/* ------------------------------------------------------------------ */

body.curl #q4 .figR { margin-left: 17px; }

/* ------------------------------------------------------------------ */
/* ! ※薄毛Q&A */
/* ------------------------------------------------------------------ */

body.thin .unit h3 { color: #6E6D7F; }

/* ------------------------------------------------------------------ */
/* ! ※カラーヘアQ&A */
/* ------------------------------------------------------------------ */

body.color #q1 .figCont { margin: 27px 0 27px 0; }
body.color #q1 #q1Fig1 { margin-right: 17px; }

body.color #q5 .figBox1 {
	position: relative;
	float: left;
	width: 123px;
	margin-right: 10px;
}
body.color #q5 .figBox1 img { margin-right: 17px; }

body.color #q5 .figBox2 {
	position: relative;
	float: right;
	width: 154px;
	margin-left: 10px;
	padding-right: 10px;
}
body.color #q5 .figBox2 img { margin-left: 17px; }

body.color #q6 .ptopHeadQaL {
	display: block;
	width: 714px;
	height: 6px;
	margin: 34px 0 0 0;
	background: url(../images/color_col_base_top_qa_l.png) no-repeat;
}

body.color #q6 .headQaCont {
	width: 708px;
	background: #BD409A url(../images/color_col_base_btm_qa_l.jpg) left bottom repeat-x;
}

body.color #q6 h3 {
	padding: 10px 20px 15px 82px;
	text-indent: -15px;
	line-height: 140%;
	background: url(../images/color_col_base_mid_qa_l.gif) 16px 3px no-repeat;
}


/* ================================================================== */
/*                                                                    */
/* ! 2. Side Contents */
/*                                                                    */
/* ================================================================== */

body.index  #sideCont { margin-top: 30px; }
body.color  #sideCont { margin-top: 31px; }
body.thin   #sideCont { margin-top: 31px; }
body.curl   #sideCont { margin-top: 31px; }
body.scalp  #sideCont { margin-top: 31px; }
body.dry    #sideCont { margin-top: 31px; }
body.damage #sideCont { margin-top: 31px; }
body.uv     #sideCont { margin-top: 31px; }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.1. Product Info */
/*                                                                    */
/* ------------------------------------------------------------------ */

#pInfo { margin: 0 0 27px 0; }

#pInfo .cont {
	width: 190px;
	margin: -67px 0 0 0;
	padding: 20px 15px;
}

#pInfo a.pttl {
    padding: 0 0 0 14px;
    background: url(../../common/images/li_mark.gif) 0 2px no-repeat;
    color: #497288;
    text-decoration: none;
}
#pInfo a.pttl:visited { color: #497288; text-decoration: none; }
#pInfo a.pttl:hover   {
    background: url(../../common/images/li_mark_h.gif) 0 2px no-repeat;
    color: #00BEF3;
    text-decoration: underline;
}
#pInfo a.pttl:active  { color: #00BEF3; text-decoration: underline; }

#pInfo p { margin: 10px 0 0 0; }