@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%;
     background: #181818;
     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;
 }

 ul {
     list-style: none;
 }

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


 #wrap {
     position: relative;
     height: 100%;
     width: 100%;
 }

.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;}
.pt4 {padding-top:4% !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(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: 100%;
     height: 35px;
     margin: 5% auto;
 }

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

 .re {
     position: relative;
 }


/*==================================
common
===================================*/
 #wrapper {
     position: relative;
     width: 100%;
     height: auto;
 }

 .wrap {
     position: relative;
     width: 100%;
     height: auto;
     background:url(../image/contents-bg.jpg) no-repeat center top ;
     margin-top: -1%;

 }

.contents {
    position: relative;
    width: 100%;
    min-width: 320px;
    max-width: 980px;
    margin: 0 auto;
}

.box {
    width: 96%;
    margin: 0% auto;
}

 .btn {
     display: block;
     width: 80%;
     max-width: 569px;
     margin: 1% auto
 }

/*==================================
main
===================================*/

.snsBtn {
    position:absolute; z-index:10;
    width:100%;
    max-width:980px;
    min-width:320px;
    margin:0 auto;
    list-style: none;
    text-align:center;
}

.snsBtn li {
    width: 5.82%;
    float: right;
    margin: 1%;
}


.logo{
    top:59%;
    width: 100%;
}

.puyo-logo {
    position: relative;
    width: 38%;
    max-width: 221px;
    z-index: 12;
    margin: 10px auto 20px 25px;
}

.catch{
    width:65%;
    max-width:548px; 
    bottom:5%;
    left: 20%;
}


.main {
    position: relative;
    width: 100%;
    min-width: 320px;
    margin: 0 auto;
    z-index: 1;
    background: url(../image/main-bg.jpg) no-repeat center top;
}

.main .img-puyo{
    width: 13.46%;
    height: auto;   
}

.main .img-puyo.is-green{
    width: 13.46%;
    top: 35%;
    right: 4.1%;
}

.main .img-puyo.is-red{
    width: 8.97%;
    top: 10%;
    left: 13.1%;
}
.main .img-puyo.is-blue{
    width: 13.8%;
    top: 43%;
    left: 55.1%;
}

.main .img-puyo.is-yellow{
    width: 7.95%;
    top: 8%;
    right: 19.8%;
}

.main .img-puyo.is-purple{
    width: 11.22%;
    top: 28%;
    left: 0%;
}

.date20190515 .logo {
    top: 56%;
    width: 100%;
}


.date20190515 .catch{
    width: 55%;
    bottom: 7.5%;
    max-width:548px; 
    left: 24%;
}

.date20190515 .date{
    width: 53.2%;
    max-width:522px; 
    bottom:0;
    left: 25.5%;
}

.date20190515 .main .img-puyo.is-green{
    width: 11.46%;
    top: 28%;
    right: 2.1%; 
}

.date20190515 .main .img-puyo.is-yellow{
    width: 7.95%;
    top: 15%;
    right: 19.8%;
}

.date20190515 .main .img-puyo.is-red{
    width: 7.97%;
    top: 18.5%;
    left: 16.1%;
}

.date20190515 .main .img-puyo.is-purple{
    width: 10.22%;
    top: 45.5%;
    left: 0%;
}

.date20190515 .main .img-puyo.is-blue{
    width: 11.8%;
    top: 45%;
    left: 56.1%;
}

@media screen and (max-width:768px) {
    .snsBtn {
        width:100%;
        max-width:980px;
        min-width:320px;
        margin:3% auto;
        bottom:-20%;
        text-align:center;
    }

    .snsBtn li {
        width: 10.32%;
        margin: 1%;
        float: none;
        display: inline-block;
    }

    .snsBtn li:last-child {
        margin-right:0;
    }
    .catch{
        bottom:2.5%;
    }
}

/*==================================
contents
===================================*/

.sub-title{
   width:100%;
    margin: 0 auto;
}

.camp-banner{
    width:100%;
margin: 0 auto;
}
.chara-thumbs {
    margin: 0 auto;
    width:900px;
}

.chara-thumbs li{
    max-width: 150px;
    float: left;
    margin:7px 15px;
}

.thumb-item li{
    width: 98%;
    margin: 0 auto;
}

.bx-wrapper img {
    display: block;
    width: 91.49%;
    max-width:800px;
    height: auto;
    margin: 0 auto;
}

.topics-area{
    display: table;
    width:100%;
}

.topics-area p {
    display: table-cell;
    padding: 2%;
    width:50%;
}

.topics-area p img {
    display: block;
    width:100%;
}

.img-chara{
    width: 44%;
    padding-top: 66%;
    background: url(../image/img-fujiko.png) no-repeat center ;
    background-size:contain; 
    top:-11%;
    left: -9%;
    z-index: 0;
    
}

.topics-text{
    position: relative;
    z-index: 3;
    display: block;
}

.note{
    font-size: 2.4rem;
    color: #fff;
    padding-top: 1%;
}

.movie{
    width: 80%;
    max-width: 675px;
    margin: 2% auto 0 auto;
    
}
 /****IE***/
 @media all and (-ms-high-contrast:none) {}

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


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

         background:url(../image/contents-bg.jpg) no-repeat center ;
         background-size: 208%;

     }
     
     .main {
         background: url(../image/main-bg.jpg) no-repeat center ;
         background-size: 208%;
     }

     

     .box {
         width: 96%;
         margin: 0% auto;

     }
     
     .chara-thumbs {
         width:111%;
         margin: 0 auto;
     }

     .chara-thumbs li{
         width:15%;
         margin:0.5% 1.5%;
     }

 }

@media screen and (max-width:768px) {
    
    .box.is-top{
        padding-top: 14%;
    }
}

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

     body {
         min-width: 320px;
     }

     .puyo-logo {
         margin: 1% auto 6% 2%;
     }

 }


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

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


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

@media screen and (max-width:640px) {
    .btn {
        display:block;
        width:87.24%;
        margin:2% auto;
    }
}


.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: 144px;
    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: #181818;
     font-size: 12px;
     color: #fff;
 }

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

 }