@charset "Shift_JIS";
/* common
------------------------- */
body {margin:0;padding:0;background: url(http://images.hangame.co.jp/hangame/easy/nanapachi/event/120217_event/bg_body.gif) 0 0;font-size:12px;-webkit-text-size-adjust:none;font-family: '‚l‚r ‚oƒSƒVƒbƒN',sans-serif;}
h1,h2,h3,h4,h5 {
font-weight:normal;
}
em{
font-style: normal;
}
/* contentsArea
------------------------- */
#contentsArea{
min-width:960px;
background: url(http://images.hangame.co.jp/hangame/easy/nanapachi/event/120217_event/bg_contentsarea.gif) repeat-x 0 516px;
}
/* wrapper
------------------------- */
#wrapper {
background: url(http://images.hangame.co.jp/hangame/easy/nanapachi/event/120217_event/bg_wrapper.png) no-repeat center 0;
}
/* headerArea
------------------------- */
#headerArea{
position: relative;
width:787px;
padding: 0 0 0 173px;
margin:0 auto;
}
#headerArea .logo{
position: absolute;
left:0;
top:0;
}
#headerArea .date{
padding: 0 0 23px 158px;
}
/* contents
------------------------- */
#contents{
position: relative;
width:721px;
margin: 0 auto;
padding-left: 239px;
}
/* infoArea */
.infoArea{
width: 724px;
height: 236px;
overflow: hidden;
color: #049;
background: url(http://images.hangame.co.jp/hangame/easy/nanapachi/event/120217_event/bg_info.gif) no-repeat 0 0;
zoom:1;
}
.infoArea:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.eventInfo{
float: left;
width: 526px;
padding:3px 0 8px 20px;
font-size: 14px;
}
.eventInfo dt{
width: 96px;
float: left;
margin:12px 0;
font-weight: bold;
}
.eventInfo dd{
width: 430px;
float: left;
margin:12px 0;
}
.eventInfo dd em{
font-weight: bold;
}
.eventInfo dd p{
padding:8px 0 0;
}
.eventInfo dd p img{
vertical-align: middle;
}
.eventInfo dd .js_sdeldisp{
margin-left:15px;
padding-left:8px;
background: url(http://images.hangame.co.jp/hangame/easy/nanapachi/event/120217_event/ico_begin.gif) no-repeat 0 5px;
color: #f60;
text-decoration: underline;
}
.picInfo{
float: right;
}
.picInfo dd{
text-align: center;
font-size: 10px;
color: #656565;
}
/* profile */
.profile{
position: absolute;
width: 210px;
height: 138px;
padding:15px 0 0 10px;
left:0;
top:162px;
background: url(http://images.hangame.co.jp/hangame/easy/nanapachi/event/120217_event/bg_profile.gif) no-repeat 0 0;
}
.profile h2{
margin-bottom: 5px;
}
/* theDay */
.theDay h2{
position: relative;
top:-12px;
text-align: center;
margin-bottom:-8px
}
.theDay{
background: url(http://images.hangame.co.jp/hangame/easy/nanapachi/event/120217_event/bg_avatars.gif) no-repeat 0 49px;
zoom:1
}
.theDay:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.vsPart{
float: left;
width: 215px;
padding:22px 0 0 16px;
}
.vsPart li{
height: 181px;
color: #808080;
zoom:1;
}
.vsPart li:first-child{
margin-bottom: 40px;
}
.vsPart li:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.vsPart .avatar{
float: left;
margin-right: 11px;
}
.vsPart .avatar dt{
margin-bottom:6px;
}
.vsPart .avatar a{
color: #f60;
text-decoration: underline;
}
.vsPart .memInfo{
width: 130px;
float:left;
}
.vsPart .memInfo h3{
font-weight: bold;
margin:5px 0 15px;
}
.vsPart .memInfo h3 span{
font-weight: normal;
display: block;
}
.vsPart .memInfo em{
font-size: 20px;
color: #fc53c9;
font-weight: bold;
}
.vsPart .memInfo dd{
margin-bottom:15px;
}
.vsPart .nologin{
width: 200px;
padding-top:40px;
text-align: center;
}
.vsPart .nologin span{
display: block;
margin-bottom: 18px;
}
.vsPart .nologin a{
color: #f60;
text-decoration: underline;
}
.wingArea{
float: right;
width: 464px;
height:409px;
padding:20px 10px 0;
}
.wingArea h3{
font-weight: bold;
}
.wingArea h3 span{
font-weight: normal;
margin-left: 10px;
}
.wingpic{
margin-top: 6px;
}
.wingArea .wingList{
width: 464px;
height: 376px;
margin-top:6px;
overflow-y:auto;
border:1px solid #ccc;
position: relative;
}
.wingArea .tops{
margin-top:10px;
zoom:1
}
.wingArea .tops:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.wingArea .tops li{
float: left;
width:89px;
text-align: center;
}
.wingArea .tops span{
display: block;
}
.wingArea .tops .avatar{
width: 66px;
margin: 5px auto 0;
height: 150px;
border:1px solid #585858;
}
.wingArea .tops .info{
margin-top:6px;
font-size: 10px;
font-weight: bold;
}
.wingArea .tops .info a{
color: #787878;
text-decoration: underline;
}
.wingArea .tops .info em{
display: block;
color: #fc53c9;
}
.wingArea h4{
margin-top:15px;
height: 21px;
line-height: 21px;
color: #2c2c2c;
background: #ddd;
text-align: center;
font-weight: bold;
}
.wingArea  .otherList li{
padding: 2px 0;
border-bottom: 1px dashed #ddd;
zoom:1
}
.wingArea  .otherList li:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.wingArea  .otherList img{
vertical-align: middle;
}
.wingArea  .otherList .num{
float: left;
padding:10px 0 0 24px;
width: 74px;
color: #2c2c2c;
font-weight: bold;
}
.wingArea  .otherList .name{
float: left;
width: 270px;
color: #676767;
}
.wingArea .otherList .name a{
margin-left:5px;
text-decoration: underline;
}
.wingArea .amount{
float: right;
padding:10px 22px 0 0;
color: #fc53c9;
}
.theDay .note{
clear:both;
height: 28px;
padding:8px 7px 0 0;
line-height: 28px;
color: #fff;
}
.theDay .note img{
float: right;
vertical-align: middle;
}
.theDay .btnList{
width: 684px;
margin: 12px auto;
zoom:1
}
.theDay .btnList:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.theDay .btnList li{
float: left;
width: 322px;
padding:0 10px;
}
/* noteArea
------------------------- */
#noteArea{
width: 721px;
margin: 0 auto;
padding: 18px 0 80px 246px;
color: #808080;
}
#noteArea h3{
margin-bottom: 5px;
}
#noteArea li{
margin-bottom: 3px;
padding-left:14px;
text-indent: -14px;
line-height: 1.6;
}
/* popLayer
------------------------- */
.layer{
display:none;
position:absolute;
}
.layer .btnPupClose{
position:absolute;
right:14px;
top:14px;
}
.layer .js_sdelclose{
cursor:pointer;
}
#js_sdelol{
background-color: #000;
filter: alpha(opacity=70);  /* IE */
-moz-opacity: 0.7;          /* FireFox */
opacity: 0.7;               /* Safari */	
height:1000px;
}
/* layerArea
------------------------- */
.layerArea{
background:#fff;
border:8px solid #ccc;
height:890px;
width:764px;
position:relative;
color:#333;
}
.flow{
width:720px;
padding:39px 22px 0;
}
.flow .flowCon{
padding:14px 20px 0;
}
.flow .flowCon h3{
margin:16px 0;
}
.flow .flowPart1{
float:left;
}
.flow .flowPart2{
float:right;
}
.flow .flowPart2 p{
margin-top:22px;
}