@charset "UTF-8";

/* 
	:title 		"Beauty Soul - 共通CSS";
	:created 	"2010/04/16";
	:release 	[:revision "1.00"];
	:auther 	[:name "Project D"];
	:note		"
				Outline -
				fonts
				layout
				colors
				";
*/


/* fonts
-------------------------------------------------- */
body { font: 75%/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

* html body { 
	font-size	: small;	/* for IE6,7 */
	font		: x-small;	/* for IE Quirks Mode */
}

select,
input,
button,
textarea,
button {
	font-size	: 0.99em;
	font-family	: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

table {
	font-size	: inherit;
	font		: 1.0em;
}

pre,
code,
kbd,
samp,
tt {
	font-family	: monospace;
	line-height	: 100%;
}

* html pre,
* html code,
* html kbd,
* html samp,
* html tt { font-size: 1.17em;	/* for IE6,7 */ }


/* layout
-------------------------------------------------- */
/* Sections */
#wrapper {
	width		: 800px;
	margin		: 0 auto;
	padding		: 0 6px;
	background	: url(../img/bgi_body.png) repeat-y left top;
}

#header {
	width		: 800px;
	height		: 88px;
	background	: url(../img/bgi_sprites.png) no-repeat;
	overflow	: hidden;
}

#photo-with-gNavi {
	width		: 100%;
	padding		: 2px 0 0 0;
	background	: #483f08;
}

#contents {
	width 		: 100%;
	padding		: 15px 0;
	background	: url(../img/bgi_bottom.png) no-repeat left bottom;
}

#footer { width: 100%; }

/* units */
.size1of2 { width: 50%; }

.size1of3 { width: 33%; }
.size2of3 { width: 66%; }

.size1of4 { width: 25%; }
.size3of4 { width: 75%; }

.size1of5 { width: 20%; }
.size2of5 { width: 40%; }
.size3of5 { width: 60%; }
.size4of5 { width: 80%; }
	
	/* @header */
	#header .size1of3 {
		width	: 32%;
		padding	: 15px 0 0 15px;
		float	: left;
	}
	
	#header .size2of3 {
		width	: 64%;
		padding	: 12px 15px 0 0;
		float	: right;
	}
	#header .size2of3 h1 {
		font-size	: 0.83em;
		text-align	: right;
	}
	#header .size2of3 ul { margin: 15px 0 0 180px; }
	* html #header .size2of3 ul { margin: 10px 0 0 210px; }
		#header .size2of3 ul li {
			height		: 25px;
			line-height	: 25px;
			display		: block;
			float		: left; 
		}
					
			#header .size2of3 ul li.itemLogin a {
				width		: 89px;
				height		: 25px;
				background	: url(../img/bgi_sprites.png) no-repeat -160px -150px;
				overflow	: hidden;
				display		: block;
			}
			#header .size2of3 ul li.itemLogin a:hover { background: url(../img/bgi_sprites.png) no-repeat -160px -175px; }

	/* @gNavi */
	#photo-with-gNavi ul {
		margin		: 2px 0 0 0;
		padding		: 0 0 0 10px;
		background	: url(../img/bgi_sprites.png) no-repeat 0px -100px;
	}
		#photo-with-gNavi ul li {
			width	: 20%;
			display	: block;
			float	: left;
		}
			#photo-with-gNavi ul li a {
				width		: 150px;
				height		: 25px;
				overflow	: hidden;
				display		: block;
			}
			.kaatsu a { background: url(../img/bgi_sprites.png) no-repeat 0px -150px; }
			.kaatsu a:hover,
			.kaatsu a.active { background: url(../img/bgi_sprites.png) no-repeat 0px -175px; }
			.core a { background: url(../img/bgi_sprites.png) no-repeat 0px -200px; }
			.core a:hover,
			.core a.active { background: url(../img/bgi_sprites.png) no-repeat 0px -225px; }
			.facial a { background: url(../img/bgi_sprites.png) no-repeat 0px -250px; }
			.facial a:hover,
			.facial a.active { background: url(../img/bgi_sprites.png) no-repeat 0px -275px; }
			.studio a { background: url(../img/bgi_sprites.png) no-repeat 0px -300px; }
			.studio a:hover,
			.studio a.active { background: url(../img/bgi_sprites.png) no-repeat 0px -325px; }
			.price a { background: url(../img/bgi_sprites.png) no-repeat 0px -350px; }
			.price a:hover,
			.price a.active { background: url(../img/bgi_sprites.png) no-repeat 0px -375px; }

	/* @contents */
	#contents .size3of4 {
		width	: 72%;
		padding	: 0 0 0 14px;
		float	: left;
	}
	
	#contents .size1of4 {
		width	: 190px;
		padding	: 0 14px 320px 0;
		float	: right;
	}
	
	.unit { margin: 0 0 10px 0; }
	
	.trial, .mobile {
		width	: auto;
		padding	: 8px;
	}
	.trial { border: 2px solid #c6b965; }
	.mobile { border: 2px solid #e98a8e; }
		.mobile div { width: 166px; }
		
		.mobile .qrcode {
			width	: 78px;
			height	: 78px;
			margin	: 0 0 8px 8px;
			float	: right;
		}
	.amb {
		padding		: 4px 2px 2px 2px;
		background	: #6c4f47;
	}
		.amb p.description {
			padding	: 0 4px;
			color: #fff;
		}
	
	#contents .size1of4 ul { margin: 0 0 10px 0; }
		#contents .size1of4 ul.insideLinks li a {
			width		: 189px;
			height		: 55px;
			overflow	: hidden;
			display		: block;
		}
		.staff a { background: url(../img/bgi_sprites.png) no-repeat -260px -150px; }
		.staff a:hover { background: url(../img/bgi_sprites.png) no-repeat -260px -210px; }
		.faq a { background: url(../img/bgi_sprites.png) no-repeat -260px -270px; }
		.faq a:hover { background: url(../img/bgi_sprites.png) no-repeat -260px -330px; }
		.contact a { background: url(../img/bgi_sprites.png) no-repeat -260px -390px; }
		.contact a:hover { background: url(../img/bgi_sprites.png) no-repeat -260px -450px; }
		.access a { background: url(../img/bgi_sprites.png) no-repeat -260px -510px; }
		.access a:hover { background: url(../img/bgi_sprites.png) no-repeat -260px -570px; }
	
		#contents .size1of4 ul.outsideLinks li.kaatsuNavi ul { margin: 0 1.5em; }
			#contents .size1of4 ul.outsideLinks li.kaatsuNavi ul li {
				list-style	: disc;
				font-size	: 0.83em;
				text-align	: left;
			}
		#contents .size1of4 ul.blog { margin: 0 0 10px 2px; }
	
	/* @footer */
	#footer .footerNavi,
	#footer .container {
		padding		: 15px;
		background	: #948627;
	}
	#footer .footerNavi { padding : 0 15px;	}
		
		#footer .footerNavi ul { margin: 0; }
		#footer .footerNavi ul li {
			color	: #fff;
			display	: inline;
		}
		
		#footer .vcard p,
		#footer .vcard address,
		#footer .footerNavi ul li a {
			font-size	: 0.83em;
			color		: #fff;
		} 
		#footer .vcard address { font-style: normal; }
	
	#footer .iContainer { margin: 1em 0 0 0; }
		#footer .iContainer h4 {
			width		: 39px;
			height		: 16px;
			margin		: 0 0 1em 0;
			line-height	: 1.0;
			background	: url(../img/bgi_sprites.png) no-repeat -470px -150px;
		}		
		#footer .iContainer ul { margin: 0 0 1em 0; }
		#footer .iContainer ul li {
			width	: 25%;
			float	: left;
			display	: block;
		}
		* html #footer .iContainer ul li { width: 192px; }
		*:first-child+html #footer .iContainer ul li { width: 192px; }
		#footer .iContainer .scrollTop { text-align: right;	}
	#footer .copyright {
		padding		: 5px 15px;
		background	: #4c430a;
		color		: #fff;
		font-size	: 0.83em;
	}


/* @modules */
.implant {
	width		: 100%;
	position	: relative;
	display		: block;
	overflow	: hidden;
	z-index		: -1;	
}

.banner {
	padding-bottom	: 5px;
	text-align		: center;
}

.description {
	padding		: 0;
	font-size	: 0.83em;
}


/* colors
-------------------------------------------------- */
a { 
	color			: #ac9717;
	text-decoration	: underline;
}

a:hover { 
	color			: #e46565;
	text-decoration	: none;
}

a.external {
	padding		: 0.2em 0 0.2em 1.5em;
	background	: url(../img/bgi_sprites.png) no-repeat -520px -147px;
}
a.external:hover {
	padding		: 0.2em 0 0.2em 1.5em;
	background	: url(../img/bgi_sprites.png) no-repeat -520px -167px;
}

	/* header */
	#header a {
		color 			: #666;
		text-decoration	: none;
	}
	#header a:hover { text-decoration: underline; }


/* clearfix
-------------------------------------------------- */
#header .container:after,
#header .size2of3 ul:after,
#photo-with-gNavi ul:after,
#contents:after,
#contents .size1of4 .mobile div:after,
#footer .iContainer ul:after {
	height		: 0;
	display		: block; 
	clear		: both; 
	content		: url(../img/pixel.png);
}

#header .container,
#header .size2of3 ul,
#photo-with-gNavi ul,
#contents,
#contents .size1of4 .mobile div,
#footer .iContainer ul { overflow: hidden; }

/* Hides from IE-mac \*/
* html #header .container,
* html #header .size2of3 ul,
* html #photo-with-gNavi ul,
* html #contents,
* html #contents .size1of4 .mobile div,
* html #footer .iContainer ul {
  height		: 1%;
  overflow		: visible;
}