@charset "UTF-8";
/* SASS Document */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  margin: 0 auto;
  background-color: #000;
}

/* ------------------------------------------
 Utility
------------------------------------------ */
.fontMincho {
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.fontBold {
  font-weight: bold;
}

a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #999;
  text-decoration: underline;
}

a.overwhite {
  background-color: #ffffff;
  display: block;
}

a.overAlpha {
}

a.overwhite:hover img,
a.overAlpha:hover img {
  cursor: pointer;
  filter: alpha(opacity=60);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=60)";
  /* ie 8 */
  -moz-opacity: 0.6;
  /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.6;
  /* Safari 1.x */
  opacity: 0.6;
  zoom: 1;
}

/* ------------------------------------------
 margin,bottom
------------------------------------------ */
.mt0 {
  margin-top: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.pt0 {
  padding-top: 0px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}

.mt1em {
  margin-top: 1em !important;
}

.mb1em {
  margin-bottom: 1em !important;
}

.pt1em {
  padding-top: 1em !important;
}

.pb1em {
  padding-bottom: 1em !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.mt2em {
  margin-top: 2em !important;
}

.mb2em {
  margin-bottom: 2em !important;
}

.pt2em {
  padding-top: 2em !important;
}

.pb2em {
  padding-bottom: 2em !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.mt3em {
  margin-top: 3em !important;
}

.mb3em {
  margin-bottom: 3em !important;
}

.pt3em {
  padding-top: 3em !important;
}

.pb3em {
  padding-bottom: 3em !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.mt4em {
  margin-top: 4em !important;
}

.mb4em {
  margin-bottom: 4em !important;
}

.pt4em {
  padding-top: 4em !important;
}

.pb4em {
  padding-bottom: 4em !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.mt5em {
  margin-top: 5em !important;
}

.mb5em {
  margin-bottom: 5em !important;
}

.pt5em {
  padding-top: 5em !important;
}

.pb5em {
  padding-bottom: 5em !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.mt6em {
  margin-top: 6em !important;
}

.mb6em {
  margin-bottom: 6em !important;
}

.pt6em {
  padding-top: 6em !important;
}

.pb6em {
  padding-bottom: 6em !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.pt60 {
  padding-top: 60px !important;
}

.pb60 {
  padding-bottom: 60px !important;
}

.mt7em {
  margin-top: 7em !important;
}

.mb7em {
  margin-bottom: 7em !important;
}

.pt7em {
  padding-top: 7em !important;
}

.pb7em {
  padding-bottom: 7em !important;
}

/* ------------------------------------------
 構造
------------------------------------------ */
#container {
  width: 100%;
  background-color: #000;
}

#block2, #block3, #block4 {
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

/* ------------------------------------------
 メインイメージ
------------------------------------------ */
header {
  width: 100%;
  height: 900px;
#  background: url("../images/key_visual2.png") no-repeat;
#  background: url("../images/key_visual_0511.png") no-repeat;
#  background: url("../images/PC_view_20180814.jpg?v=1") no-repeat;
#  background: url("../images/PC_view_20181220.jpg?v=1") no-repeat;
#  background: url("../images/PC_view_20191126.png?v=1") no-repeat;
# background: url("../images/PC_view_201120.jpg?v=1") no-repeat;
  background: url("../images/PC_view_211118.png?v=1") no-repeat;
  background-position: 50% 0%;
}

/* ------------------------------------------
 ナビゲーション
------------------------------------------ */
nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: url("../images/navi_bg.png") repeat-x;
  z-index: 1000;
}
nav ul {
  width: 990px;
  margin: 0 auto;
  padding: 0;
}
nav ul li {
  float: left;
  height: 40px;
  background: url("../images/navi.png") no-repeat;
  /* hover */
}
nav ul li.navi0 {
  width: 15px;
  background-position: 0 0;
}
nav ul li.navi1 {
  width: 76px;
  background-position: -15px 0;
}
nav ul li.navi2 {
  width: 100px;
  background-position: -91px 0;
}
nav ul li.navi3 {
  width: 143px;
  background-position: -191px 0;
}
nav ul li.navi4 {
  width: 153px;
  background-position: -334px 0;
}
nav ul li.navi5 {
  width: 141px;
  background-position: -487px 0;
}
nav ul li.navi6 {
  width: 202px;
  background-position: -628px 0;
}
nav ul li.navi7 {
  width: 29px;
  background-position: -830px 0;
}
nav ul li.navi8 {
  width: 16px;
  background-position: -859px 0;
}
nav ul li.navi9 {
  width: 29px;
  background-position: -875px 0;
}
nav ul li.navi10 {
  width: 16px;
  background-position: -904px 0;
}
nav ul li.navi11 {
  width: 29px;
  background-position: -920px 0;
}
nav ul li.navi12 {
  width: 29px;
  background-position: -949px 0;
}
nav ul li.navi0:hover {
  background-position: 0 -40px;
}
nav ul li.navi1:hover {
  background-position: -15px -40px;
}
nav ul li.navi2:hover {
  background-position: -91px -40px;
}
nav ul li.navi3:hover {
  background-position: -191px -40px;
}
nav ul li.navi4:hover {
  background-position: -334px -40px;
}
nav ul li.navi5:hover {
  background-position: -487px -40px;
}
nav ul li.navi6:hover {
  background-position: -628px -40px;
}
nav ul li.navi7:hover {
  background-position: -830px -40px;
}
nav ul li.navi8:hover {
  background-position: -859px -40px;
}
nav ul li.navi9:hover {
  background-position: -875px -40px;
}
nav ul li.navi10:hover {
  background-position: -904px -40px;
}
nav ul li.navi11:hover {
  background-position: -920px -40px;
}
nav ul li.navi12:hover {
  background-position: -949px -40px;
}
nav ul li a {
  display: block;
  height: 40px;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

/* ------------------------------------------
 ヘッダー
------------------------------------------ */
.head_wrap {
  width: 1200px;
  height: 675px;
  margin: 0 auto;
  position: relative;
}

.head_wrap .head_pv {
  position: absolute;
  left: 20px;
  top: 430px;
  background-color: #000;
}

.head_wrap .head_info {
  position: relative;
  top: 720px;
}

.head_wrap .head_info .info_icon {
  position: absolute;
  left: 28px;
  top: 24px;
}
.head_wrap .head_info .info_bt_i {
  position: absolute;
  left: 540px;
  top: 100px;
  border-radius: 10px;
}
.head_wrap .head_info .info_bt_a {
  position: absolute;
  left: 728px;
  top: 100px;
  border-radius: 5px;
}
.head_wrap .head_info .info_bt_t {
  position: absolute;
  left: 570px;
  top: 26px;
}

.head_wrap .share {
    position: relative;
    top: 10px;
    left: -185px;
    width: 330px;
}

.head_wrap .share #share_tw {
#	float: left;
	margin-right: 10px;
}

/* ------------------------------------------
 事前登録受付中
------------------------------------------ */
#block0 {
  width: 1200px;
  margin: 0 auto;
  background-position: 50%;
  position: relative;
  margin-top: -80px;
  margin-bottom: 64px;
}

#block0 .info_wrap {
  width: 950px;
  margin: 0 auto;
  position: relative;
  margin-top: 60px;
}

.beta_test_btn {
  text-align: center;
  height: 110px;
  margin-top: 30px;
}

#block0 .info_wrap .info_txt {
  width: 950px;
  height: 365px;
  position: relative;
  background: url("../images/bg_news.png") no-repeat;
  background-size: 950px 365px;
}

#block0 .info_wrap .info_tw {
  width: 315px;
  height: 365px;
  margin-left: auto;
  position: relative;
#  background: url("../images/bg_twitter.png") no-repeat;
}
/* お知らせタイトル画像 */
#block0 .info_wrap .info_txt .info_txt_title {
  text-align: center;
  padding-top: 14px;
}
/* お知らせキャラ画像 */
#block0 .info_wrap .info_txt .info_txt_chara {
  position: absolute;
  left: 300px;
  top: -20px;
}
/* お知らせキャラ画像 */
#block0 .info_wrap .info_txt .info_txt_chara2 {
  position: absolute;
  left: 570px;
  top: -20px;
}
/* お知らせ表示エリア */
#block0 .info_wrap .info_txt .info_txt_area {
  position: absolute;
  left: 30px;
  top: 70px;
  overflow-x: hidden;
  height: 270px;
  width: 857px;
  font-size: 1.2em;
}

#block0 .info_wrap .info_txt .info_txt_area a{
	text-decoration: underline;
}

/* ツイッタータイトル画像 */
#block0 .info_wrap .info_tw .info_tw_title {
  position: absolute;
  left: 50px;
  top: 16px;
}
/* ツイッターキャラ画像 */
#block0 .info_wrap .info_tw .info_tw_chara {
  position: absolute;
  left: 200px;
  top: -20px;
}
/* ツイッター表示エリア */
#block0 .info_wrap .info_tw .info_tw_area {
  position: absolute;
  left: 18px;
  top: 64px;
}
/* ツイッター表示サイズ */
/*
#block0 .info_wrap .info_tw iframe {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
}
*/
#block0 .info_wrap .info_tw iframe {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}
#twitter-widget-0 {
  width: 100% !important;
}


/* ------------------------------------------
 予約TOP10とニュース
------------------------------------------ */
#block1 {
  width: 1200px;
  height: 88px;
  margin: 0 auto;
  background-position: 50%;
}
#block1 .game_wrap {
  width: 950px;
  margin: 0 auto;
  position: relative;
}
#block1 .game_wrap .game_boad {
  position: absolute;
  top: 20px;
}
#block1 .game_wrap .game_title {
  position: absolute;
  left: 428px;
  top: 38px;
}
#block1 .game_wrap .game_chara {
  position: absolute;
  left: 290px;
  top: -6px;
}
#block1 .twitter {
  width: 990px;
  margin: 0 auto;
  position: relative;
}
#block1 .twitter .twitter-inner {
  width: 620px;
  position: absolute;
  top: 490px;
  left: 185px;
}
#block1 .twitter .twitter-inner iframe {
  width: 620px !important;
  min-width: 620px !important;
  max-width: 620px !important;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
}

/* ------------------------------------------
 極・魔法乱舞
------------------------------------------ */
#block2 {
  width: 1200px;
  height: 1237px;
  background: url("../images/game_info01.png") no-repeat;
  background-position: 50%;
  margin: 0 auto;

}

/* ------------------------------------------
 ゲームシステム
------------------------------------------ */
#block3 {
  width: 1200px;
  height: 1237px;
  background: url("../images/game_info02.png") no-repeat;
  background-position: 50%;
  margin: 0 auto;
}

/* ------------------------------------------
 キャラクター
------------------------------------------ */
#block4 {
  width: 1200px;
  height: 1237px;
  background: url("../images/game_info03.png") no-repeat;
  background-position: 50%;
  margin: 0 auto;
}

/* ------------------------------------------
 スペック
------------------------------------------ */
footer {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 64px;
}


footer .image{
  position: relative;
  z-index: 1;
}

footer .color-box{
  display: block;
  height: 100px;
  background-color: #290502;
  height: 56px;
  margin-top: -54px;
  position: relative;
}
/* ------------------------------------------
 ページトップへ戻る
------------------------------------------ */
#go_top {
  position: fixed;
  bottom: 70px;
  right: 50px;
  text-align: right;
}

a.button {
  font-size: 3.2em;
  font-weight: bold;
  padding: 10px 30px;
  color: #fff;
  border-style: none;
  box-shadow: 2px 2px 3px 1px #666;
  -moz-box-shadow: 2px 2px 3px 1px #666;
  -webkit-box-shadow: 2px 2px 3px 1px #666;
  text-shadow: 1px 1px 2px #000;
  background: -moz-linear-gradient(bottom, #63a437, #80b75f);
  background: -webkit-gradient(linear, left bottom, left top, from(#63a437), to(#80b75f));
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

a.button:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* ------------------------------------------
 キャプチャ
------------------------------------------ */
.cap_wrap {
	text-align: center;
	margin: 10px;
}

.cap_wrap #title {
	height: 70px;
    display: block;
	text-align:center;

}

/* ------------------------------------------
 完了ページ
------------------------------------------ */
#block99 {
  width: 100%;
  height: 450px;
  margin: 0 auto;
  text-align :center;
}

#block99 .info_wrap {
    width: 60%;
    margin: 30px auto;
    border: #FFF solid 2px;
    border-radius: 10px;
    padding: 20px 0;
}

#block99 .info_wrap .text1 {
  color: #FFF;
  font-size: 2.8em;
}

#block99 .info_wrap .text2 {
  color: #FFF;
  font-size: 1.8em;
}

#block99 .btn {
	background: url("../images/btn_base.png") no-repeat;
	background-position: 50%;
	display: block;
	height: 64px;
	width: 224px;
	margin: 0 auto;
	font-size: 1.8em;
	line-height: 70px;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
}

#sns_wrap {
}


/* ------------------------------------------
 ふわふわアニメーション
------------------------------------------ */
.animation1 {
	-webkit-animation-name:fuwafuwa;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;

	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}

@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}

/* ------------------------------------------
 ボタン目立たすアニメーション
------------------------------------------ */
/*
.animation2 {
	-webkit-animation-name:hikari;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;

	-moz-animation-name:hikari;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
*/

@-webkit-keyframes hikari {
	from
	{
		-webkit-box-shadow: 0px 0px 0px rgba(55, 55, 55, 0.5), 0px 0px 200px rgba(55, 55, 55, 0.5) inset;
		border: 1px solid rgba(55, 55, 55, 1);
	}
	50%
	{
		-webkit-box-shadow: 0px 0px 25px rgba(255, 255, 255, 1.0), 0px 0px 200px rgba(255, 255, 255, 1.0) inset;
		border: 1px solid rgba(255, 255, 255, 1);
	}
	to
	{
		-webkit-box-shadow: 0px 0px 0px rgba(55, 55, 55, 0.5), 0px 0px 200px rgba(55, 55, 55, 0.5) inset;
		border: 1px solid rgba(55, 55, 55, 1);
	}
}
@-moz-keyframes hikari {
	from
	{
		-moz-box-shadow: 0px 0px 0px rgba(55, 55, 55, 0.5), 0px 0px 200px rgba(55, 55, 55, 0.5) inset;
		box-shadow: 0px 0px 0px rgba(55, 55, 55, 0.5), 0px 0px 200px rgba(55, 55, 55, 0.5) inset;
		border: 1px solid rgba(55, 55, 55, 1);
	}
	50%
	{
		-moz-box-shadow: 0px 0px 25px rgba(255, 255, 255, 1.0), 0px 0px 200px rgba(255, 255, 255, 1.0) inset;
		box-shadow: 0px 0px 25px rgba(255, 255, 255, 1.0), 0px 0px 200px rgba(255, 255, 255, 1.0) inset;
		border: 1px solid rgba(255, 255, 255, 1);
	}
	to
	{
		-moz-box-shadow: 0px 0px 0px rgba(55, 55, 55, 0.5), 0px 0px 200px rgba(55, 55, 55, 0.5) inset;
		box-shadow: 0px 0px 0px rgba(55, 55, 55, 0.5), 0px 0px 200px rgba(55, 55, 55, 0.5) inset;
		border: 1px solid rgba(55, 55, 55, 1);
	}
}

.load_window {
	opacity: 1;
	display: block;
#	display: none;
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 1000;
}

.load_movie_bg {
	position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
}

.load_movie {
left: 50%;
    top: 50%;
    position: fixed;
    width: 700px;
    margin-left: -350px;
    height: 394px;
    margin-top: -197px;
    border: solid 3px #ccc;
    background: #000;
	z-index: 10000;
}