@charset "utf-8";

@keyframes loading-bg-animation {
  0%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}

@keyframes percent_loaded {
  0% {opacity:0;}
  10% {opacity:1;}
  20% {opacity:0;}
  30% {opacity:1;}
  40% {opacity:0;}
  50% {opacity:1;}
  100% {opacity:0;}
}

@keyframes head-animate {
  0% {transform:scale(1.2);opacity:0;}
  60% {transform:scale(1);opacity:1;}
  70% {filter: brightness(280%);}
  100% {opacity:1;filter: brightness(100%);}
}

@keyframes catch-animate {
  0% {transform:scale(1.4);opacity:0;}
  60% {transform:scale(1);opacity:1;}
  70% {filter: brightness(280%) drop-shadow(0px 0px 30px rgba(255,255,255,0.8));}
  100% {opacity:1;filter: brightness(100%);}
}

@keyframes logo-animate {
  0% {transform:scale(1.4);opacity:0;}
  60% {transform:scale(1);opacity:1;}
  70% {filter: brightness(280%) drop-shadow(0px 0px 30px rgba(255,255,255,0.8));}
  100% {opacity:1;filter: brightness(100%);}
}

@keyframes text-animate {
  0% {transform:translate(0,10%);opacity:0;}
  100% {transform:translate(0,0);opacity:1;}
}

@keyframes fadein {
  0% {transform:translate(0,10%);opacity:0;}
  100% {transform:translate(0,0);opacity:1;}
}

@keyframes fadeinright{
  0% {transform:translate(-10%,0);opacity:0;}
  100% {transform:translate(0,0);opacity:1;}
}


@keyframes light-animate {
  0% {transform:scale(0.3);opacity:0;}
  60% {transform:scale(0.4);opacity:0.7;}
  100% {opacity:0;}
}


@keyframes btn_hover{
  0% {filter: brightness(100%)}
  100% {filter: brightness(140%)}
}

@keyframes btn_out{
  0% {filter: brightness(140%)}
  100% {filter: brightness(100%)}
}

@keyframes chara-animate {
  0% {transform:scale(1.2);opacity:1;filter: brightness(380%) drop-shadow(0px 0px 30px rgba(255,255,255,0.8));}
  60% {transform:scale(1);opacity:1;filter: brightness(180%) drop-shadow(0px 0px 30px rgba(255,255,255,0.8));}
  100% {opacity:1;}
}

@keyframes playbtn-roop{
  0% {transform:translate(0,0%);}
  50% {transform:translate(0,-20%);}
  100% {transform:translate(0,0%);}
}



/*----------------------------------------
	for PC
----------------------------------------*/



@media screen and (min-width: 769px){



  /* Animateion base */

  .head-animate{
    opacity:0;
  }

  .head-animate.animated{
    animation: head-animate 0.6s linear forwards;
  }

  .catch-animate{
    opacity:0;
  }

  .catch-animate.animated{
    animation: catch-animate 0.4s linear forwards;

  }

  .text-animate{
    opacity:0;
  }

  .text-animate.animated{
    animation: text-animate 0.8s linear forwards;
  }

  .catch-base{
    position:relative;
  }

  .light-front{
    position:absolute;
    right:10%;
    top:-230%;
    width:60%;
    z-index: 10;
    opacity:0;
    /* transform-origin: center left; */
  }

  .light-front.animated{
    animation: light-animate 0.4s linear forwards;
    animation-delay: 0.1s;
  }

  .text-animate.animated{
    animation: text-animate 0.8s linear forwards;
  }

.sp{display:none;}

 /* loading */



  #loading-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#040925;
    height:100vh;
    z-index:100;
  }

  #loading-bg.animated{
    animation:loading-bg-animation 0.5s ease-in forwards;
    pointer-events: none;
  }


  #percent.animated{
    animation: percent_loaded 0.8s linear forwards;
  }



  #wrapper{
    height:100vh;
    overflow: hidden;
    width:100%;
    min-width:1200px;
    background:#7e7772;
  }

  #wrapper.loaded{
    height:auto;
    overflow: hidden;
  }

  .bg{
    width:100%;
    background-size:100%;
    z-index:0;
    position:fixed;
    min-width:1200px;
  }


  /* MAIN VISUAL */

  .visual-news{
    position:absolute;
    top:0;
    left:0;
    z-index: 20;
    background-color:rgba(255,255,255,0.8);
    width:100%;
    height:56px;
    display: flex;
    overflow: hidden;
    min-width: 1200px;
  }

  .visual-news__head{
    position:relative;
    background-color:#293360;
    width:102px;
    height:100%;
  }

  .visual-news__head img{
    position:absolute;
    display: block;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }

  .visual-news-articles{
    width:calc(100% - 200px);
  }

  .visual-news-slider{
    height:56px;
  }

  .visual-news-slider .slider-item{
    color:#073c77;
    height:42px;
    padding:14px 25px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
  }

  .visual-news-slider .slider-item .date{
    padding-right:10px;
    color:#d11704;
  }

  .visual-news-slider .slider-item a{
    color:#073c77;
  }

  .visual-news-slider .slider-item{
    /* width:calc(100vw - 200px)!important; */
  }

  .visual-news .slick-next{
    width:17px!important;
    height:35px!important;
    background:url(../img/top/icon-d-min.png)!important;
    right:-80px!important;
    margin-left:0px;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
    transform:translate(0,-50%) rotate(180deg);
  }

  .visual-news .slick-next:before{
    content:''!important;
    display:none!important;
  }

  .visual-news .slick-prev{
    width:17px!important;
    height:35px!important;
    background:url(../img/top/icon-d-min.png)!important;
    margin-left:-0px!important;
    right:-40px!important;
    left:auto!important;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
  }

  .visual-news .slick-prev:before{
    content:''!important;
    display:none!important;
  }

  .visual-news .slick-next:hover,.slick-prev:hover{
   animation:btn_hover 0.5s ease-in forwards;
  }


  .main-visual{
    position:relative;
  }

  .visual-chara{
    position:absolute;
    top:0px;
    right:0;
    z-index:1;
    width:100%;
    transition:transform 1.4s;
    transform:scale(1.4);
  }

  .visual-chara-img{
    position:absolute;
    top:0px;
    right:0;
    z-index:0;
    width:100%;
  }

  .visual-chara-eff{
    position:absolute;
    top:0px;
    right:0;
    z-index:1;
    width:100%;
    transition:opacity 2s;
  }

  .visual-bg{
    position:relative;
    z-index:0;
    width:100%;
    transition:transform 1.2s;
    transform:scale(1.4);
  }

  .visual-chara.animated{
    transform:scale(1);
  }

  .visual-chara-eff.animated{
    opacity:0;
  }


  .visual-bg.animated{
    transform:scale(1);
  }

 .visual-catch{
    width:94%;
    position:absolute;
    top:69%;
    left:3%;
    z-index:10;
    transition:all 0.7s;
    transform:scale(1.3) translate(0,30%);
    opacity:0;
  }

  .visual-catch.animated{
    transform:scale(1) translate(0,0);
    opacity:1;
  }

  .visual-logo{
    width:30%;
    position:absolute;
    top:7%;
    left:2.5%;
    z-index:10;
    opacity:0;
  }

  .visual-console{
    width:22%;
    position:absolute;
    top:37%;
    left:6.5%;
    z-index:10;
    opacity:0;
  }

  .visual-bnr{
    width:26%;
    position:absolute;
    top:51%;
    left:6%;
    z-index:10;
    opacity:0;
  }

  .visual-movie{
    width:24%;
    position:absolute;
    top:50%;
    left:5.5%;
    z-index:10;
    opacity:0;
  }

  .visual-movie img{
    animation:btn_out 0.3s ease-in forwards;
  }

  .visual-movie:hover img{
    animation:btn_hover 0.5s ease-in forwards;
  }

  .visual-movie img{
    display:block;
    width:100%;
  }

  .visual-logo.animated{
    animation:logo-animate 0.7s ease-in forwards;
  }
  .visual-console.animated{
    animation:logo-animate 0.7s ease-in forwards;
  }

  .visual-bnr.animated{
    animation:fadein 0.5s ease-in forwards;
  }

  .visual-movie.animated{
    animation:fadein 0.5s ease-in forwards;
  }


  .visual-playbtn{
    display:block;
    position:absolute;
    top:5%;right:0;
    width:18%;
    z-index: 10;
    transition:all 0.4s;
    animation:btn_out 0.5s ease-in forwards;
    opacity:0;
  }

  .visual-playbtn:hover{
    animation:btn_hover 0.5s ease-in forwards;
  }

  .visual-playbtn.animated{
    animation:catch-animate 0.5s ease-in forwards;
  }

  .visual-playbtn img{
    display:block;
    width:100%;
  }

  .visual-playbtn:after{
    content:'';
    display:block;
    position:absolute;
    background:url('../img/top/visual-playbtn-direct2.png');
    background-repeat:no-repeat;
    width:24%;padding-top:15%;
    background-size:100%;
    bottom:15%;
    left:38%;
    animation:playbtn-roop 0.9s ease-in forwards infinite;
  }

  .visual-banner{
    position:absolute;
    justify-content: center;
    top:8%;
    max-width:1200px;
    width: 18vw;
    left: 88%;
    transform:translate(-50%,0);
    z-index: 50;
    opacity:0;
    transition:all 0.6s;
  }

  .visual-banner.animated{
    opacity:1;
  }

  .visual-banner .visual-banner__item{
    margin:0 1.6%;
    width:100%;
  }
	.visual-banner .visual-banner__item + .visual-banner__item{margin-top:3%;}	

  .visual-banner .visual-banner__item img{
    display: block;
    width:100%;
    animation:btn_out 0.5s ease-in forwards;
  }

  .visual-banner .visual-banner__item img:hover{
    display: block;
    width:100%;
  }

  .visual-banner .visual-banner__item a{
    display:block;
  }
	
	ul.kv-btn{ width: 50%;}
	ul.kv-btn li{width: 54%; top: 44%; left:2.5%; position: absolute;}
	ul.kv-btn li + li{width: 45%; top: 44%; left:16%; position: absolute;}


  /* intro */

  .section-intro{
    position:relative;
    z-index:10;
  }

  .intro-head{
    display:block;
    width:623px;
    margin:0 auto 20px;
  }

  .intro-catch{
    display:block;
    width:1083px;
    margin:0 auto 40px;
  }

  .intro-text{
    display:block;
    width:867px;
    margin:0 auto 40px;
  }

  .intro-slider{
    opacity:0;
    position:relative;
    z-index: 30;
  }

  .intro-slider.animated{
    animation: fadein 0.8s linear forwards;
  }

  .intro-slider .slider-item{
    transform:skew(-10deg);
    overflow: hidden;
    transform-origin: bottom left;
    width:760px;
    margin:20px 15px 20px;
    border: 2px solid #acac86;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
    animation:btn_out 0.3s ease-in forwards;
  }

  .intro-slider .slider-item:hover{
    animation:btn_hover 0.3s ease-in forwards;
  }

  .intro-slider .slider-item img{
    transform:skew(10deg);
    transform-origin: bottom left;
    width:110%;
  }


  .intro-slider .slick-next{
    width:108px!important;
    height:173px!important;
    background:url(../img/top/icon-d-r.png)!important;
    right:auto!important;
    left:50%;
    margin-left:360px;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
  }

  .intro-slider .slick-next:before{
    content:''!important;
    display:none!important;
  }

  .intro-slider .slick-prev{
    width:108px!important;
    height:173px!important;
    background:url(../img/top/icon-d-l.png)!important;
    left:50%!important;
    margin-left:-468px!important;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
  }

  .intro-slider .slick-prev:before{
    content:''!important;
    display:none!important;
  }

  .intro-slider .slick-next:hover,.slick-prev:hover{
   animation:btn_hover 0.5s ease-in forwards;
 }


  /* movie */

  .section-movie{
    margin:150px 0 0;
  }

  .section-movie .movie-head{
    display:block;
    width:623px;
    margin:0 auto 20px;
  }

  .section-movie .movie-slider{
    opacity:0;
  }

  .section-movie .movie-slider.animated{
    animation: fadein 0.8s linear forwards;
  }

  .section-movie .slider-item{
    position:relative;
    transform:skew(0deg);
    overflow: hidden;
    transform-origin: bottom left;
    width:760px;
    margin:20px 15px 20px;
    border: 2px solid #acac86;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
    animation:btn_out 0.3s ease-in forwards;
  }

  .section-movie .slider-item:hover{
    animation:btn_hover 0.2s ease-in forwards;
  }

  .section-movie .slider-item img{
    transform:skew(0deg);
    transform-origin: bottom left;
    width:100%;
  }

  .section-movie .slider-item.icon-new:before{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:112px;
    height:112px;
    background-image:url('../img/common/icon-new.png');
    z-index:2;
  }

  .section-movie .slider-item:after{
    content:'';
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:165px;
    height:165px;
    background-image:url('../img/common/icon-movie-play.png');
    background-size:100%;
    z-index:2;
    transition:all 0.7s;
    pointer-events: none;
  }

  .section-movie .slider-item:hover:after{
    transform:translate(-50%,-50%) scale(1.2);
  }

  .section-movie .slick-next{
    width:108px!important;
    height:173px!important;
    background:url(../img/top/icon-d-r.png)!important;
    right:auto!important;
    left:50%;
    margin-left:360px;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
  }

  .section-movie .slick-next:before{
    content:''!important;
    display:none!important;
  }

  .section-movie .slick-prev{
    width:108px!important;
    height:173px!important;
    background:url(../img/top/icon-d-l.png)!important;
    left:50%!important;
    margin-left:-468px!important;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
  }

  .section-movie .slick-prev:before{
    content:''!important;
    display:none!important;
  }

  .section-movie .slick-next:hover,.slick-prev:hover{
   animation:btn_hover 0.5s ease-in forwards;
 }

  .section-movie .btn-movie{
    position:relative;
    display: block;
    margin:2% auto 0;
  }


  /* po */

  .section-po{
    position:relative;
    z-index:10;
    max-width: 1300px;
    margin:150px auto 0;
  }

  .po-head{
    display:block;
    margin:0 auto 20px;
    position:relative;
    z-index: 10;
  }

  .po-btn-list{
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    margin:0 auto 3%;
    width:95%;
    opacity:0;
  }

  .po-btn-list.animated{
    animation: fadein 0.8s linear forwards;
  }

  .po-btn-list__btn{
    width:25%;
    margin-bottom:-2%;
    animation:btn_out 0.3s ease-in forwards;
  }

  .po-btn-list__btn:hover{
    animation:btn_hover 0.5s ease-in forwards;
  }

  .po-btn-list__btn a img{
    display:block;
    width:100%;
  }

  .po-catch{
    display:block;
    margin:0 auto 30px;
    position:relative;
    z-index: 10;
  }

  .po-list{
    max-width:90%;
    width:1300px;
    position:relative;
    z-index: 10;
    margin:0 auto;
  }

  .po-list__inner{
    position:relative;
    padding-bottom:95.5%;
    margin:0 auto;
    background:url('../img/top/po-list-base.png');
    background-size:100%;
    box-sizing:border-box;
    width:100%;
    opacity:0;
  }

  .po-list-itemwrap{
    position:absolute;
    top:6%;
    left:7%;
    width:84%;
  }

  .po-list__inner.animated{
    animation: fadein 0.8s linear forwards;
  }

  .po-chara01{
    position:absolute;
    top:11%;
    right:-26%;
    width:86%;
  }

  .po-chara02{
    position:absolute;
    bottom:-13%;
    left:-13%;
    width:30%;
  }

  .po-list-num{
    position: relative;
    display:block;
    width:100%;
    opacity:0;
    margin-bottom:1%;
  }

  .po-list__inner li.animated:nth-child(1) .po-list-num{
    animation: fadeinright 0.5s ease 0.2s forwards;
  }

  .po-list__inner li.animated:nth-child(2) .po-list-num{
    animation: fadeinright 0.5s ease 0.4s forwards;
  }

  .po-list__inner li.animated:nth-child(3) .po-list-num{
    animation: fadeinright 0.5s ease 0.6s forwards;
  }

  .po-list__inner li.animated:nth-child(4) .po-list-num{
    animation: fadeinright 0.5s ease 0.8s forwards;
  }

  .po-list__inner li.animated:nth-child(5) .po-list-num{
    animation: fadeinright 0.5s ease 1s forwards;
  }

  .po-list__inner li.animated:nth-child(6) .po-list-num{
    animation: fadeinright 0.5s ease 1.2s forwards;
  }

  .po-list__inner li.animated:nth-child(7) .po-list-num{
    animation: fadeinright 0.5s ease 1.4s forwards;
  }
  .po-list-itemwrap li{
    position:relative;
  }

  .po-list li.achieve:before{
    content:'';
    position:absolute;
    bottom:3%;
    left:15%;
    background-image:url('../img/top/po-icon-achieve.png');
    background-size:100%;
    width:14%;
    padding-top:15%;
    z-index: 100;
    transition:all 0.5;
    opacity:0;
  }

  .po-list__inner li.achieve.animated:nth-child(1):before{
    animation: head-animate 0.5s ease 0.4s forwards;
  }

  .po-list__inner li.achieve.animated:nth-child(2):before{
    animation: head-animate 0.5s ease 0.6s forwards;
  }

  .po-list__inner li.achieve.animated:nth-child(3):before{
    animation: head-animate 0.5s ease 0.8s forwards;
  }

  .po-list__inner li.achieve.animated:nth-child(4):before{
    animation: head-animate 0.5s ease 1s forwards;
  }

  .po-list__inner li.achieve.animated:nth-child(5):before{
    animation: head-animate 0.5s ease 1.2s forwards;
  }

  .po-image-tama{
    position:absolute;
    top:25%;
    right:-3%;
    width:15%;
  }

  .po-image-coin{
    position:absolute;
    top:72%;
    right:1%;
    width:10%;
  }


  /* cb */

  .cb-agreement__inner{
    width:986px;
    margin:50px auto;
    background-color:rgba(0,30,115,0.7);
    padding:50px 40px;
    box-sizing:border-box;
    position:relative;
    z-index: 10;
	  border: 2px solid #ae9c56;
  }

  .cb-agreement__inner p{padding: 0; font-size: 1.2em; color:#fed733;}
	.cb-agreement__inner p span{
    font-size: 0.7em;
    color: #fff;}
  .cb-agreement__inner a{color:#fff; text-decoration: underline;}
  .cb-agreement__inner ul{padding-bottom: 1em; }
  .cb-agreement__inner strong{color:#ff3535;}

  ul.disc li{
    padding-left:1em;
    text-indent: -1em;
  }

  .cb-agreement__inner ul li{font-size: 0.9em; margin-left: 1em; text-indent: -1em;}

  ul li a{color:#fff; text-decoration: underline;}

  .cb-btn{
    display:block;
    width:570px;
    margin:-87px auto 0;
    position: relative;
    z-index: 20;
    animation:btn_out 0.5s ease-in forwards;
  }

  .cb-btn:hover{
    animation:btn_hover 0.5s ease-in forwards;
  }

  .cb-chara01,.cb-chara02,.cb-chara03{
    position:absolute;
    opacity:0;
  }

  .cb-chara01{
    top:80px;
    left:-790px;
    z-index: 3;
  }

  .cb-chara01.animated{
    animation: chara-animate 0.5s linear forwards;
    animation-delay: 0.6s;
  }

  .cb-chara02.animated{
    animation: chara-animate 0.5s linear forwards;
    animation-delay: 0.7s;
  }

  .cb-chara03.animated{
    animation: chara-animate 0.5s linear forwards;
    animation-delay: 0.9s;
  }

  .cb-chara02{
    top:-120px;
    left:-300px;
    z-index: 2;
  }

  .cb-chara03{
    top:-150px;
    right:-630px;
    z-index: 1;
  }


  /* ot */

  .section-ot{
    position:relative;
    z-index:10;
    margin-top:250px;
  }

  .ot-head{
    display:block;
    width:623px;
    margin:0 auto -60px;
    z-index: 20;
    position:relative;
  }

  .ot-window{
    width:550px;
    height:860px;
    margin:0 auto 0;
    position:relative;
    padding:10px;
  }

  .ot-window-outline{
    box-sizing: border-box;
    border:3px solid #fff;
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
  }

  .ot-btn{
    display:block;
    width:634px;
    margin:-75px auto 0;
    position:relative;
    z-index:10;
    animation:btn_out 0.5s ease-in forwards;
  }

  .ot-btn:hover{
  animation:btn_hover 0.5s ease-in forwards;
  }

  .window-twitter{
    background:#fff;
    height:100%;
    position:relative;
  }

  .window-twitter iframe{
    position:absolute!important;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }

  .section-ot__inner{
    width:1200px;
    display: flex;
    margin:0 auto;
  }

  .area-twitter{
    width:630px;
    margin-left:-20px;
  }

  .area-image{
    margin-top:-40px;

  }


  /* banner */

  .section-banner{
    position:relative;
    z-index:10;
    padding:60px 0 120px;
  }

  .banner-list{
    display:flex;
    justify-content: center;
  }

  .banner-list .bnr{
    margin:0 10px;
    width:600px;
    animation:btn_out 0.5s ease-in forwards;
  }

  .banner-list .bnr:hover{
    animation:btn_hover 0.5s ease-in forwards;
  }

  /* footer */

  .footer{
    height:110px;
    overflow: hidden;
    position:relative;
  }

  .footer-sns{
    position:absolute;
    top:20px;
    left:20px;
    display: flex;
    align-items: center;
  }

  .footer-sns li{
    margin:10px;
	z-index: 10;
  }

  .footer-logo{
    position:absolute;
    top:5px;
    right:15px;
    display: flex;
    align-items: center;
  }

  .footer-logo li{
    margin:10px;
  }

  .footer-rights{
    font-size:11px;
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    z-index:0;
    text-align: center;
    transform: translate(0,-50%);
  }


}



/*----------------------------------------
	for SP
----------------------------------------*/


@media screen and (max-width: 768px){
 /* loading */



  /* Animateion base */

  .head-animate{
    opacity:0;
  }

  .head-animate.animated{
    animation: head-animate 0.6s linear forwards;
  }

  .catch-animate{
    opacity:0;
  }

  .catch-animate.animated{
    animation: catch-animate 0.4s linear forwards;

  }

  .text-animate{
    opacity:0;
  }

  .text-animate.animated{
    animation: text-animate 0.8s linear forwards;
  }

  .catch-base{
    position:relative;
  }

  .light-front{
    position:absolute;
    right:10%;
    top:-230%;
    width:60%;
    z-index: 10;
    opacity:0;
    /* transform-origin: center left; */
  }

  .light-front.animated{
    animation: light-animate 0.4s linear forwards;
    animation-delay: 0.1s;
  }

  .text-animate.animated{
    animation: text-animate 0.8s linear forwards;
  }



 /* loading */



  #loading-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#040925;
    height:100vh;
    z-index:100;
  }

  #loading-bg.animated{
    animation:loading-bg-animation 0.5s ease-in forwards;
    pointer-events: none;
  }


  #percent.animated{
    animation: percent_loaded 0.8s linear forwards;
  }



  #wrapper{
    height:100vh;
    overflow: hidden;
    width:100%;
    background:#7e7772;
  }

  #wrapper.loaded{
    height:auto;
    overflow: hidden;
  }

  .bg{
    width:100%;
    background-size:100%;
    z-index:0;
    position:fixed;
  }

  /* MAIN VISUAL */

  .visual-news{
    position:absolute;
    top:0;
    left:0;
    z-index: 20;
    background-color:rgba(255,255,255,0.8);
    width:100%;
    height:13vw;
    display: flex;
    overflow: hidden;
  }

  .visual-news__head{
    position:relative;
    background-color:#293360;
    width:12%;
    height:100%;
  }

  .visual-news__head img{
    position:absolute;
    display: block;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:50%;
  }

  .visual-news-articles{
    width: 75%;
  }

  .visual-news-slider{
    height:100%;
  }

  .visual-news-slider .slider-item{
    color:#073c77;
    padding:2vw 3vw 0;
    overflow:hidden;
    font-size:3vw;
    line-height: 1.5;
    height:3.4em;
    box-sizing: border-box;
  }

  .visual-news-slider .slider-item .date{
    padding-right:10px;
    color:#d11704;
  }

  .visual-news-slider .slider-item a{
    color:#073c77;
  }

  .visual-news-slider .slider-item{
    /* width:calc(100vw - 200px)!important; */
  }

  .visual-news .slick-next{
    width:3vw!important;
    height:6vw!important;
    background:url(../img/top/icon-d-min.png)!important;
    background-size:100%!important;
    right:-10vw!important;
    margin-left:-20vw!important;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
    transform:translate(0,-50%) rotate(180deg);
  }

  .visual-news .slick-next:before{
    content:''!important;
    display:none!important;
  }

  .visual-news .slick-prev{
    width:3vw!important;
    height:6vw!important;
    background:url(../img/top/icon-d-min.png)!important;
    background-size:100%!important;
    margin-left:-0px!important;
    right:-4vw!important;
    left:auto!important;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
  }

  .visual-news .slick-prev:before{
    content:''!important;
    display:none!important;
  }

  .visual-news .slick-next:hover,.slick-prev:hover{
   animation:btn_hover 0.5s ease-in forwards;
  }


  .main-visual{
    position:relative;
  }


  .visual-chara{
    position:absolute;
    top:0px;
    right:0;
    z-index:1;
    width:100%;
    transition:transform 1.7s;
    transform:scale(1.4);
  }

  .visual-chara-img{
    position:absolute;
    top:0px;
    right:0;
    z-index:0;
    width:100%;
  }

  .visual-bg{
    position:relative;
    z-index:0;
    width:100%;
    transition:transform 1.2s;
    transform:scale(1.4);
  }

  .visual-chara.animated{
    transform:scale(1);
  }


  .visual-bg.animated{
    transform:scale(1);
  }


  .visual-catch{
    width:28%;
    position:absolute;
    top:5.5%;
    left:2%;
    z-index:10;
    transition:all 0.7s;
    transform:scale(1.3) translate(0,30%);
    opacity:0;
  }

  .visual-catch.animated{
    transform:scale(1) translate(0,0);
    opacity:1;
  }

  .visual-info-sp{
    position:relative;
    margin-top:-220%;
    margin-bottom:10%;
    z-index:10;
    width:100%;
  }

  .visual-logo{
    width:68%;
    position:relative;
    opacity:0;
    margin:0 auto;
    display:block;
  }

  .visual-console{
    width:65%;
    position:relative;
    opacity:0;
    margin:-5vw auto 0;
    display:block;
  }

  .visual-bnr{
    width:80%;
    position:relative;
    opacity:0;
    margin:5% auto 0;
    display:block;
  }

  .visual-movie{
    width:85%;
    position:relative;
    margin:20% auto 0;
    opacity:0;
    display:block;
  }

  .visual-movie img{
    display:block;
    width:100%;
  }

  .visual-movie.animated{
    opacity:1;
  }


  .visual-logo.animated{
    animation:logo-animate 0.7s ease-in forwards;
  }
  .visual-console.animated{
    animation:logo-animate 0.7s ease-in forwards;
  }

  .visual-bnr.animated{
    animation:fadein 0.5s ease-in forwards;
  }



  .visual-playbtn{
    display:block;
    position:absolute;
    top:4%;right:0;
    width:33%;
    z-index: 10;
    transition:all 0.4s;
    animation:btn_out 0.5s ease-in forwards;
    opacity:0;
  }

  .visual-playbtn:hover{
    animation:btn_hover 0.5s ease-in forwards;
  }

  .visual-playbtn.animated{
    animation:catch-animate 0.5s ease-in forwards;
  }

  .visual-playbtn img{
    display:block;
    width:100%;
  }

  .visual-playbtn:after{
    content:'';
    display:block;
    position:absolute;
    background:url('../img/top/visual-playbtn-direct2.png');
    background-repeat:no-repeat;
    width:40%;padding-top:20%;
    background-size:100%;
    bottom:17%;
    left:30%;
    animation:playbtn-roop 0.9s ease-in forwards infinite;
  }

  .visual-banner{
    width:80%;
    z-index: 50;
    opacity:0;
    transition:all 0.6s;
    margin:5vw auto 6vw;
  }

  .visual-banner.animated{
    opacity:1;
  }

  .visual-banner .visual-banner__item{
    margin-bottom:4vw;
  }

  .visual-banner .visual-banner__item:last-child{
    margin-bottom:0;
  }

  .visual-banner .visual-banner__item img{
    display: block;
    width:100%;
  }


  .visual-banner .visual-banner__item a{
    display:block;
  }

	ul.kv-btn{ width: 50%;}
	ul.kv-btn li{width: 66%; top: 81vw; left:-3%; position: absolute;}
	ul.kv-btn li + li{width: 55%; top: 81vw; left:45%; position: absolute;}	
	



  /* intro */

  .section-intro{
    position:relative;
    z-index:10;
  }

  .intro-head{
    display:block;
    width:86%;
    margin:0 auto 4vw;
  }

  .intro-catch{
    display:block;
    width:92%;
    margin:0 auto 4vw;
  }

  .intro-text{
    display:block;
    width:92%;
    margin:0 auto 8vw;
  }

  .intro-slider{
    opacity:0;
    position:relative;
    z-index: 30;
  }

  .intro-slider.animated{
    animation: fadein 0.8s linear forwards;
  }

  .section-intro .slider-item{
    transform:skew(-10deg);
    overflow: hidden;
    transform-origin: bottom left;
    width:80vw;
    margin:0vw 2vw 0;
    border: 1px solid #12aff3;
    box-shadow:0 0 10px rgba(76, 212, 249, 0.5);
    animation:btn_out 0.3s ease-in forwards;
  }

  .section-intro .slider-item:hover{
    animation:btn_hover 0.3s ease-in forwards;
  }

  .section-intro .slider-item img{
    transform:skew(10deg);
    transform-origin: bottom left;
    width:110%;
  }


  .section-intro .slick-next{
    width:15vw!important;
    height:24vw!important;
    background:url(../img/top/icon-d-r.png)!important;
    background-size:100%!important;
    right:auto!important;
    left:50%;
    margin-left:37vw;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
  }

  .section-intro .slick-next:before{
    content:''!important;
    display:none!important;
  }

  .section-intro .slick-prev{
    width:15vw!important;
    height:24vw!important;
    background:url(../img/top/icon-d-l.png)!important;
    background-size:100%!important;
    left:50%!important;
    margin-left:-52vw!important;
    z-index: 100;
    animation:btn_out 0.5s ease-in forwards;
  }

  .section-intro .slick-prev:before{
    content:''!important;
    display:none!important;
  }

  .section-intro .slick-next:hover,.slick-prev:hover{
   animation:btn_hover 0.5s ease-in forwards;
 }

 /* movie */

 .section-movie{
   margin:20vw 0 0;
 }

 .section-movie .movie-head{
   display:block;
   width:86%;
   margin:0 auto 2vw;
 }

 .section-movie .movie-slider{
   opacity:0;
 }

 .section-movie .movie-slider.animated{
   animation: fadein 0.8s linear forwards;
 }

 .section-movie .slider-item{
   position:relative;
   transform:skew(0deg);
   overflow: hidden;
   transform-origin: bottom left;
   width:80vw;
   margin:4vw 2vw 4vw;
   border: 2px solid #acac86;
   box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
   animation:btn_out 0.3s ease-in forwards;
 }

 .section-movie .slider-item:hover{
   animation:btn_hover 0.2s ease-in forwards;
 }

 .section-movie .slider-item img{
   transform:skew(0deg);
   transform-origin: bottom left;
   width:100%;
 }

 .section-movie .slider-item.icon-new:before{
   content:'';
   display:block;
   position:absolute;
   top:0;
   left:0;
   width:15vw;
   height:15vw;
   background-image:url('../img/common/icon-new.png');
   z-index:2;
   background-size:100%;
 }

 .section-movie .slider-item:after{
   content:'';
   display:block;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
   width:28vw;
   height:28vw;
   background-image:url('../img/common/icon-movie-play.png');
   background-size:100%;
   z-index:2;
   transition:all 0.7s;
   pointer-events: none;
 }


 .section-movie .btn-movie{
   position:relative;
   display: block;
   margin:2% auto 0;
   width:84vw;
 }

 /* po */

 .section-po{
   position:relative;
   z-index:10;
   max-width: 1300px;
   margin:15vw auto 0;
 }

 .po-head{
   display:block;
   margin:0 auto 2vw;
   position:relative;
   z-index: 10;
   width:80vw;
 }

 .po-btn-list{
   display: flex;
justify-content: center;
   flex-wrap: wrap;
   margin:0 auto 3%;
   width:94vw;
   opacity:0;
 }

 .po-btn-list.animated{
   animation: fadein 0.8s linear forwards;
 }

 .po-btn-list__btn{
   width:51%;
   margin-bottom:-4%;
   animation:btn_out 0.3s ease-in forwards;
 }

 .po-btn-list__btn:nth-child(2n+2){
   margin-left:-2%;
 }


 .po-btn-list__btn a img{
   display:block;
   width:100%;
 }

 .po-catch{
   display:block;
   margin:2vw auto 2vw;
   width:85vw;
   position:relative;
   z-index: 10;
 }

 .po-list{
   max-width:90%;
   width:1300px;
   position:relative;
   z-index: 10;
   margin:0 auto;
 }

 .po-list__inner{
   position:relative;
   padding-bottom:95.5%;
   margin:0 auto;
   background:url('../img/top/po-list-base.png');
   background-size:100%;
   box-sizing:border-box;
   width:100%;
   opacity:0;
 }

 .po-list-itemwrap{
   position:absolute;
   top:7%;
   left:4%;
   width:90%;
 }

 .po-list__inner.animated{
   animation: fadein 0.8s linear forwards;
 }

 .po-chara01{
   position:absolute;
   top:-11%;
   right:-40%;
   width:86%;
 }

 .po-chara02{
   position:absolute;
   bottom:-20%;
   left:-13%;
   width:30%;
 }

 .po-list-num{
   display:block;
   width:100%;
   opacity:0;
 }

 .po-list__inner li.animated:nth-child(1) .po-list-num{
   animation: fadeinright 0.5s ease 0.2s forwards;
 }

 .po-list__inner li.animated:nth-child(2) .po-list-num{
   animation: fadeinright 0.5s ease 0.4s forwards;
 }

 .po-list__inner li.animated:nth-child(3) .po-list-num{
   animation: fadeinright 0.5s ease 0.6s forwards;
 }

 .po-list__inner li.animated:nth-child(4) .po-list-num{
   animation: fadeinright 0.5s ease 0.8s forwards;
 }

 .po-list__inner li.animated:nth-child(5) .po-list-num{
   animation: fadeinright 0.5s ease 1s forwards;
 }

 .po-list__inner li.animated:nth-child(6) .po-list-num{
   animation: fadeinright 0.5s ease 1.2s forwards;
 }

 .po-list__inner li.animated:nth-child(7) .po-list-num{
   animation: fadeinright 0.5s ease 1.4s forwards;
 }

 .po-list-itemwrap li{
   position:relative;
 }

 .po-list li.achieve:before{
   content:'';
   position:absolute;
   bottom:5%;
   left:16%;
   background-image:url('../img/top/po-icon-achieve.png');
   background-size:100%;
   background-repeat:no-repeat;
   width:13%;
   padding-top:13%;
   z-index: 100;
   transition:all 0.5;
   opacity:0;
 }

 .po-list__inner li.achieve.animated:nth-child(1):before{
   animation: head-animate 0.5s ease 0.4s forwards;
 }

 .po-list__inner li.achieve.animated:nth-child(2):before{
   animation: head-animate 0.5s ease 0.6s forwards;
 }

 .po-list__inner li.achieve.animated:nth-child(3):before{
   animation: head-animate 0.5s ease 0.8s forwards;
 }

 .po-list__inner li.achieve.animated:nth-child(4):before{
   animation: head-animate 0.5s ease 1s forwards;
 }

 .po-list__inner li.achieve.animated:nth-child(5):before{
   animation: head-animate 0.5s ease 1.2s forwards;
 }

 .po-image-tama{
   position:absolute;
   top:2%;
   right:-7%;
   width:21%;
 }

 .po-image-coin{
   position:absolute;
   top:70%;
   right:-4%;
   width:20%;
 }


  /* ot */

  .section-ot{
    position:relative;
    z-index:10;
    margin-top:15vw;
  }

  .ot-head{
    display:block;
    width:86%;
    margin:0 auto -5vw;
    z-index: 20;
    position:relative;
  }

  .ot-window{
    width:90%;
    height:90vw;
    margin:0 auto 0;
    position:relative;
    padding:5px;
  }

  .ot-window-outline{
    box-sizing: border-box;
    border:2px solid #fff;
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
  }

  .ot-btn{
    display:block;
    width:80%;
    margin:-9% auto 0;
    position:relative;
    z-index:10;
    animation:btn_out 0.5s ease-in forwards;
  }

  .ot-btn img{
    display:block;
    width:100%;
  }

  .ot-btn:hover{
  animation:btn_hover 0.5s ease-in forwards;
  }

  .window-twitter{
    background:#fff;
    height:100%;
    position:relative;
  }

  .window-twitter iframe{
    position:absolute!important;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }

  .section-ot__inner{
  }

  .area-twitter{
  }

  .area-image img{
    width:94%;
    display:block;
    margin:0 auto;
  }

  .twitter-timeline{
    width:80vw!important;
    height:76vw!important;
  }
	  .cb-agreement__inner{
    width:90vw;
    margin:3vw auto;
    background-color:rgba(0,30,115,0.7);
    padding:3vw 4vw;
    box-sizing:border-box;
    position:relative;
    z-index: 10;
	  border: 2px solid #ae9c56;
  }

	  .cb-agreement__inner ul li{font-size: 0.9em; margin-left: 1em; text-indent: -1em;}

	.cb-agreement__inner p {
    padding: 0;
    font-size: 1.2em;
    color: #fed733;
}
		.cb-agreement__inner p span{
    font-size: 0.7em;
    color: #fff;
}
  .cb-agreement__inner a{color:#fff; text-decoration: underline;}

  /* banner */

  .section-banner{
    position:relative;
    z-index:10;
    padding:5vw 0 5vw;
    width:90%;
    margin:0 auto 0;
  }

  .banner-list{
  }

  .banner-list .bnr{
    display:block;
    margin:0 0 4vw;
    width:100%;
    animation:btn_out 0.5s ease-in forwards;
  }

  .banner-list .list-bnr:last-child .bnr{
    margin-bottom:0;
  }

  .banner-list .bnr:hover{
    animation:btn_hover 0.5s ease-in forwards;
  }

  /* footer */

  .footer{
    overflow: hidden;
    position:relative;
    background-color:#000;
    padding:5vw 0;
  }

  .footer-sns{
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0vw 0 0vw;
  }

  .footer-sns li{
    display: block;
    margin:0 2vw;
  }

  .footer-logo{
    position:relative;
    display: flex;
    justify-content: center;
    width:100%;
    align-items: center;
  }

  .footer-logo li{
    margin:2vw;
  }

  .footer-logo li:nth-child(3) img{
    height:10vw;
  }

  .footer-logo li:nth-child(1) img{
    height:7vw;
  }

  .footer-logo li:nth-child(2) img{
    height:12vw;
  }

  .footer-rights{
    font-size:11px;
    position:relative;
    width:100%;
    z-index:0;
    text-align: center;
  }




}