a { cursor: pointer;}
/* html,body {background: #000;} */
html,body {overflow-x: hidden;}
.teaser_wrap { background:#080814 url(../img/teaser/bg.jpg) center no-repeat; position: relative; width:100%; min-height: 100vh; background-size: cover; overflow-x: hidden;}

.teaser_wrap .inner { position: absolute; top:0; left:0; right:0; bottom:0; width:100%; height: 100%; overflow: hidden;}
.teaser_wrap .inner .victor { position: absolute; left: 20%; top:8%;}
.teaser_wrap .inner .victor img {width:15vw}
.teaser_wrap .inner .p_character { position: absolute; top:50%; left: 50%; transform:translate(-50%, -25%); width: 100%; text-align: center; z-index: 100;}
.teaser_wrap .inner .pc .character { width: 70%;}
.teaser_wrap .inner .title {text-align: center;}
.teaser_wrap .inner .title img { max-width: 100%;}
.teaser_wrap .inner .title p { overflow: hidden;}
.teaser_wrap .inner .title.pc { position: absolute; left: 50%; transform: translateX(-50%);  top:25%}
.teaser_wrap .inner .title.pc p { margin-top:20px}

.header { position: fixed; z-index: 100; top: 20px; left: 0; width: 100%;}
.header .inner { padding:0 40px; position: relative;}
.header .inner .link_box { position: absolute; top:-1px; right:40px;}
.header .inner .link_box li { display: inline-block;}
.header .inner .link_box li + li { margin-left: 25px;}
.header .inner .link_box li a { display: block; width:30px; height: 30px; background: url(../img/teaser/ic_discord.png) center no-repeat;}
.header .inner .link_box li a.btn_twitter {  width:30px; background-image: url(../img/teaser/ic_twitter.png);}


.footer { position: fixed; z-index: 100; bottom: 20px; left: 0; width: 100%; text-align: center;}
.footer .inner { padding:0 40px; position: relative;}
.footer .inner .link_box { position: absolute;bottom:0; right:40px;}
.footer .inner .link_box li { display: inline-block; position: relative;}
.footer .inner .link_box li + li { margin-left: 10px; padding-left: 10px;}
.footer .inner .link_box li + li::before { content: ""; width:2px; height: 10px; background: #fff; opacity: 0.4; position: absolute; top:50%; transform: translateY(-50%); left:-1px }
.footer .inner .link_box li a { color:#fff; font-weight: 700; font-size: 13px; opacity: 0.8; letter-spacing: 0.5px; line-height: 1em;}
.footer .inner .link_box li a:hover { opacity: 1;}

.footer .logo { position:absolute; bottom:0; left:40px;}
.footer .copyright {color:#fff; font-weight: 500; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; line-height: 1em; }


/* ani */
.teaser{clip-path:circle(0%);-webkit-transition:clip-path 1s cubic-bezier(0.550, 0.085, 0.680, 0.530);-moz-transition:clip-path 1s cubic-bezier(0.550, 0.085, 0.680, 0.530);-ms-transition:clip-path 1s cubic-bezier(0.550, 0.085, 0.680, 0.530);-o-transition:clip-path 1s cubic-bezier(0.550, 0.085, 0.680, 0.530);transition:clip-path 1s cubic-bezier(0.550, 0.085, 0.680, 0.530)}
.teaser.load{clip-path:circle(100%);}

.coverlogo { position: fixed; opacity: 0; position: absolute; top:0; left:0; right:0; width:100%; height:100%;} 
.coverlogo .inner { width:100%; height: 100%; display: table;}
.coverlogo .inner p { display: table-cell; vertical-align: middle;text-align: center;}
.coverlogo .inner p span { display: block; overflow: hidden; }
.coverlogo .inner p img { width:400px}

.coverlogo.load {animation:anilogo1 1.2s linear forwards;-webkit-animation:anilogo1 1.2s linear forwards;}
.coverlogo.load .inner p img {animation: anilogo2 1.4s linear forwards }

@keyframes anilogo1{
    0%{opacity:0; z-index:-1;}
	30%{opacity:1; z-index:200;}
    80%{opacity:1; z-index:200;}
    100%{opacity:0; z-index:-1;}
}

@keyframes anilogo2{
    0%{transform:translate(0,150px);-moz-transform:translate(0,150px);-webkit-transform:translate(0,150px);-ms-transform:translate(0,150px);-o-transform:translate(0,150px); opacity: 0;}
    30%{transform:translate(0,0);-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0); z-index:200;display: block; opacity: 1;}
    75%{transform:translate(0,0);-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0); z-index:200;display: block; opacity: 1;}
    100%{opacity: 0; z-index:-1;display: none;}
}


.teaser_wrap .inner .character { opacity: 0;}

.ani_load .teaser_wrap .inner .character {animation: anich 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;}
@keyframes anich{
    0%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0); opacity: 0; transform: translateY(300px);}
    20%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0); opacity: 0; transform: translateY(300px);}
    100%{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);opacity: 1; transform: translateY(0px);}
}

.teaser_wrap .inner .victor { opacity: 0;}

.ani_load .teaser_wrap .inner .victor{  opacity:0;animation:zoomin1 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;animation-delay: 0.4s}
.ani_load .teaser_wrap .inner .victor img{animation:floating2 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;-webkit-animation:floating2 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;animation-delay: 1.1s }
  
@keyframes zoomin1{
    0%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);opacity: 0; transform: translateY(-300px);}
    15%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);opacity: 0; transform: translateY(-300px);}
    35%{transform:scale(1.1);-moz-transform:scale(1.1);-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);opacity: 1; }
    70%{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);opacity: 1;transform: translateY(0px);}
    85%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);opacity: 1; transform: translateY(0px);}
    100%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);opacity: 1; transform: translateY(0px);}
  }
  @keyframes zoomin2{
    0%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);opacity: 0; transform: translateY(300px);}
    20%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);opacity: 0; transform: translateY(300px);}
    50%{transform:scale(1.1);-moz-transform:scale(1.1);-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);opacity: 1; }
    85%{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);opacity: 1;transform: translateY(0px);}
    100%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);opacity: 1; transform: translateY(0);}
  }

.teaser_wrap .inner .title .logo  { opacity: 0;}
.ani_load .teaser_wrap .inner .title .logo {animation:zoomIn1 0.3s linear forwards,fadeIn1 0.5s linear forwards;transform-origin:50% 50%;-webkit-animation:zoomIn1 0.3s linear forwards,fadeIn1 0.5s linear forwards;animation-delay: 0.7s}

.teaser_wrap .inner .title p img { opacity: 0;}
.ani_load .teaser_wrap .inner .title p img{animation:slideUp2 0.3s linear forwards,fadeIn1 0.3s linear forwards;-webkit-animation:slideUp2 0.3s linear forwards,fadeIn1 0.3s linear forwards;animation-delay: 0.6s} /*animation-delay: 1.1s*/


.header, .footer { opacity: 0;}
.ani_load .header, .ani_load .footer {animation:fadeIn1 0.3s linear forwards;-webkit-animation:fadeIn1 0.3s linear forwards;animation-delay: 1.2s}




@media screen and (max-height:600px){

    .teaser_wrap {  min-height:800px;}

}

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

    .teaser_wrap .inner .victor img {  width:15vw}

}


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

    .teaser_wrap .inner .title .logo { max-width: auto; width:70%}

}


@media screen and (max-width:1024px){
	
    
	.pc { display: none;}
    .mobile { display: block!important}

    .coverlogo .inner p img { width:63%}

    body.bg_dark { position: relative;background: #000; width:100%; overflow-x: hidden;}
    body.bg_dark::before { content: ""; position: absolute; top:0; left:0; width:100%; min-height:100vh; }
    .teaser_wrap {padding-top: 70px; background:#080814 url(../img/teaser/m_bg.jpg) center no-repeat; min-height: auto; background-size: 100% auto;}

    .teaser_wrap .inner { width:100%; position: relative; left:auto; transform: none; top:auto;}

    .teaser_wrap .inner .m_character { margin-top: 60px;position: relative; z-index: 100; }    
    .teaser_wrap .inner .m_character::before {content: ""; position: absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background: url(../img/teaser/m_bg_bot.png) center bottom no-repeat; background-size: 100% auto;}
    .teaser_wrap .inner .character { width:100%; position: relative; left:auto; transform: none; top:auto;}

    .teaser_wrap .inner .title {position: relative;}
    .teaser_wrap .inner .title .logo { width:63%; margin-bottom: 20px;}
    /* .teaser_wrap .inner .title p + p { margin-top:6px} */
    .teaser_wrap .inner .title p img { height:40px}

    .teaser_wrap .inner .victor {left: 4%;top: 22%;}
    .teaser_wrap .inner .victor img {width: 29vw;}
    
    .header .inner { padding:0 20px}
    
    .header .inner .link_box { right: 20px}    

    .footer { position: relative; bottom: auto; left: auto; background: #000;text-align: center; padding:30px 0}    
    .footer .inner .link_box { position: relative; bottom: auto; right: auto; margin:15px auto 0; text-align: center; }
    .footer .inner .link_box li a { font-size: 11px; line-height: 1em; opacity: 0.5;}
    .footer .inner .link_box li + li::before { top:50%; transform: translateY(-50%);}

    .footer .logo { position: relative; bottom: auto; left: auto;}
    .footer .copyright {font-size: 11px; margin-top: 10px;  line-height: 1.4em; opacity: 0.5;}

    /* ani */
    .ani_load .teaser_wrap .inner .title::before {animation: none;}
    .ani_load .teaser_wrap .inner .title .logo {animation:zoomIn1 0.5s linear forwards,fadeIn1 0.5s linear forwards;transform-origin:50% 50%;-webkit-animation:zoomIn1 0.4s linear forwards,fadeIn1 0.5s linear forwards;animation-delay:0.1s}    
    .ani_load .teaser_wrap .inner .title p img{animation-delay: 0.5s}
    /* .ani_load .teaser_wrap .inner .title p + p img{animation-delay: 0.8s} */
    
    .ani_load .teaser_wrap .inner .character {animation-delay: 0.5s }
    .ani_load .teaser_wrap .inner .victor{animation-delay: 1s}
	
}


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

    .teaser_wrap { background-size: cover; padding-top: 100px;}
    .teaser_wrap .inner .m_character { margin-top: 55px;position: relative; padding-bottom: 20px;}    
    .teaser_wrap .inner .m_character::before{display: none;}

    .teaser_wrap .inner .title .logo { width:75%; margin-bottom: 20px;}
    .teaser_wrap .inner .title p + p { margin-top:5px}
    .teaser_wrap .inner .title p img { height:30px}
    .teaser_wrap .inner .victor {left: 4%;top: 27%;width: 29vw;}

    .header .logo img {height:20px}
    .header .inner .link_box li + li { margin-left: 10px;}
    .header .inner .link_box li a { height:20px; background-size: auto 100%;}

    .footer .logo img {width:70%}

}

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


    
    .teaser_wrap .inner .title p img { height:28px}


}



/* SMOKE */
#viewport .smoke {
    position: absolute;
    width: 250px;
    height: 250px;
    background: url('../img/teaser/smoke.png') no-repeat;
    bottom: 150px;
    margin-left: 0px;
    z-index: 99;
}