@charset "Shift_JIS";

div#container {
	position: relative;
}

/* managerArea
------------------------------------------------------------*/
div#managerArea {
 	position: absolute;
	left: 30%; 
	width: 0;
 	height: 800px;
	visibility: hidden;
	background: transparent !important;
}

/*  h2
------------------------------------------------------------*/
h2 {
	margin-bottom: 30px;
}

/*  main
------------------------------------------------------------*/
div#main {
	border: 1px #ff321e solid; padding-bottom: 46px; background: url(../img/common/bg_middle.gif) top center repeat-y;
}

div#main h3 {
	margin-bottom: 38px;
}

div#main ol {
	width: 680px; margin: 0 auto 60px auto;
}

/*  step1
------------------------------------------------------------*/
div#main ol li#step1 {
	width: 680px; margin-bottom: 10px; padding-bottom: 36px; background:url(../img/intro/arrow.gif) bottom center no-repeat;
}

div#main ol li#step1 div.inner {
	width: 680px; height: 250px; margin: 0 auto; background:url(../img/intro/bg1.gif) top left no-repeat;
}

div#main ol li#step1 div.inner dl {
	float: left; width: 375px; display: inline; padding: 56px 0 0 35px;
}

div#main ol li#step1 div.inner dl dt {
	margin-bottom: 18px; margin-left: 3px;
}

div#main ol li#step1 div.inner div.flashArea {
	float: right; display: inline; width: 234px; height: 218px; padding: 16px 16px 0 0;
}

div#main ol li#step1 div.inner div.flashArea p {
	padding-top: 15px;
}


/*  step2
------------------------------------------------------------*/
div#main ol li#step2 {
	width: 680px; margin-bottom: 10px; padding-bottom: 36px; background:url(../img/intro/arrow.gif) bottom center no-repeat;
}

div#main ol li#step2 div.inner {
	width: 680px; height: 250px; margin: 0 auto; background:url(../img/intro/bg1.gif) top left no-repeat;
}

div#main ol li#step2 div.inner dl {
	float: left; width: 375px; display: inline; padding: 40px 0 0 35px;
}

div#main ol li#step2 div.inner dl dt {
	margin-bottom: 18px;
}

div#main ol li#step2 div.inner div.flashArea {
	float: right; display: inline; width: 234px; height: 218px; padding: 16px 16px 0 0;
}

div#main ol li#step2 div.inner div.flashArea p {
	padding-top: 15px;
}

/*  step3
------------------------------------------------------------*/
div#main ol li#step3 {
	width: 680px; margin-bottom: 10px; padding-bottom: 36px; background:url(../img/intro/arrow.gif) bottom center no-repeat;
}

div#main ol li#step3 div.inner {
	width: 680px; height: 250px; margin: 0 auto; background:url(../img/intro/bg1.gif) top left no-repeat;
}

div#main ol li#step3 div.inner dl {
	float: left; width: 375px; display: inline; padding: 50px 0 0 35px;
}

div#main ol li#step3 div.inner dl dt {
	margin-bottom: 18px;
}

div#main ol li#step3 div.inner div.flashArea {
	float: right; display: inline; width: 232px; height: 218px; padding: 16px 16px 0 0;
}

div#main ol li#step3 div.inner div.flashArea p {
	padding-top: 15px;
}

/*  nextplanet
------------------------------------------------------------*/
div#main ol li#nextplanet {
	width: 680px; height: 168px; margin: 0 auto; background: url(../img/intro/bg_nextplanet.gif) top left no-repeat;
}

div#main ol li#nextplanet dl {
	 padding: 25px 0 0 0;
}

div#main ol li#nextplanet dl dt {
	margin-bottom: 20px; text-align: center;
}

div#main ol li#nextplanet dl dd {
	text-align: center;
}

/*  info
------------------------------------------------------------*/
div#main div#info {
	width: 692px; height: 250px; margin: 0 auto; background: url(../img/intro/bg_info.gif) top center no-repeat;
}

div#main div#info h4 {
	padding: 12px 0 0 0; margin-bottom: 32px; text-align: center;
}

div#main div#info div {
	width: 600px; margin: 0 auto;
}

div#main div#info div p.img {
	float: left; width: 180px; margin-right: 16px;
}

div#main div#info div p.text {
	float: left; display: inline; width: 256px; margin-right: 16px; padding-top: 10px;
}

div#main div#info div dl {
	float: left; display: inline;
	width: 129px;
}

div#main div#info div dl dt {
	margin-bottom: 5px;
	line-height: 1.1;
}


/*  clearfix
------------------------------------------------------------*/
	div#main ol li#step1 div:after,
	div#main ol li#step2 div:after,
	div#main ol li#step3 div:after,
	div#main div#info div:after { 
		content: " "; 
		display: block; 
		clear: both; 
		height: 0; 
	} 
	div#main ol li#step1 div,
	div#main ol li#step2 div,
	div#main ol li#step3 div,
	div#main div#info div { 
		display: inline-block; 
	} 
	div#main ol li#step1 div,
	div#main ol li#step2 div,
	div#main ol li#step3 div,
	div#main div#info div { 
		display: block; 
	}