@charset 'utf-8';

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

File name:      mod_beginner.css
Update:         2014/03/25
Author:         M.Y
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 div span {
	display:none;
}

#guide01Area h2#howtoplay{
	background:url(/image/guide/01/title_howtoplay.jpg) no-repeat;
	width:734px;
	height:167px;
	text-indent:-9999px;
}

#guide01Area .howtoplay01{
	background:url(/image/guide/01/img_howtoplay01.jpg) no-repeat;
	width:734px;
	height:331px;
}

#guide01Area .howtoplay02{
	background:url(/image/guide/01/img_howtoplay02.jpg) no-repeat;
	width:734px;
	height:249px;
}

#guide01Area .howtoplay03{
	background:url(/image/guide/01/img_howtoplay03.jpg) no-repeat;
	width:734px;
	height:622px;
	position:relative;
	padding-bottom:100px;
}


#guide01Area .btn_mypage{
	position:absolute;
	top:33px;
	left:250px;
}

#guide01Area .btn_blog{
	position:absolute;
	top:33px;
	left:390px;
}




#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 {
	margin-bottom: 32px;
}

#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;
}




/* ----------------------------------------------------------------------
  04. アイテム要望ポスト
---------------------------------------------------------------------- */

/* aboutPost-outer
---------------------------------------------------------------------- */

#aboutPost-bg{
	position:relative;
	display:block;
	padding-bottom:80px;
	background: #fff url(/image/guide/post/bg_gra.png)  repeat-x top left;
}

#aboutPost-outer{
	background: url(/image/guide/post/bg_top.png) no-repeat top center;
	width:100%;
	margin:0 auto;
	padding-top:50px;
	min-width:830px;
}

#aboutPost-outer .postArea_01{
	background:url(/image/guide/post/catch.png) no-repeat top center;
	width:830px;
	height:65px;
	position:relative;
	margin:0 auto;
}

#aboutPost-outer .postArea_02{
	background:url(/image/guide/post/main.png) no-repeat top center;
	width:830px;
	height:765px;
	position:relative;
	margin:0 auto;
}

#aboutPost-outer .postArea_03{
	width:830px;
	height:175px;
	position:relative;
	margin:0 auto;
}

#aboutPost-outer .postArea_03_none{
	width:440px;
	height:110px;
	padding-top:20px;
	position:relative;
	margin:0 auto;
	text-align:center;
	font-weight:bold;
	border:#e6e2d6 solid 3px;
	background-color:#fcf9f0;
	margin:30px auto;
	box-sizing: border-box;
}

#aboutPost-outer .postArea_03_none span{
	color:red;
}

#aboutPost-outer .postArea_03_none a{
	line-height:3em;
	border-bottom:1px solid;
}

#aboutPost-outer .postArea_04{
	background:url(/image/guide/post/mark.png) no-repeat top center;
	width:830px;
	height:348px;
	position:relative;
	margin:0 auto;
}

#aboutPost-outer .postArea_03 .btn_post{
	position:absolute;
	display:block;
	left: 220px;
	top: 15px;
}

#aboutPost-outer .postArea_03 .btn_etc{
	position:absolute;
	display:block;
	left: 255px;
	top: 115px;
}

#container #footer830 #footerArea {
	margin: 0 auto;
	background: url(/image/common/bg_footer.gif) no-repeat bottom;
}