@charset "UTF-8";

/*--------------------------------------------------------------*/
/* ご利用手順
/*--------------------------------------------------------------*/

#intro h2{
	position: absolute;
	width: 204px;
	height: 46px;
	top: 80px;
	left: 70px;
}

#intro div{
	position: relative;
	width: 373px;
	height: 200px;
	top: 75px;
	left: 510px;
	overflow: hidden;
	z-index: 15;
}

	#intro div p{
		text-indent: -20000em;
	}

	#intro div img{
		position: absolute;
		top: 0;
		left: 0;
	}


/*--------------------------------*/

#select{
	position: relative;
	margin-top: -70px;
	margin-bottom: 60px;
}

	#select h3{
		position: relative;
		margin: 0 0 15px 45px;
	}
	
	#select ol{
		margin: 0 0 0 300px;
	}
	
		/* 共通 */
		#select ol li{
			position: relative;
			padding-bottom: 23px;
			background-image: url(../img/process/arrow.png);
			background-position: bottom center;
			background-repeat: no-repeat;
			list-style: none;
		}
		
			#select ol li h4
			#select ol li p{
				text-indent: -20000em;
			}
		
			#select ol li img{
				position: absolute;
				top: 0;
				left: 0;
			}

				/* 補足で左に表示するやつ */
				#select ol li div.app{
					position: absolute;
					overflow: hidden;
				}
				
					#select ol li div.app img{
						position: absolute;
						top: 0;
						left: 0;
					}
	
		/* 個別 */
		#select ol #select_1{
			width: 550px;
			height: 180px;
		}
		
		#select ol #select_2{
			width: 550px;
			height: 171px;
			z-index: 2;
		}
		
		#select ol #select_3{
			width: 550px;
			height: 151px;
			margin-top: -6px;
			padding: 0;
			background: none;
		}
		
			#select ol #select_3 div.app{
				top: -340px;
				left: -245px;
				width: 229px;
				height: 466px;
			}
		
	#select #goto_characters{
		margin-top: 30px;
		text-align: center;
	}


/*--------------------------------*/

#order{
	position: relative;
	margin-bottom: 80px;
}

	#order h3{
		position: relative;
		margin: 0 0 15px 45px;
	}
	
	#order ol{
		margin: 0 0 0 300px;
	}
	
		/* 共通 */
		#order ol li{
			position: relative;
			padding-bottom: 23px;
			background-image: url(../img/process/arrow.png);
			background-position: bottom center;
			background-repeat: no-repeat;
			list-style: none;
		}
		
			#order ol li h4
			#order ol li p{
				text-indent: -20000em;
			}
		
			#order ol li img{
				position: absolute;
				top: 0;
				left: 0;
			}
			
				/* 補足で左に表示するやつ */
				#order ol li div.app{
					position: absolute;
					overflow: hidden;
				}
	
		/* 個別 */
		#order ol #ordermade_1{
			width: 550px;
			height: 181px;
		}
		
		#order ol #ordermade_2{
			width: 550px;
			height: 119px;
			z-index: 3;
		}
		
			#order ol #ordermade_2 div.app{
				top: -80px;
				left: -255px;
				width: 236px;
				height: 462px;
			}
		
		#order ol #ordermade_3{
			width: 549px;
			height: 192px;
			margin-top: -4px;
			z-index: 4;
		}
		
			#order ol #ordermade_3 div.app{
				top: -35px;
				left: -160px;
				width: 145px;
				height: 98px;
				z-index: 2;
			}

		#order ol #ordermade_4{
			width: 549px;
			height: 130px;
			margin-top: -4px;
		}
		
			#order ol #ordermade_4 div.app{
				top: 55px;
				left: -155px;
				width: 171px;
				height: 97px;
			}
			
				#order ol #ordermade_4 div.app p{
					text-indent: -20000em;
				}

		#order ol #ordermade_5{
			width: 550px;
			height: 131px;
			z-index: 2;
		}
		
		#order ol #ordermade_6{
			width: 550px;
			height: 169px;
			margin-top: -6px;
			padding: 0;
			background: none;
		}

			#order ol #ordermade_6 div.app{
				top: -90px;
				left: -270px;
				width: 229px;
				height: 209px;
			}
	
	#order #goto_request{
		margin-top: 30px;
		text-align: center;
	}


/*--------------------------------*/

/* 注意事項 */
#attention{
	position: relative;
	width: 618px;
	height: 1278px;
	margin-left: 40px;
	padding: 130px 130px 0 100px;
	font-size: 85%;
	background-image: url(../img/process/attention_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

	#attention h3{
		position: absolute;
		top: 31px;
		left: 100px;
	}
	
	#attention h4{
		margin: 30px 0 5px 0;
		padding: 5px 5px 0 5px;
		clear: both;
	}
	
	#attention ul{
		margin-left: 27px;
	}
	
	#attention ul.sup{
		margin-top: 1em;
		list-style: none;
	}
	
	#attention dl{
		position: relative;
		margin: 1em 0 0 40px;
		font-weight: bold;
	}
	
		#attention dl dd{
			float: left;
			margin: 0 1.5em 30px 0;
		}	


/*--------------------------------*/

#outro{
	position: relative;
	height: 210px;
	margin: 0 auto;
	z-index: 15;
}

	#outro p{
		text-indent: -20000em;
	}

	#outro img{
		position: absolute;
		top: -249px;
		left: 175px;
	}


/*--------------------------------*/
/* ミニキャラ */
/*--------------------------------*/

#no260{	position: absolute;	top: -11px; 	right: 50px;	z-index: 99; }
#no183{	position: absolute;	top: 180px; 	left: 0;		z-index: 99; }
#no198{	position: absolute;	bottom: -25px; 	left: 125px;	z-index: 99; }
#no285{	position: absolute;	bottom: 70px; 	right: 30px;	z-index: 99; }
#no246{	position: absolute;	top: -39px; 	left: 45px;		z-index: 99; }
#no178{	position: absolute;	top: 110px; 	right: 250px;	z-index: 99; }
#no194{	position: absolute;	top: 600px; 	left: -100px;	z-index: 99; }
#no168{	position: absolute;	bottom: -63px; 	left: 170px;	z-index: 99; }


/*--------------------------------*/