@charset "utf-8";


/* Don't Edit */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');


article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display: block;
}

* {
	margin: 0;
	padding: 0;
	word-break: normal;
	-webkit-font-smoothing:subpixel-antialiased;
	outline:none;
}

html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #000;
	font-weight:normal;
	font-size:17px;
	line-height:1.8;
	-webkit-text-size-adjust: 100%;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
}

/*--------------------
	Text
--------------------*/

p {
}

figure,figcaption {
	font-weight: bold;
}

h1 {
	/* margin: 1em 0 2em 0;
	font-size: 123.1%; */
}


h1 img {
}

h2 {
}

h3 {
}

h4 {
}

address {
}



/*--------------------
	List
--------------------*/

li {
	list-style-type: none;
}
a.bnr:hover {

}

dt,
dd {
	font-weight: bold;
}

/* Opera Hack */
html:first-child li,
html:first-child dt,
html:first-child dd {
	font-size: 1em;
}

li li,
li p,
li pre,
li dt,
li dd,
dd li,
dd p,
dd pre,
dd dt,
dd dd {
	font-size: 100% !important;
}

li ul,
li ol,
li dl,
li p,
dd ul,
dd ol,
dd dl,
dd p {

}

a.mo:hover{
opacity:0.7;;
}

.clearfix:after{
content: "";
display: block;
clear: both;
}

/*--------------------
	link
--------------------*/

a {
	color: #d00;
	text-decoration:none;
	outline:none!important;
}

/*--------------------
	Others
--------------------*/

img {
	border: none;
}

hr {
	height: 1px;
	border: 1px solid #fff;
}


/*----------------------------------------
	for PC
----------------------------------------*/

.slick-dotted.slick-slider {margin-bottom: 0px!important;}

.slick-dots{bottom:-30px!important;}
.slick-dots li button:before{display:none;}
.slick-dots li.slick-active button:before{display:none;}

.slick-dots li{height:4px!important;border-radius:10px!important;width:40px!important;border-radius:10px!important;overflow:hidden;}
.slick-dots button{padding:0!important;width:100%!important;height:100%!important;background-color:#E6E6E6!important;}

.slick-active button{background-color:#DA262B!important;}

.centering{text-align:center;}



@media screen and (min-width: 751px){

#wrapper{overflow:hidden;position:relative;min-width:1200px;}

#loadingBg {position: fixed;left: 0;top: 0;width: auto;min-width: 100%;height: 100vh;min-height: 100%;background: #000;z-index:100;pointer-events: none;}
#loading {position: fixed;top: 50%;left: 0%;width: 100%;padding: 50px 0px;margin: -70px 0 0 0px;z-index:101}
#loading #percent {margin-bottom: 5px;text-align: center;font-size: 16px;z-index:101;color:#fff;}
#loading #gauge {width: 0px;height: 3px;background: #43565d;z-index:101;}
#loading .loading-icon{position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-380px;width:300px;display:none;}

#menu-btn{display:none;}  /* for sp */

.background-movie__wrap{position:absolute;min-width:1200px;}

/*  */




.menu-bar{position:fixed;width:100%;z-index:1;top:0;z-index:90;transition:all 0.4s;padding:50px 40px;}
.menu-bar.stylechange{background:rgba(0,0,0,0.7);}
.menu__btn{margin:0 18px;display:inline-block;vertical-align: middle;position:relative;}
.menu__btn a{color:#fff;font-size:19px;font-weight:500;transition:all 0.4s; text-shadow: 0 0 5px #000;}

/* メニュー */

.menu-bar__inner{padding:0 20px;margin:0 auto;transition: all 1s;width:auto;}
.menu-bar h1{display:inline-block;vertical-align: middle;}
.menu-logo img{display:block;margin:-40px 0 -20px -20px;transition:all 0.4s;height:auto;width:8vw;transform:scale(1);}
.menu-bar h1{display:inline-block;vertical-align: middle;}

.menu-bar.stylechange{background:rgba(0,0,0,0.7);padding:0 0;}
.menu-bar.stylechange .menu__btn a{font-size:16px;}
.menu-bar.stylechange	.menu-logo img{display:block;margin:0vw 20px 0 20px;width:5vw;transition:all 0.4s;transform:scale(1);}

.menu__wrap-btn{display:inline-block;vertical-align:middle;}




/* メニュー下ライン */

.menu__btn a::after {position: absolute;bottom: -4px;left: 0;content: '';width: 100%;height: 2px;background: #fff;transform: scale(0, 1);transform-origin: left top;transition: transform .3s;}
.menu__btn a:hover::after {transform: scale(1, 1);}

.news .menu__btn.news a::after {transform: scale(1, 1);}
.story .menu__btn.story a::after {transform: scale(1, 1);}
.battle .menu__btn.battle a::after {transform: scale(1, 1);}
.system .menu__btn.system a::after {transform: scale(1, 1);}
.movie .menu__btn.movie a::after {transform: scale(1, 1);}


body.top .menu__btn.top{display:none;}
body.top .menu-logo img{transform:scale(0);width:0;}


.menu-reserve{right:0;background:#e65500 center center;top:1vw;position:absolute;margin:0;color:#fff;width:300px;height:70%;font-size:1vw;letter-spacing: 2px;}
.menu-reserve:hover{background:#c83000 center center;}
.menu-reserve .text{top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:100%;display:block;position:absolute;font-weight:bold!important;text-shadow:1px 1px 0px rgba(0,0,0,0.1);}

.menu__btn.new:after{content:'UPDATE';display:block;position:absolute;margin-left:-50px;left:50%;bottom:-25px;background:#fffa53;color:#333;padding:3px 10px;width:80px;line-height:1;text-align:center;border-radius:20px;font-size:13px;transition:all 0.5s;font-style: italic;}

.btn.default-style{padding:6px 80px;border:1px solid #fff;display:inline-block;color:#fff;margin-top:30px;letter-spacing: 0.5em;transition:all 0.4s;display:inline-block;position:relative;}
.btn.default-style:after{content:'';display:inline-block;width:16px;background:url(../img/common/direct-w.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}

.btn.default-style:hover{background-color:#fff;color:#000;}
.btn.default-style:hover:after{content:'';display:inline-block;width:16px;background:url(../img/common/direct-b.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}


.btn.default-style.size-min{font-size:12px;}
.btn.default-style.size-min:after{width:12px;height:12px;}

.centering{text-align:center;}

/*---- footer ----*/

footer { background-color:#000;color:#ddd;position:relative;z-index:20;margin-top:0px;}
footer .img_attention{font-size:12px;margin-bottom:30px;color:#fff;}
footer .cero{height:60px;margin-bottom:-10px;}

footer .footer__inner {padding:20px 0 60px;text-align:center;}
.bnr_footer img{width:300px;margin:0 10px 0;}
.footer_link { line-height: 160%; letter-spacing: 2px; color: #fff;margin-top:1em;border-bottom:1px solid #aaa;padding-bottom:2px;}

footer .btn_reserve{background-color:#f18800 ;color:#fff;padding:10px 40px;display:inline-block;margin:30px 10px 20px;border-radius:30px;}

.footer_logoheight{ height: 40px; margin: 0 1.5%;}
.footer_logoheight.steam{ height: 40px; margin-bottom:-6px;}
.footer_logoheight.shibusawa{ height: 48px; margin-bottom:-6px;}
.rights_txt { margin:20px 0;font-size:10px;line-height: 1.6; letter-spacing: 0.5px; text-align: center;color:#fff;}
.rights_mark { height: 8px;}

.btn_twitter{background-color:#28a4e0;display:inline-block;color:#fff;padding:5px 40px 5px 5px;border-radius:80px;font-size:18px;margin:0 2px;}
.btn_twitter .icon{border-radius:50%;width:42px;display:inline-block;vertical-align:middle;margin-right:0.6em;}
.btn_twitter p{display:inline-block;line-height:1.2;vertical-align:middle;}

.btn-twitter-footer{width:340px;margin:0 auto 20px;}

.background__wrap{position:fixed;top:0;left:0;width:100%;z-index: 0;min-width:1200px;}
.background-movie .movie{width:100%;height:100%;display:block;}


/* lower_common */

#contents{z-index: 1;position: relative;}

.background-text{position:absolute;right:40px;top:30px;}

.headline-catch{color:#fff;font-size:50px;margin-bottom:40px;text-align:center;line-height:1.3;}

.headline{color:#fff;font-size:50px;margin-bottom:70px;text-align:center;}
.headline:after{content:'';margin:0 auto;display:block;background-image:url(../img/top/common-titbar.png);height:4px;background-position:center;background-repeat: no-repeat;}

.section__wrap{position:relative;z-index:1;}

.infobox .title{display:block;font-size:50px;color:#fff;text-align:left;margin-bottom:0;}
.infobox .title .ruby{font-size:12px;vertical-align: middle;margin-left:20px;}
.infobox .text{display:block;color:#fff;line-height:2;}

.animation-trigger{position:absolute;top:0;left:0;}


.hide_pc{display:none!important;}
.header-sp{display:none;}

}

/*----------------------------------------
	for SP
----------------------------------------*/

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




	body{font-size:14px;}

	#loadingBg {position: fixed;left: 0;top: 0;width: auto;min-width: 100%;height: auto;min-height: 100%;background: #000000;z-index:100;pointer-events: none;}
	#loading {position: fixed;top: 50%;left: 0%;width: 100%;padding: 50px 0px;margin: -70px 0 0 0px;z-index:101}
	#loading #percent {margin-bottom: 5px;text-align: center;font-size: 16px;z-index:101;color:#fff;}
	#loading #gauge {width: 0px;height: 5px;background: #43565d;z-index:101;}
	#loading .loading-icon{position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-120px;width:60px;}

	.header-sp{position:fixed;top:0;left:0;width:100%;z-index:100;}
	.header-sp .head-logo-sp{width:20%;display:block;position:absolute;left:2%;top:10px;}


	#wrapper{overflow:hidden;width:100%;}

	.close #menu-btn{display:block;right:10px;bottom:40px;width:64px;height:64px;background:url(../img/common/menu-open.jpg);position:fixed;z-index:10;transition:all 0.5s;background-size:100%;transition:all 0.2;z-index: 101;}

	.open #menu-btn{display:block;right:10px;bottom:40px;width:50px;height:50px;background:url(../img/common/menu-close.jpg);position:fixed;z-index:10;transition:all 0.5s;background-size:100%;z-index: 101;}

	#menu-btn.new:after{content:'';display:block;width:31px;height:30px;background:url(../img/common/icon-menuupdate.png);position:absolute;top:0;right:0;background-size:100%;}
	.open #menu-btn.new:after{opacity:0;}



	.menu-bar{position:fixed;width:200px;background:#000;height:100vh;z-index:1;box-shadow:3px 0 8px rgba(0,0,0,0.6);left:-200px;opacity:0;z-index:2;transition:all 0.5s;top:0;}
	.content-area{position:relative;overflow:hidden;z-index:0;width:100%;}

	.menu-reserve{width:100%;display:block;line-height:1.2;text-align:center;background-color:#d00;color:#fff;padding:3% 0;}


	.close #menu-bgwrap{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;opacity:0;z-index:100;transition:all 0.5s;pointer-events: none;}
	.open #menu-bgwrap{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;opacity:0.7;z-index:1;
	pointer-events: all;z-index:100;}

	.open .menu-bar{position:fixed;width:200px;background:#000;height:100vh;z-index:1;box-shadow:3px 0 8px rgba(0,0,0,0.6);left:0px;opacity:1;z-index:101;border-right: 1px solid #333;}
	.menu-bar__inner{position:absolute;top:0;width:100%;padding:0 0 20px;}
	/* .open .content-area{position:relative;overflow:hidden;z-index:0;min-width:920px;} */



	.menu__btn{margin:0 auto;text-align:center;position:relative;border-bottom:1px solid #222;border-top:1px solid #111;}
	.menu__btn a{color:#fff;width:100%;display:block;padding:3vw 0;}

	.menu__btn.new:after{content:'UPDATE';display:block;position:absolute;margin-right:-30px;right:0;bottom:15px;background:#fffa53;color:#333;padding:3px 5px;width:60px;line-height:1;text-align:center;border-radius:20px;font-size:9px;transition:all 0.5s;font-style: italic;}

	.menu-logo img{display:block;margin:24px auto 20px;width:92%;}




	/* lower_common */

	#contents{z-index: 1;position: relative;}

	.background-text{position:absolute;right:5%;top:5%;width:34%;z-index:0;}

	.headline-catch{color:#fff;font-size:36px;margin-bottom:30px;text-align:center;line-height:1.3;}

	.headline{color:#fff;font-size:30px;margin-bottom:40px;text-align:center;}
	.headline:after{content:'';margin:0 auto;display:block;background-image:url(../img/top/common-titbar.png);height:4px;background-position:center;background-repeat: no-repeat;width:50%;}

	.section__wrap{position:relative;z-index:1;}

	.infobox .title{display:block;font-size:50px;color:#fff;text-align:left;margin-bottom:0;}
	.infobox .title .ruby{font-size:12px;vertical-align: middle;margin-left:20px;}
	.infobox .text{display:block;color:#fff;line-height:2;}

	.animation-trigger{position:absolute;top:0;left:0;}









	/*---- footer ----*/
	.footer__wrap { background-color:#000;overflow:hidden;position:relative;z-index:10;}
	.footer__inner { padding:5% 5%;text-align:center;}
	.footer__wrap .img_attention{font-size:9px;margin-bottom:30px;color:#fff;text-align:center;}

	/* .footer__wrap{position:relative;z-index:10;} */

	#footer .inner_centering {padding:20px 0 20px;text-align:center;}
	.bnr_footer img{width:300px;margin:0 10px 0;}
	.footer_link { line-height: 160%; letter-spacing: 2px; color: #fff;margin-top:1em;}

	.footer_logoheight{ height: 20px; margin: 0 1.5%;}
	.footer_logoheight.steam{ height: 40px; margin-bottom:-6px;}
	.footer_logoheight.shibusawa{ height: 30px; margin-bottom:-6px;}
	.rights_txt { margin:20px auto;font-size:8px;line-height: 1.6; letter-spacing: 0.5px; text-align: left;color:#fff;width:90%;}
	.rights_txt br{display:none;}
	.rights_mark { height: 8px;}

	#footer .cero{height:40px;margin-bottom:-5px;}

	.btn-twitter-footer{width:80%;margin:0 auto 5vw;}


	 #footer #language{margin:0px 0 0px;padding:16px 0 30px;color:#fff;text-align:center;background-color:#333;font-size:12px;}
	 #language .tit{text-align:center;display:block;padding-bottom:10px;font-size:15px;}
	 #footer #language a{color:#333;padding:3px 10px;border-radius:20px;margin:0 1px;border:1px solid #fff;color:#fff;box-sizing:border-box;}


		#footer .btn_reserve{background-color:#f18800;color:#fff;padding:10px 30px;display:inline-block;margin:0px 2px 0px;border-radius:30px;font-size:12px;}


	.btn_twitter{background-color:#28a4e0;display:inline-block;color:#fff;padding:5px 20px 5px 5px;border-radius:80px;margin:0 2px;}
	.btn_twitter .icon{border-radius:50%;width:31px;display:inline-block;vertical-align:middle;margin-right:0.6em;}
	.btn_twitter p{display:inline-block;line-height:1.2;vertical-align:middle;font-size:12px;}

	#manual{text-align:center;padding:40px 0;background-color:#000;}
	#manual a{color:#fff;background-color:#000;font-size:19px;border-radius:50px;transition:all 0.5s;padding:4px;display:inline-block;margin:0 auto;border:2px solid #aaa;}

	#manual .line{font-size:14px;border-radius:50px;padding:3px 30px;}
	#manual a:hover{color:#000;background-color:#fff;}

	#manual a .line:after{content:'';display:inline-block;background-image:url('../img/common/icon_out.svg');background-repeat:no-repeat;width:18px;height:17px;background-size:100%;margin-left:0.5em;margin-bottom:-0.1em;}


	.background__wrap{position:fixed;top:0;left:0;width:100%;z-index: 0;}
	.background-movie .movie{width:100%;height:100%;display:block;}

	/*  */

	.btn.default-style{padding:6px 8px;border:1px solid #fff;display:inline-block;color:#fff;margin:30px auto 0;letter-spacing: 0.5em;transition:all 0.4s;display:block;position:relative;width:80%;box-sizing: border-box;text-align:center;}
	.btn.default-style:after{content:'';display:inline-block;width:16px;background:url(../img/common/direct-w.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}


	.btn.default-style.size-min{font-size:10px;}
	.btn.default-style.size-min:after{width:12px;height:12px;}


	.hide_sp{display:none!important;}


}



/* op */


.clearfix:after{content:'';display:block;clear:both;}
#cboxOverlay {background: #000!important;opacity: 0.7!important;}



.sans-serif{font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}

@media screen and (-webkit-min-device-pixel-ratio:0){
*{
-webkit-font-smoothing:antialiased;
}
}

_::content, _:future, *:not(*:root) {
font-weight:normal;
-webkit-font-smoothing:subpixel-antialiased;
}

span.nobr {
white-space: nowrap;
}


a,img,div,li{outline: none;}
a:focus,img:focus,div:focus,li:focus{outline: none;}

will-change: transform;

}