@charset "Shift_JIS";



/* userArea
---------------------------------------------------------------------- */
#userAreaBox {
width: 210px;
padding-bottom: 10px;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_userpanel_bg.jpg) no-repeat 5px 5px;
}

#userArea{
position: relative;
width: 210px;
padding-bottom: 18px;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_userpanel_btm.jpg) no-repeat center bottom;
font-family: 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
font-size: 12px;
line-height: 1.3;
}

#userArea ul,
#userArea li{
margin: 0;
padding: 0;
list-style: none;
}

#userArea dl,
#userArea dt,
#userArea dd{
margin: 0;
padding: 0;
}

#userArea form{
margin: 0;
}

#userArea img{
border: none;
}

#userArea a img{
vertical-align: bottom;
}



/* loginPanel
---------------------------------------------------------------------- */
#loginPanel{
position: relative;
width: 200px;
margin: 4px auto 0;
padding-bottom: 5px;
color: #676767;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_userpanel_top.jpg) no-repeat 0 0;
}

#loginPanel.logoutPanel{
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_userpanel.gif) no-repeat 0 0;
}


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

#loginPanel a{
color: #676767;
text-decoration: none;
}

#loginPanel a:hover{
text-decoration: underline;
}

/* User Name
-------------------- */
#loginPanel h2{
position: relative;
width: 190px;
height: 18px;
margin: 0 0 7px;
padding: 12px 0 0 10px;
color: #666;
font-size: 10px;
font-weight: normal;
}
#loginPanel h2 a{
color: #77c9d1;
font-size: 12px;
font-weight: bold;
}
#loginPanel.unLogin h2{
font-size: 12px;
}
#loginPanel.login #memberClass{
position: relative;
right: 6px;
top: -26px;
height: 16px;
margin: 0 0 -16px;
text-align: right;
}

/* hanG */
.hanG #loginPanel.login #memberClass{
position: absolute;
top: 11px;
left: 6px;
right: auto;
margin: 0;
}
.hanG #loginPanel h2{
position: relative;
width: 175px;
height: 18px;
margin: 0 0 7px;
padding: 11px 0 0 10px;
color: #666;
font-size: 10px;
font-weight: normal;
}
.hanG #loginPanel h2 a{
padding-right: 2px;
}
.hanG #loginPanel p {
position: absolute;
top: 10px;
right: 4px;
}

/* avatarWindow
-------------------- */
#loginPanel #avatarWindow{
display: inline;
float: left;
width: 69px;
margin: 4px 0 2px;
padding-left: 11px;
}
/* test
#loginPanel #avatarWindow.largeAva {
position: relative;
width: 66px;
height: 150px;
padding: 0;
margin-left: 11px;
overflow: hidden;
}
#loginPanel #avatarWindow.largeAva .VIEWER_pure {
position: absolute;
top: -295px;
left: -10px;
}*/


/* avaPanel
-------------------- */
#loginPanel #avaPanel{
width: 69px;
margin: 4px auto 2px;
padding:4px;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_ava_panel.gif) no-repeat left top;
}

/* supportIcon
-------------------- */
#userArea ul#supportIcon {
position: relative;
_height: 0;
}
	#userArea ul#supportIcon li {
	position: absolute;
	left: 15px;
	top: -20px;
	}

/* logout
-------------------- */
#userArea .logout{
text-align:center;
padding-bottom:6px;
}

#userArea .logout li{
padding-top:10px;
}

#userArea .logout li.loginBtn img{
cursor:pointer;
}

/* login before
---------------------------------------- */
#loginPanel.unLogin dl.idPass{
position: relative;/* for DW */
float: right;
width: 114px;
height: 72px;
margin: -2px 0 2px;
padding: 0;
}
#loginPanel.unLogin dl.idPass dt{
width: 100px;
padding: 2px 0 0;
color: #b15422;
font-weight: bold;
}
	#loginPanel.unLogin dl.idPass dd input{
	width: 100px;
	height: 14px;
	margin: -2px 0 0;
	padding: 0;
	line-height: 14px;
	}

/* loginNavi */
#loginPanel.unLogin ul.loginNavi{
float: right;
width: 116px;
height: 87px;
}
	#loginPanel.unLogin ul.loginNavi li{
	margin-bottom: -4px;
	font-size: 11px;
	line-height: 7px;
	padding-left: 20px;
	text-indent: -20px;
	}
	#loginPanel.unLogin ul.loginNavi li.autoLogin{
	margin-bottom: -4px;
	margin-right:-200px;
	white-space:nowrap;
	}
	#loginPanel.unLogin ul.loginNavi li.loginBtn{
	margin-top: 0;
	margin-bottom: 2px;
	}
		#loginPanel.unLogin ul.loginNavi li.loginBtn img{
		cursor: pointer;
		}
	#loginPanel.unLogin ul.loginNavi li input{
	position: relative;
	top: -2px;
	vertical-align: middle;
	}
	#loginPanel.unLogin ul.loginNavi li.memberEntry{
	margin: 8px 0 1px 4px;
	padding-left: 36px;
	background: url(//images.hange.jp/hangame/shop/itemshop/userarea/ico_star.gif) 0 0 no-repeat;
	line-height: 14px;
	}
#loginPanel.unLogin ul.loginNavi:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }



/* login after
---------------------------------------- */

/* User info
-------------------- */
#loginPanel.login dl#userInfo{
float: right;
width: 114px;
margin: 21px 0 0 0;
padding-right: 2px;
line-height: 1.2;
}

/* news */
#loginPanel.login dl#userInfo .news{
float: left;
margin-bottom: 4px;
padding: 4px 0 3px;
border-bottom: 1px dotted #bebebe;
white-space:nowrap;
}

#loginPanel.login dl#userInfo dt.news{
width:29px;
}

#loginPanel.login dl#userInfo dd.news{
width:84px;
}
#loginPanel.login dl#userInfo dd.news:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#loginPanel.login dl#userInfo dd.news span{
float:left;
width:36px;
}
#loginPanel.login dl#userInfo dd.news span a{
zoom:1;
padding-left:15px;
color: #f0783d;
font-weight: bold;
}
#loginPanel.login dl#userInfo dd.news span.mnml a{
background: url(//images.hange.jp/hangame/common/userarea/ico_mail.gif) no-repeat 0 1px;
*background-position:0 2px;
}
#loginPanel.login dl#userInfo dd.news span.cmnt a{
margin-left:5px;
background: url(//images.hange.jp/hangame/common/userarea/ico_cmnt.gif) no-repeat 0 1px;
*background-position:0 2px;
}

/* miniMail */
#loginPanel.login dl#userInfo .miniMail{
float: left;
margin-bottom: 4px;
padding: 4px 0 3px;
border-bottom: 1px dotted #bebebe;
}

.mac #loginPanel.login dl#userInfo .miniMail{
letter-spacing: -1px;
}

#loginPanel.login dl#userInfo dt.miniMail{
width: 80px;
}
#loginPanel.login dl#userInfo dd.miniMail{
width: 34px;
text-align: right;
}
	/* mac */
	body:first-of-type #loginPanel.login dl#userInfo dt.miniMail {
	width: 77px;
	}
	body:first-of-type #loginPanel.login dl#userInfo dd.miniMail {
	width: 37px;
	}
	body:first-of-type #loginPanel.login dl#userInfo dt.miniMail,
	body:first-of-type #loginPanel.login dl#userInfo dd.miniMail {
	font-size: 11px;
	letter-spacing: -0.5px;
	}


#loginPanel.login dl#userInfo dd.miniMail a{
color: #f0783d;
font-weight: bold;
}

/* coin & cicket */
#loginPanel.login dl#userInfo dt{
clear: both;
}

#loginPanel.login dl#userInfo .buyBtn{
position: relative;
top: -1px;
margin: 0 0 0 6px;
cursor: pointer;
vertical-align: middle;
}

#loginPanel.login dl#userInfo dd.coin,
#loginPanel.login dl#userInfo dd.ticket{
padding-bottom: 3px;
height: 14px;
}

#loginPanel.login dl#userInfo dd.coin a{
padding-left: 16px;
background: url(//images.hange.jp/hangame/common/userarea/ico_coin.gif) no-repeat 1px 2px;
color: #4e986e;
font-weight: bold;
}

#loginPanel.login dl#userInfo dd.ticket a{
padding-left: 16px;
background: url(//images.hange.jp/hangame/common/userarea/ico_ticket.gif) no-repeat 1px 1px;
color: #4e986e;
font-weight: bold;
}

/* hanC & hanG */
.hanG #loginPanel.login dl#userInfo dt.hanC img,
.hanG #loginPanel.login dl#userInfo dt.hanG img{
position: relative;
top: -1px;
margin: 0 0 0 6px;
cursor: pointer;
vertical-align: middle;
}
.hanG #loginPanel.login dl#userInfo dt.hanC img {
margin-left: 4px;
}

.hanG #loginPanel.login dl#userInfo dd.hanC,
.hanG #loginPanel.login dl#userInfo dd.hanG{
padding-bottom: 3px;
}

.hanG #loginPanel.login dl#userInfo dd.hanC a{
zoom:1;
padding-left: 14px;
background: url(//images.hange.jp/hangame/common/userarea/ico_hancoin.gif) no-repeat 0px 0;
color: #4e986e;
font-weight: bold;
}
.hanG #loginPanel.login dl#userInfo dd.hanC a span {
font-size: 11px;
}

.hanG #loginPanel.login dl#userInfo dd.hanG a{
zoom:1;
padding-left: 14px;
background: url(//images.hange.jp/hangame/common/userarea/ico_hang.gif) no-repeat 1px 0;
color: #4e986e;
font-weight: bold;
}


/* User navi
-------------------- */

/* myPage */
#loginPanel.login #btn_goToMyPage{
position: absolute;
left: 84px;
top: 36px;
}

/* linkList */
#loginPanel.login ul{
float: right;
width: 114px;
margin-bottom: -1px;
padding-right: 2px;
}

#loginPanel.login li.linkList{
width: 108px;
padding: 4px 0 4px 2px;
border-top: 1px dotted #bebebe;
}

#loginPanel.login li.linkList img{
vertical-align: top;
}

/* controlBox CSS修正110509
-------------------- */
#userArea #controlBox {
position: relative;
width: 190px;
min-height: 74px;
_height: 74px;
margin: 0 auto;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_controlbox.gif) 0 0 no-repeat;
text-align: center;
}
	#controlBox li {
	display: inline;
	float: left;
	}
#controlBox ul.skinColor {
display: inline-block;
width: 65px;
height: 17px;
padding: 2px 0 0 28px;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_skincolor.gif) 0 0 no-repeat;
margin: 5px 0 0 85px;
}
	#controlBox ul.skinColor li img {
	cursor: pointer;
	}
#controlBox ul.controlNavi {
position: absolute;
top: 0;
left: 0;
height: 19px;
padding: 5px 0 1px 8px;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_controlnavi.gif) 16px 9px no-repeat;
text-align: left;
}
	ul.controlNavi li img {
	margin-right: 1px;
	vertical-align: top;
	cursor: pointer;
	}
	ul.controlNavi li a img {
	vertical-align: top;
	}
ul.controlBtn {
float: right;
width: 182px;
}
	ul.controlBtn li img {
    position: relative;
    margin: 1px 2px 9px 0;
    vertical-align: top;
	}
	ul.controlBtn li.reserve img {
	position: absolute;
	top: 52px;
	left: 3px;
    margin: 0;
	cursor: pointer;
    z-index: 10;
	}
    ul.controlBtn li.buyAll {
    position: relative;
    left: -7px;
    width: 187px;
    text-align: right;
    z-index: 0;
    }
    ul.controlBtn li.buyAll img {
    margin: 0 0 1px;
 	cursor: pointer;
	}
	/* ie7のみ */
    *:first-child+html ul.controlBtn li.buyAll img {
    margin: 0 0 4px;
	}

/* controlBox　修正前
#userArea #controlBox {
position: relative;
width: 190px;
height: 74px;
margin: 0 auto;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_controlbox.gif) 0 0 no-repeat;
text-align: center;
}
	#controlBox li {
	display: inline;
	float: left;
	}
#controlBox ul.skinColor {
position: absolute;
top: 5px;
right: 6px;
width: 65px;
padding: 2px 0 0 28px;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_skincolor.gif) 0 0 no-repeat;
}
	#controlBox ul.skinColor li img {
	cursor: pointer;
	}
#controlBox ul.controlNavi {
height: 19px;
padding: 5px 0 1px 8px;
text-align: left;
}
	ul.controlNavi li img {
	margin-right: 1px;
	vertical-align: top;
	cursor: pointer;
	}
	ul.controlNavi li a img {
	vertical-align: top;
	}
ul.controlBtn {
float: right;
margin-right: 6px;
width: 182px;
}
	ul.controlBtn li img {
	margin-right: 2px;
	cursor: pointer;
	}
	ul.controlBtn li.reserve img {
	position: absolute;
	top: 52px;
	left: 3px;
	cursor: pointer;
	}
	ul.controlBtn li.buyAll img {
	position: absolute;
	top: 52px;
	right: 1px;
	cursor: pointer;
	}
-------------------- */

/* controlBox + premium add 090804 */
#itemSelectArea.premium #tryArea {
position: relative;
width: 439px;
height: 161px;
margin: 0;
padding: 11px 0 0 64px;
background: url(//images.hange.jp/hangame/shop/itemshop/floor/bg_try-area.png) 0 0 no-repeat;
text-align: left;
}
.premium #tryArea #avatarWindow {
float: left;
width: 66px;
height: 150px;
margin-right: 20px;
}
.premium #tryArea #controlBox {
float: left;
position: relative;
width: 198px;
height: 88px;
margin: 41px 0 0;
text-align: left;
}
	.premium #tryArea #controlBox p {
	display: inline;
	float: left;
	width: 31px;
	margin-left: 18px;
	}
	.premium #tryArea #controlBox ul.skinColor {
	position: absolute;
	top: 0;
	left: 48px;
	height: 13px;
	padding: 0;
	background: none;
	}
	*:first-child+html .premium #tryArea #controlBox ul.skinColor {
	top: -1px;
	}
		.premium #tryArea #controlBox ul.skinColor li {
		width: 15px;
		margin-left: 1px;
		}
		.premium #tryArea #controlBox ul.skinColor li img {
		}
	.premium #tryArea #controlBox ul.controlBtn {
	float: left;
	width: 195px;
	height: 38px;
	margin-right: 0;
	padding: 9px 0 0 18px;
	}
	.premium #tryArea #controlBox ul.controlBtn li img {
	margin-right: 10px;
	cursor: pointer;
	}
	.premium #tryArea #controlBox p.tradeAll {
	margin: 0;
	}


/* fittingHistory 
-------------------- */
#userArea .fittingHistory {
clear: both;
position: relative;
width: 190px;
margin: -3px auto;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_fitting_bg.gif) left bottom repeat-y;
text-align: center;
}
	#userArea .fittingHistory h3 {
	width: 187px;
	height: 20px;
	padding: 9px 0 0 3px;
	background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_fitting_topon.gif) left top no-repeat;
	text-align: left;
	cursor: pointer;
	}
	#userArea .fittingHistory ul {
	position: inherit;
	width: 180px;
	height: 116px;
	margin: 2px auto 0;
	padding: 0 0 0 4px;
	background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_fit-itemlist.gif) center top repeat-y;
	text-align: center;
	}
	#userArea .off ul,
	#userArea .off p {
	display: none;
	}
	#userArea .off h3 {
	background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_fitting_top.gif) left top no-repeat;
	}
		#userArea .fittingHistory ul li {
		position: relative;
		float: left;
		width: 44px;
		height: 56px;
		}
			#userArea .fittingHistory ul li .avatarImg {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 44px;
			margin: 0 auto;
			text-align: center;
			z-index: 1;
			}
			#userArea .fittingHistory ul li .avatarImg img {
			cursor: pointer;
			}
		#userArea .fittingHistory ul:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
#userArea .fittingHistory p.more {
position: absolute;
right: 10px;
top: 3px;
padding: 7px 0;
font-size: 10px;
}
	#userArea .fittingHistory p.more a {
	color: #7e7e7e;
	background: url(//images.hange.jp/hangame/common/ico_arrowbox_more.gif) right center no-repeat;
	padding: 7px 12px 7px 15px;
	}
.shopTop #userArea .fittingHistory p.more {
right: 10px;
top: 10px;
margin: 0;
padding: 0;
background: none;
}
	.shopTop #userArea .fittingHistory p.more a {
	color: #7e7e7e;
	padding-right: 12px;
	}

/* changeBtn
-------------------- */
#userArea p#changeBtn {
position: relative;
width: 188px;
min-height:21px;
_height:21px;
margin: -3px auto 5px;
padding: 8px 2px 0 0;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_fitting_btm.gif) center top no-repeat;
text-align: right;
}
	#userArea p#changeBtn img {
	cursor: pointer;
	}
.shopTop #userArea p#changeBtn {
margin: 0 auto;
padding: 0 0 12px;
*padding: 0;
}

/* ticketArea
-------------------------------- */
#extraArea #ticketArea {
position: relative;
width: 194px;
height: 138px;
margin: -8px auto 18px;
padding-top: 9px;
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_ticket.jpg) 0 0 no-repeat;
text-align: center;
}
#extraArea #ticketArea dl {
width: 168px;
height: 74px;
margin: 10px auto 0;
color: #868686;
font-size: 11px;
font-weight: bold;
line-height: 16px;
}
	#extraArea #ticketArea dt {
	float: left;
	width: 105px;
	width: 123px;
	padding-left: 8px;
	color: #959494;
	text-align: left;
	clear: both;
	}
	#extraArea #ticketArea dd {
	color: #868686;
	text-align: right;
	}
	#extraArea #ticketArea dd .count {
	padding-right: 4px;
	color: #666;
	}
	#extraArea #ticketArea p.confirm {
	margin: 0 0 0 41px;
	text-align: left;
	}

/* linkBtn
-------------------- */
#extraArea #userAreaBox p#linkBtn {
position: relative;
height: 30px;
margin: -10px auto 0;
padding: 0;
text-align: center;
}

#extraArea #userAreaBox ul#moveBtn {
position: relative;
margin: -5px auto 15px;
padding: 0;
text-align: center;
}
	#extraArea #userAreaBox ul#moveBtn li {
	margin: 0 auto 5px;
	}



/* contestPrizeWinner
------------------------------------------------------ */
.shopTop #extraArea #avatarIntro {
margin-top: 15px;
}
.shopTop #extraArea #avatarIntro #contestWinner {
background: url(//images.hange.jp/hangame/shop/itemshop/userarea/bg_ava-stage.gif) 0 0 no-repeat;
width: 184px;
height: 242px;
padding: 0 7px;
}
.shopTop #extraArea #avatarIntro #contestWinner h3 {
clear: right;
width: 178px;
padding: 8px 0 5px 6px;
*padding-top: 7px;
}
	.shopTop #extraArea #avatarIntro ul.contestWinnerImg li {
	display: inline;
	float: left;
	width: 92px;
	padding: 0;
	text-align: center;
	}
		.shopTop #extraArea #avatarIntro ul.contestWinnerImg span img {
		margin-left: 13px;
		*margin: 0;
		}
	.shopTop #extraArea #avatarIntro ul.contestWinnerImg li .ava_hgID {
	display: block;
	height: 23px;
	padding-top: 6px;
	}
.shopTop #extraArea #avatarIntro p.more {
margin-right: -13px;
background: none;
}
.shopTop #extraArea #avatarIntro #contestWinner:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }


/* 他の受賞者を見る */
.shopTop #extraArea #avatarIntro #contestWinner .otherPrizeWinner{
clear: both;
padding: 6px 0 0;
text-align: right;
zoom: 1;
}
	.shopTop #extraArea #avatarIntro #contestWinner .otherPrizeWinner a{
	padding-right: 12px;
	background: url(//images.hange.jp/hangame/common/ico_arrowbox_orange.gif) no-repeat right center;
	color: #827a65;
	zoom: 1;
	}


/* information
---------------------------------------- */
#extraArea #information {
position: relative;
width: 198px;
margin: 20px auto;
}
#extraArea #information h2 {
margin-bottom: 5px;
}
#extraArea #information li {
width: 188px;
margin-bottom: 3px;
padding-left: 10px;
background: url(//images.hange.jp/hangame/common/ico_2x2_black.gif) no-repeat 5px 6px;
}
	#extraArea #information li a strong{
	display: block;
	}
#extraArea #information p.more {
margin: 0;
background: none;
}
	#extraArea #information p.more a {
	padding: 0;
	}