@charset "UTF-8";

/*--------------------------------------------------------------*/
/* 共通 */
/*--------------------------------------------------------------*/

html {
	width: 100%;
	height: 100%;
}

/*--------------------------------------------------------------*/
/* 全体 */
/*--------------------------------------------------------------*/

#whole{
	position: relative;
	min-height: 100%;
}

#contents {
	position: relative;
	padding: 20px 0 0 15px;
	padding-bottom: 230px;
}

#grid { position: absolute; }

#grid h2{
	position: absolute;
	text-indent: -9999px;
}

#grid div.item{ position: absolute; }

#grid div.deco{ text-align: center; }


/*-------------------------------------------------*/
/* タイトル */
/*-------------------------------------------------*/

#title div.body{
	width: 555px;
	height: 175px;
}

#title div.body h1{
	position: relative;
	top: -35px;
	left: -27px;
}


/*-------------------------------------------------*/
/* 新着情報 */
/*-------------------------------------------------*/

#whatsnew h2{
	top: -20px;
	right: -4px;
	width: 145px;
	height: 187px;
	background-image: url(../img/index/h2_whatsnew.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 10;
}

#whatsnew div.body{
	width: 530px;
	height: 145px;
	background-image: url(../img/index/whatsnew.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding: 25px 0 0 25px;
	font-size: 80%;
	line-height: 1.5em;
}

#whatsnew div.body a{ text-decoration: none; }
#whatsnew div.body a:hover{ color: #000000; font-weight: bold; }

#whatsnew div.body dt{
	width: 8em;
	float: left;
	font-weight: bold;
}

#whatsnew div.body dd{
	margin-right: 10px;
	padding-left: 9em;
	margin-bottom: 0.6em;
	padding-bottom: 0.1em;
	border-bottom: dotted 1px #999999;
}

#whatsnew div.body dd.last{
	border: none;
	margin: 0;
}


/*-------------------------------------------------*/
/* 新着キャラクター1 */
/*-------------------------------------------------*/

#newchara1 div.body{ background-image: url(../img/index/newchara1.gif); }

#newchara1 div.body p.image{
	top: 10px;
	right: 10px;
}

#newchara1 div.body p.date{
	top: 117px;
	left: 10px;
	color: #50B114;
}

#newchara1 div.body p.concept{
	top: 140px;
	left: 0;
	padding: 0 10px;
}


/*-------------------------------------------------*/
/* 新着キャラクター2 */
/*-------------------------------------------------*/

#newchara2 h2{
	top: -10px;
	left: 20px;
	width: 114px;
	height: 35px;
	background-image: url(../img/index/h2_newchara2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#newchara2 div.body{ background-image: url(../img/index/newchara2.gif); }

#newchara2 div.body p.image{
	bottom: 11px;
	left: 12px;
}

#newchara2 div.body p.date{
	top: 98px;
	right: 10px;
	color: #FF6600;
}

#newchara2 div.body p.concept{
	top: 30px;
	left: 0;
	padding: 0 10px;
	text-align: right;
}


/*-------------------------------------------------*/
/* 新着キャラクター3 */
/*-------------------------------------------------*/

#newchara3 h2{
	top: -18px;
	left: -7px;
	width: 90px;
	height: 54px;
	background-image: url(../img/index/h2_newchara3.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#newchara3 div.body{ background-image: url(../img/index/newchara3.gif); }

#newchara3 div.body p.image{
	top: 22px;
	right: 11px;
}

#newchara3 div.body p.date{
	top: 130px;
	left: 40px;
	color: #669900;
}

#newchara3 div.body p.concept{
	top: 152px;
	left: 0;
	padding: 0 10px;
	line-height: 1.5em;
}


/*-------------------------------------------------*/
/* 新着キャラクター */
/*-------------------------------------------------*/

#newchara1 div.body,
#newchara2 div.body,
#newchara3 div.body{
	width: 175px;
	height: 215px;
	font-size: 75%;
	line-height: 1.4em;
	background-repeat: no-repeat;
	background-position: left top;
}

#newchara1 div.body p.image,
#newchara2 div.body p.image,
#newchara3 div.body p.image{
	position: absolute;
	width: 80px;
	height: 80px;
}

#newchara1 div.body p.date,
#newchara2 div.body p.date,
#newchara3 div.body p.date{
	position: absolute;
	font-size: 110%;
	font-weight: bold;
}

#newchara1 div.body p.concept,
#newchara2 div.body p.concept,
#newchara3 div.body p.concept{ position: absolute; }


/*-------------------------------------------------*/
/* chararyについて */
/*-------------------------------------------------*/

#about h2{
	top: -8px;
	right: -6px;
	width: 73px;
	height: 71px;
	background-image: url(../img/index/h2_about.gif);
	background-repeat: no-repeat;
	background-position: left top;
}


/*-------------------------------------------------*/
/* ツイッタ～ */
/*-------------------------------------------------*/

#twitter h2{
	top: 0;
	left: 0;
	width: 365px;
	height: 33px;
	background-image: url(../img/index/h2_twitter.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 10;
}

#twitter div.body{
	width: 335px;
	padding: 50px 15px 40px 15px;
	background-image: url(../img/index/twitter.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	font-size: 75%;
	line-height: 1.5em;
}

#twitter div.body a{ text-decoration: none; }
#twitter div.body a:hover{ color: #000000; font-weight: bold; }

#twitter div.body dt{
	width: 5em;
	float: left;
	padding: 0 0 3px 5px;
	font-size: 90%;
	line-height: 1.5em;
}
#twitter div.body dt a:link{ color: #00ADEF; }

#twitter div.body dd{
	margin-bottom: 7px;
	padding: 0 0 3px 5.5em;
	border-bottom: dotted 1px #666666;
}
#twitter div.body dd.last{ border: none; }

#twitter div.body p{
	position: absolute;
	bottom: 1px;
	right: 10px;
	width: 120px;
	height: 51px;
	text-align: right;
}


/*-------------------------------------------------*/
/* キャラクターズ */
/*-------------------------------------------------*/

#characters h2{
	top: -17px;
	left: -13px;
	width: 208px;
	height: 85px;
	background-image: url(../img/index/h2_characters.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#characters div.body p.total{
	position: absolute;
	bottom: 20px;
	left: 10px;
	z-index: 10;
}
#characters div.body p.total span{ display: none; }


/*-------------------------------------------------*/
/* キャラクター展開例 */
/*-------------------------------------------------*/

#develop h2{
	top: -5px;
	left: 28px;
	width: 46px;
	height: 7px;
	background-image: url(../img/index/h2_develop.gif);
	background-repeat: no-repeat;
	background-position: left top;
}


/*-------------------------------------------------*/
/* キャラクタープロフィール */
/*-------------------------------------------------*/

#chara_profile h2{
	top: -37px;
	left: 21px;
	width: 318px;
	height: 37px;
	background-image: url(../img/index/h2_chara_profile.gif);
	background-repeat: no-repeat;
	background-position: left top;
}


/*-------------------------------------------------*/
/* ダウンロードコーナー */
/*-------------------------------------------------*/

#dl h2{
	top: -11px;
	right: -13px;
	width: 165px;
	height: 63px;
	background-image: url(../img/index/h2_dl.gif);
	background-repeat: no-repeat;
	background-position: left top;
}


/*-------------------------------------------------*/
/* 検索フォーム */
/*-------------------------------------------------*/

#search h2{
	top: 15px;
	left: 87px;
	width: 190px;
	height: 34px;
	background-image: url(../img/index/h2_search.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#search div.body{
	padding: 57px 0 15px 0;
	border: solid 3px #444444;
	background-color: #FFFFFF;
}

#search div.body p{
	font-family: "ＭＳ ゴシック", "Osaka－等幅";
	text-align: center;
	font-size: 85%;
}
#search div.body a:link{ color: #0000FF; }
#search div.body a:visited{ color: #800080; }

#search div.body p.form{ margin-bottom: 5px; }
#search div.body p.form input{
	width: 280px;
	padding: 2px;
}

#search div.body p.button{ margin-bottom: 10px; }

#search div.body p.message{ letter-spacing: -1px; }
#search div.body p.message a{ letter-spacing: normal; }

#button_search{ margin-right: 5px; width: 9em; }
#button_luckey{ width: 12em; }


/*-------------------------------------------------*/
/* お問い合わせ */
/*-------------------------------------------------*/

#inquiry h2{
	top: -7px;
	left: -11px;
	width: 76px;
	height: 66px;
	background-image: url(../img/index/h2_inquiry.gif);
	background-repeat: no-repeat;
	background-position: left top;
}


/*-------------------------------------------------*/
/* リンク */
/*-------------------------------------------------*/

#link h2{
	top: 7px;
	right: -13px;
	width: 38px;
	height: 143px;
	background-image: url(../img/index/h2_link.gif);
	background-repeat: no-repeat;
	background-position: left top;
}


/*-------------------------------------------------*/
/* フッター */
/*-------------------------------------------------*/

#footer{
	position: absolute;
	width: 100%;
	height: 140px;
	bottom: 0;
	left: 0;
	padding: 15px 0 40px 0;
	background-image: url(../img/footer_bg.png);
	font-size: 85%;
	overflow: hidden;
}