@charset "UTF-8";

/* ----------------------------------------------------
作成日: 2017.01.13
最終更新日: 

common.css： 共通設定
---------------------------------------------------- */

body {
	position:relative;
	min-width: 320px;
	font-size:41.6875% sans-serif;
	/*font-size:62.5%;10px*/
	font-family:"メイリオ", "ＭＳ Ｐゴシック", Helvetica , sans-serif;
	-webkit-text-size-adjust: 100%;
	line-height:1.6;
	background-image: url("../image/bg.jpg");
	background-repeat: no-repeat;
	height:100%;
	
}

img {
	max-width: 100%; 
	height:auto;
}
a:link, a:hover, a:active {
	color:#ff0000;
}
a:visited  {
	color: #ff0000;        
}
a:focus {outline: none;}

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

#wrapper{
	position:relative;
	height:100%;
}

.tc {text-align:center !important;}
.tr {text-align:right !important;}
.tl {text-align:left !important;}

.mt8 {margin-top:8% !important;}
.mt5 {margin-top:5% !important;}
.mt3 {margin-top:3% !important;}
.mt1 {margin-top:1% !important;}
.mt0 {margin-top:0% !important;}
.mb8 {margin-bottom:8% !important;}
.mb5 {margin-bottom:5% !important;}
.mb3 {margin-bottom:3% !important;}
.mb1 {margin-bottom:1% !important;}
.mb0 {margin-bottom:0% !important;}

.sd {
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .5));
	-webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .5));
	}


.bg {	
	position: fixed;
	z-index: -1;
	left: 0;
	top: 0;
	min-width: 320px;
	width: 100%;
	height: 100%;
	background-image: url("../image/bg.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top center;
	background-color:#fff7d6;
	-webkit-backface-visibility: hidden; /* チラつき防止用 */
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

#canvas {
  position: fixed !important;
  width:100% !important;
  height:100% !important;
  overflow: hidden !important;
}

/*hover*/


/*==================================
header
===================================*/

header {
	position:relative;
	}
	
.snsBtn {
	position:relative; z-index:4;
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	text-align:center;
	}

.snsBtn li {
	width: 6.32%;
    float: right;
    margin: 1%;
	}
	
@media screen and (max-width:640px) {
	.snsBtn li {
	width: 10.32%;
    float: right;
    margin: 1%;
	}
	}
	
.snsBtn li:last-child {
	margin-right:0;
	}
	
.mainImg {
	max-width:980px;
	min-width:320px;
	position:relative;
	margin:1.5% auto 0 auto;
	}
	
h1 {
	width:40.51%;
	position:absolute; z-index:4;
	left: 3%;
    bottom: 3%;
	}
	
h2 {
	width:81.02%;
	position:absolute; z-index:1;
	right:0;
	left:0;
	top:0;
	margin:auto;
	}
	
.contents h3 {
	position:absolute; z-index:3;
	margin-top:-6%;
	}	
	
.mainImg .chara01 {
	position:relative; z-index:5;
	width:29.89%;
	float: right;
    margin-top: 12%;
    margin-right: 2%;
	margin-bottom: -5%;
	}

.mainImg .chara02 {
	width:27.55%;
	position:absolute; z-index:4;
	bottom: -2%;
    right: 18%;
	}
	
.mainImg .chara03 {
	width:22.44%;
	position:absolute; z-index:1;
	right: 36%;
    bottom: 6%;
	}
	
.mainImg .chara04 {
	width:27.95%;
	position:absolute; z-index:2;
	left: 1%;
    bottom: -5%;
	}
	
.mainImg .chara05 {
	width:26.42%;
	position:absolute; z-index:1;
	left: 22%;
    bottom: 2%;
	}
	
	
.topanime { animation: show 1s both; }

.d0 { animation-delay: 0.3s; }

.d1 { animation-delay: 0.7s; }

.d2 { animation-delay: 1.4s; }

.d3 { animation-delay: 2.1s; }

.d4 { animation-delay: 2.8s; }

.d4 { animation-delay: 3.0s; }
@keyframes show {
 0% {
 opacity:0;
}
 100% {
 opacity:1;
}
}


	
.recruit-banner {
	width:42.2%;
	position:absolute; z-index:4;
	top:-18%;
	left:1%;
	margin:0 auto;
	}
	
@media screen and (max-width:640px) {
.recruit-banner {
	width: 49.12%;
    position: absolute;
    z-index: 4;
    top: -24%;
    left: 1%;
    margin: 0 auto;
	}	
	
	}
	
	
/*==================================
common
===================================*/

#main {
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	}
	
.nav {
	position:relative; z-index:5;
	top:-5%;
	}

.nav li {
	float:left;
	margin:0;
	padding:0;
	}
	
/****IE***/	
@media all and (-ms-high-contrast:none){
.nav li:last-child {
	display:block;
	width:100%;
	max-width:980px;
	min-width:320px;
	float:left;
	margin:0;
	padding:0;
	}
	}
	
.nav li.btnS {
	width:50% !important;
	margin-bottom:9px;
	}

.contents {
	position: relative;
	width:100%;
	height:100%;
	max-width:980px;
	min-width:320px;
	margin-top: 7%;
	padding-bottom:3%;
	border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	
	background:rgba(255,255,255,0.80);
	
}

/******* cont01 *******/
#cont01 h4, #cont02 h4, #cont03 h4 {
	width:75.61%;
	margin:0 auto;
	padding-top:3%;
	}
	
#cont01 .box {
	position:relative;
	width:75.61%;
	margin:1% auto 3% auto;
	padding-bottom:3%;
	
	border:#39104a solid 4px;
	border-radius:8px 8px 8px 8px;
	-webkit-border-radius:8px 8px 8px 8px;
	-moz-border-radius:8px 8px 8px 8px;
	
	box-sizing:border-box;
	
	background:url(../image/con01_bg_h.png) top no-repeat, url(../image/con01_bg_f.png) bottom no-repeat, #fff;
	text-align:center;
	}
	

	
#cont01 .con01_banner {
	position:relative;
	width:96.08%;
	margin:0 auto;
	}
	
#cont01 .con01_banner li {
	position: relative;
    margin-top: 3%;
    padding-top: 1%;
    right: 4%;
	}
	
#cont01 .con01_banner .flag01 {
	background:url(../image/con01_event01.png) no-repeat;
	background-size:20.52% auto;
	}
	
#cont01 .con01_banner .flag02 {
	background:url(../image/con01_event02.png) no-repeat;
	background-size:20.52% auto;
	}
	
#cont01 .con01_banner .flag03 {
	background:url(../image/con01_event03.png) no-repeat;
	background-size:20.52% auto;
	}
	
#cont01 .con01_banner .flag04 {
	background:url(../image/con01_event04.png) no-repeat;
	background-size:20.52% auto;
	}
	
#cont01 .con01_banner .flag05 {
	background:url(../image/con01_event05.png) no-repeat;
	background-size:20.52% auto;
	}
	
#cont01 .con01_banner .flag06 {
	background:url(../image/con01_event06.png) no-repeat;
	background-size:20.52% auto;
	}
	
#cont01 .con01_banner .flag07 {
	background:url(../image/con01_event07.png) no-repeat;
	background-size:20.52% auto;
	}
	
#cont01 .con01_banner .flag08 {
	background:url(../image/con01_event08.png) no-repeat;
	background-size:20.52% auto;
	}
	
#cont01 .con01_banner img {
	width:79.17%;
	border:#39104a solid 4px;
	border-radius:3px;
	float:right;
	}
	
	#cont01 .box h5 {
		position: absolute;
		width: 29.22%;
		margin:0 auto;
		margin-top: -6%;
		margin-left: -10%;
		}
		
	#cont01 .box p {
		position:relative;z-index:2;
		width:88%;
		margin:3% auto 4% auto;
		text-align: center;
		}
		
	#cont01 .detailsBtn {
		width:75.20%;
		margin:1% auto;
		}
		
	#cont01 .box .event03 {
		margin-top: 3%;
	}
		
		
@media screen and (max-width:640px) {
	
	#cont01 h4 {
	width:92.31%;
	}
	
	#cont01 .box {
	width:95%;
	margin:2% auto 3% auto;
	}
	
	#cont01 .box.comingsoon {
	margin:7% auto 3% auto;
	}
	
	#cont01 .box h5 {
		margin-top: -13%;
    	margin-left: -2%;
		}
		
	#cont01 .box.comingsoon h5 {
		margin-top: -17%;
		}
		
	#cont01 .box .event03 {
		margin-top: 13%;
	}
	
	#cont01 .box .event03 h5 {
		margin-top: -15%;
		}
	
	}
	
	
/******* cont02 *******/		
	
@media screen and (max-width:640px) {
#cont02 h4 {
	width:100%;
	}	
	}
	
#cont02 .box {
	position:relative;
	width:75.61%;
	margin:1% auto 3% auto;
	padding-bottom:3%;
	
	border:#39104a solid 4px;
	border-radius:8px 8px 8px 8px;
	-webkit-border-radius:8px 8px 8px 8px;
	-moz-border-radius:8px 8px 8px 8px;
	
	box-sizing:border-box;
	
	background:url(../image/con02_bg_h.png) top no-repeat, url(../image/con02_bg_f.png) bottom no-repeat, #fff;
	text-align:center;
	}
	
@media screen and (max-width:640px) {
	
	#cont02 .box {
	width:95%;
	}
	}
	
#cont02 .box h5 {
	position: relative;
    width: 105%;
    margin:0 auto;
    margin-top: -2%;
    margin-left: -2%;
	}
	
@media screen and (max-width:640px) {
#cont02 .box h5 {
	position: relative;
    width: 102%;
    margin: 0 auto;
    margin-top: -3%;
    margin-left: -1%;
	}	
	
	}
	
#cont02 .box.need h5 {
	position: absolute; z-index:1;
    margin-top: -3%;
    margin-left: -20.4%;
	}
	
#cont02 .box.need h5 img {
	width: 63.46%;
	}
	
#cont02 .box.need .endTxt {
	width:95.82%;
	position:absolute;
	top:18%;
	left:0;
	right:0;
	margin:auto;
	
	}
	
#cont02 .box p {
	position:relative;z-index:2;
	width:94.81%;
	margin:2% auto;
	}
	
#cont02 .box p.title {
	width:38.76%;
	margin:0 auto 1% auto;
	}
	
#cont02 .box p.txt {
	margin-bottom:3%;
	}
	
#cont02 .box .liveBtn,#cont02 .box .followBtn {
	display:block;
	margin: 4% auto;
	}
	
@media screen and (max-width:640px) {
	
	#cont02 .box .liveBtn,#cont02 .box .followBtn {
	width:87.2%;
	}
	}
	
#cont02 .guest {
	width:100%;
	position:relative;
	text-align:center;
	}
	
#cont02 .guest li {
	width:23%;
	display:inline-block;
	margin-right:1%;
	}
	
	#cont02 .guest li:last-child {
		margin-right:0;
		}
		
	#cont02 .guest li.guest_soon {
	width:57%;
	}
		
		
.followBox {
	display:table;
	text-align:center;
	margin:0 auto;
	}
	
.followBox li {
	display:table-cell;
	padding:1%;
	}
	
/****IE***/	
@media all and (-ms-high-contrast:none){
	
	.followBox {
	width:100%;
	text-align:center !important;
	}
	
.followBox li {
	width:45%;
	display:inline-block;
	}
	}
	
/**** ハッシュタグ ****/

@media screen and (max-width:640px) {
.twhasBox {
	width:95%;
	margin:0 auto;
	}}
	
	
#twitter-widget-0 {
	border-radius: 5px !important;
	border:3px solid #ff5d00 !important;
	}

.timeline-Footer {
	    padding: 10px !important;
		}

/******* cont03 *******/
#cont03 h4 {
	padding-top:7%;
	}
	
#cont03 h5 {
	width:81.77%;
	margin:1% auto;
	}
	
@media screen and (max-width:640px) {
	#cont03 h5 {
	width:90.19%;
	}	
	}
	
#cont03 h5.method {
	width:81.77%;
	margin:2% auto 1% auto;
	}
	
@media screen and (max-width:640px) {
	#cont03 h5.method {
	width:90.19%;
	margin:2% auto 1% auto;
	}}
	
#cont03 .flow01 {
	width:81.77%;
	margin:0 auto;
	}

#cont03 .flow02 {
	width:81.77%;
	margin:1% auto 3% auto;
	}
	
@media screen and (max-width:640px) {
	#cont03 .flow01 {
	width:90.19%;
}
	#cont03 .flow02 {
	width:90.19%;
	}

}
	
#cont03 .followBtn {
	width:58.43%;
	margin:2% auto;
	}
	
#cont03 .endTxt {
	width:81.77%;
	margin:2% auto;
	}
	
@media screen and (max-width:640px) {
#cont03 .followBtn {
	width: 81%;
	}
	
#cont03 .endTxt {
	width:100%;
	margin:2% auto;
	}
	
	}


	
/*** TWキャンペーン ***/


.wrap-slider {
	width: 100%;
	min-width: 320px;
	height:auto !important;
}



.sliderNav {
	display:table;
	width: 100% !important;
	max-width:980px !important;
	min-width: 320px !important;
	margin:0 auto 3% auto;
}


.sliderNav li {
	display:table-cell;
	width:20%;
	float:left;
	margin:0;
	padding:0;
	}

/****IE***/	
@media all and (-ms-high-contrast:none){
	
.sliderNav li {
	width:20%;
	float:left;
	margin:0;
	padding:0;
	}	
	
	}	
	
.bxslider {
  display: none !important;
  overflow:hidden !important;
}
	
.bxslider li {
  display: none !important;
  overflow:hidden !important;
}
.bx-viewport .bxslider li {
  display: block !important;
}
	
.slider {
	display:table !important;
	height:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto !important;
	text-align:center !important;
	}

	
.twitter-tweet {
	margin:0 auto !important;
	}
	
.twtr-timeline { height:auto!important; }
	
.slider li {
	position:relative !important;
	float: none;
	}
	
	.slider li p.txt {
		margin:10px auto;
		font-size:2.8rem;
		color:#00246b;
		}
		
	.slider li .item_btn {
		width:65.2%;
		margin:0 auto;
		}	
	
	
	
#twitter-widget-1, #twitter-widget-2 {
	margin:0 auto !important;
	}	
.EmbeddedTweet {
	margin:0 auto !important;
	}
	
.SandboxRoot {
	text-align:center !important;
	margin:0 auto !important;
	}

.retweetBox {
	display: table !important;
	margin:0 auto !important;
	}
	
.retweetBoxEnd {
	width:75%;
	display: table !important;
	margin:0 auto !important;
	}

@media screen and (max-width:640px) {
	
	#twitter-widget-1, #twitter-widget-2 {
		width:350px !important;
		margin:0 auto !important;
		}	
	
	.twitter-tweet {
		width:350px !important;
		margin:0 auto !important;
		}
		

twitterwidget, iframe[id^="twitter-widget-"] {
  margin-left: auto;
  margin-right: auto;
}
	}
	
@media screen and (max-width:450px) {
	
		#twitter-widget-1, #twitter-widget-2 {
		width:256px !important;
		margin:0 auto !important;
		}	
	
	.twitter-tweet {
		width:256px !important;
		margin:0 auto !important;
		}
	
	}
			
		

	#caution, #product {
		width:95%;
		margin:3% auto;
		color:#00246b;
		word-break: break-all;
		}
		
		#caution h5, #product h5 {
			font-size: 3.5rem;
    		font-weight: bold;
			
			}
		
		#caution li, #product li {
			font-size:2.8rem;
			padding-left: 1em;
  			text-indent: -1em;
			word-break: break-all;
			}


/*==================================
banner
===================================*/

.siteBtn {
	display:block;
	width:57.24%;
	margin:5% auto;
	}
	
@media screen and (max-width:640px) {
	.siteBtn {
	display:block;
	width:87.24%;
	margin:5% auto;
	}
	}


.banner {
	width:100%;
	max-width:970px;
	min-width:310px;
	margin:0 auto;
	text-align:center;
	}
	
.banner li {
	display:inline-block;
	margin-right:1%;
	margin-bottom:1%;
	
	}
			

#top_scroll_btn {
	position: fixed;
	z-index: 9999;
	width: 15.93%;
	height: auto;
	bottom: 10px;
	right: 10px;
}


/*==================================
appDl
===================================*/

.appDl {
	width:100%;
	padding:3% 0;
	background:#0d1049;
	color:#FFFFFF;
	font-size: 2rem;
	}
	
.appDl .box {
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	}

.appDl .box h3 {
	width:79.68%;
	margin:0 auto;
	}
	
.appDl .dl {
	text-align:center;
	}
	
.appDl .dl li {
	display:inline-block;
	width: 24.37%;
	background:url(../image/appDL-bg.png) no-repeat center top;
	background-size: 79%;
	}
	
@media screen and (max-width:640px) {
	.appDl .dl li {
	width:39.37%;
	}
	
	}
	
.appDl .dl li a img {
	width:90%;
	margin:3% 0 25% 0;
	}
	
.appDl .box .txt {
	width:50.31%;
	margin:0 auto;
	}
	
.appDl .box p {
	margin:0 auto;
	font-size:3.0rem;
	}
	

#top_scroll_btn img { opacity: 0.8; }

#top_scroll_btn img:hover { opacity: 1; }

/*==================================
footer
===================================*/

footer {
	position:relative;
	width: 100%;
	background: #ffffff;
	font-size: 3.0rem;
	color:#111111;
}

@media screen and (max-width:960px) {
	
	footer {
	min-width: 320px !important;

}
	}
	
@media screen and (max-width:640px) {
	
	footer {
	font-size: 3.0rem;

}
	}

.footer {
	width:90%;
	max-width:970px;
	min-width:310px;
	margin:0 auto;
	padding-bottom:5%
	}
	
@media screen and (max-width:640px) {
.footer {
	padding-bottom:18%
	}	
	}
	
#footerContents,#footer_text {
	padding: 10px;
}
#footer_text {
	padding-top: 0;
}
#footerContents li{
	float:left;
	margin-right:10px;
}
#footerContents li p {
		margin-top: 13px;
}


.sega-logo {
	display: inline-block;
    width: 104px;
    height: 36px;
    padding-top: 38px;
}

.sega-logo.sp {
	display: inline-block;
    width: 104px;
	padding-top: 0;
}

@media all and (-ms-high-contrast:none) {
.cero {
	display: inline-block;
    width: 60px;
    height: 74px;
}}

.copyFooter {
	display: table-cell;
	vertical-align:bottom;
	height:74px;
	line-height: 100px;
	}
	
.copyFooter.sp {
	display: table-cell;
	vertical-align:bottom;
	height:auto;
	line-height: 24px;
	}


#footer_text a {
	display:inline-block;
	margin-right:10px;
}