/* ================================================================== */
/*                                                                    */
/* ! Campaign */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    1. Common
*
*    2. Main
*       2.1. Big Banner
*       2.2. Contents
*
*    3. Side Area
*
* =================================================================== */


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

#slideBox { width: 439px; margin-left: 547px; }

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

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

.bigBannerBottom {
	float: right;
	width: 632px;
	margin-top: 24px;
}


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

body.index #caList li {
	position: relative;
	width: 632px;
	height: 210px;
	margin-bottom: 16px;
	overflow: hidden;
}

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

body.index #caList article {
	width: 948px;
	height: 316px;
	overflow: hidden;
}

body.index #caList .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 */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    キャンペーン&特集トップに Big Banner として表示させたいコンテンツのみ、
*    以下にスタイルを記述。Big Bannerから外した際には、該当コンテンツのCSSへ
*    転記し、以下からは削除する。
*
/* ------------------------------------------------------------------ */

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

.bigBanner figure {
	float: left;
	width: 315px;
}


/* ------------------------------------------------------------------ */
/* ! ca4 アトリエメイド エターナルレメディから、待望のエッセンス、登場！ */
/* ------------------------------------------------------------------ */

.ca4 .bigBanner {
    background: url(/campaign/autumn2010_skincare/images/header_bg.jpg) right top no-repeat;
}

.ca4 .bigBanner hgroup {
    float: right;
    width: 600px;
    padding: 24px 16px;
}

.ca4 .bigBanner h2 {
    width: 224px;
    height: 40px;
    margin-left: auto;
    margin-bottom: 16px;
    background: url(/campaign/autumn2010_skincare/images/header_ttl.png) no-repeat;
}

.ca4 .bigBanner h3 {
    height: 59px;
    background: url(/campaign/autumn2010_skincare/images/header_subttl.png) no-repeat;
}	

.ca4 .bigBanner .desc {
    float: right;
    width: 600px;
    padding: 0 16px;
}
    
.ca4 .bigBanner .desc p {
    margin-bottom: 10px;
    text-shadow: 0 1px 0 #EBFCFF;
}


/* ------------------------------------------------------------------ */
/* ! ca5 最新アイラッシュトレンド */
/* ------------------------------------------------------------------ */

.ca5 .bigBanner {
    background: #211111 url(/campaign/autumn2010_eyelash/images/header_bg.jpg) left top repeat-x;
}

.ca5 .bigBanner hgroup {
    float: right;
    width: 600px;
    padding: 24px 16px;
}

.ca5 .bigBanner h2 {
    width: 186px;
    height: 40px;
    margin-left: auto;
    margin-bottom: 16px;
    background: url(/campaign/autumn2010_eyelash/images/header_ttl.png) no-repeat;
}

.ca5 .bigBanner h3 {
    height: 58px;
    background: url(/campaign/autumn2010_eyelash/images/header_subttl.png) no-repeat;
}	

.ca5 .bigBanner .desc {
    float: right;
    width: 600px;
    padding: 0 16px;
}
    
.ca5 .bigBanner .desc p {
    margin-bottom: 10px;
    color: #999999;
}


/* ------------------------------------------------------------------ */
/* ! ca6 限定アイテムで表現する「フローレセント メイクアップ開花」 */
/* ------------------------------------------------------------------ */

.ca6 .bigBanner {
    background: url(/campaign/autumn2010_makeup/images/header_bg.jpg) right top no-repeat;
}

.ca6 .bigBanner hgroup {
    float: right;
    width: 600px;
    padding: 24px 16px;
}

.ca6 .bigBanner h2 {
    width: 274px;
    height: 40px;
    margin-left: auto;
    margin-bottom: 40px;
    background: url(/campaign/autumn2010_makeup/images/header_ttl.png) no-repeat;
}

.ca6 .bigBanner h3 {
    height: 58px;
    background: url(/campaign/autumn2010_makeup/images/header_subttl.png) no-repeat;
}	

.ca6 .bigBanner .desc {
    position: relative;
    float: right;
    width: 600px;
    padding: 0 16px;
}
    
.ca6 .bigBanner .desc p {
    margin-bottom: 10px;
    color: #222222;
}

.ca6 .bigBanner .headerSign {
    position: absolute;
    left: 16px;
    top: -164px;
}


/* ------------------------------------------------------------------ */
/* ! ca7 ヘア&メイクアップ体験キャンペーン */
/* ------------------------------------------------------------------ */

.ca7 .bigBanner {
    background: url(/campaign/hair_makeup/images/header_bg.jpg) right top repeat-x;
}

.ca7 .bigBanner hgroup {
    float: right;
    width: 600px;
    padding: 42px 16px 24px 16px;
}

.ca7 .bigBanner h2 {
    width: 600px;
    height: 66px;
    margin-left: auto;
    margin-bottom: 24px;
    background: url(/campaign/hair_makeup/images/header_ttl.png) no-repeat;
}

.ca7 .bigBanner h3 {
    height: 25px;
    margin-bottom: 26px;
    background: url(/campaign/hair_makeup/images/header_date.png) no-repeat;
}	

.ca7 .bigBanner .desc {
    position: relative;
    float: right;
    width: 600px;
    padding: 0 16px;
}
    
.ca7 .bigBanner .desc p {
	width: 438px;
	height: 67px;
	background: url(/campaign/hair_makeup/images/header_desc.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/* ! ca8 備えあれば憂いなし！素肌の冬装備、5つの秘訣。 */
/* ------------------------------------------------------------------ */

.ca8 .bigBanner {
    background: url(/campaign/winter2010_skincare/images/header_bg.jpg) left top repeat-x;
}

.ca8 .bigBanner .visual {
	float: left;
}

.ca8 .bigBanner .hgroup {
    float: right;
    width: 600px;
    padding: 30px 16px 0 0;
}

.ca8 .bigBanner h1 {
    width: 367px;
    height: 59px;
    margin-bottom: 24px;
    background: url(/campaign/winter2010_skincare/images/header_subttl.png) no-repeat;
}

.ca8 .bigBanner p.subttl {
	width: 210px;
    height: 14px;
    margin-left: 390px;
    margin-bottom: 32px;
    background: url(/campaign/winter2010_skincare/images/header_ttl.png) right top no-repeat;
}	

.ca8 .bigBanner .desc {
    float: right;
    width: 600px;
    padding: 0 16px 0 0;
}
    
.ca8 .bigBanner .desc p {
	color: #007193;
	margin-bottom: 10px;
	text-shadow: 0 1px 1px #FFFFFF;
}


/* ------------------------------------------------------------------ */
/* ! ca9 ヘア&メイクアップ体験キャンペーン */
/* ------------------------------------------------------------------ */

.ca9 .bigBanner {
    background: url(/campaign/winter2010_makeup/images/header_bg.jpg) right top no-repeat;
}

.ca9 .bigBanner .hgroup {
    float: right;
    width: 600px;
    padding: 30px 16px 16px 16px;
}

.ca9 .bigBanner .subttl {
    width: 236px;
    height: 39px;
    margin-left: 364px;
    margin-bottom: 30px;
    background: url(/campaign/winter2010_makeup/images/header_subttl.png) no-repeat;
}

.ca9 .bigBanner h1 {
    height: 61px;
    background: url(/campaign/winter2010_makeup/images/header_ttl.png) no-repeat;
}	

.ca9 .bigBanner .desc {
    position: relative;
    float: right;
    width: 600px;
    padding: 0 16px;
}
    
.ca9 .bigBanner .desc p {
	margin-bottom: 8px;
	color: #B9B9B9;
}


/* ------------------------------------------------------------------ */
/* ! ca10 コアフュール・マキユール ディレクター特集 */
/* ------------------------------------------------------------------ */

.ca10 .bigBanner {
    background: url(/campaign/director/images/header_bg.gif) right top repeat-y;
}

.ca10 .bigBanner .hgroup {
    float: right;
    width: 600px;
    padding: 30px 16px 16px 16px;
}

.ca10 .bigBanner .subttl {
    width: 321px;
    height: 14px;
    margin-left: 279px;
    margin-bottom: 56px;
    background: url(/campaign/director/images/header_subttl.png) no-repeat;
}

.ca10 .bigBanner h1 {
    height: 58px;
    background: url(/campaign/director/images/header_ttl.png) no-repeat;
}	

.ca10 .bigBanner .desc {
    position: relative;
    float: right;
    width: 600px;
    padding: 0 16px;
}
    
.ca10 .bigBanner .desc p {
	margin-bottom: 8px;
}


/* ------------------------------------------------------------------ */
/* ! ca11 2011年の運勢と開運カラー */
/* ------------------------------------------------------------------ */

.ca11 .bigBanner {
    background: url(/campaign/fortunetelling2011/images/header_bg.jpg) right top no-repeat;
}

.ca11 .bigBanner .cont {
    float: right;
}

.ca11 .bigBanner .hgroup {
    width: 600px;
    padding: 30px 16px 16px 16px;
}

.ca11 .bigBanner .subttl {
    width: 213px;
    height: 14px;
    margin-left: 387px;
    margin-bottom: 56px;
    background: url(/campaign/fortunetelling2011/images/header_subttl.png) no-repeat;
}

.ca11 .bigBanner h1 {
    height: 28px;
    background: url(/campaign/fortunetelling2011/images/header_ttl.png) no-repeat;
}	

.ca11 .bigBanner .desc {
    width: 600px;
    padding: 0 16px;
}


/* ------------------------------------------------------------------ */
/* ! ca12 限定アイテムで楽しむ「モルフォリアム メイクアップ」 */
/* ------------------------------------------------------------------ */

.ca12 .bigBanner {
    background: url(/campaign/spring2011_makeup/images/header_bg.jpg) right top no-repeat;
}

.ca12 .bigBanner .hgroup {
    float: right;
    width: 600px;
    padding: 24px 16px;
}

.ca12 .bigBanner h1 {
    width: 235px;
    height: 40px;
    margin-left: 365px;
    margin-bottom: 40px;
    background: url(/campaign/spring2011_makeup/images/header_ttl.png) no-repeat;
}

.ca12 .bigBanner .subttl {
    height: 25px;
    background: url(/campaign/spring2011_makeup/images/header_subttl.png) no-repeat;
}	

.ca12 .bigBanner .desc {
    position: relative;
    float: right;
    width: 600px;
    padding: 0 16px;
}
    
.ca12 .bigBanner .desc p {
    margin-bottom: 10px;
    color: #222222;
}

.ca12 .bigBanner .headerSign {
    position: absolute;
    left: -25px;
    top: -129px;
}


/* ------------------------------------------------------------------ */
/* ! ca14 シュウ ウエムラがこだわった “美しさへの水” */
/* ------------------------------------------------------------------ */

.ca14 .bigBanner {
    background: url(/campaign/summer2011_skincare/images/header_bg.jpg) right top no-repeat;
}

.ca14 .bigBanner .cont {
    float: right;
    width: 916px;
    padding: 23px 16px 0 16px;
}

.ca14 .bigBanner h1 {
    width: 345px;
    height: 77px;
	margin: 30px 0 40px 279px;
    margin-bottom: 40px;
    background: url(/campaign/summer2011_skincare/images/header_ttl.png) no-repeat;
}

.ca14 .bigBanner .subttl {
    height: 22px;
    width: 290px;
	margin: 0 0 0 627px;
    background: url(/campaign/summer2011_skincare/images/header_subttl.png) no-repeat;
}	
    
.ca14 .bigBanner .desc p {
	margin-left: 316px;
    margin-bottom: 10px;
    color: #FAFCFD;
    text-shadow: 0 1px 0 #161860;
}


/* ------------------------------------------------------------------ */
/* ! ca15 毎日を楽しくするカラーセラピー */
/* ------------------------------------------------------------------ */

.ca15 .bigBanner {
    background: url(/campaign/summer2011_makeup/images/header_bg.jpg) right top no-repeat;
}

.ca15 .bigBanner .cont {
    float: right;
}

.ca15 .bigBanner .hgroup {
    width: 600px;
    padding: 30px 16px 16px 16px;
}

.ca15 .bigBanner .subttl {
    width: 152px;
    height: 14px;
    margin-left: 448px;
    margin-bottom: 56px;
    background: url(/campaign/summer2011_makeup/images/header_subttl.png) no-repeat;
}

.ca15 .bigBanner h1 {
    height: 29px;
    background: url(/campaign/summer2011_makeup/images/header_ttl.png) no-repeat;
}	

.ca15 .bigBanner .desc {
    width: 600px;
    padding: 0 16px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}


/* ------------------------------------------------------------------ */
/* ! ca16 私に似合う、ポイント メイクアップ 体験キャンペーン */
/* ------------------------------------------------------------------ */

.ca16 .bigBanner {
    background: url(/campaign/point_makeup/images/bigbnr_bg.jpg) left top no-repeat;
}

.ca16 .bigBanner .cont {
	position: relative;
    width: 916px;
    padding: 47px 28px 0 28px;
}

.ca16 .bigBanner h1 {
    width: 538px;
    height: 79px;
    margin: 0 0 19px 0;
    background: url(/campaign/point_makeup/images/bigbnr_ttl.png) no-repeat;
}	

.ca16 .bigBanner .pic {
	position: absolute;
	left: 416px;
	top: 97px;
}

.ca16 .bigBanner .desc {
	width: 385px;
	height: 79px;
	margin: 0 0 39px 0;
	background: url(/campaign/point_makeup/images/bigbnr_desc.png) no-repeat;
}

.ca16 .bigBanner .date {
	width: 480px;
	height: 21px;
	background: url(/campaign/point_makeup/images/bigbnr_date.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/* ! ca17 ノバディーバ */
/* ------------------------------------------------------------------ */

.ca17 .bigBanner {
    background: url(/campaign/autumn2011_makeup/images/header_bg.jpg) right top no-repeat;
}

.ca17 .bigBanner .visual {
	float: left;
}

.ca17 .bigBanner .cont {
	position: relative;
    float: right;
    width: 632px;
	padding: 46px 0 0 0;
}

.ca17 .bigBanner h1 {
    width: 291px;
    height: 70px;
    margin-left: -4px;
    margin-bottom: 10px;
    background: url(/campaign/autumn2011_makeup/images/header_ttl.png) no-repeat;
}

.ca17 .bigBanner .subttl {
	position: absolute;
	left: 353px;
	top: 22px;
	width: 263px;
    height: 43px;
    background: url(/campaign/autumn2011_makeup/images/header_subttl.png) no-repeat;
}	

.ca17 .bigBanner .catch {
    width: 592px;
    height: 21px;
    margin: 0 16px 24px 16px;
    background: url(/campaign/autumn2011_makeup/images/header_desc.png) no-repeat;
}

.ca17 .bigBanner .desc {
	margin: 0 16px;
}

.ca17 .bigBanner .desc p {
    margin-bottom: 10px;
    color: #e2e3f5;
}


/* ------------------------------------------------------------------ */
/* ! ca18 毎日を楽しくするカラーセラピー */
/* ------------------------------------------------------------------ */

.ca18 .bigBanner {
    background: url(/campaign/bijin_quiz/images/header_bg.jpg) right top no-repeat;
}

.ca18 .bigBanner .cont {
    float: right;
}

.ca18 .bigBanner .hgroup {
    width: 612px;
    padding: 30px 10px 16px 10px;
}

.ca18 .bigBanner .subttl {
    width: 124px;
    height: 14px;
    margin-left: 482px;
    margin-bottom: 31px;
    background: url(/campaign/bijin_quiz/images/header_subttl.gif) no-repeat;
}

.ca18 .bigBanner h1 {
    width: 612px;
    height: 114px;
    margin: 0 0 0 0;
    background: url(/campaign/bijin_quiz/images/header_ttl.gif) no-repeat;
}	

.ca18 .bigBanner .desc {
    width: 600px;
    padding: 0 16px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}


/* ------------------------------------------------------------------ */
/* ! ca20 ヘアカラーとコーディネートして魅せる、ウィンター メイクアップ */
/* ------------------------------------------------------------------ */

.ca20 .bigBanner {
    background: url(/campaign/winter2011_makeup/images/header_base.jpg) right top no-repeat;
}

.ca20 .bigBanner .cont {
    float: right;
}

.ca20 .bigBanner .hgroup {
    width: 600px;
    padding: 30px 16px 24px 16px;
}

.ca20 .bigBanner .subttl {
    width: 275px;
    height: 14px;
    margin-left: 321px;
    margin-bottom: 45px;
    background: url(/campaign/winter2011_makeup/images/header_subttl.png) no-repeat;
}

.ca20 .bigBanner h1 {
    width: 462px;
    height: 60px;
    margin: 0 0 0 0;
    background: url(/campaign/winter2011_makeup/images/header_ttl.png) no-repeat;
}	

.ca20 .bigBanner .desc {
    width: 600px;
    margin: 0;
    padding: 0 16px 0 16px;
}

.ca20 .bigBanner .desc p {
	padding: 0 0 8px 0;
    color: #B8B8B8;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
}


/* ------------------------------------------------------------------ */
/* ! ca21 セレスチャル ガーデン */
/* ------------------------------------------------------------------ */

.ca21 .bigBanner {
    background: url(/campaign/spring2012_makeup/images/header_bg.jpg) right top no-repeat;
}

.ca21 .bigBanner .cont {
	position: relative;
    float: right;
    width: 632px;
    padding: 0;
}

.ca21 .bigBanner .catch {
	position: absolute;
	left: 13px;
	top: 7px;
}

.ca21 .bigBanner .subttl {
	position: absolute;
	left: 292px;
	top: 29px;
    width: 325px;
    height: 53px;
    background: url(/campaign/spring2012_makeup/images/header_subttl.png) no-repeat;
}

.ca21 .bigBanner .descCont {
	position: absolute;
	left: 16px;
	top: 112px;
	width: 600px;
}

.ca21 .bigBanner h1 {
    width: 496px;
    height: 26px;
    margin: 0 0 12px 0;
    background: url(/campaign/spring2012_makeup/images/header_ttl.png) no-repeat;
}	

.ca21 .bigBanner .desc {
	margin: 0 0 4px 0;
	color: #122151;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}


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

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


.contWrapper a:link    { color: #D20022 !important; text-decoration: none; }
.contWrapper a:visited { color: #D20022 !important; text-decoration: none; }
.contWrapper a:hover   { color: #D20022 !important; text-decoration: underline; }
.contWrapper a:active  { color: #D20022 !important; text-decoration: underline; }


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

aside {
	float: left;
	width: 316px;
	margin: -1px 0 0 0;
	padding: 0 0 0 0;
}

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


/* ---------------------------------
*    Big Banner    */

aside .bigbnr {
	padding-top: 23px;
}


/* ---------------------------------
*    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;
}