@charset "UTF-8";

html { font-size: 41.6875%; }
html, body {
	width: 100%;
	height: 100%;
	min-height: 100%;
}
body {
	position: relative;
	min-width: 320px;
	margin: 0 auto;
	font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	/*font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;*/
	/*color: #5b5b5b;*/
	color: #333;
	line-height: 1.6;
	background:#fff;
}
*,
*:before,
*:after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	word-break: break-all !important;
}

img {
	max-width: 100%;
	height: auto;
}

a img {
	border: none;
}
.clearfix {
	display: block;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}

ul,
ol,
li {
	list-style-type: none;
}
.pc-view{
	display: inline;
}
.sp-view {
	display: none;
}
.ellipsis {
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}




/* ========================================================
 loading / bgAnimation
======================================================== */
.bgCommonAnime{
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.loadingWrap {
		/*display: none;*/
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 100%;
		top: 0px;
		right: 0px;
		background-color: #00c5ff;
		overflow: hidden;
}
.loadImage {
		position: absolute;
		z-index: 1;
		display: block;
		top: 50vh;
		right: 50vw;
		max-width: 310px;
		width: 310px;
		overflow: hidden;
		-webkit-transform: translate(50%, -50%);
		-ms-transform: translate(50%, -50%);
		transform: translate(50%, -50%);
}
.loadImage:before,
.loadImage .imageBg{
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
}
.loadImage:before{
	z-index: -10;
	height: 100%;
	/*background-color: #fff;*/
}
.loadImage .imageBg{
	z-index: -5;
	height: 0;
	/*background-color: #fff000;*/
}
.loadImage img{
	display: block;
	width: 310px;
/*	margin-left: -310px;
	-webkit-animation: loadingAnime .2s .2s forwards;
	-ms-animation: loadingAnime .2s .2s forwards;
	animation: loadingAnime .2s .2s forwards;*/
}

@-webkit-keyframes loadingAnime{
	  0%{margin-left: -310px; }
	100%{margin-left:    0px; }
}
@-ms-keyframes loadingAnime{
	  0%{margin-left: -310px; }
	100%{margin-left:    0px; }
}
@keyframes loadingAnime{
	  0%{ margin-left: -310px; }
	100%{ margin-left:    0px; }
}





/* ========================================================
 buttonArea
======================================================== */
.buttonArea{
	width: 440px;
	margin: 10% auto;
}
.buttonArea a{
	position: relative;
	z-index: 0;
	vertical-align: middle;
	color: #fff;
	display: block;
	padding: 2% 0;
	text-align: center;
	text-transform: uppercase;
	color: #5b5b5b;
	font-size: 2.8rem;
	-webkit-transition: color .3s;
	-ms-transition: color .3s;
	transition: color .3s;
}
.buttonArea a:before, 
.buttonArea a:after{
	content: "";
	position: absolute;
	z-index: -1;
	background: #fff;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: 2px solid #e3e3e3;
	-webkit-transform: skew(-25deg);
	transform: skew(-25deg);
	transition: background .3s;
}
.buttonArea a:after{
	z-index: -1;
	width: 0%;
	border: 0px solid #e3e3e3;
	background-color: #0085de;
	-webkit-transition: width .3s;
	-ms-transition: width .3s;
	transition: width .3s;
}
.buttonArea a:hover{color: #fff;}
.buttonArea a:hover:after{width: 100%;}

@media screen and (max-width: 768px){
	.buttonArea{
		width: 50%;
		margin: 15% auto;
	}
	.buttonArea a{
		padding: 4% 0;
		font-size: 3rem;
	}
}

@media screen and (max-width: 550px){
	.buttonArea{width: 70%;}
	.buttonArea a{font-size: 3.2rem;}
}



/* ========================================================
 category
======================================================== */
ul.categories {
	/*font-size: 0;*/
	text-align: center;
	width: 100%;
	margin: 0 auto;
}
ul.categories li{
	position: relative;
	z-index: 0;
	vertical-align: middle;
	color: #fff;
	width: 120px;
	display: inline-block;
	margin: 0 15px 0 0;
	text-align: center;
	margin-left: 3px;
	text-transform: uppercase;
}
ul.categories li:last-child{
	margin-right: 0px;
}
ul.categories li:before {
	content: "";
	position: absolute;
	z-index: -1;
	background: #8fc31f;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: 1px solid #8fc31f;
	-webkit-transform: skew(-25deg);
	transform: skew(-25deg);
	transition: background .3s;
}
ul.categories li:hover:before,
ul.categories li.-current:before{background: #fff !important;}
ul.categories li a{
	display: block;
	color: #fff;
	font-size: 2.2rem;
	-webkit-transition: color .3s;
	-ms-transition: color .3s;
	transition: color .3s;
}
ul.categories li:hover a{color: #8fc31f;}

@media screen and (max-width: 768px){
	ul.categories li a{font-size: 2.6rem;}
}

@media screen and (max-width: 470px){
	ul.categories li a{font-size: 3rem;}
}



/* ========================================================
 wrapper
======================================================== */
.wrapper{
	min-width: 1200px;
	overflow: hidden;
}
main.mainWrap{
	width: 1200px;
	margin: auto;
}
main .content{
	position: relative;
	z-index: 0;
	width: 98%;
	margin: 60px auto 0;
}
@media screen and (max-width: 768px){
	main.mainWrap{width: 100%;}
	main .content{margin: 5% auto 0;}
}


.shapeWrap{
	position: relative;
	z-index: 0;
}
.shapeWrap .shape {
	position: absolute;
	z-index: 1;
	top: 0;
	left: -10%;
	width: 120%;
	padding-top: 1000px;
}
.shapeWrap .shape01 {
	background-color: #00c5ff;
	-webkit-transform: rotate(6deg);
	-ms-transform: rotate(6deg);
	transform: rotate(6deg);
}
.shapeWrap .shape02 {
	top: 66px;
	background-color: #fff000;
	-webkit-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}



.pagerWrap{
	width: 550px;
	margin: 150px auto 0;
	text-align: center;
}
.pager{
	position: relative;
	z-index: 0;
	width: 12%;
	padding-top: 12%;
	display: inline-block;
	border-radius: 4px;
	border: 2px solid #e3e3e3;
	margin-left: 1.8%;
	color: #333;
	background-color: #fff;
	text-align: center;
	-webkit-transition: color .3s, background-color .3s, border .3s;
	-ms-transition: color .3s, background-color .3s, border .3s;
	transition: color .3s, background-color .3s, border .3s;
}
.pager:first-child{margin-left: 0;}

.pager span{
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	font-size: 18px;
	line-height: 0;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.pager:hover,
.pager.-current{
	border: 2px solid #0085de;
	color: #fff;
	background-color: #0085de;
}



/* ========================================================
 header
======================================================== */
header{background-color: #fff;}
header h1{
	width: 450px;
	margin: 0 auto 12px;
	padding-top: 36px;
}
header h1 img{
	display: block;
	width: 100%;
}
header h1 span{
	display: block;
	width: 100%;
	margin-top: 1%;
	color: #8f8f8f;
	text-align: center;
	font-family: Noto Sans JP;
	font-size: 4rem;
}

header .btns a.tw{
	position: absolute;
	top: 0;
	right: 253px;
}
header .btns a.bgm{
	position: absolute;
	top: 0;
	right: 171px;
}

header .sp-btn{
	display: none;
}
header nav{background-color: #01cfff;}
header nav .inner{
	width: 1200px;
	margin: 10px auto 0;
	padding: 35px 0 20px;
	text-align: center;
}

header nav span.close{
	display: none;
}
header nav a{
	position: relative;
	z-index: 0;
	display: inline-block;
	padding: 0 0px 5px;
	margin: 0px 20px;
	color: #fff;
	font-family: Noto Sans JP;
	letter-spacing: .2rem;
	font-weight: bold;
	vertical-align: top;
	font-size: 16px;
	text-align: center;
}
header nav a:before{
	content: '';
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 0;
	display: block;
	width: 0;
	height: 2px;
	background: #fff;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: width .3s;
	-ms-transition: width .3s;
	transition: width .3s;
}
header nav a.twitter{width: 30px;}
header nav a.twitter img{width: 100%;}
header nav a:hover:before,
header nav a.current:before{width: 100%;}

header nav a.logoLink{
	width: 60%;
	max-width: 455px;
	margin: 10% auto 3%;
}
header nav a.logoLink:before{display: none;}


/*==== gameSite ====*/
.gameSite header>.inner{
	position: relative;
	z-index: 999 !important;
	width: 1200px;
	margin: auto;
	padding: 20px 0 15px;
	background-color: #fff;
}
.gameSite header h1 {
	width: 174px;
	float: left;
	margin-left: 5%;
	margin: 0 0 0 5%;
	padding-top: 0;
}
.gameSite header nav .inner {
	width: 77%;
	margin: 7px auto 0;
	padding: 0;
	text-align: left;
	float: right;
}
.gameSite header nav a {
	position: relative;
	z-index: 0;
	display: inline-block;
	width: auto;
	margin: 0px 20px;
	color: #5b5b5b;
	font-family: Noto Sans JP;
	text-align: center;
	letter-spacing: .2rem;
	font-weight: bold;
	vertical-align: top;
	font-size: 16px;
}
.gameSite header nav a.twitter{
	position: absolute;
	z-index: 1;
	right: 5%;
	top: 50%;
	width: 30px;
	-webkit-transform: translateY(-34%);
	-ms-transform: translateY(-34%);
	transform: translateY(-34%);
}
.gameSite header nav a:before {background: #00c5ff;}
.menuWrapper,
.closeButton{display: none;}

.gameSubTitle{
	position: absolute;
	z-index: 0;
    bottom: -28px;
    left: 3%;
    color: #8f8f8f;
    text-align: center;
    font-family: Noto Sans JP;
    font-size: 2.2rem;
}



/* ========================================================
 ttl
======================================================== */
main .ttl{
	position: relative;
	z-index: 0;
	display: block;
	margin: 30px auto 60px;
	text-align: center;
	font-size: 9rem;
	font-weight: normal;
	font-family: Noto Sans JP;
	color: #5b5b5b;
	letter-spacing: .3rem;
}
main .ttl:before{
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: .5rem;
	width: 100%;
	height: 100%;
	color: #dcdcdc;
}
main .ttl.gamenews:before{content: "GAME NEWS";}
main .ttl.movie:before{content: "MOVIE";}
main .ttl.news:before{content: "NEWS";}
main .ttl.event:before{content: "EVENT";}
main .ttl.special:before{content: "SPECIAL";}
main .ttl.unit:before{content: "UNIT";}
main .ttl.character:before{content: "CHARACTER";}
main .ttl.twitter:before{content: "TWITTER";}
main .ttl.staff:before{content: "STAFF";}
main .ttl.discography:before{content: "DISCOGRAPHY";}
main .ttl.system:before{content: "SYSTEM";}
main .ttl.story:before{content: "STORY";}

main .ttl.-addDeco{
	display: inline-block;
	margin: 0;
}
main .ttl.-addDeco .deco{
	position: absolute;
	z-index: 1;
	display: block;
	max-width: 116px;
	width: 116px;
	top: 50%;
	margin-top: -47px;
}
main .ttl.-addDeco .deco.deco01{
	left: 0%;
	-webkit-transform: translateX(-120%);
	-ms-transform: translateX(-120%);
	transform: translateX(-120%);
}
main .ttl.-addDeco .deco.deco02{
	right: 0%;
	-webkit-transform: translateX(120%);
	-ms-transform: translateX(120%);
	transform: translateX(120%);
}
.ttlWrap{
	margin: 50px 0 20px;
	text-align: center;
}

@media screen and (max-width: 550px){
	main .ttl.-addDeco .deco{
	    max-width: 80px;
	    width: 80px;
	    margin-top: -36px;
	}
}



/* ========================================================
 footer
======================================================== */
footer{
	position: relative;
	z-index: 10;
	width: 100%;
	min-width: 1200px;
	border-top: 2px solid #e3e3e3;
	text-align: left;
	padding: 30px 0 80px;
	margin-top: 150px;
	background: #fff;
}
footer a.pageTop{
	position: fixed;
	bottom: 3%;
	right: 3%;
}
.footer_inner{
	width:1024px;
	margin:0 auto;
	font-size: 2.2rem;

}
.footer_inner a{
	color: #333;
	text-decoration: underline;
}


.footer_inner a:hover,
.footer_inner a:active{
	color:#0085de;
	text-decoration:none;
}

.footer_inner ul{
	margin-left:10px
}

.footer_inner ul li{
	float:left;
	margin-bottom:5px;
}
.footer_inner ul li img{
	width:106px;
}
.footer_inner ul li p{
	margin:15px auto auto 10px;
}

.footer_inner ul.link{
	margin:10px 0 0 0;
}

.footer_inner ul.link li{
	float:left;
	margin:5px 15px 15px 0;
}

.footer_inner ul.link li img{
	margin:2px 2px 0 0;
	display: inline;
}

.fixed header,
.fixed main,
.fixed footer{
	z-index: 2;
	position: relative;
}
.bgWrap {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
}



.to-top{
	position: fixed;
	z-index: 99;
	right: 20px;
	bottom: 20px;
	display: block;
	width: 60px;
	padding-top: 60px;
	background-color: #00c5ff;
	border-radius: 100%;
	-webkit-transition: background-color .3s;
	-ms-transition: background-color .3s;
	transition: background-color .3s;
}
.to-top:hover{background-color: #fcf400;}
.to-top img{
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	display: block;
	transform: translate(-50%,-50%);
	width: 100%;
}

/** smart phone **/
@media screen and (max-width: 768px){
	.wrapper{
		min-width: 320px;
		width: 100%;
	}

	.pc-view{
		display: none;
	}
	.sp-view {
		display: block;
	}

	.pagerWrap{
		width: 95%;
		margin: 10% auto 0;
	}

	header,
	.gameSite header>.inner{
		min-width: 320px;
		width: 100%;
		padding: 5% 0;
	}
	.gameSite header{padding: 0;}

	header h1 ,
	.gameSite header h1{
		width: 60%;
		margin: 2% 0 0 2%;
		padding-top: 0;
		float: left;
	}
	.gameSite header h1{
		width: 35%;
		margin-top: 0;
	}
	.wrapper:not(.gameSite) header h1 img {
		width: 50%;
		float: left;
	}
	header h1 span {
		width: 40%;
		margin-top: 1%;
		text-align: left;
		font-size: 4rem;
		float: left;
	}
	header nav{
		display: none;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		background-color: #00c5ff;
		z-index: 9998;
		color: #fff;
		text-align: center;
		margin: 0;
		overflow: hidden;
	}
	.gameSite header nav{background-color: #fff;}
	html:not(.ie) header nav .navInner{
		opacity: 0;
		-webkit-transform: translateY(5%);
		-ms-transform: translateY(5%);
		transform: translateY(5%);
	}
	.navLayer{
		display: none;
		position: fixed;
		z-index: 990;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,.6);
	}
	header nav.-show,
	.navLayer.-show{
		display: block;
		-webkit-animation: showNav .3s forwards;
		-ms-animation: showNav .3s forwards;
		animation: showNav .3s forwards;
	}

	header nav.-hide,
	.navLayer.-hide{
		display: block;
		-webkit-animation: hideNav .3s .3s forwards;
		-ms-animation: hideNav .3s .3s forwards;
		animation: hideNav .3s .3s forwards;
	}

	html.ie header nav.-hide,
	html.ie .navLayer.-hide{display: none;}

	header nav.-show .navInner{
		-webkit-animation: showNavLinks .3s .3s forwards;
		-ms-animation: showNavLinks .3s .3s forwards;
		animation: showNavLinks .3s .3s forwards;
	}

	header nav.-hide .navInner{
		-webkit-animation: hideNavLinks .3s forwards;
		-ms-animation: hideNavLinks .3s forwards;
		animation: hideNavLinks .3s forwards;
	}


@-webkit-keyframes showNav{
	  0%{height:   0%;}
	100%{height: 100%;}
}
@-ms-keyframes showNav{
	  0%{height:   0%;}
	100%{height: 100%;}
}
@keyframes showNav{
	  0%{height:   0%;}
	100%{height: 100%;}
}

@-webkit-keyframes hideNav{
	  0%{height: 100%;}
	100%{height:   0%;}
}
@-ms-keyframes hideNav{
	  0%{height: 100%;}
	100%{height:   0%;}
}
@keyframes hideNav{
	  0%{height: 100%;}
	100%{height:   0%;}
}

@-webkit-keyframes showNavLinks{
	  0%{
		opacity: 0;
		-webkit-transform: translateY(5%);
	  }
	100%{
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@-ms-keyframes showNavLinks{
	  0%{
		opacity: 0;
		-ms-transform: translateY(5%);
	  }
	100%{
		opacity: 1;
		-ms-transform: translateY(0);
	}
}
@keyframes showNavLinks{
	  0%{
		opacity: 0;
		transform: translateY(5%);
	  }
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes hideNavLinks{
	  0%{
		opacity: 1;
		-webkit-transform: translateY(0);
	  }
	100%{
		opacity: 0;
		-webkit-transform: translateY(5%);
	}
}
@-ms-keyframes hideNavLinks{
	  0%{
		opacity: 1;
		-ms-transform: translateY(0);
	  }
	100%{
		opacity: 0;
		-ms-transform: translateY(5%);
	}
}
@keyframes hideNavLinks{
	  0%{
		opacity: 1;
		transform: translateY(0);
	  }
	100%{
		opacity: 0;
		transform: translateY(5%);
	}
}


	header nav .inner,
	.gameSite header nav .inner{
		width: 80%;
		margin: auto;
		padding: 0;
		float: none;
	}
	.gameSite header nav .inner{margin: 10% auto 0;}
	header .nav,
	header nav a.twitter,
	.gameSite header .nav,
	.gameSite header nav a.twitter{
		position: relative;
		z-index: 0;
		display: block;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		width: 28%;
		padding: 28% 0 0 0;
		margin: 0 0 10% 8%;
		border-radius: 5%;
		font-size: 0;
		float: left;
		overflow: hidden;
		-webkit-transform: translate(0);
		-ms-transform: translate(0);
		transform: translate(0);
	}
	header nav a.twitter{
		right: 0;
		top: 0;
		-webkit-transform: translate(0);
		-ms-transform: translate(0);
		transform: translate(0);
	}
	header .nav:first-child,
	header .nav:nth-child(3n+1){margin: 0;}
	header nav a.twitter img{display: none;}
	header .nav:before,
	header nav a.twitter:before,
	.gameSite header .nav:before,
	.gameSite header nav a.twitter:before{
		content: "";
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: #fff;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.gameSite header .nav:before,
	.gameSite header nav a.twitter:before{
		background-color: #00c5ff;
	}
	header .nav:nth-child(1):before{background-image: url(../images/nav-sp01.png);}
	header .nav:nth-child(2):before{background-image: url(../images/nav-sp02.png);}
	header .nav:nth-child(3):before{background-image: url(../images/nav-sp03.png);}
	header .nav:nth-child(4):before{background-image: url(../images/nav-sp04.png);}
	header .nav:nth-child(5):before{background-image: url(../images/nav-sp05.png);}
	header .nav:nth-child(6):before{background-image: url(../images/nav-sp06.png);}
	header .nav:nth-child(7):before{background-image: url(../images/nav-sp07.png);}
	header .nav:nth-child(8):before{background-image: url(../images/nav-sp08.png);}
	header nav a.twitter:before    {background-image: url(../images/nav-sp09.png);}

	.gameSite header .nav:nth-child(1):before{background-image: url(../game/images/nav-sp01.png);}
	.gameSite header .nav:nth-child(2):before{background-image: url(../game/images/nav-sp02.png);}
	.gameSite header .nav:nth-child(3):before{background-image: url(../game/images/nav-sp03.png);}
	.gameSite header .nav:nth-child(4):before{background-image: url(../game/images/nav-sp04.png);}
	.gameSite header .nav:nth-child(5):before{background-image: url(../game/images/nav-sp05.png?20190402);}
	.gameSite header nav a.twitter:before    {background-image: url(../game/images/nav-sp06.png);}

	.closeButton{
		position: relative;
		z-index: 0;
		display: block !important;
		width: 80%;
		margin: auto;
		padding: 1% 0;
		border: 2px solid #00c5ff;
		border-radius: 6px;
		background-color: #fff;
		font-size: 3.4rem;
		text-align: center;
		color: #00c5ff;
		font-weight: bold;
		cursor: pointer;
	}
	.closeButton .icon{
		position: relative;
		z-index: 0;
		display: inline-block;
		width: 7%;
		margin-right: 2%;
		padding-top: 7%;
		vertical-align: sub;
		-webkit-transform: translateY(7%);
		-ms-transform: translateY(7%);
		transform: translateY(7%);
	}
	.closeButton .icon:before,
	.closeButton .icon:after{
		content: "";
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 0;
		width: 100%;
		padding-top: 2px;
		background-color: #00c5ff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.closeButton .icon:after{
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.gameSubTitle{
		bottom: 10%;
		left: 2%;
		width: 35%;
        font-size: 3rem;
	}


	.menuWrapper {
		display: block !important;
		position: relative;
		z-index: 0;
		border: 1px solid #ccc;
		width: 10%;
		padding-top: 10%;
		margin-left: auto;
		margin-right: 2%;
		border-radius: 100%;
		background-color: #00c5ff;
	}
	.gameSite .menuWrapper {background-color: #fff;}
	#menuButton {
		overflow: hidden;
		display: block;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}

	#menuButton span,
	#menuButton::before,
	#menuButton::after {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 60%;
		height: 0;
		padding-top: 6%;
		margin: auto;
		background: #fff;
	}
	.gameSite #menuButton span,
	.gameSite #menuButton::before,
	.gameSite #menuButton::after {background: #00c5ff;}
	#menuButton span {
		overflow: hidden;
		z-index: 1;
		color: #00c5ff;
	}
	#menuButton::before {
		z-index: 2;
		transform: translate(0, -350%);
		content: "";
	}
	#menuButton::after {
		z-index: 2;
		transform: translate(0, 350%);
		content: "";
	}

	header .btns img{
		width: 36px;
	}
	header .btns a.tw{
		right: 44px;
		z-index: 9999;
	}
	header .btns a.bgm{
		right: 5px;
		z-index: 9999;
	}
	header .sp-btn {
		display: block;
		position: absolute;
		right: 5%;
		top: 15px;
		cursor: pointer;
		z-index: 9999;
	}
	header .sp-btn>span{
		display: block;
		font-size: 10px;
		text-align: center;
		line-height: 20px;
	}
	header a.menu-trigger {
		position: relative;
		width: 30px;
		height: 22px;
	}
	header a.menu-trigger.close{
	}
	header a.menu-trigger, 
	header a.menu-trigger span {
		display: inline-block;
		vertical-align: top;
		/*transition: all .4s;*/
		box-sizing: border-box;
	}
	header a.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #000;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-o-border-radius: 4px;
		-ms-border-radius: 4px;
		border-radius: 4px;
	}
	header a.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	header a.menu-trigger span:nth-of-type(2) {
		top: 9px;
	}
	header a.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	header .menu-trigger.close span:nth-of-type(1) {
		top: -11px;
	}
	header .menu-trigger.close span:nth-of-type(3) {
		bottom: -11px;
	}
	header .menu-trigger.close span:nth-of-type(1) {
		-webkit-transform: translateY(20px) rotate(-45deg);
		transform: translateY(20px) rotate(-45deg);
	}
	header .menu-trigger.close span:nth-of-type(2) {
		opacity: 0;
	}
	header .menu-trigger.close span:nth-of-type(3) {
		-webkit-transform: translateY(-20px) rotate(45deg);
		transform: translateY(-20px) rotate(45deg);
	}
	main .ttl{margin: 0 0 10%;}
	.gameSite main .ttl{margin: 5% 0 10%;}
	
	main .ttl:before{left: .4rem;}
	footer {
		min-width: 320px;
		width: 100%;
		padding: 15px 3% 80px;
	}
	.footer_inner{
		width: auto;
		font-size: 2.6rem;
	}
	.bgWrap {
		background-position: 50% 0 !important;
		min-width: initial;
	}
	.pager {
		margin-top: 20px;
	}
	.pager a {
		width: 90%;
		font-size: 14px;
		margin: 5px 0px;
		line-height: 40px;
	}
}