@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-image: url("../image/bg-top.jpg");
  background-color: #0ccddc;
  background-size: 101%;
  color:#666!important;
	background-repeat: no-repeat;
  background-position: center top;
	height:100%;
}

@media screen and (max-width:1978px) {
  body {
  background-size:1978px;
  }
}

@media screen and (max-width:980x) {
}

@media screen and (max-width:640px) {
	
	body {
		min-width: 320px;
		background-size:180%;
}

}

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

ul {
	list-style:none;
	}

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


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

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

hr {
	width:90%;
	margin:0 auto 3% auto;
	border:1px solid #323232;
	}


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

header {
	position:relative;
	}

.snsBtn {
	position:absolute; z-index:4;
	width:100%;
	max-width:980px;
	min-width:320px;
  right:0;
  top:0.5%;
  text-align: right;
	}

.snsBtn li {
	display:inline-block;
	width: 3.9%;
    margin: 0.5%;
	}
	

	
.mainImg {
	width:100%;
	max-width:980px;
	min-width:320px;
	position:relative;
	margin:0 auto;
	}
	
h1 {
	position:relative; z-index:2;
	float:left;
	margin-top: 7%;
  padding-left: 1%;
	}
  
.mainImg .puyo-y {
	position:absolute; z-index:1;
  top: 22%;
  right: 4%;
	}	
	
.mainImg .puyo-p {
	position:absolute; z-index:1;
  top: 12%;
  left: 60%;
	}
	
.mainImg .puyo-b {
	position: absolute;
    z-index: 1;
  top: 15.4%;
  right: 17.4%;
	}
	
.mainImg .puyo-r {
	position:absolute; z-index:1;
  top: 30%;
  right: 29%;
	}

.mainImg .puyo-g {
	position:absolute; z-index:1;
	top: 44%;
    right: 7%;
	}
.btnWrap{
text-align: center;
}
.btnWrap li{
display: inline-block;
width:30.6%;
margin:1% 0.8%;
}

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

  h1 {
width:59.4%;
  }

  h2 {
    width:100%;
    margin: 5% auto 2% auto;
  }
  .mainImg .puyo-y {
   width:11.5%;
  }

  .mainImg .puyo-p {
    width:6.6%;
  }

  .mainImg .puyo-b {
    width:12.6%;
  }

  .mainImg .puyo-r {
    width:15.9%;
  }

  .mainImg .puyo-g {
    width:23.4%;
  }
}
@media screen and (max-width:640px) {
  .mainVisual{
  position: relative;
  margin-top: 5%
  }
  .snsBtn li {
    display:inline-block;
    width: 10.32%;
    margin: 1%;
  }
}
/*==================================
DLボタン
===================================*/
.appDl02{
width:92%;
  background: rgba(256,256,256,0.6);
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  text-align: center;
  margin: 2% auto;
  padding: 1%;
}

.appDl02>ul li a{
display: block;
}
.appDl02>ul li{
  display: inline-block;
  margin: 0 21px;
  width: 248px;
}
.appDl02>ul li a.appLink img{
  width:100%;
  margin-bottom: 1.5%;
}

.appDl02>ul li:nth-child(3) a.appLink img{
  width: 227.5px;
}

.appDl02>ul li:nth-child(3){
  margin-left: 10px;
  margin-right: 10px;
}


@media screen and (max-width:640px) {
  .appDl02>ul li{
    width: 38.37%;
    display: inline-block;
    margin: 0 1.9%;
  }
}
	
/*==================================
common
===================================*/

.main {
	width: 100%;
  max-width:980px;
  min-width:320px;
  margin: 0 auto;
    padding-top: 2%;
	}
  
.contents {
  position: relative;
  z-index: 5;
  /* padding-left: 1%; */
  padding-right: 1%;
  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); */
}

.innerWrap{
  padding: 1%;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

  
.contentsbg {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 1.5%;
  box-sizing: border-box;
  background: #35c5ff;
  border-radius: 8px;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
	
.inner {
  padding: 1.2%;
  background-image: url(../image/cirlce.svg),url(../image/cirlce.svg),url(../image/cirlce.svg),url(../image/cirlce.svg);
  background-position: top left,top right,bottom left,bottom right;
  background-repeat: no-repeat;
  background-size: 30px;
}

h3{
  width: 100%;
 margin: 2% auto;
}


.txt {
	width:85%;
	font-size:2.8rem;
	margin:3% auto 0 auto;
	}

.choiceBtn {
  display: block;
  width: 57.24%;
  margin: 2% auto 0 auto;
}


.co01{
display: table;
  table-layout: fixed;
width:100%;
margin: 2% auto 4% auto;
text-align: center;
overflow: auto;
}
.co01Inner{
width:48%;
  display: inline-block;
  vertical-align: middle;
}

.co01Inner p img{
  vertical-align:bottom;
}

.btnGame8{
margin-top: 15px;
}

.prizeWrap{
width:82%;
margin: 0 auto;
}
  .prizeWrap >li{
    width:32%;
  float: left;
  margin-right:1% ;
    margin-top:1% ;
  }
  
.prizeWrap >li:nth-child(3){
  margin-right:0 ;
}

.imgStone{
width:47.8%;
margin: 2% auto;
}

.camBanner li{
  width:64%;
margin: 3% auto;
}


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

}

.atte{
  width:87%;
margin:3% auto 0 auto;
}
.atte li{

  padding-left: 1em;
  text-indent: -1em;
  font-size:2.4rem;
  text-align: left;
}

.atte.is-atte01{
  width:74%;
  margin:3% auto 0 auto;
}


.linkArea {
  width: 100%;
  max-width: 980px;
  min-width: 320px;
  margin: 0 auto;
  padding-bottom: 3%;
}	

.pinkBox{
  width:92%;
  background: #fddce0;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  text-align: center;
  margin: 3% auto;
  padding: 2%;
}

dl.attention{
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border: solid 4px #d89c9c;
  margin:0 auto 4% auto;
  width:95%;
  overflow: hidden;
}

dl.attention dt{
  width:100%;
  line-height:50px;
  text-align:center;
  display: table;
  cursor:pointer;
  background:#feb8b8;
  font-size: 2.4rem;
  background:url(../image/plus.png),#feb8b8;
  background-repeat: no-repeat,repeat;
  background-position:center right 1%;
}


dl.attention dt img{
  vertical-align:middle;
}
dl.attention dt.active{
  background:url(../image/minus.png),#feb8b8;
  background-repeat: no-repeat,repeat;
  background-position:center right 1%;
}
dl.attention dd{
  background:#fff;
  width: 96%;
  line-height: 3rem;
  display:none;
  padding:2%;
  font-size: 2.8rem;
}

.ruleTitle{
margin-top:2%; 
font-weight: bold;
text-align: center;
}

.ruleText{
  width:96%;
  margin: 1% auto;
}

.tableDate{
width:80%;
  border: 2px solid #D79C9C;
  margin: 2% auto;
}

.tableDate th{
  background: #FCDCE0;
  border-right: 2px solid #D79C9C;
  border-bottom: 2px solid #D79C9C;
  padding: 1% 2%;
}

.tableDate td{
padding: 1% 2%;
  border-right: 2px solid #D79C9C;
  border-bottom: 2px solid #D79C9C;
  text-align: center;
}

.tableDate td:first-child{
width:50%;
}

.tableFlow{
  margin: 2% auto;
}

.tableFlow td{padding: 1% 2%;
}

.tableFlow td:first-child{
  width:30%;
  vertical-align:top;
}

.tableFlow td:first-child p{
  background: #FCDCE0;
  border: 2px solid #D79C9C;
  padding: 1% 2%;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
}

.atte.is-atte02{
  width:96%;
  margin:0 auto;
  color:#058DE3;
}

.endText{
width:45%;
margin: 2% auto;
}

@media screen and (max-width:640px) {
  .prizeWrap{
    width:100%;
    margin: 0 auto;
  }
  
  .choiceBtn {
    width:87.24%;
  }

  .inner{
    padding-bottom: 5%;
  }
  dl.attention dt img{
   width:25%;
  }
  

  dl.attention dt{
    width:100%;
    line-height:40px;
  }

  .atte li{
    font-size:2.8rem;
  }
  
  .tableDate{
    width:96%;
  }

  .tableFlow td {
    display: block;
  }
  
  .tableFlow td:first-child {
    width:96%;
    text-align: center;
  }

  dl.attention dd{
    line-height: 2.6rem;
    font-size: 3.2rem;
  }
  
  .btnGame8 {
    margin-top: 3%;
  }

}

 
/*==================================
pop
===================================*/

.charaPop{
width:100%;
max-width: 900px;
  background: #ffffff;
}

.charaInner{
  display: table;
  table-layout: fixed;
  width:90%;
  margin: 0 auto;
  text-align: center;
}

.charaInner li{
  width:25%;
  display: table-cell;
  text-align: center;
  padding: 0 2.5%;
}


.charaIcon{
margin-top: 3%;
}

.charaName{
font-size: 2rem;
}

.updateDate{
 color:red;
  font-size: 2.4rem;
  text-align: center;
}

.charaTitle{
width:48%;
margin: 2% auto;
}

.updateDate span{
  font-weight: bold;
}

.update{
margin-right: 2%;
}

.textBase{
 margin: 3% auto;
}

@media screen and (max-width:640px) {
  .charaInner li{
    padding: 0 1%;
  }

  .charaName{
    font-size: 2.8rem;
  }
  
  .updateDate{
    color:red;
    font-size: 3rem;
    text-align: center;
  }

}


/*==================================
anime
===================================*/

.fadeIn {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  visibility: visible !important;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.rubberBand{
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  visibility: visible !important;
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

/*==================================
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%;
	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;
	font-size:3.0rem;
	}



/***********************************************/
		

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


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

/*==================================
common
===================================*/
.pr-10{
  width: 42%;
padding-right: 10px;
}

.mt-70{
margin-top: 7%;
}