@charset 'Shift_JIS';

/* - First{ Y.H } - Last{ Y.H } - Update{ 2009-01-16 } - About{ TopPage style of typing } */


/* contents.top
-------------------------------- */
#bodyArea.easyGame #contents.top {
position: relative;
width: 638px;
margin: 0 0 10px 6px;
min-height:1139px;
_height:1139px;
padding: 0 0 63px;
}
	#bodyArea.easyGame #contents.top #gameIntro {
	position: absolute;
	left: 11px;
	bottom: 0;
	clear:both;
	width: 584px;
	margin: 0 auto;
	padding: 10px 15px;
	border: 1px solid #ccc;
	color: #999;
	}
	#bodyArea.easyGame #contents.top #gameIntro p strong {
	font-weight: normal;
	}
#bodyArea #contents.top h2 {
clear: both;
width: auto;
height: 30px;
margin: 0;
padding: 0 0 0 5px;
border-bottom: 1px solid #e3e3e3;
color: #464646;
line-height: 30px;
}
	#bodyArea #contents.top h2 strong {
	padding-right: 1px;
	color: #9367ff;
	}
#contents.top #enjoyArea h2,
#contents.top #easyCommunity h2 {
position: relative;
padding-bottom: 12px;
}
	#contents.top h2 span.lead {
	position: absolute;
	top: 16px;
	left: 5px;
	color: #a2a2a2;
	font-size: 11px;
	font-weight: normal;
	}
#bodyArea.easyGame #contents.top p.more a {
top: 24px;
right: 8px;
padding-right: 0;
background: none;
}

/* presentation_premium
-------------------------------- */
#presentation_premium{
position: relative;
width:637px;
height:218px;
margin:0 auto;
background:url(https://images.hange.jp/hangame/easy/typing/top/bg_intro_premium.gif) no-repeat 0 0;
}
#presentation_premium:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#presentation_premium #gameImg{
float:left;
margin:15px 0 0 15px;
width:391px;
position: relative;
}


#presentation_premium #gameImg ul.rotationBnr {
  width: 391px;
  height: 188px;
  overflow: hidden;
  font-size: 0;
}
#presentation_premium #gameImg ul.rotationBnr li {
  font-size: 0;
}
#presentation_premium #gameImg ul.bnrBtn {
  position: absolute;
  bottom: 10px;
  right: 7px;
  font-size: 0;
}
#presentation_premium #gameImg ul.bnrBtn li {
  font-size: 0;
  display: inline-block;
  margin-right: 3px;
}












#presentation_premium #moreFun{
float:right;
width:200px;
padding:14px 14px 0 0;
}
#presentation_premium #moreFun .ss{
margin-bottom:3px;
}
#presentation_premium #moreFun .nav{
height:21px;
padding-top:8px;
background:url(https://images.hange.jp/hangame/easy/typing/top/bg_premium.gif) no-repeat 0 0;
text-align:right;
}
#presentation_premium #moreFun.v02{
padding:12px 14px 0 0;
}
#presentation_premium #moreFun.v02 .ss{
margin-bottom: 5px;
}



/* presentation
-------------------------------- */
#presentation {
position: relative;
width: 617px;
height: 190px;
margin: 0 auto;
background: url(https://images.hange.jp/hangame/easy/typing/top/bg_presentation.jpg) 0 0 no-repeat;
}
#presentation:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#movie {
position: absolute;
top: 5px;
left: 5px;
width: 393px;
height: 180px;
}
	#movie p {
	margin: 15px 0 0;
	color: #fff;
	text-align: center;
	}
#topNavi {
float: right;
display: inline;
width: 211px;
margin: 5px 5px 0 0;
}
	#topNavi li {
	height: 88px;
	margin-bottom: 4px;
	}
	#topNavi li#randImg{
	display: none;
	}


/* enjoyArea
-------------------------------- */
#enjoyArea {
clear: both;
position: relative;
width: 624px;
height: 280px;
margin: 18px auto 0;
padding: 0;
}
	#contents.top #enjoyArea h2 {
	border-bottom: none;
	}
#enjoyArea:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* musicArea */
#musicArea {
position: relative;
float: left;
width: 380px;
margin: 0;
padding: 0;
}
#musicArea ul#musicList {
width: 380px;
padding-top: 5px;
}
#musicArea ul#musicList div.click {
float: left;
padding: 0;
}
#musicArea ul#musicList ul.music {
clear: both;
width: 403px;
margin: 0 0 0 -24px;
padding: 11px 0 0;
}
#musicArea ul#musicList ul.music li {
display: inline;
float: left;
width: 110px;
margin: 0 auto;
padding-left: 24px;
color: #acacac;
line-height: 1.2;
text-align: center;
}
	#musicArea ul#musicList ul.music li img {
	display: block;
	position: relative;
	margin: 0;
	border: 5px solid #f4f4f4;
	}
	#musicArea ul#musicList ul.music li strong {
	display: block;
	padding: 5px 0 2px;
	color: #666;
	}
	#musicList .auditionPlayer img {
	cursor:pointer;
	}
	#musicArea ul#musicList ul.music li .auditionPlayer img {
	border: none;
	margin: 5px auto 0;
	}
#auditionPlayer {
position: absolute;
top: 0;
}
#musicArea ul#musicList ul.music:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* moreEnjoy */
#moreEnjoy {
position: relative;
right: -13px;
float: right;
width: 230px;
height: 255px;
margin-top: 10px;
background: url(https://images.hange.jp/hangame/easy/typing/top/bg_moreenjoy.jpg) 0 top no-repeat;
}
#moreEnjoy p.moreGuide {
position:relative;
width: 230px;
height: 221px;
}
	#moreEnjoy p.moreGuide img {
	position: relative;
	text-indent: -99em;
	}
	#moreEnjoy p.moreGuide a {
	display: block;
	position: absolute;
	top: 62px;
	left: 20px;
	width: 49px;
	height: 25px;
	z-index: 100;
	}
		#moreEnjoy p.moreGuide a span {
		display: none;
		}
#moreEnjoy p.friend {
width: 215px;
height: 26px;
color: #a2a2a2;
text-indent: 20px;
font-size: 11px;
line-height: 28px;
background: url(https://images.hange.jp/hangame/easy/typing/top/bg_friend.jpg) 0 0 no-repeat;
}


/* Community Area
-------------------------------- */
#easyCommunity {
clear: both;
position: relative;
width: 624px;
margin: -3px auto 0;
padding: 0;
}
#easyCommunity:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* blog */
#easyBlog {
clear: both;
position: relative;
float: left;
width: 296px;
margin: 0;
padding: 0;
}
#easyBlog ul {
position: relative;
width: 283px;
padding: 10px 0 0 10px;
z-index: 10;
}
	#easyBlog ul li {
	position: relative;
	height: 19px;
	padding-left: 8px;
	background: url(https://images.hange.jp/hangame/common/ico_2x2_gray.gif) 0 6px no-repeat;
	color: #676767;
	line-height: 19px;
	}
	#easyBlog ul li span.date {
	position: absolute;
	top: 0;
	right: 5px;
	height: 19px;
	color: #a9a9a9;
	font-size: 11px;
	}

/* community */
#gameCircle {
float: right;
width: 313px;
}
#gameCircle ul.circleHG {
position: relative;
width: 298px;
padding: 12px 0 0 10px;
z-index: 10;
}
	#gameCircle ul.circleHG li {
	position: relative;
	width: 290px;
	height: 19px;
	padding-left: 8px;
	background: url(https://images.hange.jp/hangame/common/ico_2x2_gray.gif) 0 6px no-repeat;
	color: #676767;
	line-height: 19px;
	}
		#gameCircle .circleHG li.listTop {
		position: relative;
		width: 248px;
		height: 56px;
		margin-right: -10px;
		padding: 0 0 0 60px;
		background: none;
		}
	#gameCircle ul.circleHG li h4 {
	font-weight: normal;
	}
		#gameCircle ul.circleHG li.listTop h4 {
		margin-bottom: 5px;
		font-weight: bold;
		}
	#gameCircle ul.circleHG li .emblm {
	position: absolute;
	left: 0;
	top: -3px;
	}
	#gameCircle ul.circleHG li .emblm img {
	padding: 1px;
	border: 1px solid #d7d7d7;
	}
	#gameCircle ul.circleHG li p {
	font-size: 11px;
	line-height: 1.3;
	}


/* screenshotArea
-------------------------------- */
#screenshotArea {
clear: both;
position: relative;
width: 624px;
margin: 22px auto 0;
padding: 0;
}
#screenshotArea .ss {
width: 624px;
height: 100px;
padding: 15px 0 0;
overflow: hidden;
}
	#screenshotArea .ss ul {
	width: 623px;
	margin-left: -8px;
	}
	#screenshotArea .ss li {
	float: left;
	padding-left: 22px;
	text-align: center;
	}
	#screenshotArea .ss li a {
	color: #999;
	}
	#screenshotArea .ss li a img{
	margin-bottom: 5px;
	display: block;
	}
div#ssLayer{
position:absolute;
width: 527px;
height: 404px;
padding: 47px 0 0;
border: 1px solid #b3b3b3;
background: #fff;
text-align: center;
}
div#ssLayer .ssImgDiv img{
border: 1px solid #b3b3b3;
}
div#ssLayer .ssNav{
display:none;
}
div#ssLayer .ssClose{
position: absolute;
display: block;
width: 17px;
height: 17px;
top: 14px;
right: 14px;
background: url(https://images.hange.jp/r02/game/common/btn/btn_close.gif) left top no-repeat;
text-indent: -9999px;
}
div#ssLayer .linerNav{
margin-top:13px;
}


/* Picup Game
-------------------------------- */
#picupGame {
width: 624px;
margin: 15px auto 10px;
}
#picupGame p.read {
height: 32px;
margin: 0 18px;
padding-left: 26px;
background: url(https://images.hange.jp/hangame/easy/easy_common/ico_arrow_gray.gif) no-repeat 14px 13px;
line-height: 2.8;
}
#picupGame p.read strong {
font-weight: normal;
}
#picupGame .gameLink {
min-height: 247px;
_height: 247px;
padding-top: 18px;
background: url(https://images.hange.jp/hangame/easy/collectionking/common/bg_picup.jpg) left bottom no-repeat;
}
#picupGame .gameLink ul {
width: 612px;
margin: 18px 0 0 12px;
overflow: hidden;
}
#picupGame .gameLink ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#picupGame .gameLink ul li {
float: left;
position: relative;
width: 199px;
}
	#picupGame .gameLink ul li h3 {
	width: 145px;
	margin: 120px auto 0;
	color: #464646;
	}
	#picupGame .gameLink ul li .ss {
	position: absolute;
	top: 0;
	left: 28px;
	width: 145px;
	padding: 3px;
	background-color: #f6f6f5;
	}
	#picupGame .gameLink ul li p {
	width: 150px;
	margin: 0 0 0 27px;
	color: #a7a7a7;
	font-size: 11px;
	}

/* balloonLayerActiveX */
.balloonLayerActiveX {
position: absolute;
right: -197px;
top: 10px;
width: 183px;
height: 113px;
background: url('//images.hange.jp/hangame/extra/gamestarter/bg_balloon.png') no-repeat 0 0;
z-index: 999;
overflow: hidden;
}
.balloonLayerActiveX a {
display: block;
font-size: 0px;
text-indent: -9999px;
width:91px;
height: 29px;
margin: 67px 0 0 51px;
}