@charset "Shift_JIS";

body{
color: #666;	
}


/* newCircleSct
------------------------- */
#newCircleSct{
position: relative;
float: left;
width: 315px;
margin-bottom: 20px;
}

#newCircleSct h3{
position: relative;
z-index: 1;
width: 308px;
padding: 0 0 6px 7px;
background: #fff url(https://images.hange.jp/hangame/community/circlehg_top/top/bg_rbox315top.gif) no-repeat 0 bottom;
}

#newCircleSct ul{
position: relative;
margin-top: -1px;
width: 293px;
padding: 0 11px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/top/bg_rbox315btm.gif) no-repeat 0 bottom;
}

#newCircleSct li{
position: relative;
width: 224px;
min-height: 54px;
_height: 54px;
padding: 10px 0 10px 69px;
border-top: 1px solid #ebebeb;
}

#newCircleSct li,
#newCircleSct li a{
color: #666;
}

#newCircleSct li h4{
padding: 2px 0 6px;
}

#newCircleSct li h4 a{
zoom:1;
word-break: break-all;
word-wrap: break-word;
}

#newCircleSct li .emblm{
position: absolute;
left: 2px;
top: 9px;
}

#newCircleSct li .emblm img{
padding: 1px;
border: 1px solid #d7d7d7;
}

#newCircleSct li p{
font-size: 11px;
}

#newCircleSct li p em{
color: #f60;
}

/* more */
#newCircleSct .more{
position: absolute;
right: 4px;
top: 2px;
z-index: 1;
}

#newCircleSct .more a{
display: block;
padding-right: 12px;
background: url(https://images.hange.jp/hangame/common/ico_arrowbox_more.gif) no-repeat right center;
color: #676767;
font-size: 10px;
}


/* informationSct
------------------------- */
#informationSct{
position: relative;
float: right;
width: 315px;
margin-bottom: 20px;
}

#informationSct h3{
margin-bottom: 9px;
padding: 0 0 4px 7px;
border-bottom: 2px solid #e3e3e3;
}

#informationSct ul.infoList{
margin-bottom: 10px;
}

#informationSct ul.infoList li{
padding-left: 16px;
background: url(https://images.hange.jp/hangame/common/ico_arrow_gray.gif) no-repeat 10px 6px;
line-height: 18px;
}
#informationSct ul.infoList li:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#informationSct ul.infoList li a{
float: left;
color: #676767;
}

#informationSct ul.infoList li em{
float: right;
margin-right: 8px;
color: #888;
font-size: 10px;
font-family: Verdana, sans-serif;
}

/* more */
#informationSct .more{
position: absolute;
right: 4px;
top: 2px;
}

#informationSct .more a{
display: block;
padding-right: 12px;
background: url(https://images.hange.jp/hangame/common/ico_arrowbox_more.gif) no-repeat right center;
color: #676767;
font-size: 10px;
}

/* bnr */
#informationSct .bnr{
margin-bottom: 9px;
}

#informationSct ul.crclBnrs{
width: 315px;
}
#informationSct ul.crclBnrs:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#informationSct ul.crclBnrs li{
float: left;
}


/* myCircleInfoSct
------------------------- */
#myCircleInfoSct{
position: relative;
clear: both;
width: 644px;
padding-bottom: 8px;
margin-bottom: 20px;
background-color: #f9f9f9;
}

#myCircleInfoSct h3{
height: 22px;
padding-left: 7px;
border-bottom: 2px solid #e7e7e7;
background-color: #fff;
}

#myCircleInfoSct table{
width: 630px;
margin: 0 auto 0 7px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/top/bg_mycircleinfo.gif) no-repeat 0 bottom;
}

#myCircleInfoSct table thead tr{
*position: relative;
background: url(https://images.hange.jp/hangame/community/circlehg_top/top/bg_mycircleinfo_head.gif) no-repeat 0 0;
}
#myCircleInfoSct table thead tr th{
*background: none;
}

#myCircleInfoSct th{
color: #454545;
line-height: 36px;
}

#myCircleInfoSct td{
padding: 0 0 6px;
line-height: 22px
}

#myCircleInfoSct td.name{
width: 265px;
text-indent: 15px;
}

#myCircleInfoSct td.name a{
color: #666;
}

#myCircleInfoSct td.info{
width: 290px;
text-indent: 25px;
color: #676767;
}

#myCircleInfoSct td.info img{
position: relative;
top: -1px;
margin: 0 0 0 3px;
vertical-align: middle;
}

#myCircleInfoSct td.date{
width: 95px;
color: #888;
font-family: Verdana, sans-serif;
font-size: 10px;
text-align: center;
}

/* none */
#myCircleInfoSct p.none{
width: 630px;
margin: 0 auto;
padding-bottom: 3px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/top/bg_mycrclinfo_none.gif) no-repeat 0 bottom;
color: #676767;
line-height: 53px;
text-align: center;
}

/* more */
#myCircleInfoSct .more{
position: absolute;
right: 4px;
top: 2px;
}

#myCircleInfoSct .more a{
display: block;
padding-right: 12px;
background: url(https://images.hange.jp/hangame/common/ico_arrowbox_more.gif) no-repeat right center;
color: #676767;
font-size: 10px;
}



/* titList
------------------------- */
.titList{
padding-bottom: 5px;
zoom: 1;
}

.titList.sub{
border-bottom: 1px solid #999;
}

.titList:after{content:".";display:block;height:0;clear:both;visibility:hidden} 

.titList h2{
float: left;
}

/* more */
.titList .more{
float: right;
padding-right: 5px;
}

.titList .more a{
display: block;
padding-right: 12px;
background: url(https://images.hange.jp/hangame/common/ico_arrowbox_more.gif) no-repeat right center;
color: #676767;
font-size: 10px;
}

/* popularArea
------------------------- */
.popularArea{
background: url(https://images.hange.jp/hangame/community/circlehg_top/top/bg_popular_btm.gif) no-repeat left bottom;
padding-bottom: 6px;	
margin-bottom: 50px;
}

.popularArea .popularBg{
background: url(https://images.hange.jp/hangame/community/circlehg_top/top/bg_popular_top.gif) no-repeat left top;
padding-top: 4px;	
}

.popularArea ul{
zoom: 1;
background: url(https://images.hange.jp/hangame/community/circlehg_top/top/line_popular.gif) repeat-y left top;
height: 335px;
word-break: break-all;
word-wrap: break-word;
padding:0 5px;
}

.popularArea ul:after{content:".";display:block;height:0;clear:both;visibility:hidden} 

.popularArea ul li{
float: left;
width: 210px;
}

.popularArea ul li .groupNew{
padding: 4px 4px 2px;
margin: 4px 0;
cursor: pointer;
height: 70px;
position: relative;
/position: static;
}

.popularArea ul li .groupNew:after{content:".";display:block;height:0;clear:both;visibility:hidden} 

.popularArea ul li .groupNew:hover{
background: #fffbd8;
}

.popularArea ul li .thumbnail{
float: left;
width: 54px;
margin-right: 5px;
}

.popularArea ul li .thumbnail .ico{
border: 1px solid #d7d7d7;
padding: 1px;
background: #fff;
margin-bottom: 3px;
}

.popularArea ul li .thumbnail .count{
text-align: center;
font-size: 11px;
}

.popularArea ul li .circleTxt{
float: left;
width: 143px;
font-size: 11px;
}

.popularArea ul li h3{
padding-bottom: 2px;
font-size: 12px;	
}

.popularArea ul li h3 a:hover{
text-decoration: none;	
}

.popularArea ul li p.intro{
height: 30px;
}

.popularArea ul li h3 a{
color:#666; 
}

.popularArea ul li .circleTxt dl dt,
.popularArea ul li .circleTxt dl dd{
display: inline;
}

.popularArea ul li .circleTxt dl dd{
color: #f0783d;
}

.popularArea ul li .news{
display:none;	
position: absolute;
bottom: -60px;	
/position: relative;
/top:-15px;
left:0;
background: url(https://images.hange.jp/hangame/community/circlehg_top/top/bg_news.png) no-repeat left top;
width: 206px;
height: 52px;
padding: 18px 2px 5px 0;
z-index: 100;
}

.groupNew.open .news{
display:block;	
}

.popularArea ul li .news p.txt{
color: #000;
padding:0 10px;
height: 36px; 
}

.popularArea ul li .news p.time{
text-align: right;
font-size: 11px;
padding-right: 7px;
}