@charset "UTF-8";

@font-face {
  font-family: PixelMplus12-Regular;
  src: url('../font/PixelMplus12-Regular.ttf') format("truetype");
}

body {
	font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS P Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,verdana,arial,clean,sans-serif;
	opacity: 0;
}

#top #contents_wrapper {
	width: 986px;
	margin-bottom: 0px;
}
/*------------------ contents ------------------*/
h1 {
	width: 469px;
	height: 195px;
	background: url('../img/logo.png') top center no-repeat;
	position: relative;
	top: 5px;
}
p.txt01 {
	width: 386px;
	height: 42px;
  /*background: url('../img/release.png') top center no-repeat;*/
  background: url('../img/catch-copy.png') top center no-repeat;
	position: relative;
	top: -23px;
}
#top .top_movie {
	width: 384px;
	height: 218px;
	background: url('../img/top_movie.png') top center no-repeat;
	position: relative;
	top: -20px;
}
.movie_section {
	position: absolute;
	display: block;
	width: 384px;
	height: 218px;
	top: 0px;
	left: 0px;
}
.movie_section a {
	position: absolute;
	display: block;
	width: 384px;
	height: 218px;
}

.movie_section .btn_movie_play {
	position: absolute;
	display: block;
	opacity: 0;
	z-index: 20;
	background: url(../img/top_movie_on.png) no-repeat center center;
	width: 378px;
	height: 212px;
}
.movie_object {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 380px;
	height: 214px;
	z-index: 10;
}

.cross_review {
  position: absolute;
  top: 515px;
  left: 0;
  width: 171px;
  height: 140px;
  overflow: hidden;
  white-space:nowrap;
  text-indent: 110%;
  background: url(../img/banner_review.png) 0 0 no-repeat;
  z-index: 500;
}
.cross_review a {
  display: block;
  width: 171px;
  height: 140px;
  opacity: 0;
  background: url(../img/banner_review.png) 0 bottom no-repeat;
}
.cross_review a:hover {
  opacity: 1;
}

/*------------------ chara_area ------------------*/
#chara_area {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 11;
}
#chara_area li {
	position: absolute;
	width: 124px;
	height: 124px;
	cursor: pointer;
    border-radius:75px;
}
.serif_area {
	width: 472px;
	height: 72px;
	background: url('../img/serif_bg.png') no-repeat;
	display: none;
	position: absolute;
	z-index: 20;
	left: -210px;
}
.serif_txt {
	width: 452px;
	position: absolute;
	left: -200px;
	opacity: 1;
	color: #fff;
	font-size: 13px;
	display: none;
	line-height: 1.4em;
	z-index: 50;
  font-family: PixelMplus12-Regular;
}
.serif_txt span {opacity: 0;}
.icon {
	position: absolute;
}
.icon .imgicon {
	cursor: pointer;
	position: relative;
}
.icon .shadow {
	position: absolute;
}
#icon01 .shadow {top: 36px;left: 14px;}
#icon02 .shadow {top: 42px;left: 11px;}
#icon03 .shadow {top: 43px;left: 9px;}
#icon04 .shadow {top: 56px;left: 11px;}
#icon05 .shadow {top: 39px;left:  6px;}
#icon06 .shadow {top: 39px;left:  6px;}
#icon07 .shadow {top: 50px;left: 11px;}
#icon08 .shadow {top: 52px;left: 10px;}
#icon09 .shadow {top: 44px;left:  6px;}
#icon10 .shadow {top: 48px;left: 10px;}
#icon11 .shadow {top: 50px;left:  4px;}
#icon13 .shadow {top: 47px;left:  18px;}
#icon14 .shadow {top: 46px;left:  13px;}
#icon15 .shadow {top: 44px;left:  24px;}
#icon16 .shadow {top: 43px;left:  26px;}

#icon01 .serif_area {top: -70px;left:-100px;}
#icon01 .serif_txt  {top: -62px;left:-90px;}
#icon02 .serif_area {top: -70px;}
#icon02 .serif_txt  {top: -62px;}
#icon03 .serif_area {top: -70px;}
#icon03 .serif_txt  {top: -62px;}
#icon04 .serif_area {top: -70px;}
#icon04 .serif_txt  {top: -62px;}
#icon05 .serif_area {top: -70px;}
#icon05 .serif_txt  {top: -62px;}
#icon06 .serif_area {top: -70px;}
#icon06 .serif_txt  {top: -62px;}
#icon07 .serif_area {top: -70px;left:-400px;}
#icon07 .serif_txt  {top: -62px;left:-390px;}
#icon08 .serif_area {top:  80px;}
#icon08 .serif_txt  {top:  88px;}
#icon09 .serif_area {top: -70px;left:0px;}
#icon09 .serif_txt  {top: -62px;left:10px;}
#icon10 .serif_area {top: -70px;}
#icon10 .serif_txt  {top: -62px;}
#icon11 .serif_area {top: -70px;}
#icon11 .serif_txt  {top: -62px;}
#icon12 .serif_area {top: -80px;}
#icon12 .serif_txt  {top: -72px;}
#icon13 .serif_area {top: -60px;}
#icon13 .serif_txt  {top: -52px;}
#icon14 .serif_area {top: -60px; left: -200px;}
#icon14 .serif_txt  {top: -52px; left: -190px;}
#icon15 .serif_area {top: -70px; left: -180px;}
#icon15 .serif_txt  {top: -62px; left: -170px;}
#icon16 .serif_area {top: -70px; left: -380px;}
#icon16 .serif_txt  {top: -62px; left: -370px;}

#icon01 {top: 660px;left: 5px;}
#icon02 {top: 380px;left: 405px;}
#icon03 {top: 522px;left: 535px;}
#icon04 {top: 660px;left: 810px;}
#icon05 {top: 678px;left: 592px;}
#icon06 {top: 679px;left: 551px;}
#icon07 {top: 830px;left: 995px;}
#icon08 {top: 127px;left: 466px;}
#icon09 {top: 913px;left: -78px;}
#icon10 {top: 200px;left: 728px;}
#icon11 {top: 612px;left: 445px;}
#icon12 {top: 760px;left: 250px;}
#icon13 {top: 220px;left: 635px;}
#icon14 {top: 420px;left: 460px;}
#icon15 {top: 650px;left: 240px;}
#icon16 {top: 730px;left: 1010px;}

#layer {
	width: 100%;
	height: 1437px;/*top.htmlの高さを入れる*/
	position: fixed;
	display: none;
	z-index: 1000;
	cursor: pointer;
}

.bottom_area {
	position: relative;
	margin-top: 270px;
	left: 0px;
  /*full*/
	height: 300px;
  /*splash*/
  height: 225px;
}

.info_twitter {
  display: block;
  width: 981px;
  height: 98px;
  background: url(../img/banner_Information.png) 0 0 no-repeat;
}
.info_twitter a {
  display: block;
  width: 981px;
  height: 98px;
  background: url(../img/banner_Information.png) 0 bottom no-repeat;
  overflow: hidden;
  text-indent: -120%;
  opacity: 0;
}
.info_twitter a:hover {
  opacity: 1;
}

.info_spec {
  display: block;
  width: 981px;
  height: 98px;
  background: url(../img/banner_moreinfo.png) 0 0 no-repeat;
}
.info_spec a {
  display: block;
  width: 981px;
  height: 98px;
  background: url(../img/banner_moreinfo.png) 0 bottom no-repeat;
  overflow: hidden;
  text-indent: -120%;
  opacity: 0;
}
.info_spec a:hover {
  opacity: 1;
}

.bnr_news01 {
  display: block;
  width: 981px;
  height: 98px;
  margin: 0 0 10px;
  background: url(../img/banner_news01.png) 0 0 no-repeat;
}
.bnr_news01 a {
  display: block;
  width: 981px;
  height: 98px;
  background: url(../img/banner_news01.png) 0 bottom no-repeat;
  overflow: hidden;
  text-indent: -120%;
  opacity: 0;
}

.bnr_news02 {
  display: block;
  width: 981px;
  height: 98px;
  margin: 0 0 10px;
  background: url(../img/banner_news02.png) 0 0 no-repeat;
}
.bnr_news02 a {
  display: block;
  width: 981px;
  height: 98px;
  background: url(../img/banner_news02.png) 0 bottom no-repeat;
  overflow: hidden;
  text-indent: -120%;
  opacity: 0;
}

.bnr_news01.new:after {
  content: url(../img/new.png);
  width: 42px;
  height: 18px;
  position: absolute;
  z-index: 1000;
  top:  98px;
  left: -12px;
}
.bnr_news02.new:after {
  content: url(../img/new.png);
  width: 42px;
  height: 18px;
  position: absolute;
  z-index: 1000;
  top:  -10px;
  left: -12px;
}
.bnr_news03 {
  display: block;
  width: 981px;
  height: 98px;
  margin: 0 0 10px;
  background: url(../img/banner_news03.png) 0 0 no-repeat;
}
.bnr_news03 a {
  display: block;
  width: 981px;
  height: 98px;
  background: url(../img/banner_news03.png) 0 bottom no-repeat;
  overflow: hidden;
  text-indent: -120%;
  opacity: 0;
}

.bnr_news03.new:after {
  content: url(../img/new.png);
  width: 42px;
  height: 18px;
  position: absolute;
  z-index: 1000;
  top:  -10px;
  left: -12px;
}
.bnr_news04 {
  display: block;
  width: 981px;
  height: 98px;
  margin: 0 0 10px;
  background: url(../img/banner_news04.png) 0 0 no-repeat;
}
.bnr_news04 a {
  display: block;
  width: 981px;
  height: 98px;
  background: url(../img/banner_news04.png) 0 bottom no-repeat;
  overflow: hidden;
  text-indent: -120%;
  opacity: 0;
}

.bnr_news04.new:after {
  content: url(../img/new.png);
  width: 42px;
  height: 18px;
  position: absolute;
  z-index: 1000;
  top:  -10px;
  left: -12px;
}

.bnr_le {
  display: block;
  width: 981px;
  height: 98px;
  margin: 0 0 10px;
  background: url(../img/banner_limited_edition.png) 0 0 no-repeat;
}
.bnr_le a {
  display: block;
  width: 981px;
  height: 98px;
  background: url(../img/banner_limited_edition.png) 0 bottom no-repeat;
  overflow: hidden;
  text-indent: -120%;
  opacity: 0;
}

.bnr_le.new:after {
  content: url(../img/new.png);
  width: 42px;
  height: 18px;
  position: absolute;
  z-index: 1000;
  top:  -10px;
  left: -12px;
}
.bnr_news01 a:hover,
.bnr_news02 a:hover,
.bnr_news03 a:hover,
.bnr_news04 a:hover,
.bnr_le a:hover {
  opacity: 1;
}

/*------------------ news ------------------*/
#news {
	width: 333px;
	height: 246px;
	position: absolute;
	top: 219px;
	left: -15px;
	z-index: 10;
}
.news_frame {
	width: 333px;
	height: 324px;
	background: url('../img/news_flame.png') top center no-repeat;	
	position: relative;
}
.news_contents {
	width: 240px;
	height: 166px;
	position: absolute;
	top: 115px;
	left: 44px;
	overflow-y: scroll;
	overflow-x: hidden;
}
.news_contents p {
	margin-bottom: 16px;
}
.line_space {
  display: block;
  height: 5px;
  margin: 0;
  padding: 0;
}
.scroll_border {
	width: 13px;
	height: 165px;
	border: 2px solid #765a33;
	position: absolute;
	top: 114px;
	left: 267px;
}
.news_repeat {
	width: 50px;
	height: 340px;
	background: url('../img/news_repeat.png') top center repeat-y;
	position: absolute;
	top: 324px;
	left: 140px;
}
/*-------------------- banner_area --------------------*/
#banner_area {
	position: absolute;
	top: 221px;
	left: 332px;
}
#banner_area ul {
  position: relative;
}
#banner_area li {
  float: left;
  margin-bottom: 11px;
}
#banner_area li.summary a {
	display: block;
	width: 321px;
	height: 98px;
  background: url('../img/banner_about.png') top center no-repeat;
}
#banner_area li.difference a {
	display: block;
	width: 321px;
	height: 98px;
	background: url('../img/banner_difference.png') top center no-repeat;
}

#banner_area li.collabo a {
	display: block;
	width: 653px;
	height: 98px;
	background: url('../img/banner_collabo_result.png') top center no-repeat;
}

#banner_area li.privilege a {
	display: block;
	width: 321px;
	height: 98px;
  background: url('../img/banner_privilege.png') top center no-repeat;
}
#banner_area li.music a {
	display: block;
	width: 321px;
	height: 98px;
	background: url('../img/banner_music.png') top center no-repeat;
  margin-bottom: 11px;
}

#banner_area li.falcom_collabo a {
  display: block;
  width: 321px;
  height: 98px;
  background: url('../img/banner_collabo_falcom.png') top center no-repeat;
}
#banner_area li.playable_version a {
  display: block;
  width: 653px;
  height: 98px;
  background: url('../img/banner_playable_version.png') top center no-repeat;
}
#banner_area li.collabo_data a {
  display: block;
  width: 321px;
  height: 98px;
  background: url('../img/banner_collabo_data.png') top center no-repeat;
}
#banner_area li.contest a {
  display: block;
  width: 321px;
  height: 98px;
  background: url('../img/banner_contest.png') top center no-repeat;
}
#banner_area li.webcomic a {
  display: block;
  width: 321px;
  height: 98px;
  background: url('../img/banner_webcomic.png') top center no-repeat;
  cursor: pointer;
}
#banner_area li.sale a {
  display: block;
  width: 321px;
  height: 98px;
  background: url('../img/banner_sale.png') top center no-repeat;
}
#banner_area li.mononopu a {
  display: block;
  width: 321px;
  height: 98px;
  background: url('../img/banner_collabo_mononopu.png') top center no-repeat;
}
#banner_area li.theme_avatar a {
  display: block;
  width: 321px;
  height: 98px;
  background: url('../img/banner_theme_avatar.png') top center no-repeat;
}
#banner_area li.update a {
  display: block;
  width: 653px;
  height: 98px;
  background: url('../img/banner_update01.png') top center no-repeat;
}
#banner_area li.contest_result a {
  display: block;
  width: 321px;
  height: 98px;
  background: url('../img/banner_contest_result.png') top center no-repeat;
}
#banner_area .half li:nth-child(2n) {
  float: left;
  margin-left: 11px;
}
#banner_area li a:hover {
	display: block;
	background-position: 0 100%;
}
/*
#banner_area li.retweet div {
	position: absolute;
	width: 321px;
	height: 98px;
	background: url('../img/banner_rt_campaign.png') top center no-repeat;
	-webkit-animation: banneranime 2s infinite;
	animation: banneranime 2s infinite;
}

#banner_area li.privilege div {
	position: absolute;
	width: 321px;
	height: 98px;
	background: url('../img/banner_privilege_meimetu.png') top center no-repeat;
	-webkit-animation: banneranime 2s infinite;
	animation: banneranime 2s infinite;*/
}
@-webkit-keyframes banneranime {
	  0%{ opacity:0; }
	 50%{ opacity:1; }
	100%{ opacity:0; }
}
@keyframes banneranime {
	  0%{ opacity:0; }
	 50%{ opacity:1; }
	100%{ opacity:0; }
}
#banner_area li span.new {
  background: url(../img/new.png) no-repeat;
  width: 42px;
  height: 18px;
  position: absolute;
  z-index: 1000;
}
#banner_area .wide li:nth-child(1) span.new {
  top:  -10px;
  left: -12px;
}
#banner_area .wide li:nth-child(2) span.new {
  top:   98px;
  left: -12px;
}


#banner_area .half li:nth-child(1) span.new {
  top:   -9px;
  left: -12px;
}
#banner_area .half li:nth-child(2) span.new {
  top:   -9px;
  left: 320px;
}
#banner_area .half li:nth-child(3) span.new {
  top:   99px;
  left: -12px;
}
#banner_area .half li:nth-child(4) span.new {
  top:   99px;
  left: 320px;
}
#banner_area .half li:nth-child(5) span.new {
  top:  208px;
  left: -12px;
}

/* =============================================================================
フロートさせたコンテンツの高さを親要素が認識しないバグを修正　Clearfix
========================================================================== */


/* For modern browsers */
.cf:before, .cf:after {
  content: "";
  display: table;
}

.cf:after { clear: both; }

/* For IE 6/7 (trigger hasLayout) */
.cf { zoom: 1; }

* html .cf { height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}