@charset 'Shift_JIS';


/* Basic style
------------------------------------------- */
body {
margin: 0;
padding: 0;
color: #888;
font-family: 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
font-size: 12px;
line-height: 1.3;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 12px; }
p { margin: 0; }
ol, ul, li { list-style: none; margin: 0; padding: 0; }
dl, dt, dd { margin: 0; padding: 0; }
img { border: 0; vertical-align: bottom; }
a img { vertical-align: bottom; }
a:link { color: #676767; text-decoration: none; }
a:visited { color: #676767; text-decoration: none; }
a:hover, a:active, a:focus { color: #676767; text-decoration: underline; }
form { margin: 0; padding: 0; }
label{ cursor: pointer; }


#container {
width: 503px;
margin: 0 auto;
}


/* cpLead
----------------------------- */
#cpLead {
position: relative;
width: 503px;
height: 87px;
padding: 0;
background: url(//images.hange.jp/hangame/shop/itemshop/floor/spot/bg_lead.gif) 0 0 no-repeat;
}
#cpLead h1 {
position: absolute;
top: 0;
left: 0;
}
#cpLead h2 {
padding: 14px 0 2px 91px;
}
#cpLead p {padding-left: 91px; line-height: 1.2;}
#cpLead .R,
.terms .R,
.attention .R {color: #f6639e;}
#cpLead .B,
.terms .B,
.attention .B {color: #6599f9;}
#cpLead .O,
.terms .O,
.attention .O {color: #f89d14;}


/* catalog
----------------------------- */
#catalog {
position: relative;
clear: both;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.item1 {width: 125px;}
.item2 {width: 251px;}
.item3 {width: 378px;}
.item4 {width: 503px;}
/* add setPresent */
.setPresent #catalog {
  font-family: "メイリオ",Meiryo,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
  width: 503px;
  height: 263px;
  background: url(//images.hange.jp/hangame/shop/itemshop/floor/spot/set-present/bg_set-present.png) 0 0 no-repeat;
}
.setPresent h1 {
  height: 31px;
  color: #161616;
  font-size: 17px;
  font-weight: bold;
  line-height: 32px;
}

#catalog ul.itemArea {
min-height: 212px;
margin: 0 0 0 -1px;
padding: 0;
overflow: hidden;
zoom: 1;
border-bottom: 1px solid #d2d2d2;
}
#catalog ul.itemArea li.item {
position: relative;
float: left;
width: 125px;
padding: 47px 0 0 1px;
background: url(//images.hange.jp/hangame/shop/common/pic_dotline.gif) 0 47px no-repeat;
text-align: center;
}
/* add cool */
.cool #catalog ul.itemArea {
min-height: 214px;
margin: 0 0 0 -4px;
}
	.cool #catalog ul.itemArea li.item {
	width: 122px;
	margin-left: 4px;
	padding: 47px 0 0;
	background: url(//images.hange.jp/hangame/shop/2nd/brand/bg_ava_01.gif) 0 47px no-repeat;
	}
/* add setPresent */
.setPresent #catalog ul.itemArea {
  min-height: 110px;
  margin-top: 10px;
  border: none;
}
.setPresent #catalog.item1 .itemArea {width: 125px; margin: 10px auto 0;}
.setPresent #catalog.item2 .itemArea {width: 252px; margin: 10px auto 0;}
.setPresent #catalog.item3 .itemArea {width: 379px; margin: 10px auto 0;}
.setPresent #catalog ul.itemArea li.item {
  padding: 35px 0 0 1px;
  background-position: 0 0;
}
.setPresent #catalog ul.itemArea li.item:first-child {
  background: none;
}

/* terms（条件） */
#catalog .item .terms {
position: absolute;
top: 10px;
width: 111px;
height: 31px;
padding: 5px 6px 0 8px;
background: url(//images.hange.jp/hangame/shop/itemshop/floor/spot/bg_terms.gif) 1px 0 no-repeat;
font-size: 11px;
line-height: 1;
word-wrap: break-word;
}
/* add setPresent */
.setPresent #catalog .item .terms {
  top: 0;
  background: none;
  color: #161616;
  line-height: 1.3;
}
.setPresent #catalog .item .terms strong {
  display: block;
}


/* avatarItem */
ul.itemArea div.avatarItem {
position: relative;
width: 125px;
height: 136px;
background: url(//images.hange.jp/hangame/shop/common/bg_avataritem.gif) left bottom repeat-x;
z-index: 5;
}
	div.avatarItem .avatarImg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 125px;
	margin: 0 auto;
	z-index: 1;
	}
		div.avatarItem .avatarImg img {
		vertical-align: bottom;
		}
/* add cool */
.cool ul.itemArea div.avatarItem {
width: 122px;
height: 132px;
background: none;
}
.cool div.avatarItem .avatarImg {
position: absolute;
left: 0;
bottom: 1px;
width: 122px;
}
/* add setPresent */
.setPresent ul.itemArea div.avatarItem {
  height: 110px;
  background: none;
}

/* itemInfo */
ul.itemArea .itemInfo {
position: relative;
width: 125px;
height: 84px;
padding: 5px 0 0;
background: #f6f6f6;
color: #555;
}
ul.itemArea .itemInfo .itemCheck {
width: 125px;
min-height: 35px;
_height: 35px;
margin: 0 auto;
text-align: center;
line-height: 1.1;
}
	ul.itemArea .itemInfo .itemCheck h4 {
	min-height: 26px;
	_height: 24px;
	_margin-bottom: -2px;
	padding: 11px 0 0;
	font-size: 12px;
	font-weight: normal;
	z-index: 10;
	word-wrap: break-word;
	}
	ul.itemArea div.itemInfo .itemCheck p {
	position: relative;
	margin: 3px 0 -8px;
	color: #333;
	}
	ul.itemArea div.itemInfo .itemCheck p.limited {
	color: #c00;
	}
/* add cool */
.cool ul.itemArea .itemInfo {
width: 122px;
height: 73px;
background: none;
border: none;
}
.cool ul.itemArea .itemInfo .itemCheck {
width: 122px;
}
.cool ul.itemArea .itemInfo .itemCheck h4 {
width: 121px;
padding: 9px 0 0;
}
	.cool ul.itemArea div.itemInfo .itemCheck p {
	position: relative;
	margin: 0 0 -7px;
	color: #333;
	}
	.cool ul.itemArea div.itemInfo .itemCheck p.limited {
	color: #c00;
	}
/* add setPresent */
.setPresent ul.itemArea .itemInfo {
  display: table;
  height: 67px;
  padding: 0;
  background: none;
}
	.setPresent ul.itemArea .itemInfo .itemCheck h4 {
    display: table-cell;
    height: 35px;
    padding: 0 15px;
    vertical-align: middle;
  }

/* 購入ボタンなど。2個または1個ボタンの場合_sつける */
.itemInfo ul.buyItem {
margin: 70px auto;
}
.itemInfo ul.buyItem_s {
margin-top: 10px;
}
	.itemInfo ul.buyItem li,
	.itemInfo ul.buyItem_s li {
	display: inline;
	height: 20px;
	padding: 0 1px;
	}
	.itemInfo ul.buyItem li img,
	.itemInfo ul.buyItem_s li img {
	margin-top: 2px;
	cursor: pointer;
	}
/* add cool */
.cool .itemInfo ul.buyItem_s {
margin-top: 5px;
}
/* add setPresent */
.setPresent .itemInfo ul.buyItem_s {
  margin: 0 auto;
}
.setPresent .itemInfo ul.buyItem_s .btn_get {
  display: block;
  width: 61px;
  height: 19px;
  margin: 0 auto;
  color: #fff;
  font-size: 10px;
  background: #161616;
  line-height: 19px;
}
.setPresent .itemInfo ul.buyItem_s .btn_get.off {
  background: #bcbcbc;
}
.setPresent .itemInfo ul.buyItem_s .btn_get a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
}
.setPresent .itemInfo ul.buyItem_s .btn_get a:hover {
  text-decoration: none;
}



/* attention
-------------------------------- */
#attentionArea {
width: 503px;
height: 106px;
margin-top: -1px;
padding-top: 11px;
background: url(//images.hange.jp/hangame/shop/itemshop/floor/spot/bg_attention.gif) 0 0 no-repeat;
overflow: hidden;
}
.attention {
width: 465px;
height: 76px;
padding: 0 6px 5px 22px;
overflow: auto;
word-wrap: break-word;
word-break: break-all;
}
.attention h3 {
margin: 10px 0 2px;
font-size: 11px;
}

/* add setPresent */
.setPresent .attention {
  height: 71px;
  padding: 0 6px 10px 22px;
  font-family: "メイリオ",Meiryo,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
  font-size: 10px;
}
.setPresent .attention dt {
  margin: 1em 0 3px;
  font-weight: bold;
}
.setPresent .attention dd ul {
  margin: 5px 0 0;
}
.setPresent .attention dd li {
  padding-left: 1em;
  text-indent: -1em;
}



/* event
-------------------------------- */
#container.event h2{
position: relative;
margin: 10px 0 -5px;
padding: 0;
background:url(//images.hange.jp/hangame/shop/itemshop/floor/ico_arrow_o.gif) 0 1px no-repeat;
color:#333;
font-size:14px;
line-height: 1.1;
text-align:left;
text-indent:1.2em;
}
#eventArea {
margin-top: 10px;
}
#eventArea:after{content:".";display:block;height:0;clear:both;visibility:hidden}
#eventArea .present{
position: relative;
margin-top: 12px;
}
#eventArea .present li{
position:relative;
display:inline;
float:left;
height:160px;
}
#eventArea .present li.item01 {
width: 251px;
background: url(//images.hange.jp/hangame/shop/itemshop/floor/spot/sp/110301/bg_event01.jpg) 0 0 no-repeat;
}
#eventArea .present li.item02 {
width: 252px;
background: url(//images.hange.jp/hangame/shop/itemshop/floor/spot/sp/110301/bg_event02.jpg) 0 0 no-repeat;
}
#eventArea .present li.item01 .ava {
text-align: right;
}
#eventArea .present .getItem{
position:absolute;
bottom: 7px;
}
#eventArea .present li.item01 .getItem{
right: 12px;
}
#eventArea .present li.item02 .getItem{
left: 7px;
}
#eventArea .present p.limited {
width: 104px;
color: #8f0040;
text-align: right;
}
#eventArea .link img {
clear: both;
margin: 10px 0 25px;
}


/* SP 3rd　add110419 */
#container.sp3rd .challenge {
position: relative;
width: 503px;
/*background: url(../images/floor/spot/sp/110501/bg_3rd-challenge.jpg) 0 0 no-repeat;*/
}
#container.sp3rd .challenge p {
width: 155px;
height: 86px;
padding: 30px 0 0 75px;
color: #a92177;
text-align: center;
}
#container.sp3rd .challenge p strong {
padding-right: 1px;
}
#container.sp3rd .challenge p .count {
display: block;
padding: 1px 0 0 63px;
color: #000;
}
#container.sp3rd .challenge p .count strong {
font-size: 30px;
letter-spacing: 4px;
padding-right: 2px;
}
#container.sp3rd .challenge p.kujiBtn{
position: absolute;
top: 11px;
left: 183px;
}
#container.sp3rd .notes {
position: relative;
color: #333;
padding: 20px 8px;
font-size: 11px;
}
#container.sp3rd .notes h3 {
font-size: 11px;
}
#container.sp3rd .notes ul {
margin-top: 10px;
}
#cpLead .red0917{
color:#f6639e;
font-weight:normal;
}