.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

body{
    background: #000 url(../../img/dmm/common_bg_01.jpg) repeat-x left top;line-height: 1.1em;margin:0;
    font-family:'ヒラギノ角ゴ' Pro W3, Hiragino Kaku Gothic Pro, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', MS PGothic, sans-serif;
}
a:link{color:#FFFFFF;text-decoration:inherit;}
a:visited{color:#FFFFFF;text-decoration:inherit;}
a:hover{color:#7F7F7F;text-decoration:underline;}
a:active{color:#FFFFFF;text-decoration:inherit;}
a.nontext{color:black;text-decoration:none;font-style:normal;font-weight:normal;}
#container{
    background: url(../../img/dmm/common_header_01_release_02.jpg?v3) no-repeat center top;
    margin:0;
    /*padding-top: 720px;*/
}
header {
    width: 100%;
    height: 450px;
    position: relative;
}
header h1{
    width: 540px;
    height: 520px;
    position: absolute;
    top: 45px;
    left:0;
    right:0;
    margin: auto;
}
#box-preregister{
    width: auto;
    height: 330px;
    margin: 0 auto;
  /*  background: url(../../img/dmm/common_pageimg_03_release.png?v2) no-repeat center top;*/
    position: relative;
    z-index: 1;
}

#box-error-check-confirmation {
    display: none;
    position: absolute;
    top: 8px;
    left: 50%;
    margin-left: -30%;
    background-color: rgba(0,0,0,0.8);
    color: #ffffff;
    width: 60%;
    height: 200px;
    text-align: center;
    font-size: 18px;
}

#box-error-check-confirmation .read {
    padding: 80px 12px 0 12px;
}

#box-error-check-confirmation .read a img{
    width: 182px;
}

#bt-preregister{
    padding: 0;
    text-align: center;
}

#bt-preregister a {
    width: 560px;
    height: 129px;
    display: inline-block;
}

.bt-preregister-disable .btn_brink01,
.bt-preregister-enable .btn_brink01 {
    background: url(../../img/dmm/common_btn_01_in.png) no-repeat center top;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -280px;
    width: 560px;
    height: 129px;
    z-index: -1;
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0s;

    -moz-animation-name: pulse;
    -moz-animation-duration: 0.8s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:ease-in-out;
    -moz-animation-direction: alternate;
    -moz-animation-delay: 0s;

    -o-animation-name: pulse;
    -o-animation-duration: 0.8s;
    -o-animation-iteration-count:infinite;
    -o-animation-timing-function:ease-in-out;
    -o-animation-direction: alternate;
    -o-animation-delay: 0s;

    -ms-animation-name: pulse;
    -ms-animation-duration: 0.8s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-timing-function:ease-in-out;
    -ms-animation-direction: alternate;
    -ms-animation-delay: 0s;

    animation-name: pulse;
    animation-duration: 0.8s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
    animation-direction: alternate;
    animation-delay: 0s;
}

@-webkit-keyframes pulse {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.3;
    }
}

@-moz-keyframes pulse {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.3;
    }
}

@-o-keyframes pulse {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.3;
    }
}

@-ms-keyframes pulse {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.3;
    }
}

@keyframes pulse {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.3;
    }
}

.ani_appear01{
    -moz-animation-name: appear;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;

    -webkit-animation-name: appear;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;

    -o-animation-name: appear;
    -o-animation-duration: 0.3s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: 1;

    -ms-animation-name: appear;
    -ms-animation-duration: 0.3s;
    -ms-animation-timing-function: linear;
    -ms-animation-iteration-count: 1;

    animation-name: appear;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

/*Keyframes*/
@keyframes appear {
    0% {
        opacity: 0;
        transform: translate3d(0,6px,0);
    }
    99.9%,to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

@-moz-keyframes appear {
    0% {
        opacity: 0;
        -moz-transform: translate3d(0,6px,0);
    }
    99.9%,to {
        opacity: 1;
        -moz-transform: translate3d(0,0,0);
    }
}

@-webkit-keyframes appear {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,6px,0);
    }
    99.9%,to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
    }
}

@-ms-keyframes appear {
    0% {
        opacity: 0;
        -ms-transform: translate3d(0,6px,0);
    }
    99.9%,to {
        opacity: 1;
        -ms-transform: translate3d(0,0,0);
    }
}

#box-preregister #box-error-msg{font-size: 14px; color:#ff8400;margin:0 auto 10px auto;text-align: center;background-color: rgba(0,0,0,0.7);display: inline-block;}
#box-preregister form{background-color: rgba(255, 255, 255, 0.1);width: 560px;margin:0 auto 0 auto; font-size: 16px; color: #FFF;padding:10px;text-align: center;}
#box-preregister a{text-decoration: underline;}
#bt-preregister-login{
    width: 560px;
    height: 129px;
    margin: auto;
    position: relative;
    top:120px;
}
#bt-preregister img{border:none;}
.bt-preregister-disable img{
    width: 560px;
}

.bt-preregister-enable img{
    width: 560px;
    display: block;
}
#box-preregistered{
   /* background: url(../../img/dmm/common_dialog_01.png) no-repeat center top;*/
    width: 582px;height: 210px;
    margin:0 auto 0 auto;
    padding:24px;
    position: relative;
    top:60px;
    text-align: center;
}
#box-preregistered h2{font-size: 32px; color:#e8e3df;text-align: center;}
#box-preregistered p{font-size: 18px; color:#e8e3df;line-height: 2em;width: 480px; margin:auto;padding:40px 0 0 0;text-align: center;}
#bt-item-get-gacha{
    position: absolute;
    top:-130px;
    width: 337px;
    height: 282px;
    margin:0;
    padding: 0 0 0 20px;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#bt-item-get-gacha a{
    display: inline-block;
}

#preregister_ok:hover {
    -webkit-transition: 0.1s ease-in-out;
    -moz-transition: 0.1s ease-in-out;
    -o-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
    opacity: 0.8;
}

#bt-item-get-gacha a:hover{
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -webkit-transition: 0.1s ease-in-out;
    -moz-transition: 0.1s ease-in-out;
    -o-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
    opacity: 0.9;
}
@media (max-width: 1290px) {
    #bt-item-get-gacha{
        top:-180px;
        left: -42px;
        padding: 0;
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -o-transform: scale(0.8);
        -ms-transform: scale(0.8);

    }
}
#bt-item-get-gacha img{border: none;}
#box-preregistered #preregistered-error-msg{padding:20px 0 0 0;}
#btn-error-ok{margin-top:5px;display: block;}
#section-benefits{width: 910px;height: 640px;margin:0 auto 0 auto;}
#section-benefits-attention{background-color: rgba(255, 255,255, 0.1);width: 890px;margin:5px auto 0 auto; font-size: 12px; color: #FFF;padding:10px;}
#section-benefits-attention p{margin:0;}
#section-game{width: 100%;max-width: 910px;height: auto;margin:0 auto 0 auto;}
#section-information{width:910px; height:328px;margin:24px auto 24px auto;}
#section-information #box-tweets{background: url(../../img/dmm/common_bor_01.jpg) no-repeat center top;width: 316px;height: 320px;padding:4px;float:left;}
#section-information #box-movie{background: url(../../img/dmm/common_bor_02.jpg) no-repeat center top;height: 320px; padding: 4px; text-align: center;}
#section-system{background-color: rgba(255, 255, 255, 0.1);width: 890px;margin:5px auto 0 auto; font-size: 12px; color: #FFF;padding:10px;overflow:auto;clear:both;}
#section-system h2{font-size: 14px; color:#ff8400;margin:0;}
#section-system table{width:440px;margin-top:10px;}
#section-system table caption{text-align: left;}
#section-system table th{text-align: left; font-weight: normal;}
#section-system #system-windows{float:left;}
#section-system #system-mac{float:right;}
footer{background: #000 url(../../img/dmm/common_footer_01.jpg) no-repeat center top;height:88px;margin:30px 0 0 0;text-align: center;padding-top:30px;clear:both;}
footer nav{width:900px; height: 88px;margin: 0 auto 0 auto;}
footer nav #footer-logo{float:left;}
footer nav ul{float:right;}
footer nav li{float:left; list-style: none; display: block;font-size: 14px;color: #FFF;margin:20px 0 0 10px;padding-left: 10px;}
footer nav li+ li {border-left: 1px solid #FFF;}
.box-popup{background: url(../../img/dmm/common_dialog_02.png) no-repeat left top; color:#e8e3df; width:880px; max-width:880px; height: 720px; margin: 0; padding:0;}
.box-popup h1{font-size: 32px; text-align: center; margin: 48px auto 50px auto;}
.box-popup .modal-contents{overflow-y: scroll; width: 795px; height:465px; margin:0 auto 0 auto; padding:0;font-size: 12px;text-align: left;border: none;}
.box-popup .modal-contents h2{font-size: 12px; font-weight: normal; margin:10px;}
.box-popup .modal-contents div{margin:10px;}
.box-popup .popup-close{background-color: rgba(0,0,0, 0); border: none;margin-top:10px;}

.sys_align01 {
    text-align: left !important;
}

.sys_align02 {
    text-align: center !important;
}

.sys_align03 {
    text-align: right !important;
}



@media (max-width: 767px) {

    #container{
        background: url(../../img/dmm/common_header_01_release_02.jpg?v3) no-repeat center top;
        -moz-background-size: 767px auto;
        -webkit-background-size: 767px auto;
        -o-background-size: 767px auto;
        -ms-background-size: 767px auto;
        padding-top: 170px;
    }

    header {
        height: 262px;
        display: block;
    }

    header h1{
        bottom: initial;
        left: 50%;
        top: 16px;
        margin-left: auto;
        width: 54%;
        height: initial;
        position: static;

    }
    #box-preregister{
        background-size: contain;
        background: none ;
        width: 100%;
        height: auto;
        margin-top: -10%;
        position: relative;
    }

    header h1 img{
        width: 100%;
        height: auto;
    }

    #bt-item-get-gacha{
        padding-left: 0;
        left: -20px;
        top: -360px;
        width: auto;
        height: auto;
    }

    #bt-item-get-gacha img{
        width: 126px;
        height: 105px;
        border: none;
    }
    #preregister_ok{
        width: 210px;
        height: 48px;
        display: inline-block;

    }

    #form_preregister{
        position: relative;
        top: 0;
        z-index: 1;
        font-size: 0.8em;
    }
    #form_preregister input[type=checkbox] {
        margin-right: 1em;
        position: relative;
        z-index: 1;
        -webkit-transform: scale(2.0);
        -moz-transform: scale(2.0);
        transform: scale(2.0);
        margin-bottom: 12px;
    }
    #form_preregister > label{
        position: relative;
        top: 15px;
    }
    #bt-preregister{
        padding-top: 0;
        position: relative;
        z-index: 1;
        width: 64%;
        margin: 0 auto;
    }

    #bt-preregister a{
        width: 100%;
        height: auto;
    }

    .bt-preregister-enable .btn_brink01,
    .bt-preregister-disable .btn_brink01 {
        background-size: contain;
        width: 100%;
        height: 129px;
        top: 0;
        left: 50%;
        margin-left: -50%;
    }

    #bt-preregister img{
        width: 100%;
        height: auto;
    }
    #box-preregister form{
        background-color: rgba(0, 0, 0, 1);
        width: auto;
        padding-top: 12px;
        padding-bottom: 30px;
        font-size: 14px;
    }
    #box-preregister form:before{
        content: '';
        position: absolute;
        top: 94px;
        color: #ffdd00;
        width: 100%;
        text-align: center;
        left: 0;
    }

    #box-preregister #box-error-msg{
        width: 100%;
        font-size: 12px;
        margin: 0 auto;
    }

    #box-error-check-confirmation {
        display: none;
        position: absolute;
        top: -145px;
        left: 50%;
        margin-left: -46%;
        background-color: rgba(0,0,0,0.8);
        color: #ffffff;
        width: 92%;
        height: 190px;
        text-align: center;
        font-size: 14px;
        z-index: 10;
    }

    #box-error-check-confirmation .read {
        padding: 52px 12px 0 12px;
    }

    #section-benefits{
        width: 90%;
        height: auto;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    #section-benefits img {
        width: 100%;
    }

    #section-game{
        width: 90%;
        height: auto;
    }

    #section-game img {
        width: 100%;
        height: auto;
    }

    #section-benefits-attention{
        width: 90%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #section-information{
        height: auto;
        width: 90%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #section-information #box-tweets{
        width: 100%;
        background: none;
        float: none;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #section-information #box-tweets > iframe{
        width: 342px !important;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .bt-preregister-enable img{
        width: 560px;

    }
    #section-information #box-movie{
        width: 90%;
        height: auto;
        background: none;
        float: none;
        text-align: center;
        margin: 10px auto;
    }
    #section-information #box-movie iframe{
        width: 308px !important;
        height: 173px !important;
    }

    #section-system{
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #section-system h2,
    #section-system caption{
        font-size: 12px;
    }
    #section-system table{
        width: 100%;
        font-size: 1em;
        margin: 15px 0;
    }
    #section-system #system-windows,
    #section-system #system-mac{
        float: none;
    }
    #section-system table th{
        width: 8em;

    }
    footer nav #footer-logo{
        position: relative;
        top: -15px;
    }
    footer nav{
        width: 100%;
        position: relative;
    }
    footer nav ul{
        position: absolute;
        top: 10px;
        left: 0;
    }

    footer nav li{
        font-size: 12px;
    }
    .box-popup{
        background: #130905;
        border: 1px #dfcfb5 solid;
        height: 515px;
        width: 95%;
    }
    #modal-contact.box-popup {
        height: 560px;
    }
    .box-popup h1 {
        font-size: 20px;
        text-align: center;
        margin: 24px auto 10px auto;
        border-bottom: 1px solid #ffffff;
        padding: 0 6px 15px 6px;
    }

    .popup-close img{
        width: 182px;
        height: 46px;
    }

    .box-popup .modal-contents{
        width: 100%;
        height: 375px;
    }
    .box-popup .modal-contents div {
        margin: 5px;
    }
    .box-popup .modal-contents h2 {
        margin: 10px 10px 0 5px;
    }

    #document.timeline-Widget {
        max-width: 100% !important;
        width: 100% !important;
    }

    div.timeline-Widget {
        max-width: 100% !important;
        width: 100% !important;
    }

    .timeline {
        max-width: 100% !important;
        width: 100% !important;
    }
    .timeline-Tweet-text{
        font-size: 1em !important;
    }


}