@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;
     width: 100%;
     height: 100%;
 }
.bg{
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    min-width: 320px;
    width: 100%;
    height: 100%;
    background-image: url(../image/bg.png);
    background-repeat: repeat-x;
    background-size:  contain;
    background-position: top center;
    -webkit-backface-visibility: hidden;
}

 img {
     max-width: 100%;
     height: auto;
 }
 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%;
    overflow: hidden;
 }

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

.mt14 {margin-top:14% !important;}
.mt10 {margin-top:10% !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;}
.mb12 {margin-bottom:12% !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;}
.pt12 {padding-top:12% !important;}
.pt8 {padding-top:8% !important;}
.pt5 {padding-top:5% !important;}
.pt4 {padding-top:4% !important;}
.pt3 {padding-top:3% !important;}
.pt1 {padding-top:1% !important;}
.pt0 {padding-top:0% !important;}
.pb10 {padding-bottom:10% !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(0 1px 0px rgba(0, 0, 0, .5));
     -webkit-filter: drop-shadow(0 1px 0px rgba(0, 0, 0, .5));
 }
.op0{ opacity: 0; }

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

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

 hr {
     width: 100%;
     height: 35px;
     margin: 5% auto;
 }

 .ab {
     position: absolute;
     z-index: 1;
 }

 .re { position: relative; }

.-hover01:hover {
	position: relative;
	top: 2px;
}

/*==================================
common
===================================*/
 #wrapper {
     position: relative;
     width: 100%;
     height: auto;
 }
 .wrap{
     width: 100%;
     height: auto;
     overflow: hidden;
 }
.contents {
    text-align: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    z-index: 10;
}
.sitebtn{
    max-width:569px;
    display: block;
    width: 87.24%;
    margin: 0 auto;
}

/*==================================
main
===================================*/
.snsBtn {
    position: absolute;
    z-index:20;
    width:100%;
    max-width:980px;
    min-width:320px;
    top: 0;
    margin:0 auto;
    list-style: none;
    text-align: right;
}
.snsBtn li{
    width: 5.82%;
    display: inline-block;
    margin: 1%;
}
.kvArea h1.logo{
    top: 46%;
    width: 46.93%;
    right: 0%;
    left: 0;
    margin: 0 auto;
    z-index: 15;
}
.kvArea h2.catch{
    width: 88.16%;
    padding-top: 67.97%;
    margin: 0 auto 4%;
    z-index: 15;
}
.kvArea .chara01{
    width: 44.48%;
    right: 28.6%;
    z-index: 4;
    top: 15%;
}
.kvArea .chara02{
    width: 36.73%;
    left: 0.5%;
    z-index: 5;
    top: 15%;
}
.kvArea .chara03{
    width: 28.07%;
    right: 9%;
    z-index: 5;
    top: 17%;
}
.kvArea .puyo li img{z-index: 6;}
/*黄ぷよ*/
.kvArea .puyo li:nth-child(1) img{
    width: 8.1%;
    top: 55%;
    right: 2%;
}
/*紫ぷよ*/
.kvArea .puyo li:nth-child(2) img{
    width: 6.2%;
    top: 26%;
    right: 3%;
}
/*赤ぷよ*/
.kvArea .puyo li:nth-child(3) img{
    width:13.06%;
    top: 62%;
    right: 7%;
}
/*緑ぷよ*/
.kvArea .puyo li:nth-child(4) img{
    width: 21.42%;
    top: 55%;
    left: 1%;
}
/*青ぷよ*/
.kvArea .puyo li:nth-child(5) img{
    width: 8.06%;
    top: 21%;
    left: 3%;
}
.main {
    position: relative;
    width: 100%;
    min-width: 320px;
    max-width: 980px;
    background-size: cover;
    margin: 0 auto ;
}
.cloud{
    position: fixed;
    max-width: 1122px;
    z-index: -1;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    right: 0;
    left: -3%;
    top: 3.5%;
    background-image: url(../image/bg-cloud.png) ;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    -webkit-backface-visibility: hidden;
}
.star{
    position: absolute;
    top: 2.5%;
    margin: 0 auto;
    right: 0;
    left: -3%;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:980px) {
    .snsBtn {padding-right: 1%;}
    .snsBtn li{ width: 7.5%; }
    .snsBtn li:last-child { margin-right:0; }
}

/*==================================
contents
===================================*/
.contentsInner.-star{ 
    background: url(../image/cont-bg.jpg) top;
    overflow: hidden;
}
.contentsInner.-through{ 
    background-color: rgba(255,255,255,0.8);
    overflow: hidden;
}
.box{
    margin: 0 auto;
    width: 100%;
    max-width: 980px;
    min-width: 320px;
}
.box .live .info{
    width: 93.46%;
    margin: 0 auto;
    display: flex;
}
.box .live .info.-bottom{ align-items: flex-end; }
.box .live .info dt{
    width: 21.83%;
    display: inline-block;
    margin: 0 1%;
}
.box .live .info dd{
    width: 71.61%; 
    display: inline-block;
    margin: 0 auto;
}
.box .live .info dd ul{
    width: 100%;
    margin: 0 auto;
    display: flex;
}
.box .live .info dd ul li{
    width: 31.45%;
    margin-right: 1%;
}
.box .live .info dd ul li:last-child{margin-right: 0;}
.titleArea{
    background: url(../image/title-bg.jpg) top;
    width: 100%;
    z-index: 1;
}
h4.title{
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}
h4.title::before{
    content: "";
    position: absolute;
    background: url(../image/title-puyo-l.png) top no-repeat;
    background-size: contain;
    width: 32.85%;
    padding-bottom: 13%;
    left: -14%;
}
h4.title::after{
    content: "";
    position: absolute;
    background: url(../image/title-puyo-r.png) top no-repeat;
    background-size: contain;
    width: 35.71%;
    padding-bottom: 13%;
    right: -18%;
}
h5.subTitle{
    width: 62.75%;
    margin: 0 auto;
}

@media screen and (max-width:980px) {
    .contentsInner.-star{ background-size: 60%; }
    h5.subTitle{
        width: 90%;
        margin: 0 auto;
    }
}

/****IE***/
 @media all and (-ms-high-contrast:none) {}

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

.iventArea p{ 
    position: relative;
    z-index: 5; 
}
/*キャンペーン*/

.campArea{
    width: 93.46%;
    padding:14px 4px;
    background-color: #fff;
    margin: 0 auto;
    box-shadow: 0 0 0 6px #1f93bd inset;
}
.naviBtn{
    position: absolute;
    width: 3.37%;
    height: 20%;
    z-index: 100;
}
.naviBtn .bx-next {
  opacity: 0;
  display: block;
}
.naviBtn .bx-prev,.naviBtn .bx-next{ 
    opacity: 0;
    display: block;
    height: 80px; 
}
.campThumbs {
    text-align: center;
    margin: 0 auto;
    width:93.68%;
}
.campThumbs li{
    width: 16.12%;
    position: relative;
    display: inline-block;
    margin-bottom: 3%;
    margin-right: 4.3%;
    box-shadow: 0 0 0 6px #1f93bd;
}
.campArea,.campThumbs li{filter: drop-shadow(0px 6px 4px #6c8388); }
@media screen and (max-width:980px) {
    .campArea{
          padding:8px 4px;
          box-shadow: 0 0 0 4px #1f93bd inset;
    }
    .campThumbs li{
         box-shadow: 0 0 0 4px #1f93bd;
    }
    .campArea,.campThumbs li{filter: drop-shadow(0px 2px 2px #6c8388); }
}

.campThumbs li:last-child{ margin-right: 0%; }

.bx-wrapper img {
    display: block;
    width: 97.37%;
    max-width:892px;
    height: auto;
    margin: 0 auto;
}
.bx-wrapper .infoBtn img{
    position: absolute;
    max-width: 468px;
    width:52.46%; 
    right: 0;
    left: 0;
    top:87%;
}
.bx-wrapper .infoBtn img:hover{top: 87.3%;}
.bx-wrapper .charaTxt{ z-index: 5; }

.campBan{
    width:86.93%;
    max-width:852px;
    margin:5% auto 4%;
}
/*==================================
banner
===================================*/

.banner {
    width:100%;
    max-width:970px;
    min-width:310px;
    margin:0 auto ;
    padding-bottom: 2%;
    text-align:center;
}

.banner li {
    display:inline-block;
    margin-right:1%;
    margin-bottom:1%;

}
.portalBanner{ margin-top:1%; }

#top_scroll_btn {
    position: fixed;
    z-index: 9999;
    width: 15.93%;
    max-width: 96px;
    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%;
     min-width: 960px;
     background: #fff;
     font-size: 12px;
     color: #000;
 }

 .footer {
     width: 90%;
     max-width: 970px;
     min-width: 310px;
     margin: 0 auto;
     padding-bottom: 5%
 }

 #footerContents,
 #footer_text { padding: 10px 0; }

 #footer_text { padding-top: 0; }

 #footerContents li {
     /* float: left;*/
     display: inline-block;
     margin-right: 16px;
 }

 #footerContents li p { margin-top: 13px; }

 .sega-logo {
     display: inline-block;
     width: 140px;
     padding-top: 29px;
     margin-right: 16px !important;
 }

 .copyFooter {
     display: table-cell;
     vertical-align: bottom;

 }

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

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

     footer { min-width: 320px !important; }
 }

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

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

     footer { font-size: 3.0rem; }
     .copyFooter {
         margin-top: 2%;
         vertical-align: bottom;
         line-height: inherit;
         height: auto;
     }

     #footerContents { padding: 10px 5px; }
     #footerContents li { margin-right: 0; }
     .footer { padding-bottom: 28% }
 }