@charset "utf-8";
/* ==================================================================
CSS information
style info : PAGE
================================================================== */


/* --------------------------------------------------------
.main
-------------------------------------------------------- */
.main:not(#toppage) { padding-top: calc(210/750*100%);}
.section_inner { width: calc(650/750*100%); margin: 0 auto; position: relative;}
.pageTtl { margin-left: calc(-35/650*100%);}

.frameA { border: 1px solid #000000; }
.frameA .frameA_inr { display: block; border: 1px solid #85753e; border-left-width: 3px; border-right-width: 3px;}

.inew::after { content: ""; display: block; width: 100%; height: 100%; background: url(../_common/img/icon_new.png) 0 0 no-repeat; background-size: 100%; position: absolute; top: -1px; left: -1px;}

.section_block { position: relative; }
.section_block .section_inner { padding-top: calc(1/750*100%);}

@media screen and (min-width: 641px) {
	.main:not(#toppage) { padding-top: calc(3/1366*100%);}
	.section_inner { width: calc(1206/1366*100%); }
	.pageTtl { margin-left: calc(-35/1206*100%);}
	
	.section_block { }

}
@media screen and (min-width: 1367px) {
	.main:not(#toppage) { padding-top: 3px;}
	.section_inner { width: 1206px; }
}

@media screen and (min-width: 641px) {
	.btn_ov a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: block;}
	.btn_ov a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);}

	.btnFA_ov .frameA { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: block;}
	.btnFA_ov .frameA:hover { -webkit-transform: scale(1.05); transform: scale(1.05);}
}


/*
.section_inner { background: rgba(255,255,255,0.2);}
*/



/* ----------------------------------------------------------------------------------------------------------------
#toppage
---------------------------------------------------------------------------------------------------------------- */
#toppage { padding-bottom: calc(280/750*100%);}

/*#toppage .bg { display: none; }*/
#toppage .catchcopy { background: url(../_img/main/catchcopy_bg_sp.png) top center no-repeat; background-size: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 100;}
#toppage .section_inner { width: 100%; padding-top: calc(579/750*100%);}
#toppage .visual { position: absolute; top: 0; right: 0; width: 100%; }
#toppage .mainlogo { width: calc(670/750*100%); margin: 0 auto; position: relative;}
#toppage .releasedate { width: calc(343/750*100%); margin: calc(-50/750*100%) auto calc(50/750*100%); position: relative;}

#toppage .boxCol3 { position: relative; width: calc(650/750*100%); margin: 0 auto;}
#toppage .boxCol3 .bc_box { background-color: rgba(0,0,0,0.8); border: 1px solid #313131; padding: 5px; }
#toppage .boxCol3 .bc_box::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#toppage .boxCol3 .bc_box::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 5px solid rgba(0,0,0,0.2); }

#toppage .reserv { position: relative; background: url(../_img/main/reserv_bg_sp.png) center center no-repeat; background-size: calc(100% - 10px) calc(100% - 10px); }
#toppage .reserv { margin-bottom: calc(55/650*100%); }
#toppage .reserv .ttl { width: calc(265/648*100%); margin: calc(-24/648*100% - 5px) auto calc(20/648*100%); position: relative; }
#toppage .reserv dd { width: calc(572/648*100%); margin: 0 auto; position: relative; z-index: 10;
	display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
#toppage .reserv dd .btn { width: calc(270/572*100%); }
#toppage .reserv dd .btn.b_dl { margin-top: calc(20/750*100vw); margin-bottom: calc(20/572*100%); margin-left: calc(151/572*100%); }

#toppage .movie { position: relative; margin-bottom: calc(60/650*100%); overflow: hidden;}
#toppage .movie .inew::after { width: calc(605/648*100%);}

#toppage .news { position: relative; margin-bottom: calc(55/650*100%); }
#toppage .news .hl { width: calc(104/648*100%); margin: calc(-26/648*100%) 0 calc(20/648*100%) calc(38/648*100%); position: relative;}
#toppage .news #news_list { padding: 0; overflow: hidden; position: relative; z-index: 10;}
#toppage .news #news_list .news_list_item { margin: 0 calc(10/648*100%) calc(40/648*100%) calc(40/648*100%); font-size: 1.3rem; }
#toppage .news #news_list .news_list_item:last-child { margin-bottom: calc(10/648*100%); }
#toppage .news #news_list .news_list_item dt { color: #ffde6e; margin-bottom: calc(10/648*100%); }
#toppage .news #news_list .news_list_item li { color: #cccccc; line-height: 1.41; margin-bottom: calc(10/648*100%); }
#toppage .news #news_list .news_list_item li a { color: #fff;}
#toppage .news #news_list .mCSB_dragger_bar { background: #2b2b2b; width: 100%; border-radius: 0;}
#toppage .news #news_list .mCSB_scrollTools .mCSB_draggerRail { width: 100%; border-radius: 0;}


#toppage .bnrBlock { position: relative; width: calc(650/750*100%); margin: 0 auto calc(30/650*100%);}
#toppage .bnrBlock .bnrlist { position: relative; }
#toppage .bnrBlock .bnrlist li { position: relative; margin-bottom: calc(30/650*100%); }
#toppage .bnrBlock .bnrlist li:last-child { margin-bottom: 0; }
#toppage .bnrBlock .bnrlist li.official_tw a { position: relative; display: block; border: 1px solid #3c3c3c; background: #000; width: 100%; padding: calc(20/650*100%); text-align: center; border-radius: 100px;}
#toppage .bnrBlock .bnrlist li.official_tw a img { width: calc(210/610*100%); margin: 0 auto;}
#toppage .bnrBlock .bnrlist li.btn_license a { position: relative; display: block; border: 1px solid #3c3c3c; background: #000; width: 100%; padding: calc(14/650*100%) calc(20/650*100%); text-align: center; border-radius: 100px;}
#toppage .bnrBlock .bnrlist li.btn_license a img { width: calc(404/610*100%); margin: 0 auto;}

#toppage .gNav_wrap { height: auto; background: none; padding-top: calc(50/750*100%);}
#toppage .gNav_wrap .gNav_ttl { width: calc(650/750*100%); margin: 0 auto calc(20/750*100%); }

@media screen and (max-width: 640px) {
#toppage .news #news_list { max-height: 180px; }
}
@media screen and (min-width: 641px) {
	#toppage { padding-bottom: calc(180/1366*100%);}

	#toppage { background: url(../_img/main/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); }
	#toppage .catchcopy { background: url(../_img/main/catchcopy_bg_pc.png) top center no-repeat; background-size: calc(1920/1366*100%); width: 100%; padding-top: calc(251/1366*100%); z-index: 100;}
	#toppage .catchcopy img { position: absolute; top: 0; left: 50%; margin-left: calc(-611/1366*100%); margin-top: calc(16/1366*100%); max-width: 903px; width: calc(903/1366*100%);}
	#toppage .section_inner { width: calc(1206/1366*100%); padding-top: calc(225/1366*100%);}
	
	#toppage .visual { position: absolute; right: calc(-80/1206*100%); width: calc(801/1206*100%); }
	#toppage .mainlogo { width: calc(590/1206*100%); margin: 0;}
	#toppage .releasedate { width: calc(411/1206*100%); margin: calc(-15/1206*100%) 0 calc(64/1206*100%) calc(88/1206*100%); }

	#toppage .boxCol3 { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between;
		-webkit-flex-direction : row-reverse; flex-direction : row-reverse;}

	#toppage .reserv { background: none; width: calc(330/1206*100%); padding-bottom: calc(0/1206*100%); margin-bottom: 0; }
	#toppage .reserv .ttl { width: calc(160/318*100%); margin: calc(-15/330*100% - 5px) auto calc(5/330*100%); }
	#toppage .reserv dd { width: calc(300/318*100%) }
	#toppage .reserv dd .btn { width: 100%; margin-bottom: calc(5/1366*100vw); }
	#toppage .reserv dd .btn.b_dl { margin: 0; }

	#toppage .movie { width: calc(346/1206*100%); margin-bottom: 0; }
	#toppage .movie .inew::after { width: calc(322/334*100%); height: 50%; top: -6px; left: -6px;}

	#toppage .news { width: calc(470/1206*100%); margin-bottom: 0; }
	#toppage .news .hl { width: calc(66/458*100%); margin: calc(-24/458*100%) 0 calc(10/458*100%) calc(17/458*100%); }
	#toppage .news #news_list .news_list_item { margin: 0 calc(10/458*100%) calc(30/458*100%) calc(17/458*100%); font-size: 1.3rem; }
	#toppage .news #news_list .news_list_item:last-child { margin-bottom: calc(10/458*100%); }
	#toppage .news #news_list .news_list_item dt { margin-bottom: calc(5/458*100%); }
	#toppage .news #news_list .news_list_item li { margin-bottom: calc(5/458*100%); }

	#toppage .bnrBlock { position: relative; width: 100%; margin: calc(20/1206*100%) auto 0; z-index: 9001;}
	#toppage .bnrBlock .bnrlist { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start;}
	#toppage .bnrBlock .bnrlist li { width: calc(390/1206*100%); margin-bottom: calc(18/1206*100%); }
	#toppage .bnrBlock .bnrlist li { margin-right: calc(18/1206*100%);}
	#toppage .bnrBlock .bnrlist li:nth-child(3n) { margin-right: 0;}

	#toppage .bnrBlock .bnrlist li.official_tw { width: calc(230/1206*100%); }
	#toppage .bnrBlock .bnrlist li.official_tw a { width: 100%; padding: calc(7/230*100%) calc(10/230*100%); }
	#toppage .bnrBlock .bnrlist li.official_tw a img { width: calc(127/208*100%); }
	#toppage .bnrBlock .bnrlist li.btn_license { width: calc(230/1206*100%); }
	#toppage .bnrBlock .bnrlist li.btn_license a { width: 100%; padding: calc(7/230*100%) calc(10/230*100%); }
	#toppage .bnrBlock .bnrlist li.btn_license a img { width: calc(186/208*100%); }

}
@media screen and (min-width: 1367px) {
	#toppage { background-size: 1920px; padding-bottom: 180px;}
	#toppage .catchcopy { background-size: 1920px; padding-top: 251px;}
	#toppage .catchcopy img { margin-left: -611px; margin-top: 16px; }
	#toppage .section_inner { width: 1206px; padding-top: 225px;}
	#toppage .reserv dd .btn { margin-bottom: 5px; }

}



/* ----------------------------------------------------------------------------------------------------------------
#story
---------------------------------------------------------------------------------------------------------------- */
#story { background: url(../story/_img/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}

#story .charaSet { position: absolute; top: 0; left: 0; width: 100%;}
#story .charaSet img { position: absolute; top: 0; right: 0; }
#story .charaSet .cha1 { width: calc(583/650*100%); margin-top: calc(-14/650*100%); right: calc(-106/650*100%);}
#story .charaSet .cha2 { width: calc(303/650*100%); margin-top: calc(1018/650*100%); right: calc(-56/650*100%);}

#story .pageTtl { width: calc(298/650*100%);}
#story .catchcopy { width: calc(654/650*100%); margin-top: calc(-64/650*100%); margin-left: calc(-7/650*100%); position: relative; }

#story .text1 ,
#story .text2 ,
#story .text3 { position: relative; z-index: 10; width: 100%; margin-left: calc(-11/650*100%);}
#story .text1 { margin-top: calc(11/650*100%);}
#story .text2 { margin-top: calc(17/650*100%);}
#story .text3 { margin-top: calc(26/650*100%);}
@media screen and (min-width: 641px) {
	#story { background: url(../story/_img/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(170/1366*100%);}
	
	#story .charaSet .cha1 { width: calc(600/1206*100%); margin-top: calc(103/1206*100%); right: calc(115/1206*100%);}
	#story .charaSet .cha2 { width: calc(495/1206*100%); margin-top: calc(335/1206*100%); right: calc(-127/1206*100%);}

	#story .pageTtl { width: calc(298/1206*100%);}
	#story .catchcopy { width: calc(607/1206*100%); margin-top: calc(-34/1206*100%); margin-left: calc(-9/1206*100%); }

	#story .text1 ,
	#story .text2 ,
	#story .text3 { width: calc(673/1206*100%); margin-left: calc(-9/1206*100%); }
	#story .text1 { margin-top: calc(9/1206*100%);}
	#story .text2 { margin-top: calc(-1/1206*100%);}
	#story .text3 { margin-top: calc(-16/1206*100%);}
}
@media screen and (min-width: 1367px) {
	#story { background-size: 1920px; padding-bottom: 170px;}
}





/* ----------------------------------------------------------------------------------------------------------------
#features
---------------------------------------------------------------------------------------------------------------- */
#features { background: url(../features/_img/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#features .pageTtl { width: calc(580/650*100%);}
#features .catchcopy { width: calc(638/650*100%); margin-top: calc(-56/650*100%); margin-bottom: calc(210/650*100%); margin-left: calc(-8/650*100%); position: relative; }
#features .charaSet { position: absolute; top: 0; left: 0; width: 100%;}
#features .charaSet img { position: absolute; top: 0; }
#features .hl { position: relative; }
#features .piclist { width: 100%; position: relative;}
#features .piclist li { position: relative;}
#features .text { position: relative;}

#features #newscenario { background: url(../features/_img/ns/bg_sp.png) top center no-repeat; background-size: 100%; padding-bottom: calc(40/750*100%);}
#features #newscenario .charaSet .cha1 { width: calc(394/650*100%); margin-top: calc(-186/650*100%); right: calc(-23/650*100%);}
#features #newscenario .hl { width: calc(268/650*100%); margin-top: calc(-30/650*100%); margin-left: calc(-29/650*100%);}
#features #newscenario .piclist li { width: calc(342/650*100%); }
#features #newscenario .piclist li.pic1 { position: absolute; top: 0; left: calc(308/650*100%); margin-top: calc(-91/650*100%);}
#features #newscenario .text { width: calc(607/650*100%); margin-top: calc(-27/650*100%); margin-left: calc(-8/650*100%); }

#features #anewday { background: url(../features/_img/and/bg_sp.png) top center no-repeat; background-size: 100%; margin-top: calc(-77/750*100%); padding-bottom: calc(80/750*100%);}
#features #anewday .hl { width: calc(277/650*100%); margin-top: calc(77/650*100%); margin-left: calc(-22/650*100%);}
#features #anewday .piclist li { width: calc(342/650*100%); }
#features #anewday .piclist.pl1 { margin-top: calc(-7/650*100%);  }
#features #anewday .piclist li.pic2 { position: absolute; top: 0; left: calc(308/650*100%); margin-top: calc(-40/650*100%);}
#features #anewday .storytext { position: relative; max-width: none; width: calc(667/650*100%); margin-top: calc(-67/650*100%); margin-left: calc(-10/650*100%); }
#features #anewday .piclist.pl2 { margin-top: calc(20/650*100%);  }
#features #anewday .piclist li.pic4 { position: absolute; top: 0; left: calc(308/650*100%); margin-top: calc(-40/650*100%);}
#features #anewday .text { width: calc(529/650*100%); margin-top: calc(-58/650*100%); margin-left: calc(-8/650*100%); }

#features #graphic { background: url(../features/_img/gr/bg_sp.png) top center no-repeat; background-size: 100%; margin-top: calc(-80/750*100%); padding-bottom: calc(100/750*100%);}
#features #graphic .charaSet .cha1 { max-width: none; width: calc(787/650*100%); margin-top: calc(-16/650*100%); left: calc(-15/650*100%);}
#features #graphic .hl { width: calc(228/650*100%); margin-top: calc(240/650*100%); margin-left: calc(-22/650*100%);}
#features #graphic .text { width: calc(588/650*100%); margin-top: calc(-64/650*100%); margin-left: calc(-10/650*100%); margin-bottom: calc(9/650*100%); }
#features #graphic .piclist li.pic1 { width: calc(272/650*100%); }
#features #graphic .piclist li.pic2 { width: calc(362/650*100%); position: absolute; top: 0; right: 0; }
#features #graphic .piclist li.pic2 .pictext { max-width: none; width: calc(374/362*100%); margin-left: calc(-6/362*100%); }

#features #system_s { background: url(../features/_img/sy/bg_sp.png) top center no-repeat; background-size: 100%; margin-top: calc(-80/750*100%); padding-bottom: calc(65/750*100%);}
#features #system_s .hl { width: calc(226/650*100%); margin-top: calc(76/650*100%); margin-left: calc(-21/650*100%);}
#features #system_s .piclist { margin-top: calc(-11/650*100%); }
#features #system_s .piclist li { width: calc(330/650*100%); }
#features #system_s .piclist li.pic2 { position: absolute; top: 0; right: 0; margin-top: calc(-20/650*100%);}
#features #system_s .text { width: calc(626/650*100%); margin-top: calc(-34/650*100%); margin-left: calc(-7/650*100%); }

#features #badges { background: url(../features/_img/ba/bg_sp.png) top center no-repeat; background-size: 100%; margin-top: calc(-80/750*100%); padding-bottom: calc(0/750*100%);}
#features #badges .hl { width: calc(226/650*100%); margin-top: calc(76/650*100%); margin-left: calc(-21/650*100%);}
#features #badges .text { width: calc(662/650*100%); margin-top: calc(-70/650*100%); margin-left: calc(-4/650*100%); }
#features #badges .imgSet { position: relative;}
#features #badges .imgSet .img1 { max-width: none; width: calc(694/650*100%); margin-top: calc(-39/650*100%); margin-left: calc(-16/650*100%); position: relative;}

#features #bgm { background: url(../features/_img/bgm/bg_sp.png) top center no-repeat; background-size: 100%; margin-top: calc(-90/750*100%); padding-bottom: calc(72/750*100%);}
#features #bgm .charaSet .cha1 { width: calc(355/650*100%); margin-top: calc(-115/650*100%); right: calc(-50/650*100%);}
#features #bgm .hl { width: calc(228/650*100%); margin-top: calc(79/650*100%); margin-left: calc(-22/650*100%);}
#features #bgm .text { width: calc(556/650*100%); margin-top: calc(-47/650*100%); margin-left: calc(-8/650*100%); }

@media screen and (min-width: 641px) {
	#features { background: url(../features/_img/bg_v2_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(236/1366*100%);}
	#features .pageTtl { width: calc(580/1206*100%);}	
	#features .catchcopy { width: calc(978/1206*100%); margin-top: calc(-65/1206*100%); margin-bottom: calc(-12/1206*100%); margin-left: calc(-8/1206*100%); }

	#features #newscenario { background: none; padding-bottom: calc(136/1366*100%);}
	#features #newscenario .charaSet .cha1 { width: calc(394/1206*100%); margin-top: calc(-55/1206*100%); right: calc(90/1206*100%);}
	#features #newscenario .hl { width: calc(268/1206*100%); margin-top: calc(61/1206*100%); margin-left: calc(-29/1206*100%); margin-bottom: calc(8/1206*100%); z-index: 2;}
	#features #newscenario .piclist li { width: calc(380/1206*100%); }
	#features #newscenario .piclist li.pic1 { left: calc(184/1206*100%); margin-top: calc(-190/1206*100%);}
	/*#features #newscenario .piclist li.pic2 { z-index: 99;}*/
	#features #newscenario .text { width: calc(524/1206*100%); position: absolute; top: 0; left: 0; margin-top: calc(319/1206*100%); margin-left: calc(397/1206*100%); }

	#features #anewday { background: none; margin-top: calc(-200/1366*100%); padding-bottom: calc(160/1366*100%);}
	#features #anewday .hl { width: calc(277/1206*100%); margin-top: calc(156/1206*100%); margin-left: calc(-24/1206*100%);}
	#features #anewday .piclist li { width: calc(380/1206*100%); }
	#features #anewday .piclist.pl1 { position: absolute; top: 0; left: 0; margin-top: 0; width: 100%; }
	#features #anewday .piclist.pl1 li { position: absolute; top: 0; width: calc(450/1206*100%);}
	#features #anewday .piclist li.pic1 { left: calc(550/1206*100%); margin-top: calc(153/1206*100%);}
	#features #anewday .piclist li.pic2 { left: calc(756/1206*100%); margin-top: calc(386/1206*100%);}
	#features #anewday .storytext { width: calc(674/1206*100%); margin-top: calc(-35/1206*100%); margin-left: calc(-10/1206*100%); }
	#features #anewday .piclist.pl2 { margin-top: calc(101/1206*100%);  }
	#features #anewday .piclist li.pic4 { left: calc(350/1206*100%); margin-top: calc(-100/1206*100%);}
	#features #anewday .text { width: calc(719/1206*100%); margin-top: calc(-140/1206*100%); margin-left: calc(356/1206*100%); }

	#features #graphic { background: none; margin-top: calc(-200/1366*100%); padding-bottom: calc(115/1366*100%);}
	#features #graphic .charaSet .cha1 { max-width: none; width: calc(787/1206*100%); margin-top: calc(37/1206*100%); left: calc(-49/1206*100%);}
	#features #graphic .hl { width: calc(228/1206*100%); margin-top: calc(331/1206*100%); margin-left: calc(-22/1206*100%);}
	#features #graphic .text { width: calc(507/1206*100%); margin-top: calc(-49/1206*100%); margin-left: calc(-9/1206*100%); margin-bottom: 0; }
	#features #graphic .piclist { width: 100%; position: absolute; top: 0; left: 0;}
	#features #graphic .piclist li { position: absolute; top: 0; }
	#features #graphic .piclist li.pic1 { width: calc(286/1206*100%); left: calc(523/1206*100%); margin-top: calc(244/1206*100%); }
	#features #graphic .piclist li.pic2 { width: calc(380/1206*100%); margin-top: calc(244/1206*100%);  }
	#features #graphic .piclist li.pic2 .pictext { max-width: none; width: calc(392/380*100%); margin-left: calc(-6/380*100%); }

	#features #system_s { background: none; margin-top: calc(-203/1366*100%); padding-bottom: calc(115/1366*100%);}
	#features #system_s .hl { width: calc(226/1206*100%); margin-top: calc(167/1206*100%); margin-left: calc(-21/1206*100%);}
	#features #system_s .piclist { position: absolute; top: 0; left: 0; width: 100%; margin-top: 0; }
	#features #system_s .piclist li { position: absolute; top: 0; width: calc(380/1206*100%); }
	#features #system_s .piclist li.pic1 { left: calc(470/1206*100%); margin-top: calc(162/1206*100%);}
	#features #system_s .piclist li.pic2 { margin-top: calc(130/1206*100%);}
	#features #system_s .text { width: calc(400/1206*100%); margin-top: calc(-37/1206*100%); margin-left: calc(-8/1206*100%); }

	#features #badges { background: none; margin-top: calc(-203/1366*100%); padding-bottom: calc(161/1366*100%);}
	#features #badges .hl { width: calc(226/1206*100%); margin-top: calc(167/1206*100%); margin-left: calc(-21/1206*100%);}
	#features #badges .text { width: calc(571/1206*100%); margin-top: calc(-58/1206*100%); margin-left: calc(-5/1206*100%); }
	#features #badges .imgSet { position: absolute; top: 0; left: 0; width: 100%;}
	#features #badges .imgSet .img1 { width: calc(647/1206*100%); position: absolute; top: 0; left: calc(570/1206*100%); margin-top: calc(47/1206*100%); margin-left: 0; }

	#features #bgm { background: none; margin-top: calc(-203/1366*100%); padding-bottom: 0;}
	#features #bgm .charaSet .cha1 { width: calc(364/1206*100%); margin-top: calc(-5/650*100%); right: calc(74/1206*100%);}
	#features #bgm .hl { width: calc(228/1206*100%); margin-top: calc(170/1206*100%); margin-left: calc(-20/1206*100%);}
	#features #bgm .text { width: calc(810/1206*100%); margin-top: calc(-76/1206*100%); margin-left: calc(-10/1206*100%); }

}
@media screen and (min-width: 1367px) {
	#features { background-size: 1920px; padding-bottom: 236px;}

	#features #newscenario { padding-bottom: 136px;}
	#features #anewday { margin-top: -200px; padding-bottom: 160px; }
	#features #graphic { margin-top: -200px; padding-bottom: 115px; }
	#features #system_s { margin-top: -203px; padding-bottom: 115px; }
	#features #badges { margin-top: -203px; padding-bottom: 161px; }
	#features #bgm { margin-top: -203px; }

}




/* ----------------------------------------------------------------------------------------------------------------
#system
---------------------------------------------------------------------------------------------------------------- */
#system { background: url(../system/_img/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#system .pageTtl { width: calc(324/650*100%);}
#system .charaSet { position: absolute; top: 0; left: 0; width: 100%;}
#system .charaSet img { position: absolute; top: 0; }
#system .hl { position: relative; }
#system .piclist { width: 100%; position: relative;}
#system .piclist li { position: relative;}
#system .text { position: relative;}

#system .nav_wrap { width: 100%; display: block; position: relative; margin-top: calc(-73/650*100%); margin-bottom: calc(42/650*100%); }
#system .nav { width: 100%; position: relative; }
#system .nav { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start;}
#system .nav li a { display: block; }
#system .nav li span { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0);}

#system .nav .nav_btn01 { width: calc(109/650*100%); margin-top: calc(52/650*100%); margin-right: calc(20/650*100%);}
#system .nav .nav_btn01 a { background: url(../system/_img/nav01_sp.png) center center no-repeat; background-size: 100% auto; padding-top: calc(60/109*100%); }
#system .nav .nav_btn02 { width: calc(289/650*100%); margin-top: calc(18/650*100%); margin-right: calc(20/650*100%);}
#system .nav .nav_btn02 a { background: url(../system/_img/nav02_sp.png) center center no-repeat; background-size: 100% auto; padding-top: calc(80/289*100%); }
#system .nav .nav_btn03 { width: calc(213/650*100%); margin-right: calc(20/650*100%); }
#system .nav .nav_btn03 a { background: url(../system/_img/nav03_sp.png) center center no-repeat; background-size: 100% auto; padding-top: calc(71/213*100%); }
#system .nav .nav_btn04 { width: calc(239/650*100%); margin-top: calc(-28/650*100%);  }
#system .nav .nav_btn04 a { background: url(../system/_img/nav04_sp.png) center center no-repeat; background-size: 100% auto; padding-top: calc(75/239*100%); }

#system #battle { background: url(../system/_img/bat/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(60/750*100%);}
#system #battle .charaSet .cha1 { width: calc(319/650*100%); margin-top: calc(-46/650*100%); right: calc(-50/650*100%);}
#system #battle .charaSet .cha2 { width: calc(345/650*100%); margin-top: calc(-26/650*100%); left: calc(50/650*100%);}
#system #battle .charaSet .cha3 { width: calc(462/650*100%); margin-top: calc(-21/650*100%); left: calc(115/650*100%);}
#system #battle .bgbox { background: rgba(0,0,0,0.75); width: calc(750/650*100%); padding-top: calc(400/650*100%); position: absolute; top: 0; left: calc(-50/650*100%); margin-top: calc(271/650*100%); 
	-webkit-transform: skewY(-6deg); transform: skewY(-6deg);}
#system #battle .hl { width: calc(580/650*100%); margin-top: calc(170/650*100%); margin-left: calc(-31/650*100%);}
#system #battle .text { width: calc(584/650*100%); margin-top: calc(-47/650*100%); margin-bottom: calc(40/650*100%); margin-left: calc(-10/650*100%); }
#system #battle .piclist li { width: calc(330/650*100%); }
#system #battle .piclist li.pic2 { position: absolute; top: 0; right: 0; margin-top: calc(-20/650*100%);}

#system #psychic-scanning { background: url(../system/_img/ps/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(40/750*100%);}
#system #psychic-scanning .charaSet .cha1 { max-width: none; width: calc(750/650*100%); left: calc(-50/650*100%);}
#system #psychic-scanning .hl { width: calc(647/650*100%); margin-top: calc(347/650*100%); margin-left: calc(-31/650*100%);}
#system #psychic-scanning .text { width: calc(657/650*100%); margin-top: calc(-47/650*100%); margin-left: calc(-8/650*100%); margin-bottom: calc(30/650*100%); }
#system #psychic-scanning .piclist li { width: calc(330/650*100%); }
#system #psychic-scanning .piclist li.pic2 { position: absolute; top: 0; right: 0; margin-top: calc(-20/650*100%);}

#system #badge-shop { background: url(../system/_img/bs/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(70/750*100%);}
#system #badge-shop .charaSet .cha1 { }
#system #badge-shop .hl { width: calc(497/650*100%); margin-top: calc(11/650*100%); margin-left: calc(-31/650*100%);}
#system #badge-shop .text { max-width: none; width: calc(681/650*100%); margin-top: calc(-81/650*100%); margin-left: calc(-8/650*100%); margin-bottom: calc(30/650*100%); }
#system #badge-shop .piclist li { width: calc(330/650*100%); }
#system #badge-shop .piclist li.pic2 { position: absolute; top: 0; right: 0; margin-top: calc(-20/650*100%);}

#system #marble-smash { background: url(../system/_img/ms/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(70/750*100%);}
#system #marble-smash .hl { width: calc(521/650*100%); margin-top: calc(-14/650*100%); margin-left: calc(-31/650*100%);}
#system #marble-smash .charaSet .cha1 { width: calc(303/650*100%); margin-top: calc(135/650*100%); left: calc(390/650*100%);}
#system #marble-smash .text { width: calc(611/650*100%); margin-top: calc(-58/650*100%); margin-left: calc(-9/650*100%); margin-bottom: calc(11/650*100%); }
#system #marble-smash .piclist li { width: calc(330/650*100%); }
#system #marble-smash .piclist li.pic2 { position: absolute; top: 0; right: 0; margin-top: calc(-20/650*100%);}
#system #marble-smash .piclist li.pic3 { margin-top: calc(15/650*100%);}
#system #marble-smash .piclist li.pic4 { position: absolute; bottom: 0; right: 0; margin-bottom: calc(20/650*100%);}


@media screen and (min-width: 641px) {
	#system { background: url(../system/_img/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(176/1366*100%);}
	#system .pageTtl { width: calc(324/1206*100%); margin-bottom: calc(-19/1206*100%);}	

	#system .nav_wrap { position: absolute; top: 0; right: 0; margin-top: calc(18/1206*100%); margin-bottom: 0;}
	#system .nav { -webkit-justify-content: flex-end; justify-content: flex-end;}

	#system .nav .nav_btn01 { width: calc(109/1206*100%); margin-top: calc(83/1206*100%); margin-right: calc(10/1206*100%);}
	#system .nav .nav_btn02 { width: calc(289/1206*100%); margin-top: calc(50/1206*100%); margin-right: calc(10/1206*100%);}
	#system .nav .nav_btn03 { width: calc(213/1206*100%); margin-top: calc(27/1206*100%); margin-right: calc(10/1206*100%); }
	#system .nav .nav_btn04 { width: calc(239/1206*100%); margin-top: 0; }
	

	#system #battle { background: url(../system/_img/bat/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(27/1366*100%);}
	#system #battle .charaSet .cha1 { width: calc(378/1206*100%); margin-top: calc(-19/1206*100%); right: calc(171/1206*100%);}
	#system #battle .charaSet .cha2 { width: calc(395/1206*100%); margin-top: calc(-20/1206*100%); left: auto; right: calc(-117/1206*100%);}
	#system #battle .charaSet .cha3 { width: calc(462/1206*100%); margin-top: calc(124/1206*100%); left: auto; right: calc(27/1206*100%);}
	#system #battle .bgbox { display: none; }
	#system #battle .hl { width: calc(580/1206*100%); margin-top: calc(2/1206*100%); margin-left: calc(-28/1206*100%);}
	#system #battle .text { width: calc(740/1206*100%); margin-top: calc(-54/1206*100%); margin-bottom: calc(-16/1206*100%); margin-left: calc(-9/1206*100%); z-index: 2; }
	#system #battle .piclist li { width: calc(380/1206*100%); }
	#system #battle .piclist li.pic2 { right: auto; left: calc(338/1206*100%); margin-top: calc(-52/1206*100%);}

	#system #psychic-scanning { background: url(../system/_img/ps/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(30/1366*100%);}
	#system #psychic-scanning .charaSet .cha1 { width: calc(720/1206*100%); left: calc(249/1206*100%);}
	#system #psychic-scanning .hl { width: calc(647/1206*100%); margin-top: calc(12/1206*100%); margin-left: calc(-28/1206*100%);}
	#system #psychic-scanning .text { width: calc(608/1206*100%); margin-top: calc(191/1206*100%); margin-left: calc(-9/1206*100%); margin-bottom: 0; }
	#system #psychic-scanning .piclist { position: absolute; top: 0; left: 0; width: 100%; }
	#system #psychic-scanning .piclist li { width: calc(380/1206*100%); }
	#system #psychic-scanning .piclist li.pic1 { position: absolute; top: 0; left: calc(776/1206*100%); margin-top: calc(390/1206*100%);}
	#system #psychic-scanning .piclist li.pic2 { right: 0; margin-top: calc(193/1206*100%);}

	#system #badge-shop { background: url(../system/_img/bs/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(30/1366*100%);}
	#system #badge-shop .charaSet .cha1 { width: calc(511/1206*100%); left: auto; right: 0; margin-top: calc(-55/1206*100%);}
	#system #badge-shop .hl { width: calc(497/1206*100%); margin-top: calc(26/1206*100%); margin-left: calc(-28/1206*100%);}
	#system #badge-shop .text { width: calc(725/1206*100%); position: absolute; top: 0; right: calc(-8/1206*100%); margin: calc(303/1206*100%) 0 0; z-index: 2;}
	#system #badge-shop .piclist li { width: calc(380/1206*100%); }
	#system #badge-shop .piclist li.pic1 { margin-top: calc(-33/1206*100%); margin-left: calc(247/1206*100%);}
	#system #badge-shop .piclist li.pic2 { position: relative; margin-top: calc(-12/1206*100%);}

	#system #marble-smash { background: url(../system/_img/ms/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(30/1366*100%);}
	#system #marble-smash .hl { width: calc(521/1206*100%); margin-top: 0; margin-left: calc(-28/1206*100%);}
	#system #marble-smash .charaSet .cha1 { width: calc(303/1206*100%); margin-top: calc(180/1206*100%); left: 0;}
	#system #marble-smash .text { width: calc(574/1206*100%); margin-top: calc(-87/1206*100%); margin-left: calc(308/1206*100%); margin-bottom: calc(5/1206*100%); z-index: 10; }
	#system #marble-smash .piclist li { width: calc(380/1206*100%); }
	#system #marble-smash .piclist li.pic1 { position: absolute; top: 0; right: 0; margin-top: calc(-313/1206*100%);}
	#system #marble-smash .piclist li.pic2 { position: relative; margin-top: 0;}
	#system #marble-smash .piclist li.pic3 { position: absolute; top: 0; left: calc(360/1206*100%); margin-top: calc(-30/1206*100%);}
	#system #marble-smash .piclist li.pic4 { position: absolute; top: 0; left: calc(720/1206*100%); bottom: inherit; right: inherit; margin-top: calc(-60/1206*100%); margin-bottom: 0;}

}
@media screen and (min-width: 1367px) {
	#system { background-size: 1920px; padding-bottom: 176px;}

	#system #battle { background-size: 1920px; padding-bottom: 25px;}
	#system #psychic-scanning { background-size: 1920px; padding-bottom: 30px;}
	#system #badge-shop { background-size: 1920px; padding-bottom: 30px;}
	#system #marble-smash { background-size: 1920px; padding-bottom: 30px;}
	
}



/* ----------------------------------------------------------------------------------------------------------------
#movie
---------------------------------------------------------------------------------------------------------------- */
#movie { background: url(../movie/_img/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#movie .charaSet { position: absolute; top: 0; left: 0; width: 100%;}
#movie .charaSet img { position: absolute; top: 0; right: 0; }
#movie .charaSet .cha1 { width: calc(528/650*100%); margin-top: calc(-120/650*100%); right: calc(-50/650*100%);}
#movie .pageTtl { width: calc(298/650*100%); margin-bottom: calc(220/650*100%);}

#movie .movielist { position: relative;}
#movie .movielist li { position: relative; width: calc(606/650*100%); background: rgba(161,0,0,0.40); padding: calc(20/650*100%) calc(45/650*100%) calc(10/650*100%); margin-bottom: calc(80/650*100%); }
#movie .movielist li a { display: block; width: 100%; border: 1px solid #313131; padding: 4px; position: relative;
	background: rgba(12,12,12,0.8) url(../movie/_img/btn_frame.png) center center no-repeat; background-size: calc(100% - 8px); }
#movie .movielist li .bgbox { background: rgba(0,0,0,0.75); width: calc(650/606*100%); height: 100%; position: absolute; top: 0; left: calc(-22/650*100%); 
	-webkit-transform: skewY(-6deg); transform: skewY(-6deg);}


@media screen and (min-width: 641px) {
	#movie { background: url(../movie/_img/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(250/1366*100%);}
	#movie .charaSet .cha1 { max-width: none; width: calc(1350/1206*100%); margin-top: -3px; right: calc(-61/1206*100%);}
	#movie .pageTtl { width: calc(298/1206*100%); margin-bottom: calc(30/1206*100%);}	
	
	#movie .movielist { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center;}
	#movie .movielist li { width: calc(536/1206*100%); padding: calc(20/1206*100%) calc(40/1206*100%) calc(10/1206*100%); margin-bottom: 0; }
	#movie .movielist li .bgbox { width: calc(576/536*100%); left: calc(-20/536*100%); }
	
	#movie .movielist li.m1 { margin-left: calc(37/1206*100%); }
	#movie .movielist li.m2 { margin-right: calc(37/1206*100%); }
	#movie .movielist li.m3 { margin: 0 calc(200/1206*100%) calc(50/1366*100vw);}
}
@media screen and (min-width: 1367px) {
	#movie { background-size: 1920px; padding-bottom: 250px;}
	#movie .movielist li.m3 { margin-bottom: 50px;}
}



/* ----------------------------------------------------------------------------------------------------------------
#special
---------------------------------------------------------------------------------------------------------------- */
#special { background: #1c1c1c url(../special/_img/bg_v2_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#special .pageTtl { width: calc(329/650*100%); margin-bottom: calc(341/650*100%); position: relative;}
#special .charaSet { position: absolute; top: 0; left: 0; width: 100%;}
#special .charaSet img { position: absolute; top: 0; right: 0; }
#special .charaSet .cha1 { max-width: none; width: calc(526/650*100%); margin-top: calc(-62/650*100%); right: calc(-69/650*100%);}

#special .item_list {}
#special .item_list li { margin-bottom: calc(115/650*100%);}
#special .item_list li:last-child { margin-bottom: calc(30/650*100%);}

#special .btnBox { position: relative; width: calc(590/650*100%); background: rgba(161,0,0,0.40); margin-left: calc(30/650*100%); }
#special .btnBox::before { content: ""; display: block; width: calc(650/590*100%); height: 100%; background: rgba(0,0,0,0.75); position: absolute; top: 0; left: calc(-30/590*100%); 
	-webkit-transform: skewY(-6deg); transform: skewY(-6deg);}
#special .btnBox .btn { position: relative; width: 100%; }


#special .item_list li.item1 .btnBox { padding-top: calc(497/650*100%); }
#special .item_list li.item1 .btnBox .btn { position: absolute; top: 0; left: 0; max-width: none; width: 100%; margin-top: calc(-96/590*100%); }
#special .item_list li.item2 .btnBox { padding-top: calc(1/650*100%); }
#special .item_list li.item2 .btnBox .btn { margin-top: calc(-96/590*100%); }
#special .item_list li.item3 .btnBox { padding-top: calc(1/650*100%); }
#special .item_list li.item3 .btnBox .btn { margin-top: calc(-96/590*100%); }
#special .item_list li.item4 .btnBox { padding-top: calc(1/650*100%); }
#special .item_list li.item4 .btnBox .btn { margin-top: calc(-96/590*100%); }


#special .cs { max-width: none; width: calc(660/650*100%); margin-left: calc(-8/650*100%); }

@media screen and (min-width: 641px) {
	#special { background: url(../special/_img/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(200/1366*100%);}
	#special .pageTtl { width: calc(329/1206*100%); margin-bottom: calc(20/1206*100%);}	
	#special .charaSet .cha1 { width: calc(552/1206*100%); margin-top: calc(28/1206*100%); right: calc(80/1206*100%); }

	#special .item_list { letter-spacing: -.45em; width: 100%;}
	#special .item_list li { letter-spacing: normal; display: inline-block; vertical-align: top; margin-bottom: calc(15/1206*100%); width: calc(404/1206*100%); margin-right: calc(50/1206*100%); }
	#special .item_list li:last-child { margin-bottom: calc(15/1206*100%);}
	#special .item_list li.small { transform-origin: left top; -webkit-transform: scale(0.8); transform: scale(0.8);}

	#special .btnBox { width: 100%; margin-left: calc(20/404*100%); }
	#special .btnBox::before { width: calc(444/404*100%); left: calc(-20/404*100%); }
	#special .btnBox .btn { }

	#special .item_list li.item1 .btnBox { padding-top: calc(330/404*100%); }
	#special .item_list li.item1 .btnBox .btn { margin-top: calc(-66/404*100%); }
	#special .item_list li.item1 { margin-right: calc(-10/1206*100%);}
	#special .item_list li.item2 { margin-right: calc(-10/1206*100%);}
	#special .item_list li.item3 { margin-right: calc(-10/1206*100%);}
	#special .item_list li.item4 { margin-right: calc(500/1206*100%); margin-bottom: calc(100/1206*100%);}

	#special .cs { width: calc(570/1206*100%); margin-top: calc(-40/1206*100%); margin-left: calc(-9/1206*100%); }

}
@media screen and (min-width: 1367px) {
	#special { background-size: 1920px; padding-bottom: 200px;}
}

/* ----------------------------------------------------------------------------------------------------------------
#special > #campaign
---------------------------------------------------------------------------------------------------------------- */
#campaign { background: #1c1c1c url(../special/_img/campaign/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#campaign .pageTtl { width: calc(329/650*100%); margin-bottom: calc(66/650*100%); position: relative;}
#campaign .shikishi { position: absolute; top: 0; left: 0; width: 100%;}
#campaign .shikishi img { position: absolute; top: 0; left: calc(-50/650*100%); }
#campaign .shikishi img { max-width: none; width: calc(292/650*100%); margin-top: calc(206/650*100%); }
#campaign .hl { width: calc(632/650*100%); margin-left: calc(-5/650*100%); margin-bottom: calc(-30/650*100%); position: relative;}
#campaign .readtext { max-width: none; width: calc(667/650*100%); margin-left: calc(-10/650*100%); margin-bottom: calc(55/650*100%); position: relative;}


#campaign .campaignSet { padding-top: calc(32/750*100%);}
#campaign .campaignSet .campBox { }


#campaign .howto { position: relative; width: calc(610/650*100%); background: rgba(30,161,242,1.0); margin-left: calc(20/650*100%); margin-bottom: calc(80/650*100%); }
#campaign .howto::before { content: ""; display: block; width: calc(650/610*100%); height: 100%; background: rgba(9,13,96,0.6); position: absolute; top: 0; left: calc(-20/610*100%); 
	-webkit-transform: skewY(-6deg); transform: skewY(-6deg);}
#campaign .howto .ht_Box { position: relative; width: calc(570/610*100%); margin: 0 auto; padding-top: calc(1/610*100%); padding-bottom: calc(50/610*100%); }

#campaign .howto .ht_Box .ht_ttl { width: calc(230/570*100%); margin-top: calc(-32/570*100%); margin-bottom: calc(14/570*100%); }
#campaign .howto .ht_Box .ht_step { margin-bottom: calc(15/570*100%); }
#campaign .howto .ht_Box .ht_notes { text-indent: -1em; padding-left: 1em; line-height: 1.41; font-size: 1.2rem; margin-bottom: calc(15/570*100%); }
#campaign .howto .ht_Box .ht_notes span { color: #7ef1ff;}

#campaign .howto .ht_Box .ht_twbox { width: calc(570/570*100%); margin: 0 auto; }
#campaign .howto .ht_Box .btn_tw { width: calc(290/570*100%); margin: calc(20/570*100%) auto 0; }

#campaign .descriptionBox { margin-bottom: calc(60/650*100%); }
#campaign .descriptionBox .sub_hl { border-bottom: 2px solid #0c4061; margin-bottom: calc(10/650*100%); }
#campaign .descriptionBox .sub_hl span { display: block; border-bottom: 1px solid #0c4061; padding-bottom: calc(7/650*100%); margin-bottom: 1px;}
#campaign .descriptionBox .sub_hl span img { width: calc(400/650*100%); }

#campaign .descriptionBox .text { line-height: 1.61; font-size: 1.2rem; }
#campaign .descriptionBox .text span { color: #2bc6ff; }

#campaign .descriptionBox .dcp_list li { text-indent: -1em; padding-left: 1em; }
#campaign .descriptionBox .dcp_list li { line-height: 1.61; font-size: 1.2rem; }

@media screen and (min-width: 641px) {
	#campaign { background: #1a1b1c url(../special/_img/campaign/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(200/1366*100%);}
	#campaign .pageTtl { width: calc(329/1206*100%); margin-bottom: calc(26/1206*100%);}	
	#campaign .shikishi img { width: calc(426/1206*100%); margin-top: calc(117/1206*100%); left: calc(242/1206*100%); }
	#campaign .hl { width: calc(875/1206*100%); margin-left: calc(-5/1206*100%); margin-bottom: 0; }
	#campaign .readtext { width: calc(567/1206*100%); margin-left: calc(-10/1206*100%); margin-bottom: calc(0/1206*100%); }
	
	#campaign .campaignSet { padding-top: calc(98/1366*100%); margin-bottom: calc(30/1366*100%);}
	#campaign .campaignSet { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start; }
	#campaign .campaignSet .campBox { width: calc(603/1206*100%); }

	#campaign .campaignSet .campBox.howto { width: calc(540/1206*100%); margin-left: calc(20/603*100%); margin-bottom: calc(0/603*100%); }
	#campaign .howto::before { width: calc(580/540*100%); left: calc(-20/540*100%); }
	#campaign .howto .ht_Box { width: calc(500/540*100%); padding-top: calc(1/540*100%); padding-bottom: calc(50/540*100%); }

	#campaign .howto .ht_Box .ht_ttl { width: calc(186/500*100%); margin-top: calc(-26/500*100%); margin-bottom: calc(12/500*100%); margin-left: calc(-4/500*100%); }
	#campaign .howto .ht_Box .ht_step { margin-bottom: calc(12/500*100%); }
	#campaign .howto .ht_Box .ht_notes { font-size: 1.2rem; margin-bottom: calc(12/500*100%); }

	#campaign .howto .ht_Box .ht_twbox { width: 100%; }
	#campaign .howto .ht_Box .btn_tw { width: calc(290/500*100%); margin: calc(30/500*100%) auto 0; }

	#campaign .descriptionBox { margin-left: calc(23/603*100%); margin-bottom: calc(50/603*100%); }
	#campaign .descriptionBox:first-child { margin-top: calc(53/603*100%); }

	#campaign .descriptionBox .sub_hl { margin-bottom: calc(13/580*100%); }
	#campaign .descriptionBox .sub_hl span { padding-bottom: calc(7/580*100%); }
	#campaign .descriptionBox .sub_hl span img { width: calc(243/580*100%); }

	#campaign .descriptionBox .text { line-height: 1.61; font-size: 1.3rem; }
	#campaign .descriptionBox .dcp_list li { line-height: 1.61; font-size: 1.3rem; margin-bottom: calc(8/603*100%); }

	
}
@media screen and (min-width: 1367px) {
	#campaign { background-size: 1920px; padding-bottom: 200px;}
	#campaign .campaignSet { padding-top: 98px; margin-bottom: 30px;}
}

/* ----------------------------------------------------------------------------------------------------------------
#special > #music
---------------------------------------------------------------------------------------------------------------- */
#music { background: #000 url(../special/_img/music/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#music .pageTtl { width: calc(329/650*100%); margin-bottom: calc(33/650*100%); position: relative;}
#music .batch { position: absolute; top: 0; right: calc(10/650*100%); margin-top: calc(211/650*100%); width: calc(170/650*100%);}
#music .hl { width: calc(113/650*100%); margin-left: calc(-5/650*100%); margin-bottom: calc(-20/650*100%); position: relative;}
#music .readtext { width: calc(518/650*100%); margin-left: calc(-10/650*100%); margin-bottom: calc(35/650*100%); position: relative;}

#music .trackList { background: rgba(0,0,0,0.6); padding: calc(10/650*100%) 0;}
#music .trackList li { padding: 1px 0; border-bottom: 1px solid #1b1e25;}
#music .trackList li:first-child { border-top: 1px solid #1b1e25;}
#music .trackList a { display: block; position: relative; padding: calc(10/650*100%) 0;}
#music .trackList a::before { content: ""; display: block; width: calc(30/650*100%); height: 100%; position: absolute; top: 0; left: calc(15/650*100%); opacity: 0.6;
	background: url(../special/_img/music/icon_play.png) center center no-repeat; background-size: contain;}
#music .trackList a .mTitle { display: block; width: calc(450/650*100%); margin-left: calc(60/650*100%);}
#music .trackList a .mType { display: block; width: calc(115/650*100%); position: absolute; top: 0; right: calc(20/650*100%); margin-top: calc(20/650*100%);}

#music .trackList a.active { background: rgba(0,108,158,0.8);}
#music .trackList a.active::before { opacity: 1.0; background: url(../special/_img/music/icon_stop.png) center center no-repeat; background-size: contain;}

#music .trackList a { transition: 0.4s; }
#music .trackList a:hover { background: rgba(0,108,158,0.8); }

/*
#music .trackList a { animation: asd 2s infinite linear both; }
@keyframes asd {
	from { background: #fff; }
	to { background: #f00;  }
}
*/
@media screen and (min-width: 641px) {
	#music { background: #000 url(../special/_img/music/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(200/1366*100%);}
	#music .pageTtl { width: calc(329/1206*100%); margin-bottom: calc(183/1206*100%);}
	#music .batch { right: calc(2/1206*100%); margin-top: calc(21/1206*100%); width: calc(170/1206*100%); }
	#music .hl { width: calc(113/1206*100%); margin-left: calc(-4/1206*100%); margin-bottom: calc(-27/1206*100%); }
	#music .readtext { width: calc(480/1206*100%); margin-left: calc(-10/1206*100%); margin-bottom: calc(0/1206*100%); }
	
	#music .trackList { width: calc(470/1206*100%); padding: calc(10/1206*100%) 0; position: absolute; top: 0; right: 0; margin-top: calc(202/1206*100%);}
	#music .trackList li { }
	#music .trackList a { padding: calc(4/470*100%) 0;}
	#music .trackList a::before { width: calc(20/470*100%); left: calc(20/470*100%); opacity: 0.6;}
	#music .trackList a .mTitle { width: calc(270/470*100%); margin-left: calc(50/470*100%);}
	#music .trackList a .mType { width: calc(90/470*100%); right: calc(42/470*100%); margin-top: calc(8/470*100%);}

	
}
@media screen and (min-width: 1367px) {
	#music { background-size: 1920px; padding-bottom: 200px;}
}



/* ----------------------------------------------------------------------------------------------------------------
#special > #fankit
---------------------------------------------------------------------------------------------------------------- */
#fankit { background: #000919 url(../special/_img/fankit/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#fankit .pageTtl { width: calc(329/650*100%); margin-bottom: calc(24/650*100%); position: relative;}
#fankit .hl { width: calc(192/650*100%); margin-left: calc(-6/650*100%); margin-bottom: calc(-13/650*100%); position: relative;}
#fankit .readtext { width: calc(569/650*100%); margin-left: calc(-10/650*100%); margin-bottom: calc(63/650*100%); position: relative;}
#fankit .readtext a { display: block; position: absolute; top: 0; left: calc(0/569*100%); margin-top: calc(125/569*100%); width: calc(549/569*100%); height: auto; padding-top: calc(40/569*100%); 
	-webkit-transform: skewY(-6deg); transform: skewY(-6deg);
	/*background: rgba(255,0,0,0.6);*/
	cursor: pointer;
}

#fankit .section_block {}

#fankit .block { position: relative; width: calc(590/650*100%); background: rgba(161,0,0,0.6); padding: calc(20/650*100%) calc(20/650*100%) calc(20/650*100%); margin: 0 auto;}
#fankit .block::before { content: ""; display: block; background: rgba(0,0,0,0.55); width: calc(650/590*100%); height: 100%; position: absolute; top: 0; left: calc(-30/590*100%); 
	-webkit-transform: skewY(-6deg); transform: skewY(-6deg);}
#fankit .block .subhl { position: relative; }


#fankit #wall { margin-bottom: calc(100/650*100%);}
#fankit #wall .subhl { width: calc(117/550*100%); margin-top: calc(-41/550*100%); margin-bottom: calc(15/550*100%);}
#fankit #wall .wallList { position: relative;
	display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start; }
#fankit #wall .wallList .wallItem { position: relative; width: calc(270/550*100%); margin-bottom: calc(10/550*100%);}
#fankit #wall .wallList .wallItem .thumb { margin-bottom: calc(10/270*100%);}
#fankit #wall .wallList .wallItem .wallBtnList { position: relative; 
	display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
#fankit #wall .wallList .wallItem .wallBtnList li { position: relative; width: calc(130/270*100%); margin-bottom: calc(10/270*100%); font-size: calc(16/750*100vw);}
#fankit #wall .wallList .wallItem .wallBtnList li a { position: relative; display: block; color: #fff; text-decoration: none; border: 1px solid #3d3d3d; background: #101010; text-align: center; padding: calc(10/128*100%) calc(5/128*100%);}
#fankit #wall .wallList .wallItem .wallBtnList li a::before  { content: ""; display: block; width: 100%; height: 100%; border: 5px solid #000; position: absolute; top: 0; left: 0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

#fankit #twicon { margin-bottom: calc(100/650*100%);}
#fankit #twicon .subhl { width: calc(472/550*100%); margin-top: calc(-69/550*100%); margin-bottom: calc(20/550*100%);}
#fankit #twicon .twiconList { position: relative;
	display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; align-items: flex-start; }
#fankit #twicon .twiconList li { width: calc(130/550*100%); margin-right: calc(10/550*100%); margin-bottom: calc(10/550*100%);}
#fankit #twicon .twiconList li:nth-child(4n) { margin-right: 0;}
#fankit #twicon .twiconList li img { border-radius: 200px;}

#fankit #twheader { margin-bottom: calc(0/650*100%);}
#fankit #twheader .subhl { width: calc(477/550*100%); margin-top: calc(-74/550*100%); margin-bottom: calc(20/550*100%);}
#fankit #twheader .twheaderList { position: relative;
	display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start; }
#fankit #twheader .twheaderList li { width: 100%; margin-bottom: calc(10/550*100%);}

@media screen and (min-width: 641px) {
	#fankit { background: #000 url(../special/_img/fankit/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(260/1366*100%);}
	#fankit .pageTtl { width: calc(329/1206*100%); margin-bottom: calc(-11/1206*100%);}
	#fankit .hl { width: calc(192/1206*100%); margin-left: calc(-5/1206*100%); margin-bottom: calc(-71/1206*100%); }
	#fankit .readtext { width: calc(1177/1206*100%); margin-left: calc(-8/1206*100%); margin-bottom: calc(37/1206*100%); }
	#fankit .readtext a { left: calc(290/1177*100%); margin-top: calc(60/1177*100%); width: calc(520/1177*100%); height: auto; padding-top: calc(40/1177*100%); }
	
	#fankit .section_block {}

	#fankit .block { width: calc(1166/1206*100%); padding: calc(20/1206*100%) calc(20/1206*100%) calc(20/1206*100%); }
	#fankit .block::before { width: calc(1206/1166*100%); height: 100%; left: calc(-20/1166*100%); }

	#fankit #wall { margin-bottom: calc(80/1206*100%);}
	#fankit #wall .subhl { width: calc(94/1166*100%); margin-top: calc(-2/1166*100%); margin-bottom: calc(19/1166*100%);}
	#fankit #wall .wallList { }
	#fankit #wall .wallList .wallItem { width: calc(362/1126*100%); margin-bottom: 0;}
	#fankit #wall .wallList .wallItem .thumb { margin-bottom: calc(10/362*100%);}
	#fankit #wall .wallList .wallItem .wallBtnList { }
	#fankit #wall .wallList .wallItem .wallBtnList li { width: calc(176/362*100%); margin-bottom: calc(10/362*100%); font-size: calc(13/1366*100vw);}
	#fankit #wall .wallList .wallItem .wallBtnList li a { padding: calc(8/176*100%) calc(5/176*100%);}
	
	#fankit #wall .wallList .wallItem .wallBtnList li a::before { border: 5px solid #000; }
	#fankit #wall .wallList .wallItem .wallBtnList li a::before { -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; }
	#fankit #wall .wallList .wallItem .wallBtnList li a:hover { border-color: #616161; }
	#fankit #wall .wallList .wallItem .wallBtnList li a:hover::before { border: 5px solid #101010; }

	#fankit #twicon { margin-bottom: calc(80/1206*100%);}
	#fankit #twicon .subhl { width: calc(380/1166*100%); margin-top: calc(-26/1166*100%); margin-bottom: calc(20/1166*100%);}
	#fankit #twicon .twiconList {  }
	#fankit #twicon .twiconList li { width: calc(148/1126*100%); margin-right: calc(10/1126*100%); margin-bottom: calc(15/1126*100%);}
	#fankit #twicon .twiconList li:nth-child(4n) {margin-right: calc(10/1126*100%); }
	#fankit #twicon .twiconList li:nth-child(7n) { margin-right: 0;}

	#fankit #twheader { margin-bottom: calc(0/1206*100%);}
	#fankit #twheader .subhl { width: calc(384/1166*100%); margin-top: calc(-29/1166*100%); margin-bottom: calc(20/1166*100%);}
	#fankit #twheader .twheaderList { }
	#fankit #twheader .twheaderList li { width: calc(553/1126*100%); margin-bottom: calc(20/1166*100%);}

}
@media screen and (min-width: 1367px) {
	#fankit { background-size: 1920px; padding-bottom: 260px;}
	#fankit #wall .wallList .wallItem .wallBtnList li { font-size: 1.3rem;}
}


/* ----------------------------------------------------------------------------------------------------------------
#spec
---------------------------------------------------------------------------------------------------------------- */
#spec { background: #3b0001 url(../spec/_img/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#spec .charaSet { position: absolute; top: 0; left: 0; width: 100%;}
#spec .charaSet img { position: absolute; top: 0; right: 0; }
#spec .charaSet .cha1 { max-width: none; width: calc(750/650*100%); margin-top: calc(-66/650*100%); right: calc(-50/650*100%);}
#spec .pageTtl { width: calc(298/650*100%); margin-bottom: calc(330/650*100%); position: relative;}

#spec .about { position: relative; }

#spec .specSet { position: relative; background: url(../spec/_img/bg2_sp.jpg) top center no-repeat; background-size: 100%; padding: calc(100/750*100%) 0 calc(50/750*100%);}
#spec .specSet .specBox { position: relative; width: calc(606/650*100%); background: rgba(161,0,0,0.40); padding: calc(60/650*100%) calc(30/650*100%) calc(30/650*100%); margin: 0 auto;}
#spec .specSet .specBox .bgbox { background: rgba(0,0,0,0.75); width: calc(650/606*100%); height: 100%; position: absolute; top: 0; left: calc(-22/650*100%); 
	-webkit-transform: skewY(-6deg); transform: skewY(-6deg);}

#spec .specSet .listBox { margin-bottom: calc(80/650*100%); }
#spec .specSet .specBox .speclist { position: relative; }
#spec .specSet .specBox .speclist > li { margin-bottom: calc(20/546*100%); }
#spec .specSet .specBox .speclist > li dl { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; align-items: flex-start; }
#spec .specSet .specBox .speclist > li dl { font-size: calc(18/750*100vw); }
#spec .specSet .specBox .speclist > li dt { background: #312d1d; padding: calc(6/546*100%); white-space: nowrap; width: calc(160/546*100%); text-align: center; }
#spec .specSet .specBox .speclist > li dd { padding: calc(6/546*100%) calc(10/546*100%); width: calc(380/546*100%);}
#spec .specSet .specBox .speclist > li dd .sml { display: inline; font-size: calc(14/750*100vw);}

#spec .specSet .infoBox { padding: calc(50/650*100%) calc(17/650*100%) calc(30/650*100%); margin-bottom: calc(0/650*100%); }
#spec .specSet .infoBox .specinfo { position: relative; }

#spec .specSet .infoBox .specinfo .releasedate { width: calc(343/572*100%); margin: 0 auto calc(30/572*100%);}
#spec .specSet .infoBox .specinfo .reserv { }
#spec .specSet .infoBox .specinfo .reserv .ttl { width: 100%; margin: 0 auto calc(15/572*100%); }
#spec .specSet .infoBox .specinfo .reserv dd { width: 100%; margin: 0 auto; 
	display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
#spec .specSet .infoBox .specinfo .reserv dd .btn { width: calc(270/572*100%); }
#spec .specSet .infoBox .specinfo .reserv dd .btn.b_dl { margin-top: calc(20/750*100vw); margin-bottom: calc(20/572*100%); margin-left: calc(151/572*100%); }

#spec .unity { position: relative; font-size: calc(14/750*100vw);}
#spec .unity p { line-height: 1.61; word-break: break-all; }
#spec .unity span ,
#spec .unity span a { color: #818181;}

@media screen and (min-width: 641px) {
	#spec { background: url(../spec/_img/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(200/1366*100%);}
	#spec .charaSet .cha1 { width: calc(644/1206*100%); margin-top: calc(29/1206*100%); right: calc(25/1206*100%); z-index: 4;}
	#spec .pageTtl { width: calc(298/1206*100%); margin-bottom: calc(-28/1206*100%);}	

	#spec .about { width: calc(631/1206*100%); margin-left: calc(-9/1206*100%); margin-bottom: calc(188/1206*100%); }

	#spec .specSet { background: url(../spec/_img/bg2_pc.png) top center no-repeat; background-size: 100%; padding: calc(130/1366*100%) 0 0; margin-top: calc(-200/1366*100%); }
	#spec .specSet .section_inner { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start; }
	
	#spec .specSet .specBox { width: calc(536/1206*100%); padding: calc(45/1206*100%) calc(10/1206*100%) calc(30/1206*100%); }
	#spec .specSet .specBox .bgbox { width: calc(576/536*100%); left: calc(-20/536*100%); }

	#spec .specSet .listBox { margin: calc(64/1366*100vw) 0 0 calc(20/1366*100%); }
	#spec .specSet .specBox .speclist > li { margin-bottom: calc(7/516*100%); }
	#spec .specSet .specBox .speclist > li:last-child { margin-bottom: 0; }
	#spec .specSet .specBox .speclist > li dl { font-size: calc(13/1366*100vw); font-size: 0.95168vw; }
	#spec .specSet .specBox .speclist > li dt { padding: calc(6/516*100%) calc(5/516*100%) calc(4/516*100%); width: calc(100/516*100%); min-width: 70px;}
	#spec .specSet .specBox .speclist > li dd { padding: calc(6/516*100%) 0px calc(4/516*100%) calc(10/516*100%); width: calc(410/516*100%);}
	#spec .specSet .specBox .speclist > li dd .sml { font-size: calc(11/1366*100vw);}

	#spec .specSet .infoBox { padding: calc(40/1366*100%) 0 calc(10/1366*100%); margin: 0 calc(20/1366*100%) 0 0; }

	#spec .specSet .infoBox .specinfo .releasedate { width: calc(343/536*100%); margin: 0 auto calc(15/536*100%);}
	#spec .specSet .infoBox .specinfo .reserv { }
	#spec .specSet .infoBox .specinfo .reserv .ttl { width: 100%; margin: 0 auto calc(10/536*100%); }
	#spec .specSet .infoBox .specinfo .reserv dd { }
	#spec .specSet .infoBox .specinfo .reserv dd .btn { width: calc(260/536*100%); }
	#spec .specSet .infoBox .specinfo .reserv dd .btn.btnoff { opacity: 0.5; }
	#spec .specSet .infoBox .specinfo .reserv dd .btn.b_dl { margin-top: calc(20/1366*100vw); margin-bottom: 0; margin-left: calc(138/536*100%); }

	#spec .unity { font-size: calc(11/1366*100vw); margin-top: calc(30/1206*100%); margin-left: calc(30/1206*100%); position: relative; z-index: 9091;}
	#spec .unity p { line-height: 1.61; color: #c6c6c6;}
}
@media screen and (min-width: 1367px) {
	#spec { background-size: 1920px; padding-bottom: 200px;}

	#spec .specSet { padding: 130px 0 0; margin-top: -200px; }
	
	#spec .specSet .listBox { margin-top: 64px; }
	#spec .specSet .specBox .speclist > li dl { font-size: 1.3rem; }
	#spec .specSet .specBox .speclist > li dd .sml { font-size: 1.1rem;}
	
	#spec .specSet .infoBox .specinfo .reserv dd .btn.b_dl { margin-top: 20px; }

	#spec .unity { font-size: 1.1rem;}

}





/* ----------------------------------------------------------------------------------------------------------------
#license
---------------------------------------------------------------------------------------------------------------- */
#license { background: #1c1c1c url(../license/_img/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#license .pageTtl { width: calc(321/650*100%); margin-bottom: calc(20/650*100%); position: relative;}

#license .license-block { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
#license .license-block { position: relative; font-size: 1.2rem; color: #cbcbcb; }

#license .license-block .subhl { text-align: center; font-size: 1.8rem; font-weight: bold; line-height: 1.41; margin-bottom:  3.0rem; }
#license .license-block .readtext { line-height: 1.81; margin-bottom: 3.0rem;}

#license .license-block .licenseList {}
#license .license-block .licenseList > li { line-height: 1.81; margin-bottom: 4.0rem; }

#license .license-block .licenseList .itemBlock {}
#license .license-block .licenseList .itemBlock dt { font-weight: bold;}
#license .license-block .licenseList .itemBlock .ulList { margin-top: 1.0em; margin-bottom: 1.0em; }
#license .license-block .licenseList .itemBlock .ulList li { text-indent: -1.5em; padding-left: 1.5em; line-height: 1.41; margin-top: 0.4em;}

@media screen and (min-width: 641px) {
	#license { background: url(../license/_img/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(250/1366*100%);}
	#license .pageTtl { width: calc(321/1206*100%); margin-bottom: calc(-18/1206*100%);}	

	#license .license-block { font-size: 1.3rem; }

	#license .license-block .subhl { font-size: 2.6rem; margin-bottom: 4.0rem; }
	#license .license-block .readtext { margin-bottom: 4.0rem;}

	#license .license-block .licenseList {}
	#license .license-block .licenseList > li { line-height: 2.01; margin-bottom: 4.0rem; }

	#license .license-block .licenseList .itemBlock .ulList { margin-top: 0.8em; margin-bottom: 0.8em; }

}
@media screen and (min-width: 1367px) {
	#license { background-size: 1920px; padding-bottom: 250px;}

}






/* ----------------------------------------------------------------------------------------------------------------
#characters
---------------------------------------------------------------------------------------------------------------- */
#characters { background: #000;}
#characters .pageTtl { width: calc(496/650*100%); margin-bottom: calc(114/650*100%); position: relative;}
#characters.mainChara.c_Index .pageTtl { margin-bottom: calc(-150/650*100%); }
#characters.soldiersChara.s_Index .pageTtl { margin-bottom: calc(-115/650*100%); }
#characters.officersChara.o_Index .pageTtl { margin-bottom: calc(-126/650*100%); }

#characters .charaBlock { width: calc(536/650*100%); margin-left: calc(20/650*100%); padding-top: calc(397/650*100%); margin-bottom: calc(126/650*100%); position: relative; }
#characters .charaBlock::before { content: ""; display: block; width: calc(576/536*100%); height: 100%; background: rgba(0,0,0,0.75); position: absolute; top: 0; left: calc(-20/536*100%); 
	-webkit-transform: skewY(-6deg); transform: skewY(-6deg);}
#characters .charaBlock .charaPic { position: absolute; top: 0; left: 0; max-width: none; }
#characters .charaBlock .charaText { position: absolute; top: 0; left: 0; width: 100%; margin-top: calc(-50/536*100%); }
#characters .piclist { width: 100%; position: relative; margin-bottom: calc(35/650*100%);}
#characters .piclist li { position: relative; width: calc(330/650*100%); }
#characters .piclist li.pic2 { position: absolute; top: 0; right: 0; margin-top: calc(-20/650*100%);}


/*#characters .navSet { background: rgba(255,255,255,0.2);}*/
#characters.mainChara .navSet .hl { width: calc(494/650*100%); margin: 0 auto calc(22/650*100%);}
#characters.soldiersChara .navSet .hl { width: calc(494/650*100%); margin: 0 auto calc(22/650*100%);}
#characters.officersChara .navSet .hl { width: calc(494/650*100%); margin: 0 auto calc(22/650*100%);}

#characters .navSet .c_nav_wrap { width: calc(650/750*100%); margin: 0 auto calc(40/750*100%); display: block; position: relative; }
#characters .navSet .c_nav_wrap .c_nav { width: 100%; position: relative; }
#characters .navSet .c_nav_wrap .c_nav { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
#characters.mainChara .navSet .c_nav_wrap .c_nav { -webkit-justify-content: space-between; justify-content: space-between;}
#characters.soldiersChara .navSet .c_nav_wrap .c_nav { -webkit-justify-content: center; justify-content: center;}
#characters.officersChara .navSet .c_nav_wrap .c_nav { -webkit-justify-content: center; justify-content: center;}
#characters .navSet .c_nav_wrap .c_nav li { width: calc(100/650*100%); }
#characters.mainChara .navSet .c_nav_wrap .c_nav li { }
#characters.soldiersChara .navSet .c_nav_wrap .c_nav li { margin: 0 calc(5/650*100%); }
#characters.officersChara .navSet .c_nav_wrap .c_nav li { margin: 0 calc(5/650*100%); }
#characters .navSet .c_nav_wrap .c_nav li a { display: block; width: 100%; border: 1px solid #000; background: #85753e; padding: 1px 3px;}
#characters .navSet .c_nav_wrap .c_nav li div { width: 100%; height: auto; padding-top: calc(96/92*100%);}
#characters .navSet .c_nav_wrap .c_nav li div span { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0);}

#characters.mainChara .navSet .c_nav_wrap .c_nav .c_nav_btn01 a div { background: url(../characters/_img/main/c_nav01.jpg) center center no-repeat; background-size: 100% auto; }
#characters.mainChara .navSet .c_nav_wrap .c_nav .c_nav_btn02 a div { background: url(../characters/_img/main/c_nav02.jpg) center center no-repeat; background-size: 100% auto; }
#characters.mainChara .navSet .c_nav_wrap .c_nav .c_nav_btn03 a div { background: url(../characters/_img/main/c_nav03.jpg) center center no-repeat; background-size: 100% auto; }
#characters.mainChara .navSet .c_nav_wrap .c_nav .c_nav_btn04 a div { background: url(../characters/_img/main/c_nav04.jpg) center center no-repeat; background-size: 100% auto; }
#characters.mainChara .navSet .c_nav_wrap .c_nav .c_nav_btn05 a div { background: url(../characters/_img/main/c_nav05.jpg) center center no-repeat; background-size: 100% auto; }
#characters.mainChara .navSet .c_nav_wrap .c_nav .c_nav_btn06 a div { background: url(../characters/_img/main/c_nav06.jpg) center center no-repeat; background-size: 100% auto; }

#characters.soldiersChara .navSet .c_nav_wrap .c_nav .c_nav_btn01 a div { background: url(../characters/_img/soldiers/c_nav01.jpg) center center no-repeat; background-size: 100% auto; }
#characters.soldiersChara .navSet .c_nav_wrap .c_nav .c_nav_btn02 a div { background: url(../characters/_img/soldiers/c_nav02.jpg) center center no-repeat; background-size: 100% auto; }
#characters.soldiersChara .navSet .c_nav_wrap .c_nav .c_nav_btn03 a div { background: url(../characters/_img/soldiers/c_nav03.jpg) center center no-repeat; background-size: 100% auto; }
#characters.soldiersChara .navSet .c_nav_wrap .c_nav .c_nav_btn04 a div { background: url(../characters/_img/soldiers/c_nav04.jpg) center center no-repeat; background-size: 100% auto; }

#characters.officersChara .navSet .c_nav_wrap .c_nav .c_nav_btn01 a div { background: url(../characters/_img/officers/c_nav01.jpg) center center no-repeat; background-size: 100% auto; }
#characters.officersChara .navSet .c_nav_wrap .c_nav .c_nav_btn02 a div { background: url(../characters/_img/officers/c_nav02.jpg) center center no-repeat; background-size: 100% auto; }
#characters.officersChara .navSet .c_nav_wrap .c_nav .c_nav_btn03 a div { background: url(../characters/_img/officers/c_nav03.jpg) center center no-repeat; background-size: 100% auto; }

#characters .navSet .m_nav_wrap { width: 100%; margin: 0 auto calc(10/750*100%); background: url(../characters/_img/m_nav_bg_sp.png) top center no-repeat; background-size: 100%; position: relative;}
#characters .navSet .m_nav_wrap .m_nav { width: calc(650/750*100%); margin: 0 auto; position: relative; }
#characters .navSet .m_nav_wrap .m_nav { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between;}
#characters .navSet .m_nav_wrap .m_nav li { width: calc(200/650*100%); }
#characters .navSet .m_nav_wrap .m_nav li a { display: block; width: 100%; background: #760000; padding-top: calc(90/200*100%); background-repeat: no-repeat;}
#characters .navSet .m_nav_wrap .m_nav li a.active { background-color: #000; }
#characters .navSet .m_nav_wrap .m_nav li span { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0);}

#characters .navSet .m_nav_wrap .m_nav .m_nav_btn01 a { background-image: url(../characters/_img/m_nav01_sp.png); background-size: 100% auto; }
#characters .navSet .m_nav_wrap .m_nav .m_nav_btn02 a { background-image: url(../characters/_img/m_nav02_sp.png); background-size: 100% auto; }
#characters .navSet .m_nav_wrap .m_nav .m_nav_btn03 a { background-image: url(../characters/_img/m_nav03_sp.png); background-size: 100% auto; }


@media screen and (min-width: 641px) {
	#characters .pageTtl { width: calc(496/1206*100%); margin-bottom: calc(131/1206*100%);}
	#characters.mainChara.c_Index .pageTtl { margin-bottom: calc(-225/1206*100%); }
	#characters.soldiersChara.s_Index .pageTtl { margin-bottom: calc(-225/1206*100%); }
	#characters.officersChara.o_Index .pageTtl { margin-bottom: calc(-225/1206*100%); }
	
	#characters .charaBlock { width: calc(536/1206*100%); margin-left: calc(20/1206*100%); padding-top: calc(317/1206*100%); margin-bottom: calc(45/1206*100%); }
	#characters .charaBlock::before { width: calc(576/536*100%); left: calc(-20/536*100%); }
	#characters .charaBlock .charaPic { }
	#characters .charaBlock .charaText { margin-top: calc(-40/536*100%); }
	#characters .piclist { position: absolute; top: 0; right: 0; margin-bottom: 0;}
	#characters .piclist li { position: absolute; top: 0; right: 0; width: calc(380/1206*100%); }
	#characters .piclist li.pic1 { margin-top: calc(315/1206*100%); z-index: 2;}
	#characters .piclist li.pic2 { right: calc(164/1206*100%); margin-top: calc(519/1206*100%);}

	#characters .navSet { margin-bottom: calc(-168/1366*100%); }
	#characters.mainChara .navSet .hl { max-width: 548px; width: calc(548/1206*100%); position: relative; left: 50%; margin: 0 0 calc(-128/1206*100%) calc(80/1206*100%);}
	#characters.soldiersChara .navSet .hl { max-width: 548px; width: calc(548/1206*100%); position: relative; left: 50%; margin: 0 0 calc(-128/1206*100%) calc(80/1206*100%);}
	#characters.officersChara .navSet .hl { max-width: 548px; width: calc(548/1206*100%); position: relative; left: 50%; margin: 0 0 calc(-128/1206*100%) calc(80/1206*100%);}

	#characters .navSet .c_nav_wrap { width: calc(540/1366*100%); margin: 0; position: absolute; top: 0; left: 50%; margin-top: calc(50/1366*100%); margin-left: calc(70/1366*100%); }
	#characters.mainChara.c_Index .navSet .c_nav_wrap { display: none;}
	#characters.soldiersChara.s_Index .navSet .c_nav_wrap { display: none;}
	#characters.officersChara.o_Index .navSet .c_nav_wrap { display: none;}
	#characters .navSet .c_nav_wrap .c_nav { transform: rotate(-6deg);}
	#characters.mainChara .navSet .c_nav_wrap .c_nav { -webkit-justify-content: flex-end; justify-content: flex-end;}
	#characters.soldiersChara .navSet .c_nav_wrap .c_nav { -webkit-justify-content: flex-end; justify-content: flex-end;}
	#characters.officersChara .navSet .c_nav_wrap .c_nav { -webkit-justify-content: flex-end; justify-content: flex-end;}
	#characters .navSet .c_nav_wrap .c_nav li { width: calc(80/540*100%); }
	#characters.mainChara .navSet .c_nav_wrap .c_nav li { margin: 0 0 0 calc(10/540*100%); }
	#characters.soldiersChara .navSet .c_nav_wrap .c_nav li { margin: 0 0 0 calc(10/540*100%); }
	#characters.officersChara .navSet .c_nav_wrap .c_nav li { margin: 0 0 0 calc(10/540*100%); }
	#characters .navSet .c_nav_wrap .c_nav li div { padding-top: calc(76/72*100%);}

	#characters .navSet .m_nav_wrap { margin: 0 auto calc(0/1366*100%); background: url(../characters/_img/m_nav_bg_pc.png) top center no-repeat; background-size: calc(1920/1366*100%); 
		padding-bottom: calc(150/1366*100%);}
	#characters .navSet .m_nav_wrap .m_nav { width: calc(497/1366*100%); left: 50%; margin: 0 0 0 calc(102/1366*100%); z-index: 9009; position: relative;}
	#characters .navSet .m_nav_wrap .m_nav { transform: rotate(-6deg);}
	#characters .navSet .m_nav_wrap .m_nav li { width: auto;}
	#characters .navSet .m_nav_wrap .m_nav li a { display: block; width: 100%; background: #760000; padding-top: calc(90/200*100%); background-repeat: no-repeat;}
	#characters .navSet .m_nav_wrap .m_nav li a.active ,
	#characters .navSet .m_nav_wrap .m_nav li a:hover { background-color: #000; }
	
	#characters .navSet .m_nav_wrap .m_nav .m_nav_btn01 { width: calc(255/497*100%); margin-top: calc(70/497*100%) }
	#characters .navSet .m_nav_wrap .m_nav .m_nav_btn01 a { background-image: url(../characters/_img/m_nav01_pc.png); background-size: 100% auto; padding-top: calc(66/255*100%); }
	#characters .navSet .m_nav_wrap .m_nav .m_nav_btn02 { width: calc(88/497*100%); margin-top: calc(70/497*100%) }
	#characters .navSet .m_nav_wrap .m_nav .m_nav_btn02 a { background-image: url(../characters/_img/m_nav02_pc.png); background-size: 100% auto; padding-top: calc(66/88*100%); }
	#characters .navSet .m_nav_wrap .m_nav .m_nav_btn03 { width: calc(134/497*100%); margin-top: calc(70/497*100%) }
	#characters .navSet .m_nav_wrap .m_nav .m_nav_btn03 a { background-image: url(../characters/_img/m_nav03_pc.png); background-size: 100% auto; padding-top: calc(66/134*100%); }

}
@media screen and (min-width: 1367px) {
	#characters .navSet { margin-bottom: -168px; }
	#characters.mainChara .navSet .hl { margin-bottom: -128px; margin-left: 80px;}
	#characters.soldiersChara .navSet .hl { margin-bottom: -128px; margin-left: 80px;}
	#characters.officersChara .navSet .hl { margin-bottom: -128px; margin-left: 80px;}
	#characters .navSet .c_nav_wrap { width: 540px; margin-top: 50px; }
	#characters .navSet .m_nav_wrap { background-size: 1920px; padding-bottom: 150px;}
	#characters .navSet .m_nav_wrap .m_nav { width: 497px; margin-left: 102px; }
	#characters .navSet .m_nav_wrap .m_nav .m_nav_btn01 { width: 255px; margin-top: 70px; }
	#characters .navSet .m_nav_wrap .m_nav .m_nav_btn02 { width: 88px; margin-top: 70px; }
	#characters .navSet .m_nav_wrap .m_nav .m_nav_btn03 { width: 134px; margin-top: 70px; }
}




/* #svg-block
---------------------------------------------------------------------------------------------------------------- */
/* SPのみ */
#characters.mainChara.c_Index .visual { position: relative; margin-bottom: calc(33/750*100%);}
#characters.soldiersChara.s_Index .visual { position: relative; margin-bottom: calc(46/750*100%);}
#characters.officersChara.o_Index .visual { position: relative; margin-bottom: calc(0/750*100%);}
/* PCのみ */
#svg-block { display: none; position: relative; width: 100%; margin: 0 auto; margin-top: 0; }
#svg-block:before { content:""; display: block; padding-top: calc(600/750*100%); }
#svg-box { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }

#svg-box .btn_alpha { opacity: 0.0; cursor: pointer;}
#svg-box .btn_alpha path { fill-opacity: 0; cursor: pointer;}
#svg-box .pic { -webkit-transform-origin: center; transform-origin: center;}
#svg-box .name { opacity: 0.0; -webkit-transform-origin: center; transform-origin: center;}
@media screen and (min-width: 641px) {
	#svg-block { display: block; max-width: 1206px; width: calc(1206/1366*100%); margin: 0 auto; margin-top: 0; margin-bottom: calc(-380/1366*100%); }
	#svg-block:before { padding-top: calc(1100/1206*100%); }
	#svg-box { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
}
@media screen and (min-width: 1367px) {
	#svg-block { width: 1206px; left: 50%; margin-left: -603px; margin-bottom: -380px; }
}
/*
#svg-box .btn_alpha { opacity: 0.4; fill:#f00;}
#svg-box .btn_alpha path { fill-opacity: 1; }
*/



/* 個別 */
#characters.mainChara { background: url(../characters/_img/main/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#characters.mainChara.c_Neku .charaBlock { background: #483587; }
#characters.mainChara.c_Neku .charaBlock .charaPic { width: calc(502/536*100%); margin-top: calc(-348/536*100%); left: calc(250/536*100%); }
#characters.mainChara.c_Shiki .charaBlock { background: #6b2f35; }
#characters.mainChara.c_Shiki .charaBlock .charaPic { width: calc(473/536*100%); margin-top: calc(-255/536*100%); left: calc(198/536*100%); }
#characters.mainChara.c_Beat .charaBlock { background: #634226; }
#characters.mainChara.c_Beat .charaBlock .charaPic { width: calc(562/536*100%); margin-top: calc(-272/536*100%); left: calc(212/536*100%); }
#characters.mainChara.c_Rhyme .charaBlock { background: #814933; }
#characters.mainChara.c_Rhyme .charaBlock .charaPic { width: calc(240/536*100%); margin-top: calc(-199/536*100%); left: calc(350/536*100%); }
#characters.mainChara.c_Joshua .charaBlock { background: #4d4420; }
#characters.mainChara.c_Joshua .charaBlock .charaPic { width: calc(589/536*100%); margin-top: calc(-237/536*100%); left: calc(140/536*100%); }
#characters.mainChara.c_Hanekoma .charaBlock { background: #494949; }
#characters.mainChara.c_Hanekoma .charaBlock .charaPic { width: calc(337/536*100%); margin-top: calc(-266/536*100%); left: calc(313/536*100%); }

#characters.soldiersChara { background: url(../characters/_img/soldiers/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#characters.soldiersChara.c_Yashiro .charaBlock { background: #364d62; }
#characters.soldiersChara.c_Yashiro .charaBlock .charaPic { width: calc(585/536*100%); margin-top: calc(-227/536*100%); left: calc(182/536*100%); }
#characters.soldiersChara.c_Kariya .charaBlock { background: #543a47; }
#characters.soldiersChara.c_Kariya .charaBlock .charaPic { width: calc(464/536*100%); margin-top: calc(-258/536*100%); left: calc(266/536*100%); }
#characters.soldiersChara.c_Higashizawa .charaBlock { background: #364d62; }
#characters.soldiersChara.c_Higashizawa .charaBlock .charaPic { width: calc(690/536*100%); margin-top: calc(-303/536*100%); left: calc(43/536*100%); }
#characters.soldiersChara.c_Koko .charaBlock { background: #ae7791; }
#characters.soldiersChara.c_Koko .charaBlock .charaPic { width: calc(355/536*100%); margin-top: calc(-201/536*100%); left: calc(336/536*100%); }

#characters.officersChara { background: url(../characters/_img/officers/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-bottom: calc(250/750*100%);}
#characters.officersChara.c_Minamimoto .charaBlock { background: #676a6b; }
#characters.officersChara.c_Minamimoto .charaBlock .charaPic { width: calc(316/536*100%); margin-top: calc(-234/536*100%); left: calc(313/536*100%); }
#characters.officersChara.c_Konishi .charaBlock { background: #5a4a2a; }
#characters.officersChara.c_Konishi .charaBlock .charaPic { width: calc(235/536*100%); margin-top: calc(-317/536*100%); left: calc(391/536*100%); }
#characters.officersChara.c_Kitaniji .charaBlock { background: #676a6b; }
#characters.officersChara.c_Kitaniji .charaBlock .charaPic { width: calc(541/536*100%); margin-top: calc(-293/536*100%); left: calc(147/536*100%); }

@media screen and (min-width: 641px) {
	#characters.mainChara { background: url(../characters/_img/main/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(200/1366*100%);}
	#characters.mainChara.c_Neku .charaBlock .charaPic { margin-top: calc(-336/536*100%); left: calc(267/536*100%); }
	#characters.mainChara.c_Shiki .charaBlock .charaPic { margin-top: calc(-267/536*100%); left: calc(246/536*100%); }
	#characters.mainChara.c_Beat .charaBlock .charaPic { margin-top: calc(-230/536*100%); left: calc(139/536*100%); }
	#characters.mainChara.c_Rhyme .charaBlock .charaPic { margin-top: calc(-211/536*100%); left: calc(315/536*100%); }
	#characters.mainChara.c_Joshua .charaBlock .charaPic { margin-top: calc(-247/536*100%); left: calc(96/536*100%); }
	#characters.mainChara.c_Hanekoma .charaBlock .charaPic { margin-top: calc(-284/536*100%); left: calc(249/536*100%); }

	#characters.soldiersChara { background: url(../characters/_img/soldiers/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(200/1366*100%);}
	#characters.soldiersChara.c_Yashiro .charaBlock .charaPic { margin-top: calc(-207/536*100%); left: calc(190/536*100%); }
	#characters.soldiersChara.c_Kariya .charaBlock .charaPic { margin-top: calc(-282/536*100%); left: calc(282/536*100%); }
	#characters.soldiersChara.c_Higashizawa .charaBlock .charaPic { margin-top: calc(-258/536*100%); left: calc(75/536*100%); }
	#characters.soldiersChara.c_Koko .charaBlock .charaPic { margin-top: calc(-190/536*100%); left: calc(347/536*100%); }

	#characters.officersChara { background: url(../characters/_img/officers/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-bottom: calc(200/1366*100%);}
	#characters.officersChara.c_Minamimoto .charaBlock .charaPic { margin-top: calc(-252/536*100%); left: calc(296/536*100%); }
	#characters.officersChara.c_Konishi .charaBlock .charaPic { margin-top: calc(-241/536*100%); left: calc(353/536*100%); }
	#characters.officersChara.c_Kitaniji .charaBlock .charaPic { margin-top: calc(-290/536*100%); left: calc(195/536*100%); }
}

@media screen and (min-width: 1367px) {
	#characters.mainChara { background-size: 1920px; padding-bottom: 200px;}
	#characters.soldiersChara { background-size: 1920px; padding-bottom: 200px;}
	#characters.officersChara { background-size: 1920px; padding-bottom: 200px;}
}