@charset "Shift_JIS"; 

/**
 *
 *	// Casual SP Top Page Modules // SPタイプ共用TOPページモジュール
 *		# Structure
 *	
 **/



/*===========================================================


    Structure


===========================================================*/
 
#contents.top{
width:646px;
margin-left:7px;
padding: 0 0 30px;
}
#bodyArea #contents.top h2{
clear:both;
width:auto;
height:auto;
margin:0;
padding: 9px 0 7px 6px;
border-bottom:2px solid #e3e3e3;
text-align: left;
zoom:1;
}
#bodyArea.easyGame #contents.top p.more a {
position: absolute;
top: 12px;
right: 7px;
padding-right: 0;
background: none;
}


/* urgentNotice
-------------------------------------------------- */
#urgentNotice{
margin: 12px 8px 0;
padding: 15px;
background-color: #efefe9;
border: 2px solid #7e7e7c;
color: #815422;
}
#urgentNotice h2{
margin-bottom: 6px;
}
#urgentNotice p{
margin-top: 6px;
}


/* prArea
-------------------------------------------------- */
#prArea {
position: relative;
width: 633px;
height: 187px;
margin: 12px auto 0px;
padding: 10px 6px 0 5px;
background-position: 0 0;
background-repeat:no-repeat;
}
#prArea #pr_left {
float: left;
width: 415px;
padding-left: 5px;
}
#prArea ul.pr_right {
float: left;
width: 204px;
padding-left:7px;
}
#prArea .pr_right li {
position: relative;
display: block;
width: 204px;
height: 84px;
margin-bottom: 7px;
vertical-align: top;
}


/* noticeArea
-------------------------------------------------- */
.top #noticeArea {
position: relative;
width: 644px;
margin: 15px auto 0;
padding: 0;
}
.top #noticeArea #topics {
position: relative;
float: left;
width: 380px;
margin-left:6px;
}
.top #noticeArea ul {
margin-top: 8px;
padding-left: 5px;
}
.top #noticeArea ul li {
position: relative;
height: 21px;
line-height: 21px;
}
.top #noticeArea ul li img {
margin-right: 7px;
padding-top: 3px;
vertical-align: top;
}
.top #noticeArea ul li a {
display: inline-block;
width: 240px;
color: #666;
overflow: hidden;  
white-space: nowrap;  
text-overflow: ellipsis;  
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.top #noticeArea ul li span.date {
position: absolute;
top: 0;
right: 4px;
color: #a9a9a9;
font-size: 11px;
}
.top #noticeArea:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* forBeginner */
.top #noticeArea #forBeginner {
position:relative;
float: right;
width: 227px;
margin-right: 5px;
}
.top #noticeArea #forBeginner h2{
border-bottom: none;
}


/* avatarItem
-------------------------------------------------- */
#avatarItem {
zoom:1;
position: relative;
margin: 15px 0 0;
}
#bodyArea.easyGame #contents.top #avatarItem h2{
border: none;
margin-left: 8px;
}
#avatarItem .avatarArea {
width: 607px;
height: 257px;
margin:0 auto;
padding: 5px;
background: url(https://images.hange.jp/hangame/easy/easy_common/bg_avataritem.jpg) left top no-repeat;
}
#avatarItem .avatarArea h3{
margin-bottom: 10px;
}

/* newAvatar */
#avatarItem .newAvatar{
position: relative;
float: left;
width: 215px;
}
#avatarItem .newAvatar p.title{
margin: 3px 0 0;
font-weight: bold;
text-align:center;
}
#avatarItem .newAvatar div.image{
width:214px;
text-align:center;
}
#avatarItem .newAvatar p.price{
margin: 10px 0 0 48px;
padding-left: 13px;
background: url(https://images.hange.jp/hangame/shop/common/ico_yen.gif) left 3px no-repeat;
}
#avatarItem .newAvatar p.price img{
margin-left: 15px;
vertical-align: middle;
}

/* avatarList */
#avatarItem .avatarList{
float: left;
margin-right: -10px;
}
#avatarItem .avatarList:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
#avatarItem .avatarList li{
position: relative;
float: left;
width: 120px;
height: 153px;
background: url(https://images.hange.jp/hangame/easy/easy_common/bg_avatar.gif) left top no-repeat;
margin-right: 10px;
text-align: center;
}
#avatarItem .avatarList li .item{
position: absolute;
bottom: 5px;
_bottom: 25px;
width: 120px;
}
#avatarItem .avatarList li p{
padding-top: 157px;
width: 120px;
color: #7f7e7e;
font-size: 11px;
text-align: center;
}


/* Community Area
-------------------------------------------------- */
.easyCommunity {
position: relative;
width: 644px;
margin: 15px auto 0;
padding: 0;
}
.easyCommunity ul {
position: relative;
width: 299px;
padding: 10px 0 2px 10px;
z-index: 10;
}
.easyCommunity ul li {
position: relative;
height: 19px;
padding-left: 8px;
background: url(https://images.hange.jp/hangame/common/ico_2x2_gray.gif) 0 7px no-repeat;
color: #676767;
line-height: 19px;
}
.easyCommunity ul li span.date {
position: absolute;
top: 0;
right: 7px;
height: 19px;
color: #a9a9a9;
font-size: 11px;
}
.easyCommunity:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* easyBlog */
.easyBlog {
position: relative;
float: left;
width: 309px;
margin: 0 0 0 6px;
padding: 0;
}

/* gameCircle */
.gameCircle {
float: right;
width: 309px;
margin-right: 5px;
}
.gameCircle .circleHG li.listTop {
position: relative;
width: 248px;
height: 56px;
margin-right: -10px;
padding: 0 0 0 60px;
background: none;
}
.gameCircle ul.circleHG li h4 {
font-weight: normal;
}
.gameCircle ul.circleHG li.listTop h4 {
margin-bottom: 5px;
font-weight: bold;
}
.gameCircle ul.circleHG li .emblm {
position: absolute;
left: 0;
top: -3px;
}
.gameCircle ul.circleHG li .emblm img {
padding: 1px;
border: 1px solid #d7d7d7;
}
.gameCircle ul.circleHG li p {
font-size: 11px;
line-height: 1.3;
}
#bodyArea.easyGame #contents.top .gameCircle p.more a {
right: 12px;
}


/* screenshotArea
-------------------------------------------------- */
#screenshotArea {
clear: both;
position: relative;
width: 644px;
margin: 15px auto 0;
padding: 0;
}
#screenshotArea .ss {
width: 644px;
height: 97px;
padding: 15px 0 0;
background:#f6f6f6;
overflow: hidden;
}
#screenshotArea .ss ul {
margin-left: 3px;
}
#screenshotArea .ss li {
float: left;
padding-left: 22px;
}
#screenshotArea .ss li img{
border:#fff 3px solid;
}

/* ssLayer */
div#ssLayer{
position:absolute;
width:527px;
height:407px;
padding:46px 0 0 0;
border:0;
text-align:center;
background:url(https://images.hange.jp/hangame/easy/easy_common/bg_screenshot.gif) left top no-repeat;
}
div#ssLayer .ssImgDiv img{
border:1px solid #e9e9e9;
}
div#ssLayer .ssNav{
display:none;
}
div#ssLayer .ssClose{
position:absolute;
display:block;
width:19px;
height:19px;
top:11px;
right:10px;
background:url(https://images.hange.jp/hangame/easy/easy_common/btn_close.gif) left top no-repeat;
text-indent:-9999px;
}
div#ssLayer .linerNav{
margin-top:13px;
}