@charset "utf-8";

html {
	overflow-y:scroll;
  	scroll-behavior: smooth;
}

/*@font-face {
  font-family: 'MyFont';
	src: url('RoNOWStd-MM.eot');
	src: url('RoNOWStd-MM.woff');
	src: url('RoNOWStd-MM.ttf');}
*/
body{
	background-color:#000;
	/*text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;*/
}

a:link { color: #FFF; }
a:visited { color: #FFF; }
a:hover { color: #FFF; }
a:active { color: #FFF; }

a {
    outline: none;
	text-decoration: none;
}


.spmenu{ display:none;}


@media screen and (max-width:960px){

.pcmenu{display:none;}
.spmenu{display:inherit;}

}

.topcopy{
	font-size: 3em;
	text-align: center;
	font-weight: bold;
	color: #FFF;
	font-family:'MyFont Script';
    text-shadow: 0 0 10px #000;
}

#bobmain{
	position: relative;
}

#mainbg{
	position: relative;
	width: 100%;
	height: 850px;
	background: url("../images/topbg.jpg") center 85%/ cover no-repeat;

	/*background: -moz-linear-gradient(left,rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 80%,rgba(0, 0, 0, 0)), url("../images/mainartbg.jpg") 70% top / cover no-repeat;
	background: -webkit-linear-gradient(left,rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 80%,rgba(0, 0, 0, 0)), url("../images/mainartbg.jpg") 70% top / cover no-repeat;
	background: linear-gradient(to right,rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 80%,rgba(0, 0, 0, 0)), url("../images/mainartbg.jpg") 70% top / cover no-repeat;*/
	/*background: linear-gradient(rgba(0, 0, 0, 0.8) 1%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 1)), url("../images/mainartbg.jpg") 35% 20% / cover no-repeat;*/
	/*background: url("../images/mainartbg.jpg") 70% center / cover no-repeat;*/
	padding: 0px 0 0px;
	/*margin-top: -100px;-150px*/
	text-align: center;
	z-index: 1;
	margin-top: 100px;
}

#mainbg_sp{
	position: relative;
	width: 100%;
	height: 550px;
	background: url("../images/bobmain_sp.jpg") center right/ cover no-repeat;
	padding: 0px 0 0px;
	/*margin-top: -100px;-150px*/
	text-align: center;
	z-index: 1;
	margin-top: 120px;
}

.resizeimage img {
	position: relative;
	width: 100%;
	margin-top: 100px;
	margin-bottom: -5px;
}

.resizeimage_sp img {
	position: relative;
	width: 100%;
	margin-top: 120px;
	margin-bottom: -5px;
}


#bob_gamebg{
	position: relative;
	width: 100%;
	background: url("../images/bobbg.png") center 85%/ cover no-repeat fixed;

	/*background: -moz-linear-gradient(left,rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 80%,rgba(0, 0, 0, 0)), url("../images/mainartbg.jpg") 70% top / cover no-repeat;
	background: -webkit-linear-gradient(left,rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 80%,rgba(0, 0, 0, 0)), url("../images/mainartbg.jpg") 70% top / cover no-repeat;
	background: linear-gradient(to right,rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 80%,rgba(0, 0, 0, 0)), url("../images/mainartbg.jpg") 70% top / cover no-repeat;*/
	/*background: linear-gradient(rgba(0, 0, 0, 0.8) 1%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 1)), url("../images/mainartbg.jpg") 35% 20% / cover no-repeat;*/
	/*background: url("../images/mainartbg.jpg") 70% center / cover no-repeat;*/
	padding: 50px 0 100px;
	/*margin-top: -100px;-150px*/
	text-align: center;
	z-index: 1;
}

.bobspace{
	margin-left: 30px;/*50*/
}

.game_up1{
	margin-top: -5%;
}

.game_up2{
	margin-top: -8.7%;
}

.game_up3{
	margin-top: -2%;
}

.game_up4{
	margin-top: -7%;
}


#ttl{
	position: absolute;
	top: 45%;
   left: 8%;
   transform: translateY(-50%);
	text-align: left;
}


#loaf_ss{
	position: relative;
	/*background: url("../images/loafbg.png") center center/ cover no-repeat;
	height: 1555px;*/
	margin-top: -90px;
	z-index: 50;
}

#loaf_bg{
	position: relative;
	background: url("../images/BOB_loaf.jpg") bottom 0% left 25% / cover no-repeat;
	height: 900px;
	margin-top: -100px;
	z-index: 1;
}

#loaf_bg_sp{
	position: relative;
	width: 100%;
	height: 760px;
	background: url("../images/storymain_sp.jpg") bottom center/ cover no-repeat;
	padding: 0px 0 0px;
	/*margin-top: -100px;-150px*/
	text-align: center;
	z-index: 1;
}


#bobmds{
	position: absolute;
	top:65%;
	left: 50%;
   transform: translateX(-50%);

	z-index: 100;
	text-align: center;

}

#story_text{
	position: absolute;
	top: 58%;
	right: 5%;
   transform: translateY(-50%);
	font-size: 2.5em;
	color: #FFF;
	width: 48%;
}

#bn_bg{
	position: relative;
	background: linear-gradient(rgba(255, 255, 255, 0) 1%,rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0)), url("../images/bob_bnbg.jpg") center center/ cover no-repeat;
	padding: 50px 0 80px;
	text-align: center;

}


#game_bg{
	position: relative;
	background: linear-gradient(rgba(255, 255, 255, 0.9) 1%,rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.7) 80%, rgba(255, 255, 255, 0.9)), url("../images/gamebg.jpg") center top/ cover no-repeat fixed;
	padding-bottom: 50px;

}

.lineset {
	position: relative;
	/*position: absolute;*/
	width: 100%;
	height: 25px;
	object-fit: cover;
	margin: 0px 0 -5px;
	z-index: 100;
	text-align: center;
}


#gamebg{
	position: relative;
	width: 100%;
	/*height: 800px;*/
	background: linear-gradient(rgba(0, 0, 0, 0.5) 1%,rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.5)), url("../images/sky_background.jpg") center top/ cover no-repeat;
	padding: 100px 0 100px;
	/*margin-top: -100px;-150px*/
	text-align: center;
	margin-top: 0px;
	border-bottom: 15px solid #FFBC08;
}

.g_main{
	position: relative;
	width: 700px;
	color: #FFF;
	margin: -20px auto 0;
	/*margin-top: -100px;-150px*/
	text-align: left;
	padding: 20px;
	/*border: 3px #FFFFFF solid ;
	border-radius: 20px;
	background-color: rgba(0,0,0,0.8);*/
	/*background-color: rgba(255,255,255,0.8);*/
}

.txtstr{
	font-family:'MyFont Script';
	/*font-size: 1.1em;*/
	font-weight: bold;
	font-size:3.5em;
	text-align:center;
	line-height:1.3em;
	letter-spacing:-0.1em;
	color: #FFF;
	text-shadow: 
		0 0 0.05em #00beff,
		0 0 0.10em #00beff,
		0 0 0.15em #00beff,
		0 0 0.30em #00beff;
	filter: saturate(80%);
	margin-bottom: 30px;
	
text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
	
	
}

.txtstr_sp{
	font-family:'MyFont Script';
	/*font-size: 1.1em;*/
	font-weight: bold;
	font-size:50px;
	text-align:center;
	line-height:1.3em;
	letter-spacing:-0.1em;
	color: #FFF;
	text-shadow: 
		0 0 0.05em #00beff,
		0 0 0.10em #00beff,
		0 0 0.15em #00beff,
		0 0 0.30em #00beff;
	filter: saturate(80%);
	margin-bottom: 30px;
text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
	
}




.txtstr_cl{
	/*font-size: 1.1em;*/
	font-weight: bold;
	color: #b22222;
}

.txtnml{
	font-size: 1.7em;
	width: 750px;
	margin: 0 auto;
	text-align: left;
	
text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
}


.txtnml_sp{
	font-size: 25px;
	width: 750px;
	margin: 0 auto;
	text-align: left;
	
text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
}

/*.inmds{
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #2f4f4f; 
	text-shadow:
		-1px 0 white,
		0 1px white,
		1px 0 white,
		0 -1px white;
	font-family:'MyFont Script';
	margin-bottom: 50px;
}*/

.inmds{
	font-family:'MyFont Script';
	margin-bottom: 30px;
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FFF;
	text-shadow: 
		0 0 0.05em #F06292,
		0 0 0.10em #F06292,
		0 0 0.15em #F06292,
		0 0 0.30em #F06292;
	filter: saturate(80%);
}

.mdsimg{
	text-align: center;
	margin-bottom: 30px;
}

.gifarea{
	text-align: center;
	margin-bottom: 30px;
}

.gifarea img{
	border: 0px solid #FFF;
}

.imgarea{
	text-align: center;
	margin-top: 40px;
}

.imgarea img{
	border: 1px solid #FFF;
}


#storybg1{
	position: relative;
	width: 100%;
	height: 700px;
	background: linear-gradient(rgba(0, 0, 0, 0.5) 1%,rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 1)), url("../images/story01.jpg") center top / cover no-repeat;
	/*background: url("../images/mainartbg.jpg") 70% center / cover no-repeat;*/
	padding: 70px 0 60px;
	/*border-bottom: 15px solid #FFBC08;*/
}

#storybg2{
	position: relative;
	width: 100%;
	height: 600px;
	background: linear-gradient(rgba(0, 0, 0, 1) 1%,rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)), url("../images/story02.jpg") 30% top / cover no-repeat;
	/*background: url("../images/mainartbg.jpg") 70% center / cover no-repeat;*/
	padding: 0px 0 0px;
	border-bottom: 15px solid #FFBC08;

}

.storytxt{
	position: absolute;
	color: #FFF;
	font-size: 1.8em;
	width: 900px;
	margin: 0 auto;
	line-height: 1.8em;
	
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.storytxt_st{
	font-size: 1.3em;
	color: #FFBC08;
}

.storytxt_st2{
	font-size: 1.2em;
	color: #FFBC08;
}

.storytxt_st3{
	font-size: 1.4em;
	/*color: #ff4500;
	font-weight: bold;*/
	/*text-shadow:0.7px 0.7px 0 #d3d3d3, -0.7px -0.7px 0 #d3d3d3,
              -0.7px 0.7px 0 #d3d3d3, 0.7px -0.7px 0 #d3d3d3,
              0px 0.7px 0 #d3d3d3,  0-0.7px 0 #d3d3d3,
              -0.7px 0 0 #d3d3d3, 0.7px 0 0 #d3d3d3;
	
	text-shadow:1px 1px 0 #f5f5f5, -1px -1px 0 #f5f5f5,
              -1px 1px 0 #f5f5f5, 1px -1px 0 #f5f5f5,
              0px 1px 0 #f5f5f5,  0-1px 0 #f5f5f5,
              -1px 0 0 #f5f5f5, 1px 0 0 #f5f5f5;*/
}


.storytxt02{
	position: absolute;
	color: #FFF;
	font-size: 1.8em;
	width: 850px;
	margin: 0 auto;
	line-height: 1.5em;
	
	top: 50%;
	right: 3%;
	transform: translateY(-50%) ;
}


.merlin{
	font-size: 2.8em;
	color: #FFBC08;
	text-align: center;
	line-height: 2em;
	font-family:'MyFont Script';
	text-shadow:3px 3px 0 #000, -1px -1px 0 #000,
              -1px 1px 0 #000, 1px -1px 0 #000,
              0px 1px 0 #000,  0-1px 0 #000,
              -1px 0 0 #000, 2px 0 0 #000;
}

.gyoukan{
	margin-top: 0.5em;
}

/*.gallery_main a:hover img{
opacity:0.85;
filter:alpha(opacity=90);
-ms-filter: "alpha( opacity=90 )";
}*/


p.resizeimage img {
	width: 100%;
	margin-top: 80px;
	margin-bottom: -5px;
}


.cate{
	/*background-color: rgba(0,0,0,0.8);*/
	background: linear-gradient(rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)),url("../images/mbkg.jpg") center center / cover no-repeat;
	width:100%;
/*	padding-top:2px;
	padding-bottom:2px;*/
    position: fixed;
    top: 0;
    right:0;
	/*margin-bottom:30px;*/
	padding-top: 10px;
	padding-bottom: 5px;
	z-index: 1000;
	font-family:'MyFont Script';
	border-bottom: #946124 solid 10px;
	border-top: #946124 solid 10px;
}

.cate_sp{
	/*background-color: rgba(0,0,0,0.8);*/
	background: linear-gradient(rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)),url("../images/mbkg.jpg") center center / cover no-repeat;
	width:100%;
/*	padding-top:2px;
	padding-bottom:2px;*/
    position: fixed;
    top: 0;
    right:0;
	/*margin-bottom:30px;*/
	padding-top: 20px;
	padding-bottom: 15px;
	z-index: 10000;
	font-family:'MyFont Script';
	border-bottom: #946124 solid 10px;
	border-top: #946124 solid 10px;
}


.cate_space{
	margin-left: 35px;
}


#kounyu a{
	/*margin-right: 20px;*/
	background: #000;
	padding: 5px 15px;
	color: #FFDF87;
	border: solid 1px #FFDF87;
	font-weight: bold;
}

#kounyu a:hover{
	color: #000;
	background: #FFDF87;
	transition:all 1.0s;
}


.buy{
	font-weight: bold;
	background-color: #31BD29;
	color: #FFF;
	padding: 10px 19px 10px 15px;
	margin-left: 30px;
}

.buy a:hover{color: #fff;}

h1 {
　　font-size: 36px;
　　color: #FFF;
　　background-color: #222;
　　text-align: center;
　　padding: 5px;
}



.navi {
　　position:absolute;
　　height:60px;
　　z-index:10000;
　　width: 100%;
　　background-color: #222;
	text-align:center;
	color:#fff;
	margin:0.5em;
	font-size:270%;
	vertical-align:middle;
	text-shadow: 
        #754F20 3px 3px 0, #754F20 -3px -3px 0,/*右下、左上*/
        #754F20 -3px 3px 0, #754F20 3px -3px 0,/*右上、左下*/
        #754F20 0px 3px 0, #754F20  0-3px 0,/*右、左*/
        #754F20 -3px 0 0, #754F20 3px 0 0;/*上、下*/
}

.navi a{
	margin-left: 5px;
}


.u_line{
   text-decoration: none;
   border-bottom: 1px solid #FFF;
   padding-bottom: 0.3px;
   }

.spec_left{
	float:left;
	}


.red{
	color: #FE6534;
	font-weight: bold;
}

.tokucho{
	width: 860px;
	text-align: left;
	margin: 0 auto;
/*	margin-left: 20px;
*/}

.space{
	margin: 20px 0;
}

/*コピーライト*/

#tenpo{
	width: 960px;
	text-align:center;
/*margin-top:30px;*/
padding-top:10px;
padding-bottom:10px;
	margin-right: auto;
	margin-left: auto;

}

#shop_kounyu{
	color: #FFF;
	text-align: center;
	font-size: 270%;
	font-weight: bold;
	margin-bottom: 10px;
}

#shop_list{
	width: 100%;
	margin: 0px auto;
	text-align: center;

	padding-top: 40px;
	padding-bottom: 50px;
}

#shop{
	text-align: center;
	margin: 50px 0 0px;
}

#shop a{
	margin-bottom: 10px;
}


#footer{
	width: 100%;
	background: #222;
	padding-bottom: 50px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5d5d5d+0,5d5d5d+50,5d5d5d+100&0.1+1,1+25,1+75,0.1+100 */
/* IE6-9 */
}

#inc_logo{
	width: 960px;
	height: 60px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    layout-grid-line:200px;
	padding-bottom: 0px;
	padding-top: 20px;
}

#inc_logo img{
    vertical-align:middle;
}

#inc_logo img{
    vertical-align:middle;
}


.logo_space{
	margin-left: 30px;
}


#copy{
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	margin-top:20px;
	margin-bottom:20px;
	color:#fff;
	font-size:90%;
	text-align: center;
}

/*ギャラリー*/

#gallerybg{
	position: relative;
	width: 100%;
	/*height: 800px;*/
	background: #000;
	padding: 70px 0 50px;
	/*margin-top: -100px;-150px*/
	text-align: center;
	background: linear-gradient(rgba(255, 255, 255, 0) 1%,rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0)), url("../images/BoB_bk.jpg") center top/ cover no-repeat;

}

/*.gallery_main{
	text-align: center;
	width: 960px;
	margin: 0px auto 0px;
	
}
*/
/*.gallery_main img{
	border: 1px #999 solid;

}*/


/*ギャラリー*/

.gallery_main{
	position: relative;
	text-align: center;
	width: 92%;
	margin: 0px auto 0px;
	padding: 0px 0 40px;
	left: 4%;
	right: 4%;
}

/*.gallery_main img{
	border: rgba(255, 255, 255, .6) 1px solid;
}*/

.gallery_left{
	text-align: left;
}


#home_main{
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	padding: 50px 0;
	text-align: center;
}

#movie{
	margin-bottom: 30px;
	text-align: center;
}

.ss_img{
	margin-bottom: 7px;
}

/*.ss_space{
	margin-left: 10px;
}*/

.gallery_img{
	margin-bottom: 10px;
	/*background-color: #FFF;*/
}
#movie{
	margin-bottom: 30px;
	text-align: center;
}

.movie01 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.movie01::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(rgba(0, 0, 0, 1) 1%,rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 1));
	/*background-color: rgba(0,0,0,0.4);*/
	/*background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);*/
	/*background-size: 4px 4px;*/
	/*background-position: 0 0, 2px 2px;*/
}

.ss_img{
	margin-bottom: 7px;
}

.ss_space{
	margin-left: 10px;
}



#mlogo{
	position: relative;
	text-align: center;
	padding-top: 180px;
}



.star{
	background-color: #FFF;
	text-align: center;
	margin: 0 auto;
	padding: 120px 0 0;

}


.gametxt{
	width: 900px;
	margin: 0 auto;
	font-size: 170%;
	margin-top: 130px;
	text-shadow:1px 1px 5px #ffffff;
}


.mds{
	font-size: 200%;
	font-weight: bold;
	margin-bottom: 15px;
	border-bottom: solid #FFF 2px ;
	display: inline-block;
}

.hbn{
	font-size: 145%;
}

.ctg{
	font-weight: bold;
}

#gimg{
	float: left;
	width: 500px;
	margin-left: 20px;
}


#specbg{
	position: relative;
	width: 100%;
	/*height: 500px;*/
	background-color: #3e2078;
	/*background: linear-gradient(rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)),url("../images/grass_background.jpg") center center / cover no-repeat;*/
	padding: 20px 0 0px;
	text-align: center;
}

.spec1main{
	color: #FFF;
	width: 880px;
	margin: 0 auto;
	padding: 0px 0 20px;
	text-align: left;
	font-family:'MyFont Script2';
	
}

.speccntttl{
	color: #FFF;
	font-size: 150%;
	font-weight: bold;
	margin-top: 20px;
	height: 60px;
}

.specttl{
	background: #B41E23;
	color: #FFF;
	font-size: 180%;
	margin-bottom: 5px;
	/*font-weight: bold;*/
	text-align: center;
	padding: 10px 0;
}

.specttl2{
	background: #3A7FA8;
	color: #FFF;
	font-size: 180%;
	margin-bottom: 5px;
	/*font-weight: bold;*/
	text-align: center;
	padding: 10px 0;
}

.specbkg{
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	padding: 0px 0 0;

}

.spectext{
	font-size: 160%;
	margin-bottom: 15px;
	border-bottom: #FFF solid 1px;
	padding-bottom: 10px;
}

.spectextbgx{
	font-size: 160%;

}


dl {
list-style:none;
	font-size: 150%;
	margin-bottom: 15px;
}

.dl_bd{
	border-bottom: #FFF solid 1px;
}

ul {
list-style:none;
	font-size: 160%;
	margin-bottom: 15px;
}

/*li{
	border-bottom: #FFF solid 1px;

}*/

.li_bd{
	border-top: #FFF solid 1px;
	padding-top: 10px;
}

.li_bd2{
	border-top: #FFF solid 1px;
	padding-top: 10px;
	/*border-bottom: #FFF solid 1px; */
}


.specbd{
	margin-top: 10px;

}

span.dan {
	float:left;
	width: 9em;
	background: #FFF;
	margin: 0 0 10px;
	color: #000;
	/*font-weight: bold;*/
	text-align: center;
	
}

span.dan2 {
	display: block;
	margin-left: 110px;
	margin: 0 0 10px;
}

span.dan3{
	float:left;
	width: 9em;
	height: 3em;
	display: flex;
  justify-content: center;
  align-items: center;
	background: #FFF;
	margin: 0 0 10px;
	color: #000;
	/*font-weight: bold;*/
	text-align: center;
	
}

#shop{
	text-align: center;

	margin: 20px 0 0px;
}

#shop a{
	margin-bottom: 10px;
}





#smain{
	width: 850px;
	margin: 0 auto;
}

#stext{
	/*float: left;*/
	color: #FFF;
	margin-left: 10px;
}





#toplogo{
	float: left;
	text-align: left;
	margin-left: 25px;
	padding-top: 5px;
}

#ccnt{
	float: right;
	text-align: center;
	margin-right: 25px;
	margin-top: 17px;
}

#ccnt a:hover{
	transition:all 1.0s;
}

.btna a:hover{
	transition:all 1.0s;
}

#cate div{
    vertical-align:middle;
}

#t_main{
	text-align: center;
	width: 960px;
	padding-top: 50px;
	padding-bottom: 50px;
	margin: 0px auto;
}

ul {
list-style:none;
	font-size: 160%;
	margin-bottom: 15px;
}

/*li{
	border-bottom: #FFF solid 1px;
}
*/
.li_bd{
	border-top: #FFF solid 1px;
	padding-top: 10px;
}

.specbd{
	margin-top: 10px;

}

span.dan {
	float:left;
	width: 10em;
	background: #FFF;
	margin: 0 0 10px;
	color: #000;
	font-weight: bold;
	text-align: center;
	
}

span.dan2 {
	display: block;
	margin-left: 110px;
	margin: 0 0 10px;
color: #FFF;
}

span.dan3{
	float:left;
	width: 10em;
	height: 3em;
	display: flex;
  justify-content: center;
  align-items: center;
	background: #FFF;
	margin: 0 0 10px;
	color: #000;
	font-weight: bold;
	text-align: center;
	
}

.cnt{
	text-align: center;
}

.ps4ver{
	text-align: center;
	margin: 50px 0 0;
}


.catebg{
	background-color: rgba(0,0,0,0.5);
	padding: 50px 0;
	width: 100%;
	margin: 50px 0 50px;
}

.catebg img{
	border: 1px rgba(255,255,255,0.5) solid;
}

.cateboxl{
	float: left;
	width: 40%;
	margin-left: 5%;
}


.cateboxr{
	float: right;
	width: 45%;
	margin-right: 5%;
}

.cateboxl2{
	float: left;
	width: 45%;
	margin-left: 5%;
}


.cateboxr2{
	float: right;
	width: 40%;
	margin-right: 5%;
}



.catetxt{
	color: #FFF;
	font-size: 150%;
	margin-top: 30px;
}

.catetxtsp{
	color: #FFF;
	font-size: 150%;
	margin-top: 0px;
}


.catemds{
	font-size: 180%;
	font-weight: bold;
	margin-bottom: 10px;
}

.catemds2{
	font-size: 160%;
	font-weight: bold;
	margin-bottom: 5px;
}

.upg{
	font-size: 130%;
	color: #FFF;
	margin-top: 10px;
}

@font-face {
  font-family: 'MyFont Script';
  font-style: normal;
  font-weight: 400;
  src: url("../font/07にくまるフォント.otf") format('woff');
}


@font-face {
  font-family: 'MyFont Script2';
  font-style: normal;
  font-weight: 400;
  src: url("../font/A-OTF-KaiminTuStd-Medium.otf") format('woff');
}


.swiper-container{
  text-align: center;
}
.swiper-container .swiper-slide img{
  max-width: 100%;
  width: 100%;
  height: auto;
}
.swiper-container .swiper-slide {
  position: relative;
  width: 100%;
}
.swiper-container .swiper-slide:before {
  content:"";
  display: block;
  padding-top: 56.25%;
}
.swiper-container .swiper-slide iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
#thumbs .swiper-slide {
  width: 20%;
  height: 100%;
  opacity: 0.2;
  cursor: pointer;
}
#thumbs .swiper-slide:before {
  content:none;
}
#thumbs .swiper-slide-active {
  opacity: 1;
}

/* タブ */
.tab{
    list-style:none;
    padding:0;
    margin:0 auto 20px auto;
    width:79.9%;
    display:flex;

}
.tab li{
    width:50%;
    background: linear-gradient(180deg, rgba(135,135,135,1) 0%, rgba(55,55,55,1) 100%);;
    margin-right:5px;
    border:3px solid #FFF;
    text-align: center;
    padding:10px 0;/*10px 0*/
	color: #FFF;
	font-weight: bold;
	font-size: 1.5em;
}

/*.textsd{
	text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000, 1px 1px 1px #000;
}*/

/*.tab li.active{
    background:linear-gradient(180deg, rgba(233,156,50,1) 0%, rgba(233,87,50,1) 100%);;
}*/
/* ページャー */
.tab_sub{
    margin:20px auto;
    padding:0;
    display:flex;
    list-style:none;
    width:80%;
	text-align: right;
}
.tab_sub li{
    padding:5px;
    border:1px solid #dfdfdf;
    margin-right:5px;
}
.tab_sub li.active{
    background:#f79b9b;
}
 
.list .inner,
.list .inner table{
    display:none;
	text-align: center;	
}
.list .inner.active{
    display:block;
	text-align: center;
}

.list .inner table.active{
    display:table;
	margin: 0 auto;


}

.active th{
	text-align: center;
}


.skillmds{
	font-size: 3.5em;
	font-weight: bold;
	color: #FFF;
	
}

.modetxt{
	color: #FFF;
	font-size: 1.5em;
	margin: 30px auto 30px;
}

.sys_cnt{
	text-align: center;
	margin: 0px auto;
	padding-top: 50px;
	padding-bottom: 30px;
}

.special_txt{
	color: #FFF;
	font-size: 1.8em;
	width: 900px;
	margin: 0 auto 30px;
	text-align: center;
}


.sys_txt{
	color: #FFF;
	font-size: 1.8em;
	width: 900px;
	margin: 0 auto 30px;
}

.sys_atatack{
	text-align: center;
}



.sys_atspc{
	margin-left: 20px;
}

.sys_boxmain{
	width: 90%;
	margin: 0px auto 0;
	padding-bottom: 0px;

	
  display: flex;
  justify-content: center;
  align-items: center;	
}

.sys_boxL{
	float: left;
	width: 40%;
	color: #FFF;
	font-size: 1.7em;
	text-align: left;
	font-family:'MyFont Script';
	line-height: 1.5em;
}

.sys_boxR{
	float: right;
	width: 50%;
	color: #FFF;
	font-size: 1.8em;
	margin-left: 50px;
}

.sys_boxL2{
	float: left;
	width: 50%;
	color: #FFF;
	font-size: 1.7em;
}

.sys_boxR2{
	float: right;
	margin-left: 50px;
	text-align: left;
	width: 40%;
	color: #FFF;
	font-size: 1.8em;
	line-height: 1.5em;
	font-family:'MyFont Script';
}

.boxmain{
	width: 100%;
display:flex;
justify-content: center;
	padding-top: 50px;
}


.boxleft{
	float: left;
	width: 40%;
}

.boxright{
	float: left;
	width: 40%;
}

.boxtxt{
	color: #000;
	font-size: 1.7em;
	line-height: 1.7em;
	text-align: left;
	width: 90%;
	margin-left: 3%;
	margin-top: 20px;
		text-shadow: 
		0 0 0.05em #FFF,
		0 0 0.10em #FFF,
		0 0 0.15em #FFF,
		0 0 0.30em #FFF;

	/*font-family:'MyFont Script';*/
}

.imgspc{
	margin-left: 3%;
}


.txtin{
	text-align: left;
}

.txtin h2{
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 10px;
	color: #FFBC08;
	text-align: center;
}

/* --- 全体のBOX定義 ---------------------------------------- */
.box {
  position   : relative;
  max-width  : 100%;
  height     : 1050px;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 24s infinite;   /* 4画像 × 各6s = 24s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background : url("../images/story-1.jpg") top center / cover no-repeat;   /* 背景の画像を指定 */
}
.box .src2 {
  background : url(../images/story-2.jpg) center bottom / cover no-repeat;   /* 背景の画像を指定 */
  animation-delay  : 6s;
}
.box .src3 {
  background : url(../images/story-3.jpg) center bottom/ cover no-repeat;   /* 背景の画像を指定 */
  animation-delay  : 12s;
}
.box .src4 {
  background : url(../images/story-4.jpg) right bottom / cover no-repeat;   /* 背景の画像を指定 */
  animation-delay  : 18s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   6% { opacity: 1; }
  25% { opacity: 1; }
  31% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.box .boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 20px 20px 20px 20px;
  background : rgba(0, 0, 0, 0.5);          /* 半透明の青 */
  color      : #fff;
  top        : 80%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 11;
}

.tab-wrap {
    display: flex;
    flex-wrap: wrap;
}
.tab-label {
    color: White;
    background: LightGray;
	font-size: 2em;
    margin-right: 5px;
    padding: 3px 12px;
    order:-1;
}
.tab-content {
    width: 100%;
    display: none;
}
.tab-switch:checked+.tab-label {
    background: DeepSkyBlue;
}
.tab-switch:checked+.tab-label+.tab-content {
    display: block;
}
.tab-switch {
    display: none;
}


/*適用タブ*/
.tab-group{
  display: flex;
  justify-content: center;
	color: #FFF;
	font-family:'MyFont Script';

}
.tab{
  flex-grow: 1;
  padding:0px 0px;
  list-style:none;
  /*border:solid 1px #CCC;
	background-color: #044959;
  text-align:center;*/
  cursor:pointer;
}
.panel-group{
	position: relative;
  /*height:100px;
  border:solid 1px #CCC;
  border-top:none;
  background:#eee;*/
}
.panel{
  display:none;
}
.tab.is-active{
  /*background: #7E1710;*/
  color:#FFF;
  transition: all 0.2s ease-out;
}
.panel.is-show{
  display:block;
}

.tabbox{
	position: relative;
	text-align:	center;
	margin: 0 auto;
	/*top: 5%;*/
	/*right: 5%;*/
	width: 80%;
}

/*.movbtm{
	margin-bottom: 10px;
}*/

.mainbox{
	padding-top: 0px;
	
}

.mainbox section{
	width: 100%;
	margin: 0 auto;
}


.flex-row {
  display: flex;
  gap: 4px;
}

.battlespc{
	margin-top: 8px;
}
.flex-row+.flex-row {
  margin-top: 4px;
}

.flex-item {
  background: #eee;
  padding: 4px;
}

.flex-item:nth-child(1) {
  width: 200px;
	display:flex;
	text-align: left;
  	align-items: center;
	padding-left: 20px;
	background: #7E1710;
	color: #FFF;

}

.flex-item:nth-child(2) {
  flex: 2;
	text-align: left;
	padding: 10px;
}

.flex-item:nth-child(3) {
  flex: 1;
}

.stred{
	color: #dc143c;
}

.stred_b{
	color: #dc143c;
	font-weight: bold;
}

.stbl_b{
	font-weight: bold;
	margin-bottom: 15px;
}

.tabbox li {
	text-decoration: none;
}

img{ border:0; }

img.middle { vertical-align: middle; }