@charset "shift_jis";
/* CSS Document */

body	{
	background:#ffffff url(../images/background-01.jpg) top left repeat-x;
}

/* -------------------------------------------------------------------------
	Wrapper
--------------------------------------------------------------------------*/
#wrappere	{
	min-width:900px;
	margin:0;
	padding:0;
	background:url(../images/background-02.jpg) top center no-repeat;
	min-height:1200px;
	height:100%;
}
#wrapp	{
	margin:0 auto;
	text-align:left;
	width:900px;
	height:1200px;
}

/* -------------------------------------------------------------------------
	Header
--------------------------------------------------------------------------*/
#header	{
	width:484px;
	height:205px;
	float:left;
}
#header h1	{
	width:425px;
	height:205px;
	margin:0 0 0 2px;
	padding:0 0 0 0;
	background:url(../images/top-tilte.png) top left no-repeat;
}


/* -------------------------------------------------------------------------
	Navigatoin
--------------------------------------------------------------------------*/
#navigation	{
	width:416px;
	height:205px;
	margin:20px 0 0 0;
	float:left;
}
#navigation p.new	{
	width:50px;
	height:25px;
	background:url(../images/top-new.gif) left top no-repeat;
	position:absolute;
	z-index:10;
	margin:110px 0 0 365px;
}
#navigation ul	{
	width:416px;
	margin:0;
	padding:0;
}
#navigation ul li	{
	width:188px;
	height:86px;
	margin:0 0 0 0;
	padding:0;
	float:left;
}
#navigation ul li a	{
	width:188px;
	height:86px;
	display:block;
}
#navigation ul li.character	{
	margin:0 40px 0 0;
}
#navigation ul li.character a	{
	background: url(../images/top-navigation.png) left top no-repeat;
}
#navigation ul li.book a	{
	background: url(../images/top-navigation.png) -228px top no-repeat;
}
#navigation ul li.message	{
	margin:0 40px 0 0;
}
#navigation ul li.message a	{
	background: url(../images/top-navigation.png) left -86px no-repeat;
}
#navigation ul li.blog a	{
	background: url(../images/top-navigation.png) -228px -86px no-repeat;
}

/* -------------------------------------------------------------------------
	Navigatoin-Hover
--------------------------------------------------------------------------*/
#navigation ul li.character a:hover	{
	background: url(../images/top-navigation.png) -416px top no-repeat;
}
#navigation ul li.book a:hover	{
	background: url(../images/top-navigation.png) -644px top no-repeat;
}
#navigation ul li.message a:hover	{
	background: url(../images/top-navigation.png) -416px -86px no-repeat;
}
#navigation ul li.blog a:hover	{
	background: url(../images/top-navigation.png) -644px -86px no-repeat;
}

/* -------------------------------------------------------------------------
	Content
--------------------------------------------------------------------------*/
#content p.chara01 a	{
	background:url(../images/top-img01.png) left top no-repeat;
	width:204px;
	height:304px;
	display:block;
	position:absolute;
	margin:310px 0 0 370px;
	z-index:35;
}
#content p.chara02	{
	background:url(../images/top-img02.png) left top no-repeat;
	width:231px;
	height:387px;
	display:block;
	position:absolute;
	margin:270px 0 0 100px;
	z-index:30;
}
#content p.chara03	{
	background:url(../images/top-img03.png) left top no-repeat;
	width:146px;
	height:404px;
	display:block;
	position:absolute;
	margin:160px 0 0 630px;
	z-index:25;
}
#content p.chara04	{
	background:url(../images/top-img04.png) left top no-repeat;
	width:143px;
	height:220px;
	display:block;
	position:absolute;
	margin:140px 0 0 470px;
	z-index:20;
}
#content p.chara05 a	{
	background:url(../images/top-img05.png) -258px top no-repeat;
	width:204px;
	height:266px;
	display:block;
	position:absolute;
	margin:140px 0 0 260px;
	z-index:15;
}
#content p.chara06 a	{
	background:url(../images/top-img06.png) left top no-repeat;
	width:183px;
	height:207px;
	display:block;
	position:absolute;
	margin:10 0 0 580px;
	z-index:10;
}
#content p.chara07	{
	background:url(../images/top-img07.png) left top no-repeat;
	width:209px;
	height:192px;
	display:block;
	position:absolute;
	margin:0 0 0 340px;
	z-index:5;
}
#content p.chara08	{
	background:url(../images/top-img08.png) left top no-repeat;
	width:133px;
	height:210px;
	display:block;
	position:absolute;
	margin:30 0 0 160px;
	z-index:1;
}
/* -----character hover---------------------------------------------------------*/
#content p.chara01 a:hover	{
	background:url(../images/top-img01.png) left top no-repeat;
	width:464px;
	height:304px;
	display:block;
	position:absolute;
	margin:310px 0 0 370px;
	z-index:100;
}
#content p.chara05 a:hover	{
	background:url(../images/top-img05.png) top no-repeat;
	width:462px;
	height:266px;
	display:block;
	position:absolute;
	margin:120px 0 0 2px;
	z-index:15;
}
#content p.chara06 a:hover	{
	background:url(../images/top-img06.png) -183px top no-repeat;
	width:193px;
	height:207px;
	display:block;
	position:absolute;
	margin:10 0 0 570px;
	z-index:10;
}

/* -------------------------------------------------------------------------
	Footer
--------------------------------------------------------------------------*/
#footer	{
	z-index:50;
	position:absolute;
	top:730px;
	_top:750px;
}
#footer h3	{
	width:280px;
	height:272px;
	background:url(../images/top-footerimg1.png) top left no-repeat;
	z-index:60;
}

/* -------------------------------------------------------------------------
	Banner
--------------------------------------------------------------------------*/
#banner	{
	z-index:70;
	position:absolute;
	top:890px;
}
#banner ul	{
	margin:0 0 0 59px;
	padding:0 0 0 0;
	width:841px;
	height:137px;
	background:url(../images/top-banner.png) top left no-repeat;
	z-index:70;
}
#banner ul li	{
	margin:0 0 0 0;
	padding:0 0 0 0;
	float:left;
}
#banner ul li.banner-lv01 a	{
	width:250px;
	height:54px;
	display:block;
	margin:12px 47px 0 15px;
}
#banner ul li.banner-lv02	{
	width:250px;
	height:54px;
	display:block;
	margin:12px 40px 0 15px;
}
#banner ul li.banner-lv03 a	{
	width:181px;
	height:40px;
	display:block;
	margin:23px 0 0 25px;
}
#banner address	{
	width:470px;
	height:46px;
	background:url(../images/top-copy.png) top left no-repeat;
	z-index:100;
	margin:-50px 0 0 425px;
}
#banner address a	{
	width:37px;
	height:46px;
	display:block;
	margin-left:436px;
}

/* -------------------------------------------------------------------------
	Clear
--------------------------------------------------------------------------*/
#clear	{clear:both;}
.clear	{clear:both;}