@charset "UTF-8";
/* CSS Document */

html,body{
	height:100%;
}

body{
	margin:0;
	text-align:center;
}

#wrapper{
	width:810px;
	margin:0 auto;
	text-align:left;
	min-height:100%;
	
	border:1px #666 solid;
	border-width:0 1px;
	background-color:#fff;
	
	position:relative;
}

img{
	margin:0;
	margin-bottom:20px;
}



body#fb #wrapper,
body#sp-fb #wrapper{
	border-width:0;
}

#wrapper #header{
	width:810px;
	height:182px;
	background-image:url(../images/header_0.jpg);
	background-repeat:no-repeat;
}

#wrapper #content{
	width:810px;
	/*height:670px;
	background-image:url(../images/body.jpg);*/
	background-repeat:no-repeat;
	position:relative;
	text-align:center;
}

#wrapper #footer{
	position:absolute;
	bottom:0;
	left:0;
	width:810px;
	height:63px;
	background-image:url(../images/footer.jpg);
}
	

body#outline #wrapper #content{
	/*height:1100px;*/
}


body#fb #wrapper #content{
	height:780px;
}



body#fb #wrapper #content span#join,
body#fb #wrapper #content a#join{
	display:block;
	width:321px;
	height:81px;
	background-image:url(../images/fb_join.png);
	background-repeat:no-repeat;
	position:absolute;
	top:333px;
	left:85px;
}


#wrapper #content a#fb-join,
#wrapper #content a#tw-join{
	display:block;
	position:absolute;
	left:64px;
	width:365px;
	height:61px;
}

#wrapper #content a#fb-join{
	top:363px;
	background-image:url(../images/outline_fb.png);
}
#wrapper #content a#tw-join{
	top:440px;
	background-image:url(../images/outline_tw.png);
}
	
#wrapper #content a#privacy{
	display:block;
	width:223px;
	height:15px;
	position:absolute;
	top:939px;
	left:233px;
}

body#fb #wrapper #content a#privacy{
	top:692px;
	left:232px;
}
	
#wrapper #content span#zoom,
#wrapper #content a#zoom{
	display:block;
	width:112px;
	height:112px;
	background-image:url(../images/clicktozoom.png);
	background-repeat:no-repeat;
	position:absolute;
	top:369px;
	left:669px;
}


/*-----not like-----*/
#cover{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
	opacity:0.9;
}


#fb #message{
	position:absolute;
	top:324px;
	left:141px;
	width:530px;
	height:102px;
	background-image:url(../images/fb_message.png);
}



#fb #mark{
	position:absolute;
	top:10px;
	left:680px;
	width:94px;
	height:71px;
	background-image:url(../images/fb_mark.png);
}


/*----------SmartPhone--------*/
body#sp-fb #wrapper #content{
	height:1130px;
}

body#sp-fb #wrapper #content span#join,
body#sp-fb #wrapper #content a#join{
	display:block;
	width:440px;
	height:81px;
	background-image:url(../images/sp_fb_join.jpg);
	background-repeat:no-repeat;
	position:absolute;
	top:674px;
	left:184px;
}

body#sp-fb #wrapper #content a#privacy{
	top:976px;
	left:232px;
}
	
.fb-like-box{
	position:absolute;
	top:380px;
	left:32px;
}

/*--------App Common-------------*/
body.app #wrapper #header{
	background-image:url(../images/app_header.jpg);
}
body.app #content input#charaname,
body.app #content input#mail,
body.app #content input#submit{
	position:absolute;
	display:block;
}

body.app #content input#charaname,
body.app #content input#mail{
	border:1px #666 solid;
}

body.app #content input#submit{
	border-width:0;
}
	
body.app #content input#charaname{
	top:134px;
	left:29px;
	width:430px;
	height:65px;
	font-size:36px;
	color:#ddd;
}
body.app #content input#mail{
	top:288px;
	left:136px;
	width:324px;
	height:20px;
	font-size:14px;
	color:#000;
}
body.app #content input#submit{
	left:155px;
	width:190px;
	height:37px;
	background:none;
	background-image:url(../images/app_submit.png);
	cursor:pointer;
}

body.app #content p#err-message{
	width:430px;
	text-align:center;
	color:#fff;
	background-color:#900;
	padding:5px 0;
	font-weight:bold;
	
	position:absolute;
	left:29px;
}


body#app-err #header,
body#app-fin #header{
	background-image:url(../images/header.jpg);
}
	
body#app-err #content,
body#app-fin #content{
}

body#app-err #content #message,
body#app-fin #content #message{
	background:none;
	font-size:14px;
	width:500px;
	border-radius:7px;
	text-align:center;
	padding:10px 0;
	
	position:absolute;
	top:60px;
	left:150px;
}
body#app-err #content #message{
	background-color:#F9C;
	color:#333;
}
body#app-fin #content #message{
	background-color:#DDD8AE;
	color:#333;
}

body#app-fin #content #message span#charaName{
	font-weight:bold;
	font-size:36px;
}

body#app-fin #content #message h3{
	font-weight:bold;
	font-size:20px;
}

/*--------FB-App-------------*/

body#app-fb #content{
	
}

body#app-fb #content p#err-message{
	top:330px;
}

body#app-fb #content input#submit{
	top:400px;
}


/*--------tw-App-------------*/

body#app-tw #content{
	
}

body#app-tw #content p#err-message{
	top:210px;
}

body#app-tw #content input#submit{
	top:300px;
}