@charset "utf-8";




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


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

  .topmovie{width:100%;height:615px;background:#000 url('../img/intro/topmovie-bg.jpg');position:relative;background-position: center;position:relative;}
  .topmovie__headline{position:absolute;bottom:100px;left:50%;transform:translate(-50%,0);}
  .topmovie__btn{position:absolute;bottom:200px;left:50%;transform:translateX(-50%) scale(0.8);opacity:0.6;transition:all 0.6s;transform-origin:center;}
  .noload .topmovie__btn{transform:scale(1) translateX(-50%);}

  .topmovie:before{content:'';width:100%;height:100%;top:0;left:0;border:30px solid rgba(255,255,255,0.1);position:absolute;box-sizing: border-box;transition: all 0.5s}

  .topmovie:hover .topmovie__btn{opacity:1;transform:translateX(-50%) scale(1);}
  .topmovie:hover:before{content:'';width:100%;height:100%;top:0;left:0;border:70px solid rgba(255,255,255,0.05);position:absolute;box-sizing: border-box;}



  .content-base{width:100%;height:3956px;position:relative;}
  .content-base .head-over{position:absolute;top:-75px;left:50%;transform:translate(-50%,0);}



  .content-base .headline_00{background-color:#6f0b0b;width:55%;position:absolute;left:0px;top:-50px;z-index:20;box-shadow:10px 10px 5px rgba(0,0,0,0.4);height:190px;box-sizing: border-box;opacity:1;transition-delay: 3s;transition:all 1.2s;}

  .noload .content-base .headline_00{opacity:0;left:-300px;}

  .content-base .image{display: block;position:absolute;right:70px;top:18px;transition-delay: 3s;}

    .content-box{position:absolute;top:0px;width:2500px;left:50%;transform:translate(-50%,0);}
    .content-box.box01{top:0;height:1448px;background:url('../img/intro/01.jpg');}
    .content-box.box01 .name01{position:absolute;top:160px;right:680px;opacity:0;}
    .content-box.box01 .name02{position:absolute;top:664px;left:910px;opacity:0;}
    .content-box.box01 .creaters{position:absolute;top:868px;left:1234px;opacity:0;}
    .content-box.box01 .movie01{position:absolute;top:624px;left:1280px;transition: all 0.5s;opacity:0;}
    .content-box.box01 .movie01:hover{transform:scale(1.1);}
    .content-box.box01 .movie02{position:absolute;top:1194px;left:854px;transition: all 0.5s;opacity:0;}
    .content-box.box01 .movie02:hover{transform:scale(1.1);}

    .content-box.box02{top:1448px;height:1265px;background:url('../img/intro/02.jpg');}
    .content-box.box02 .title{position:absolute;top:-50px;left:560px;opacity:0;}
    .content-box.box02 .readtext{position:absolute;top:150px;left:660px;opacity:0;}
    .content-box.box02 .text01{position:absolute;top:454px;left:868px;opacity:0;}
    .content-box.box02 .text02{position:absolute;top:631px;left:1290px;opacity:0;}
    .content-box.box02 .text03{position:absolute;top:1029px;left:632px;opacity:0;}

    .content-box.box03{top:2713px;height:1243px;background:url('../img/intro/03.jpg');}
    .content-box.box03 .title{position:absolute;top:439px;left:1220px;opacity:0;}
    .content-box.box03 .readtext{position:absolute;top:812px;left:1220px;opacity:0;}

  .movie-bottom{background:url('../img/intro/movie-bg.jpg');background-position:center top;opacity:1;}
  .movie-bottom:before{content:'';display: block;height:8px;width:100%;background:url('../img/intro/line.jpg');}
  .movie-bottom:after{content:'';display: block;height:8px;width:100%;background:url('../img/intro/line.jpg');}
  .movie-bottom__inner{width:1100px;margin:0 auto;padding:40px 0 50px;}
  .movie-bottom .item{width:380px;margin:0 10px;padding:40px 0 50px;position:relative;}
  .movie-bottom .item .thum{position: relative;border:1px solid #666;box-shadow:0 0 20px rgba(0,0,0,0.6);background-color:#000;}
  .movie-bottom .item .thum:before{content:'';display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90px;height:90px;background-image:url('../img/intro/btn-play-bottom.png');background-size:contain;transition:all 0.5s;z-index:100;}
  .movie-bottom .item .thum img{width:100%;box-shadow:0 0 5px rgba(0,0,0,0.7);display: block;transition:all 0.5s;opacity:0.8;}
  .movie-bottom .item .caption{text-align:center;margin-top:15px;color:#fff;}
  .movie-slider{opacity:0;}

  .movie-bottom .item:hover .thum img{opacity:0.6;}
  .movie-bottom .item:hover .thum:before{transform:translate(-50%,-50%) scale(1.1);}

  .movie-bottom .headline{margin:-20px auto 0; display: block;opacity:0;}
  .slick-list{overflow:visible!important;}

  .spec__wrap{background:url(../img/top/spec_bg.jpg) center center;background-size:cover;z-index:0;position:relative;z-index:1;background-attachment: fixed;}
  .spec__inner{margin:0 auto;color:#fff;text-align:center;padding:120px 0; width:1200px;}
  .spec__wrap .title{margin-bottom:1em;padding-bottom:0.5em;display:block;margin:0 auto 60px;}
  .spec__wrap .name{font-size:24px;line-height:1.4;margin:20px 0 5px;}
  .spec__wrap .version{font-size:13px;line-height:1.4;color:#bfae63;}
  .spec__wrap .price{font-size:16px;line-height:1.4;}
  .spec__wrap .price .num{font-size:40px;font-style: italic;margin:0 5px;}
  .spec__wrap .btn img{width:400px;}
  .spec__wrap .btn img{margin:90px 10px 0;width:430px;}

  .item-wrap__flex{display:flex;}
  .flex__box:first-child img{width:360px;}
  .flex__box:last-child img{width:760px;margin-left:40px;box-shadow:0 0 30px rgba(0,0,0,0.8);}




}


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

  .topmovie{width:100%;background:#000 url('../img/intro/topmovie-bg_sp.jpg');position:relative;background-position: center;position:relative;padding-top:100%;background-size:cover;}
  .topmovie__headline{position:absolute;bottom:10%;left:50%;transform:translate(-50%,0);width:85%;}
  .topmovie__btn{position:absolute;top:20%;left:50%;transform:translateX(-50%) scale(0.8);opacity:0.6;transition:all 0.6s;transform-origin:center;width:40%;}
  .noload .topmovie__btn{transform:scale(1) translateX(-50%);}

  /* .topmovie:before{content:'';width:100%;height:100%;top:0;left:0;border:30px solid rgba(255,255,255,0.1);position:absolute;box-sizing: border-box;transition: all 0.5s} */




  .content-base{width:100%;position:relative;}
  .content-base .head-over{position:absolute;top:-1.9%;left:50%;transform:translate(-50%,0);width:100%;}



  .content-base .headline_00{left:0px;top:-1%;z-index:20;opacity:1;transition-delay: 3s;transition:all 1.2s;width:60%;position:absolute;}
  .content-base .headline_00 .image{width:100%;}

  /* .noload .content-base .headline_00{opacity:0;left:-300px;} */

  /* .content-base .image{display: block;position:absolute;right:70px;top:18px;transition-delay: 3s;} */

    .content-box{position:relative;}
  .content-box.box01{background:url('../img/intro/01_sp.jpg');padding-top:181%;background-size:100%;z-index:3;}
    .content-box.box01 .name01{position:absolute;top:15%;right:5%;opacity:1;width:24%;}
    .content-box.box01 .name02{position:absolute;top:30%;left:27%;opacity:1;width:24%;}
    .content-box.box01 .creaters{position:absolute;top:76%;left:5%;opacity:1;width:90%;}
    .content-box.box01 .movie01{position:absolute;top:50%;right:5%;transition: all 0.5s;opacity:1;width:48%;}
    .content-box.box01 .movie02{position:absolute;top:58%;right:44%;transition: all 0.5s;opacity:1;width:48%;}

    .content-box.box02{background:url('../img/intro/02_sp.jpg');padding-top:168%;background-size:100%;z-index:2;}
  .content-box.box02 .title{position:absolute;top:20%;left:0%;opacity:1;width:70%;}
    .content-box.box02 .readtext{position:absolute;top:34%;left:10%;opacity:1;width:60%;}

    .content-box.box03{background:url('../img/intro/03_sp.jpg');padding-top:190%;background-size:100%;z-index:1;}
    .content-box.box03 .title{position:absolute;top:49%;left:38%;opacity:1;width:55%;}
    .content-box.box03 .readtext{position:absolute;top:69%;left:38%;opacity:1;width:55%;}

  .content-box.box02 .text01{display:none;}
  .content-box.box02 .text02{display:none;}
  .content-box.box02 .text03{display:none;}

  .movie-bottom{background:url('../img/intro/movie-bg.jpg');background-position:center top;opacity:1;}
  .movie-bottom:before{content:'';display: block;height:4px;width:100%;background:url('../img/intro/line.jpg');background-size:content;}
  .movie-bottom:after{content:'';display: block;height:4px;width:100%;background:url('../img/intro/line.jpg');background-size:content;}
  .movie-bottom__inner{width:86%;margin:0 auto;padding:40px 0 50px;}
  .movie-bottom .item{width:270px;margin:0 10px;position:relative;}
  .movie-bottom .item .thum{position: relative;border:1px solid #666;box-shadow:0 0 20px rgba(0,0,0,0.6);background-color:#000;}
  .movie-bottom .item .thum:before{content:'';display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90px;height:90px;background-image:url('../img/intro/btn-play-bottom.png');background-size:contain;transition:all 0.5s;z-index:100;}
  .movie-bottom .item .thum img{width:100%;box-shadow:0 0 5px rgba(0,0,0,0.7);display: block;transition:all 0.5s;opacity:0.8;}
  .movie-bottom .item .caption{text-align:center;margin-top:15px;color:#fff;}
  .movie-slider{opacity:1;}

  .movie-bottom .item:hover .thum img{opacity:0.6;}
  .movie-bottom .item:hover .thum:before{transform:translate(-50%,-50%) scale(1.1);}

  .movie-bottom .headline{margin:-20px auto 10px; display: block;opacity:1;width:90px;}
  .slick-list{overflow:visible!important;}


  .spec__wrap{background:#000 url(../img/top/spec_bg-sp.jpg) center top no-repeat;background-size:150%;z-index:0;position:relative;z-index:1;}
  .spec__inner{width:100%;margin:0 auto;color:#fff;text-align:center;padding:50px 0;}
  .spec__wrap .title{margin-bottom:1em;padding-bottom:0.5em;display:block;margin:0 auto 40px;width:190px;}
  .spec__wrap .name{font-size:24px;line-height:1.4;margin:20px 0 5px;}
  .spec__wrap .version{font-size:13px;line-height:1.4;color:#bfae63;}
  .spec__wrap .price{font-size:16px;line-height:1.4;}
  .spec__wrap .price .num{font-size:40px;font-style: italic;margin:0 5px;}

  .spec__wrap .btn img{margin:40px auto 0;width:90%;}
  .spec__wrap .btn:last-child img{margin:15px auto 0;width:90%;}

  .item-wrap__flex{display: block;}


  .flex__box{margin:0 0%;display:block;}
  .flex__box:nth-child(2n+1){width:70%;margin:0 auto 40px;}
    .flex__box:nth-child(2n+1) .img{margin-top:-19%;}
  .flex__box:nth-child(2n+1) .name{margin-top:-18%;}
  .flex__box:nth-child(2n+2){width:94%;margin:0 auto;}
  .flex__box .img{width:100%;}
.flex__box:nth-child(2n+1) .img{width:92%;}
  .flex__box:nth-child(2n+2) .img{box-shadow:0 0 10px rgba(0,0,20,0.8);width:90%;}

}