@charset "utf-8";

/* ================================================
 Common
--------------------------------------------------- */
#content-inner.bg:before{
	width: 100%;
	position: absolute; left: 0; top: 0; z-index: 1;
	content: "";
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
}
#content-inner.chara-bg:after{
	width: 100%;
	position: absolute; left: 0; top: 0; z-index: 11;
	content: "";
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transform-origin: center top;
	transform-origin: center top;
}
.anime #content-inner.chara-bg:after{
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
}
#content-inner{
	text-align: center;
}
#content-inner h2{
	padding-top: 40px;
}
#content-inner .drop-shadow,
#content-inner .drop-shadow-group img{
	/*-webkit-filter:drop-shadow(0 1px 5px rgba(0,51,153,0.8));
	-moz-filter:drop-shadow(0 1px 5px rgba(0,51,153,0.8));
	-ms-filter:drop-shadow(0 1px 5px rgba(0,51,153,0.8));
	filter: drop-shadow(0 1px 5px rgba(0,51,153,0.8));*/
}
#content-inner .line-top{
	border-top: #335c99 1px solid;
}

.pdT8  {padding-top: 8px;}
.pdT16 {padding-top: 16px;}
.pdT20 {padding-top: 20px;}
.pdT24 {padding-top: 24px;}
.pdT32 {padding-top: 32px;}
.pdT40 {padding-top: 40px;}
.pdT48 {padding-top: 48px;}

.pdB8  {padding-bottom: 8px;}
.pdB16 {padding-bottom: 16px;}
.pdB20 {padding-bottom: 20px;}
.pdB24 {padding-bottom: 24px;}
.pdB32 {padding-bottom: 32px;}
.pdB40 {padding-bottom: 40px;}
.pdB48 {padding-bottom: 48px;}

/* ================================================
 Top
--------------------------------------------------- */
#top-visual{
	width: 100%; height: 514px;
	position: relative; z-index: 100;
	overflow: hidden;
}
#top-movie-area{
	width: 100%; height: 630px;
	position: absolute; left: 0; top: -116px;
}
#top-movie-area .inline-YTPlayer{
	max-width: none !important;
}
#top-movie{
	width: 100%; height: 630px;
}
#top-movie-box{
	width: 100%; min-width: 1180px; height: 100%;
}
#top-movie-cover{
	width: 100%; height: 630px;
	position: absolute; left: 0; top: 0;
}
#top-movie-mask{
	width: 100%; height: 630px;
	position: absolute; left: 0; top: 0;
	background-color: #000;
	display: none;
}
#top-main{
	width: 1180px; height: 514px;
	margin: auto;
	position: absolute; top: 0; left: 0; right: 0;
}
.tb #top-movie-area{
	height: 514px;
	top: 0;
}
.tb #top-movie{
	width: 100%; height: 514px;
	background-position:  center bottom;
	background-repeat: no-repeat;
}
.tb #top-movie.image1{background-image: url(../images/top/tablet/main_A.jpg);}
.tb #top-movie.image2{background-image: url(../images/top/tablet/main_B.jpg);}

/* #top-main
------------------------- */
#top-main .logo{
	width: 480px; height: 293px;
	position: absolute; left: 350px; /*bottom: 93px;*/bottom: 10px;
}
#top-main .logo img{
	-webkit-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	-moz-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	-ms-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	filter: drop-shadow(0 1px 5px rgba(0,20,70,0.4));
}
#top-main .logo.second img{
	-webkit-transition: 0.5s;
	transition: 0.5s;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
#top-main .logo.second.first img{
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	/*-webkit-animation: logoFirst 0.5s ease;
	animation: logoFirst 0.5s ease;*/
}
@keyframes logoFirst {
	0%  {transform: scale(1.2);}
	100%{transform: scale(1.0);}
}
@-webkit-keyframes logoFirst {
	0%  {-webkit-transform: scale(1.2);}
	100%{-webkit-transform: scale(1.0);}
}

#top-main .youtube,
#top-main .info_end{
	-webkit-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	-moz-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	-ms-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	filter: drop-shadow(0 1px 5px rgba(0,20,70,0.4));
}
#top-main .youtube{
	width: 260px; height: 170px;
	position: absolute; left: 20px; bottom: 20px;
	opacity: 0;
}
#top-main .info_end{
	width: 280px; height: 154px;
	position: absolute; right: 10px; bottom: 20px;
	opacity: 0;
}
#top-main .youtube a{
	width: 260px; height: 170px;
	display: block;
	overflow: hidden;
}
#top-main .info_end a{
	width: 280px; height: 154px;
	display: block;
	overflow: hidden;
}
#top-main .youtube a:hover img{
	transform: translateY(-170px);
}
#top-main .info_end a:hover img{
	transform: translateY(-154px);
}
#top-main .twitter{
	width: 268px; height: 198px;
	padding: 16px;
	position: absolute; right: 20px; bottom: 20px;
	background-image: url(../images/top/twitter.png);
	opacity: 0;
	-webkit-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	-moz-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	-ms-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	filter: drop-shadow(0 1px 5px rgba(0,20,70,0.4));
}
#top-main .twitter > div{
	width: 267px; height: 198px;
	position: relative;
	overflow: hidden;
}
#top-main .twitter > div > div{
	width: 286px; height: 198px;
	position: absolute; left: 0; top: 0;
}
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
	#top-main .twitter > div,
	#top-main .twitter > div > div{
		width: 268px;
	}
}
@supports (-ms-ime-align: auto) {
	#top-main .twitter > div,
	#top-main .twitter > div > div{
		width: 268px;
	}
}
.tb #top-main .twitter > div,
.tb #top-main .twitter > div > div{
	width: 268px;
}

#top-main .appstore{
	position: absolute; left: 404px; bottom: 20px;
	opacity: 0;
}
#top-main .googleplay{
	position: absolute; right: 430px; bottom: 20px;
	opacity: 0;
}
#top-main .appstore a,
#top-main .googleplay a{
	opacity: 0.8;
}
#top-main .appstore a:hover,
#top-main .googleplay a:hover{
	opacity: 1;
}
#top-main .appstore img,
#top-main .googleplay img{
	-webkit-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	-moz-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	-ms-filter:drop-shadow(0 1px 5px rgba(0,20,70,0.4));
	filter: drop-shadow(0 1px 5px rgba(0,20,70,0.4));
}

/* #top-content
------------------------- */
#top-content{
	padding: 20px 0 0 0;
	border-top: #335c99 1px solid;
	position: relative; z-index: 100;
}
#top-content > ul{
	padding-bottom: 24px;
	font-size: 0; text-align: center;
}
#top-content > ul > li{
	width: 366px; height: 414px;
	margin: 0 10px;
	display: inline-block; vertical-align: top;
	position: relative;
}
#top-content > ul > li > p{
	width: 200px; height: 36px;
	position: absolute; left: 75px; bottom: 24px;
}
#top-content > ul > li > p a{
	width: 200px; height: 36px;
	display: block;
	overflow: hidden;
}
#top-content > ul > li > p a:hover img{
	transform: translateY(-36px);
}
#top-content .character-nav{
	width: 366px; height: 208px;
	position: absolute; left: 0; top: 126px;
	font-size: 0;
}
#top-content .character-nav li{
	width: 122px; height: 208px;
	position: absolute; top: 0;
}
#top-content .character-nav  li:nth-child(1){left: 0;}
#top-content .character-nav  li:nth-child(2){left: 122px;}
#top-content .character-nav  li:nth-child(3){left: 244px;}

#top-content .character-nav li a{
	width: 122px; height: 208px;
	display: block;
	overflow: hidden;
}
#top-content .character-nav li a:hover img{
	transform: translateY(-208px);
}
#top-content h3{
	padding-bottom: 8px;
	text-align: center;
}
#top-content > p{
	padding-bottom: 16px;
	font-size: 13px; line-height: 1.5; color: #fff; text-align: center;
	text-shadow: 0 0 5px #0033b4, 0 0 8px #0033b4;
}
#top-content > p.p2{
	padding-bottom: 20px;
}
#top-content > p span{
	color: #8299cc;
}

/* ================================================
 Story
--------------------------------------------------- */
.story #content-inner.bg:before{
	height: 1320px;
	background-image: url(../images/story/bg.png);
}
.story #content-inner.chara-bg:after{
	height: 600px;
	background-image: url(../images/story/bg_chara.png);
}
.story .chara-bg2{
	background-image: url(../images/story/bg_chara2.png);
	background-position: center bottom;
	background-repeat: no-repeat;
}
.story .thumbs{
	width: 1180px;
	margin: 0 auto;
	font-size: 0;
}
.story .thumbs li{
	margin: 6px;
	display: inline-block; vertical-align: top;
	background-color: #fff;
}
.story .thumbs a:hover{
	opacity: 0.85;
}

/* ================================================
 System
--------------------------------------------------- */
.system .page-nav{
	width: 100%;
	padding: 32px 0 24px 0;
	font-size: 0;
}
.system .page-nav li{
	display: inline-block; vertical-align: top;
}
.system .page-nav li a{
	height: 36px;
	display: block;
	overflow: hidden;
}
.system .page-nav li a:hover img{
	transform: translateY(-36px);
}
.system .page-nav li img{
	filter: none !important;
}
.system .block{
	background-position: center top;
	background-repeat: no-repeat;
}
.system .chara-bg1{background-image: url(../images/system/battle_chara.png);}
.system .chara-bg2{background-image: url(../images/system/story_chara.png);}
.system .chara-bg3{background-image: url(../images/system/knights_chara.png); height: 404px;}
.system .chara-bg4{background-image: url(../images/system/fairy_chara.png);}
.system .chara-bg5{
	background-image: url(../images/system/housing_chara.png);
	background-position: center top;
	background-repeat: no-repeat;
}
.system .thumbs1{
	width: 668px;
	margin: 0 auto;
	font-size: 0;
}
.system .thumbs2{
	width: 1180px;
	margin: 0 auto;
	font-size: 0;
}
.system .thumbs1 li,
.system .thumbs2 li{
	margin: 6px;
	display: inline-block; vertical-align: top;
	background-color: #fff;
}
.system .thumbs1 a:hover,
.system .thumbs2 a:hover{
	opacity: 0.85;
}
.system li.capt_bg{
	background: none;
	background-image: url(../images/system/knights_capt1a_bg.png);
	background-repeat: no-repeat;
}

/* ================================================
 Character
--------------------------------------------------- */
.character .page-nav{
	width: 100%;
	padding: 32px 0 24px 0;
	font-size: 0;
}
.character .page-nav li{
	display: inline-block; vertical-align: top;
}
.character .page-nav li a{
	height: 36px;
	display: block;
	overflow: hidden;
}
.character .page-nav li a:hover img{
	transform: translateY(-36px);
}
.character .page-nav li img{
	filter: none !important;
}
.character .title{
	width: 1180px;
	margin: 0 auto;
	position: absolute; left: 0; right: 0; top: 0; z-index: 1000;
}
.character .title h3{
	position: absolute; left: 20px; top: 24px;
	display: inline-block; vertical-align: top;
}
.character .slider-nav{
	position: absolute; right: 20px; top: 24px;
	font-size: 0;
}
.character .slider-nav li{
	margin-left: 6px;
	display: inline-block; vertical-align: top;
}
.character .slider-nav li a{
	display: block;
	opacity: 0.4;
}
.character .slider-nav li a:hover{
	opacity: 1;
}
.character .slider-nav li a img:nth-child(2){
	display: none;
}
.character .slider-nav li.active a{
	opacity: 1;
}
.character .slider-nav li.active a img:nth-child(1){
	display: none;
}
.character .slider-nav li.active a img:nth-child(2){
	display: block;
}

.character .slider-chara{
	width: 1180px; height: 710px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.character .slider-chara li{
	float: left;
	position: relative;
}
.character .slider-chara li p{
	width: 96px; height: 32px;
	position: absolute; bottom: 88px;
}
.character .slider-chara li p a{
	width: 96px; height: 32px;
	display: block;
	overflow: hidden;
}
.character .slider-chara li p a:hover img{
	transform: translateY(-32px);
}
.character .slider-chara li .voice1{left: 48px;}
.character .slider-chara li .voice2{left: 144px;}
.character .slider-chara li .voice3{left: 240px;}
.character .slider-chara li .voice4{left: 616px;}
.character .slider-chara li .voice5{left: 712px;}
.character .slider-chara li .voice6{left: 808px;}

.character .slider-prev{
	width: 50px; height: 80px;
	position: absolute; left: 0; top: 326px;
	background-image: url(../images/common/slide_prev.png);
	opacity: 0.85;
	cursor: pointer;
}
.character .slider-next{
	width: 50px; height: 80px;
	position: absolute; right: 0; top: 326px;
	background-image: url(../images/common/slide_next.png);
	opacity: 0.85;
	cursor: pointer;
}
.character .slider-prev:hover,
.character .slider-next:hover{
	opacity: 1;
}

/* ================================================
 Special
--------------------------------------------------- */
.special #content-inner.chara-bg:after{
	height: 560px;
	background-image: url(../images/special/bg_chara.png);
}
.special .page-nav{
	width: 100%;
	padding: 32px 0 24px 0;
	font-size: 0;
}
.special .page-nav li{
	display: inline-block; vertical-align: top;
}
.special .page-nav li a{
	height: 36px;
	display: block;
	overflow: hidden;
}
.special .page-nav li a:hover img{
	transform: translateY(-36px);
}
.special .page-nav li img{
	filter: none !important;
}
.special .block{
	background-position: center top;
	background-repeat: no-repeat;
}
.special .movie_thumbs{
	width: 1180px;
	margin: 24px auto 40px auto;
	font-size: 0;
}
.special .movie_thumbs li{
	margin: 6px;
	display: inline-block; vertical-align: top;
}
.special .movie_thumbs a:hover{
	opacity: 0.9;
}
.special .movie_thumbs li dt{
	width: 322px; height: 182px;
	background-color: #fff;
}
.special .movie_thumbs li dd{
	width: 322px;
	margin: 0 auto;
	padding-top: 4px;
	font-size: 13px; line-height: 1.5; color: #fff; text-align: center;
}
.special .movie_thumbs li div.new{
	width: 48px; height: 20px;
	background: url(../images/common/icom_new.gif) no-repeat center top;
	position: absolute; margin-left: 274px; margin-top: 0; z-index: 202;
}

/* ================================================
 Information
--------------------------------------------------- */
/*.info #bg_chara{
	background: url(../images/information/bg_chara.png) no-repeat center top;
}*/
.info .block{
	background-position: center top;
	background-repeat: no-repeat;
	font-family: "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ＭＳ Ｐゴシック", -apple-system, BlinkMacSystemFont, "Helvetica Neue", arial, Meiryo, "MS PGothic", Osaka, sans-serif;
}
.info h3 .head{
	width: 100%;
	margin: 48px auto;
}
.info h3 .head li{
	display: inline-block; vertical-align: top;
	margin: 0; padding: 0;
	font-size: 0;
}
.info h3 .head li.headline{
	font-size: 24px; line-height: 1.0; color: #fff; text-align: center;
	font-weight: normal;
	/*2行用*/margin-top: 4px;
	/*1行用*//*margin-top: 12px;*/
	padding: 0 8px;
}
.info h3 .head li.headline2{
	font-size: 24px; line-height: 1.0; color: #fff; text-align: center;
	font-weight: normal;
	/*2行用*/margin-top: 4px;
	/*1行用*//*margin-top: 12px;*/
	padding: 0 8px 0 4px;
}
.info h3 .head li.headline span,
.info h3 .head li.headline2 span{
	font-size: 13px;
}
.info p{
	width: 980px;
	margin: 0 auto;
	font-size: 15px; line-height: 1.5; color: #fff; text-align: left;
	-webkit-font-smoothing: subpixel-antialiased;
	text-shadow: 0 0 5px #0033b4, 0 0 8px #0033b4;
}
.info .text{
	font-size: 16px; line-height: 1.7;
}
/*.info #schedule p,
.info #notes p{
	font-size: 15px; line-height: 1.5; color: #fff; text-align: left;
	padding-left: 1em; text-indent: -1em;
}*/
/*.info #schedule p{
	margin-top: 12px;
}*/
.info #support p{
	font-size: 15px; line-height: 1.5; color: #fff; text-align: left;
	margin-top: 12px;
}
.info #support p.list{
	width: 950px;
	margin-top: 4px;
	padding-left: 1em; text-indent: -1.5em;
}
/*.info #notes p{
	margin-top: 8px;
}*/
.info #schedule p.head,
.info #support p.head,
.info #notes p.head{
	margin-top: 40px;
	margin-bottom: 12px;
	font-size: 16px; line-height: 1.5; color: #fff0b4; text-align: left;
}
.info p span{
	font-size: 13px;
}
/*.info #closing{
	padding-top: 40px;
	font-size: 16px; line-height: 1.7;
}*/
.info .signature{
	padding-top: 40px;
	font-size: 15px; line-height: 1.5; text-align: right;
}
.info .signature2{
	padding-top: 8px;
	padding-bottom: 48px;
	font-size: 15px; line-height: 1.5; text-align: right;
}
.info .subhead{
	padding-top: 40px;
	font-size: 20px; line-height: 1; text-align: center;
}
.info p a{
	color: #fff;
	text-decoration: underline;
}
.info p a:hover{
	color: #fff000;
	text-decoration: underline;
}

/* ================================================
 .particle
--------------------------------------------------- */
#particle {
	width: 100%; height: 100%;
	position: fixed; left: 0; top: 0; z-index: 10;
	animation-fill-mode: both;
}
#particle p {
	width: 10px; height: 10px;
	position: absolute;
	display: block;
	pointer-events: none;
}
#particle p:nth-child(9n+1),
#particle p:nth-child(9n+2),
#particle p:nth-child(9n+3),
#particle p:nth-child(9n+4),
#particle p:nth-child(9n+5) {background-image: url(../images/common/ball/ball_S.png);}
#particle p:nth-child(9n+6) {background-image: url(../images/common/ball/ball_M.png);}
#particle p:nth-child(9n+7),
#particle p:nth-child(9n+8),
#particle p:nth-child(9n)   {background-image: url(../images/common/ball/ball_L.png);}

@keyframes particle1 {
	0%  {top: 100%; left: 0%;}
	100%{top:-20px; left: 25%;}
}
@keyframes particle2 {
	0%  {top: 100%; left: 10%;}
	100%{top:-20px; left: 30%;}
}
@keyframes particle3 {
	0%  {top: 100%; left: 20%;}
	100%{top:-20px; left: 40%;}
}
@keyframes particle4 {
	0%  {top: 100%; left: 30%;}
	100%{top:-20px; left: 50%;}
}
@keyframes particle5 {
	0%  {top: 100%; left: 40%;}
	100%{top:-20px; left: 55%;}
}
@keyframes particle6 {
	0%  {top: 100%; left: 50%;}
	100%{top:-20px; left: 60%;}
}
@keyframes particle7 {
	0%  {top: 100%; left: 60%;}
	100%{top:-20px; left: 70%;}
}
@keyframes particle8 {
	0%  {top: 100%; left: 70%;}
	100%{top:-20px; left: 95%;}
}
@keyframes particle9 {
	0%  {top: 100%; left: 80%;}
	100%{top:-20px; left: 95%;}
}
@keyframes particle10 {
	0%  {top: 100%; left: 90%;}
	100%{top:-20px; left: 70%;}
}
@-webkit-keyframes particle1 {
	0%  {top: 100%; left: 0%;}
	100%{top:-20px; left: 25%;}
}
@-webkit-keyframes particle2 {
	0%  {top: 100%; left: 10%;}
	100%{top:-20px; left: 30%;}
}
@-webkit-keyframes particle3 {
	0%  {top: 100%; left: 20%;}
	100%{top:-20px; left: 40%;}
}
@-webkit-keyframes particle4 {
	0%  {top: 100%; left: 30%;}
	100%{top:-20px; left: 50%;}
}
@-webkit-keyframes particle5 {
	0%  {top: 100%; left: 40%;}
	100%{top:-20px; left: 55%;}
}
@-webkit-keyframes particle6 {
	0%  {top: 100%; left: 50%;}
	100%{top:-20px; left: 60%;}
}
@-webkit-keyframes particle7 {
	0%  {top: 100%; left: 60%;}
	100%{top:-20px; left: 70%;}
}
@-webkit-keyframes particle8 {
	0%  {top: 100%; left: 70%;}
	100%{top:-20px; left: 95%;}
}
@-webkit-keyframes particle9 {
	0%  {top: 100%; left: 80%;}
	100%{top:-20px; left: 95%;}
}
@-webkit-keyframes particle10 {
	0%  {top: 100%; left: 90%;}
	100%{top:-20px; left: 70%;}
}

@keyframes particleS1 {
	0%  {margin-left: 0px;}
	100%{margin-left: 20px;}
}
@keyframes particleS2 {
	0%  {margin-left: 0px;}
	100%{margin-left: 60px;}
}
@keyframes particleS3 {
	0%  {margin-left: 0px;}
	100%{margin-left: 80px;}
}
@keyframes particleS4 {
	0%  {margin-left: -50px;}
	100%{margin-left: 10px;}
}
@keyframes particleS5 {
	0%  {margin-left: -50px;}
	100%{margin-left: 30px;}
}
@keyframes particleS6 {
	0%  {margin-left: -50px;}
	100%{margin-left: 50px;}
}

@-webkit-keyframes particleS1 {
	0%  {margin-left: 0px;}
	100%{margin-left: 20px;}
}
@-webkit-keyframes particleS2 {
	0%  {margin-left: 0px;}
	100%{margin-left: 60px;}
}
@-webkit-keyframes particleS3 {
	0%  {margin-left: 0px;}
	100%{margin-left: 80px;}
}
@-webkit-keyframes particleS4 {
	0%  {margin-left: -50px;}
	100%{margin-left: 10px;}
}
@-webkit-keyframes particleS5 {
	0%  {margin-left: -50px;}
	100%{margin-left: 30px;}
}
@-webkit-keyframes particleS6 {
	0%  {margin-left: -50px;}
	100%{margin-left: 50px;}
}