@charset 'utf-8';

/* -----------------------------------------------------------
CSS Information

File name:      mod_beginner.css
Update:         2009/07/14
Author:         J.M
Style Info:     はじめての方へ設定

	01. ニコッとタウンの遊び方
	02. ニコッとタウンのコンセプト
	03. Pコインとは？

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



/* ----------------------------------------------------------------------
  01. ニコッとタウンの遊び方
---------------------------------------------------------------------- */

/* member-regist(背景パターン)
------------------------------------------- */
body#beginner.guide01 {
	background: url("/image/regist/nicotto/bg_pattern.jpg") repeat-x 0 29px;
}


body#beginner.guide01 #container {
	background: url("/image/regist/nicotto/bg_picture.jpg") no-repeat 0 29px;
}

#guide01Area {
	margin: 44px 0 0 47px;
	position: relative;
	width: 734px;
	/*height: 772px;*/
	height: 630px;
	background: url("/image/guide/01/bg_howtoplay.jpg") no-repeat bottom left;
}

#guide01Area img {
	vertical-align: bottom;
}

#guide01Area ul {
}

#guide01Area li.point01 {
	position: absolute;
	top: 162px;
	left: 23px;
}

#guide01Area li.point02 {
	position: absolute;
	top: 384px;
	left: 23px;
}

#guide01Area li.point03 {
	position: absolute;
	top: 96px;
	left: 256px;
}

#guide01Area li.point04 {
	position: absolute;
	top: 162px;
	right: 17px;
}

#guide01Area li.point05 {
	position: absolute;
	top: 384px;
	right: 17px;
}

#guide01Area li.vertualcoin {
	position: absolute;
	top: 339px;
	left: 325px;
}

#guide01Area li.gacha {
	position: absolute;
	top: 570px;
	left: 363px;
}


body#beginner.guide01 #container div.button {
	text-align: center;
	margin: 20px 0 50px 44px;
	width: 734px;
	position: relative;
}

body#beginner.guide01 #container div.button p {
}

body#beginner.guide01 #container div.button p.concept {
	position: absolute;
	top: 15px;
	right: 0;
}

body#beginner.guide01 #container div.button ul {
	text-align: center;
}

body#beginner.guide01 #container div.button li {
	display: inline;
	margin-right: 20px;
}

body#beginner.guide01 #container div.button li.right {
	margin-right: 0;
}





/* ----------------------------------------------------------------------
  02. ニコッとタウンのコンセプト
---------------------------------------------------------------------- */


/* siteTitleArea
---------------------------------------------------------------------- */
body#beginner #siteTitleArea h2 {
	background: url("/image/beginner/title_beginner.gif") no-repeat;
	text-indent: -999px;
}





/* aboutNicotto-outer
---------------------------------------------------------------------- */
#aboutNicotto-outer {
	margin: 10px auto 0;
	width: 690px;
}

#aboutNicotto-outer img {
	vertical-align: bottom;
}

#aboutNicotto-outer p.projectName {
	margin-bottom: 10px;
}

#aboutNicotto-outer h1,
#aboutNicotto-outer h2 {
}

#aboutNicotto-outer h2 {
	margin: 0 auto;
	text-align: center;
}

#aboutNicotto-outer .map {
	margin: 0 auto;
}

#aboutNicotto-outer .button {
	margin: 20px auto;
	text-align: center;
	width: 690px;
}






/* ----------------------------------------------------------------------
  03. Pコインとは？
---------------------------------------------------------------------- */

/* aboutPcoin-outer
---------------------------------------------------------------------- */
#aboutPcoin-outer {
	position: relative;
	margin: 0 auto;
	width: 810px;
	height: 825px;
	background: #fff url(/image/guide/pcoin/bg_head.jpg) no-repeat top left;
}

#aboutPcoin-outer h2,
#aboutPcoin-outer h3,
#aboutPcoin-outer p,
#aboutPcoin-outer li {
	margin: 0;
	padding: 0;
	border: none;
	line-height: 1;
}



/* titleBox
---------------------------------------------------------------------- */
#aboutPcoin-outer #titleBox {
	position: absolute;
	top: 45px;
	left: 45px;
	width: 430px;
}



/* mainArea
---------------------------------------------------------------------- */
#aboutPcoin-outer #mainArea {
	position: absolute;
	top: 211px;
	left: 45px;
	width: 720px;
}

#aboutPcoin-outer #mainArea:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

#aboutPcoin-outer #mainArea h3 {
	margin-bottom: 7px;
}



/* coinExpArea 
---------------------------------------------------------------------- */
#aboutPcoin-outer #mainArea #coinExpArea {
	float: left;
	width: 350px;
}



/* pcoinExpArea 
---------------------------------------------------------------------- */
#aboutPcoin-outer #mainArea #pcoinExpArea {
	float: right;
	width: 350px;
}

#aboutPcoin-outer #mainArea #coinExpArea div.pic01,
#aboutPcoin-outer #mainArea #pcoinExpArea div.pic01 {
	margin-bottom: 15px;
	width: 350px;
	height: 190px;
	background: url(/image/guide/pcoin/ico_arrow01.gif) no-repeat bottom center;
}

#aboutPcoin-outer #mainArea #coinExpArea div.pic02,
#aboutPcoin-outer #mainArea #pcoinExpArea div.pic02 {
	margin-bottom: 10px;
	width: 350px;
	height: 188px;
	background: url(/image/guide/pcoin/ico_arrow02.gif) no-repeat bottom center;
}

#aboutPcoin-outer #mainArea #coinExpArea h4,
#aboutPcoin-outer #mainArea #pcoinExpArea h4 {
	margin-bottom: 5px;
}

#aboutPcoin-outer #mainArea #coinExpArea ul,
#aboutPcoin-outer #mainArea #pcoinExpArea ul {
	margin-bottom: 10px;
}

#aboutPcoin-outer #mainArea #coinExpArea ul.btn,
#aboutPcoin-outer #mainArea #pcoinExpArea ul.btn {
	margin-left: 9px;
}

#aboutPcoin-outer #mainArea #coinExpArea ul.btn:after,
#aboutPcoin-outer #mainArea #pcoinExpArea ul.btn:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

#aboutPcoin-outer #mainArea #coinExpArea ul.btn li,
#aboutPcoin-outer #mainArea #pcoinExpArea ul.btn li {
	float: left;
}

#aboutPcoin-outer #mainArea #coinExpArea ul.btn li.right,
#aboutPcoin-outer #mainArea #pcoinExpArea ul.btn li.right {
	margin-left: 16px;
}