@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
html {
}
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
.fl {
	float: left;
}

.flimg img {
	float: left;
}
.fldiv {
	width: 960px;
}
.fldiv div {
	float: left;
}
.rblock {
	position: relative;
}
.ablock {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.rblock img, .ablock img {
	display: block;
}
.pblock img {
    display: block;
	width: 100%;
}
.tx {
	width: 100%;
	position: absolute;
}
li {
	list-style: none;
}
img {
	border: 0;
	vertical-align: top;
}
a {
	color: #0099FF;
	outline: 0;
}
a:focus {
	outline: 0;
}

html {
	width: 100%;
	background: #f2f2f2;
	overflow-y: scroll;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width: 100%;
}
#wrapper {
	background: #000;
	width: 100%;
    min-width: 960px;
	position: relative;
	overflow: hidden;
}
.wrapper {
	width: 100%;
}
.contents {
	position: relative;
	width: 960px;
	margin: 0 auto;
}


/* common */
#bg {
	position: relative;
	width: 1920px;
	left: 50%;
	margin-left: -960px;
	background: url(../images/common/bg.jpg) center top no-repeat #000000 fixed;
}
#top #bg {
	background: url(../images/top/r/bgt01.jpg) center top no-repeat #000000;
}
#lovl {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10000;
    background: #000000;
}
#loadimg {
    position: absolute;
    width: 64px;
    height: 64px;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -32px;
    -webkit-animation: a_load_img 1s linear 0s infinite;	
    animation: a_load_img 1s linear 0s  infinite;	
}
@-webkit-keyframes a_load_img {
	0%   {-webkit-transform:rotate(0%);}
	100% {-webkit-transform:rotate(360deg);}
}
@keyframes a_load_img {
	0%   {transform:rotate(0%);}
	100% {transform:rotate(360deg);}
}
.ptop {
	position: fixed;
	right: 1em;
	bottom: 7em;
	text-align:right;
	display:block;
	z-index:100 !important;
}
.ptop img {
	width: 4em !important;
}

.ptop a:hover  {
    opacity: 0.7;
}
.over:hover {
	opacity: 0.7;
}
.bgcontents {
	position: relative;
	width: 1920px;
	left: 50%;
	margin-left: -960px;
}

/* menu */
#menu {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background: rgba(0,0,0,0.75);
	z-index: 100;
}
#menu ul { position: relative; height: 40px; }
#menu li { position: absolute; }
#menu li a, #menu li a span { display: block; }
#menu li img { display: block; width: 100%; }
#m00 { width: 10.2%; left: 0%; top: 0%; }
#m01 { width: 12.6%; left: 16.56%; top: 0%; }
#m02 { width: 20.83%; left: 35.41%; top: 0%; }
#m03 { width: 13.64%; left: 61.97%; top: 0%; }
#m04 { width: 15.93%; left: 83.85%; top: 0%; }

#maincontents {
	padding-top: 40px;
}
#top #maincontents {
	padding-top: 0;
}

#crb {
    background-color: #D1D4DF;
}
#crb .contents {
    text-align: center;
}
#copyright {
    display: inline-block;
    padding: 2.18% 0;
}
#top #copyright {
    display: block;
	margin: 0 auto;
	width: 83.43%;
    padding: 6.56% 0 4.68% 0;
}

/* top  */
#mtop h1 {
    position: relative;
    z-index: 2;
}

#t02 { position: absolute; width: 16.35%; left: 0.52%; top: 3.36%; }
#t03 { position: absolute; width: 10.31%; left: 89.89%; top: 6.9%; }
#t04 { position: absolute; width: 51.35%; left: 0.31%; top: 90.81%; }
#t04 { position: absolute; width: 32.6%; left: 11.77%; top: 91%; }


#btn_notice { position: absolute; width: 29.16%; left: 13.54%; top: 0; margin-top: 99.27%; z-index: 3;}
#btn_notice a:hover {
	opacity: 0.7;
}

#olmenq {
	position: relative;
	width: 87.5%;
	margin: 4.47% auto 0 auto;
	z-index:2;
}
#olmenq li {
	width: 47.61%;
	margin: 0 1.1% 1.1% 1.1%;
	float: left;
}

#topics h3 { position: relative; width: 28.54%; margin-left: 33.64%; margin-top: -1.67%; }
.bx-wrapper {
	margin: 0 auto;
}
#topicslist li {
	width: 41.25%;
	border: 2px solid #B9000B;
	background-color: #B9000B;
	/* margin: 0 0.729%; */
}
#topicslist h4 {
	color: #000;
	font-size: 18px;
	line-height: 38px;
	height: 38px;
	width: 100%;
	vertical-align: middle;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
#topicslist li>a,
#topicslist li>span {
	position: relative;
	display: block;
}
#topicslist li a {
	text-decoration: none;
}
#topicslist li a:hover img {
	opacity: 0.7;
}
#topicslist li .d {
	position: absolute;
	right: 8px;
	bottom:2px;
	color: #fff;
	vertical-align: bottom;
	font-size: 25px;
	font-family: Arial, Helvetica, "sans-serif";
	text-shadow: 0 0 5px #000;
}
#btn_topsouki {
	position: relative;
	width: 85.41%;
	margin: 2.18% auto 2.08% auto;
}
#btn_toptenpo {
	position: relative;
	width: 85.41%;
	margin: 0 auto;
	padding-bottom: 7.08%;
}
#bgt02 {
	background: url(../images/top/r/bgt02.jpg) center top no-repeat;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
}
#bgt02 h3 {	position: relative; width: 46.14%; margin-left: 29.68%; margin-top: -6.57%; }
#bgt02 #topmv {
	position: relative;
	margin-top: -7.08%;
	margin-bottom: 7.39%;
}
.mvbtn {
	position: relative;
    width: 85%;
	margin-left: auto;
	margin-right: auto;
    border: 2px solid #B9000B;
}
.mvbtn a {
    display: block;
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
}
#bgt03 {
	background: url(../images/top/r/bgt03.jpg) center top no-repeat;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
}
#bgt03 h3 { position: relative; width: 54.37%; margin-left: 11.04%; margin-top: 72.91%; }
#t10 { position: relative; width: 85.1%; margin-left: 6.66%; margin-top: 38.22%; }
#t11 { position: relative; width: 35.93%; margin-left: 32.29%; margin-top: 3.85%; }
#t12 { position: relative; width: 35.41%; margin: 3.43% auto 0 auto; z-index: 2; }

#bgt04 {
    background: url("../images/top/c/c_bg.jpg") center bottom no-repeat;
}
#c01  { position: relative; width: 189.897%; margin-left: -50%; margin-top: -16%; }
#c02  { position: relative; width: 134.48%; margin-left: -36.457%; margin-top: -89%; }

#cha_list { position: absolute; top: 65%; width: 83.334%; left: 0; right: 0; margin: auto; }
#c_btn { position: absolute; width: 35.41%; top: 91%; left: 0; right: 0; margin: 0 auto;}

#bgt05 {
	background: url(../images/top/r/bgt05.jpg) center top no-repeat;
}
#t13 { position: relative; width: 81.25%; margin-left: 9.89%; padding: 12.5% 0 88.85% 0; }
#bgt05_ss ul {
	padding: 1.25% 0 13.33% 0;
	font-size: 0;
	text-align: center;
}
#bgt05_ss li {
	display: inline-block;
	width:41.25%;
	border: 2px solid #490957;
	margin: 0 0.93%;
}
#bgt06 {
	background: url(../images/top/r/bgt06.jpg) center top no-repeat;
	background-size: auto 100%;
}
#bgt06 h3 { position: relative; width: 48.12%; margin-left: 25.52%; padding-top: 1.56%; padding-bottom: 0.1%;}

#twitter {
    position: relative;
	width: 85%;
	margin: 0 auto;
	padding-top: 40%;
	background-color: #000;
	background-color: rgba(0,0,0,0.25);
	border: 2px solid #353B4D;
}
#twf { 
	position: absolute;
    width: 92.64%;
    height: 0;
    left: 0;
    top: 0;
    padding-top: 39.95%;
    margin-left: 3.68%; 
    margin-top: 3.43%;
    color: #fff;
}
#twitterwidget {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#twf a { color: #f33; }
#t17 { position: relative; width: 35.41%; margin: 3.64% auto 0 auto; padding-bottom: 5.2%; }
#t18 { position: relative; width: 14.47%; padding-top: 11.45%; margin: 0 auto; }
#t19 { position: relative; width: 74.47%; margin: 4.06% auto 8.02% auto; }

#snsset {
	position: relative;
	width: 288px;
	margin: 0 auto 6.35% auto;
}
#snsset li {
	float: left;
	margin: 0 8px;
	width: 80px;
}
#snsset a:hover { opacity: 0.7; }

#eula {
	width: 73%;
	margin: 0 auto;
	color: #fff;
	font-size: 16px;
	text-align: center;
}
#eula a {
	color: #f19149;
}
#eula a:hover {
	color: #ffff00;
}

#footer {
    position: relative;
    width: 100%;
    overflow: hidden;
}
#topbn {
    padding: 3% 0 3% 0;
    width: 100%;
}
#topbn ul {
    text-align: center;
    line-height: 0;
    font-size: 0;
}
#topbn li {
    display: inline-block;
}
#mv01 {
    margin-top:-1.25%;
}
.mvtx {
    margin-top: -6.25%;
}

#bn_popup {
    position: relative;
    width: 93.33%;
    margin: 2.18% auto;
}

.subh h1 { position: relative; width: 26.97%; margin-left: 72.18%; margin-top: -11.87%; }

.submenu {
	position: relative;
	background: url(../images/common/menu/bg_submenu.png) center top repeat;
	background-size: auto 100%;
	z-index: 2;
}
.submenu .contents {
}
.submenu a {
	display: block;
}

.submenu ul {
	padding: 1.35% 0;
	width: 97.91%;
	margin: 0 auto;
	font-size: 0;
}
.submenu p {
	padding-top: 6.25%;
	font-size: 0;
}

.submenu li {
	display: inline-block;
	position: relative;
}

@media only screen and (max-width: 960px) {
    #wrapper {
        background-position: -480px 0;
    }
    #bgu {
        background-position: -480px 0;
    }
}
@media screen and (max-width:767px) {
    /* common */
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
    #wrapper {
        min-width: auto;
    }
    .contents {
        width: 100%;
    }
	#bg_h {
		width: 100%;
		background-color: #000;
		padding-top: 10.62%;
	}
    #game #bg,
	#character #bg,
	#movie #bg,
	#special #bg {
        position: relative;
		left: auto;
		margin-left: 0;
        width: 100%;
		background-image:none;
		background-color: transparent;
    }
	#top #bg {
		width: 100%;
		margin-left: 0;
		left: auto;
		background-position: center 0;
		background-size: 200% auto;
	}
	#game #bg:before,
	#character #bg:before,
	#movie #bg:before,
	#special #bg:before	{
		z-index: -1;
		content: "";
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background: url(../images/common/bg.jpg) center top no-repeat #000000;
		background-size: 200% auto;
	}
	#menu ul {
		height: auto;
	}
	#menu .contents {
		padding: 2% 0;
	}
	#menu li { position: relative; left: auto; top: auto; float: left;}
	#m00 { width: 13.93%; }
	#m01 { width: 17.23%; }
	#m02 { width: 28.37%; }
	#m03 { width: 18.67%; }
	#m04 { width: 21.77%; }
	#maincontents {
		padding-top: 10.62%;
	}

	#t02 { position: absolute; width: 32.7%; left: -3%; top: -3%; }
	#btn_notice { width: 40%; left: 3.54%; top: 0; margin-top: 99.27%; }
	.bgcontents {
		position: relative;
		width: 200%;
		left: 50%;
		margin-left: -100%;
		background-size: 100% auto !important;
	}
	#bgt06 {
		background-size: auto 100% !important;
	}
	.bgcontents .contents {
		width: 50%;
	}
	.bx-wrapper {
		width: 96%;
	}
	#topicslist h4 {
		color: #000;
		background-color: #B9000B;
		font-size: small;
		font-size: 10px;
		line-height: 10px;
		height: 22px;
		display: table-cell;
		vertical-align: middle;
	}
	#topicslist li .d {
		right: 4px;
		bottom:2px;
		font-size: 16px;
	}
	#btn_topsouki, #btn_toptenpo {
		width: 96%;
	}
	#t12 {
		width: 50%;
	}
    #c_btn {
		width: 50%;
	}
    #twitter {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
		padding-top: 0;
    }
    #twf {
        position: relative;
        width: 92%;
        padding: 5% 4% 2% 4%;
        height: auto;
        margin-left: 0;
        margin-top:0;
    }
    #twitterwidget {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
    }
	#t17 { width: 70%; }
	#t18 { width: 20%; }
	#t19 { width: 100%; }
	#snsset {
		width: 92%;
	}
	#snsset li {
		float: left;
		margin: 0 4%;
		width: 25%;
	}
	#eula {
		width: 96%;
		font-size: small;
	}
	#top #copyright {
        width: 94%;
        padding: 6% 0 4% 0;
		margin: 0 auto;
    }
    #topbn li {
        width: 94%;
        margin: 0 auto 2% auto;
    }
}