@charset "UTF-8";
/*
*	top.css
*	http://srw-oe.suparobo.jp
*	@copyright NBGI
*/
/* ==========================================================
	clearfix
========================================================== */
.clearfix, #main .sns, #contents, #contents #news, #contents #about {
  zoom: 1;
}
.clearfix:after, #main .sns:after, #contents:after, #contents #news:after, #contents #about:after {
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================
	page
========================================================== */
#page {
  padding-bottom: 55px;
}

/* ==========================================================
	globalHeader
========================================================== */
header {
  position: relative;
  height: 60px;
  background: url(../images/shared/gnavi_bg.png) no-repeat;
  z-index: 2;
}

#globalHeader #globalNavi {
  background: none;
}

/* ==========================================================
	main
========================================================== */
#main {
  position: relative;
  width: 1300px;
  height: 444px;
  margin: 0 auto;
  background: url(../images/top/main_bg.jpg) no-repeat;
}
#main .btnHome {
  position: absolute;
  top: 52px;
}
#main h1,
#main #releseDate,
#main #bannerHowtobuy,
#main #character,
#main #characterBg,
#main #copy {
  position: absolute;
}
#main h1 {
  top: 250px;
  left: 102px;
  width: 359px;
  height: 204px;
  background: url(../images/top/logo.png) no-repeat;
  text-indent: -9999px;
  opacity: 0;
}
#main #copy {
  bottom: 39px;
  right: -100px;
  z-index: 3;
  opacity: 0;
}
#main #releseDate {
  bottom: 30px;
  left: 130px;
  opacity: 0;
		z-index: 1;
}
#main #releseDate a {
		border:none;
		outline: none;
}
#main #bannerFree {
  position: absolute;
  left: 147px;
  bottom: 63px;
  opacity: 0;
  z-index: 3;
}
#main #bannerHowtobuy {
  bottom: 8px;
  left: 147px;
  opacity: 0;
  z-index: 3;
}
#main #character {
  bottom: -70px;
  left: 418px;
  opacity: 0;
  z-index: 2;
}
#main #characterBg {
  bottom: -70px;
  left: 353px;
  background: url(../images/top/main_character_bg.png) no-repeat;
  opacity: 0;
		z-index: 0;
}
#main .sns {
  position: absolute;
  top: 88px;
  right: 120px;
  z-index: 2;
}
#main .sns li {
  float: left;
  width: 120px;
}
#main .sns li.mixi {
  overflow: hidden;
  height: 20px;
}
#main .yokokuMovie {
  position: absolute;
  top: 113px;
  right: 120px;
  width: 286px;
  padding: 6px 7px 0;
}

/* ==========================================================
	contents
========================================================== */
#contents {
  width: 1060px;
  margin: 0 auto;
  padding: 20px 0 0;
}
#contents .banner {
  margin-bottom: 16px;
}
#contents .leftSide {
  float: left;
  width: 750px;
}

/* news
========================================================== */
#contents #bannerSpecial {
  position: relative;
  z-index: 2;
  margin: 0 0 5px 0;
}
#contents #bannerSpecial p {
  margin-top: 10px;
}
#contents #news {
  width: 595px;
  height: 42px;
  margin: 0 0 4px -4px;
  padding: 20px 14px 0 140px;
  background: url(../images/top/news_bg.png) no-repeat;
  color: #fff;
  font-size: 14px;
}
#contents #news #newsMask {
  overflow: hidden;
  float: left;
  width: 516px;
}
#contents #news ul {
  width: 2000px;
  height: 20px;
}
#contents #news li {
  float: left;
  margin-left: 80px;
}
#contents #news li:first-child {
  margin-left: 0;
}
#contents #news em {
  margin-right: 10px;
  color: #b48325;
}
#contents #news .btnMore {
  float: right;
  width: 73px;
  height: 37px;
  margin-top: -8px;
}
#contents #news .btnMore a {
  display: block;
  width: 73px;
  height: 37px;
  background: url(../images/top/btn_more.png) no-repeat;
  text-indent: -9999px;
}
#contents #news .btnMore a:hover {
  background-position: 0 -37px;
}

/* about
========================================================== */
#contents #about {
  height: 185px;
  margin-left: -4px;
  padding: 88px 0 0 26px;
  background: url(../images/top/about_bg.jpg) no-repeat;
  color: #fff;
  font-size: 14px;
  line-height: 1.7;
}
#contents #about h2 {
  display: none;
}
#contents #about em {
  color: #d5b638;
  font-size: 18px;
}
#contents #about .leftSide,
#contents #about .rightSide {
  float: left;
}
#contents #about .leftSide {
  width: 348px;
  margin-right: 16px;
}
#contents #about .rightSide {
  width: 330px;
}
#contents #about img {
  margin-bottom: 30px;
}
#contents #about .btnDetail a {
  display: block;
  width: 265px;
  height: 53px;
  margin: 15px auto 0;
  background: url(../images/top/btn_detail.png) no-repeat;
  text-indent: -9999px;
}
#contents #about .btnDetail a:hover,
#contents #about .btnDetail span {
  background-position: 0 -53px;
}

/* ==========================================================
	schedule
========================================================== */
.top #schedule {
  width: 714px;
  margin-left: -4px;
  height: 370px;
  padding: 79px 17px 0 18px;
  background: url(../images/top/schedule_bg.jpg) no-repeat;
}
.top #schedule h2 {
  display: none;
}
.top #schedule #scheduleMap {
  width: 712px;
}
.top #schedule #scheduleMap .jspDrag {
  left: 190px;
}
.top #schedule #scheduleMap .jspPane {
  left: -239px;
}

/* ==========================================================
	rightSide
========================================================== */
#contents > .rightSide {
  float: right;
  width: 300px;
}

/* ==========================================================
	newsWindow
========================================================== */
#newsWindow {
  width: 1069px;
  padding-top: 10px;
  font-size: 18px;
  color: #fff;
  background: url(../images/news/bg_top.png) no-repeat;
}
#newsWindow .newsContents {
  width: 997px;
  min-height: 500px;
  margin-bottom: 10px;
  padding: 46px 36px 0;
  background: url(../images/news/bg_repeat.png);
}
#newsWindow h1 {
  width: 144px;
  height: 32px;
  margin-bottom: 42px;
  text-indent: -9999px;
  background: url(../images/top/news_title.gif) no-repeat;
}
#newsWindow dl {
  background: url(../images/news/line.gif) no-repeat left top;
}
#newsWindow dl a:link,
#newsWindow dl a:visited,
#newsWindow dl a:hover {
  color: #5ff9da;
}
#newsWindow dl a:link,
#newsWindow dl a:visited {
  color: #5ff9da;
  text-decoration: none;
}
#newsWindow dl a:hover {
  text-decoration: underline;
}
#newsWindow dt {
  float: left;
  padding: 20px 0 20px 5px;
  color: #b48325;
}
#newsWindow dd {
  padding: 20px 5px 20px 134px;
  background: url(../images/news/line.gif) no-repeat left bottom;
}
#newsWindow .bgBottom {
  margin-top: -10px;
}

/* ==========================================================
	module
========================================================== */
.floatR {
  float: right;
}