#upperWrapper {
	background: #d0f3dd;
}

#gh {
	margin: 48px 0 46px 0;
	color: #666;
}

#harutoLogo {
	position: relative;
	margin: 0 auto;
	width: 436px;
	height: 127px;
}

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

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

	#harutoLogo span.logo1 {
		top: 2px;
		left: 26px;
		width: 54px;
		height: 51px;
		background-position: -26px -2px;
		filter: alpha(opacity=0);
		opacity: 0;
	}

	#harutoLogo span.logo2 {
		top: 1px;
		left: 93px;
		width: 40px;
		height: 52px;
		background-position: -93px -1px;
		filter: alpha(opacity=0);
		opacity: 0;
	}

	#harutoLogo span.logo3 {
		top: 0px;
		left: 148px;
		width: 49px;
		height: 53px;
		background-position: -148px 0;
		filter: alpha(opacity=0);
		opacity: 0;
	}

	#harutoLogo span.logo4 {
		top: 1px;
		left: 209px;
		width: 45px;
		height: 53px;
		background-position: -209px -1px;
		filter: alpha(opacity=0);
		opacity: 0;
	}

	#harutoLogo span.logo5 {
		top: 4px;
		left: 263px;
		width: 54px;
		height: 47px;
		background-position: -263px -4px;
		filter: alpha(opacity=0);
		opacity: 0;
	}

	#harutoLogo span.logo6 {
		top: 5px;
		left: 326px;
		width: 51px;
		height: 45px;
		background-position: -326px -5px;
		filter: alpha(opacity=0);
		opacity: 0;
	}

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

	#harutoLogo span.logo8 {
		top: 70px;
		left: 0;
		width: 171px;
		height: 53px;
		background-position: 0 -70px;
		filter: alpha(opacity=0);
		opacity: 0;
	}

	#harutoLogo span.logo9 {
		top: 70px;
		left: 181px;
		width: 221px;
		height: 53px;
		background-position: -181px -70px;
		filter: alpha(opacity=0);
		opacity: 0;
	}

	#harutoLogo span.logo10 {
		right: 0;
		bottom: 0;
		z-index: 100;
		width: 30px;
		height: 30px;
		background: url(../images/header_ttl3.png) no-repeat;
		filter: alpha(opacity=0);
		opacity: 0;
	}

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

	#harutoLogo .logo10.active {
		-webkit-animation-name: 'twinkle';
		-webkit-animation-property: -webkit-transform;
		-webkit-animation-duration: 3s;
		-webkit-animation-timing-function: ease-out;
		-webkit-animation-iteration-count: 2;
		-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);
	    }
	}

	#harutoLogo span.logo11 {
		position: absolute;
		top: 54px;
		left: 426px;
		display: block;
		width: 96px;
		height: 93px;
		background: url(../images/header_label.png) no-repeat;
		filter: alpha(opacity=0);
		opacity: 0;
	}

		.ua-ie-7 #harutoLogo span.logo11,
		.ua-ie-8 #harutoLogo span.logo11 {
			left: 436px;
			background-image: url(../images/header_label.gif);
		}

#gh h2 {
	margin: 10px auto 52px auto;
	width: 246px;
	height: 16px;
	background: url(../images/header_subttl.gif) center top no-repeat;
}

#gh p {
	margin: 0 auto;
	width: 678px;
	height: 106px;
	background: url(../images/header_desc.gif) center center no-repeat;
}

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

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

#main .hero {
	position: relative;
	width: 1000px;
	height: 521px;
}

	.heroImageBox { position: absolute; background: #eee url(../../common/images/placeholder.png) center center no-repeat; }
	#hero1  { left:     0; top:     0; width:  500px; height: 521px; }
	#hero2  { left: 500px; top:     0; width:  250px; height: 261px; }
	#hero3  { left: 500px; top: 261px; width:  250px; height: 260px; }
	#hero4  { left: 750px; top:     0; width:  250px; height: 261px; }
	#hero5  { left: 750px; top: 261px; width:  250px; height: 260px; }
	#hero6  { left:     0; top:     0; width: 1000px; height: 521px; overflow: hidden; }
	#hero7  { left:     0; top:     0; width:  344px; height: 260px; }
	#hero8  { left:     0; top: 260px; width:  344px; height: 261px; }
	#hero9  { left: 344px; top:     0; width:  311px; height: 521px; }
	#hero10 { left: 655px; top:     0; width:  345px; height: 260px; }
	#hero11 { left: 655px; top: 260px; width:  345px; height: 261px; }

	#hero1  .heroImage { width:  500px; height: 521px; }
	#hero2  .heroImage { width:  250px; height: 261px; }
	#hero3  .heroImage { width:  250px; height: 260px; }
	#hero4  .heroImage { width:  250px; height: 261px; }
	#hero5  .heroImage { width:  250px; height: 260px; }
	#hero6  .heroImage { width: 1000px; height: 607px; }
	#hero7  .heroImage { width:  344px; height: 260px; }
	#hero8  .heroImage { width:  344px; height: 261px; }
	#hero9  .heroImage { width:  311px; height: 521px; }
	#hero10 .heroImage { width:  345px; height: 260px; }
	#hero11 .heroImage { width:  345px; height: 261px; }

#main .container {
	margin: 0 auto 0 auto;
	padding: 58px 0 80px 0;
	width: 914px;
}

	#main .contL { float: left; width: 432px; }
	#main .contR { float: right; width: 432px; }
	#main #paragraph3 .container { padding-bottom: 60px; }

#main .paragraph {
	position: relative;
}

#main .paragraph h2 {
	margin-bottom: 52px;
}

	#paragraph1 h2 {
		width: 761px;
		height: 38px;
		background: url(../images/article_ttl1.gif) no-repeat;
	}

	#paragraph2 h2 {
		width: 401px;
		height: 38px;
		background: url(../images/article_ttl2.gif) no-repeat;
	}

	#paragraph3 h2 {
		width: 519px;
		height: 38px;
		background: url(../images/article_ttl3.gif) no-repeat;
	}

#main .paragraph h3 {
	margin-bottom: 30px;
	color: #17c659;
	font-size: 20px;
}

	#main #paragraph2.paragraph h3,
	#main #paragraph3.paragraph h3 { margin-top: 38px; }

#main .paragraph p {
	text-align: justify;
	text-justify: auto;
	font-size: 14px;
	line-height: 178.5%;
	-webkit-font-smoothing: antialiased;
}

#main .paragraph .picWrapper {
	padding-top: 12px;
	width: 432px;
}

	#pic1 { float: right; margin: 5px 0 0 20px; }
	#pic2 { float: right; margin: 5px 0 0 20px; }
	#pic3 { margin-right: 2px; }
	#pic5 { margin-right: 2px; }

.ring {
	position: absolute;
	top: -35px;
	left: -5px;
	z-index: 100;
	width: 1010px;
	height: 60px;
	background: url(../images/border_ring.png) no-repeat;
}

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

#featureWrapper {
	padding-top: 60px;
	width: 100%;
	background: #d0f3dd url(../../common/images/shadow1.png) 0 50px repeat-x;
}

#featureContainer {
	background: #fff;
}

#feature {
	margin: 0 auto;
	padding: 60px 0 0 0;
	width: 914px;
}

#feature header h1 {
	margin: 0 0 32px 0;
	width: 591px;
	height: 90px;
	background: url(../images/feature_ttl.gif) no-repeat;
}

#feature header .desc {
	margin: 0 0 60px 0;
	width: 870px;
	height: 66px;
	background: url(../images/feature_desc.gif) no-repeat;
}

#feature .point {
	clear: both;
	margin-bottom: 66px;
}

	#feature #point3.point { padding-bottom: 76px; }

#feature .point figure {
	float: left;
	width: 396px;
	text-align: center;
}

#feature .point figure img {
	margin: -5px -5px 0 -5px;
}

#feature .point .cont {
	float: right;
	width: 432px;
}

#feature .point .card {
	position: relative;
	margin: 15px -5px;
	padding: 20px 35px 5px 35px;
	width: 372px;
	background: url(../images/feature_card_base_mid.png) repeat-y;
}

#feature .point .card .frameTop {
	position: absolute;
	top: -15px;
	left: 0;
	width: 442px;
	height: 15px;
	background: url(../images/feature_card_base_top.png) no-repeat;
}

#feature .point .card .frameBtm {
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 442px;
	height: 15px;
	background: url(../images/feature_card_base_btm.png) no-repeat;
}

#feature .point .card .pin {
	position: absolute;
	left: 226px;
	top: -25px;
	background: url(../images/feature_card_pin.png) no-repeat;
	width: 12px;
	height: 28px;
}

#feature .point h2 {
	margin-bottom: 20px;
}

#feature .point p {
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 178.5%;
	-webkit-font-smoothing: antialiased;
}

#feature .point .link {
	text-align: center;
}

#feature .point .desc {
	padding-bottom: 15px;
}