@charset 'Shift_JIS';


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

 contents

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



/* containe,bodyArea
------------------------- */
#container,
#bodyArea{
width:960px;
}

#bodyArea{
margin-bottom:0;
}

/* hgFooter
------------------------- */
#hgFooter {
width: 960px !important;
}

/* contentsArea
------------------------- */
#contentsArea{
width:738px;
position:relative;
}

/* contents
------------------------- */
.contents{
width:738px;
background: url(//images.hange.jp/hangame/avatar/illustrate/bg_side.gif) repeat-y left top;
}

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


/* mainArea
------------------------- */
#mainArea{
width:503px;
float:right;
padding-bottom:10px;
}

/* titTop
------------------------- */
.titTop{
padding-bottom:3px;
margin-bottom:5px;
border-bottom:2px solid #333;
zoom:1;
}

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

.titTop h2{
float:left;
}

.titTop p,
.topRankSec .itemRank .tit p{
float:right;
text-align:right;
color:#8a8a8a;
font-size:11px;
padding-top:5px;
}

.titTop p a.more,
.topRankSec .itemRank .tit p a.more{
background: url(//images.hange.jp/hangame/avatar/illustrate/btn_arrow.gif) no-repeat right top;
padding-right:14px;
color:#8a8a8a;
}

/* specialTxt
------------------------- */
.specialTxt p{
padding:0 0 10px 5px;
}

/* specialTop
------------------------- */
.specialSec iframe{
width:503px;
}

.specialSec.top iframe{
height:400px;
}


/* topRankSec
------------------------- */
.topRankSec{
padding-bottom:50px;
margin-left:-10px;
zoom:1;
}

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

.topRankSec .itemRank{
float:left;
width:245px;
padding-left:10px;
}

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

.topRankSec .itemRank .tit{
background: url(//images.hange.jp/hangame/avatar/illustrate/bg_tit_rank.gif) repeat-x top left;
height:26px;
line-height:26px;
margin-bottom:10px;
}

.topRankSec .itemRank .tit h3{
float:left;
padding:7px 0 0 10px;
}

.topRankSec .itemRank .tit p{
padding-top:3px;
padding-right:5px;
}

.topRankSec ul li{
background: url(//images.hange.jp/hangame/avatar/illustrate/line_top_dot.gif) repeat-x bottom left;
padding-bottom:10px;
margin-bottom:20px;
zoom:1;
}

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

.topRankSec ul li .avaItem{
margin-right:7px;
}

.topRankSec ul li .name{
float:left;
padding-top:70px;
width:100px;
}

.topRankSec ul li p.rank{
padding-bottom:5px;
}

.topRankSec ul li p.txt{
height:38px;
}

.topRankSec ul li p.rank em{
padding-left:10px;
}

/*category
------------------------- */
#category ul{
background:#eaeaea;
padding:3px 0 2px 5px;
margin-bottom:10px;
zoom:1;
}

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

#category li{
float:left;
padding:2px 8px 2px 15px;
font-size:11px;
background: url(//images.hange.jp/hangame/avatar/illustrate/line_tab.gif) no-repeat 2px 6px;
}

#category li:first-child{
background:none;
}

#category li.active span{
display:block;
font-weight:bold;
background:#fff;
color:#676767;
padding:2px 5px;
}

#category li a{
display:block;
color:#999;
padding:2px 5px;
}

/* prize
------------------------- */
#prize ul{
border-bottom:1px solid #d6d6ca;
padding-left:10px;
margin-bottom:10px;
zoom:1;
}

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


#prize ul li{
float:left;
margin-right:2px;
margin-bottom:-1px;
min-width:61px;
height:21px;
padding: 2px 2px 0;
background: #fdfdfd;
border: 1px solid #d6d6d6;
border-radius: 3px 3px 0 0;
text-align:center;
}

#prize ul li.active{
min-width:58px;
height:18px;
padding: 5px 5px 0;
}

#prize ul li a{
display:block;
width: 100%;
height: 100%;
padding: 3px 3px 0;
background: #f8f8f8;
background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,248,248,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(248,248,248,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
box-sizing: border-box;
text-decoration:none;
}

#prize ul li.active,
#prize ul li:hover,
#prize ul li:hover a{
background: #fff;
border-bottom: 1px solid #fff;
filter: none;
}



/*gachaTit
------------------------- */
.gachaTit{
background: url(//images.hange.jp/hangame/avatar/illustrate/bg_gacha.gif) no-repeat left top;
padding:15px 0;
position:relative;
text-align:center;
font-size:14px;
margin-bottom:10px;
color:#333;
}

.gachaTit h2{
font-size:16px;
padding-bottom:3px;
}

.gachaTit .btnpRrev{
position:absolute;
top:24px;
left:30px;
}

.gachaTit .btnNext{
position:absolute;
top:24px;
right:30px;
}

/* dendoItem
------------------------- */
#dendoItem{
padding-bottom:20px;
}

#dendoItem ul li{
background: url(//images.hange.jp/hangame/avatar/illustrate/bg_best_item.gif) no-repeat left top;
height:177px;
padding:25px 0 0 32px;
margin-bottom:2px;
}

#dendoItem .avaItem .dispImg img{
cursor:default;
}

/* introduce
------------------------- */
#introduce {
position: relative;
height: 200px;
background: url(//images.hange.jp/hangame/avatar/illustrate/bg_result.jpg) no-repeat left bottom;
}

#introduce p {
padding: 35px 0 0 165px;
}

#introduce p span.nothing{
display: block;
padding-bottom:10px;
color:#fe8723;
font-size:14px;
font-weight:bold;
}

#introduce p strong {
display: block;
padding-bottom:5px;
color: #676767;
}

#introduce p a {
display: block;
width: 166px;
margin-top: 25px;
}

/* mvpArea
------------------------- */
#mvpArea .mvpItem{
text-align:center;
background: url(//images.hange.jp/hangame/avatar/illustrate/bg_mvp.gif) no-repeat left top;
width:402px;
min-height:240px;
margin:0 auto 15px;
padding-top:15px;
color:#333;
font-weight:bold;
}
#mvpArea .mvpItem_inner{
background: url(//images.hange.jp/hangame/avatar/illustrate/bg_mvp_bottom.png) no-repeat left bottom;
padding-bottom: 20px;
}

#mvpArea h3{
font-size:14px;
font-weight:bold;
padding-bottom:3px;
color:#333;
}

#mvpArea h3 img{
padding-right:5px;
}

#mvpArea .mvpItem p{
background: url(//images.hange.jp/hangame/avatar/illustrate/line_mvp.gif) no-repeat left top;
font-size:14px;
width:242px;
padding-top:5px;
margin:0 auto 10px;
}

#mvpArea .mvpItem .avaItem{
margin:0 auto;
float:none;
}

#mvpArea .avaItem .dispImg img{
cursor:default;
}

#mvpArea .mvpSec{
padding-bottom:25px;
}

#mvpArea .mvpSec h3{
border-bottom:2px solid #c0bfbf;
padding:0 0 3px 10px;
margin-bottom:15px;
}

#mvpArea .mvpSec p.txt{
padding:0 10px 10px;
line-height:1.6;
}

#mvpArea .mvpSec .story{
padding-bottom:15px;
zoom:1;
}

#mvpArea .mvpSec .story:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#mvpArea .mvpSec .story .storyTxt{
float:left;
width:250px;
line-height:1.6;
padding-right:10px;
}

#mvpArea .mvpSec .story .storyTxt p{
padding-bottom:10px;
}


#mvpArea .mvpSec .story .img{
float:left;
width:206px;
}

#mvpArea .mvpSec .story .img p.caption{
font-size:11px;
padding: 5px 5px 0;
}

/* specialArea
------------------------- */
#specialArea .bnr{
padding:5px;
border:1px solid #333;
margin-bottom:20px;
zoom:1;
}

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

#specialArea ul.topSitem{
background: url(//images.hange.jp/hangame/avatar/illustrate/bg_special_item.gif) no-repeat left 131px;
width:503px;
margin-bottom:30px;
zoom:1;
}

#specialArea ul.topSitem li{
float:left;
width: 134px;
padding-left:22px;
}

#specialArea ul.topSitem li .avaItem{
width: 134px;
height: 156px;
margin-bottom:10px;
}

#specialArea .avaItem .dispImg img{
cursor:default;
}

#specialArea ul.topSitem .avaItem .dispImg img{
cursor:pointer;
}

#specialArea ul.topSitem li p{
padding:0 15px;
text-align:center;
}

#specialArea h3{
padding:10px 0 5px;
border-top: 1px solid #E8E8E8;
}

#specialArea p.txt{
padding:0 10px;
margin-bottom:20px;
line-height:1.6;
}

#specialArea .itemList{
width:505px;
}

#specialArea .itemList ul{
margin-left:0;
}