/* ================================================================== */
/*                                                                    */
/* ! About ATELIER MADE by shu uemura */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    1. Common
*
*    2. Header
*
*    3. Main
*       3.1. About
*       3.2. Salon
*       3.3. Institute
*
*    4. Aide Area
*
* =================================================================== */

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

#slideBox { width: 313px; margin-left: 604px; }
#mopTip01 .content { text-align: left !important; }


/* ================================================================== */
/*                                                                    */
/* ! 2. header */
/*                                                                    */
/* ================================================================== */

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

#catchDesc { /* base on core.css */
	height: 74px;
	background: url(/about/images/header_desc.png) no-repeat;
}


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

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


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.1. About */
/*                                                                    */
/* ------------------------------------------------------------------ */

#aboutSec {
	min-height: 420px;
	height: auto !important;
	height: 420px;
	background: #FAFCFD;
}

#aboutSec .contentHeader { background: none; }

#aboutSec h2 { /* base on core.css */
	height: 20px;
	margin-bottom: 24px;
	background: url(/about/images/about_ttl.gif) no-repeat;
}


/* ---------------------------------
*    COIFFEUR - MAQUILLEUR    */

#aboutCM {
	width: 632px;
	padding: 16px 0 22px 0;
}

#aboutCM .cont {
	float: left;
	width: 316px;
	padding: 0 0 0 16px;
}

#aboutCM h3 {
	height: 39px;
	margin: 0 0 16px 0;
	background: url(/about/images/about_cm_ttl.gif) no-repeat;
}

#aboutCM h4 {
	height: 31px;
	margin: 0 0 24px 0;
	background: url(/about/images/about_cm_subttl.gif) no-repeat;
}

#aboutCM p.desc {
	padding-bottom: 10px;
}

#aboutCM .fig {
	float: right;
	padding: 55px 24px 0 0;
}

#salonLink {
	margin: 24px 0 0 0;
}

#salonLink a {
	padding-left: 16px;
	background: url(/common/images/li_arrow.gif) 0 -250px no-repeat;
	font-weight: bold;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.2. Salon */
/*                                                                    */
/* ------------------------------------------------------------------ */

#salonSec {
	width: 632px;
	margin-top: 24px;
	overflow: hidden;
	background: #222222;
}

#salonSec h3 {
	width: 600px;
	height: 20px;
	padding: 24px 16px;
	background: #444444 url(/about/images/salon_ttl.gif) 16px 24px no-repeat;
}

#salonSec h4 {
	height: 20px;
	width: 600px;
	padding: 16px;
	border-bottom: #444444 1px solid;
}

	#salonSec #menuMa h4 { background: url(/about/images/salon_subttl1.gif) 16px 16px no-repeat; }
	#salonSec #menuSk h4 { background: url(/about/images/salon_subttl2.gif) 16px 16px no-repeat; }
	#salonSec #menuPr h4 { border-bottom: none; background: url(/about/images/salon_subttl3.gif) 16px 16px no-repeat; }

p.attention {
	padding: 24px 16px 0 16px;
	background: #2C2C2C;
	color: #999999;
}


/* ---------------------------------
*    Menu List    */

ul.menuList {
	width: 632px;
}

.menuList li {
	position: relative;
	float: left;
	width: 158px;
	height: 158px;
	background: #444444;
}

.menuList article {
	width: 158px;
	height: 158px;
	overflow: hidden;
}

.menuList h5 {
	position: absolute;
	z-index: 500;
	top: 114px;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.3. Institute */
/*                                                                    */
/* ------------------------------------------------------------------ */

#instituteSec {
	width: 632px;
	margin: 32px 0 0 0;
	background: #222222;
}

#instituteSec header {
	width: 600px;
	padding: 24px 16px;
	background: #444444;
}

#instituteSec h3 {
	height: 19px;
	background: url(../images/institute_ttl.gif) no-repeat;
}

#instituteCont {
	width: 632px;
}

#instituteCont .thumb {
	float: left;
	opacity: 0.5;
}

#instituteSec .contR {
	float: right;
	width: 442px;
	padding: 16px 16px 0 0;
	opacity: 0.8;
}

#instituteSec p {
	margin-bottom: 10px;
	color: #999999;
}

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

aside {
	float: left;
	width: 316px;
}

aside h3 {
	width: 272px;
	padding: 24px 28px 16px 16px;
	color: #CCCCCC;
}

aside p {
	position: relative;
	width: 272px;
	padding: 0 28px 16px 16px;
	color: #999999;
}