@charset "UTF-8";

/* -- common
-------------------------------------------------------------------------------- */
section h2 {
	text-align: center;
	display: block;
	border-top: 1px solid #ccc;
}
section h2 img {
	margin-top: -29px;
}
section {
	position: relative;
}





/* -- title
-------------------------------------------------------------------------------- */
#contents {
	position: relative;
}
#contents div.lead {
	background: #F8F8F8 url(images/bg_title05.jpg) no-repeat center 0;
	width: 100%;
	margin: 0 -500% 87px;
	padding: 57px 500% 0;
	height: 429px;
}
#contents div.lead h1 {
	margin-bottom: 46px;
}
#contents div.lead p:nth-of-type(1) {
	margin-bottom: 39px;
}





/* -- Values of KERASTASE
-------------------------------------------------------------------------------- */
#values {
	
	text-align: center;
	height: 772px;
}
#values h2 { margin-bottom: 45px; }
#values > p:nth-of-type(1) { margin-bottom: 25px; }
#values > p:nth-of-type(2) {
	font-size: 14px;
	line-height: 1.72;
	display: block;
	height: 102px;
}
#values ul {
	display: block;
	overflow: hidden;
	zoom: 1;
}
#values ol li {
	line-height: 2.35;
	text-align: left;
	display: block;
	float: left;
	height: 250px;
}
#values ol li h4 {
	margin-bottom: 18px;
}
#values ol li:nth-child(odd) { width: 500px; }
#values ol li:nth-child(even) { width: 450px; }





/* -- History
-------------------------------------------------------------------------------- */
#history {
	margin-bottom: 60px;
}
#history > p:nth-child(2) {
	text-align: center;
	padding: 30px 0 80px;
}
#history > p:nth-child(3) {
	font-size: 14px;
	line-height: 2;
	margin: 0 0 70px 82px;
}
#history > p:nth-child(3) img {
	float: left;
	margin: -45px 20px 0 0;
}
#history section {
	font-size: 12px;
	line-height: 2.35;
	margin: 0 -50px;
	padding: 60px 0 0;
}
#history section:nth-of-type(even) { text-align: right; padding-right: 565px;  }
#history section:nth-of-type(odd) { padding-left: 565px; }

#history section.history_1960 { background: url(/brand/index/images/bg_1960.jpg) no-repeat; height: 402px; padding-top: 130px; }
#history section.history_1970 { background: url(/brand/index/images/bg_1970.jpg) no-repeat; height: 416px; }
#history section.history_1980 { background: url(/brand/index/images/bg_1980.jpg) no-repeat; height: 463px; }
#history section.history_1990 { background: url(/brand/index/images/bg_1990.jpg) no-repeat; height: 440px; }
#history section.history_2000 { background: url(/brand/index/images/bg_2000.jpg) no-repeat; height: 491px; }
#history section.history_2010 { background: url(/brand/index/images/bg_2010.jpg) no-repeat; height: 532px; }

#history section h3 { margin-bottom: 53px; }
#history section h3 + p { margin-bottom: 24px; }
#history section ul { margin-top: 35px; text-align: left; }
#history section ul li { line-height: 1.5; margin: 0 0 10px; }
#history section:nth-of-type(even) ul { float: right; }
#history section ul li a {
	background: url(/common/images/common/ico_arrow2.gif) no-repeat 0 4px;
	display: inline-block;
	padding-left: 12px;
}
#history section ul li a:hover {
	background: url(/common/images/common/ico_arrow2.gif) no-repeat 0 -15px;
}





/* -- banner
-------------------------------------------------------------------------------- */
ul.bnr {
	display: block;
	overflow: hidden;
	zoom: 1;
	margin-bottom: 60px;
}
ul.bnr li:first-child { float: left; }
ul.bnr li:last-child { float: right; }



/* -- Message
-------------------------------------------------------------------------------- */
#relation {
	background : #f2f2f2 url(brand/index/images/bg_relation.jpg) no-repeat 0px 0px;
	height: 106px;
	margin-bottom: 60px;
	position: relative;
}
#relation h2 {
	position: absolute;
	left: 269px;
	top: 32px;
}
#relation p {
	background : url(brand/index/images/btn_relation_on.gif) no-repeat;
	width: 200px;
	height: 44px;
	position: absolute;
	top: 32px;
	right: 30px;
}
div.bl-hover p a img {
	visibility: hidden;
}