@charset "UTF-8";
/* ----------------------------------------------------
作成日: 2015.11.16
最終更新日: 2018.01.26

style.css： 共通設定(PC版)
---------------------------------------------------- */
body {
	height:100%; 
	font-size:14px;
	font-family:"メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	/*-webkit-text-size-adjust: none;*/
	line-height:1.6;
	background-image: url("../image/bg-wrapper.png");
	background-size: 190px;
	background-position: 0 -20px;
}

html, body{
	width: 100%;
	height:100%;
}

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

a{text-decoration: none;}
a:link, a:visited{color:#0681ff;}
a:hover, a:active{text-decoration:underline;}

/*clearfix*/
.cf:before,
.cf:after {
	content:"";
	display:table;
}
.cf:after {
	clear:both;
}


#wrapper {
	min-width: 998px;
	width:100%;
}
.min-width{
	width: 998px;
	margin: auto;
}

.fl {float:left;}
.fr {float:right;}



/* ========================================================
 header
======================================================== */
header .bg{
	width: 100%;
	min-width: 998px;
	height: 297px;
	margin: auto;
	background-image: url("../image/main-visual.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media screen and (min-width:2280px) {
header .bg{
	background-size: contain;
}
}

header .inner{
	position: relative;
	height: 264px;
}
header .logo{
	position: absolute;
    width: 339px;
    top: 1px;
    left: 76px;
}



/* ========================================================
 nav
======================================================== */
nav .inner{
	position: relative;
	width: 978px;
	height: 81px;
	margin-top: -88px;
	-webkit-filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3));
	border-radius: 20px;
}

nav .button{
	position: relative;
	z-index: 0;
	display: block;
	float: left;
	width: 163px;
	height: 81px;
	background-image: url("../image/button-nav.png");
	background-size: 978px 243px;
}
nav .button:before{
	content: "";
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../image/button-nav.png");
	background-size: 978px 243px;
	opacity: 0;
}
nav .button:first-child{margin-left: 0px;}
nav .button.top  {background-position:    0px 0px;}
nav .button.news {background-position: -163px 0px;}
nav .button.game {background-position: -326px 0px;}
nav .button.movie{background-position: -489px 0px;}
nav .button.enjoy{background-position: -652px 0px;}
nav .button.faq  {background-position: -815px 0px;}
nav .button.top.on  {background-position:    0px -162px;}
nav .button.news.on {background-position: -163px -162px;}
nav .button.game.on {background-position: -326px -162px;}
nav .button.movie.on{background-position: -489px -162px;}
nav .button.enjoy.on{background-position: -652px -162px;}
nav .button.faq.on  {background-position: -815px -162px;}
nav .button.top.on:hover:before  {background-position:    0px -81px;}
nav .button.news.on:hover:before {background-position: -163px -81px;}
nav .button.game.on:hover:before {background-position: -326px -81px;}
nav .button.movie.on:hover:before{background-position: -489px -81px;}
nav .button.enjoy.on:hover:before{background-position: -652px -81px;}
nav .button.faq.on:hover:before  {background-position: -815px -81px;}
nav .button.top:before  {background-position:    0px -81px;}
nav .button.news:before {background-position: -163px -81px;}
nav .button.game:before {background-position: -326px -81px;}
nav .button.movie:before{background-position: -489px -81px;}
nav .button.enjoy:before{background-position: -652px -81px;}
nav .button.faq:before  {background-position: -815px -81px;}
nav .button:hover:before{
	opacity: 1;
	-webkit-transition: .3s;
	transition: .3s;
}
nav .button.on:hover:before{
	-webkit-transition: 0s;
	transition: 0s;
}



/* ========================================================
 contents-area
======================================================== */
#contents-area{
	width: 945px;
	margin: -30px auto 0;
	padding-bottom: 50px;
}

#deka-bun-taisen {
	text-align: center;
	padding-bottom: 10px;
}
#deka-bun-taisen a{
	display: block;
	background: #ffffff;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
}
#deka-bun-taisen a img:hover{
	opacity: .7;
	transition: .3s;
}

#main-area{
	/*float: left;*/
	width: 618px;
	margin: auto;
padding-top: 18px;
}

/* ========================================================
 important-area
======================================================== */

.important-area{
	width: 580px;
	margin:0 auto;
	text-align:right;
	}
	
.important-area time {
	color:rgba(255,0,4,1.00);
	font-size: 16px;
	}

.important-banner{
	position: relative;
	width: 580px;
	height: 167px;
	margin: auto;
	background-image: url("../image/bg-slider.png");
	background-repeat: no-repeat;
	background-size: 100% 153px;
	padding: 6px 9px 0 7px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.important-banner-txt {
	width: 580px;
	padding:15px 10px;
	margin-bottom:30px;
	font-size:20px;
	border-radius:5px;
	border:3px solid #c3c3c3;
	background:rgba(255,255,255,1.00);
	box-shadow:3px 4px 0px rgba(0,0,0,0.51);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align:left;
	}
	
important-banner-txt a {
	color:rgba(255,0,4,1.00) !important;
	font-weight:bold !important;
	}


.important-banner:last-child {
	height: 187px !important;
	}

.important-banner img {
	width: 564px;
}

/* ========================================================
 slider-area
======================================================== */
#slider-area{
	position: relative;
	width: 580px;
	height: 187px;
	margin: auto;
	background-image: url("../image/bg-slider.png");
	background-repeat: no-repeat;
	background-size: 100% 153px;
	padding: 6px 9px 0 7px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#slider-area li img {
	width: 564px;
}
/* ======== slider ======== */
.bx-wrapper{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}
.bx-wrapper .bx-viewport{height: 144px !important;}
.bx-wrapper .bx-pager {
	text-align: center;
	margin-top: 5px;
}
.bx-wrapper .bx-pager .bx-pager-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}
.bx-wrapper .bx-controls-direction a {
	position: absolute;
	z-index: 9999;
}
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next{display: none;}

.bx-wrapper .bx-pager.bx-default-pager a {
	text-indent: -9999px;
	display: block;
	width: 19px;
	height: 19px;
	margin: 5px 0 0 5px;
	outline: 0;
	background-image: url("../image/pager.png");
	background-size: 38px 19px;
	background-position: 0 0;
}
.bx-pager-item:first-child{margin: 5px 0 0 0;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {background-position: 100% 0;}
/* ======== /slider ======== */




/* ========================================================
 important-news-area
======================================================== */
#important-news-area{
	width: 580px;
	margin: 18px auto 0;
	padding: 6px 17px 20px;
	background-color: #ebe09c;
	border: 4px solid #6b3028;
	border-radius: 10px;
	color: #58310c;
	font-size: 13.7px;
	line-height: 15.79px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#important-news-area a:before{content: "・";}
#important-news-area a{
	display: inline-block;
	margin-top: 15px;
	color: #58310c;
	font-size: 13.7px;
	font-weight: bold;
	line-height: 15.79px;
	text-decoration: underline;
}
#important-news-area a>time{font-weight: bold;}
#important-news-area a:hover,
#important-news-area a:hover time{text-decoration: none;}
#important-news-area .news-area dd{margin-left: 1em;}



/* ========================================================
 main-content
======================================================== */
.main-content{
	position: relative;
	width: 618px;
	margin: 65px auto 50px; /* +46px */
	padding: 5px 0 12px 0;
	background-image: url("../image/bg-contents.png");
}
.main-content>h2{
	position: absolute;
	top: -66px;
	left: -18px;
}
.main-content:before{
	content: "";
	position: absolute;
	top: -46px;
	left: 0;
	width: 100%;
	height: 46px;
	background-image: url("../image/bg-contents2.png");
	background-position: 0 0;
}
.main-content:after{
	content: "";
	position: absolute;
	bottom: -49px;
	left: 0;
	width: 100%;
	height: 49px;
	background-image: url("../image/bg-contents2.png");
	background-position: 0 100%;
}



/* ========================================================
 top-news-area
======================================================== */
#top-news-area.main-content{margin: 86px auto 50px;}
.top-news{
	position: relative;
	z-index: 0;
	width: 528px;
	margin: 5px auto 0;
	padding-top: 48.6px;
}
.top-news:before{
	content: "";
	position: absolute;
	z-index: -1;
	display: inline-block;
	top: 0;
	left: -5px;
	width: 224px;
	height: 48.6px;
	background-size: 100%;
	background-repeat: no-repeat;
}
.top-news.-app:before       {background-image: url("../image/news-app-top.png");}
.top-news.-info:before      {background-image: url("../image/news-info-top.png");}
.top-news.-mainte:before    {background-image: url("../image/news-mainte-top.png");}
.top-news.-campaign:before  {background-image: url("../image/news-campaign-top.png");}
.top-news.-obstacle:before  {background-image: url("../image/news-obstacle-top.png");}
.top-news.-importance:before{background-image: url("../image/news-importance-top.png");}
.top-news .time{
	position: absolute;
	top: 26px;
	right: 0;
	color: #0066cc;
	font-size: 16px;
}
.top-news .text{
	margin-top: 10px;
	font-size: 13px;
	line-height: 18px;
}
.top-news .link{
	text-align: right;
	font-size: 13px;
	line-height: 18px;
}
.top-news .link>a{
	color: black;
	text-decoration: underline;
}
.top-news .link>a:hover{text-decoration: none;}

.top-news .banner{
	position: relative;
	display: block;
	border: 2px solid #c3c3c3;
	background-color: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.top-news .banner:before{
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0;
}
.top-news .banner:hover:before{
	opacity: .3;
	transition: .3s;
}
.info-line{
	display: block;
	margin: 15px auto;
}
#top-news-area .button-more-info{
	position: relative;
	display: block;
	width: 189px;
	height: 45px;
	margin-left: 384px;
}
#top-news-area .button-more-info:before{
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0;
}
#top-news-area .button-more-info:hover:before{
	opacity: .3;
	transition: .3s;
}


.app_check_btn {
	margin-top:20px;
	text-align:center;
	}
	
.app_check_btn img {
	border:5px solid rgba(255,255,255,1.00);
	border-radius:28px;
	-webkit-border-radius:28px;
	filter: drop-shadow(2px 1px 1px rgba(0, 0, 0, 0.2));
	-webkit-filter: drop-shadow(2px 1px 1px rgba(0, 0, 0, 0.2));
	-moz-filter: drop-shadow(2px 1px 1px rgba(0, 0, 0, 0.2));
	}
	
.app_check_btn:hover {
	position:relative;
	top:2px;
	bottom:2px;
	}



/* ========================================================
 aside
======================================================== */
aside{
	float: right;
	width: 304px;
	margin-top: 20px;
}
aside .inner{
	width: 304px ;
	padding: 28px 0;
	border-radius: 10px;
	box-shadow: 2px 2px 2px rgba(0,0,0,.3);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
aside .inner1{background-image: url("../image/bg-aside.png");}
aside .inner2{
	margin-top: 35px;
	background-image: url("../image/bg-aside2.png");
	color: white;
}
aside .inner2 .text-image{
	display: block;
	margin: auto;
}
aside .inner2 .button{
	display: block;
	width: 180px;
	margin: 13px auto 0;
	padding: 0 1px 1px 0;
}
aside .inner2 .button.app{margin: 15px auto 0;}
aside .inner2 .button>img{width: 180px;}
aside .inner2 .button.app,
aside .inner2 .button.google{height: 55px;}
aside .inner2 .button.amazon{height: 63px;}
aside .inner2 .button:hover{padding: 1px 0 0 1px;}

aside .inner2 dl{
	width: 266px;
	margin: 20px auto 0;
}
aside .inner2 dt{
	display: block;
	zoom: 1;
	position: relative;
	width: 24%;
	float: left;
	font-size: 15px;
	font-weight: bolder;
	line-height: 27px;
	filter:dropshadow(color=#000000,offX= 1,offY=1);
	text-shadow: 1px 1px 2px rgba(0,0,0,.9);
}
aside .inner2 dt:after{
	content: ":";
	position: absolute;
	top: 0;
	left: 100%;
	filter:dropshadow(color=#000000,offX= 1,offY=1);
	text-shadow: 1px 1px 2px rgba(0,0,0,.9);
}
aside .inner2 dd{
	width: 70%;
	float: right;
	font-size: 15px;
	font-weight: bolder;
	line-height: 27px;
	filter:dropshadow(color=#000000,offX= 1,offY=1);
	text-shadow: 1px 1px 2px rgba(0,0,0,.9);
}



aside .banner-wrap{
	width: 272px;
	margin: auto;
}
aside .banner-wrap>a{
	display: block;
	width: 100%;
}
aside .banner-permanent-area>a{background-color: #fff;}

aside .banner-wrap>a:nth-child(n+2){margin-top: 15px;}

aside .related-links-area>a{position: relative;}
aside .related-links-area>a:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	z-index: 1;
	width: 270px;
	height: 79px;
	border-radius: 20px;
	background-color: #fff;
	opacity: 0;
}
aside .related-links-area>a:hover:after{
	opacity: .3;
	transition: .3s;
}

aside .banner-permanent-area img{
	border: 2px solid white;
	box-shadow: 2px 2px 2px rgba(0,0,0,.3);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
aside .banner-permanent-area img:hover{
	opacity: .7;
	transition: .3s;
}
aside .related-links-area{margin-top: 20px;}


aside .sns-area{
	width: 272px;
	margin: 14px auto;
}
aside .sns-area .icon{
	position: relative;
	width: 62px;
	height: 60px;
	margin-right: 8px;
	background-image: url("../image/sns.png");
	background-size: 248px 60px;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
}
aside .sns-area .icon:last-child{margin-right: 0;}
aside .sns-area .icon:before{
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 14px;
	background-color: #fff;
	opacity: 0;
}
aside .sns-area .icon:hover:before{
	opacity: .3;
	transition: .3s;
}

aside .sns-area .icon.twitter   {background-position:    0px 0;}
aside .sns-area .icon.instagram {background-position:  -62px 0;}
aside .sns-area .icon.line      {background-position: -124px 0;}
aside .sns-area .icon.facebook  {background-position: -186px 0;}



/* ========================================================
 related-links-area-bottom
======================================================== */
#related-links-area-bottom{
	min-width: 998px;
	width: 100%;
	margin-top: 76px;
	padding: 30px 0;
	background-image: url("../image/bg-related-links-area.png");
	text-align: center;
}

#related-links-area-bottom .upper,
#related-links-area-bottom .bottom{
	display: table;
	margin: auto;
	border-collapse:separate;
	border-spacing: 10px 0;
}
#related-links-area-bottom a{
	display: table-cell;
	background-color: #fff;
}

#related-links-area-bottom .upper a{/*width: 307px;*/}
#related-links-area-bottom .bottom a{width: 260px;}
#related-links-area-bottom img{border: 2px solid white; height:76px;}
#related-links-area-bottom img:hover{
	opacity: .7;
	transition: .3s;
}

#related-links-area-bottom .bottom{
	margin-top: 15px;
	border-spacing: 15px 0;
}



/* ========================================================
 footer
======================================================== */
#footer{
	width:100%;
	background-color: white;
}
.footerContents{
	width:998px;
	margin:0 auto;
	padding: 20px;
	color:#333333;
	text-shadow: 0px 1px 0px #fff;
	background-color: white;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.footerContents ul{width: 100%;}
.footerContents ul li{
	float:left;
	margin-right:10px;
}
.footerContents ul#footer_text {margin-top:5px;}
.footerContents ul li p{
	font-size: 15px;
	margin-top: 35px;

}

.cero {
	position: relative;
    top: -16px;
	}
	
.footerContents ul#footer_text li{
	float:none;
	font-size:14px;
}
.footerContents ul#footer_text li>a{
	display: inline-block;
	margin: 10px 15px 0 0;
}
.footerContents ul#footer_text li>a{text-decoration:underline;}
.footerContents ul#footer_text li>a:link,
.footerContents ul#footer_text li>a:visited{color:#333333;}
.footerContents ul#footer_text li>a:hover,
.footerContents ul#footer_text li>a:active{text-decoration:none;}
.sega-logo{
	display: inline-block;
	width: 170px;
}
.footerContents .sega-logo .splogo {
	display: none;
  }

/* ========================================================
 news-area
======================================================== */
#news-area{
	min-height: 600px;
	padding: 15px 0 12px 0;
	font-size: 13.6px;
	line-height: 20.6px;
	vertical-align: middle;
}
#news-area .news{
	width: 547px;
	margin: 0 auto 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid #d7d7d7;
}
#news-area .news img{
	float: left;
	width: 92px;
}
#news-area .date{
	float: left;
	width: 100px;
	text-align: center;
	margin: auto;
	line-height: 29px;
	color: #999999;
}
#news-area .date>time{font-weight: bold;}
#news-area .news a{
	float: right;
	display: block;
	margin-top: 5px;
	width: 350px;
	text-decoration: underline;
	color: #0066cc;
	font-weight: bold;
}
#news-area .news a:hover{text-decoration: none;}

/*ページ送り*/
.pagination{
	position:relative;
	width: 420px;
	height: 32px;
	margin: 30px auto 10px;
}
.pagination .count{
	display: table;
	margin: auto;
}
.pagination .count span{
	display: block;
	width: 36px;
	height: 36px;
	background-color: #2898ff;
	border-radius: 50%;
	color: white;
	text-align:center;
	line-height: 36px;
	float: left;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.pagination .count span.no{
	border: 2px solid #2898ff;
	background-color: white;
	color: #2898ff;
	font-size: 14px;
	font-weight:bold;
	line-height: 32px;
}
.pagination .count span:not(:first-child){margin-left: 15px;}
.pagination .count span a{
	display: inline-block;
	width: 100%;
	color: white;
	font-size: 14px;
	font-weight:bold;
}
.pagination>.next a,
.pagination>.prev a,
.pagination>.next-more a,
.pagination>.prev-more a{
	position:absolute;
	display: inline-block;
	top: 2.5px;
	width: 23px;
	height: 31px;
	background-size: 400% 100%;
	background-image: url("../image/pager-news.png");
}
.pagination>.next a,
.pagination>.prev a,
.pagination>.next-more a,
.pagination>.prev-more a{
	position:absolute;
	display: block;
	top: 2.5px;
	width: 23px;
	height: 31px;
	background-size: 400% 100%;
	background-image: url("../image/pager-news.png");
}
.pagination>.prev-more a{
	left: 0;
	background-position: 0 0;
}
.pagination>.next-more a{
	right: 0;
	background-position: -300% 0;
}
.pagination>.prev a{
	left: 36px;
	background-position: -100% 0;
}
.pagination>.next a{
	right: 36px;
	background-position: -200% 0;
}




/* ========================================================
 news-detail
======================================================== */
#news-detail-inner{
	width: 550px;
	margin: auto;
}
#news-detail-inner .upper-area{
	padding-bottom: 5px;
	border-bottom: 1px solid #d7d7d7;
}
#news-detail-inner .title-area>li{
	display: block;
	float: left;
}
#news-detail-inner .title-area>.category{width: 89px;}
#news-detail-inner .title-area>.title{
	width: 360px;
	margin-top: 8px;
	margin-left: 10px;
	color: red;
	font-size: 13.6px;
	line-height: 20.6px;
	font-weight: bold;
}
#news-detail-inner .title-area>.date{
	margin-top: 8px;
	font-size: 13.6px;
	color: #428fdf;
}
#news-detail-inner .title-area>.date{float: right;}
#news-detail-inner .title-area>.date>time{font-weight: bold;}

#news-detail-inner #sidesocial{
	display: table;
	margin: 15px 0 0 auto;
}
#news-detail-inner #sidesocial>li{display: table-cell;}
#news-detail-inner #sidesocial li:not(:first-child){padding-left: 15px;}
#news-detail-inner #sidesocial>#facebook,
#news-detail-inner #sidesocial>#facebook *,
#news-detail-inner #sidesocial>#facebookShare,
#news-detail-inner #sidesocial>#facebookShare *{vertical-align: top !important;}

#news-detail-inner .inner{
	padding: 15px 0 26px;
	border-bottom: 1px solid #d7d7d7;
}

#news-detail-inner .detail-pagination{
	width: 450px;
	margin: 30px auto 40px;
}
#news-detail-inner .detail-pagination>a{
/*	float: left;*/
	display: block;
	height: 35px;
	background-image: url("../image/detail-pagination.png");
}
/*
#news-detail-inner .detail-pagination>a:nth-child(n+2){
	margin-left: 40px;
}*/
#news-detail-inner .detail-pagination>.prev,
#news-detail-inner .detail-pagination>.next{width: 87px;display:none !important;}
#news-detail-inner .detail-pagination>.prev{background-position:    0px 0;}
#news-detail-inner .detail-pagination>.next{background-position: -273px 0;}
#news-detail-inner .detail-pagination>.back{
	width: 186px;
	background-position: -87px 0;
margin: auto;
}


/* ======== wide-area ======== */
.wide-area{
	width: 949px;
	margin: auto;
}
.wide-area .main-content{
	width: 100%;
	background-image: url("../image/bg-contents-wide.png");
}
.wide-area .main-content:before{
	top: -47px;
	height: 47px;
	background-image: url("../image/bg-contents-wide2.png");
}
.wide-area .main-content:after{
	bottom: -47px;
	height: 47px;
	background-image: url("../image/bg-contents-wide2.png");
	background-position: 0 -47px;
}
.wide-area .main-content .inner{
	width: 841px;
	margin: auto;
	padding-bottom: 50px;
	font-size: 16px;
	text-align: center;
}



/* ========================================================
 game
======================================================== */
#game-area .description-area{margin-top: 25px;}
#game-area .description-area:nth-child(2){margin-top: 27px;}


#game-area .buttonsArea{margin-top: 20px;}
#game-area .buttonsArea .buttonsArea01,#game-area .buttonsArea .buttonsArea01{min-height: 75px;}
#game-area .buttonsArea .buttonsArea01{margin-bottom: 6px;}

#game-area .buttonsArea .button{
	position: relative;
	z-index: 0;
	display: block;
	width: 190px;
	height: 72px;
	margin-left: 16px;
	border-radius: 10px;
	float: left;
	border-right: 2px solid #1373b2;
	border-bottom: 2px solid #1373b2;
	background-color: #47b6ff;
	background-position: center center;
	background-repeat: no-repeat;
	text-indent: -999999px;
}
#game-area .buttonsArea .button01,#game-area .buttonsArea .button05{
	margin-left: 12px;
}
#game-area .buttonsArea .button.on {
		background-color: #90df12;
		border-bottom-color: #497208;
		border-right-color: #497208;
}
#game-area .buttonsArea .button:not(.on):hover{
	background-color: #90df12;
	border-right: 2px solid #497208;
	border-bottom:  2px solid #497208;
	transition: 0.3s;
}
#game-area .buttonsArea .button .button-title{
	display: block;
	margin-top: 15px;
}
#game-area .buttonsArea .button01.on,
#game-area .buttonsArea .button01:not(.on):hover{
	background-image: url(../game/images/button-title01on.png);
}
#game-area .buttonsArea .button01{
	background-image: url(../game/images/button-title01off.png);
}
#game-area .buttonsArea .button02.on,
#game-area .buttonsArea .button02:not(.on):hover{
	background-image: url(../game/images/button-title02on.png);
}
#game-area .buttonsArea .button02{
	background-image: url(../game/images/button-title02off.png);
}
#game-area .buttonsArea .button03.on,
#game-area .buttonsArea .button03:not(.on):hover{
	background-image: url(../game/images/button-title03on.png);
}
#game-area .buttonsArea .button03{
	background-image: url(../game/images/button-title03off.png);
}
#game-area .buttonsArea .button04.on,
#game-area .buttonsArea .button04:not(.on):hover{
	background-image: url(../game/images/button-title04on.png);
}
#game-area .buttonsArea .button04{
	background-image: url(../game/images/button-title04off.png);
}
#game-area .buttonsArea .button05.on,
#game-area .buttonsArea .button05:not(.on):hover{
	background-image: url(../game/images/button-title05on.png);
}
#game-area .buttonsArea .button05{
	background-image: url(../game/images/button-title05off.png);
}
#game-area .buttonsArea .button06.on,
#game-area .buttonsArea .button06:not(.on):hover{
	background-image: url(../game/images/button-title06on.png);
}
#game-area .buttonsArea .button06{
	background-image: url(../game/images/button-title06off.png);
}
#game-area .buttonsArea .button07.on,
#game-area .buttonsArea .button07:not(.on):hover{
	background-image: url(../game/images/button-title07on.png);
}
#game-area .buttonsArea .button07{
	background-image: url(../game/images/button-title07off.png);
}
#game-area .buttonsArea .button08.on,
#game-area .buttonsArea .button08:not(.on):hover{
	background-image: url(../game/images/button-title08on.png);
}
#game-area .buttonsArea .button08{
	background-image: url(../game/images/button-title08off.png);
}

#game-area>.inner{
	position: relative;
	z-index: 0;
}
#game-area .description-area .inner{
	position: relative;
	display:block;
	z-index: 0;
	width: 790px;
	margin: 44px auto 0;
	padding-bottom: 0px;
}


#game-area .description-area .inner:last-child{padding-bottom: 15px;}
#game-area .description-area .inner.largeTextImage{margin: 80px auto 0;}
#game-area .description-area .innerOnlyTextImage{
	width: 790px;
	margin: 54px auto 0;
}
	
#game-area .description-area .inner .ss.left {
	position:relative; z-index:1;
	left: -280px;
	}
	
#game-area .description-area .inner .ss.right {
	position:relative; z-index:1;
	right: -280px;
	}
	
#game-area .description-area .inner .text-image {
	position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
	}
	
#game-area .description-area .inner .text-image.left {
	left: 0;
	}
	
#game-area .description-area .inner .text-image.right {
	right: 0;
	}
	
	

#game-area .description-area .imageVs{margin-top: 25px;}
.mt25{margin-top: 25px !important;}



#game-area .bg-area{
	position: absolute;
	z-index: -1;
	top: 52px;
	width: 100%;
	height: 100%;
	background-image: url("../game/images/bg.jpg");
	background-size: 840px;
	background-repeat: repeat-y;
}


/* ========================================================
 game
======================================================== */

#game-area h4 {margin:10px 0;}

.game-text-wrap {
	width:790px;
	margin:0 auto;
	}

.game-text-wrap dt{
	position: relative; z-index:3;
	height:52px;
	margin-top: 16px;
	padding-left:29px;
	border-radius:30px;
	
	text-align:left;
	box-shadow: 0px 2px 0px rgba(0,0,0,.3);
}

.game-text-wrap.guildtower dt {
	background-color: #329cff;
	}

.game-text-wrap.plantation dt {
	background-color: #00c491;
	}
	
.game-text-wrap.sptraining dt {
	background-color: #e1850d;
	}
	
.game-text-wrap.transform dt {
	background-color: #8157eb;
	}
	


.game-text-wrap dd{
	position:relative; 
	top: -26px;
	margin:0;
	background:url(../game/images/star_bg.png) #93e6de;
	border-radius:15px;
	margin-bottom: -28px;
	padding-bottom: 21px;
}

.game-text-wrap.guildtower dd {
	background-color:#bcdfff;
	}

.game-text-wrap.plantation dd {
	background-color:#93e6de;
	}
	
.game-text-wrap.sptraining dd {
	background-color:#f6c764;
	}
	
.game-text-wrap.transform dd {
	background-color:#dec3ff;
	}

.game-text-wrap dd p.txt {
	margin:0;
	padding:40px 0px 20px 0px;
	}
		
.game-text-wrap dt:before{
	content: "";
	position: absolute;
	right: 23px;
    top: 21px;
	display: block;
	width: 19px;
	height: 11px;
	background-image: url(../game/images/game_arrow.png);
	
	-webkit-tap-highlight-color:transparent;
	
		transition: .3s;
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-o-transition: .3s;
		-ms-transition: .3s;
}

.game-text-wrap dt.show:before{
	content: "";
	position: absolute;
	right: 23px;
    top: 21px;
	display: block;
	width: 19px;
	height: 11px;
	background-image: url(../game/images/game_arrow.png);
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.game-text-wrap .ssBox {
	width:640px;
	margin:0 auto;
	}
	
.game-text-wrap dd .ssBox p.ss, .game-text-wrap dd .ssBox p.img {
	margin:0;
	padding:0;
	line-height:0;
	}
	
.game-text-wrap dd .ssBox p.ss img {
	border:3px solid #fff;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	}
	
	.game-text-wrap dd .ssBox p.img img {
	border-radius:9px;
	box-sizing:border-box;
	border:3px solid #fff;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	}



/* ========================================================
 movie
======================================================== */
.movie .content-inner{margin-top: 10px;}
.movie .content-inner:not(:nth-child(-n+2)){margin-top: 15px;}
.movie .content-inner>.main{
	width: 300px;
	margin: 8px auto 0;
}
.movie .content-inner>.main:not(:nth-child(-n+2)){margin-top: 10px;}
.movies-area{margin-top: 25px;}
.movies-area .wrap{
	display: table;
	margin: 30px auto 0;
	border-collapse: separate;
}
.movies-area .wrap.column2{border-spacing: 60px 0;}
.movies-area .wrap.column3{border-spacing: 20px 0;}
.movie-area{
	display: table-cell;
	width: 246px;
	text-align: center;
	font-size: 19px;
}
.movie-area a{
	position: relative;
	z-index: 0;
	display: inline-block;
	width: 100%;
	border: 2px solid #cbcbcb;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.movie-layer{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.movie-area a:hover>.movie-layer{
	background-color: rgba(255,255,255,.3);
	transition: .3s;
}
.movie-title{margin-top: 5px;}



/* ========================================================
 enjoy
======================================================== */
#enjoy-area .inner .text{margin: 15px 0;}
#enjoy-area .twitter-icon-area>p{margin: 20px 0 15px;}
#enjoy-area .wallpaper-area p{margin: 20px 0;}

#enjoy-area .comic-area .wrap{
	display: table;
	margin: auto;
	border-collapse: separate;
	border-spacing: 25px 0;
}
#enjoy-area .comic-area .inner{padding-bottom: 30px;}
#enjoy-area .comic-thum-wrap{
	display: table-cell;
	width: 241px;
	margin-bottom: 30px;
}
#enjoy-area .comic-thum-wrap:nth-child(n+2){margin-left: 22px;}
#enjoy-area .comic-thum-wrap a{
	display: block;
	width: 241px;
}

#enjoy-area .comic-thum-num{
	margin-top: 5px;
	color: black;
	font-size: 14px;
	line-height: 20px;
	text-decoration: underline;
}
#enjoy-area .comic-thum-new{
	margin-top: 5px;
	color: red;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
}
#enjoy-area .comic-thum-new>time{font-weight: bold;}
#enjoy-area .comic-thum:hover{text-decoration: none !important;}
#enjoy-area .comic-thum-num:hover{text-decoration: none;}

#enjoy-area .twitter-icon-area:first-child{margin-top: 30px;}
#enjoy-area .twitter-icon-area .twitter{
	position: relative;
	width: 690px;
	margin: 8px auto 0;
	padding-bottom: 25px;
	border-radius: 10px;
}
#enjoy-area .twitter-icon-area .twitter.new   {background-color: #31e19d;}
#enjoy-area .twitter-icon-area .twitter.red   {background-color: #ff4848;}
#enjoy-area .twitter-icon-area .twitter.blue  {background-color: #4083ff;}
#enjoy-area .twitter-icon-area .twitter.green {background-color: #3ac033;}
#enjoy-area .twitter-icon-area .twitter.yellow{background-color: #ffcc00;}
#enjoy-area .twitter-icon-area .twitter.purple{background-color: #ad42ff;}

#enjoy-area .twitter-icon-area .date{
	position: absolute;
	display: block;
	top: 45px;
	right: 40px;
	font-size: 16px;
	color: white;
}
#enjoy-area .twitter-icon-area .date>time{font-weight: bold;}

#enjoy-area .twitter-icon-area .icon-title.center{
	display: block;
	margin: auto;
	padding: 18px 0;
}
#enjoy-area .twitter-icon-area .icon-title{display: block;}
#enjoy-area .twitter-icon-area .long .icon-title {margin: 15px 0 0 30px;}
#enjoy-area .twitter-icon-area .short .icon-title{margin: 15px 0 0 20px;}

#enjoy-area .twitter-icon-area .main-inner.icon {
	padding: 20px 20px 10px;
	border-radius: 10px;
	background-color: white;
}
#enjoy-area .twitter-icon-area .main-inner {
	width: 650px;
	margin: auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#enjoy-area .icon-area-wrapper{
	width: 600px;
	margin: 0 auto 15px;
}
#enjoy-area .twitter-icon-area .icon-area {
	width: 111px;
	float: left;
}
#enjoy-area .twitter-icon-area .icon-area:not(:first-child) {margin-left: 11.25px;}



#enjoy-area .icon-button{
	position: relative;
	display: table-cell;
	height: 72px;
	margin: 15px auto 0;
	border-radius: 10px;
	line-height: 72px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#enjoy-area .icon-button-wrap{
	width: 260px;
	margin: auto;
}
#enjoy-area .icon-button.long {width: 300px;}
#enjoy-area .icon-button.short{width: 212px;}
#enjoy-area .icon-button.red{
	border-right: 2px solid #c01b1b;
	border-bottom: 2px solid #c01b1b;
	background-color: #ff4848;
}
#enjoy-area .icon-button.red:after{
	border-top: 8px solid #ff4848;
	border-right: 8px solid #ff4848;
}
#enjoy-area .icon-button.blue{
	border-right: 2px solid #074ec8;
	border-bottom: 2px solid #074ec8;
	background-color: #4083ff;
}
#enjoy-area .icon-button.blue:after{
	border-top: 8px solid #4083ff;
	border-right: 8px solid #4083ff;
}
#enjoy-area .icon-button.green{
	border-right: 2px solid #077e0d;
	border-bottom: 2px solid #077e0d;
	background-color: #3ac033;
}
#enjoy-area .icon-button.green:after{
	border-top: 8px solid #3ac033;
	border-right: 8px solid #3ac033;
}
#enjoy-area .icon-button.yellow{
	border-right: 2px solid #c49004;
	border-bottom: 2px solid #c49004;
	background-color: #ffcc00;
}
#enjoy-area .icon-button.yellow:after{
	border-top: 8px solid #ffcc00;
	border-right: 8px solid #ffcc00;
}
#enjoy-area .icon-button.purple{
	border-right: 2px solid #7425cd;
	border-bottom: 2px solid #7425cd;
	background-color: #ad42ff;
}
#enjoy-area .icon-button.purple:after{
	border-top: 8px solid #ad42ff;
	border-right: 8px solid #ad42ff;
}
#enjoy-area .icon-button>a{
	position: relative;
	z-index: 1;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#enjoy-area .icon-button>a:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-color: #fff;
	opacity: 0;
}
#enjoy-area .icon-button>a:hover:before{
	opacity: .3;
	transition: .3s;
}

#enjoy-area .icon-button .icon-title{float: left;}
#enjoy-area .icon-button .arrow{
	float: right;
	display: block;
	margin: 18px 18px 0 0;
}

#enjoy-area .buttons-area .upper,
#enjoy-area .buttons-area .bottom{
	display: table;
	margin: 30px auto 0;
	border-collapse: separate;
	border-spacing: 20px 0;
}

#enjoy-area .back-button{margin: 40px auto 0;}
#enjoy-area .back-button>a{
	position: relative;
	display: block;
	width: 223px;
	margin: auto;
}
#enjoy-area .back-button>a:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-color: #fff;
	opacity: 0;
}
#enjoy-area .back-button>a:hover:before{
	opacity: .3;
	transition: .3s;
}

#enjoy-area .wallpaper-area{margin-top: 50px;}
.wallpaper-area.first{margin-top: 0;}
.wallpaper-date{
	height: 16px;
	padding: 3px;
	text-align: center;
	line-height: 16px;
}
.wallpaper-date>time{
	color: #ff0000;
	font-size: 11px;
	font-weight: bold;
}
.wallpaper-button{
	width: 200px;
	height: 52px;
	margin: 25px auto 0;
	border-right: 2px solid #d25e18;
	border-bottom: 2px solid #d25e18;
	background-color: #ff8e49;
	border-radius: 10px;
	line-height: 52px;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.wallpaper-button.first{margin-top: 24px;}
.wallpaper-button a{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.wallpaper-button a:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-color: #fff;
	opacity: 0;
}
.wallpaper-button a:hover:before{
	opacity: .3;
	transition: .3s;
}
.wallpaper-button img{
	height: 36px;
	margin-top: -3px;
	vertical-align: middle;
}

#enjoy-area .wallpaper-area .main-inner,
#enjoy-area .wallpaper-area .main-inner-bottom{
	display: table;
	margin: auto;
	border-collapse: separate;
	border-spacing: 45px 0;
}
#enjoy-area .wallpaper-area .main-inner-bottom{ margin-top: 50px; }

#enjoy-area .wallpaper-area .wallpaper{
	display: table-cell;
	width: 220px;
    position: relative;
}
#enjoy-area .wallpaper-area .wallpaper .thumb{width: 100%;}
#enjoy-area .wallpaper-area .wallpaper .limited{
    position: absolute;
    width: 38%;
    left: -30px;
    top: -13px;
}
#enjoy-area .wallpaper-area .wallpaper .limitedDate{
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 63%;
}

#enjoy-area .how-to-dl{margin-top: 60px;}
#enjoy-area .how-to-dl .text{
	margin: 24px 0 0;
	text-align: left;
	font-size: 20px;
	line-height: 28px;
}
#enjoy-area .wallpaper_pc{
	width:750px;
	margin:0 auto 10px;
}
#enjoy-area .wallpaper-button_pc{
	width: 200px;
	height: 52px;
	margin: 25px auto 75px;
	border-right: 2px solid #d25e18;
	border-bottom: 2px solid #d25e18;
	background-color: #ff8e49;
	border-radius: 10px;
	line-height: 52px;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.wallpaper-button_pc a{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.wallpaper-button_pc a:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-color: #fff;
	opacity: 0;
}
.wallpaper-button_pc a:hover:before{
	opacity: .3;
	transition: .3s;
}
#enjoy-area .wallpaper-button_pc img{
	height: 36px;
	margin-top: -3px;
	vertical-align: middle;
}


/* ========================================================
 faq
======================================================== */
#faq-area .buttons-area .upper,
#faq-area .buttons-area .bottom{
	display: table;
	margin: 20px auto 0;
	border-collapse: separate;
	border-spacing: 30px 0;
}
#faq-area .buttons-area .button{
	display: table-cell;
	width: 165px;
	height: 54px;
	background-image: url("../faq/images/button-category.png");
	background-size: 600% 300%;
	cursor: pointer;
}
#faq-area .buttons-area .button1{background-position:    0  0;}
#faq-area .buttons-area .button2{background-position: -100% 0;}
#faq-area .buttons-area .button3{background-position: -200% 0;}
#faq-area .buttons-area .button4{background-position: -300% 0;}
#faq-area .buttons-area .button5{background-position: -400% 0;}
#faq-area .buttons-area .button6{background-position: -500% 0;}
#faq-area .buttons-area .button1:hover{background-position:    0  -100%;}
#faq-area .buttons-area .button2:hover{background-position: -100% -100%;}
#faq-area .buttons-area .button3:hover{background-position: -200% -100%;}
#faq-area .buttons-area .button4:hover{background-position: -300% -100%;}
#faq-area .buttons-area .button5:hover{background-position: -400% -100%;}
#faq-area .buttons-area .button6:hover{background-position: -500% -100%;}
#faq-area .buttons-area .button1.on{background-position:    0  -200%;}
#faq-area .buttons-area .button2.on{background-position: -100% -200%;}
#faq-area .buttons-area .button3.on{background-position: -200% -200%;}
#faq-area .buttons-area .button4.on{background-position: -300% -200%;}
#faq-area .buttons-area .button5.on{background-position: -400% -200%;}
#faq-area .buttons-area .button6.on{background-position: -500% -200%;}

#faq-area .detail-area{
	width: 717px;
	min-height: 250px;
	margin: 40px auto 0;
	padding-bottom: 30px;
	border-radius: 10px;
	background-image: url("../faq/images/bg.png");
}
#faq-area .header-title{margin: 30px auto;}


#faq-area dl{
	width: 650px;
	margin: auto;
}
#faq-area dt,
#faq-area dd{
	position: relative;
	padding: 20px;
}
#faq-area dt{
	border-radius: 10px;
	background-color: #05affe;
	cursor: pointer;
}
#faq-area dt.show{border-radius: 10px 10px 0 0;}
#faq-area dt:not(:first-child){margin-top: 30px;}
#faq-area dd{
	padding-bottom: 30px;
	border: 3px solid #05affe;
	border-top: 0px;
	border-radius: 0 0 10px 10px;
	background-color: white;
	text-align: left;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#faq-area dt:before,
#faq-area dd:before{
	content: "";
	position: absolute;
	height: 100%;
	display: block;
	width: 25px;
	height: 25px;
	background-image: url(../faq/images/icon.png);
	background-size: 200% 100%;
}
#faq-area dt:after,
#faq-area dt.show:after{
	content: "";
	position: absolute;
	height: 100%;
	display: block;
	width: 28px;
	height: 28px;
	background-image: url(../faq/images/arrow.png);
	background-size: 200% 100%;
}
#faq-area dt:before{background-position:   0 0;}
#faq-area dd:before{background-position: -100% 0;}
#faq-area dt:after {
	top: 50%;
	right: 20px;
	margin-top: -15px;
	background-position: 0 0;
}
#faq-area dt.show:after{background-position: -100% 0;}
#faq-area dt>p,
#faq-area dd>p{padding: 2px 0 0 35px;}
#faq-area dt>p{
	width: 540px;
	color: white;
	font-weight: bold;
	text-align: left;
}
#faq-area .contact{
	position: relative;
	display: block;
	margin: 30px auto 0;
	width: 302px;
}
#faq-area .contact:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-color: #fff;
	opacity: 0;
}
#faq-area .contact:hover:before{
	opacity: .3;
	transition: .3s;
}
#faq-area .text-red{color: red;}


/*======== rule & faq-android ========*/
#faq-android-area h2,
#rule-area h2{
	position: static;
	font-size: 23px;
	font-weight: bold;
	text-align: center;
}
#rule-area .button,
#faq-android-area .button{
	position: relative;
	display: block;
	width: 315px;
	margin: 10px auto 0;
}
#rule-area .button:before,
#faq-android-area .button:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-color: #fff;
	opacity: 0;
}
#rule-area .button:hover:before,
#faq-android-area .button:hover:before{
	opacity: .3;
	transition: .3s;
}


/*======== faq-android ========*/
#faq-android-area{
	padding: 20px 0 20px;
	background-color: white;
}

#faq-android-area table{
	width: 295px;
	margin: 10px auto 0;
	border-collapse: collapse;
}
#faq-android-area td{
	padding: 5px;
	border: solid 1px #666666;
	color: #000000;
	background-color: #FFFFFF;
	font-size: 12px;
}
#faq-android-area .to-toppage{
	display: block;
	width: 169px;
	margin: 0 auto;
	padding: 30px 0 0;
}

#faq-android-area table{
	width: 750px;
	margin: 30px auto 0;
	border-collapse: collapse;
}
#faq-android-area td{
	padding: 10px;
	border: solid 1px #666666;
	color: #000000;
	background-color: #FFFFFF;
	font-size: 16px;
	text-align: left;
}
#faq-android-area .button{margin: 40px auto 0;}


/*======== rule ========*/
#rule-area .inner{
	padding: 0 20px 50px;
	text-align: left;
}
p#adress{margin-top: 20px;}
#rule-area ol li{
	margin:5px 0px 0px 10px;
}
#rule-area ol li p{
	margin:10px 20px;
}