@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:600|Sawarabi+Mincho&display=swap');

/* CSS Document */
#top{
position: relative;
min-height: 530px;
background-image: url(../img/top.jpg);
background-position: center;
background-size: auto 100%;
}
#top .imgBox{
	position:relative;
}
#top img.topBg{
	/*min-height: 580px;*/
	position: relative;
	bottom:0;
}
#top img.topImg{
width: 50%;
position: absolute;
bottom:0;
}
#top img.topImg.left{
	left:5%;
	opacity: 0;
}
#top img.topImg.right{
	right:5%;
	opacity: 0;

}
#top #logo{
	width: 100%;
	text-align: center;
	position: absolute;
}
#top #logo img{
	width: 24%;
	opacity: 0;
	transition: all 800ms 0.6s ease;
	 transform: scale(0.5);
	 display: block;
	 margin: 0 auto;

}
#top.action #logo img{
	 transform: scale(1);
	opacity: 1;
}

#top .topInfoArea{
	width: 30%;
	text-align: center;
	position: absolute;
	left:35%;
	right:35%;
	transition: all 500ms 1s ease;
	opacity: 0;
	transform: translateY(20px);


}
#top.action .topInfoArea{
	opacity: 1;
	transform: translateY(0px);
}

#top .topInfoArea a.psStore{
	width: 100%;
	max-width: 200px;
	display: inline-block;
	vertical-align: middle;
	padding: 1em;
	background-color: #031951;
	color: #fff;
	margin-right: 1%;
	letter-spacing: 1px;
	transition: all 300ms 0s ease;
	font-weight: bold;
	/*background:linear-gradient(135.2350100828512deg, rgba(3, 25, 81,1) 27.94023479188901%,rgba(72, 246, 246,1) 93.25506937033083%);*/
	background:linear-gradient(138.04477844419398deg, rgba(72, 246, 246,1) -5.202774813233724%,rgba(71, 244, 244,1) -5.202774813233724%,rgba(3, 25, 81,1) 48.72598719316969%,rgba(72, 246, 246,1) 100.45357524012807%);
	background-size:230% 100%;
	background-position:right top;
	}

#top .topInfoArea a.psStore:hover{
	background-position: left top;
	/*background-size: 300% 100%;*/
}
#top .topInfoArea .countDown{
	width: 50%;
	max-width: 180px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
#top .topInfoArea .countDown .playBT{
	display: block;
	cursor: pointer;
}
#top .topInfoArea .countDown .playBT:hover .numBox{
	background-color: #3fd0de;

}
#top .topInfoArea .countDown .numBox{
	max-width: 136px;
	border: #031951 6px solid;
	border-radius: 50%;
	background-color: #fff;
}
#top .topInfoArea .countDown .playBT.selected .numBox{
	background-color: #3fd0de;

}

#top .topInfoArea .countDown .countChara{
	width: 80%;
	max-width: 152px;
	position: absolute;
	left:45%;
	top:0%;
}

#top .silver{
	width: 12%;
	max-width: 171px;
	position: absolute;
	top:0;
	left: 0;
}
.newsArea{
	width: 100%;
	background-image: url(../img/news_bg.png);
	background-repeat: repeat-y;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
}

.newsArea .newsBox{
	background-image: url(../img/news_title.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 12%;
	padding: 0.5em 0;
	padding-left: 10%;
	padding-right: 4em;
	position: relative;
	font-weight: bold;
}
.newsArea .newsBox .more{
	position: absolute;
	right: 5px;
	width: 5em;
	top:0.5em;
}
.more a{
	width: 100%;
	padding: 0.5em;
	color: #fff;
	background-color: #031951;
	text-align: center;
	position: relative;
	display: block;
	font-size: 12px;
}
.more a:hover{
	background-color:  #284d91;
}
/*----------------------*/
#bannerArea{
	width: 100%;
	padding: 1em 0;
	background-color: #034984;
	text-align: center;
}
#bannerArea a{
	width:32.8%;
	max-width: 465px;
	display: inline-block;
	vertical-align: top;
	margin: 2px 0.25%;
	position: relative;
}
#bannerArea a.non{
	cursor: default;
}
#bannerArea a.smallBanner{
width: 24%;
max-width: 350px;
}
#bannerArea a.txtLink{
	background-color: #d51e18;
	text-align: center;
	color: #fff;
	padding: 1em;
	display: block;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 1em;
	font-weight: bold;
}
	#bannerArea a.new:after{
		content: "new";
		font-family: 'Fjalla One', sans-serif;
		position: absolute;
		top:0;
		left:0;
		background-color: #000;
		padding: 0 0.5em;
		color: #FFC83E;
	}

/*----------------------*/
.areaWrap{
	background-image: url(../img/bg_blue_cross.jpg);
}
.areaBg{
	background-image: url(../img/top/bg.png);
	background-repeat: no-repeat;
	background-position: right top;
	padding:0 0 5%;
	background-size: 100% auto;
}
.areaWrap .contentsBox{
	max-width: 1600px;
}
.movieBtWrap{
	width: 70%;
	padding: 2% 3%;
	padding-left: 0;
	display: block;
	margin: 0 auto;
}
.movieBtArea{
	max-width: 500px;
	margin:  0 auto;
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	transition: all 500ms 0s ease;
	opacity: 0;
}
.movieBtArea .new{
		font-family: 'Fjalla One', sans-serif;
		position: absolute;
		top:-0.2em;
		right:-3em;
		text-align: center;
		background-color: #000;
		padding: 0.8em 3em 0.5em;
		color: #FFC83E;
		display: inline-block;
		transform: rotateZ( 45deg ) ;
		font-size: 150%;
}
#area1.action .movieBtArea{
	opacity: 1;
}
#area1{
	background-image: url(../img/top_chara.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 70% auto;
	padding-bottom: 20%;
	padding-top: 3%;
}
#area1 .floatBox{
	width: 50%;
	margin-left: auto;
}
.movieBt{
	position: absolute;
	width: 100%;
	top:30%;
	text-align: center;
	transition: all 300ms 0s ease;
	opacity: 0.5;

}
.movieBtArea:hover .movieBt{
	 transform: scale(0.8);
	opacity: 1;
}
.movieBt img{
width: 25%;
}
.movieBox{
	display: none;
}

.catch{
	width: 100%;
	display: block;
	vertical-align: top;
	position: relative;
	padding: 5% 0 2%;

	text-align: center;
}
.catch img{
	display: block;
	margin: 10px auto;
}
#area1 .catch img.catchTxt{
	transition: all 500ms 0.5s ease;
	transform: translateX(-30px);
	opacity: 0;
}
#area1.action .catch img.catchTxt{
	transform: translateX(0px);
	opacity: 1;
}
#area1 .catch img.txt1{
	transition: all 500ms 1s ease;
	transform: translateY(30px);
	opacity: 0;
}
#area1.action .catch img.txt1{
	transform: translateY(0px);
	opacity: 1;
}
#area2{
	background-image: url(../img/top/bg_area2.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% 90%;
	position: relative;
	transition: all 1000ms 0s ease;
	opacity: 0;
	margin-bottom: 3%;
	margin-top: -18%;
	padding-top: 5%;
}
#area2.action{
	opacity: 1;

}
#area2 .txt{
	width: 60%;
	display: block;
	vertical-align:top;
	padding-top: 1%;
	transition: all 500ms 1s ease;
	transform: translateX(-30px);
	opacity: 0;
}
#area2 .img{
	width: 65%;
	display:block;
	vertical-align:top;
	transition: all 500ms 1s ease;
	transform: translateX(-30px);
	opacity: 0;
	margin-left: auto;
	margin-top: -7.5%;
}
#area2.action .txt{
	transform: translateX(0px);
	opacity: 1;

}
#area2.action .img{
	transform: translateX(0px);
	opacity: 1;

}
#area3{
	transition: all 500ms 0s ease;
	transform: translateY(30px);
	opacity: 0;
	margin-bottom: 10%;
}
#area3.action{
	transform: translateY(0px);
	opacity: 1;
}
#area3 img.area3Txt{
	display: block;
	width: 70%;
	margin-left: auto;
}
#area4{
	width: 100%;
	background-image: url(../img/top/bg_blue_s.png);
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: auto 100%;
	position: relative;
	transition: all 500ms 0s ease;
	transform: translateX(-100%);
	display: block;
}
#area4.action{
	transform: translateX(0%);
}
#area4 .img1{
	width: 23%;
	text-align: center ;
	position: absolute;
	display: block;
	bottom:40%;
}
#area4.action .img1{
	animation: rotation1 2s ease 0s 1 alternate forwards running;
}
#area4 .img2{
	width: 23%;
	text-align: center ;
	position: absolute;
	display: block;
	bottom:-5%;

}
#area4.action .img2{
	animation: rotation2 2s ease 0s 1 alternate forwards running;
}
@keyframes rotation1 {
  0% {
    transform: translateX(-30%) rotate(360deg);
  }

  100% {
    transform: translateX(-8%) rotate(-15deg);
  }
}
@keyframes rotation2 {
  0% {
    transform: translateX(-30%) rotate(360deg);
  }

  100% {
    transform: translateX(70%) rotate(10deg);
  }
}
#area4 .txt{
	width: 60%;
	padding: 5% 2%;
	margin-left: auto;
	display: block;
	background-image: url(../img/top/mark.png);
	background-repeat: no-repeat;
	background-position: center 20%;
	background-size: 30% auto;
	text-align: center;
	transition: all 1000ms 1s ease;
	transform: translateX(30px);

	opacity: 0;
}
#area4.action .txt{
	opacity: 1;
	transform: translateX(0px);

}
#area4 a{
	width: 50%;
	max-width: 324px;
	display: block;
	margin-top: 2%;
	margin-left: auto;
	background-color: #3b3b3b;
}
#area4 a:hover{
	background-image: url(../img/smp/navi_hover.png);
}
/*----------------------*/
#spec{
	width: 100%;
	background-image: url(../img/bg_blue.jpg);
	padding: 1em 0 100px;
	
}
#spec dl.specTxt{
	margin: 0 auto;
}
/*-----------------------------------------------------------
更新情報
-------------------------------------------------------------*/
	#news .newsWrap{
		width: 96%;
		max-width: 1000px;
		margin: 0 auto;
		padding: 1em;
		background-image: url(../img/bg_white80.jpg);
		border: #031951 2px solid;
	}
	#news .newsWrap dl{
		background-image: url(../img/bg_white80.jpg);
		border-bottom: #787878 1px solid;
		padding: 0.5em;
	}
/*-----------------------------------------------------------
ストーリー
-------------------------------------------------------------*/

	#world #story .inner{
		background-image: url(../world/img/mark.png);
		background-position: right center;
		background-size: auto 90%;
		background-repeat: no-repeat;
		line-height: 1.8em;

	}
	#world #story .inner strong{
		font-size: 18px;
		font-weight: bold;
	}
	#world .actionObject{
		transition: all 500ms 1s ease;
		transform: translateY(30px);
		opacity: 0;
	}
	#world .actionObject.secondAction{
		transform: translateY(0px);
		opacity: 1;
	}
	
	#al .img{
		padding: 0 2em 2em;
	}
	#al .img img{
		width: 32.3%;
		display: inline-block;
		vertical-align: top;
		margin: 0 0.5%;
	}
	
	.prologueBox{
		width: 96%;
		margin: 0 auto;
		text-align: center;
		line-height: 1.8em;
		padding: 5em 0 ;
		position:relative;
	}
	.prologueBox .srcArea{
		position: relative;
	}
	
	.prologueBox .playBT{
		width: 17%;
		max-width: 140px;
		cursor: pointer;
		transition: all 300ms 0s ease;
		text-align: center;
		border-radius: 50%;
		overflow: hidden;
		background-color: #474a4b;
		margin-left: auto;
		display: block;
	}
	.prologueBox .playBT:hover{
		transform: scale(0.9);
	}
	.prologueBox .playBT.selected{
		background-color: #4cd4e8;
	}
	
	.voiceBtArea{
		width: 100%;
		transition: all 500ms 1s ease;
		transform: translateX(30px);
		opacity: 0;
		display: block;
		padding: 2em 0;
		position: absolute;
		top:-50px;
		right: 1%;
	}
	.voiceBtArea.action{
		transform: translateX(0px);
		opacity: 1;
	}
	#firstTxt{
		transition: all 500ms 1s ease;
		opacity: 0;
	}
	#firstTxt.action{
		opacity: 1;
	}

/*-----------------------------------------------------------
キャラクター
-------------------------------------------------------------*/
	#chNavi {
		width: 96%;
		max-width: 1085px;
		margin: 0 auto;
	}
	#chNavi .btBox{
		padding: 2em 0;
	}
	#chNavi .btBox a,img.chBtSpace{
		width: 19%;
		max-width: 206px;
		margin: 5px 0.5%;
		display: inline-block;
		vertical-align: top;
	}
	#chNavi .btBox a{
		background-color: #ccc;
		position: relative;
	}
	#chNavi .btBox a:not(.non):hover{
		background-color: #62f0f7;
	}
	#chNavi .btBox a .new{
		font-family: 'Fjalla One', sans-serif;
		position: absolute;
		top:0;
		left:0;
		background-color: #000;
		padding: 0 0.5em;
		color: #FFC83E;
	}
	
	.chNews{
		width: 96%;
		max-width: 1085px;
		margin: 0 auto;
		border: #031951 3px solid;
		background-color: #fff;
		padding: 0.5em;
		border-radius: 6px;
	}
	.chNews .newsBox{
		max-height: 5em;
		overflow-y: auto;
		padding: 0 0.5em;
	}
	.chWrap{
		width:100%;
		height: auto;
		position: relative;
		padding-bottom: 100px;
		overflow: hidden;

	}
	.chImg{
		width: 75%;
		max-width: 1205px;
		position: relative;
		margin-left: auto;
		transition: all 500ms 0s ease;
		transform: translateX(30px);
		opacity: 0;
	}
	.chWrap.action .chImg{
		transform: translateX(0px);
		opacity: 1;
	}
	.box{
		width: 70%;
		position: absolute;
		padding-left: 7%;
		top:5%;
		transition: all 500ms 0s ease;
		transform: translateX(-30px);
		opacity: 0;

	}
	.chWrap.action .box{
		transform: translateX(0px);
		opacity: 1;
	}
	.chWord{
		width: 100%;
		max-width: 787px;
	}
	
	.chWord img.chName{
		width: 80%;
	}
	
	.chTxtArea{
		width: 60%;
		font-size: 16px;
		line-height: 1.5em;
	}
	.chTxtArea .txt{
		padding: 1em;
		background-image: url("../img/bg_black.png");
		color: #eee;margin-bottom: 0.5em;
	}
	.chTxtArea .subtxt{
		padding: 1em  1em 0.5em;
		background-color: #fff;
		border: #031b57 2px solid;
		border-radius: 6px;
	}
	.chTxtArea .subtxt img.subTitle{
		width: 55%;
		max-width: 266px;
		display: block;
		margin-bottom: 0.5em;
	}
	
	.chBtArea{
		width: 20%;
		max-width: 260px;
		position: absolute;
		top: 10%;
		right:0;
		padding: 5px 0;
		transition: all 500ms 0.2s ease;
		transform: translateY(-30px);
		opacity: 0;
	}
	.ssBt{
		width: 100%;
		padding: 5px;
		background-color: #031c59;
		color: #fff;
		position: relative;
	}
	.chWrap.action .chBtArea{
		transform: translateY(0px);
		opacity: 1;
	}	
	a.ssBt{

		display: block;
	}
	a.ssBt .new{
		font-family: 'Fjalla One', sans-serif;
		position: absolute;
		top:0;
		left:0;
		background-color: #000;
		padding: 0 0.5em;
		color: #FFC83E;
	}

	.chWrap .back{
		width: 20%;
		max-width: 209px;
		position: absolute;
		top:0;
		right:0;
	}
	.chWrap .chPrev,.chWrap .chNext{
		width: 7%;
		max-width: 70px;
		background-color: #031c59;
		top:0;
		position:fixed;
	}
	.chWrap .chPrev:hover,.chWrap .chNext:hover, a.ssBt:hover{
		background-color: #4cd4e8;
	}

	.chWrap .chNext{
		right:0;
		border-bottom-left-radius: 6px;
		border-top-left-radius: 6px;
	}
	.chWrap .chPrev{
		left:0;
		border-bottom-right-radius: 6px;
		border-top-right-radius: 6px;
	}
	
	.chWrap .chTxtArea .txt a{
		color: #3ff2ff;
		padding: 0.5em;
		margin: 0 2px;
		display: inline-block;
		position: relative;
		z-index: 1;
		border: #3ff2ff 1px solid;
		margin-top: 0.5em;
	}
	.chWrap .chTxtArea .txt a:hover{
		color: #fff;
		border: #fff 1px solid;
	}

	
	/*サンプルボイス*/
	.sampleVoice .playBT{
		background-color:#031951;
		max-width: 99px;
		border: #fff 3px solid;
		overflow: hidden;
		border-radius: 50%;
		cursor: pointer;
		display: block;
		margin-left: auto;
		position: relative;
		transition: all 300ms 0s ease;
		text-align: center;
	}
	.sampleVoice .playBT:hover{
		transform: scale(0.9);
	}
	.sampleVoice .playBT.selected{
		background-color: #4cd4e8;
	}
	.sampleVoice .playBT .new{
		font-family: 'Fjalla One', sans-serif;
		position: absolute;
		bottom:0;
		left:0;
		width: 100%;
		text-align: center;
		background-color: #000;
		padding: 0 0.5em;
		color: #FFC83E;
	}
/*-----------------------------------------------------------
システム
-------------------------------------------------------------*/
	#system .mainmenu{
		width: 100%;
		text-align: center;
		padding: 3em 1em;
	}
	#system .mainmenu h3{
		margin-bottom: 1em;
	}
	#system .mainmenu .imgBox{
		width: 95%;
		margin: 0 auto;
		max-width: 720px;
		background-color: #10112e;
	}
	#system .mainmenu .imgBox .txt{
		padding: 1em;
		font-weight: bold;
		line-height: 1.5em;
	}
	#system .storyMode{
		width: 100%;
		background-color: #000;
		max-width: 1219px;
		margin: 0 auto;
		text-align: center;
		line-height: 0;
		overflow:hidden;

	}
	#system .storyMode h3{
		margin-bottom: 1em;
		background-image: url(../system/img/outline/h3_line.png);
		background-position: center bottom;
		background-repeat:repeat-x;
		padding-bottom: 1em;
	}
	#system .storyMode h3 img{
		width: 50%;
	}
	#system .storyMode .flow{
		background-image: url(../img/bg_white_cross.jpg);
	}
	#system .storyMode .flow:before{
		content: "";
		background-image: url(../system/img/outline/storymode_bg_top.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% 100%;
		display: block;
		padding-top: 5em;
	}
	#system .storyMode .flow:after{
		content: "";
		background-image: url(../system/img/outline/storymode_bg_bottom.png);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100% 100%;
		display: block;
		padding-bottom: 5em;
	}
	#system .otherWrap{
		width: 100%;
		margin: 0 auto 2em;
		background-color: #000;
		padding-top: 2em;

	}
	#system .otherBox{
		width: 32.3%;
		margin: 1em 0.5%;
		display: inline-block;
		vertical-align: top;
	}
	
	/*モード詳細*/
	.sysBox{
		background-color: #000;
		text-align: center;
		padding-bottom: 2em;
		margin-bottom: 2em;
	}
	.boxSet.flowBox{
		margin:1em auto;
	}
	.boxSet.flowBox .sysBox{
		width: 32.3%;
		margin: 0.5em  0.5%;
		padding: 0;
		display: inline-block;
		vertical-align: top;
		background-color: #031951;
	}
	.boxSet.flowBox .sysBox .txt{
		text-align: left;
		padding: 0.5em;
		display: block;
		
	}
	.sysBox .storyTxt{
		padding: 1.5em;
		background-image: url(../system/img/mode/bg_blue.png);
		margin: 1em 0;
	}
	.sysBox h3 img{
		width: 60%;
	}
	.sysBox .storyBox{
		padding-bottom: 1em;
	}
	.sysBox .storyBox h4{
		background-image: url(../system/img/mode/bg_yellow.jpg);
		background-repeat: repeat-x;
		background-position: center bottom;
		padding:1em 10% 19px;
	}
	.sysBox .txt{
		padding: 1em;
		text-align: center;
		line-height:  1.5em;
	}
	.sysBox .img img{
		width: 50%;
		display: inline-block;
		vertical-align: top;
	}
	.aPoint{
	padding: 1em;
	border: #c2912a 2px solid;
	}
	
	.aPoint .txtBox,.aPoint .img{
		width: 50%;
		display: inline-block;
		vertical-align: top;
		text-align: left;

	}
	.aPoint .txt{
		text-align: left;
		padding-left: 0;
		
	}
	.aPoint .img{
		text-align: right;
	}
	.aPoint .img img{
		width: 100%;

	}
	.sysBox .normalBox{
		padding-bottom: 1em;
	}
	.sysBox .normalBox h4{
		padding:1em 10% 0;
	}
	.sysBox.double{
		width: 49%;
		margin: 0 0.5%;
		display: inline-block;
		vertical-align: top;
		padding-bottom: 1em;
	}
	.sysBox.double .img img{
		width: 100%;
		display: block;
	}
	.sysBox a{
		color: #2fd3d8;
		font-weight: bold;
	}
	.sysBox a:hover{
		color: #fff;
	}
	.boxSet{
		width: 97%;
		margin: 0 auto 2em;
	}
	.photoBox{
		padding-top: 1em;
	}
	.photoBox .txt{
		text-align: left;
	}
	.photoBox .imgBox,.photoBox .txt{
		width: 50%;
		display: inline-block;
		vertical-align: middle;
		padding: 1em;
	
	}
	
	.episodeBox{
		border-radius: 6px;
		border: #ffc551 2px solid;
		padding: 1em 1em 0;
		margin: 1em auto;
	}
	.episodeBox h5{
		color: #ffc551;
		font-size: 18px;
		font-weight: bold;
	}
	.otherImg a{
		width:15.6%;
		max-width: 150px;
		margin: 0 0.5%;
		display: inline-block;
		font-variant: top;
		border-radius: 50%;
		overflow: hidden;
		transition: all 300ms 0s ease;
		text-align: center;
	}
	.otherImg a:hover{
		box-shadow:0 0 5px #1cb7d8,0 0 10px #34fbff;
		transform: scale(0.9);

	}
	.column{
	border: #c2912a 2px solid;
	padding: 1em;
	
	}
	.column h5,.column h4{
		background-color: #c2912a;
		display: inline-block;
		padding: 0.5em 2em;
	}
	.column strong.midashi{
		display: block;
		font-weight: bold;
		color: #ffc551;
		margin: 2em 0 1.5em;
		border-bottom: #ffc551 1px dashed;
		padding-bottom: 0.2em;
	}
	.column .img{
		width: 50%;
		display:inline-block;
		vertical-align: top;
		padding: 0 1em;
		padding-left: 0;
	}
	.column .img img{
		width: 100%;
		display: block;
	}
	.column .txt{
		width: 50%;
		display:inline-block;
		vertical-align: top;
		padding: 1em;
		text-align: left;
	}
	.cameraBox{
		width: 49%;
		margin: 0 0.5%;
		display: inline-block;
		vertical-align: top;
		padding: 0 0.2em;
	}
	.cameraBox .img img{
		width: 100%;
	}
	.cameraBox .txt{
		text-align:left;
		padding: 0.5em 0;
	}
	dl.koukuukiList{
		text-align: left;
		line-height: 1.5em;
	}
	dl.koukuukiList dt{
		width: 5em;
		float: left;
		color: #ffc551;
	}
	dl.koukuukiList dd{
		margin-left: 5em;
	}
	.zakoWrap h5{
		font-size: 100%;
		padding: 0.5em;
	}
	.gridWrap{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	  column-gap: 10px;
	  row-gap: 1em;
	  width: 96%;
	  margin: 1em auto;
}
	.gridWrap .gridBox{
		background-color: #031951;
	}
	.gridWrap .gridBox .txt{
		text-align: left;
		padding: 0.5em;
	}
	/*キャラクターについて*/
	.sysChara {
		line-height: 1.5em;
	}
	.sysChara h3{
	padding: 0.6em 0.5em 0.5em;
	background-color: #031951;
	box-shadow: 1px 2px 0 #fff; 
	
	font-weight: bold;

	}
	.sysChara .txt{
		padding: 1em;
	}
	.sysChara .sysBox{
		padding:1em;
		text-align: left;
	}
	.henseiList{
		padding: 1em 0;
		max-width: 960px;
		margin: 0 auto;
	}
	.henseiList ul{
		margin-left: 1em;
	}
	.henseiList li{
		text-indent: -1em;
	}
	
	.sysChara a{
		color: #2fd3d8;
		font-weight: bold;
	}
	.sysChara a:hover{
		color: #fff;
	}
	.sysChara img{
		display: block;
		margin: 0 auto;
	}
	dl.kantai {
		text-align: left;
	}
	dl.kantai dt{
		width: 6em;
		float: left;
	}
	dl.kantai dd{
		margin-left: 6em;
		margin-bottom:0.5em;
	}
	.openBt{
		width: 8.5em;
		cursor: pointer;
	}
	.openBt .icon{
		width: 1.2em;
		height: 1.2em;
		text-align: center;
		color: #000;
		background-color: #fac800;
		display: inline-block;
		vertical-align: middle;
		font-weight: bold;
	}
	.openBt .btTxt{
		display: inline-block;
		vertical-align: middle;

		padding-left: 0.3em;
		font-weight: bold;
		color: #fac800;
	}
	
	table.openList{
		border: #8c8c8c 1px solid;
		font-size: 12px;
		line-height: 1.5em;
		width: 100%;
	}
	table.openList td{
		padding:0.5em;
	}
	table.openList tr{
		color: #111;
		background-color: #fff;
	}
	table.kantaiList{
		font-weight: bold;
	}
	table.kantaiList tr:nth-child(even){
		background-color: #fff;
	
	}	
	table.kantaiList tr:nth-child(odd){
		background-color: #e6e6e6;
	
	}

	table.openList tr.cat{
		background-color: #282828;
		color: #fff;
	}
	
	table.openList tr.charaCat{
		padding: 1em;
		font-weight: bold;
		font-size: 130%;
	}
	table.openList td.skillName{
		padding: 1em 0.5em;
		font-weight: bold;
	}
	.skillChara{
	font-weight: bold;
	}
	.tableBox{
		width: 100%;
	}
	.kansyu{
	border-top: #373737 1px dashed;
	margin-top: 0.5em;
	}
/*	.kansyu dl{
		padding: 1em;
		border-bottom: #373737 1px dashed;
	}
	.kansyu dt{
		width: 6em;
		float:left;
		font-weight: bold;
		color: #fdc52d;
	}
	.kansyu dd{
		margin-left: 6em;
	}*/
		table.kansyu{
		width: 100%;
		box-sizing: border-box;
		border-top: #fff 1px dashed;
		margin-bottom: 1em;
	}
	table.kansyu img.kansyuIcon{
		width: 100%;
		max-width: 34px;
		min-width: 25px;

	}
	table.kansyu td{
		border-bottom: #fff 1px dashed;
		padding: 1em 0.5em;
	}
	table.kansyu td.kansyuTxt{
		padding: 1em 0;
		font-weight: bold;
		min-width: 5em;
		color: #fdc52d;
	}

	.sysChara .column{
		text-align: center;
	}
	.sysChara .column .img{
		width: 100%;
		display:inline-block;
		vertical-align: top;
		padding: 0;
		background-color: #900;
		margin: 0;
	}
	.sysChara .column .img img{
		width: 50%;
		display:inline-block;
		vertical-align: top;
	}
	.sysChara .column .txt{
		width: 100%;
		display:block;
	}
	table.level{
		width: 100%;
		box-sizing: border-box;
		border-top: #fff 1px dashed;
		margin-bottom: 1em;
	}
	table.level img.levelIcon{
		width: 100%;
		max-width: 50px;
		min-width: 25px;

	}
	table.level td{
		border-bottom: #fff 1px dashed;
		padding: 1em 0.5em;
	}
	table.level td.levelTxt{
		padding: 1em 0;
		font-weight: bold;
	}
	.tecBox{
	background-color: #454545;
	padding: 1em;
	}
	ul.tec{
		padding: 0.5em 0;
	}
/*-----------------------------------------------------------
ギャラリー
-------------------------------------------------------------*/
	#gallery .cgWrap{
		padding: 0 1em;
	}
	#gallery .cgWrap a{
		width: 19%;
		max-width: 238px;
		margin: 0.5em 0.5%;
		display: inline-block;
		vertical-align: top;
		border: #000 2px solid;
		position: relative;
		outline: none;
	}
	
	#gallery .cgWrap a .new{
		font-family: 'Fjalla One', sans-serif;
		position: absolute;
		top:0;
		left:0;
		background-color: #000;
		padding: 0 0.5em;
		color: #FFC83E;
	}

	#gallery .cgWrap  a:before{
	content:"";
	width:0;
	height:0;
	display:block;
	position:absolute;
	top:-2px;
	left:-2px;
	border-top:#34fbff 2px solid;
	
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
#gallery .cgWrap  a:after{
	content:"";
	width:0;
	height:0;
	display:block;
	position:absolute;
	bottom:-2px;
	right:-2px;
	border-top:#34fbff 2px solid;
	
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
#gallery .cgWrap  a:hover{
	border-left:#34fbff 2px solid;
	border-right:#34fbff 2px solid;
}
#gallery .cgWrap  a:hover:before{
	width:100%;
	border-left:#34fbff 2px solid;
	border-right:#34fbff 2px solid;
}
#gallery .cgWrap a:hover:after{
	width:100%;
	border-left:#34fbff 2px solid;
	border-right:#34fbff 2px solid;
	
}

/*-----------------------------------------------------------
サウンド
-------------------------------------------------------------*/
	.soundWrap{
		margin: 2em 0;
		border-top: #30d3d9 2px solid;
		border-bottom: #30d3d9 2px solid;
		padding: 3em;
	}
		#song .soundWrap{
		background-image: url(../sound/img/song_bg.jpg);
		background-position: right center;
		background-repeat: no-repeat;
		background-size:cover;
	}

	.songBox h3{
		background-color: #3fd0de;
		padding: 0.5em;
		line-height: 1em;
		color: #000;
		display: inline-block;
		font-size: 14px;
		font-weight: bold;
	}
	
	.songBox .songTitle{
		font-size: 60px;
		padding: 5px 0;
		line-height: 1.5em;
	}
	
	.songBox .artist{
		padding: 0.5em;
		line-height: 1.5em;
	}
	
	.soundtrack{
		margin: 2em 0 0;
		padding: 1em 3em;

	}
	.soundtrack h3{
	
		line-height: 1em;
		color: #ffc938;
		display: inline-block;
		font-size: 18px;
		font-weight: bold;
	}
	.soundtrack a{
		display: inline-block;
		margin: 0 0 0.5em;
		color: #fff;
		border-bottom: #fff 1px dashed;
	}

	.soundtrack a:hover{
		color: #3ff2ff;
		border-bottom: #3ff2ff 1px dashed;
	}
	
	.soundtrack table{
		padding: 1em 0;
		padding-right: 0.5em;
		width: 100%;
	}
	.soundtrack table td{
		vertical-align: top;
		min-width: 5em;
	}
	.cdBox {
		padding: 1em;
		background-color: #2d2d2d;
		margin:1em 0 ;
		border: #3ff2ff 1px solid;
	}
	.cdBox .img{
		width: 40%;
		display: inline-block;
		vertical-align:middle;
	}
	.cdBox .txt{
		width: 60%;
		display: inline-block;
		vertical-align:middle;
		padding: 0;
	}
	/*サンプルボイス*/
	.songBox .playBT{
		width: 68px;
		background-color:#464646;
		max-width: 99px;
		border: #818181 1px solid;
		overflow: hidden;
		border-radius: 50%;
		cursor: pointer;
		display:inline-block;
		vertical-align: middle;
		position: relative;
		transition: all 300ms 0s ease;
		text-align: center;
		margin-left: 0.5em;
		line-height: 0;
	}
	.songBox .playBT:hover{
		transform: scale(0.9);
	}
	.songBox .playBT.selected{
		background-color: #4cd4e8;
	}
	
	/*BGM*/
	#bgm .soundWrap{
		background-image: url(../sound/img/bgm_bg.png);
		background-position: right bottom;
		background-repeat: no-repeat;
		background-size: 70% auto;
		padding: 1em 2em 2em;
	}
	#bgm table{
		width: 60%;
		background-color: #000;
	}
	#bgm table td{
		padding: 0.5em;
		margin: 0;
		font-size: 14px;

	}
		#bgm table td.bgmTitle{
		font-weight: bold;
		}
	#bgm .topcell{
		background-color: #2fd3d8;
		color: #000;
		font-weight: bold;
	}
	#bgm .playBT{
		width: 66px;
		background-color:#464646;
		max-width: 99px;
		border: #818181 1px solid;
		overflow: hidden;
		border-radius: 6px;
		cursor: pointer;
		display:block;
		vertical-align: middle;
		position: relative;
		transition: all 300ms 0s ease;
		text-align: center;
		margin:0 auto;
		line-height: 0;
	}
	#bgm .playBT.selected{
		background-color: #4cd4e8;
	}

	#bgm .soundWrap .txtArea{
		padding: 1em 0.5em;
		line-height: 1.5em;
	}
	#bgm .link{
		width: 60%;
		padding: 1em 0;
		text-align: center;
	}
	#bgm .soundWrap .txtArea a{
		color: #2fd3d8;
		font-weight: bold;
	}
	#bgm .soundWrap .txtArea a:hover{
		color: #fff;
	}
	
	#bgm table td .new{
		font-family: 'Fjalla One', sans-serif;
		color: #FFC83E;
		font-weight: normal;
	}

/*-----------------------------------------------------------
スペシャル
-------------------------------------------------------------*/
	#special .movieWrap{
		padding: 1em;
	}
	#special  .movieBox{
		width:49%;
		margin:10px 0.5%;
		display:inline-block;
		vertical-align:top;
		background-color:#000;
	}
	#special .movieBox .txt{
		text-align:center;
		padding:5px 0;
		font-size:12px;
	}
	#special .actionObject{
		transition: all 800ms 1s ease;
		transform: translateY(30px);
		opacity: 0;
	}
	#special .actionObject.secondAction{
		transform: translateY(0px);
		opacity: 1;
	}
	
	#special a.ryuLink{
		width: 100%;
		max-width: 700px;
		display: block;
		margin: 0 auto;
		transition: all 300ms 0s ease;
		opacity: 1;
	} 
	#special a.ryuLink:hover{
		opacity: 0.7;
	}
	
	.movieWrap strong{
		display: block;
		text-align: center;
		margin: 2em auto 0.5em;
		background-color: #000;
		max-width: 700px;
		padding: 0.5em;
	}
	.thumArea{
		width: 96%;
		margin: 0 auto;
	}
	.thumArea .double{
	width: 49%;
	margin: 0 0.5%;
	display: inline-block;
	vertical-align: top;
	}
	.thumBox{
		margin-bottom: 2em;
	}
	#special  .movieBox .new,.thumBox .new{
		font-family: 'Fjalla One', sans-serif;
		color: #FFC83E;
		font-weight: normal;
		background-color: #000;
		padding: 0 0.5em;
	}

	.thumArea .playBT{
		width: 49%;
		max-width: 604px;
		margin: 0.5em 0.5%;
		display: inline-block;
		vertical-align: top;
		border: #000 2px solid;
		position: relative;
		outline: none;
	}
	.thumArea .double .playBT{
		width: 100%;
		display: block;
	}
	.thumArea .playBT .new{
		font-family: 'Fjalla One', sans-serif;
		position: absolute;
		top:0;
		left:0;
		background-color: #000;
		padding: 0 0.5em;
		color: #FFC83E;
	}

.thumArea .playBT:before{
	content:"";
	width:0;
	height:0;
	display:block;
	position:absolute;
	top:-2px;
	left:-2px;
	border-top:#34fbff 2px solid;
	
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.thumArea .playBT:after{
	content:"";
	width:0;
	height:0;
	display:block;
	position:absolute;
	bottom:-2px;
	right:-2px;
	border-top:#34fbff 2px solid;
	
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
/*.thumArea .playBT:hover{
	border-left:#34fbff 2px solid;
	border-right:#34fbff 2px solid;
}
.thumArea .playBT:hover:before{
	width:100%;
	border-left:#34fbff 2px solid;
	border-right:#34fbff 2px solid;
}
.thumArea .playBT:hover:after{
	width:100%;
	border-left:#34fbff 2px solid;
	border-right:#34fbff 2px solid;
	
}
.thumArea .playBT.selected{
	border:#34fbff 2px solid;

}*/
.thumBox h3{
	background-color:#34fbff;
	padding: 0.5em;
	color: #000;
	font-weight: bold;
}
/*-----------------------------------------------------------
インフォ
-------------------------------------------------------------*/
	#product .jacketImg{
		width: 60%;
		display: inline-block;
		vertical-align:middle;
		padding: 2em 1em;
		padding-right: 0em;
		text-align: right;
	}
	#product .txt{
		width: 40%;
		display: inline-block;
		vertical-align:middle;
		padding: 1em 0.5em;
	}
	#product .txt dl.specTxt{
		margin: 0;
		font-size: 14px;
	}
	.bonusWrap{
		width: 98%;
		margin: 0 auto;
	}
	#info ul.notes{
		font-size: 12px;
		padding-top: 0.5em;
	}
	#info ul.notes li{
		line-height: 1.3em;
		margin-bottom: 2px;
	}
	.bonusWrap .img{
		width: 60%;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		padding: 1em;
	}
	.bonusWrap .txtBox{
		width: 40%;
		display: inline-block;
		vertical-align: middle;
	}
	#limited .bonusWrap .txtBox{
		vertical-align: top;
		padding-top: 3em;
		padding-left: 1em;
	}
	
	.bonusWrap .txtBox .txt{
		padding: 0 1.5em;
		font-size: 14px;
		line-height: 1.5em;
	}
	.bonusWrap .item{
		margin: 1em 0;
		border-bottom: #3ff2ff 4px solid;
		border-left: #3ff2ff 4px solid;
		padding: 0.5em 2em;
		transform: skewX(-30deg);
	}
	.bonusWrap .itemName{
		transform: skewX(30deg);
		text-indent: -1em;
	}
	#limited .bonusWrap .item{
		margin: 1em 0 2em;
	}
	
	.bonusWrap .txtBox a{
	color: #3ff2ff;
	padding: 0.5em;
	margin: 0 2px;
	display: inline-block;
	position: relative;
	z-index: 1;
	border: #3ff2ff 1px solid;
	margin-top: 0.5em;
}
.bonusWrap .txtBox a:hover{
	color: #fff;
	border: #fff 1px solid;
}

.updateBox{
		width: 96%;
		margin: 1em auto;
		background-color: #000;
		/*border: #3ff2ff 1px solid;*/
		padding: 0 0.5em 1em;
}
.updateBox h3{
	padding: 1em 0.5em;
	font-size: 24px;
	font-weight: bold;
	border-bottom: #333 1px solid;
	color: #fac800;

}
.updateBox h3.new:before{
	content: "new";
	padding-right:0.5em;
	font-family: 'Fjalla One', sans-serif;
	color:#F31366;
	font-weight: normal;
}
.updateBox h4{
	background-color:#9a9a9a;
	color: #000;
	padding: 0.5em;
	font-weight: bold;
}
.updateBox .txt{
	padding: 1em;
}
.updateBox .txt.updateList{
	background-color: #212121;
}
.updateBox .txt.updateList ul{
	margin-left: 1em;
}
.updateBox .txt.updateList li{
	text-indent: -1em;
	margin-bottom: 1em;
}

.dlcWrap{
	width: 96%;
	margin: 2em auto;
}
.dlcWrap h3{
	background-color: #031952;
	padding: 0.5em;
	font-size:1.8em;
	box-shadow: 1px 2px 0 #fff;
	line-height: 1.3em;
	font-weight: bold;
}
.dlcInfo{
	border:   #666 2px solid;
	padding: 2em;
	margin-bottom: 1em;
	line-height: 1.5em;
	position: relative;
}
.dlcInfo.new{
	color: #fff;
}
.dlcInfo.new:after{
	content: "new";
	font-family: 'Fjalla One', sans-serif;
	position: absolute;
	top:0;
	left:0;
	background-color: #000;
	padding: 0 0.5em;
	color: #FFC83E;
}

.dlcInfo a{
	
	color: #3ff2ff;
	padding: 0.5em;
	display: block;
	position: relative;
	z-index: 1;
	/*border: #3ff2ff 1px solid;*/
}
.dlcInfo a:hover{
	color: #fff;
	/*border: #fff 1px solid;*/
}

.dlcInfo hr{
border: 0;
border-bottom: #ccc 1px dashed;
}
.dlcInfo dl{
padding-top: 0.5em;
}
.dlcInfo dt{
color: #34fbff;
font-weight: bold;
}
.dlcInfo dd{
	padding: 0 0 0.5em;
}
.dlcBox{
	background-color: #000;
	margin-bottom: 1em;

}
.dlcWrap .imgBox{
	width: 50%;
	display: inline-block;
	vertical-align: top;
	padding: 1em;
	text-align: center;
}
.dlcWrap .imgBox.wide{
	width: 100%;
	display: block;
}
.dlcWrap .imgBox span{
	width: 32.3%;
	margin: 0 0.5%;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.dlcWrap .imgBox span.new:after{
	content: "new";
	font-family: 'Fjalla One', sans-serif;
	position: absolute;
	top:0;
	left:0;
	background-color: #000;
	padding: 0 0.5em;
	color: #FFC83E;
}
.dlcWrap .imgBox.wide img{
	width: 20%;
	max-width: 240px;
	margin: 0;
}
.dlcWrap h4{
	position: relative;
	padding: 0 0.35em ;
	letter-spacing: 0.1em;
	font-size: 1.3em;

	background-color: #34fbff;
	overflow: hidden;

}
.dlcWrap h4:before{
	content: "";
	display: block;
	width: 150%;
	position: absolute;
	background-color: #000;
	transform: skew(-45deg,0);
	top:0;
	bottom:-1px;
	left:0;
	right:0;
	z-index: 1;
	/*margin-left: -50%;
	left:50%;*/
}

.dlcWrap h4 .txt{
	padding: 0.8em 1em 0.2em;
	background-color: transparent;
	border-bottom: #35f1f8 2px solid;
	position: relative;
	z-index: 2;
	font-weight: bold;
	line-height: 1.3em;
	color: #35f1f8;
	font-style: italic;
}

.dlcWrap h5{
	color: #ffcf27;
	font-size: 1.1em;
	padding: 0 0.5em 0.2em;
	border-bottom: #ffcf27 1px solid;
	margin-bottom: 0.2em;
	font-weight: bold;
}
.dlcWrap h5.caution{
	color:#F31366;
	border-bottom:#F31366 1px solid;
}

.dlcWrap a.jumpBt{
	width: 80%;
	max-width: 400px;
	text-align: center;
	padding: 1em;
	background-color: #35f1f8;
	color: #000;
	margin: 1em auto 0;
	display: block;
	font-weight: bold;
	position: relative;
}
.dlcWrap a.jumpBt span{
	position: relative;
	z-index: 2;
}
.dlcWrap a.jumpBt:hover{
	color: #fff;
}
.dlcWrap a.jumpBt:before{
	content:"";
	width:0;
	height:100%;
	display:block;
	position:absolute;
	bottom:0;
	top:0;
	left:0;
	background-color: #666;

	transition: all 0.2s 0s ease-out;
	box-sizing: border-box;
	z-index: 1;

}
.dlcWrap a.jumpBt:hover:before{
	width: 100%;


}
/*DLCスクリーンショット*/
	.dlcWrap .ssWrap{
		padding: 0 1em;
	}
	.dlcWrap .ssWrap a{
		width: 19%;
		max-width: 238px;
		margin: 0.5em 0.5%;
		display: inline-block;
		vertical-align: top;
		border: #000 2px solid;
		position: relative;
		outline: none;
	}
	
	.dlcWrap .ssWrap a .new{
		font-family: 'Fjalla One', sans-serif;
		position: absolute;
		top:0;
		left:0;
		background-color: #000;
		padding: 0 0.5em;
		color: #FFC83E;
	}

	.dlcWrap .ssWrap a:before{
	content:"";
	width:0;
	height:0;
	display:block;
	position:absolute;
	top:-2px;
	left:-2px;
	border-top:#34fbff 2px solid;
	
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.dlcWrap .ssWrap a:after{
	content:"";
	width:0;
	height:0;
	display:block;
	position:absolute;
	bottom:-2px;
	right:-2px;
	border-top:#34fbff 2px solid;
	
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.dlcWrap .ssWrap a:hover{
	border-left:#34fbff 2px solid;
	border-right:#34fbff 2px solid;
}
.dlcWrap .ssWrap a:hover:before{
	width:100%;
	border-left:#34fbff 2px solid;
	border-right:#34fbff 2px solid;
}
.dlcWrap .ssWrap a:hover:after{
	width:100%;
	border-left:#34fbff 2px solid;
	border-right:#34fbff 2px solid;
	
}
.dlcWrap h4 .new,.dlcWrap a .new{
	font-family: 'Fjalla One', sans-serif;
	color: #FFC83E;
	background-color: #000;
	padding: 0 0.5em;
	font-style: normal;
	font-weight: normal;
}
/*/////////////////////////////////////////
DLCストーリー
/////////////////////////////////////////*/
.dlcBottomTxt{
	text-align: right;
	padding: 0.5em 0.5em 1em;
	border-top: #666 1px dashed;
}
.storyBtArea{
	width: 12%;
	display: inline-block;
	vertical-align: top;
	text-align: center;
}
.storyBtArea a{
	width: 6em;
	height:6em;
	line-height: 6em;
	text-align: center;
	background-color: #000;
	color: #3ff2ff;
	border-radius: 50%;
	display: block;
	margin: 0.5em auto 1em;
	transition: all 300ms 0s ease;
	border: #3ff2ff 2px solid;
	position: relative;
	font-weight: bold;
	
}
.storyBtArea a .icon{
	width: 3.5em;
	height: 3.5em;
	position:absolute;
	bottom:-1em;
	right:-1em;
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;
	background-color: #900;
	border: #3ff2ff 2px solid;
}
.storyBtArea a .icon img{
	width: 100%;
	display: block;
}
.storyBtArea a:hover{
	transform: scale(0.9);
}
.storyBtArea a.selected{

	background-color: #3ff2ff;
	color: #000;
}
.storyBtArea a.new:after{
		content: "new";
		font-family: 'Fjalla One',sans-serif;
		position: absolute;
		display:inline-block;
		line-height: 1em;
		text-align: center;
		top:0;
		left:0;
		background-color: #000;
		padding: 0 0.5em;
		color: #FFC83E;
		font-weight: normal;
}
.storyBtArea a.non{
	color: #333;
	border: #333 2px solid;
	pointer-events: none;
}
.dlcStoryWrap{
	width: 88%;
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding-top: 0.5em;

}
.scBox{
	position: relative;
	z-index: 5;
}
/*テキスト*/
.scBox .txtWrap{
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝",serif;
	/*font-size: 1.5em;*/
	font-size: 1.3vw;
	/*min-width: 16em;*/
	width: 100%;
	display: block;
}
.scBox .txtWrap span.txtBox{
	display: inline-block;
	vertical-align: bottom;
	line-height: 2em;
	padding: 0 0.5em;
	position: relative;
}
.scBox .txtWrap span.txtBox:after{
	content: "";
	position: absolute;
	display: block;
	background-color: #3ff2ff;
	top:0;
	bottom: 0;
	left:0;
	right:0;
}
.scBox .txtWrap span.txtBox.floatTxt{
	padding: 0;
	margin-left: -0.5em;
}
.bkTxt{
	background-color: #000;
}
.blTxt{
	background-color: #3ff2ff;
	color: #000;
}

/*スクリーンショット*/

 .dlcSS{
 	box-shadow: 0.3em 0.5em 0 #3ff2ff;
	position: relative;
 }

/*スクリーンショットボイスボタン*/
.dlcSS.playBT{
	cursor: pointer;
}
.dlcSS.playBT:after{
	content: "";
	width: 4em;
	height: 4em;
	background-image: url(../info/img/dlc/story1/voice_bt.png);
	background-repeat: no-repeat;
	background-position:center;
	background-size: 100% auto;
	border-radius: 50%;
	background-color: #3ff2ff;
	position: absolute;
	bottom:0.2em;
	left:0.2em ;
	display: block;
	transition: all 300ms 0s ease;
	text-align: center;
	border: #3ff2ff 2px solid;
	}
	.dlcSS.playBT:hover:after{
		transform: scale(0.9);
	}

.dlcSS.playBT.selected:after{
	/*background-color: #031952;*/
	background-color: #000;
	background-image: url(../info/img/dlc/story1/voice_bt_selected.png);

}
.scBox .img{
	border: #000 4px solid;
	box-shadow: 0.3em 0.5em 0 #3ff2ff;
	 background-color: #000;


}
/*挙動------------------------------------------------*/
.box1{
		transition: all 300ms 0s ease;
}
.box2{
		transition: all 300ms 0s ease;
}
.box3{
		transition: all 300ms 0s ease;
}
.box4{
		transition: all 300ms 0s ease;
}
.box5{
		transition: all 300ms 0s ease;
}

/*/////////////////////////////////////////
DLC1
/////////////////////////////////////////*/

#dlc1.dlcStoryWrap .bg{
	background-image:url(../info/img/dlc/story1/bg_top.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 100% auto;

}
#dlc1.dlcStoryWrap .bg:after{
	content: "";
	position: absolute;
	bottom:0;
	width: 100%;
	height: 50%;
	background-image: url(../info/img/dlc/story1/bg_bottom.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	display: block;
}
 /*box1*/
 #dlc1 .scBox.box1{
	padding: 5em 2em 0.5em;
	min-width: 16em;
	/*max-width: 28em;*/
	width: 72%;
	display: block;
	opacity: 0;
}
 #dlc1 .scBox.box1.action{
 opacity: 1;
 }
#dlc1 .scBox.box1 .dlcSS{
	width: 80%;
	margin: 0.5em 0;
	transition: all 500ms 0.8s ease;
	transform: translateX(-10px);
	opacity: 0;
	display: block;

}
#dlc1 .scBox.box1.action .dlcSS{
	opacity: 1;
	transform: translateX(0px);

}
.scBox.box1 .txtWrap span.txtBox:after{
	transition: all 300ms 0.5s ease;
}
.scBox.box1.action .txtWrap span.txtBox:after{

	left:100%;
}

/*box2*/
#dlc1 .scBox.box2{
	width: 85%;
	opacity: 0;

}
 #dlc1 .scBox.box2.action{
 opacity: 1;
 }

#dlc1 .scBox.box2 .txtWrap{
	max-width: 30em;

}
.scBox.box2 .txtWrap span.txtBox:after{
	transition: all 300ms 0.6s ease;
}

.scBox.box2.action .txtWrap span.txtBox:after{

	left:100%;
}
#dlc1 .scBox.box2 .img{
	width: 30%;
	max-width: 249px;
	display: inline-block;
	vertical-align: top;
	margin-left: -4px;
	position: relative;
}

#dlc1 .scBox.box2 .img:after{
	content: "";
	position: absolute;
	display: block;
	background-color: #3ff2ff;
	top:0;
	bottom: 0;
	left:0;
	right:0;
	transition: all 300ms 0.3s ease;
}
#dlc1 .scBox.box2.action .img:after{

	left:100%;
}
#dlc1 .scBox.box2 .floatBox{
	width: 70%;
	max-width: 600px;
	display: inline-block;
	vertical-align: top;

}
 #dlc1 .scBox.box2 .dlcSS{
 	width: 80%;
	margin: 0.5em 7%;
	max-width: 410px;
	transition: all 500ms 0.9s ease;
	transform: translateY(10px);
	opacity: 0;
	display: block;

}
#dlc1 .scBox.box2.action .dlcSS{
	opacity: 1;
	transform: translateY(0px);

}
/*box3*/
 #dlc1 .scBox.box3{
 	padding-right: 1em;
	padding-bottom: 1em;
	opacity: 0;

}
 #dlc1 .scBox.box3.action{
 opacity: 1;
 }
 #dlc1 .scBox.box3 .txtWrap{
	position: relative;
	z-index: 2;
 }
 #dlc1 .scBox.box3 .txtWrap span.txtBox{


	font-size: 1.5em;
}
.scBox.box3 .txtWrap span.txtBox:after{
 	transition: all 300ms 0.5s ease;
}
.scBox.box3.action .txtWrap span.txtBox:after{

	left:100%;
}

 #dlc1 .scBox.box3 .dlcSS{
 	width: 55%;
	margin-top: -3.5em;
	position: relative;
	z-index: 1;
	margin-left: auto;
	transition: all 500ms 0.5s ease;
	opacity: 0;
	transform: translate(20px,20px);

}
 #dlc1 .scBox.box3.action .dlcSS{
 	opacity: 1;
	transform:translate(0px,0px);
}
/*box4*/
 #dlc1 .scBox.box4{
 	width: 90%;
 	padding: 0.5em;
	max-width: 960px;
	margin: 0 auto;
	opacity: 0;

}
 #dlc1 .scBox.box4.action{
 opacity: 1;
 }
 #dlc1 .scBox.box4 .dlcSS{
 	width: 50%;
	display: inline-block;
	vertical-align: middle;
}
 #dlc1 .scBox.box4 .txtWrap{
  	width: 50%;
	display: inline-block;
	vertical-align: middle;
}
 #dlc1 .scBox.box4 .txtWrap .txtBox{
 	padding: 1em 0.5em;
	padding-right: 0;
	max-width: 14em;
	margin: 0 auto;
 }
 .scBox.box4 .txtWrap span.txtBox:after{
 	transition: all 300ms 0.5s ease;
}

 .scBox.box4.action .txtWrap span.txtBox:after{

	left:100%;
}

 /*box5*/
 #dlc1 .scBox.box5{
 	overflow: hidden;
	opacity: 0;

}
 #dlc1 .scBox.box5.action{
 opacity: 1;
 }
#dlc1 .scBox.box5 .txtWrap{
	width: 81%;
	min-width:16em; 
	max-width: 800px;
	background-color: #3ff2ff;
	margin-left: auto;
	padding: 0.5em 0;
 	transition: all 300ms 0.3s ease;
	opacity: 0;
	transform: translateY(20px);

}
#dlc1 .scBox.box5.action .txtWrap{
	opacity: 1;
	transform: translateY(0px);

}
 #dlc1 .scBox.box5 .txtWrap span.txtBox{

	font-size: 1.5em;
}
.scBox.box5 .txtWrap span.txtBox:after{
 	transition: all 500ms 0.5s ease;
}

.scBox.box5.action .txtWrap span.txtBox:after{

	left:100%;
}

 #dlc1 .scBox.box5 .imgBox{
 	width: 46%;
	display: inline-block;
	vertical-align: middle;
}
 #dlc1 .scBox.box5 .imgBox .img1{
	 width: 53%;
	 max-width: 263px;
	 position: relative;
	 display: block;
	  margin-top: -5%;
	transition: all 800ms 0.8s ease;

	opacity: 0;
 }
  #dlc1 .scBox.box5.action .imgBox .img1{
	  opacity: 1;
}
#dlc1 .scBox.box5 .imgBox .img2{
	 width: 53%;
	 max-width: 263px;
	 position: relative;
	 display: block;
	 z-index: 1;
	 margin-left: 47%;
	 margin-top: -30%;
 	transition: all 800ms 1s ease;
	opacity: 0;
}
#dlc1 .scBox.box5.action .imgBox .img2{
	  opacity: 1;
}

  #dlc1 .scBox.box5 .imgBox .img img{
  	width: 100%;
  }
 #dlc1 .scBox.box5 .dlcSS{
 	width: 54%;
	display: inline-block;
	vertical-align:top;
	margin-top: -0.5em;
	transition: all 800ms 1.2s ease;
		opacity: 0;


}
#dlc1 .scBox.box5.action .dlcSS{
	  opacity: 1;
}
/*/////////////////////////////////////////
DLC2
/////////////////////////////////////////*/

#dlc2.dlcStoryWrap .bg{
	background-image:url(../info/img/dlc/story2/bg_top.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	
}
 /*box1*/
 #dlc2 .scBox.box1{
	padding: 5em 2em 0.5em;
	min-width: 16em;
	/*max-width: 28em;*/
	width: 72%;
	display: block;
	opacity: 0;
}
 #dlc2 .scBox.box1.action{
 opacity: 1;
 }
#dlc2 .scBox.box1 .dlcSS{
	width: 80%;
	margin: 0.5em 0;
	transition: all 500ms 0.8s ease;
	transform: translateX(-10px);
	opacity: 0;
	display: block;

}
#dlc2 .scBox.box1.action .dlcSS{
	opacity: 1;
	transform: translateX(0px);

}
/*box2*/
#dlc2 .scBox.box2{
	width: 100%;
	opacity: 0;
	position: relative;

}
 #dlc2 .scBox.box2.action{
 opacity: 1;
 }
#dlc2 .scBox.box2:after{
	content: "";
	width: 70%;
	top:15%;
	bottom:5%;
	display: block;
	position: absolute;
	background-image: url(../info/img/dlc/story2/bg_img.jpg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 1;
	transition: all 500ms 0.9s ease;
	transform: translate(-20px,20px);
	opacity: 0;

}
#dlc2 .scBox.box2.action:after{
	opacity: 1;
	transform: translate(0px,0px);
}
 #dlc2 .scBox.box2 .txtWrap{
	position: relative;
	z-index: 2;
}
 #dlc2 .scBox.box2 .dlcSS{
 	width: 100%;
	margin: 0.5em auto;
	max-width: 460px;
	transition: all 500ms 0.5s ease;
	transform: translateY(10px);
	opacity: 0;
	display: block;
	position:relative;
	z-index: 2;

}
#dlc2 .scBox.box2.action .dlcSS{
	opacity: 1;
	transform: translateY(0px);

}
#dlc2 .scBox.box2 .floatBox{
	width: 50%;
	margin-left: auto;
	padding: 0 1em;
	margin-bottom: 1em;
}
/*box3*/
#dlc2 .scBox.box3{
	position: relative;
	margin-bottom: 1em;
}
#dlc2 .scBox.box3 .imgWrap{
	width: 23%;
	position: absolute;
	top:-50%;
}

#dlc2 .scBox.box3 .img{
	width: 100%;
	max-width: 211px;
	position: relative;
	display: block;

}

#dlc2 .scBox.box3 .img:after{
	content: "";
	position: absolute;
	display: block;
	background-color: #3ff2ff;
	top:0;
	bottom: 0;
	left:0;
	right:0;
	transition: all 300ms 0.3s ease;
}
#dlc2 .scBox.box3.action .img:after{

	left:100%;
}

#dlc2 .scBox.box3 .floatBox{
	width: 75%;
	margin-left: auto;
}
#dlc2 .scBox.box3 div.blTxt{
	transition: all 500ms 0.5s ease;
	transform: translateY(10px);
	opacity: 0;
}
#dlc2 .scBox.box3.action div.blTxt{
	transform: translateY(0px);
	opacity: 1;

}
/*box4*/
#dlc2 .scBox.box4{
	position: relative;
	text-align: center;
	padding-bottom: 50px;
}
 #dlc2 .scBox.box4 .dlcSS{
 	width: 48%;
	margin: 0.5em 1%;
	max-width: 460px;
	transition: all 500ms 0.5s ease;
	transform: translateY(10px);
	opacity: 0;
	display:inline-block;
	position:relative;
	z-index: 2;

}
#dlc2 .scBox.box4 .dlcSS.img1{
	transition: all 500ms 0.6s ease;
	transform: translateY(60px);
}
#dlc2 .scBox.box4.action .dlcSS.img1{
	opacity: 1;
	transform: translateY(50px);
}

#dlc2 .scBox.box4.action .dlcSS.img2{
	opacity: 1;
	transform: translateY(0px);
}
/*box5*/
 #dlc2 .scBox.box5{
 	margin: -40px 0 1.5em;
	position: relative;
	z-index: 2;
 }
#dlc2 .scBox.box5:after{
	content: "";
	width: 100%;
	top:60%;
	left:0;
	height: 10px;
	border-top: #3ff2ff 2px solid;
	display: block;
	position: absolute;
	z-index: 1;
	transform: skewY(-5deg);
}
 #dlc2 .scBox.box5 .imgBox{
 	width: 46%;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 2;
}
 #dlc2 .scBox.box5 .imgBox .img1{
	 width: 51%;
	 max-width: 174px;
	 position: relative;
	 display: block;
	  margin-top: 5%;
	transition: all 800ms 0.8s ease;

	opacity: 0;
 }
  #dlc2 .scBox.box5.action .imgBox .img1{
	  opacity: 1;
}
#dlc2 .scBox.box5 .imgBox .img2{
	 width: 51%;
	 max-width: 174px;
	 position: relative;
	 display: block;
	 z-index: 1;
	 margin-left: 47%;
	 margin-top: -80%;
 	transition: all 800ms 1s ease;
	opacity: 0;
}
#dlc2 .scBox.box5.action .imgBox .img2{
	  opacity: 1;
}

  #dlc2 .scBox.box5 .imgBox .img img{
  	width: 100%;
  }
 #dlc2 .scBox.box5 .dlcSS{
 	width: 52%;
	display: inline-block;
	vertical-align:top;
	margin-top: -1em;
	transition: all 800ms 1.2s ease;
		opacity: 0;
	position: relative;
	z-index: 2;

}
#dlc2 .scBox.box5.action .dlcSS{
	  opacity: 1;
}
#dlc2 .scBox.box5 .txtWrap{
	width: 48%;
	margin-left: auto;
	margin-bottom: 2em;
	position: relative;
	z-index: 2;
}
#dlc2 .scBox.box6{
	position: relative;
	text-align: center;
	z-index: 1;
}
#dlc2 .scBox.box6 .txtWrap{
	position: relative;
	z-index: 2;
	transition: all 500ms 0s ease;
	transform: translateY(10px);
	opacity: 0;
}
#dlc2 .scBox.box6.action .txtWrap{
	transform: translateY(0px);
	opacity: 1;

}
/*/////////////////////////////////////////
DLC3
/////////////////////////////////////////*/

#dlc3.dlcStoryWrap .bg{
	background-image:url(../info/img/dlc/story3/bg_top.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	
}
 /*box1*/
 #dlc3 .scBox.box1{
	padding: 5em 2em 0.5em;
	min-width: 16em;
	/*max-width: 28em;*/
	width: 72%;
	display: block;
	opacity: 0;
}
 #dlc3 .scBox.box1.action{
 opacity: 1;
 }
#dlc3 .scBox.box1 .dlcSS{
	width: 80%;
	margin: 0.5em 0;
	transition: all 500ms 0.8s ease;
	transform: translateX(-10px);
	opacity: 0;
	display: block;

}
#dlc3 .scBox.box1.action .dlcSS{
	opacity: 1;
	transform: translateX(0px);

}
#dlc3 .scBox.box2 .imgBox{
	width: 60%;
	 padding: 0.5em 1em 2em;
	transition: all 500ms 0.8s ease;
	transform: translateY(10px);
	opacity: 0;
}
#dlc3 .scBox.box2.action .imgBox{
	transform: translateY(0px);
	opacity:1;

}
#dlc3 .scBox.box2 .imgBox .img{
	width: 31.3%;
	display: inline-block;
	vertical-align: top;
	margin: 0 1%;
	 max-width: 174px;
}
#dlc3 .scBox.box3 .txtWrap{
	display: block;
	width: 100%;
	padding: 2em 0.5em;
	text-align: center;
	line-height: 1.5em;
	font-size: 1.5em;
	background-image: url(../info/img/dlc/story3/bg_middle.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	transition: all 500ms 0s ease;
	opacity: 0;
}
#dlc3 .scBox.box3.action .txtWrap{
	opacity: 1;

}
#dlc3 .scBox.box4 .txtWrap{
	width: 40%;
	display: inline-block;
	vertical-align:middle;
	padding: 1em 0.5em;
	padding-right: 0;
}
#dlc3 .scBox.box4 .imgBox{
	width: 60%;
	 padding: 1em;
	display: inline-block;
	vertical-align:middle;
	transition: all 500ms 0.5s ease;
	opacity: 0;
	transform: translateX(10px);

}
#dlc3 .scBox.box4.action .imgBox{
	opacity: 1;
	transform: translateX(0);

}
#dlc3 .scBox.box5 {
	background-image: url(../info/img/dlc/story3/bg_bottom.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size:auto 100% ;
	padding: 0 1em 2em;
}
#dlc3 .scBox.box5 .txtWrap{
	width: 100%;
	max-width: 26em;
	padding: 1em 0;
	margin-left: auto;
}
#dlc3 .scBox.box5 .dlcSS{
	width: 70%;
	opacity: 0;
	transition: all 500ms 0.5s ease;
	transform: translateY(10px);
}
#dlc3 .scBox.box5.action .dlcSS{
	opacity:1;
	transform: translateY(0px);
}
#dlc3 .scBox.box6{
	position: relative;
	text-align: center;
	z-index: 1;
}
#dlc3 .scBox.box6 .txtWrap{
	position: relative;
	z-index: 2;
	transition: all 500ms 0s ease;
	transform: translateY(10px);
	opacity: 0;
}
#dlc3 .scBox.box6.action .txtWrap{
	transform: translateY(0px);
	opacity: 1;

}
/*/////////////////////////////////////////
DLC4
/////////////////////////////////////////*/

#dlc4.dlcStoryWrap .bg{
	background-image:url(../info/img/dlc/story4/bg_top.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	
}
 /*box1*/
 #dlc4 .scBox.box1{
	padding: 5em 2em 0.5em;
	min-width: 16em;
	width: 72%;
	display: block;
	opacity: 0;
}
 #dlc4 .scBox.box1.action{
 opacity: 1;
 }
#dlc4 .scBox.box1 .dlcSS{
	width: 80%;
	margin: 0.5em 0;
	transition: all 500ms 0.8s ease;
	transform: translateX(-10px);
	opacity: 0;
	display: block;

}
#dlc4 .scBox.box1.action .dlcSS{
	opacity: 1;
	transform: translateX(0px);

}
 #dlc4 .scBox.box2{
 padding: 1em 2em;
 padding-right: 0;
 padding-bottom: 20em;
 background-image: url(../info/img/dlc/story4/bg_middle.png);
 background-position: center bottom;
 background-repeat: no-repeat;
 background-size: contain;
}
 #dlc4 .scBox.box2 .floatBox{
	width:40%;
 	padding: 2em 0;
	display: inline-block;
	vertical-align: top;
}
#dlc4 .scBox.box2 .imgBox{
	width:60%;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
#dlc4 .scBox.box2 .imgBox .img{
	width: 33.3%;
	display: block;
	max-width: 174px;
	position: absolute;
	transform: translateY(20px);
	opacity: 0;
}
#dlc4 .scBox.box2 .imgBox .img.img1{
	top:0;
	left:0;
	transition: all 500ms 0.5s ease;

}
#dlc4 .scBox.box2 .imgBox .img.img2{
	top:3em;
	left:30%;
	transition: all 500ms 0.6s ease;

}
#dlc4 .scBox.box2 .imgBox .img.img3{
	top:-3em;
	left:60%;
	transition: all 500ms 0.7s ease;

}
#dlc4 .scBox.box2.action .imgBox .img.img1,#dlc4 .scBox.box2.action .imgBox .img.img2,#dlc4 .scBox.box2.action .imgBox .img.img3{
	transform: translateY(20px);
	opacity:1;

}
#dlc4 .scBox.box3{
	padding: 0 1em;
	position: relative;
	top:-18em;
}
#dlc4 .scBox.box3 .imgBox{
	width:100%;
	position: relative;
}
#dlc4 .scBox.box3 .dlcSS{
	position: absolute;
	transform: translateY(10px);
	opacity: 0;
}

#dlc4 .scBox.box3 .imgBox .dlcSS.img1{
	width: 55%;
	/*top:-18em;*/
	top:0;
	left:0;
	transition: all 300ms 0s ease;

}
#dlc4 .scBox.box3 .imgBox .dlcSS.img2{
	width: 43%;
	/*top:-10em;*/
	top:8em;
	left:57%;
	transition: all 300ms 0.1s ease;
}
#dlc4 .scBox.box3.action .dlcSS{
	transform: translateX(0px);
	opacity: 1;
}
#dlc4 .scBox.box3 .txtWrap{
	display: block;
	top:13em;
	position: relative;
}
#dlc4 .scBox.box4 .imgBox{
	width:55%;
	display: inline-block;
	vertical-align: middle;
	padding-left: 1em;
	transition: all 300ms 0s ease;
	transform: translateX(-20px);
	opacity:0;

}
#dlc4 .scBox.box4.action .imgBox{
	transform: translateX(0px);
	opacity:1;

}
#dlc4 .scBox.box4 .floatBox{
	width:45%;
	display: inline-block;
	vertical-align: middle;

}
#dlc4 .scBox.box5 .txtWrap{
	width:45%;
	display: inline-block;
	vertical-align: middle;
	padding-left: 1em;

}
#dlc4 .scBox.box5 .imgBox{
	width:55%;
	display: inline-block;
	vertical-align: middle;
	padding-left: 1em;
	transition: all 500ms 0.5s ease;
	transform: translate(20px,20px);
	opacity:0;

}
#dlc4 .scBox.box5.action .imgBox{
	transform: translate(0px,0px);
	opacity:1;

}
#dlc4 .scBox.box6{
	transition: all 500ms 0s ease;
	opacity:0;
}

#dlc4 .scBox.box6.action{
	opacity:1;

}
/*/////////////////////////////////////////
DLC5
/////////////////////////////////////////*/

#dlc5.dlcStoryWrap .bg{
	background-image:url(../info/img/dlc/story5/bg_top.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	
}
 /*box1*/
 #dlc5 .scBox.box1{
	padding: 5em 2em 0.5em;
	min-width: 16em;
	width: 72%;
	display: block;
	opacity: 0;
}
 #dlc5 .scBox.box1.action{
 opacity: 1;
 }
#dlc5 .scBox.box1 .dlcSS{
	width: 80%;
	margin: 0.5em 0;
	transition: all 500ms 0.8s ease;
	transform: translateX(-10px);
	opacity: 0;
	display: block;

}
#dlc5 .scBox.box1.action .dlcSS{
	opacity: 1;
	transform: translateX(0px);

}
 /*box2*/
 
 #dlc5 .scBox.box2 .txtWrap{
 	width: 80%;
	max-width:  25em;
}
#dlc5 .scBox.box2 .txtWrap .bkTxt{
	margin-left: 0.5em;
}
 /*box3*/
 #dlc5 .scBox.box3 .imgBox{
 	width: 45%;
	display: inline-block;
	vertical-align: middle;
	transition: all 500ms 0s ease;
	transform: translateX(-10px);
	opacity: 0;

}
 #dlc5 .scBox.box3.action .imgBox{
 	transform: translateX(0px);
	opacity: 1;
}
 #dlc5 .scBox.box3 .floatBox{
 	width: 55%;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
 #dlc5 .scBox.box3 .floatBox .txtWrap{
 	width: 100%;
 }
  #dlc5 .scBox.box3 .floatBox .img{
  	width: 40%;
	max-width: 185px;
	position: absolute;
	right:2%;
	top:1em;
	z-index: 1;
	transition: all 500ms 0.5s ease;
	transform: translate(10px,10px);
	opacity: 0;

  }
	#dlc5 .scBox.box3.action .floatBox .img{
	transform: translate(0px,0px);
	opacity: 1;

	}
  #dlc5 .bottomBg{
  	background-image: url(../info/img/dlc/story5/bg_bottom.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size:auto 80%;
  }
  #dlc5 .scBox.box4 .imgBox{
  	position: relative;
	display: block;
	width: 100%;
	padding: 3em 0 0.5em;
	margin-left: auto;
  }
#dlc5 .scBox.box4 .imgBox .img{
	width: 20%;
	max-width: 185px;
	text-align: right;
	transition: all 500ms 0s ease;
	transform: translate(-10px,10px);
	opacity: 0;
}
#dlc5 .scBox.box4.action .imgBox .img{
	transform: translate(0px,0px);
	opacity: 1;

}
#dlc5 .scBox.box4 .dlcSS{
	position: absolute;
	width: 40%;
	opacity: 0;

}
#dlc5 .scBox.box4 .dlcSS.img1{
	/*right:32%;*/
	top:0.5em;
	left:21%;
	transition: all 500ms 0.2s ease;

}
#dlc5 .scBox.box4 .dlcSS.img2{
	right:1%;
	top:50%;
	transition: all 500ms 0.3s ease;
}
#dlc5 .scBox.box4.action .dlcSS{
	opacity: 1;

}
#dlc5 .scBox.box5{
	padding-bottom: 1em;
}
#dlc5 .scBox.box5 .imgBox{
  	position: relative;
	display: block;
	width: 95%;
	padding:0.5em 0  2em;
	padding-right: 1.5em;
	margin-left: auto;
  }
  #dlc5 .scBox.box5 .dlcSS{
  	width: 74%;
	display: inline-block;
	vertical-align: bottom;
	transition: all 500ms 0s ease;
	transform: translate(0px,10px);
	opacity: 0;

  }
  #dlc5 .scBox.box5 .imgBox .img{
  	width: 25%;
	max-width: 185px;
	display: inline-block;
	vertical-align: bottom;
	position: relative;
	bottom:-0.5em;
	margin-left: 1%;
	transition: all 500ms 0s ease;
	transform: translate(10px,10px);
	opacity: 0;
  }

  #dlc5 .scBox.box5 .txtWrap{
  	display: block;
	border-bottom: #3ff2ff 2px solid;
	padding: 0.5em 0;
	transition: all 500ms 0.5s ease;
	transform: translate(0px,10px);
	opacity: 0;

  }
	#dlc5 .scBox.box5.action .dlcSS,#dlc5 .scBox.box5.action .imgBox .img,#dlc5 .scBox.box5.action .txtWrap{
		transform: translate(0px,0px);
		opacity: 1;
	}

/*---------------------------------------------------------
@media
------------------------------------------------------------*/
@media (max-width: 1600px) {

	/*DLCストーリー*/
	.scBox .txtWrap{
		font-size: 1.6vw;
	}
}

@media (max-width: 1300px) {
	.chTxtArea{
		font-size: 1.3vw;
	}
	/*DLCストーリー*/
	.scBox .txtWrap{
		font-size: 1.8vw;
	}
}
@media (max-width: 1042px) {
	/*-----------------------------------------------------------

	スペシャル
	-------------------------------------------------------------*/
	/*DLCストーリー*/
	.scBox .txtWrap{
		font-size: 2vw;
	}


}
@media (max-width: 978px) {
	.chTxtArea{
		font-size: 13px;
	}
	
	#bannerArea a{
		width:49.5%;
	}
	#bannerArea a.smallBanner{
	width: 32.3%;
	}

	/*-----------------------------------------------------------
	スペシャル
	-------------------------------------------------------------*/
	#special  .movieBox{
		width:49%;
	
	}
	/*DLCストーリー*/
	.scBox .txtWrap{
		font-size: 18px;
	}

}

@media (max-width: 786px) {
	#top .imgBox{
		padding-top: 7%;
		overflow: hidden;
	}
	img.topBg{
		display: none;
	}
	#top img.topImg{
		width: 90%;
		position:absolute;
		opacity: 0;
		bottom:0;
		}
	#top img.topImg.left{
		left:0;
	}
	#top img.topImg.right{
		right:0;
	}
	#top #logo img{
		width: 33%;

	}
	
	#top .topInfoArea{
		width: 40%;
		/*left:auto;
		right:1em;
		text-align: right;*/
		right: 30%;
		left:30%;
	}
	#top .topInfoArea .countDown{
		width: 40%;
	}
	#top .topInfoArea .countDown .numBox{
		width: 80%;
	}
	#top .topInfoArea .countDown .countChara{
		width: 80%;
	}

	#top .topInfoArea a.psStore{
		font-size: 2vw;
		width: 100%;
		text-align: center;
		margin: 0;
	}
	#top .silver{
		width: 20%;
	}

	.newsArea{
		position: relative;
		opacity: 0;
	}
	.newsArea .newsBox{
		background-image: url(../img/smp/news_title.png);
		background-position: left top;
		background-size:110px;
		padding: 2em 0 0.2em;
		padding-left: 0;
		padding-right: 0;
		position: relative;
		font-weight: bold;
	}
	.newsArea .newsBox .more{
		width: 100%;
		display: block;
		position:relative;
		right: 0;
		top:auto;
		margin-top: 0.5em;
	}
	.newsArea dl{
		padding: 0.5em 1em 0;
	}
	.movieBox{
		width: 90%;
		margin: 0 auto 3%;
		display:block;
	}

	.movieBtWrap{
		display: none;
	}
	.areaBg{
		background-size: 150% auto;
		padding: 5% 0 12%;
		background-position: center;
	}
	#area1 .floatBox{
		width: 60%;
	}
	.catch{
		width: 100%;
		padding: 2% 0 5%;
	}
	#area1{
	background-position: left bottom;
	background-size: 100% auto;
	padding-bottom: 45%;
	padding-top: 1%;
}

	/*#bannerArea a.youtubeBn{
		width:99.5%;
	}*/

	#area2{
	padding: 15% 0 5%;
/*		margin: 1% 0 4%;
		padding: 2% 0;
*/	}
	#area2 .txt{
		width: 80%;
		padding: 1% 0 2%;
	}
	#area2 .img{
		width: 90%;
		margin-top: 0;
	}
	#area3{
		margin-bottom: 13%;
	}
	#area3 img.area3Txt{
		width: 90%;
	}
	#area4 .txt{
		width: 65%;
		padding: 9% 2% 23%;
		padding-left: 3%;
		background-size: auto 70%;
		background-position: center 23%;

	}
	#area4 a{
		margin-top: 3%;
	}
	#area4 .img1{
		width: 32%;
		bottom:45%;
	}
	#area4 .img2{
		width: 32%;
		bottom:-7%;

	}
/*-----------------------------------------------------------
ストーリー
-------------------------------------------------------------*/
	#world #story .inner strong{
		font-size: 2.2vw;
	}
	#world #story .inner{
	background-image: url(../world/img/mark_smp.png);
		background-position: center;
		background-size: auto 80%;
	}
	#spec dl.specTxt{
		font-size: 2.2vw;
	}
	
/*-----------------------------------------------------------
キャラクター
-------------------------------------------------------------*/

	#chNavi .btBox a,img.chBtSpace{
		width: 24%;
	}
	.chTxtArea{
		width: 100%;
		font-size: 13px;
	}
	.chImg{
		width: 100%;
	}
	.box{
		width: 100%;
		position:relative;
		padding:0 7.5%;
	}
	.chWord img.chName{
		width: 100%;
	}
	.chBtArea{
	width: 100%;
	max-width: none;
	position:relative;
	padding: 5px 7.5%;
	}
	.ssBt{
	width: 50%;
	max-width: 260px;
	display: inline-block;
	vertical-align: top;
	}
	.ch0 img.chTxt,.ch1 img.chTxt{
		display: none;
	}
	
		/*サンプルボイス*/
	.sampleVoice{
		width: 50%;
		display: inline-block;
		vertical-align: top;
	}
	.sampleVoice .playBT{
		margin: 0;
	}

	/*-----------------------------------------------------------
	システム
	-------------------------------------------------------------*/
	
	#system .otherBox{
		width: 49%;
	}
	.episodeBox h5{
		font-size: 16px;
	}
	.sysBox .storyTxt{
		background-image:none;
		background-color: #132864;
	}
	table.openList{
		font-size: 2vw;
	}
	.tecBox{
		text-align: left;
	}

	/*-----------------------------------------------------------
	サウンド
	-------------------------------------------------------------*/
		/*BGM*/
	#bgm .soundWrap{
		background-size: 120% auto;
		padding: 1em 1em 90%;
	}
	.songBox .songTitle{
		font-size: 40px;
	}

	#bgm table{
		width: 100%;
	}

	#bgm .link{
		width: 100%;
	}
	.soundtrack h3{
	
		font-size: 2.5vw;
	}
	.cdBox .img{
		width: 100%;
		max-width: 477px;
		display: block;
		margin: 0 auto;
	}
	.cdBox .txt{
		width: 100%;
		display:block;
	}

	/*-----------------------------------------------------------
	スペシャル
	-------------------------------------------------------------*/
	#special  .movieBox{
		width:99%;
		margin: 10px 0.5% 5px;
	
	}
	/*-----------------------------------------------------------
	インフォ
	-------------------------------------------------------------*/
		#product .jacketImg{
			width: 100%;
			display: block;
			vertical-align:top;
			padding: 2em 1em 0;
			text-align:center;
			margin: 0 auto;
		}
		#product .txt{
			width: 100%;
			display:block;
			vertical-align:top;
			padding: 1em;
		}
		#product .txt dl.specTxt{
			margin: 0 auto;
			font-size: 2vw;
		}
		
	.bonusWrap .img{
		width: 100%;
		display:block;
		vertical-align: top;
	}
	.bonusWrap .txtBox{
		width: 90%;
		display: block;
		vertical-align: top;
		margin: 0 auto;
	}
	#limited .bonusWrap .txtBox{
		vertical-align: top;
		padding-top: 1em;
	}
	
	.bonusWrap .txtBox .txt{
		font-size: 2vw;
	}
	
	.updateBox h3{
		font-size: 3vw;

	}
	.dlcWrap h3{
		font-size:1.3em;
	}
	.dlcWrap h4{
		font-size:1.2em;
	}
	/*DLCストーリー*/
	.storyBtArea{
		width: 100%;
		display: block;
	}
	.storyBtArea a{
		display: inline-block;
		vertical-align: top;
		margin: 0.5em 0.8%;
	}
	.storyBtArea a .icon{
		width: 3em;
		height: 3em;
	}
	.dlcStoryWrap{
		width: 100%;
		display: block;

	}

	/*DLCストーリー*/
	
	#dlc1 .scBox.box1{
		padding: 3em 0.5em 0.5em;
	}
	.scBox .txtWrap{
		font-size: 2.2vw;
	}
	
	 #dlc1 .scBox.box4{
	 width: 100%;
	}
	/*DLC2*/
	#dlc2 .scBox.box2 .floatBox{
		width: 50%;
		margin-left: auto;
		padding: 2em 1em 0;
	}
	#dlc2 .scBox.box3{
		margin: 2em 0;
	}
	/*DLC3*/

	#dlc3 .scBox.box4 .txtWrap{
		width: 45%;
	}
	#dlc3 .scBox.box4 .imgBox{
		width: 55%;

	}
	/*DLC4*/
	#dlc4 .scBox.box4{
		position: relative;
		top:-2em;
	}
	#dlc4 .scBox.box4 .floatBox{
		width: 50%;
		display: block;
		margin-left: auto;
	}
	#dlc4 .scBox.box4 .imgBox{
		width: 70%;
		display: block;
	}

	#dlc4 .scBox.box5 .txtWrap{
		width: 90%;
		display: block;
	}
	#dlc4 .scBox.box5 .imgBox{
		width:100%;
		display: block;
	}
	/*DLC5*/
	#dlc5 .scBox.box4 .imgBox .img{
		width: 23%;
		max-width: 185px;
		text-align: right;
	}
	#dlc5 .scBox.box4 .dlcSS.img1{

		left:24%;
	}

	
}
@media (max-width: 480px) {
	/*.newsArea{
	font-size: 12px;
	}*/
	#bannerArea a{
		width: 99%;
	}
		#bannerArea a.smallBanner{
	width:49%;
	}

#area1{
	padding-bottom: 44%;
}
	.movieBox{
		margin: 0 auto 1%;
	}
	#top .topInfoArea a.psStore{
		font-size: 3vw;
	}
#top .topInfoArea .countDown .numBox{
	border: #031951 3px solid;
}

/*-----------------------------------------------------------
ストーリー
-------------------------------------------------------------*/
	#world #story .inner strong{
		font-size: 2.8vw;
	}
	#spec dl.specTxt{
		font-size: 3vw;
	}
/*-----------------------------------------------------------
キャラクター
-------------------------------------------------------------*/
	#chNavi .btBox a .new{
		font-size: 3vw;
	}
/*-----------------------------------------------------------
システム
-------------------------------------------------------------*/
	#system .otherBox{
		width: 90%;
		display: block;
		margin: 10px auto;
	}
	.sysBox{
		margin-bottom: 1em;
		padding-bottom: 1em;
	}
	.sysBox .txt{
		text-align: left;
	}
	.aPoint .txtBox,.aPoint .img{
		width: 100%;
		display: block;
	}
	.aPoint .txt{
		text-align: left;
		padding: 1em 0;
		
	}
	.aPoint .img{
		text-align:center;
	}
	.boxSet{
		width: 100%;
		margin: 0;
	}
	.sysBox.double{
		width: 96%;
		margin: 0 auto 1em;
		display: block;
		vertical-align: top;
		padding-bottom: 1em;
	}
	.photoBox .imgBox,.photoBox .txt{
		width: 100%;
		display: block;
		vertical-align:top;
	
	}
	.episodeBox h5{
		font-size: 3.3vw;
	}
	.boxSet.flowBox .sysBox{
		height: auto;
		width: 99%;
		display:block;
		vertical-align: top;
	}
	.column .img{
		width: 100%;
		display:block;
	}
	.column .txt{
		width: 100%;
		display:block;
	}
	.cameraBox{
		width: 99%;
		margin: 0 0.5%;
		display: block;
		vertical-align: top;
		padding: 0;
	}
	table.openList{
		font-size: 3vw;
	}
	.gridWrap{
	display:block;
	}
	.gridWrap .gridBox{
		margin:1em 0; 
	}
/*-----------------------------------------------------------
ギャラリー
-------------------------------------------------------------*/
	#gallery .cgWrap a{
		width: 24%;
	}
	#gallery .cgWrap a .new{
		font-size: 3vw;
	}

/*-----------------------------------------------------------
サウンド
-------------------------------------------------------------*/
	.soundWrap{
		padding: 3em 2em;
	}
	.songBox h3{
		font-size: 3vw;
	}

	.songBox ul.notes{
		font-size: 3vw;
	}
	.soundtrack {
		padding: 2em;
	}
	.soundtrack h3{
	
		font-size: 3.3vw;
		padding: 0;
	}

	
	#bgm .soundWrap{
		padding: 1em 0 90%;
	}

	#bgm table td{
		font-size: 2.6vw;

	}

	
	.songBox .songTitle{
		font-size: 30px;
	}
	
	/*サンプルボイス*/
	.songBox .playBT{
		width: 45px;
	}
	/*-----------------------------------------------------------
スペシャル
-------------------------------------------------------------*/

.thumBox h3{
		font-size: 3vw;
	}

/*-----------------------------------------------------------
インフォ
-------------------------------------------------------------*/
	#info ul.notes{
		font-size: 3vw;
	}
	.updateBox h3{
		font-size: 3.5vw;

	}
	.dlcWrap .imgBox.wide img{
		width: 33.3%;
	}
	.dlcWrap .imgBox{
		width: 100%;
		display: block;
	}

	.dlcWrap .ssWrap a{
		width: 24%;
	}
	.dlcWrap .ssWrap a .new{
		font-size: 3vw;
	}

	.scBox .txtWrap{
		font-size:3.2vw;
	}
	.scBox .txtWrap span.txtBox.floatTxt{
		padding: 0 0.5em;
		margin-left: 0;
	}
	.scBox .img{
		border: #000 2px solid;

	}
	.storyBtArea a{
		width: 5.5em;
		height: 5.5em;
		line-height: 5.5em;
	}
/*DLC1*/
	#dlc1 .scBox.box1{
		padding: 3em 0.5em 0.5em;
	}
	#dlc1 .box1 .dlcSS{
		width: 80%;

	}
	#dlc1 .scBox.box2{
		width: 100%;
	}
	#dlc1 .scBox.box2 .img{
		width: 30%;
	}
	#dlc1 .scBox.box2 .floatBox{
		width: 70%;
	}
	 #dlc1 .scBox.box2 .dlcSS{
		width: 70%;

	}
	 #dlc1 .scBox.box3 .dlcSS{
		margin-top: -0.5em;
	}
	 #dlc1 .scBox.box4 .dlcSS{
		width: 45%;
	}
	 #dlc1 .scBox.box4 .txtWrap{
		width: 55%;
	}
/*DLC2*/
	#dlc2 .scBox.box1{
		padding: 3em 0.5em 0.5em;
	}
	#dlc2 .scBox.box2 .floatBox{
		padding: 3em 1em 0;
	}
	#dlc2 .scBox.box3{
		margin: 2em 0 0;
	}

	#dlc2 .scBox.box3 .imgWrap{
		width:30%;
		position: absolute;
		top:-15%;
	}
	#dlc2 .scBox.box3 .floatBox{
		width: 65%;
	}
	#dlc2 .scBox.box5{
		margin-top: 0.5em;
	}
	#dlc2 .scBox.box5 .txtWrap{
		width:100%;
		text-align: center;
	}
	/*DLC3*/
	#dlc3 .scBox.box1{
		padding: 3em 0.5em 0.5em;
	}
	#dlc3 .scBox.box2 .imgBox{
		width: 75%;
		 padding: 0.5em 1em ;

	}

	#dlc3 .scBox.box4 .txtWrap{
		width: 80%;
		display: block;
	}
	#dlc3 .scBox.box4 .imgBox{
		width: 70%;
		display: block;
		padding: 0 1em 1em;
		margin-left: auto;
	}
	/*DLC4*/
	#dlc4 .scBox.box1{
		padding: 3em 0.5em 0.5em;
	}
	#dlc4 .scBox.box2{
		padding: 1em 0.5em 8em;
	}
	 #dlc4 .scBox.box2 .floatBox{
		width:45%;
	}
	#dlc4 .scBox.box2 .imgBox{
		width:55%;
	}
	#dlc4 .scBox.box2 .imgBox .img.img1{
		right:60%;
		left:auto;
	}
	#dlc4 .scBox.box2 .imgBox .img.img2{

		right:30%;
		left:auto;

	}
	#dlc4 .scBox.box2 .imgBox .img.img3{
		right:0;
		left:auto;
	}
	#dlc4 .scBox.box3{
		padding: 0 1em;
		position: relative;
		top:-8em;
	}
	#dlc4 .scBox.box3 .txtWrap{
		top:8em;
	}
	#dlc4 .scBox.box3 .imgBox .dlcSS.img2{
		top:3em;
	}
	#dlc4 .scBox.box4{
		top:0;
	}

	#dlc4 .scBox.box4 .floatBox{
		width: 90%;
		display: block;
		margin: 0 auto;
	}
	#dlc4 .scBox.box4 .imgBox{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	#dlc4 .scBox.box5 .txtWrap{
		width: 76%;
		margin-left: auto;
		padding-top: 1em;
	}
	/*DLC5*/
	#dlc5 .scBox.box1{
		padding: 3em 0.5em 0.5em;
		padding-right: 0;
	}

	#dlc5 .scBox.box3 .floatBox .img{
	top:2.5em;
	}
  #dlc5 .scBox.box3 .floatBox .img{
		width: 33%;
		top:2em;
	}
}