@charset "UTF-8";
/* 文字コード：UTF-8 */
html{
	height: 100%;
}

body{
	height: 100%;
	overflow: hidden;
}

div#top div#container{
	background: none;
}

div#top div#main_wrap{
	position: relative;
	overflow: hidden;
}

div#top div#main{
	position: absolute;
	padding: 0;
	background: url(../image/common/bg.jpg) left top repeat-x;
	overflow: hidden;
	margin: 0;
}

div#top div#main div.content{
	float: left;
	position: relative;
	background: url(../image/common/bg_light.jpg) center top no-repeat;
	color: #000;
	overflow:hidden;
}

div#top div#main div.content_foot{
	width: 100%;
	height: 150px;
	background: url(../image/footer/bg.jpg) left top repeat-x;
	position: absolute;
	left: 0;
	bottom: 0;
}

div#top div#main div.content div.silhouette1{
	width: 100%;
	height: 230px;
	background: url(../image/footer/silhouette.png) center top no-repeat;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;
}

div#top div#main div.content div.silhouette2{
	width: 100%;
	height: 230px;
	background: url(../image/footer/silhouette2.png) center top no-repeat;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;
}

div#top div#main div.content div.silhouette3{
	width: 100%;
	height: 230px;
	background: url(../image/footer/silhouette3.png) center top no-repeat;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;
}

div#top div#main div.content div.silhouette4{
	width: 100%;
	height: 230px;
	background: url(../image/footer/silhouette4.png) center top no-repeat;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;
}




/* slide_page */

div#top div.content img.img_pg1{
	/*width: 500px;
	height: 350px;*/
	display: block;
	margin: 100px auto 0;
	z-index: 10;
}

div#top div#main div.content img.device{
	width: 379px;
	height: 274px;
	display: block;
	position: absolute;
	margin-left: -190px;
	left: 50%;
	bottom: 30px;
	z-index: 5;
}

div#top div.content div.pg3{
	width: 602px;
	overflow: hidden;
	margin: 100px auto 0;
	z-index: 10;
	position: relative;
}

div#top div.content div.pg3 img.ttl_pg3{
	display: block;
	margin-bottom: 20px;
	clear: both;
}

div#top div.content div.pg3 img.btn_more{
	width: 78px;
	height: 14px;
	position: absolute;
	right: 0;
	top: 150px;
}

div#top div.content div.pg3 div.left{
	float: left;
	width: 345px;
	overflow: hidden;
}

div#top div.content div.pg3 div.left img{
	display: block;
	float: right;
	margin-top: 12px;
}

div#top div.content div.pg3 div.right{
	float: right;
	width: 225px;
	overflow: hidden;
}

div#top div.content div.pg4{
	width: 556px;
	overflow: hidden;
	margin: 100px auto 0;
	z-index: 10;
	position: relative;
}

div#top div.content div.pg4 .ttl_pg4{
	display: block;
	margin-bottom: 45px;
	clear: both;
}

div#top div.content div.pg4 img.btn_more{
	width: 78px;
	height: 14px;
	position: absolute;
	right: 0;
	top: 141px;
}

/* top navigation */
div#pgnav div{
	width: 60px;
	height: 24px;
	background: #000;
	position: absolute;
	z-index: 30;
	bottom: 170px;
	cursor: pointer;
	text-indent: -9999px;
}

div#pgnav div.prev{
	background: url(../image/navi/btn_prev.png) left top no-repeat;
	left: 10px;
}

div#pgnav div.next{
	background: url(../image/navi/btn_next.png) left top no-repeat;
	right: 10px
}

div#stepnav {
	position: absolute;
	z-index: 30;
	height:21px;
	bottom: 10px;
}

div#stepnav .step {
	float:left;
	height:21px;
	width:21px;
	background: url(../image/navi/icon.png) center center no-repeat;
	text-indent: -9999px;
	cursor:pointer;
}

div#stepnav .active {
	background: url(../image/navi/icon_active.png) center center no-repeat;
}

div#main_wrap div.transition {
	-webkit-transition: 500ms ease-in-out;
	-moz-transition: 500ms ease-in-out;
}


div#top_banner{
	width: 339px;
	height: 79px;
	position: absolute;
	left: -345px;
	top: 8px;
	z-index: 90;
}

@-webkit-keyframes 'slidein' {
0% {left:-326px;}
100% {left:0;}
}

@-moz-keyframes 'slidein' {
0% {left:-326px;}
100% {left:0;}
}