@charset "UTF-8";

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

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

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

/**
@media screen and (max-device-width:960px) {
body {
	position:relative;
	min-width: 320px;
	font-size:41.6875%;
	/*font-size:62.5%;10px
	font-family:"メイリオ", "ＭＳ Ｐゴシック", Helvetica , sans-serif;
	-webkit-text-size-adjust: 100%;
	line-height:1.6;
	color: #ffffff;
	background: url(../image/w.gif) repeat-x bottom, url(../image/bg.gif) ;
}	
	}**/



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

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

#wrapper{
	position:relative;
}

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

/*hover*/


@-webkit-keyframes hvr-push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes hvr-push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.hvr-push {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hvr-push:hover, .hvr-push:focus, .hvr-push:active {
  -webkit-animation-name: hvr-push;
  animation-name: hvr-push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


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


@media screen and (min-width:960px) {
	
	header h1 {
	position:relative; z-index:4;
	width:100%;
	max-width:1390px;
	min-width:320px;
	margin:0 auto;
	}
	
	}

	
@media screen and (max-width:960px) and (min-width:320px) {
	header h1 {
	position:relative; z-index:4;
	width:100%;
	max-width:960px;
	min-width:320px;
	margin:0 auto;
	}
	}


/*==================================
common
===================================*/
@media screen and (min-width:960px) {
#contents {
	position:relative; z-index:2;
	top:-14px;
	width:100%;
	max-width:992px;
	min-width:320px;
	margin:0 auto;
	text-align:center;
	background: url(../image/contentsBg02.png) no-repeat, url(../image/contentsBg.png) center top repeat-y;
	background-size:100% 100%, 100%;
	background-position:50% 86% , center top;
	
}}

@media screen and (max-width:960px) {
	
	#contents {
	position:relative; z-index:2;
	top:-14px;
	width:100%;
	max-width:960px;
	min-width:320px;
	margin:0 auto;
	text-align:center;
	background: url(../image/contentsBg02.png) no-repeat, url(../image/contentsBg_sp.jpg) center top repeat-y;
	background-size:100% 100%, 100%;
	background-position:50% 86% , center top;
	
}
	}

/*==================================
overview
===================================*/

#overview {
	padding:2% 0 4% 0;
	}

h2 {
	width:81.87%;
	margin:0 auto;
	text-align:center;
	}
	
h3 {
	margin:0 auto;
	text-align:center;
	}

.txt {
	width:79.27%;
	margin:0 auto;
	text-align:center;
	}
	
.collaboBtn {
	width:39.58%;
	margin:2% auto 3% auto;
	text-align:center;
	}
	
@media screen and (max-width:640px) {
	
	#overview {
	padding:5% 0 4% 0;
	}
	
	h2 {
	width:94.87%;
	margin:0 auto;
	text-align:center;
	}
	
	.txt {
	width:91.27%;
	margin:0 auto;
	text-align:center;
	}
	
	.collaboBtn {
	width:55.58% !important;
	margin:2% auto 3% auto;
	text-align:center;
	}
	
	}

.date {
	width:73.95%;
	margin:2% auto 0 auto;
	text-align:center;
	}



.social {
	display:table;
	margin:0 auto;
	}
	
	.social li {
		float:left;
		margin-right:10px;
		}
		
	.social li:last-child {
		margin-right:0;
		}
		
	.social li.tw {
		margin-top:2px;}
	
	.social li.fb {
		margin-top:2px;}

.ig-b- { display: inline-block; } .ig-b- img { visibility: hidden; } .ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; } .ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .ig-b-v-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; } }
	
@media screen and (max-width:640px) and (min-width:386px) {
	
	.social {
		display:table;
		margin:0 auto;
		}
	
	.social li {
		margin-right:6px;
		margin-bottom:1%;
		}
		
	.social li:nth-child(2) {
		clear:both !important;
		}

		}
		
@media screen and (max-width:386px){

	.social {
		display:table;
		margin:0 auto;
		}
	
	.social li {
		margin-right:6px;
		margin-bottom:1%;
		}
		
	.social li.insta {
		clear:both !important;
		margin-top: 6px;
		}	
	 
	
	}	
	
	
/*==================================
twcp
===================================*/

#twcp {
	position:relative;
	background:url(../image/twcp-kira.png) no-repeat center top;
	background-size:100%;
	background-position:100% 8%;
	}
	
	#twcp .chara {
		background:url(../image/tails.png) no-repeat left, url(../image/puyo-gy.png) no-repeat right, url(../image/puyo-v.png) no-repeat left, url(../image/puyo-b.png) no-repeat right;
		background-size:26.87% auto, 21.56% auto, 9.16% auto, 11.87% auto;
		background-position:1% 28%, 99% 18%, 8% 64%, 92% 72%;
			
		}
		
		
		
	@media screen and (max-width:960px) and (min-width:768px){
		
		#twcp .chara {
		background:url(../image/tails.png) no-repeat left, url(../image/puyo-gy.png) no-repeat right, url(../image/puyo-v.png) no-repeat left, url(../image/puyo-b.png) no-repeat right;
		background-size:26.87% auto, 21.56% auto, 9.16% auto, 11.87% auto;
		background-position:1% 27%, 99% 17.5%, 3% 62%, 98% 71%;
			
		}
		
		}
		
	@media screen and (max-width:768px) and (min-width:640px){
		
		#twcp .chara {
		background:url(../image/tails.png) no-repeat left, url(../image/puyo-gy.png) no-repeat right, url(../image/puyo-v.png) no-repeat left, url(../image/puyo-b.png) no-repeat right;
		background-size:26.87% auto, 20.56% auto, 9.16% auto, 11.87% auto;
		background-position:1% 21%, 99% 14.5%, 3% 48%, 98% 53%;
			
		}
		
		}
		
	@media screen and (max-width:640px) {
		
		#twcp .chara {
		background:url(../image/tails.png) no-repeat left, url(../image/puyo-gy.png) no-repeat right, url(../image/puyo-v.png) no-repeat left, url(../image/puyo-b.png) no-repeat right;
		background-size:26.87% auto, 21.56% auto, 9.16% auto, 11.87% auto;
		background-position:1% 17%, 99% 11%, 4% 40%, 97% 44%;
			
		}
		
		}

	#twcp .item01 {
		margin:0 auto;
		text-align:center;
		}

		
	#twcp .item01Txt {
		color:#333;
		font-size:3.0rem;
		margin-top:1%;
		}
		
	#twcp .endTxt {
		width:57.81%;
		position:absolute; z-index:3;
		top:25.59%;
		left:0;
		right:0;
		margin:auto;
		}
		
	@media screen and (max-width:768px) and (min-width:640px){
		#twcp .endTxt {
			top:20.59%;
			}
		}
		
	@media screen and (max-width:640px) {
		#twcp .endTxt {
			top:17.59%;
			}
		}

	
		#procedure h3 {
			width:73.95%;
			margin:4% auto 3% auto;
			}
			
		#procedure .txt01 {
			width:80.31%;
			margin:0 auto;
			text-align:center;
			}
			
		#procedure .btn {
			width:52.91%;
			margin:1% auto 3% auto;
			text-align:center;
			}
			
		#procedure .txt02 {
			width:67.08%;
			margin:0 auto 1% auto;
			text-align:center;
			}
			
		@media screen and (max-width:640px) {
			
			#procedure h3 {
			width:84.95%;
			margin:4% auto 3% auto;
			}
			
			#procedure .txt01 {
				width:90.31%;
				margin:0 auto;
				text-align:center;
				}
				
			#procedure .btn {
				width:63.91%;
				margin:1% auto 3% auto;
				text-align:center;
				}
				
			#procedure .txt02 {
				width:76.08%;
				margin:0 auto 1% auto;
				text-align:center;
				}
			
			}
			
/**********Twitter調整**********/
		.twitter-tweet {
			border:1px solid rgb(4, 40, 169) !important;
			border-radius:5px;
			box-sizing:border-box !important;
			margin:0 auto;
			}
			
		.timeline-Header {
			display:none !important;
			}
			
@media screen and (max-width:500px) {			
		.twitter-tweet {
			width: 95% !important;
			margin:0 auto;
		}}
			
		

	#caution {
		width:95%;
		margin:6% auto 3% auto;
		color:#0428a9;
		}
		
		#caution h4 {
			font-size: 3.5rem;
    		font-weight: bold;
			}
		
		#caution li {
			font-size:2.8rem;
			padding-left: 1em;
  			text-indent: -1em;
			}
			
			
/*==================================
event
===================================*/

#event .bannerList {
	display:table;
	position:relative; z-index:1;
	width:61.25%;
	margin:0 auto;
	color:#333;
	text-align:left;
	}
	
@media screen and (max-width:640px) {
	
#event .bannerList {
	display:table;
	position:relative; z-index:1;
	width:87.25%;
	margin:0 auto;
	color:#333;
	text-align:left;
	}
	
	}
	
	#event .bannerList li {
		margin-bottom:5%;
		text-align:center;
		}
		
	#event .bannerList li a {
		color:#0428a9;
		font-weight:bold;
		}
		
#event .bannerList li.new {
	margin-bottom: 2%;
	padding-top:6%;
	background:url(../image/event-new.png) no-repeat top left;
	background-size:27.04% auto;
	background-position: 3% 2%;
	}
	
@media screen and (max-width:640px) and (min-width:320px) {
	#event .bannerList li.new {
	padding-top: 7%;
	background-position: 0% 3.5%;
	}
	
	}
	
@media screen and (max-width:320px) {
	#event .bannerList li.new {
	background-position: 0% 9.5%;
	}
	}		

#event .bannerList .update {
	float:right;
	width:13em;
	padding:5px 0 3px 0;
	background:#a90404;
	border-radius:18px;
	font-size:3.2rem;
	font-weight:bold;
	color:#FFFFFF;
	line-height:18px;
	
	text-align:center;
	 }
	 
@media screen and (max-width:640px) {
	#event .bannerList .update {
	float:right;
	width:12em;
	padding:2px 0;
	background:#a90404;
	border-radius:18px;
	font-size:3.0rem;
	font-weight:bold;
	color:#FFFFFF;
	
	text-align:center;
	 }
	}
	 
#event .bannerList .bnTxt {
	color:#333;
	text-align:left;
	font-size:3.2rem;
	}
	 
	#event .bannerList li img {
		margin:1% 0;
		-webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
		
 	}
	
	#event .bannerList li > a {
		background:#FFFFFF \9 !important;
		}
	
	#event .bannerList li img {
		margin:1% 0 \9;
         box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) \9; 
		 box-sizing: border-box \9;
		 border: 4px solid #fff \9;
		 background:#FFFFFF \9;
 	}
		
/*==================================
twBox
===================================*/

#twBox .twBox {
	width:66.35%;
	position:relative; z-index:1;
	margin:0 auto;
	}
	
	#twBox .twBox h3 {
		width:100%;
		position:relative; z-index:2;
		}
		
	#twBox .twBox .box {
		width:74.41%;
		position:absolute; z-index:3;
		top:19%;
		left:0;
		right:0;
		text-align:center;
		margin:0 auto;
		}
		
	.twitter-timeline {
		width:100% !important;
		margin:0 auto;
		}
		
	.timeline-Header {
		display:none !important;
		}
		
	  #twBox .box iframe  {
   width: 100% !important;
   }
		
@media screen and (max-width:960px) {
	
	#twBox {
		width: 100%;
		background:url(../image/twBg_sp_h.png) no-repeat top, url(../image/twBg_sp_f.png) no-repeat bottom;
		background-size:100%;
		padding: 12% 0 4%;
		}
	
	#twBox .twBox {
		width: 100%;
		background:url(../image/twBg_sp_b.jpg) repeat-y;
		background-size:100%;
	}
	
	#twBox .twBox h3 {
		display:none;
		}
		
	#twBox .twBox .box {
		width:90% !important;
		text-align:center;
		margin:0 auto;
		position:static;
		}
		
	.twitter-timeline {
		width:100% !important;
		margin:0 auto;
		}
		
		#twBox .box iframe  {
   width: 90% !important;
   }
	}

		
/*==================================
chara
===================================*/

#chara {
	position:relative; z-index:9999 !important;
	width:56.97%;
	margin:0 auto;
	top: 15px;
	}
	
/*==================================
game-dl-area
===================================*/

#game-dl-area {
	position:relative; z-index:1 !important;
	width:100%;
	min-width:320px;
	top:-15px;
	padding:3% 0 1% 0;
	background:#a90404;
	}
	
	.game-dl-area{
	display:table;
	margin:0 auto;
	font-size: 14px;
	}

.game-dl-area .appIcon {
	float:left;
	text-align: center;
	}
	
.game-dl-area .appDate {float:right;}

	.game-dl-area h3 {
		font-size: 3.2rem;
		padding-left: 3%;
		text-align:left;
		}
	
	.game-dl-area .appDate dl {
		width:100%;
		padding-left: 3%;
		}

	.game-dl-area .appDate dt { float:left;}
	
.appBox {
	margin-top:2%;
	text-align: center;
	}
	
	.appBox li {
		display: inline-block;
		margin: 0;
		padding: 0 1% 0 0;
	}
			
	.appBox li.appBtn img, .appBox li.googleBtn img, .appBox li.amazonBtn img {
		height:52px !important;
		}
		
	.appBox li.googleBtn img {
		width:178px !important;
		}
		
.siteBtn {
	width:39.58%;
	margin:2% auto;
	text-align: center;
	}
	
	
@media screen and (max-width:640px) {
	
	
#game-dl-area {
	padding:7% 0 1% 0;
	}
	
.game-dl-area{
	width:97%;
	display:table;
	margin:0 auto;
	font-size:3.0rem;
}
	

.game-dl-area .appIcon {
	float:left;
	width:15.18%;
	text-align: center;
	}
	
.game-dl-area .appDate {float:right;}

	.game-dl-area h3 {
		padding-left: 3%;
		text-align:left;
		}
	
	.game-dl-area .appDate dl {
		width:auto;
		padding-left: 3%;
		}

	.appBox li {
	display: block;
	margin-bottom: 2%;
    padding: 0 1% 0 0;

	}
	
	.appBox li:last-child {
		padding-right: 0;}
		
.siteBtn {
	width:73.58%;
	margin:2% auto;
	text-align: center;
	}
	}
			

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

#top_scroll_btn img { opacity: 0.8; }

#top_scroll_btn img:hover { opacity: 1; }

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

footer {
	position:relative;
	top:-15px;
	width: 100%;
	min-width: 960px;
	background: #ffffff;
	font-size: 2rem;
	color:#111111;
}

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

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

}
	}
	
.maincont-size {
	width: 100%;
	max-width: 960px;
    min-width: 320px;
    margin: 0 auto!important;	
	}


	
#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;
}


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