@charset "UTF-8";

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

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;
	background: #FFF;
	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;}

cf::after {
	content: " ";  
	display: block; 
	visibility: hidden; 
	clear: both; 
	height: 0;
	line-height: 0;
}

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

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


.sd {
	filter: drop-shadow(0 2px 0px rgba(0, 0, 0, .5));
	-webkit-filter: drop-shadow(0 2px 0px 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;
}

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

.att {
  padding-left: 1em;
  text-indent: -1em;
}

#canvas{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 0;
}


/*==================================
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:0 auto;
	}
	
h1 {
	position:relative; z-index:2;
	width:66.45%;
	float:right;
    margin-top: 20.5%;
	margin-bottom: 1%;
	}
	
h2 {
	position:relative; z-index:2;
	width:83.57%;
	margin:0 auto;
	}
	
.date {
	position:relative; z-index:2;
	width:71.53%;
	margin:0 auto 1% auto;
	}
	
.mainImg .sakura {
	position:absolute; z-index:1;
	top:2%;
	width:52.75%;
	}

.mainImg .puyo-g {
	position:absolute; z-index:1;
	width:14.38%;
	top: 7%;
    left: 39%;
	}
	
.mainImg .puyo-r {
	position:absolute; z-index:1;
	width:12.65%;
	top: 54%;
    right: 11%;
	}
	
.mainImg .puyo-y {
	position:absolute; z-index:1;
	width:9.59%;
	top: 64%;
    right: 2%;
	}
	
.mainImg .puyo-b {
	position: absolute;
    z-index: 1;
    width: 10.42%;
    top: 21%;
    left: 0;
	}
	
.mainImg .puyo-p {
	position:absolute; z-index:1;
	width:9.59%;
	top: 14%;
    right: 10%;
	}
	


	
/*==================================
common
===================================*/

#main {
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	}
	
	
/****IE***/	
@media all and (-ms-high-contrast:none){

	}
	
.nav li.btnS {
	width:50% !important;
	margin-bottom:9px;
	}

.contents {
	position: relative; z-index:5;
	width:100%;
	height:100%;
	max-width:980px;
	min-width:320px;
	margin-top: 3%;
	padding: 6% 0;
	
	background:url(../image/frame-h.png) no-repeat top center, url(../image/frame-f.png) no-repeat bottom center;
	background-size:100%, 100%;
}

@media screen and (max-width: 768px) {
	.contents {
	position: relative; z-index:5;
	width:100%;
	height:100%;
	max-width:980px;
	min-width:320px;
	margin-top: 3%;
	padding: 5.8% 0;
	
	background:url(../image/frame-h.png) no-repeat top center, url(../image/frame-f.png) no-repeat bottom center;
	background-size:100%, 100%;
}
	}

.con-Box {
	position:relative;
	padding: 7% 0 2% 0;
	background-image:url(../image/frame-bg.png)!important;
	background-repeat: repeat-y !important;
	background-size:100% 3px!important;
	}
	
.line {
	width:71.45%;
	margin:3%
	 auto;
	}
	
.con-Box h3.title-chara {
	position:absolute;
	top: -4%;
    left: 0;
    right: 0;
    width: 46.22%;
    margin: 0 auto;
	}

@media screen and (max-width: 640px) {
	.con-Box h3.title-chara {
	position:absolute;
	top: -2%;
    left: 0;
    right: 0;
    width: 46.22%;
    margin: 0 auto;
	}
	}
		
.sliderNav {
	text-align:center;
}


.sliderNav li {
	width:12.12%;
	display:inline-block;
	margin-right:1%;
	}
	
	.sliderNav li:last-child {
		margin-right:0;
		}
		
		
.slider li {
	width:67.04%;
	position:relative;
	}

		
	.slider li .sakura {
		width: 48.70%;
		position: absolute;
		top: 0%;
		right: 6%;
		}
		
	.slider li .aruru {
		width: 44.14%;
		position: absolute;
		top: 0%;
		right: 7%;
		}
		
	.slider li .erika {
		width: 27.24%;
		position: absolute;
		top: 0%;
		right: 16%;
		}
		
	.slider li .furore {
		width: 41%;
		position: absolute;
		top: -1%;
		right: 6%;
		}
		
	.slider li .gemini {
		width: 37.13%;
		position: absolute;
		top: 0%;
		right: 9%;
		}
		
	.slider li .carry {
		width: 38.3%;
		position: absolute;
		top: -1%;
		right: 6%;
		}
		
	.slider li .oogami {
		width: 58.90%;
		position: absolute;
		top: -1%;
		right: -3%;
		}
		
.txt {
	width:85%;
	font-size:2.8rem;
	margin:3% auto 0 auto;
	}
	


	
.con-Box h3.title-campaign01 {
	position:absolute;
	top: -5%;
    left: 0;
    right: 0;
    width: 88.26%;
    margin: 0 auto;
	}	

@media screen and (max-width: 640px) {
	.con-Box h3.title-campaign01 {
	position:absolute;
	top: -1%;
    left: 0;
    right: 0;
    width: 88.26%;
    margin: 0 auto;
	}
	}
		
.cam01-date {
	position:relative; z-index:1;
	width:97.81%;
	margin:1% auto;
	}		
		
.cam01-txt01 {
	position:relative; z-index:3;
	width:97.81%;
	margin:0 auto;
	}
	
.cam01-twBtn {
	position:relative; z-index:3;
	width:58.75%;
	margin:2% auto;
	}
	
@media screen and (max-width:640px) {
	
.cam01-twBtn {
	position:relative; z-index:3;
	width:87.24%;
	margin:4% auto 3% auto;
	}
	
	}

	
.cam01-txt02 {
	position:relative; z-index:3;
	width:64.37%;
	margin:0 auto;
	}
	
.cam01-sakura {
	width:50.72%;
	position:absolute; z-index:2;
	top:9%;
	left:-7%;
	}
	
.cam01-puyo {
	width:14.68%;
	position:absolute; z-index:2;
	bottom:27%;
	right:5%;
	}
	
@media screen and (max-width:640px) {
	
.cam01-puyo {
	width:14.68%;
	position:absolute; z-index:2;
	bottom:13%;
	right:1%;
	}
	}
	
.cam01-end {
	position:relative; z-index:3;
	width:65.81%;
	margin:2% auto;
	}

.con-Box h3.title-campaign02 {
	
	position: absolute;
    top: -3.5%;
    left: 0;
    right: 0;
    width: 88.26%;
    margin: 0 auto;
	}
	
@media screen and (max-width:640px) {
	
.con-Box h3.title-campaign02 {
	position:absolute;
	top: -2.2%;/*-1.3%*/
    left: 0;
    right: 0;
    width: 88.26%;
    margin: 0 auto;
	}
	}
	
.cam02-date {
	position:relative; z-index:1;
	width:97.14%;
	margin:0  auto;
	}
	
.cam02-present {
	    width: 30.73%;
    position: absolute;
    z-index: 2;
    top: 4%;
    left: 2%;
	}
	
@media screen and (max-width:640px) {
	
.cam02-present {
	width: 30.73%;
    position: absolute;
    top: 2.5%;
    left: 2%;
	}
	
	}
	
.cam02Txt01 {
	width:79.08%;
	margin:2% auto 0 auto;
	}
	
@media screen and (max-width:640px) {
	
.cam02Txt01 {
	width:92.08%;
	margin:2% auto 0 auto;
	}
	
	}
	
.cam02-followBtn {
	width:57.44%;
	margin:2% auto;
	}
	
@media screen and (max-width:640px) {
	
.cam02-followBtn {
	width:87.24%;
	margin:2% auto;
	}
	
	}
	
.cam02Txt02 {
	width:71.53%;
	margin:0 auto;
	}
	
@media screen and (max-width:640px) {
	
.cam02Txt02 {
	width:84.53%;
	margin:0 auto;
	}
	
	}
	
.twBox {
	width:80%;
	margin:0 auto;
	}



/**** 注意書き ****/
.caution {
	width:85%;
	margin:3% auto 0 auto;
	
	text-align:left;
	font-size:2.8rem;
	}

	
/**** リツイートボックス ****/

twitterwidget,
iframe[id^="twitter-widget-"] {
  margin-left: auto;
  margin-right: auto;
}



/*==================================
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%;
	
	}
	
.banner li.portalBanner {
	margin-top:1%;
	border:1px solid #0086d1;
	}
	

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

.appDl {
	width:100%;
	margin-top:3%;
	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:29.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;
	}

			

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

}
	}

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


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