/* =====================================================================
*
*    INDEX
*
*    1. YUI Reset
*    2. YUI Base
*    3. Base Format
*    4. YUI Reset Font
*    5. YUI Fonts
*    6. Base Fonts Format
*    7. Basic Hyperlink Format
*
* =================================================================== */

html, body { background: #000; }


/* =====================================================================
*
*    1. YUI Reset
*
*    Copyright (c) 2009, Yahoo! Inc. All rights reserved.
*    Code licensed under the BSD License:
*    http://developer.yahoo.net/yui/license.txt
*    version: 2.8.0r4
*
*    @module reset
*    @namespace
*    @requires
*
* =================================================================== */

html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-spacing:0;border-collapse:collapse;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-weight:inherit;font-style:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;}input,button,textarea,select{*font-size:100%;}


/* =====================================================================
*
*    2. YUI Base
*
*    Copyright (c) 2009, Yahoo! Inc. All rights reserved.
*    Code licensed under the BSD License:
*    http://developer.yahoo.net/yui/license.txt
*    version: 2.8.0r4
*
*    @module base
*    @namespace yui-
*    @requires reset, fonts
*
* =================================================================== */

ol li {
	/* Giving OL's LIs generated numbers. */
	list-style: decimal outside;
}

sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

p,
fieldset,
table,
pre {
	/* So things don't run into each other. */
	margin-bottom: 1em;
}

/* Opera requires 1px of passing to render with contemporary native chrome */
button,
input[type="checkbox"],
input[type="radio"],
input[type="reset"],
input[type="submit"] {
	padding:1px;
}


/* =====================================================================
*
*    3. Base Format
*
* =================================================================== */

ul li {
	list-style: none;
}

hr {
	display:none;
}

input {
	line-height: 1.2;
}

textarea {
	padding: 0.4em 10px;
}

img {
	vertical-align: bottom;
}

p {
	color: #444444;
	line-height: 165%;
}

h1, h2, h3, h4, h5, h6, li, dt, dd {
	color: #444444;
}

header,
hgroup,
nav,
section,
aside,
article,
figure,
figcaption,
footer { display: block; }

figure,
figcaption {
	margin: 0;
	padding: 0;
}

/* =====================================================================
*
*    4. YUI Reset Font
*
*    Copyright (c) 2009, Yahoo! Inc. All rights reserved.
*    Code licensed under the BSD License:
*    http://developer.yahoo.net/yui/license.txt
*    version: 2.8.0r4
*
* =================================================================== */

html{background:#000;color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-spacing:0;border-collapse:collapse;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-weight:inherit;font-style:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;}input,button,textarea,select{*font-size:100%;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font:100%;font-size:inherit;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;*font-size:108%;}


/* =====================================================================
*
*    5. YUI Fonts
*
*    Copyright (c) 2009, Yahoo! Inc. All rights reserved.
*    Code licensed under the BSD License:
*    http://developer.yahoo.net/yui/license.txt
*    version: 2.8.0r4
*
*    @module fonts
*    @namespace yui-
*    @requires
*
* =================================================================== */

/**
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
body {
	font:13px/1.231 arial,helvetica,clean,sans-serif;
	/* for IE6/7 */
	*font-size:small;
	/* for IE Quirks Mode */
	*font:x-small;
}

/**
 * Nudge down to get to 13px equivalent for these form elements
 */
select,
input,
button,
textarea,
button {
	font:99% arial,helvetica,clean,sans-serif;
}

/**
 * To help tables remember to inherit
 */
table {
	font:100%;
	font-size:inherit;
}

/**
 * Bump up IE to get to 13px equivalent for these fixed-width elements
 */
pre,
code,
kbd,
samp,
tt {
	font-family:monospace;
	line-height:100%;
	*font-size:108%;
}


/* =====================================================================
*
*    6. Basic Font Format
*
* =================================================================== */

/* ---------------------------------
*    Font Family
*/

body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS P Gothic', sans-serif;
}
;;body {
	font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', sans-serif;
}
*:first-child+html body {
	font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', sans-serif;
}
* html body {
	font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', sans-serif;
}


/* ---------------------------------
*    Font Size
*
*     77% = 10px    |    124% = 16px |    169% = 22px
*     85% = 11px    |    131% = 17px |    177% = 23px
*     93% = 12px    |    139% = 18px |    185% = 24px
*    100% = 13px    |    147% = 19px |    192% = 25px
*    108% = 14px    |    154% = 20px |    200% = 26px
*    116% = 15px    |    162% = 21px |
*/

.x-large   { font-size: 139%; }
.large     { font-size: 124%; }
.mid       { font-size: 108%; }
.small     { font-size:  93%; }
.x-small   { font-size:  85%; }
.xx-small  { font-size:  77%; }


/* =====================================================================
*
*    7. Basic Hyperlink Format
*
* =================================================================== */

/* \*/ a { overflow:hidden; outline:none; } /**/
/* \*/ a:focus { overflow:hidden; outline:none; } /**/

a         { color: #666666; text-decoration: none; }
a:visited { color: #666666; text-decoration: none; }
a:hover   { color: #CCCCCC; text-decoration: underline; }
a:active  { color: #CCCCCC; text-decoration: underline; }

::-moz-selection{
	background: #D20022;
	color: #FBFBFB;
}
::selection {
	background: #D20022;
	color: #FBFBFB;
}



/* ================================================================== */
/*                                                                    */
/* ! Common Styles */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    1. Common
*
*    2. Global Header
*       2.1. Global Navigation
*       2.2. Dropdown Menu
*       2.3. Slide Show
*
*    3. Main
*       3.1. Base
*
*    4. Global Footer
*       4.1. Breadcrumb
*       4.2. Footer Navigation
*       4.3. Copyright Container
*
* =================================================================== */


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

body { overflow-y: scroll; }

	* html body { overflow-y: hidden; }
	*:first-child+html body { overflow-y: hidden; }

.altText {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	font-size: 1px;
}

.textL { text-align: left; }
.textR { text-align: right; }
.textC { text-align: center; }


/* ---------------------------------
*    pagetop
*/

.pagetop {
	margin: 0 auto;
	padding: 16px 0 32px 0;
	width: 916px;
}

	.innerPagetop {
		padding: 16px 16px 32px 16px;
	}

.pagetop a {
	margin: 0 0 0 auto;
	width: 87px;
	height: 13px;
	background: url(/common/images/btn_pagetop.gif) -87px -26px no-repeat;
}
.pagetop a:link   { background-position: -87px -26px; }
.pagetop a:hover  { background-position: -87px -13px; }
.pagetop a:active { background-position: -87px 0; }

.innerPagetop a {
	margin: 0 0 0 auto;
	width: 87px;
	height: 13px;
	background: url(/common/images/btn_pagetop.gif) 0 -26px no-repeat;
}
.innerPagetop a:link   { background-position: 0 -26px; }
.innerPagetop a:hover  { background-position: 0 -13px; }
.innerPagetop a:active { background-position: 0 0; }


/* ---------------------------------
*    clearfix
*/

.clearfix:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
}


/* ---------------------------------
*    fancybox
*/

.fancyContents { display: none; }


/* ================================================================== */
/*                                                                    */
/* ! 2. Global Header */
/*                                                                    */
/* ================================================================== */

#globalHeader {
	display: inline;
	width: 100%;
	text-align: center;
}

#globalHeader #logo {
	margin: 0 auto;
	padding: 30px 0;
	width: 916px;
	height: 50px;
}

#globalHeader #logo .logo a {
	float: left;
	width: 283px;
	height: 50px;
	background: url(/common/images/logo.gif) no-repeat;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.1. Global Navigation */
/*                                                                    */
/* ------------------------------------------------------------------ */

#globalHeader nav {
	width: 100%;
	text-align: center;
}

#globalHeader nav .btnCont {
	z-index: 1000;
	margin: 0 auto;
	width: 972px; /* core.js で動的に生成するコンテナ */
	position: relative;
}

#globalHeader nav #globalBtn {
	overflow: hidden;
	margin: 0 auto;
	padding: 0 12px;
	width: 948px;
	height: 31px;
	background: #7C7C7C;
	text-align: left;
}



#globalBtn li { float: left; }

#globalBtn a {
	height: 31px;
	background: url(/common/images/gn.gif) 0  no-repeat;
}


/* ---------------------------------
*    ABOUT
*/

#globalBtn #gnAb { position: relative; }

#globalBtn #gnAb a        { width: 261px; background-position: 0 -62px; }
#globalBtn #gnAb a:hover  { background-position: 0 -31px; }


/* ---------------------------------
*    MAKE-UP
*/

#globalBtn #gnMa          { margin-left: 17px; }
#globalBtn #gnMa a        { position: relative; width: 128px; background-position: -261px -62px; }
#globalBtn #gnMa a:hover  { background-position: -261px -31px; }

#globalBtn #gnMa a span {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 31px;
	height: 31px;
	background: url(/common/images/gn.gif) -866px -62px no-repeat;
	cursor: pointer;
}


/* ---------------------------------
*    SKIN CARE
*/

#globalBtn #gnSk          { margin-left: 16px; }
#globalBtn #gnSk a        { position: relative; width: 121px; background-position: -389px -62px; }
#globalBtn #gnSk a:hover  { background-position: -389px -31px; }

	* html #globalBtn #gnSk a { margin-right: 1px; width: 121px; }

#globalBtn #gnSk a span {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 31px;
	height: 31px;
	background: url(/common/images/gn.gif) -866px -62px no-repeat;
	cursor: pointer;
}


/* ---------------------------------
*    SALON SEARCH
*/

#globalBtn #gnSa          { margin-left: 16px; }
#globalBtn #gnSa a        { width: 91px; background-position: -510px -62px; }
#globalBtn #gnSa a:hover  { background-position: -510px -31px; }


/* ---------------------------------
*    CAMPAIGN
*/

#globalBtn #gnCa          { margin-left: 16px; }
#globalBtn #gnCa a        { width: 135px; background-position: -601px -62px; }
#globalBtn #gnCa a:hover  { background-position: -601px -31px; }


/* ---------------------------------
*    BEAUTY Q&A
*/

#globalBtn #gnQa          { margin-left: 17px; }
#globalBtn #gnQa a        { width: 130px; background-position: -736px -62px; }
#globalBtn #gnQa a:hover  { background-position: -736px -31px; }


/* ---------------------------------
*    ACTIVE
*/

body#about #gnAb a,
body#about #gnAb a:hover { background-position: 0 0; }

body#makeup #gnMa a,
body#makeup #gnMa a:hover { background-position: -261px 0; }

body#skincare #gnSk a,
body#skincare #gnSk a:hover { background-position: -389px 0; }

body#salon #gnSa a,
body#salon #gnSa a:hover { background-position: -510px 0; }

body#campaign #gnCa a,
body#campaign #gnCa a:hover { background-position: -601px 0; }

body#qa #gnQa a,
body#qa #gnQa a:hover { background-position: -736px 0; }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.2. Dropdown Menu */
/*                                                                    */
/* ------------------------------------------------------------------ */

#dd-ma {
	position: absolute;
	top: 28px;
	left: -5px;
	z-index: 500;
	display: none;
	margin: 0 auto;
	width: 982px;
}

#dd-sk {
	position: absolute;
	top: 28px;
	left: -5px;
	z-index: 400;
	display: none;
	width: 982px;
}


/* ---------------------------------
*    Container    */

.ddConTop {
	width: 982px;
	height: 13px;
	background: url(/common/images/dd/dd_bg_top.png);
}

.ddConMid {
	padding: 0 15px;
	width: 952px;
	background: url(/common/images/dd/dd_bg_mid.png);
}

	#dd-ma .container { overflow: hidden; width: 952px; height: 356px; }
	#dd-sk .container { overflow: hidden; width: 952px; height: 237px; }

.ddConBtm {
	width: 982px;
	height: 17px;
	background: url(/common/images/dd/dd_bg_btm.png);
}


/* ------------------------------------------------------------------ */
/* ! 2.2.1. Button Definition */
/* ------------------------------------------------------------------ */

#dd-ma ul, #dd-sk ul {
	width: 952px;
	background: #CCCCCC;
}

#dd-ma ul li, #dd-sk ul li {
	position: relative;
	float: left;
	overflow: hidden;
	margin-right: 1px;
	margin-bottom: 1px;
	width: 118px;
	height: 118px;
}

	#dd-ma ul li.last, #dd-sk ul li.last {
		margin-right: 0;
		width: 119px;
	}

#dd-ma .cont, #dd-sk .cont {
	width: 118px;
	height: 118px;
	background: #FAFCFD;
}

#dd-ma .space, #dd-sk .space {
	width: 118px;
	height: 118px;
	background: #FAFCFD;
}


/* ---------------------------------
*    New Icon    */

#dd-ma .new {
	position: absolute;
	top: 39px !important;
	right: 9px !important;
	z-index: 100 !important;
	width: 33px;
	height: 33px;
}

	#dd-ma-powder .new { top: 46px !important; }

#dd-sk .new {
	position: absolute;
	top: 29px !important;
	right: 9px !important;
	z-index: 100 !important;
	width: 33px;
	height: 33px;
}


/* ---------------------------------
*    Open Button    */

#dd-ma .openBtn, #dd-sk .openBtn {
	position: absolute;
	top: 119px;
	left: 119px;
}


/* ================================================================== */
/*                                                                    */
/* ! 3. Main */
/*                                                                    */
/* ================================================================== */

#main a:link    { color: #444444; text-decoration: none; }
#main a:visited { color: #444444; text-decoration: none; }
#main a:hover   { color: #D20022; text-decoration: underline; }
#main a:active  { color: #D20022; text-decoration: underline; }

#main {
	position: relative;
	z-index: 10;
	width: 100%;
	text-align: center;
}

#main .wrapper {
	margin: 0 auto;
	padding: 17px 12px 20px 12px;
	width: 948px;
	background: url(/common/images/bg_2d2d2d_80.png);
	text-align: left;
}

#mainHeader {
	margin: 0 16px 17px 16px;
	height: 26px;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.1. Base */
/*                                                                    */
/* ------------------------------------------------------------------ */

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

.baseWhite {
	float: right;
	width: 632px;
	background: #FAFCFD;
}

.baseGray {
	float: right;
	width: 632px;
	background: #CCCCCC;
}

.baseWhiteWide {
	padding: 32px 16px;
	width: 916px;
	background: #FAFCFD;
}

.base-2col {
	background: url(/common/images/base_bg_2col.gif) repeat-y;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.2. Header */
/*                                                                    */
/* ------------------------------------------------------------------ */

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

.contentHeader h2 {
	height: 20px;
}

.contentHeader h2 span {
	float: left;
	height: 20px;
}

/* ================================================================== */
/*                                                                    */
/* ! 4. Side Area */
/*                                                                    */
/* ================================================================== */

.sideArea {
	float: left;
	width: 315px;
}

.sideArea a:link    { color: #999999; text-decoration: none; }
.sideArea a:visited { color: #999999; text-decoration: none; }
.sideArea a:hover   { color: #CCCCCC; text-decoration: underline; }
.sideArea a:active  { color: #CCCCCC; text-decoration: underline; }

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

aside .brandmovie {
	margin: 32px 0 0 16px;
	width: 272px;
}

aside .brandmovie h5 {
	margin: 0 0 16px 0;
}

aside .brandmovie .movieBody {
	overflow: hidden;
	padding: 4px;
	width: 264px;
	height: 178px;
	background: #444444;
}

aside .brandmovie .attention {
	margin-top: 20px;
	color: #999;
}


/* ================================================================== */
/*                                                                    */
/* ! 4. Global Footer */
/*                                                                    */
/* ================================================================== */

#globalFooter {
	position: relative;
	z-index: 10;
	margin: 0 auto 0 auto;
	padding: 0 28px 32px 28px;
	width: 916px;
}

#globalFooter a:link    { color: #666666; text-decoration: none; }
#globalFooter a:visited { color: #666666; text-decoration: none; }
#globalFooter a:hover   { color: #CCCCCC; text-decoration: underline; }
#globalFooter a:active  { color: #CCCCCC; text-decoration: underline; }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 4.3. Copyright Container */
/*                                                                    */
/* ------------------------------------------------------------------ */

#copyContainer {
	margin-top: 16px;
	padding: 14px 0 30px 0;
}

#copyContainer .cont {
	width: 100%;
	height: 25px;
}


/* ---------------------------------
*    Mail Magazine
*/

#mailmagazine {
	float: left;
	width: 89px;
}

#mailmagazine a {
	width: 89px;
	height: 11px;
	background-image: url(/common/images/footer.gif);
	background-position: -100px -11px;
	background-repeat: no-repeat;
}
#mailmagazine a:hover { background-position: -100px 0px; }


/* ---------------------------------
*    Privacypolicy
*/

#privacy {
	float: left;
	margin-right: 24px;
}

#privacy a {
	width: 114px;
	height: 11px;
	background-image: url(/common/images/footer.gif);
	background-position: 0 -11px;
	background-repeat: no-repeat;
}
#privacy a:hover  { background-position: 0 0; }


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

#footerCatch {
	float: right;
	width: 121px;
	height: 11px;
	background-image: url(/common/images/footer.gif);
	background-position: -189px -11px;
	background-repeat: no-repeat;
}

/* ---------------------------------
*    Footer Banner
*/

#footerBanner {
	margin: -15px 0 0 0;
	text-align: right;
}


/* ---------------------------------
*    Copyright
*/

#copyright {
	float: right;
	margin: 16px 0 0 0;
	width: 195px;
	height: 11px;
	background-image: url(/common/images/footer.gif);
	background-position: -310px -11px;
	background-repeat: no-repeat;
}