@charset "utf-8";


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

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

html {
	color: #000;
	background: #FFF;
}

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-collapse: collapse;
	border-spacing: 0;
}

fieldset, img {
	border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var, optgroup {
	font-style: inherit;
	font-weight: inherit;
}

del, ins {
	text-decoration: none;
}

li {
	list-style: none;
}

caption, th {
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before, q:after {
	content: '';
}

abbr, acronym {
	border: 0;
	font-variant: normal;
}

sup {
	vertical-align: baseline;
}

sub {
	vertical-align: baseline;
}

/*because legend doesn't inherit in IE */
legend {
	color: #000;
}

input, button, textarea, select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
	*font-size: 100%;
}

 
/* =====================================================================
*
*    2. Basic Format
*
* =================================================================== */

html { background-color: transparent; }
 
body {
	color: #1B1310;
}
 
hr {
	display:none;
}
 
input {
	line-height: 1.2;
}
 
textarea {
	padding: 0.4em 10px;
}
 
img {
	vertical-align: bottom;
}

p {
	color: #555555;
	line-height: 150%;
}


/* =====================================================================
*
*    Copyright (c) 2009, Yahoo! Inc. All rights reserved.
*    Code licensed under the BSD License:
*    http://developer.yahoo.net/yui/license.txt
*    version: 2.7.0
*    
*    3. YUI Fonts
*    @module fonts
*    @namespace yui-
*    @requires 
*    
*     77% = 10px	|	123.1% = 16px	|	167% = 22px	
*     85% = 11px	|	  131% = 17px	|	174% = 23px
*     93% = 12px	|	138.5% = 18px	|	182% = 24px
*    100% = 13px	|	146.5% = 19px	|	189% = 25px
*    108% = 14px	|	153.9% = 20px	|	197% = 26px
*    116% = 15px	|	161.6% = 21px	|
*
* =================================================================== */

 
/**
 * YUI Fonts
 * @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-size:inherit;
	font:100%;
}

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


/* =====================================================================
*
*    4. 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
*/

.x-large   { font-size: 174%; }
.large     { font-size: 146.5%; }
.mid       { font-size: 123.1%; }
.small     { font-size:  93%; }
.x-small   { font-size:  77%; letter-spacing: 1px; }


/* =====================================================================
*
*    5. Basic Hyperlink Format
*
* =================================================================== */

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

a         { color: #00BEF3; text-decoration: none; }
a:visited { color: #00BEF3; text-decoration: none; }
a:hover   { color: #00BEF3; text-decoration: underline; }
a:active  { color: #497288; text-decoration: underline; }

a.altText:hover { background-color: transparent; }


::-moz-selection{
	background: #497288;
	color: #FFF9EF;
}
::selection {
	background: #497288;
	color: #FFF9EF;
}


/* =====================================================================
*
*    layout.css INDEX
*
*    // サイト全体の共通スタイル
*
*
*    1. Common Format
*
*    2. Header
*       2.1. Logo Sets
*
*    3. Main Contents
*       3.1. Panel
*
*    4. Side Contents
*
*    5. Footer
*
* =================================================================== */


/* =====================================================================
*
*    1. Common Format
*
* =================================================================== */

body { background: #D5E9ED url(../images/bg.jpg) 60% -35px no-repeat fixed; }

.wrapper {
	width: 950px;
	margin: 0 auto;
	text-align: left;
}

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

a.nobg { text-decoration: none; background-color: transparent; }

.alignL { text-align: left; }
.alignR { text-align: right; }
.alignC { text-align: center; }


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

.clearfix { min-height: 1%; }

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

.clearfix { display: inline-table; }

/* Hides from Mac IE \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* Hides from Mac IE */


/* ---------------------------------
*    Slide Show
*/

#slideshow {
    position: relative;
    height: 380px;
}

#slideshow div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    opacity: 0.0;
    height: 380px;
    background-color: #FFF;
}

#slideshow div.active {
    z-index: 10;
    opacity: 1.0;
}

#slideshow div.last-active {
    z-index: 9;
}

#slideshow div img {
    height: 380px;
    display: block;
    border: 0;
}


/* =====================================================================
*
*    2. Header
*
* =================================================================== */

/* ---------------------------------------------------------------------
*
*    2.1. Logo Sets
*
* ------------------------------------------------------------------- */

#logoset {
	height: 80px;
	padding-left: 14px;
	overflow: hidden;
}

#logo {
	display: inline;
	float: left;
	width: 149px;
	margin: 0 30px 0 11px;
	padding: 24px 21px 0 0;
	background: url(../images/logo_bdr.gif) right top no-repeat;
}

	body.ch #logo {
		width: 154px;
		margin: 0 30px 0 9px;
		padding: 23px 18px 0 0;
		background: url(../images/ch/logo_bdr.gif) right top no-repeat;
	}

#logoMag {
	position: relative;
	float: left;
	width: 411px;
	height: 48px;
	margin: 31px 0 0 -10px;
}

	body.ch #logoMag { margin: 28px 0 0 -13px; }


/* =====================================================================
*
*    3. Main Contents
*
* =================================================================== */

/* ---------------------------------------------------------------------
*
*    3.1. Panel
*
* ------------------------------------------------------------------- */

.panel { margin-top: 13px; }

.panel .pmid {
	width: 708px;
	padding: 0 3px;
	background: url(../images/col_base_mid.png) repeat-y;
}

	body.ch .panel .pmid { background: url(../images/ch/col_base_mid.png) repeat-y; }

.panel .ptop {
	display: block;
	width: 714px;
	height: 6px;
	overflow: hidden;
	background: url(../images/col_base_top.png) no-repeat;
}

	body.ch .panel .ptop { background: url(../images/ch/col_base_top.png) no-repeat; }

.panel .pbtm {
	display: block;
	width: 714px;
	height: 10px;
	overflow: hidden;
	background: url(../images/col_base_btm.png) no-repeat;
}

	body.ch .panel .pbtm { background: url(../images/ch/col_base_btm.png) no-repeat; }


.panel .pad { width: 674px; padding: 12px 20px; }
.panel .padHead { width: 674px; padding: 17px 20px 12px 20px; }

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

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


/* =====================================================================
*
*    3. Main Contents
*
* =================================================================== */

#mainCont {
	float: left;
	width: 714px;
}


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

#sideCont {
	float: right;
	width: 220px;
}

#sideCont .sideH {
	padding: 0 15px 10px 15px;
	color: #497288;
}

	body.ch #sideCont .sideH { color: #D4D3D3; }

#sideBnr .bnr {
	width: 212px;
	height: 90px;
	margin-bottom: 16px;
	padding: 3px 4px 5px 4px;
	background: url(../images/bnr_base.png) no-repeat;
}

	body.ch #sideBnr .bnr { background: url(../images/ch/bnr_base.png) no-repeat; }

#sideCont .clearbg {
	width: 220px;
	height: 68px;
	background: url(../images/side_col_base.png) no-repeat;
}

	body.ch #sideCont .clearbg { background: url(../images/ch/side_col_base.png) no-repeat; }

#sideCont .clearbox .cont {
	width: 190px;
	padding: 0 15px 0 15px;
	margin: -48px 0 0 0;
}

#sideBnr .bnrmini {
	width: 212px;
	height: 48px;
	margin-bottom: 16px;
	padding: 3px 4px 5px 4px;
	background: url(../images/bnr_base_s.png) no-repeat;
}

	body.ch #sideBnr .bnrmini { background: url(../images/ch/bnr_base_s.png) no-repeat; }


/* =====================================================================
*
*    5. Footer
*
* =================================================================== */

#footer {
	padding: 15px 0 30px ;
}

#footer .g2t {
	margin: 0 0 10px 0;
	padding: 0 10px 32px 15px;
	background: url(../images/foot_bdr.jpg) left bottom no-repeat;
}

	body.ch #footer .g2t { background: url(../images/ch/foot_bdr.jpg) left bottom repeat-x; }

.g2t a {
	float: right;
	width: 113px;
	height: 10px;
	background: url(../images/foot_link_g2t.gif) left -10px;
}

	body.ch .g2t a { background: url(../images/ch/foot_link_g2t.png) left -10px; }
	* html body.ch .g2t a { background: url(../images/ch/foot_link_g2t_ie6.png) left -10px; }

.g2t a:hover { background-position: 0 0; }

	body.ch .g2t a:hover { background-position: 0 0; }

#footer ul {
	float: left;
	width: 708px;
	padding-left: 10px;
}

#footer ul li {
	float: left;
	margin: 0 20px 0 0;
}

#fKerastase { width: 163px; }
#fPrivacy { width: 109px; }

#fKerastase a {
	width: 163px;
	height: 10px;
	background: url(../images/foot_link_official.gif) left -10px;
}

	body.ch #fKerastase a { background: url(../images/ch/foot_link_official.png) left -10px; }
	* html body.ch #fKerastase a { background: url(../images/ch/foot_link_official_ie6.png) left -10px; }

#fPrivacy a {
	width: 109px;
	height: 10px;
	background: url(../images/foot_link_privacy.gif) left -10px;
}

	body.ch #fPrivacy a { background: url(../images/ch/foot_link_privacy.png) left -10px; }
	* html body.ch #fPrivacy a { background: url(../images/ch/foot_link_privacy_ie6.png) left -10px; }

#fKerastase a:hover, #fPrivacy a:hover { background-position: 0 0; }
	body.ch #fKerastase a:hover, body.ch #fPrivacy a:hover { background-position: 0 0; }

#copyright {
	float: right;
	width: 178px;
	height: 10px;
	padding: 0 10px 0 0;
	background: url(../images/copyright.gif) no-repeat;
}

	body.ch #copyright { background: url(../images/ch/copyright.png) no-repeat; }