/* ========================================================
 NEWS
======================================================== */
.googleSearchWrap{
    text-align: right;
    position: absolute;
    z-index: 0;
    width: 380px;
    top: -50px;
    right: 0;
}

.newsList .article{
	width: 32%;
	margin: 0 2% 5% 0;
	float: left;
}
.newsList .article:nth-child(3n){margin: 0 0 5% 0;}
.newsList .article a{
	display: block;
	position: relative;
	z-index: 0;
	border: 2px solid #e3e3e3;
	background-color: #fff;
}
.newsList .article .hoverWrap {
	display: block;
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 0%;
	bottom: 0;
	left: 0;
	overflow: hidden;
	-webkit-transition: height .3s;
	-ms-transition: height .3s;
	transition: height .3s;
}
.newsList .article .hoverWrap:before,
.newsList .article .hoverWrap:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 0;
	padding-top: 402.48px;
	bottom: 0;
	left: 0;
}
.newsList .article .hoverWrap:before,
.newsList02 .article .hoverWrap:after{padding-top: 372px;}
.newsList .article .hoverWrap:before{
	z-index: 10;
	background-image: url(../images/app-logo.png);
	background-repeat: no-repeat;
	background-size: 142px;
	background-position: 50% 50%;
}
.newsList .article .hoverWrap:after{
	z-index: 0;
	background-color: rgba(0,0,0,.4);
}
.newsList .article a:hover .hoverWrap{height: 100%;}
.newsList .article .hoverWrap:hover h3{text-decoration: underline;}

.newsList .article .new{
	display: none;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 14%;
}

.newsList .article .cate {
	display: block;
	text-align: center;
	padding: 1% 0;
	color: #fff;
	font-size: 2.8rem;
	font-weight: bold;
}
.newsList .article .thumImage {
	width: 100%;
	height: 0;
	padding-top: 55%;
	border-top: 2px solid #e3e3e3;
	border-bottom: 2px solid #e3e3e3;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.newsList .article .thumImage.-noImage{background-image: url(../images/news-thum.png);}
.newsList .article .title,
.newsList .article .date {
	display: block;
	width: 90%;
	margin: 5% auto 0;
	color: #5b5b5b;
	font-weight: normal;
	line-height: 1.6;
}
.newsList .article .title {
	position: relative;
	z-index: 0;
	padding-top: 20%;;
	font-size: 2.4rem;
}
.newsList .article .title span{
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
}
.newsList .article .date{
	margin: 5% auto;
	font-size: 2.2rem;
}


.newsList02 .upper{
	width: 90%;
	margin: 5% auto 0;
}
.newsList02 .article .cate {
	width: 40%;
	font-size: 2.2rem;
	font-weight: normal;
	float: left;
}
.newsList02 .article .date {
	display: block;
	width: 50%;
	margin: 0;
	padding: 1% 0;
	text-align: right;
	float: right;
}
.newsList02 .article .title{margin: 5% auto;}


@media screen and (max-width: 768px){
	.newsList .article .hoverWrap:before,
	.newsList .article .hoverWrap:after{padding-top: 119%;}
	.newsList02 .article .hoverWrap:before,
	.newsList02 .article .hoverWrap:after{padding-top: 109%;}
	.googleSearchWrap{
		position: static;
		width: 60%;
		min-width: 300px;
		margin: auto;
		margin-bottom: 3%;
	}
	.newsList .article{
		width: 48%;
		margin: 0 4% 5% 0;
		float: left;
	}
	.newsList .article:nth-child(3n){margin: 0 4% 5% 0;}
	.newsList .article:nth-child(2n){margin: 0 0% 5% 0;}
	.newsList .article .title{padding-top: 28%;}
}

@media screen and (max-width: 550px){
	.newsList .article .hoverWrap:before,
	.newsList .article .hoverWrap:after{padding-top: 129%;}
	.newsList02 .article .hoverWrap:before,
	.newsList02 .article .hoverWrap:after{padding-top: 119%;}
	.newsList .article .cate {font-size: 3rem;}
	.newsList02 .article .cate {
		width: 50%;
		font-size: 3rem;
	}
	.newsList .article .title{font-size: 3.0rem;}
	.newsList .article .date {font-size: 2.8rem;}
	.newsList .article .title {padding-top: 34%;}
}

@media screen and (max-width: 470px){
	.newsList .article .hoverWrap:before,
	.newsList .article .hoverWrap:after{padding-top: 103%;}
	.newsList02 .article .hoverWrap:before,
	.newsList02 .article .hoverWrap:after{padding-top: 96%;}
	.newsList .article{
		width: 100%;
		margin: 0 0 5% 0;
		float: left;
	}
	.newsList .article:nth-child(3n){margin: 0 0% 5% 0;}
	.newsList .article:nth-child(2n){margin: 0 0% 5% 0;}
	.newsList .article .cate {
		padding: 2% 0;
		font-size: 3.4rem;
	}
	.newsList02 .article .cate {
		padding: 1% 0;
		font-size: 3.2rem;
		width: 40%;
	}
	.newsList .article .title{font-size: 3.2rem;}
	.newsList .article .date {font-size: 3.0rem;}
	.newsList .article .title {padding-top: 17%;}
}



/* ========================================================
 GAME NEWS
======================================================== */
.gameNewsList .article{margin-top: 20px;}
.gameNewsList a{
	display: block;
	padding-bottom: 10px;
	border-bottom: 2px dotted #c9c9c9;
}
.gameNewsList .cate{
	display: inline-block;
	position: relative;
	z-index: 0;
	font-size: 2.6rem;
	font-weight: bold;
	width: 170px;
	text-align: center;
	padding: 2px;
	color: #fff;
}
.gameNewsList .cate:before,
.gameNewsList .cate:after{
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	height: 100%;
	background-color: #5db85f;
}
.gameNewsList .cate:before{
	width: 50%;
	right: 0;
	-webkit-transform: skew(25deg);
	transform: skew(25deg);
}
.gameNewsList .cate:after{
	left: 0;
	width: 80%;
}
.gameNewsList .cate .new{
	display: none;
	position: absolute;
	z-index: 1;
	top: -1.2rem;
	left: 0;
	color: #FF0000;
	text-shadow:  2px  2px 0 #fff,
				 -2px  2px 0 #fff,
				  2px -2px 0 #fff,
				 -2px -2px 0 #fff;
}
.gameNewsList .date,
.gameNewsList .title{
	display: inline-block;
	color: #5b5b5b;
	vertical-align: text-top;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.gameNewsList .date{
	width: 130px;
	font-size: 2.2rem;
	text-align: center;
}
.gameNewsList .title{
	width: 820px;
	font-size: 2.6rem;
	font-weight: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gameNewsList a:hover .date,
.gameNewsList a:hover .title{color: #0085de;}



@media screen and (max-width: 768px){
	.gameNewsList .article{margin-top: 5%;}
	h2.ttl {margin: 4% auto 8%;}
	ul.categories li{
		width: 20%;
		margin: 0 1% 5% 1%;
	}
	
	.gameNewsList li {margin-top: 7%;}
	.gameNewsList .cate {
		font-size: 2.6rem;
		width: 30%;
	}
	.gameNewsList .date {
		width: 40%;
		font-size: 2.6rem;
		text-align: left;
		margin-left: 3%;
	}
	.gameNewsList .title {
		width: 100%;
		margin-top: 1%;
		font-size: 3rem;
	}

	.gameNewsList .cate .new{
		background-color: #fff;
	    border-radius: 100px;
	    border: 1px solid #FF0000;
	    padding: 1px 2px;
	    text-shadow: 0px 0px 0px;
	    top: -75%;
	}
}

@media screen and (max-width: 550px){
	ul.categories li{
		width: 25%;
		margin: 0 1% 5% 1%;
		
	}
	ul.categories li{font-size: 2.6rem;}
}

@media screen and (max-width: 470px){
	ul.categories li{
		width: 25%;
		margin: 0 1% 5% 1%;
		font-size: 3rem;
	}
	ul.categories li{font-size: 3rem;}
	.gameNewsList .cate {font-size: 3.0rem;}
	.gameNewsList .date {font-size: 2.8rem;}
	.gameNewsList .title{font-size: 3.2rem;}
}




/* ========================================================
 articleArea
======================================================== */
.entryWrap{background-color: rgba(255,255,255,.8);}
.entryWrap .cate {
	display: inline-block;
	position: relative;
	z-index: 0;
	font-size: 2.2rem;
	width: 170px;
	text-align: center;
	padding: 2px;
	color: #fff;
}
.entryWrap .cate:before,
.entryWrap .cate:after{
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	height: 100%;
	background-color: #5db85f;
}
.entryWrap .cate:before{
	width: 50%;
	right: 0;
	-webkit-transform: skew(25deg);
	transform: skew(25deg);
}
.entryWrap .cate:after{
	left: 0;
	width: 80%;
}
.entryWrap .date,
.snsArea{
	display: inline-block;
	vertical-align: text-top;
}

.entryWrap .date {
	color: #5b5b5b;
	width: 130px;
	font-size: 2.2rem;
	text-align: center;
}
.entryWrap .snsArea{width: 300px;}
.entryWrap .snsArea .button {
	display: inline-block;
	margin-right: 1.5%;
	line-height: 0;
	vertical-align: top;
}
.entryWrap .title{
	margin: 1% 0 3%;
	border-bottom: 1px solid #5db85f;
	font-size: 3.4rem;
	font-weight: bold;
}
.entryBody{font-size: 2.6rem;}

@media screen and (max-width: 768px){
	.entryWrap .cate {
		font-size: 2.6rem;
		width: 30%;
	}
	.entryWrap .date {
		width: 40%;
		font-size: 2.6rem;
		text-align: left;
		margin-left: 3%;
	}
	.entryWrap .snsArea {
		width: 100%;
		margin: 3% 0 2%;
	}
	.entryWrap .title {font-size: 3.6rem;}
	.entryBody{font-size: 2.8rem;}
}

@media screen and (max-width: 550px){
	.entryWrap .title {margin: 1% 0 8%;}
}

@media screen and (max-width: 470px){
	.entryWrap .cate {font-size: 3.0rem;}
	.entryWrap .date {font-size: 3.8rem;}
	.entryWrap .title{font-size: 4.8rem;}
	.entryBody{font-size: 3.8rem;}
}



/* ========================================================
 category color
======================================================== */

/* news */
.categories.news li.cate01:before{background-color: #00c5ff;}
.categories.news li.cate01:before{border: 1px solid #00c5ff;}
.categories.news li.cate01:hover a,
.categories.news li.cate01.-current a{color: #00c5ff;}

.categories.news li.cate02:before,
.newsList .cate02,
.entryWrap.news.cate02 .cate:before, .entryWrap.news.cate02  .cate:after{background-color: #5db85f;}
.categories.news li.cate02:before{border: 1px solid #5db85f;}
.categories.news li.cate02:hover a,
.categories.news li.cate02.-current a{color: #5db85f;}
.entryWrap.news.cate02 .title{border-bottom: 1px solid #5db85f;}

.categories.news li.cate03:before,
.newsList .cate03,
.entryWrap.news.cate03 .cate:before, .entryWrap.news.cate03  .cate:after{background-color: #fecd04;}
.categories.news li.cate03:before{border: 1px solid #fecd04;}
.categories.news li.cate03:hover a,
.categories.news li.cate03.-current a{color: #fecd04;}
.entryWrap.news.cate03 .title{border-bottom: 1px solid #fecd04;}

.categories.news li.cate04:before,
.newsList .cate04,
.entryWrap.news.cate04 .cate:before, .entryWrap.news.cate04  .cate:after{background-color: #e66fa6;}
.categories.news li.cate04:before{border: 1px solid #e66fa6;}
.categories.news li.cate04:hover a,
.categories.news li.cate04.-current a{color: #e66fa6;}
.entryWrap.news.cate04 .title{border-bottom: 1px solid #e66fa6;}

.categories.news li.cate05:before,
.newsList .cate05,
.entryWrap.news.cate05 .cate:before, .entryWrap.news.cate05  .cate:after{background-color: #f39600;}
.categories.news li.cate05:before{border: 1px solid #f39600;}
.categories.news li.cate05:hover a,
.categories.news li.cate05.-current a{color: #f39600;}
.entryWrap.news.cate05 .title{border-bottom: 1px solid #f39600;}

.categories.news li.cate06:before,
.newsList .cate06,
.entryWrap.news.cate06 .cate:before, .entryWrap.news.cate06  .cate:after{background-color: #ae5da1;}
.categories.news li.cate06:before{border: 1px solid #ae5da1;}
.categories.news li.cate06:hover a,
.categories.news li.cate06.-current a{color: #ae5da1;}
.entryWrap.news.cate06 .title{border-bottom: 1px solid #ae5da1;}

.categories.news li.cate07:before,
.newsList .cate07,
.entryWrap.news.cate07 .cate:before, .entryWrap.news.cate07  .cate:after{background-color: #8fc31f;}
.categories.news li.cate07:before{border: 1px solid #8fc31f;}
.categories.news li.cate07:hover a,
.categories.news li.cate07.-current a{color: #8fc31f;}
.entryWrap.news.cate07 .title{border-bottom: 1px solid #8fc31f;}

.categories.news li.cate08:before,
.newsList .cate08,
.entryWrap.news.cate08 .cate:before, .entryWrap.news.cate08  .cate:after{background-color: #5f52a0;}
.categories.news li.cate08:before{border: 1px solid #5f52a0;}
.categories.news li.cate08:hover a,
.categories.news li.cate08.-current a{color: #5f52a0;}
.entryWrap.news.cate08 .title{border-bottom: 1px solid #5f52a0;}



/* game news */
.categories.gamenews li.cate01:before{background-color: #8fc31f;}
.categories.gamenews li.cate01:before{border: 1px solid #8fc31f;}
.categories.gamenews li.cate01:hover a,
.categories.gamenews li.cate01.-current a{color: #8fc31f;}

.categories.gamenews li.cate02:before,
.gameNewsList .cate02:before, .gameNewsList .cate02:after,
.entryWrap.gamenews.cate02 .cate:before, .entryWrap.gamenews.cate02  .cate:after{background-color: #00c5ff;}
.categories.gamenews li.cate02:before{border: 1px solid #00c5ff;}
.categories.gamenews li.cate02:hover a,
.categories.gamenews li.cate02.-current a{color: #00c5ff;}
.entryWrap.gamenews.cate02 .title{border-bottom: 1px solid #00c5ff;}

.categories.gamenews li.cate03:before,
.gameNewsList .cate03:before, .gameNewsList .cate03:after,
.entryWrap.gamenews.cate03 .cate:before, .entryWrap.gamenews.cate03  .cate:after{background-color: #5db85f;}
.categories.gamenews li.cate03:before{border: 1px solid #5db85f;}
.categories.gamenews li.cate03:hover a,
.categories.gamenews li.cate03.-current a{color: #5db85f;}
.entryWrap.gamenews.cate03 .title{border-bottom: 1px solid #5db85f;}

.categories.gamenews li.cate04:before,
.gameNewsList .cate04:before, .gameNewsList .cate04:after,
.entryWrap.gamenews.cate04 .cate:before, .entryWrap.gamenews.cate04  .cate:after{background-color: #fecd04;}
.categories.gamenews li.cate04:before{border: 1px solid #fecd04;}
.categories.gamenews li.cate04:hover a,
.categories.gamenews li.cate04.-current a{color: #fecd04;}
.entryWrap.gamenews.cate04 .title{border-bottom: 1px solid #fecd04;}

.categories.gamenews li.cate05:before,
.gameNewsList .cate05:before, .gameNewsList .cate05:after,
.entryWrap.gamenews.cate05 .cate:before, .entryWrap.gamenews.cate05  .cate:after{background-color: #e66fa6;}
.categories.gamenews li.cate05:before{border: 1px solid #e66fa6;}
.categories.gamenews li.cate05:hover a,
.categories.gamenews li.cate05.-current a{color: #e66fa6;}
.entryWrap.gamenews.cate05 .title{border-bottom: 1px solid #e66fa6;}

.categories.gamenews li.cate06:before,
.gameNewsList .cate06:before, .gameNewsList .cate06:after,
.entryWrap.gamenews.cate06 .cate:before, .entryWrap.gamenews.cate06  .cate:after{background-color: #f39600;}
.categories.gamenews li.cate06:before{border: 1px solid #f39600;}
.categories.gamenews li.cate06:hover a,
.categories.gamenews li.cate06.-current a{color: #f39600;}
.entryWrap.gamenews.cate06 .title{border-bottom: 1px solid #f39600;}

.categories.gamenews li.cate07:before,
.gameNewsList .cate07:before, .gameNewsList .cate07:after,
.entryWrap.gamenews.cate07 .cate:before, .entryWrap.gamenews.cate07  .cate:after{background-color: #f31a52;}
.categories.gamenews li.cate07:before{border: 1px solid #f31a52;}
.categories.gamenews li.cate07:hover a,
.categories.gamenews li.cate07.-current a{color: #f31a52;}
.entryWrap.gamenews.cate07 .title{border-bottom: 1px solid #f31a52;}



/* special */
.categories.special li.cate01:before{background-color: #00c5ff;}
.categories.special li.cate01:before{border: 1px solid #00c5ff;}
.categories.special li.cate01:hover a,
.categories.special li.cate01.-current a{color: #00c5ff;}

.categories.special li.cate02:before,
.newsList02 .cate02,
.entryWrap.special.cate02 .cate:before, .entryWrap.special.cate02  .cate:after{background-color: #0278fc;}
.categories.special li.cate02:before{border: 1px solid #0278fc;}
.categories.special li.cate02:hover a,
.categories.special li.cate02.-current a{color: #0278fc;}
.entryWrap.special.cate02 .title{border-bottom: 1px solid #0278fc;}

.categories.special li.cate03:before,
.newsList02 .cate03,
.entryWrap.special.cate03 .cate:before, .entryWrap.special.cate03  .cate:after{background-color: #5db85f;}
.categories.special li.cate03:before{border: 1px solid #5db85f;}
.categories.special li.cate03:hover a,
.categories.special li.cate03.-current a{color: #5db85f;}
.entryWrap.special.cate03 .title{border-bottom: 1px solid #5db85f;}

.categories.special li.cate04:before,
.newsList02 .cate04,
.entryWrap.special.cate04 .cate:before, .entryWrap.special.cate04  .cate:after{background-color: #fecd04;}
.categories.special li.cate04:before{border: 1px solid #fecd04;}
.categories.special li.cate04:hover a,
.categories.special li.cate04.-current a{color: #fecd04;}
.entryWrap.special.cate04 .title{border-bottom: 1px solid #fecd04;}




/* event */

.categories.special li.cate02:before,
.newsList02 .cate02,
.entryWrap.special.cate02 .cate:before, .entryWrap.special.cate02  .cate:after{background-color: #0278fc;}
.categories.special li.cate02:before{border: 1px solid #0278fc;}
.categories.special li.cate02:hover a,
.categories.special li.cate02.-current a{color: #0278fc;}
.entryWrap.special.cate02 .title{border-bottom: 1px solid #0278fc;}

.categories.special li.cate03:before,
.newsList02 .cate03,
.entryWrap.special.cate03 .cate:before, .entryWrap.special.cate03  .cate:after{background-color: #5db85f;}
.categories.special li.cate03:before{border: 1px solid #5db85f;}
.categories.special li.cate03:hover a,
.categories.special li.cate03.-current a{color: #5db85f;}
.entryWrap.special.cate03 .title{border-bottom: 1px solid #5db85f;}

.categories.special li.cate04:before,
.newsList02 .cate04,
.entryWrap.special.cate04 .cate:before, .entryWrap.special.cate04  .cate:after{background-color: #fecd04;}
.categories.special li.cate04:before{border: 1px solid #fecd04;}
.categories.special li.cate04:hover a,
.categories.special li.cate04.-current a{color: #fecd04;}
.entryWrap.special.cate04 .title{border-bottom: 1px solid #fecd04;}