@charset "UTF-8";

/******************************/
/*LP/ティーザーページ部分*/
/******************************/


/*共通要素*/

.lp_title {
	margin:0 auto 30px auto;
	padding:0;
}

.float_left {
	float:left;
}

.float_right {
	float:right;
}

.float_center {
	width:100%;
	margin:0 auto;
}

.lp_contents_container {
	width:100%;
	text-align:center;
	padding:0 0 60px 0;
	margin:0;
}

.lp_contents_wrap {
	width:960px;
	padding:0;
	margin:0 auto;
	text-align:left;
	position:relative;
}


/******************************/
/*ランディングページ部分*/
/******************************/


/*背景*/

.lp_body {
	background: url("../images/common/body_backimg.gif");
	text-align:center;
	height:auto;
}


/*トップ部分*/

#lp_top_container {
	width:100%;
	height:800px;
	background: #4e5a8d url("../images/lp/lp_top_container_backimg.jpg") top center no-repeat;
	text-align:center;
	position:relative;
}


#lp_top_contents_wrap {
	width:960px;
	height:790px;
	text-align:center;
	margin:0 auto;
	position:relative;
}

#lp_top_logo {
	width:960px;
	height:800px;
    padding: 0;
    margin: 0;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
    overflow: hidden;
}

#lp_top_supported_language {
	width:960px;
	height:800px;
    padding: 0;
    margin: 0;
	position:absolute;
	top:0;
	left:0;
	z-index:50;
    overflow: hidden;
}

#lp_top_chara {
	width:1000px;
	height: 1000px;
    background: url("../images/lp/lp_top_chara_backimg.png") 0 0 no-repeat;
	position:absolute;
	top:155px;
	left:-510px;
	z-index:75;
}

/*動画ボタン*/
#lp_top_movie_btn_wrap {
	width:105px;
	height:105px;
	position:absolute;
	top:375px;
	left:428px;
	z-index:100;
	text-align:center;
}

/*トップボタン*/
#lp_top_btn_wrap {
	width:513px;
	height:51px;
	position:absolute;
	top:533px;
	left:224px;
	z-index:100;
	text-align:center;
}


.lp_top_btn1 {
	float:left;
}

.lp_top_btn2 {
	float:right;
}

.lp_top_btn3 {
	margin:0 auto;
}


/*シェアボタン部分*/

#lp_share_btn_container {
	width:400px;
	height:20px;
	text-align:center;
	margin:0;
	padding:0;
	position:absolute;
	top:700px;
	left:280px;
	z-index:200;
}

#share_btn_wrap {
	width:373px;
	height:20px;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}

#share_btn_wrap li {
	width:373px;
	height:20px;
    padding: 0;
    margin: 0;
    display: inline;
    list-style: none;
}


/*バナー部分*/

.lp_bnr_container {
	width:100%;
	text-align:center;
}

.lp_bnr_wrap {
	width:960px;
	text-align:left;
	margin:0 auto;
	overflow:hidden;
	zoom:1;
}



/*ストーリー部分*/


#lp_story_container {
	width:100%;
	height:495px;
	background: #4e5a8d url("../images/lp/lp_story_container_backimg.jpg") top center no-repeat;
	text-align:center;
	position:relative;
}

#lp_story_cover { 
	width: 100%;
	height:495px;
	position:absolute;
	top:0;
	left:0;
	background:url("../images/lp/lp_story_cover.png") top center no-repeat;
    z-index: 50;
}

/*トップ部分　火の粉用*/

#particles-js{ 
	width: 100%;
	height:495px;
	position:absolute;
	top:0;
	left:0;
    z-index: 0;
}

/*ストーリーコンテンツ部分*/

#lp_story_wrap {
	width:960px;
	height:495px;
	text-align:center;
	margin:0 auto;
	position:relative;
}

#lp_story_text { 
	width: 960px;
	height:495px;
	position:absolute;
	top:0;
	left:0;
    z-index: 100;
}

#lp_story_weapon { 
	width: 580px;
	height:600px;
	position:absolute;
	top:-102px;
	left:600px;
    z-index: 75;
}


/*キャラクター紹介部分*/


.lp_chara_info_line {
    border-top: 4px solid #ddc893;
    padding: 0;
    margin: 0;

}

/*男キャラ用背景指定*/
#lp_chara_info_m_container {
	width:100%;
	height:250px;
	text-align:center;
	padding:0;
	margin:0;
    overflow: hidden;
    position: relative;
}

#lp_chara_info_m_wrap {
	width:960px;
	height:250px;
	text-align:left;
    padding: 0;
	margin:0 auto;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#lp_chara_info_m_container .box-bg {
	background:url("../images/lp/lp_chara_info_m_container_backimg_out.gif") center center / cover no-repeat;
    width: 100%;
    height: 250px;
    position: relative;
    z-index: 0;
    transition: .3s ease-in-out;
}

#lp_chara_info_m_container:hover .box-bg{
    background:url("../images/lp/lp_chara_info_m_container_backimg_in.gif") center center / cover no-repeat;
    transform: scale(1.1);
}

#lp_chara_info_m_container .center_icon {
	background:url("../images/lp/lp_chara_info_knight_icon.png") center center / cover no-repeat;
    width: 300px;
    height: 300px;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*キャラ表示*/
#lp_chara_info_m_container .chara_m {
	background:url("../images/lp/lp_chara_info_chara_m.png") center center / cover no-repeat;
    width: 300px;
    height: 350px;
    position: absolute;
    z-index: 0;
    top: 10px;
    left: 696px;
    opacity: 0;
    transition: .3s ease-in-out;
}

#lp_chara_info_m_container:hover .chara_m{
	background:url("../images/lp/lp_chara_info_chara_m.png") center center / cover no-repeat;
    transform: scale(1.05);
    opacity: 1;
}

/*ボタン表示*/

#lp_chara_info_m_container .lp_chara_info_btn {
    width: 210px;
    height: 44px;
    position: absolute;
    z-index: 0;
    top: 160px;
    left: 375px;
    opacity: 0;
    transition: .3s ease-in-out;
}

#lp_chara_info_m_container:hover .lp_chara_info_btn {
    opacity: 1;
}

/*女キャラ用背景指定*/
#lp_chara_info_w_container {
	width:100%;
	height:250px;
	text-align:center;
	padding:0;
	margin:0;
    overflow: hidden;
    position: relative;
}

#lp_chara_info_w_wrap {
	width:960px;
	height:250px;
	text-align:left;
    padding: 0;
	margin:0 auto;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#lp_chara_info_w_container .box-bg {
	background:url("../images/lp/lp_chara_info_w_container_backimg_out.gif") center center / cover no-repeat;
    width: 100%;
    height: 250px;
    position: relative;
    z-index: 0;
    transition: .3s ease-in-out;
}

#lp_chara_info_w_container:hover .box-bg{
    background:url("../images/lp/lp_chara_info_w_container_backimg_in.gif") center center / cover no-repeat;
    transform: scale(1.1);
}

#lp_chara_info_w_container .center_icon {
	background:url("../images/lp/lp_chara_info_wizard_icon.png") center center / cover no-repeat;
    width: 300px;
    height: 300px;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*キャラ表示*/
#lp_chara_info_w_container .chara_w {
	background:url("../images/lp/lp_chara_info_chara_w.png") center center / cover no-repeat;
    width: 300px;
    height: 350px;
    position: absolute;
    z-index: 0;
    top: 10px;
    left: 20px;
    opacity: 0;
    transition: .3s ease-in-out;
}

#lp_chara_info_w_container:hover .chara_w{
	background:url("../images/lp/lp_chara_info_chara_w.png") center center / cover no-repeat;
    transform: scale(1.05);
    opacity: 1;
}

/*ボタン表示*/

#lp_chara_info_w_container .lp_chara_info_btn {
    width: 210px;
    height: 44px;
    position: absolute;
    z-index: 0;
    top: 160px;
    left: 375px;
    opacity: 0;
    transition: .3s ease-in-out;
}

#lp_chara_info_w_container:hover .lp_chara_info_btn {
    opacity: 1;
}

/**/



/*ゲーム紹介部分*/


/*ゲーム紹介部分　火の粉用*/

#particles-js2{ 
	width: 100%;
	height:1375px;
	position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/**/


#lp_game_introduction_title_wrap {
	width:500px;
    height:450px;
	text-align:center;
	background:url("../images/lp/lp_game_introduction_title_wrap_backimg.png") top center no-repeat;
	padding:0;
	margin:0 auto;
	position:absolute;
	top:0;
	left:230px;
    z-index:1;
}

#lp_game_introduction_title {
	width:500px;
    height:450px;
	padding:0;
	margin:0;
}

#lp_game_introduction_container {
	width:100%;
    height: 1500px;
	text-align:center;
	background:#1b1c21 url("../images/lp/lp_game_introduction_container_backimg.jpg") top center no-repeat;
	padding:0;
	margin:0;
}

#lp_game_introduction_wrap {
	width:960px;
    height: 1375px;
	text-align:center;
	padding:0;
	margin:0 auto;
	position:relative;
}

#lp_game_introduction_point_1 {
	width:960px;
	height:290px;
	padding:0;
	margin:0;
	position:absolute;
	top:205px;
	left:0;
    z-index: 50;
}

#lp_game_introduction_point_2 {
	width:960px;
	height:290px;
	padding:0;
	margin:0;
	position:absolute;
	top:516px;
	left:0;
    z-index: 50;
}

#lp_game_introduction_point_3 {
	width:960px;
	height:290px;
	padding:0;
	margin:0;
	position:absolute;
	top:826px;
	left:0;
    z-index: 50;
}

#lp_game_introduction_point_4 {
	width:960px;
	height:290px;
	padding:0;
	margin:0;
	position:absolute;
	top:1137px;
	left:0;
    z-index: 50;
}

/*ボタン部分*/

#lp_page_btn_container {
	width:100%;
	text-align:center;
	margin-bottom:50px
}

#lp_page_btn_wrap {
	width:960px;
	height:165px;
	text-align:center;
	background:url(../images/lp/lp_btn_wrap_back.png) 0 0 no-repeat;
	padding:74px 230px 0 230px;
	margin:0 auto;
	overflow:hidden;
	zoom:1;
}

.lp_page_btn_1 {
	float:left;
}

.lp_page_btn_2 {
	float:right;
}


/******************************/
/*スマホ用スタイル*/
/******************************/

.lp_sp_body{
	background: url("../images/common/body_back_img.png") ;
	text-align:center;
	height:auto;
}

/*背景*/

#lp_sp_top_container {
	width:100%;
	background:#222639 url(../images/lp/lp_sp_top.png) top center no-repeat;
	background-size:100%;
	padding-top:88%;
	padding-bottom:21%;
}

.lp_sp_top_btn_1 {
    text-align: center;
	padding:0;
	margin-bottom:3%;
}

.lp_sp_top_btn_2 {
    text-align: center;
	padding:0;
	margin-bottom:8%;
}

.lp_sp_top_btn_3 {
    text-align: center;
	padding:0;
	margin-bottom:23%;
}

.lp_sp_bottom_btn_1 {
    text-align: center;
	padding:0;
	margin-bottom:3%;
}

.lp_sp_bottom_btn_2 {
    text-align: center;
	padding:0;
	margin-bottom:13%;
}

.lp_sp_bottom_btn_3 {
    text-align: center;
	padding:0;
	margin-bottom:40px;
}


#lp_sp_share_btn_wrap {
	width:100%;
	padding:0 10%;
	margin:0;
}

#lp_sp_share_btn_wrap li {
	width:48%;
	padding:0;
	margin:0;
	list-style:none;
}

#lp_sp_movie_container {
	width:100%;
	background:#1f232f url(../images/lp/lp_sp_movie.png) top center no-repeat;
	background-size:100%;
	padding:20% 8% 72% 8%;
	margin:0;
}

#lp_sp_movie_wrap {
	width:100%;
	height:0;
  padding-top:56.25%;
  position: relative;
}

#lp_sp_movie {
	width:100%;
	height:100%;
  position: absolute;
  top: 0;
  left: 0;
}

#lp_chara_info_wrap {
	background: #1c1d24;
	padding:0;
	margin:0;
}

#lp_chara_info_1 {
	padding:0;
	margin:0;
}

#lp_chara_info_2 {
	padding:0;
	margin:0;
}

#lp_sp_h_info {
	padding:0;
	margin:0;
}

#lp_sp_contents_wrap {
	background: #000;
	padding:0;
	margin:0;
}

#lp_sp_contents_1 {
	padding:0;
	margin:0;
}

#lp_sp_contents_2 {
	padding:0;
	margin:0;
}

#lp_sp_contents_3 {
	padding:0;
	margin:0;
}

#lp_sp_contents_4 {
	padding:0;
	margin:0;
}


/*キャンペーン概要部分*/


#lp_sp_h_campaign {
	margin:10% 0 30px 0;
}

.lp_sp_bnr_wrap {
	width:100%;
}

#lp_sp_campaign_wrap {
    width: 82%;
	padding:0;
	margin:0 auto 40px auto;
}

#lp_sp_campaign_wrap .schedule_text_wrap {
    margin: 0 0 15px;
	text-align:left;
}

#lp_sp_campaign_wrap .present_text_wrap {
    margin: 0 0 15px;
	text-align:left;
}

#lp_sp_campaign_wrap .ttl1 {
	background-size:80%;
    background:url("../images/common/icon_03_01.png") no-repeat scroll left center;
	font-size:1.5em;
    font-weight: bold;
    margin: 0 0 15px;
    padding-left: 14%;
	padding-top:2%;
}

#lp_sp_campaign_wrap .ttl2 {
	background-size:80%;
    background:url("../images/common/icon_03_02.png") no-repeat scroll left center;
	font-size:1.5em;
    font-weight: bold;
    margin: 0 0 15px;
    padding-left: 12%;
	padding-top:3%;
}

#lp_sp_campaign_wrap  dt {
	font-size:1.2em;
    font-weight: bold;
}

#lp_sp_campaign_wrap  dd {
	font-size:1.1em;
}

#lp_sp_campaign_wrap  p {
	font-size:1.1em;
}

#lp_sp_footer_container {
	background-color:#292929;
	padding:20px;
}

#lp_sp_footer_container p {
	font-size:0.8em;
	color:#fff;
}


/******************************/
/*キャラクターダイアログ*/
/******************************/

#lp_dialog_chara_container {
    width: 838px;
    height: 490px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.lp_dialog_chara_m {
    width: 838px;
    height: 490px;
	background:url(../images/lp/lp_dialog_chara_m.png) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:0;
	left:0;
}

.lp_dialog_close_btn_m {
    width: 126px;
    height: 38px;
	position:absolute;
	top:383px;
	left:212px;
}

.lp_dialog_chara_w {
    width: 838px;
    height: 490px;
	background:url(../images/lp/lp_dialog_chara_w.png) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:0;
	left:0;
}

.lp_dialog_close_btn_w {
    width: 126px;
    height: 38px;
	position:absolute;
	top:383px;
	left:495px;
}

/*鳥*/

#bird_wrap1 {
    width: 250px;
    height: 250px;
	position:absolute;
	top:400px;
	left:0px;
    animation-name: slide;
    animation: loop 70s linear infinite;
}

@keyframes loop {
  0% {
    transform: translate(1500px,-100px);
    opacity: 0.8;
  }
  to {
    transform: translate(-1500px,100px);
    opacity: 0.4;
  }
}

@keyframes slide {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0px);
  }
}

.bird_1 {
    width: 12px;
    height: 12px;
	background:url(../images/lp/bird_1.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:12px;
	left:67px;
    animation: slide 10s linear infinite;
}

.bird_2 {
    width: 16px;
    height: 16px;
	background:url(../images/lp/bird_2.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:-10;
	left:45px;
    animation-name: slide;
    animation: slide 10s linear infinite;
}

.bird_3 {
    width: 15px;
    height: 15px;
	background:url(../images/lp/bird_3.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:-30px;
	left:30px;
    animation: slide 10s linear infinite;
}

.bird_4 {
    width: 15px;
    height: 15px;
	background:url(../images/lp/bird_4.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:45px;
	left:53px;
}

.bird_5 {
    width: 15px;
    height: 15px;
	background:url(../images/lp/bird_1.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:69px;
	left:76px;
}

.bird_6 {
    width: 15px;
    height: 15px;
	background:url(../images/lp/bird_1.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:10px;
	left:0px;
    animation: slide 15s linear infinite;
}

.bird_7 {
    width: 10px;
    height: 10px;
	background:url(../images/lp/bird_2.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:28px;
	left:45px;
}

.bird_8 {
    width: 15px;
    height: 15px;
	background:url(../images/lp/bird_3.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:28px;
	left:92px;
}

.bird_9 {
    width: 13px;
    height: 13px;
	background:url(../images/lp/bird_4.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:108px;
	left:68px;
}

.bird_10 {
    width: 15px;
    height: 15px;
	background:url(../images/lp/bird_1.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:106px;
	left:105px;
    animation: slide 15s linear infinite;
}

.bird_11 {
    width: 15px;
    height: 15px;
	background:url(../images/lp/bird_4.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:45px;
	left:100px;
}

.bird_12 {
    width: 15px;
    height: 15px;
	background:url(../images/lp/bird_1.gif) 50% 50% no-repeat;
	background-size:100%;
	position:absolute;
	top:69px;
	left:150px;
}

/*霧*/

#lp_top_fog {
    width: 2419px;
    height: 529px;
	position:absolute;
	top:350px;
	left:0;
    z-index: 10;
    opacity: 0.8;
    animation :infinity-scroll-right 120s infinite linear 0.5s both;
}


@keyframes infinity-scroll-right {
  from {
    transform: translateX(-3000px);
  }
  to {
    transform: translateX(3000px);
  }
}