/* ================================================================== */
/*                                                                    */
/* ! Beauty Q&A */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    1. Common
*
*    2. Main
*       2.1. Big Banner
*       2.2. Contents
*            2.2.1. Content Header
*            2.2.2. Point List
*            2.2.2. Content Footer
*
*    3. Side Area
*       3.1. Recommend List
*
* =================================================================== */


/* ================================================================== */
/*                                                                    */
/* ! 1. Common */
/*                                                                    */
/* ================================================================== */

#slideBox { width: 345px; margin-left: 572px; }

body #mainHeader h1 a {
	width: 321px;
	height: 23px;
	background: url(/qa/images/title.png) no-repeat;
}

body #catchDesc { /* base on core.css */
	background: url(/qa/images/header_desc.png) no-repeat;
}

.contWrapper {
	position: relative;
}


/* ================================================================== */
/*                                                                    */
/* ! 2. Main */
/*                                                                    */
/* ================================================================== */

body.index #qaList {
	width: 948px;
}

body.index #qaList li {
	position: relative;
	width: 948px;
	height: 316px;
	overflow: hidden;
	margin: 0 0 16px 0;
}

	body.index #qaList li.last { margin: 0; }

body.index .new {
	position: absolute;
	z-index: 10;
	left: 16px;
	top: 16px;
}

body.index .openBtn {
	position: absolute;
	bottom: -44px;
	right: -43px;
}

	* html body.index .openBtn  { position: absolute; top: -43px;}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.1. Big Banner */
/*                                                                    */
/* ------------------------------------------------------------------ */

.bigBanner {
	position: relative;
	width: 948px;
	min-height: 316px;
	height: auto !important;
	height: 316px;
}

.bigBanner .cont {
	float: right;
	width: 600px;
	min-height: 292px;
	height: auto !important;
	height: 292px;
	overflow: hidden;
	padding: 24px 16px  0 16px;
	background: #FAFCFD;
}

.bigBanner .qavisual {
	float: left;
}

.bigBanner p {
	margin-bottom: 8px;
}

#ribbon {
	position: absolute;
	z-index: 100;
	right: 0;
	top: 0;
}


	/* ================================================================== */
	/*                                                                    */
	/* ! 初心者メイクテクニック */
	/*                                                                    */
	/* ================================================================== */

	#qa1 .bigBanner h2,
	body.beginner .bigBanner h2 {
		height: 40px;
		margin-bottom: 16px;
		background: url(/qa/beginner/images/index_ttl.gif) 299px 0 no-repeat;
	}
	
	#qa1 .bigBanner .catch,
	body.beginner .bigBanner .catch {
		width: 287px;
		height: 61px;
		margin-bottom: 32px;
		background: url(/qa/beginner/images/index_subttl.gif) no-repeat;
	}


	/* ================================================================== */
	/*                                                                    */
	/* ! 夏肌美人のマル秘テクニック */
	/*                                                                    */
	/* ================================================================== */

	#qa2 .bigBanner,
	body.summer .bigBanner {
		background: url(/qa/summer/images/header_bg.jpg) no-repeat;
	}

	#qa2 .bigBanner .cont,
	body.summer .bigBanner .cont {
		background: transparent;
	}

	#qa2 .bigBanner h2,
	body.summer .bigBanner h2 {
		width: 255px;
		height: 40px;
		margin-left: auto;
		margin-bottom: 16px;
		background: url(/qa/summer/images/header_ttl.png) no-repeat;
	}
	
	#qa2 .bigBanner .catch,
	body.summer .bigBanner .catch {
		width: 263px;
		height: 62px;
		margin-bottom: 32px;
		background: url(/qa/summer/images/header_desc.png) no-repeat;
	}
	

	/* ================================================================== */
	/*                                                                    */
	/* ! あなたの“綺麗”をつくるサロンスタッフの技術 */
	/*                                                                    */
	/* ================================================================== */

	#qa3 .bigBanner {
		background: url(/about/institute/images/header_bg.jpg) right top no-repeat;
	}

	#qa3 .bigBanner .cont {
		background: transparent;
	}
		
	#qa3 .bigBanner .hgroup {
		width: 600px;
	}
	
	#qa3 .bigBanner h2 {
		height: 66px;
		margin: 52px 0 0 0;
		background: url(/about/institute/images/header_ttl2.png) no-repeat;
	}
	
	#qa3 .bigBanner .subttl {
		position: absolute;
		top: 24px;
		height: 44px;
		width: 179px;
		margin-left: 421px;
		background: url(/about/institute/images/header_subttl.png) no-repeat;
	}
	
	#qa3 .bigBanner .desc {
		width: 600px;
		margin: 16px 0;
	}
	
	#qa3 .bigBanner .desc p {
		margin-bottom: 6px;
		color: #DDDDDD;
		text-shadow: 0 1px 0 #000000;
	}


	/* ================================================================== */
	/*                                                                    */
	/* ! 3ステップで完成！春夏のツヤ肌づくりパーフェクトガイド */
	/*                                                                    */
	/* ================================================================== */

	#qa4 .bigBanner,
	body.tsuyahada .bigBanner {
		background: url(/qa/tsuyahada/images/header_bg.jpg) right top no-repeat;
	}

	#qa4 .bigBanner figure,
	body.tsuyahada .bigBanner figure {
		float: left;
	}

	#qa4 .bigBanner .hgroup,
	body.tsuyahada .bigBanner .hgroup {
		position: relative;
		float: right;
		width: 600px;
		padding: 24px 16px 0 0;
	}

	#qa4 .bigBanner h1,
	body.tsuyahada .bigBanner h1 {
		height: 69px;
		margin-top: 38px;
		margin-bottom: 24px;
		background: url(/qa/tsuyahada/images/header_ttl.png) no-repeat;
	}
	
	#qa4 .bigBanner .subttl,
	body.tsuyahada .bigBanner .subttl {
		position: absolute;
		top: 24px;
		width: 131px;
		height: 14px;
		margin: 0 0 0 470px;
		background: url(/qa/tsuyahada/images/header_subttl.png) no-repeat;
	}

	#qa4 .bigBanner .desc,
	body.tsuyahada .bigBanner .desc {
		position: relative;
		float: right;
		width: 600px;
		padding: 0 16px 0 0;
	}

	#qa4 .bigBanner .desc p,
	body.tsuyahada .bigBanner .desc p {
		color: #FAFCFD;
		text-shadow: 0 1px 0 #60595A
	}


	/* ================================================================== */
	/*                                                                    */
	/* ! 疲れた夏肌を元気にする美肌食材 */
	/*                                                                    */
	/* ================================================================== */

	#qa5 .bigBanner,
	body.bihada_foods .bigBanner {
		background: url(/qa/bihada_foods/images/header_bg.jpg) right top no-repeat;
	}

	#qa5 .bigBanner .cont,
	body.bihada_foods .bigBanner .cont {
		background: transparent;
	}

	#qa5 .bigBanner h1,
	body.bihada_foods .bigBanner h1 {
		width: 441px;
		height: 28px;
		margin-bottom: 16px;
		background: url(/qa/bihada_foods/images/header_ttl.png) no-repeat;
	}
	
	#qa5 .bigBanner .subttl,
	body.bihada_foods .bigBanner .subttl {
		width: 274px;
		height: 14px;
		margin-left: 326px;
		margin-bottom: 67px;
		background: url(/qa/bihada_foods/images/header_subttl.png) no-repeat;
	}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.2. Contents */
/*                                                                    */
/* ------------------------------------------------------------------ */

.contWrapper {
	width: 948px;
	padding-top: 40px;
}

.contents {
	float: right;
	width: 632px;
}


/* ------------------------------------------------------------------ */
/* ! 2.2.1. Content Header */
/* ------------------------------------------------------------------ */

.contentHeader {
	padding: 19px 16px 24px 16px;
	background: #DDDDDD;
}

.contentHeader h3 {
	width: 100%;
}

.contentHeader h3 img {
	float: left;
	margin-right: 10px;
}

.contentHeader h3 span {
	float: left;
	height: 27px;
}

.contentHeader .desc {
	clear: both;
	padding-top: 16px;
}


/* ------------------------------------------------------------------ */
/* ! 2.2.3. Content Footer */
/* ------------------------------------------------------------------ */

article footer {
	position: relative;
	width: 600px;
	padding: 8px 16px 32px 16px;
	background: #FAFCFD;
}

article footer a:link    { color: #444444 !important; text-decoration: none; }
article footer a:visited { color: #444444 !important; text-decoration: none; }
article footer a:hover   { color: #D20022 !important; text-decoration: underline; }
article footer a:active  { color: #D20022 !important; text-decoration: underline; }

article footer p {
	position: absolute;
	width: 600px;
	bottom: 27px;
	text-align: center;
}

article footer a {
	position: relative;
	z-index: 10;
}


/* ---------------------------------
*    Page Navigation    */

#pageNav {
	width: 100%;
	height: 1em;
	line-height: 100%;
}

#pageNav .prev {
	float: left;
}

#pageNav .next {
	float: right;
}

#pageNav .prev a {
	padding-left: 16px;
	background: url(/common/images/li_arrow.gif) left -758px no-repeat;
}

#pageNav .next a {
	padding-right: 16px;
	background: url(/common/images/li_arrow.gif) right -250px no-repeat;
}


/* ================================================================== */
/*                                                                    */
/* ! 3. Side Area */
/*                                                                    */
/* ================================================================== */

aside {
	float: left;
	width: 316px;
	padding: 23px 0 0 0;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.1. Recommend List */
/*                                                                    */
/* ------------------------------------------------------------------ */

aside h4 {
	padding-left: 16px;
}

#floatMenu {
	position: absolute;
	top: 64px;
	left: 0;
}

ul#recList {
	width: 272px;
	margin: 0 28px 0 16px;
}

#recList li.item {
	position: relative;
	width: 272px;
	padding: 24px 0 20px 0;
	border-bottom: #666666 3px solid;
}

#recList h5 {
	color: #CCCCCC;
	line-height: 150%;
}

#recList .thumb {
	padding: 16px 0 24px 0;
}

#recList .desc li {
	color: #999999;
	padding-bottom: 4px;
}

#recList .prodBtn {
	position: absolute;
	bottom: 24px;
	right: 0;
}

	* html #recList .prodBtn { top: -24px; }

#recList .colortip {
	margin-top: 16px;
}

#recList .colortip a {
	font-size: 16px;
	padding-right: 8px;
	padding-bottom: 8px;
	line-height: 24px;
}

	*:first-child+html #recList .colortip a { font-size: 24px; padding-right: 0; }

#recList .colortip a:link    { text-decoration: none; }
#recList .colortip a:visited { text-decoration: none; }
#recList .colortip a:hover   { text-decoration: none; }
#recList .colortip a:active  { text-decoration: none; }

#recList .attention {
	color: #999999;
	padding-top: 8px;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.2. Big Banner */
/*                                                                    */
/* ------------------------------------------------------------------ */

.bigbnr {
	width: 276px;
	padding: 24px 14px 0 26px;
}

.bigbnrTop {
	padding-bottom: 32px !important;
}

.bigbnr p {
	padding: 32px 2px 12px 2px;
	color: #FBFBFB;
	font-weight: bold;
}


/* ================================================================== */
/*                                                                    */
/* ! 3. Side Area */
/*                                                                    */
/* ================================================================== */

#floatMenu {
	position: absolute;
	top: 64px;
	left: 0;
}


/* ---------------------------------
*    Step Tree    */

ul.stepTree {
	position: relative;
	z-index: 100;
	width: 272px;
	margin: -24px 27px 0 16px;
	padding: 25px 0 19px 0;
	border-bottom: #444444 3px solid;
	background: url(/common/images/bdr_666666_dot_1px.gif) left top repeat-x;
}

.stepTree a:link    { color: #CCCCCC !important; text-decoration: none; }
.stepTree a:visited { color: #CCCCCC !important; text-decoration: none; }
.stepTree a:hover   { color: #FBFBFB !important; text-decoration: underline; }
.stepTree a:active  { color: #FBFBFB !important; text-decoration: underline; }

.stepTree li h5 {
	padding-bottom: 4px;
}

.stepTree li h5 img { padding-right: 6px; } 

.stepTree li.active h5 {
	padding-bottom: 16px;
	font-weight: bold;
	color: #FBFBFB;
}

.stepTree li.active h5 img { padding-right: 6px; } 

.stepTree ul.secondlayer li {
	width: 240px;
	padding-left: 16px;
	padding-bottom: 8px;
	background: url(/common/images/li_arrow.gif) 2px 0 no-repeat;
	line-height: 150%;
	color: #999999;
}