@charset "Shift_JIS";



/* --------------------------------------------------

 conditionSelector

-------------------------------------------------- */

#conditionSelector{
position: relative;
z-index: 11;
width: 644px;
margin-bottom: 15px;
}

#conditionSelector p.introTxt{
margin: 0 0 6px;
padding: 0 0 0 10px;
background: url(https://images.hange.jp/hangame/common/ico_2x2_gray.gif) no-repeat 4px center;
color: #999;
}


/* conditionList
-------------------------------------------------- */
ul#conditionList{
width: 614px;
height: 37px;
padding: 15px 15px 0;
background: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bt_selectcondition.gif) no-repeat;
}
ul#conditionList:after{content:".";display:block;height:0;clear:both;visibility:hidden}


ul#conditionList li.active{
position: relative;
z-index: 100;
}


/* categorySelection
------------------------- */
ul#conditionList li#categorySelection{
display: inline;
float: left;
margin-right: 9px;
}

ul#conditionList li#categorySelection #slctCtgryLayer{
left: -15px;
top: 30px;
}


/* memberSelection
------------------------- */
#memberSelection{
position: relative;
float: left;
}

#slctMmbrItem{
position: relative;
z-index: 11;
width: 122px;
height: 22px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_cnditem_left.gif) no-repeat;
color: #5a5a5a;
cursor: pointer;
line-height: 22px;
text-indent: 9px;
}
.active #slctMmbrItem{background-image: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_cnditem_left_on.gif)}


/* timeSelection
------------------------- */
#timeSelection{
position: relative;
float: left;
}

#slctTimeItem{
position: relative;
z-index: 11;
width: 122px;
height: 22px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_cnditem_center.gif) no-repeat;
color: #5a5a5a;
cursor: pointer;
line-height: 22px;
text-indent: 9px;
}
.active #slctTimeItem{background-image: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_cnditem_center_on.gif)}


/* ageSelection
------------------------- */
#ageSelection{
position: relative;
float: left;
}

#slctAgeItem{
position: relative;
z-index: 11;
width: 122px;
height: 22px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_cnditem_right.gif) no-repeat;
color: #5a5a5a;
cursor: pointer;
line-height: 22px;
text-indent: 9px;
}
.active #slctAgeItem{background-image: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_cnditem_right_on.gif)}


/* scRenewBtn */
#scRenewBtn{
float: right;
}


/* layer
------------------------- */
ul#conditionList .layer{
display: none;
position: absolute;
z-index: 10;
background-color: #e5e5e5;
}

ul#conditionList .active .layer{
display: block;
}

ul#conditionList #memberSelection .layer{
left: 1px;
top: 22px;
width: 287px;
}

ul#conditionList #timeSelection .layer{
left: -12px;
top: 22px;
width: 257px;
}

ul#conditionList #ageSelection .layer{
left: auto;
right: -1px;
width: 233px;
}

ul#conditionList .layer ul{
zoom: 1;
position: relative;
left: -1px;
top: -1px;
padding: 4px 3px 5px;
border: 1px solid #cecece;
border-top: 1px solid #e7e7e7;
background: #fff url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_cndlayer_gradation.gif) repeat-x 0 0;
}
ul#conditionList .layer ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}

ul#conditionList .layer ul li{
float: left;
padding: 0 0 0 6px;
cursor: pointer;
line-height: 18px;
}
ul#conditionList #memberSelection .layer ul li{width: 87px;}
ul#conditionList #timeSelection .layer ul li{width: 77px;}
ul#conditionList #ageSelection .layer ul li{width: 69px;}

ul#conditionList .layer ul li.on{
background-color: #ededed;
}

ul#conditionList .layer ul li.dont{
color: #999;
}



/* -------------------------------------------------- 

 categorySelection

-------------------------------------------------- */

#categorySelection,
#categorySelectionSearch{
position: relative;
z-index: 1000;
}


/* slctCtgryItem
-------------------------------------------------- */
#slctCtgryItem,
#slctCtgryItemSearch{
height: 22px;
color: #0091AE;
cursor: pointer;
line-height: 22px;
text-indent: 9px;
}
#slctCtgryItem{
width: 196px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_cnditem_category.gif) no-repeat 0 0;
}
#slctCtgryItemSearch{
width: 175px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/common/head/bg_cnditem_ctgrysrch.gif) no-repeat 0 0;
}

.active #slctCtgryItem{
background-image: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_cnditem_category_on.gif);
}
.active #slctCtgryItemSearch{
background-image: url(https://images.hange.jp/hangame/community/circlehg_top/common/head/bg_cnditem_ctgrysrch_on.gif);
}

/* slctCtgryLayer
-------------------------------------------------- */
#slctCtgryLayer,
#slctCtgryLayerSearch{
display: none;
position: absolute;
z-index: 100;
width: 644px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_boxtop.gif) no-repeat 0 0;
}
#slctCtgryLayer:after,
#slctCtgryLayerSearch:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.active #slctCtgryLayer,
.active #slctCtgryLayerSearch{
display: block;
}

#slctCtgryLayer .tab,
#slctCtgryLayerSearch .tab{
float: left;
min-height: 50px;
_height: 50px;
}
#slctCtgryLayer .tab:after,
#slctCtgryLayerSearch .tab:after{content:".";display:block;height:0;clear:both;visibility:hidden}


/* h4
------------------------- */
#slctCtgryLayer .tab h4,
#slctCtgryLayerSearch .tab h4{
cursor: pointer;
}

#slctCtgryLayer .tab.active h4,
#slctCtgryLayerSearch .tab.active h4{
cursor: default;
}

#slctCtgryLayer .tab#slctCtgryEasy h4,
#slctCtgryLayerSearch .tab#slctCtgryEasySearch h4{
padding-left: 15px;
}

/* contents
------------------------- */
#slctCtgryLayer .tab .contents,
#slctCtgryLayerSearch .tab .contents{
position: absolute;
left: 0;
top: 50px;
display: none;
width: 637px;
margin-right: -637px;
padding: 0 0 10px 7px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/common/condition/bg_boxbtm.gif) no-repeat 0 bottom;
}

#slctCtgryLayer .tab .contents:after,
#slctCtgryLayerSearch .tab .contents:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#slctCtgryLayer .tab.active .contents,
#slctCtgryLayerSearch .tab.active .contents{
display: block;
}

/* section
------------------------- */
#slctCtgryLayer .tab .section,
#slctCtgryLayerSearch .tab .section{
float: left;
overflow: hidden;
width: 189px;
padding-left: 19px;
}

/* h5
------------------------- */
#slctCtgryLayer .tab h5,
#slctCtgryLayerSearch .tab h5{
margin: 0 0 3px;
padding-left: 7px;
background: url(https://images.hange.jp/hangame/community/circlehg_top/common/arrow_gray2x4right.gif) no-repeat 0 center;
}

#slctCtgryLayer .tab h5.wide,
#slctCtgryLayerSearch .tab h5.wide{
clear: both;
width: 500px;
margin: 0 0 0 19px;
background-color: #fff;
}

/* list
------------------------- */
#slctCtgryLayer .tab ul,
#slctCtgryLayerSearch .tab ul{
margin: 0 0 10px;
}

#slctCtgryLayer .tab li,
#slctCtgryLayerSearch .tab li{
margin: 0 5px 0 0;
padding-left: 7px;
color: #666;
cursor: pointer;
line-height: 19px;
}

#slctCtgryLayer .tab li.on,
#slctCtgryLayer .tab li.on em,
#slctCtgryLayerSearch .tab li.on,
#slctCtgryLayerSearch .tab li.on em{
background-color: #f3f3f3;
color: #008ca8;
}

#slctCtgryLayer .tab li em,
#slctCtgryLayerSearch .tab li em{
margin-left: 3px;
color: #888;
font-size: 11px;
}


/* categoryLayer
--------------------------------------------------------*/
#contentsArea .categoryLayer{
height:422px;
background: url(https://images.hange.jp/hangame/common/parts/select_category/bg_slctlayer.gif) no-repeat 0 0;
}

#contentsArea .categoryLayer .tab{
float:left;
min-height:34px;
_height:34px;
}

#contentsArea .categoryLayer .tab .contents{
background:none;
z-index:-1;
}

#contentsArea .categoryLayer .tab.active .contents{
position:absolute;
top:34px;
display:block;
height:370px;
width:630px;
overflow-y:scroll;
_overflow:auto;
padding:10px 0 0 7px;
background:url(https://images.hange.jp/hangame/common/parts/select_category/slctctgry_line.gif) repeat-y 7px 0;
}

#contentsArea .categoryLayer .tab .section{
float:left;
overflow:hidden;
width:174px;
margin-right:10px;
padding:0 10px;
}

#contentsArea #categorySelection.select2{
z-index:99;
}

/* slctCtgryCloseBtn
--------------------------------------------------------*/
#contentsArea .categoryLayer #slctCtgryCloseBtnSearch,
#contentsArea .categoryLayer #slctCtgryCloseBtn{
float:right;
padding:9px;
cursor:pointer;
}

/* --------------------------------------------------

 centeringBtns

-------------------------------------------------- */
ul.centeringBtns{
margin: 10px 0;
text-align: center;
}

ul.centeringBtns li{
display: inline;
}


/* --------------------------------------------------

 sortCircleList

-------------------------------------------------- */
#sortCircleList{
position: absolute;
right: 0;
top: -3px;
z-index: 10;
width: 148px;
height: 17px;
}

#sortCircleList #sclSlctItm{
zoom: 1;
border: 1px solid #dbdbdb;
background: url(https://images.hange.jp/hangame/shop/itemshop/select/btn_itemsort.gif) no-repeat right center;
color: #333;
text-indent: 4px;
line-height: 16px;
cursor: pointer;
}

#sortCircleList #sclSlctItm{
border: 1px solid #dbdbdb;
}

#sortCircleList ul{
display: none;
position: absolute;
left: 0;
top: 18px;
z-index: 100;
width: 146px;
padding: 0;
background-color: #fff;
border: 1px solid #dbdbdb;
border-top: none;
}

#sortCircleList.active ul{
display: block;
}

#sortCircleList ul li{
color: #555;
cursor: pointer;
line-height: 18px;
text-indent: 4px;
}

#sortCircleList ul li.on{
color: #333;
background-color: #ededed;
}


/* --------------------------------------------------

 circleList

-------------------------------------------------- */
ul.circleList{
margin-bottom: 10px;
border-bottom: 2px solid #e3e3e3
}

ul.circleList li.item{
padding: 2px 0; 
border-top: 1px solid #e3e3e3;	
}

ul.circleList li.item .group{
padding-top: 8px; 	
zoom: 1;
cursor: pointer;
}

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

ul.circleList li.item .group:hover{
background: #fffbd8;	
}

ul.circleList li.item .thumbnail{
width:80px;
float: left;
padding:0 10px 0 5px;		
}

ul.circleList li.item .thumbnail p.count{
text-align: center;
padding: 2px 0;		
}

ul.circleList li.item .circleTxt{
float: right;
width: 544px;
padding-right: 5px;		
}

ul.circleList li.item .circleTxt h3{
font-weight: bold;
padding-bottom: 5px;	
}

ul.circleList li.item .circleTxt h3 strong,
ul.circleList li.item .circleTxt p.intro strong{
background-color: #FBE0D1;
}

ul.circleList li.item .circleTxt p.intro strong{
font-weight: normal;
}


ul.circleList li.item .circleTxt h3 a{
color: #666;
}

ul.circleList li.item .circleTxt h3 a:hover{
text-decoration: none;
}

ul.circleList li.item .circleTxt h3 img{
margin: 0 7px 0 0;
vertical-align: middle;
}

ul.circleList li.item .circleTxt h3 span.time{
color:#ff6600; 
padding-left: 10px;
font-weight: normal;
}

ul.circleList li.item .circleTxt h3 span.time{
color:#ff6600; 
padding-left: 10px;
font-weight: normal;
}

ul.circleList li.item .circleTxt p.intro{
height: 50px;
color: #888;
overflow: hidden;
}

ul.circleList li.item .data{
float: right;
}

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

ul.circleList li.item .data ul{
float: left;	
}
ul.circleList li.item .data ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}

ul.circleList li.item .data ul li{
float: left;
border-left: 1px solid #555;
padding-left: 10px;	
margin-right: 10px;
line-height: 1;
/line-height: 1.1;
}

ul.circleList li.item .data ul li.condition{
font-size: 11px;
border: none;
padding-top: 2px;
margin-right: 8px;
padding-left: 5px;	
}

ul.circleList li.item .data ul li.condition img{
padding-right: 3px;
position: relative;
top:-3px;	
}

ul.circleList li.item .data ul li strong{
color: #f0783d;
font-weight: normal;
}

ul.circleList li.item .data ul li strong.time{
color: #888;
}

/* --------------------------------------------------

 pageNavi

-------------------------------------------------- */
ul.pageNavi{
clear: both;
margin: 18px auto 20px;
text-align: center;
}

ul.pageNavi li{
display: inline;
margin-right: -4px;
border-left: 1px solid #d2d2d2;
font-weight: bold;
line-height: 14px;
}

ul.pageNavi li.first{
border-left: none;
}

ul.pageNavi li.first,
ul.pageNavi li.last{
zoom: 1;
width: 69px;
*margin-right: 0;
}

ul.pageNavi li.prev{
zoom: 1;
width: 53px;
*margin-right: 1px;
border:none;
}

ul.pageNavi li.next{
zoom: 1;
width: 52px;
*margin-right: 1px;
}

ul.pageNavi li a:link,
ul.pageNavi li a:visited{
padding: 0 10px;
zoom: 1;
color: #676767;
}

ul.pageNavi li a:hover{
padding: 0 9px;
border-left: 1px solid #fff;
border-right: 1px solid #f3f3f3;
background-color: #f3f3f3;
text-decoration: none;
}

ul.pageNavi li.now a:link,
ul.pageNavi li.now a:visited{
color: #f90;
font-weight: bold;
}

ul.pageNavi li img{
padding: 2px 0;
vertical-align: top;
}

ul.pageNavi li.first img,
ul.pageNavi li.last img{
width: 49px;
margin: 0 9px;
}

ul.pageNavi li.prev img{
width: 33px;
margin: 0 9px;
}

ul.pageNavi li.next img{
width: 32px;
margin: 0 9px;
}

ul.pageNavi li.first a img,
ul.pageNavi li.prev a img,
ul.pageNavi li.next a img,
ul.pageNavi li.last a img{
margin: 0;
}

/*----------------------------------------------------

decoration (�G����)

----------------------------------------------------*/
#decorationWrapper{
width:298px;
z-index:999999;
}

#decorationArea{
zoom:1;
width:288px;
padding:5px;
background: url(https://images.hange.jp/hangame/community/bbs/editor/bg_decoration.gif) no-repeat 0 0;
position:relative;
min-height:239px;
_height:239px;
position:relative;
}

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

#decorationArea ul{
margin-bottom:8px;
}

#decorationArea ul li{
display:inline;
border-left:1px solid #DFE1DE;
padding-left:4px;
margin-left:3px;
}

#decorationArea ul li.decorationNav{
border-left: medium none;
}

#decorationArea li a{
color: #666666;
}

#decorationArea li a:hover{
text-decoration:underline;
}


#decorationArea li .on{
color: #004790;
font-weight:bold;
}

#decorationArea table{
zoom:1;
margin:0 0 5px 3px;
border-collapse:collapse;
}

#decorationArea table td{
padding:5px 6px 7px;
}

#decorationArea table td img.pointer{
cursor:pointer;
}

#decorationArea p{
position:absolute;
bottom:3px;
left:5px;
font-size: 11px;
}

#decorationArea p span{
color:#FF7111;
}

#decorationArea .clause{
position:absolute;
top:6px;
right:8px;
cursor:pointer;
}

/* -------------------------------------------------- 

 hide

-------------------------------------------------- */

.hide{
display:none;
}