@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:url("../image/bg.jpg");
	background-size: 50% auto;
    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%;
    overflow: hidden;
}

.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;}
.pt8 {padding-top:8% !important;}
.pt5 {padding-top:5% !important;}
.pt3 {padding-top:3% !important;}
.pt1 {padding-top:1% !important;}
.pt0 {padding-top:0% !important;}
.pb8 {padding-bottom:8% !important;}
.pb5 {padding-bottom:5% !important;}
.pb3 {padding-bottom:3% !important;}
.pb1 {padding-bottom:1% !important;}
.pb0 {padding-bottom:0% !important;}

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

.op0 {opacity: 0;}

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

#canvas {
  position: fixed !important;
  width:100% !important;
  height:100% !important;
  overflow: hidden !important;
  z-index:0;
  top:0;
}


/*hover*/


/*==================================
header
===================================*/
header{
    background: url("../image/kv-top.png") top repeat-x, url("../image/kv-bot.png") bottom repeat-x,#fbe25b;
    background-size: auto 15%,auto 15%,auto;
}
.header-wrap {
	position:relative;
	width: 100%;
	max-width:1038px;
	margin: 0 auto;
    /*background: url("../image/main-img.png") no-repeat top center;
    background-size: 100% auto;*/
	}
.header-box {
	position:absolute; z-index: 3;
	width: 100%;
	max-width:980px;
	margin: 0 auto;
}
.chara {
	position: absolute; z-index: 2;
	width: 107.5%;
	max-width: 1054px;
    left: -7%;
    right: 0;
	top: 5%;
	margin: 0 auto;
}

h1.logo {
	position: absolute; z-index: 10;
	width: 21.73%;
	left:0;
	top:3%;
}

h2.kvTxt {
	position: absolute; z-index: 4;
	width: 91.12%;
    left: 0;
    right: 0;
    margin: 0 auto;
	top: 36%;
}
.liveLink{
    position: absolute; z-index: 5;
    width: 20.51%;
    bottom: -13%;
    left: -10%;
}
    @media screen and (max-width:1200px) {
        .liveLink{
            bottom: -10%;
            left: 0%;
        }
    }
.kvBg{
    width: 134%; z-index: 1;
    left: -14%;
    position: relative;
    margin-bottom: 5%;
}

.snsBtn {
	position:relative; z-index:2;
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	padding-top: 1%;
    list-style: none;
	text-align:center;
	}

.snsBtn li {
	width: 6.32%;
    float: right;
    margin: 1%;
	}
	
.topanime { animation: show 1s both; }

.d0 { animation-delay: 0.2s; }

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

	h2.anniv-logo {
		margin-top: 54%;
	}

}

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

#main {
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0% auto 0 auto;
	}
	

.contents {
	position: relative; z-index: 2;
	width:100%;
	height:100%;
	max-width:980px;
	min-width:320px;
	margin-bottom: 7%;

    padding: 15px;
    box-shadow: 0 0 0 6px #01bbf7 inset, 0 0 0 12px #fff inset, 0 0 0 15px #01bbf7 inset;
	box-sizing: border-box;
	border-radius: 50px;
}
.contents.result{
    background: url(../image/result-bg.jpg)  #01bbf7;
	background-size: 65.3% auto;
}
.contents.live{
    background: url(../image/live-bg.jpg) no-repeat center top,  #1f226a;
	background-size: 97.95% auto;
}
.contents.info{
    background: url(../image/info-bg.jpg) no-repeat center top,  #1f226a;
	background-size: 97.95% auto;
}
.contents .fin img{
    position: absolute; z-index: 5;
    width: 18.26%;
    right: 9%;
    top: -3%;
}
.contents h3.cam-ttl {
    position: absolute;
    width: 106%;
    max-width:1040px;
    top:-0.8%;
    left: -3%;
    right: 0;
    margin: 0 auto;
}
    @media screen and (max-width:1040px) {
        .contents h3.cam-ttl {
            width: 100%;
            left: 0;
        }
    }
.contents .box{ margin:12% auto 3%; }
    .contents .box.result01 {
        position:relative;
		width:87.75%;
		max-width:860px;
		border-radius:50px;
        background: rgba(255, 255, 255, 0.75); 
        border: 5px dotted #01bbf7;
		text-align:center;
        }
        .contents .box.result01 p{
            width: 96.27%;
            max-width: 828px;
			margin:0 auto;
            text-align: center;
			}
        .contents .box.result01 p:first-child{margin-top: 3%;}
        .contents .box.result01 p:last-child{margin-bottom: 3%;}
        
    .contents .box .result02 .resuRow p{
        width: 31.89%;
        display: inline-block;
        margin: 1% 0.2% 3%;
        opacity: 0;
    }
    .contents .box .result03 .resuRow p{
        width: 35.78%; 
        display: inline-block;
        margin: 1% 0.8% 3%;
        opacity: 0;
    }
        .contents .box .result03 .third,
        .contents .box .result03 .second{
            width: 54.73%;
            margin: 0 auto 3%;
            opacity: 0;
        }
        .contents .box .result03 .firstRow{
            position: relative; z-index: 1;
            width: 100%;
            margin: 0 auto 3%;
            opacity: 0;
        }
        .contents .box .result03 .firstRow .puyo,
        .contents .box .result03 .firstRow .kira01,
        .contents .box .result03 .firstRow .kira02{
            position: absolute; z-index: 5;
            width: 100%;
            top: 0%;
            left: 0;
            right: 0;
            margin: 0 auto;
        }    
        .contents .box .result03 .firstRow.fadeIn-f .puyo{
             -webkit-animation: bounceIn 0.75s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
                     animation: bounceIn 0.75s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
            animation-delay: 0.3s;
        }
        .contents .box .result03 .firstRow.fadeIn-f .kira01,
        .contents .box .result03 .firstRow.fadeIn-f .kira02{
           -webkit-animation: blink-star 3.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) infinite ;
	               animation: blink-star 3.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) infinite ; 
        }
        .contents .box .result03 .firstRow.fadeIn-f .kira02{animation-delay: 0.6s;}

    .contents .box .btn img {
        width: 58.26%;
        max-width: 571px;
        margin: 0 auto;
    }
    .contents .box .livePage a {
        width: 30%;
        display: inline-block;
        margin: 3% auto 0;
    }
    .contents .box.infoArea .infoImg{
        width:84.21%; 
        margin: 0 auto;
    } 

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

    
    .snsBtn {
        position:relative; z-index:4;
        width:100%;
        max-width:980px;
        min-width:320px;
        margin:0 auto;
        padding-top: 1%;

        text-align:center;
        }

    .snsBtn li {
        width: 8.32%;
        margin: 1%;
        }

    .contents .box .btn img {
        width: 70%;
    }
    .contents{
        border-radius: 40px;
        padding: 12px;
        box-shadow: 0 0 0 4.8px #01bbf7 inset, 0 0 0 9.6px #fff inset, 0 0 0 12px #01bbf7 inset;
    }
    .contents .box.result01 {
        border-radius: 30px;
         border: 4px dotted #01bbf7;
    }
    
}
@media screen and (max-width:640px) {
 .contents{
        border-radius: 30px;
        padding: 9px;
        box-shadow: 0 0 0 3.6px #01bbf7 inset, 0 0 0 7.2px #fff inset, 0 0 0 9px #01bbf7 inset;
    }
    .contents .box.result01 {
        border-radius: 20px;
         border: 2px dotted #01bbf7;
    }
    .contents .box.infoArea .infoImg{
        width:100%; 
    } 
}

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

.linkArea {
    position: relative; z-index: 1;
	width: 100%;
    margin-bottom: 3%;
}

.linkArea-box {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

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

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

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

	#dl-btn {

		width: 24.93%;

	}

}


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

.appDl {
    position: relative;z-index: 1;
	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: 2.3rem;
	color:#111111;
}

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

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

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

.copyFooter {
  position: relative;
  display: table-cell;
  vertical-align: bottom;
}
.copyFooter small{
    position: absolute;
    top: 15px;
}
p.copyFooterM {
    padding: 8px 10px;
}

#footer_text a {
	display:inline-block;
	margin-right:10px;
}
@media screen and (max-width:640px) {
	
	footer {
        font-size: 2.5rem;
    }
    p.copyFooterM {
        padding: 5px 8px;
    }

}