body {
	background: #e9ac89;
}

#gh {
	margin: 43px 0 40px 0;
	width: 1000px;
}

#gh h1 {
	float: left;
	margin-left: 33px;
}

	#gh p.desc {
		float: right;
		margin-right: 23px;
		width: 547px;
		height: 86px;
		background: url(../images/header_desc.gif) no-repeat;
	}

#baby {
	position: relative;
	margin: 0 -5px;
	padding: 0 5px;
	width: 1000px;
	background: url(../common/images/base_white_mid.png) repeat-y;
}

#baby .mask {
	position: absolute;
	top: -5px;
	left: 0;
	z-index: 1000;
	width: 1010px;
	height: 20px;
	background: url(../images/mask1.png) no-repeat;
}

#babyHeader {
	position: relative;
	float: left;
	width: 250px;
	height: 668px;
}

#babyLogo {
	position: relative;
	margin: 51px 0 0 30px;
	width: 192px;
	height: 178px;
}

	#babyLogoLabel {
		position: absolute;
		top: 0;
		left: 9px;
		width: 120px;
		height: 82px;
		background: url(../images/baby_logo.png) 0 0 no-repeat;
		opacity: 0;
	}

	#babyLogoLabelText {
		display: block;
		margin: 24px 0 0 16px;
		width: 90px;
		height: 34px;
		background: url(../images/baby_logo.png) -120px 0 no-repeat;
		opacity: 0;
	}

	#babyLogo1 {
		position: absolute;
		top: 69px;
		left: 0;
		display: block;
		width: 46px;
		height: 59px;
		background: url(../images/baby_logo.png) 0 -82px no-repeat;
		opacity: 0;
	}

	#babyLogo2,
	#babyLogo3 {
		position: absolute;
		display: block;
		width: 122px;
		height: 122px;
		background: url(../images/baby_logo.png) -281px -60px no-repeat;
		opacity: 0;
	}

		#babyLogo2 {
			top: 38px;
			left: 24px;
		}

		#babyLogo3 {
			top: 38px;
			left: 98px;
		}

	#babyLogo2 span,
	#babyLogo3 span {
		position: absolute;
		top: 22px;
		left: 22px;
		display: block;
		width: 78px;
		height: 78px;
		opacity: 0;
	}

		#babyLogo2 span.ear1,
		#babyLogo3 span.ear1 {
			background: url(../images/baby_logo.png) -124px -82px no-repeat;
		}

		#babyLogo2 span.ear2,
		#babyLogo3 span.ear2 {
			background: url(../images/baby_logo.png) -202px -82px no-repeat;
		}

	#babyLogo4 {
		position: absolute;
		top: 136px;
		left: 0;
		display: block;
		width: 191px;
		height: 42px;
		background: url(../images/baby_logo.png) 0 -160px no-repeat;
		opacity: 0;
	}

#babyHeader p.desc {
	margin: 46px 0 0 30px;
	width: 192px;
	height: 170px;
	background: url(../images/baby_desc.gif) no-repeat;
}

#babyHeader .bnr {
	margin: 44px 0 0 18px;
}

#babyHeader .bnr a:hover img {
	filter: alpha(opacity=90);
	opacity: 0.9;
}

#babyHeader .bnr .note {
	margin: 7px 0 0 8px;
	background: url(../images/questionnair_text.gif) no-repeat;
	width: 196px;
	height: 27px;
}

#babyMenuWrapper {
	float: right;
	overflow: hidden;
	width: 750px;
	height: 668px;
	background: #579ccf;
}

#babyMenu {
	width: 800px;
	height: 668px;
}

	#babyMenu li {
		position: relative;
		float: left;
		overflow: hidden;
		width: 250px;
		height: 668px;
		-webkit-backface-visibility: hidden;
	}

	#babyMenu .snow {
		position: absolute;
		margin-left: -200px;
		top: 0;
		left: 50%;
		opacity: 0;
		width: 400px;
	}

		.ua-ie-7 #babyMenu .snow,
		.ua-ie-8 #babyMenu .snow,
		.ua-ie-9 #babyMenu .snow { opacity: 1 }

	#babyMenu .snow img {
		position: absolute;
		left: 0;
		top: -80px;
		margin-left: 20px;
	}

	#babyMenu .menuWrapper {
		position: relative;
		margin: 0 auto;
		width: 250px;
		height: 668px;
	}

		#cheetah  { background: #ffdc00; }
		#alpaca   { background: #efeddc; }
		#elephant { background: #579ccf; }

.faceWrapper {
	position: absolute;
	top: 47px;
	left: 0;
	width: 250px;
}

.parent {
	position: absolute;
	top: 88px;
	left: 125px;
	opacity: 0;
	-webkit-transform: translateY(100px) rotateX(-45deg);
	-moz-transform: translateY(100px) rotateX(-45deg);
	-ms-transform: translateY(100px) rotateX(-45deg);
	-o-transform: translateY(100px) rotateX(-45deg);
	transform: translateY(100px) rotateX(-45deg);
	-webkit-transform-style: preserve3d;
}

	.ua-ie-7 .parent,
	.ua-ie-9 .parent { opacity: 1; } /* for compatibility mode */

	.ua-ie-7 .faceMask,
	.ua-ie-8 .faceMask,
	.ua-ie-9 .faceMask { position: absolute; top: -48px; left: -25px; z-index: 200; width: 300px; height: 668px; }

	.ua-ie-7 #cheetah .faceMask,
	.ua-ie-8 #cheetah .faceMask,
	.ua-ie-9 #cheetah .faceMask { background: #ffdc00; }
	#cheetah  .parent .base     { position: absolute; top: -52px; left: -84px; }
	#cheetah  .parent .base2    { position: absolute; top: -60px; left: -87px; }
	#cheetah  .parent .ear      { position: absolute; top: -57px; left: -80px; }
	#cheetah  .parent .eye      { position: absolute; top: -12px; left: -48px; }
	#cheetah  .parent .eye img  { position: relative; }
	#cheetah  .parent .mouse    { position: absolute; top:  26px; left: -26px; }
	#cheetah  .parent .nose     { position: absolute; top:  21px; left: -14px; z-index: 100; }
	#cheetah  .parent .lip      { position: absolute; top:  35px; left: -22px; z-index: 50; }
	#cheetah  .parent .lip2     { position: absolute; top:  39px; left: -19px; }
	#cheetah  .parent .hat      { position: absolute; top:-110px; left: -61px; }

	.ua-ie-7 #alpaca  .faceMask,
	.ua-ie-8 #alpaca  .faceMask,
	.ua-ie-9 #alpaca  .faceMask { background: #efecdc; }
	#alpaca   .parent .base     { position: absolute; top: -88px; left: -83px; }
	#alpaca   .parent .ear      { position: absolute; top: -81px; left: -70px; }
	#alpaca   .parent .face     { position: absolute; top: -30px; left: -61px; }
	#alpaca   .parent .eye      { position: absolute; top: -12px; left: -48px; }
	#alpaca   .parent .eye img  { position: relative; }
	#alpaca   .parent .nose     { position: absolute; top:  21px; left: -14px; z-index: 100; }
	#alpaca   .parent .lip      { position: absolute; top:  33px; left: -23px; z-index: 50; }
	#alpaca   .parent .lip2     { position: absolute; top:  38px; left: -19px; }
	#alpaca   .parent .hat      { position: absolute; top: -110px; left: -62px; }

	.ua-ie-7 #elephant .faceMask,
	.ua-ie-8 #elephant .faceMask,
	.ua-ie-9 #elephant .faceMask { background: #549dcf; }
	#elephant .parent .base     { position: absolute; top: -84px; left: -108px; }
	#elephant .parent .ear1     { position: absolute; top: -67px; left: -161px; }
	#elephant .parent .ear2     { position: absolute; top: -67px; left:  75px; }
	#elephant .parent .eye      { position: absolute; top: -12px; left: -48px; }
	#elephant .parent .eye img  { position: relative; }
	#elephant .parent .nose     { position: absolute; top:  26px; left: -94px; }
	#elephant .parent .tusk     { position: absolute; top:  57px; left: -60px; }
	#elephant .parent .hat      { position: absolute; top:-110px; left: -61px; }

.baby {
	position: absolute;
	top: 236px;
	left: 125px;
	opacity: 0;
	-webkit-transform: translateY(50px) rotateX(-45deg);
	-moz-transform: translateY(50px) rotateX(-45deg);
	-ms-transform: translateY(50px) rotateX(-45deg);
	-o-transform: translateY(50px) rotateX(-45deg);
	transform: translateY(50px) rotateX(-45deg);
	-webkit-transform-style: preserve3d;
}

	.ua-ie-7 .baby,
	.ua-ie-9 .baby { opacity: 1; } /* for compatibility mode */

	#cheetah  .baby .base  { position: absolute; top: -26px; left: -42px; }
	#cheetah  .baby .base2 { position: absolute; top: -30px; left: -43px; }
	#cheetah  .baby .ear   { position: absolute; top: -35px; left: -40px; }
	#cheetah  .baby .eye   { position: absolute; top: -12px; left: -24px; }
	#cheetah  .baby .mouse { position: absolute; top:  12px; left: -13px; }
	#cheetah  .baby .nose  { position: absolute; top:   4px; left:  -7px; }
	#cheetah  .baby .lip   { position: absolute; top:  11px; left: -11px; z-index: 50; }
	#cheetah  .baby .lip2  { position: absolute; top:  12px; left: -9px; }
	#cheetah  .baby .hat   { position: absolute; top: -48px; left: -25px; }

	#alpaca   .baby .base  { position: absolute; top: -44px; left: -42px; }
	#alpaca   .baby .ear   { position: absolute; top: -46px; left: -36px; }
	#alpaca   .baby .face  { position: absolute; top: -15px; left: -31px; }
	#alpaca   .baby .eye   { position: absolute; top: -12px; left: -24px; }
	#alpaca   .baby .nose  { position: absolute; top:   5px; left:  -7px; }
	#alpaca   .baby .lip   { position: absolute; top:  11px; left: -11px; z-index: 50; }
	#alpaca   .baby .lip2  { position: absolute; top:  13px; left: -9px; }
	#alpaca   .baby .hat   { position: absolute; top: -48px; left: -25px; }

	#elephant .baby .base  { position: absolute; top: -39px; left: -54px; }
	#elephant .baby .ear1  { position: absolute; top: -32px; left: -82px; }
	#elephant .baby .ear2  { position: absolute; top: -32px; left:  40px; }
	#elephant .baby .eye   { position: absolute; top: -12px; left: -24px; }
	#elephant .baby .nose  { position: absolute; top:  14px; left: -46px; }
	#elephant .baby .tusk  { position: absolute; top:  25px; left: -30px; }
	#elephant .baby .hat   { position: absolute; top: -48px; left: -25px; }

#cheetah h2 {
	position: relative;
	padding-top: 374px;
	height: 78px;
	background: url(../images/baby_cheetah_ttl.png) center bottom no-repeat;
	opacity: 0;
	filter: alpha(opacity=0);
}

	.ua-ie-7 #cheetah h2,
	.ua-ie-8 #cheetah h2 { background-image: url(../images/baby_cheetah_ttl.gif); }

	.ua-ie-7 #cheetah h2 { opacity: 1; } /* for compatibility mode */

#alpaca h2 {
	position: relative;
	padding-top: 374px;
	height: 78px;
	background: url(../images/baby_alpaca_ttl.png) center bottom no-repeat;
	opacity: 0;
	filter: alpha(opacity=0);
}

	.ua-ie-7 #alpaca h2,
	.ua-ie-8 #alpaca h2 { background-image: url(../images/baby_alpaca_ttl.gif); }

	.ua-ie-7 #alpaca h2 { opacity: 1; } /* for compatibility mode */

#elephant h2 {
	position: relative;
	padding-top: 374px;
	height: 78px;
	background: url(../images/baby_elephant_ttl.png) center bottom no-repeat;
	opacity: 0;
	filter: alpha(opacity=0);
}

	.ua-ie-7 #elephant h2,
	.ua-ie-8 #elephant h2 { background-image: url(../images/baby_elephant_ttl.gif); }

	.ua-ie-7 #elephant h2 { opacity: 1; } /* for compatibility mode */

#babyMenu .label {
	position: relative;
	display: block;
	margin: 24px auto 21px auto;
	width: 96px;
	height: 93px;
	opacity: 0;
}

	.ua-ie-7 #babyMenu .label { opacity: 1; } /* for compatibility mode */

	.ua-ie-7 #babyMenu           .label .labelMask,
	.ua-ie-8 #babyMenu           .label .labelMask,
	.ua-ie-9 #babyMenu           .label .labelMask { position: absolute; z-index: 100; width: 96px; height: 93px; }
	.ua-ie-7 #babyMenu #cheetah  .label .labelMask,
	.ua-ie-8 #babyMenu #cheetah  .label .labelMask,
	.ua-ie-9 #babyMenu #cheetah  .label .labelMask { background: #ffdc00; }
	.ua-ie-7 #babyMenu #alpaca   .label .labelMask,
	.ua-ie-8 #babyMenu #alpaca   .label .labelMask,
	.ua-ie-9 #babyMenu #alpaca   .label .labelMask { background: #efecdc; }
	.ua-ie-7 #babyMenu #elephant .label .labelMask,
	.ua-ie-8 #babyMenu #elephant .label .labelMask,
	.ua-ie-9 #babyMenu #elephant .label .labelMask { background: #549dcf; }

#babyMenu .label .base { position: absolute; top: 0; left: 0; }

#babyMenu .label .arrow {
	position: absolute;
	top: 20px;
	left: 32px;
}

#babyMenu .label .text {
	position: absolute;
	top: 61px;
	left: 22px;
}

#babyMenu .birth {
	text-align: center;
	opacity: 0;
}

	.ua-ie-7 #babyMenu .birth { opacity: 1; } /* for compatibility mode */

	.ua-ie-7 #babyMenu .birth img,
	.ua-ie-8 #babyMenu .birth img,
	.ua-ie-9 #babyMenu .birth img { position: relative; top: 0; filter: alpha(opacity=0); }

#haruto {
	position: relative;
	margin: 5px -5px 0 -5px;
	padding: 0 5px 0 5px;
	width: 1000px;
	background: url(../common/images/base_white_mid.png) repeat-y;
}

#harutoHeader {
	float: left;
	padding-top: 61px;
	width: 340px;
	height: 342px;
}

#haruto .border {
	position: absolute;
	top: -32px;
	left: 0;
	z-index: 1000;
	width: 1010px;
	height: 59px;
	background: url(../images/border_ring.png) no-repeat;
}

#haruto .mask {
	position: absolute;
	bottom: -5px;
	left: 0;
	z-index: 100;
	width: 1010px;
	height: 20px;
	background: url(../images/mask2.png) no-repeat;
}

#harutoLogo {
	position: relative;
	margin: 0 0 29px 30px;
	width: 239px;
	height: 69px;
}

	#harutoLogo span {
		position: absolute;
		display: block;
		background: url(../images/haruto_logo.png) 0 0 no-repeat;
	}

		.ua-ie-7 #harutoLogo span,
		.ua-ie-8 #harutoLogo span { background-image: url(../images/haruto_logo.gif); }

	#harutoLogo .logo1 {
		top: 0;
		left: 0;
		width: 50px;
		height: 38px;
		background-position: 0 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo1 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo2 {
		top: 0;
		left: 50px;
		width: 31px;
		height: 38px;
		background-position: -50px 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo2 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo3 {
		top: 0;
		left: 81px;
		width: 33px;
		height: 38px;
		background-position: -81px 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo3 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo4 {
		top: 0;
		left: 114px;
		width: 30px;
		height: 38px;
		background-position: -114px 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo4 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo5 {
		top: 0;
		left: 144px;
		width: 34px;
		height: 38px;
		background-position: -144px 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo5 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo6 {
		top: 0;
		left: 178px;
		width: 32px;
		height: 38px;
		background-position: -178px 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo6 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo7 {
		top: 0;
		left: 210px;
		width: 24px;
		height: 38px;
		background-position: -210px 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo7 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo8 {
		top: 38px;
		left: 0;
		width: 99px;
		height: 31px;
		background-position: 0 -38px;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo8 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo9 {
		top: 38px;
		left: 99px;
		width: 124px;
		height: 31px;
		background-position: -99px -38px;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo9 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo10 {
		top: 53px;
		left: 223px;
		width: 16px;
		height: 16px;
		background-position: -223px -53px;
		opacity: 0;
		filter: alpha(opacity=0);
	}

		.ua-ie-7 #harutoLogo .logo10 { opacity: 1; } /* for compatibility mode */

	#harutoLogo .logo10.active {
		-webkit-animation-name: 'twinkle';
		-webkit-animation-duration: 3s;
		-webkit-animation-timing-function: ease-out;
		-webkit-animation-iteration-count: 2;
		-webkit-animation-property: -webkit-transform;
		-webkit-backface-visibility: hidden;
	}

	@-webkit-keyframes 'twinkle' {
	    0% {
	    	-webkit-transform: rotate(0deg);
	    }
	    40% {
	    	-webkit-transform: rotate(360deg);
	    }
	    80% {
	    	-webkit-transform: rotate(0);
	    }
	    100% {
	    	-webkit-transform: rotate(0);
	    }
	}

#harutoHeader p {
	margin: 0 0 0 30px;
	width: 226px;
	height: 211px;
	background: url(../images/haruto_desc.gif) no-repeat;
}

#harutoMenu {
	float: right;
	width: 660px;
}

#harutoMenu li {
	position: relative;
	float: left;
	overflow: hidden;
	width: 330px;
	height: 403px;
}

#harutoMenu li .photo {
	overflow: hidden;
}

#harutoMenu li .photo .anystretch {
	-webkit-transition: -webkit-transform .2s linear;
	-moz-transition: -moz-transform .2s linear;
	-ms-transition: -ms-transform .2s linear;
	-o-transition: -o-transform .2s linear;
	transition: transform .2s linear;
	-webkit-backface-visibility: hidden;
}

	#harutoMenu li:hover .photo .anystretch {
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}

#article1 .photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 330px;
	height: 403px;
	background: #eee url(../common/images/placeholder.png) center center no-repeat;
}

#article1 .label {
	position: absolute;
	top: 292px;
	left: 117px;
	display: block;
	width: 96px;
	height: 93px;
	opacity: 0;
	z-index: 100;
}

	.ua-ie-7 #article1 .label { opacity: 1; } /* for compatibility mode */

	.us-ie-7 #article1 .label,
	.ua-ie-8 #article1 .label,
	.ua-ie-9 #article1 .label { display: none; }

	#article1 .label .arrow {
		position: absolute;
		top: 35px;
		left: 37px;
		width: 24px;
		height: 20px;
		background: url(../images/haruto_label_arrow.png) no-repeat;
	}

	#article1 .label .text {
		position: absolute;
		top: 15px;
		left: 34px;
	}

	#article1 .label .text {
		position: absolute;
		top: 15px;
		left: 34px;
	}

	#article1 .label .check {
		position: absolute;
		top: 61px;
		left: 22px;
	}

#article2 .photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 330px;
	height: 403px;
	background: #eee url(../common/images/placeholder.png) center center no-repeat;
}

#article2 .label {
	position: absolute;
	top: 292px;
	left: 117px;
	display: block;
	width: 96px;
	height: 93px;
	opacity: 0;
	z-index: 100;
}

	.ua-ie-7 #article2 .label { opacity: 1; } /* for compatibility mode */

	.us-ie-7 #article2 .label,
	.ua-ie-8 #article2 .label,
	.ua-ie-9 #article2 .label { display: none; }

	#article2 .label .arrow {
		position: absolute;
		top: 35px;
		left: 37px;
		width: 24px;
		height: 20px;
		background: url(../images/haruto_label_arrow.png) no-repeat;
	}

	#article2 .label .text {
		position: absolute;
		top: 15px;
		left: 34px;
	}

	#article2 .label .text {
		position: absolute;
		top: 15px;
		left: 34px;
	}

	#article2 .label .check {
		position: absolute;
		top: 61px;
		left: 22px;
	}

#pmo {
	position: relative;
	margin: 35px -5px 15px -5px;
	padding: 0 5px 0 5px;
	width: 1000px;
	background: url(../common/images/base_white_mid.png) repeat-y;
}

	#pmo .frameTop {
		position: absolute;
		top: -20px;
		left: 0;
		width: 1010px;
		height: 20px;
		background: url(../common/images/base_white_top.png) no-repeat;
	}

	#pmo .frameBtm {
		position: absolute;
		bottom: -20px;
		left: 0;
		width: 1010px;
		height: 20px;
		background: url(../common/images/base_white_btm.png) no-repeat;
	}

#pmo h1 {
	float: left;
	margin: 10px 0 10px 48px;
}

#pmo .button {
	float: right;
	margin: 20px 25px 0 0;
	width: 269px;
}

	#pmo .button a img {
		position: relative;
		-webkit-transition: opacity .3s;
		-moz-transition: opacity .3s;
		-ms-transition: opacity .3s;
		-o-transition: opacity .3s;
		transition: opacity .3s;
	}
	#pmo .button a:hover  img { opacity: 0.65; filter: alpha(opacity=65); }
	#pmo .button a:active img { top: 1px; }

#pmo .center {
	float: left;
	margin: 10px 0 10px 55px;
	width: 330px;
}

#pmo .desc {
	width: 330px;
	height: 185px;
	background: url(../images/banner_pmo_desc.gif) no-repeat;
}

#pmo a.link:hover img { opacity: 0.65; filter: alpha(opacity=65); }

.hitarea:hover .label .base {
	opacity: 0.65;
	filter: alpha(opacity=65);
}