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


/*==================================
common
===================================*/
 #wrapper {
     position: relative;
     width: 100%;
     height: auto;
	 background:url(../image/bg.jpg);
 }

 .wrap {
     position: relative;
     width: 100%;
     height: auto;
 }

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

.box {
    width: 100%;
    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%;
}

.kv{
    width: 51.32%;
    max-width:504px;
    margin: 14% auto 0;
}

.logo{
    top:52%;;
    width: 91.83%;
    left: 3%;
    right: 0;
    margin: 0 auto;
}

.catch{
    width: 83.67%;
    max-width: 820px;
    padding-bottom: 9%;
    margin: 4% auto 0;
}
.date{
    top: 87%;
    width: 71.12%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.copy{
    width: 31.83%;
    right: 0;
    bottom: 1%;
}

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

.star{
    position: absolute;
    margin: 0 auto;
    height: 0;
    background: url(../image/star.png) center no-repeat;
    background-size: cover;
}
.star.is-large{
    padding-bottom: 10%;
    width: 10.20%;
}
.star.is-middle{
    padding: 4%;
    width: 6%;
}
.star.is-small{
    padding: 3%;
    width: 5%;
}

.star:nth-of-type(1) {
    left: -70%;
    right:0;
    top: 13%;
    transform: rotate(-30deg);
}
.star:nth-of-type(2) {
    left: -8%;
    right:0;
    top: 3%;
    transform: rotate(-30deg);
}
.star:nth-of-type(3) {
    left: 0%;
    right:-85%;
    top: 35%;
    transform: rotate(30deg);
}
.star:nth-of-type(4) {
    left: -70%;
    right:0;
    top: 40%;
    transform: rotate(45deg);
}
.star:nth-of-type(5) {
    left: 0%;
    right:-60%;
    top: 17%;
    transform: rotate(60deg);
}
.star:nth-of-type(6) {
    left: 0%;
    right:-65%;
    top: 47%;
    transform: rotate(50deg);
}
.star:nth-of-type(7) {
    left: 0%;
    right:-40%;
    top: 13%;
    transform: rotate(30deg);
}
.star:nth-of-type(8) {
    left: -40%;
    right:0%;
    top: 15%;
    transform: rotate(30deg);
}

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

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

    .snsBtn li:last-child { margin-right:0; }
    .logo{ top: 50%; }
    .catch{ padding-bottom: 14%; }
    .date{ 
        top: 81%;
        width: 60%;
    }
    .copy{
        width: 26%;
        bottom: 0%;
    }
}

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

.sub-title{
	width:100%;
	margin: 0 auto;
	text-align: center;
	background-color:#0d44bf;
	padding: 0.5% 0;
	border-top: solid 6px;
	border-bottom: solid 6px;
	border-color: #39104a;
}
.titleLine.is-white{ 
    padding: 2% 0;
    background-color:#FFFFFF; 
}

.titleLine.is-yello{
	padding: 0.5% 0;
    background-color:#f2ea1a;
	border-top: solid 6px;
	border-bottom: solid 6px;
	border-color: #39104a;
}
.titleLine.is-blue{ background-color:#75b0ff; }
.titleLine .sub-title img{
	vertical-align: bottom;
}

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

.chara-thumbs li{
    max-width: 170px;
    display: inline-block;
    margin:2px 2px;
}

.chara-thumbs li a.active img{
    background-color: #FFF;
    border-radius: 10px;
}

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

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

.topics-text{
    position: relative;
    z-index: 3;
    display: block;
}
.siteChara.chara01{
    position: absolute;
    width: 30%;
    bottom: -5%;
    left: 1.5%;
}
.siteChara.chara02{
    position: absolute;
    width: 37.14%;
    right: 8%;
    top: -4%;
}
.topics-area{
    /* display: table; */
    width:100%;
}
.topics-area p {
    display: table-cell;
    width:50%;
}
.topics-area p img {
    display: block;
    width:100%;
}

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

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

 @media screen and (max-width:980px) {
     
     .main {
         background: url(../image/main-bg.jpg) repeat-X center top;
         background-size: contain;
     }

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

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

     .chara-thumbs li{
         width:15%;
         margin:0.3% 0.9%;
     }
     .chara-thumbs.active{
       
         
     }
	 .sub-title{
		border-top: solid 3px;
		border-bottom: solid 3px;
	}
.sub-titleLine{
	border-top: solid 3px;
	border-bottom: solid 3px;
}

 }


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

     body {
         min-width: 320px;
     }
     .titleLine.is-yello{
        padding: 0.5% 0;
        background-color:#f2ea1a;
        border-top: solid 3px;
        border-bottom: solid 3px;
        border-color: #39104a;
    }
     
    .chara-thumbs li a.active img {
        background-color: #FFF;
        border-radius: 5px;
    }

 }


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

 }