@charset "utf-8";




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


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



/*  */


.wrap-banner-lefttop{position:absolute;left:2vw;top:7.5vw;display:block;z-index:4;}
.banner_lefttop{width:15vw;display:block;margin-bottom:8px;box-shadow:3px 3px 5px rgba(0,0,0,0.8);border:1px solid #ede4b3;}
.banner_lefttop img{width:100%;display:block;}

.btn-movie:after{content:'';background:url(../img/top/play-mark.png);display:block;top:40%;left:50%;width:55px;height:55px;margin:-27px 0 0 -27px;position:absolute;}



/* visual */
.visual-img{width:100%;margin-top:0;display:block;}
.top-movie__wrap{position:absolute;top:0;left:0;width:100%;}
.top-movie__wrap video{width:100%;}


/* top-info */
.content-topinfo{background:url(../img/top/topinfo-base.png) center top no-repeat;background-size:100%;margin-top:-12vw;position:relative;z-index:2;
height:0;padding-bottom:39vw;}

.topinfo-logo{width:50vw;display:block;position:absolute;left:4vw;top:0vw;}
.topinfo-date{width:14vw;display:block;position:absolute;left:20vw;top:21vw;}
.topinfo-reservebtn{width:28vw;display:block;position:absolute;left:13vw;top:27vw}
.topinfo-console__wrap{width:48vw;display:block;position:absolute;left:3vw;top:33vw;text-align:center;}
.topinfo-console__wrap .console-icon{height:1.8vw;display:inline-block;margin:0 0vw;}

.topinfo-console__wrap .console-icon.icon-ps4{margin-right:1vw;}
.topinfo-console__wrap .console-icon.icon-nsw{margin-right:1vw;}
.topinfo-console__wrap .console-icon.icon-stm{margin-right:1vw;}
.topinfo-console__wrap .console-icon.icon-std{height:2.8vw;margin-bottom:-0.3vw;}

.movie-flame{background:url(../img/top/flame-movie.jpg);display:block;position:absolute;left:56vw;top:16vw;padding:0.4vw;box-shadow:3px 3px 2px rgba(0,0,0,0.6);background-size:cover;background-color:#000;}
.movie-flame:before{content:'';display:block;width:30%;padding-top:30%;background:url(../img/top/icon-play.png);position:absolute;background-size:100%;left:35%;top:14%;z-index:1;}
.movie-flame__inner{position:relative;}
.movie-title{position:absolute;color:#fff;text-align:center;top:70%;font-size:18px;width:100%;font-size:1.2vw;z-index:1;}
.movie__img{width:30vw;display:block;transition:all 0.5s;}

.area-upgrade{display:none;}
.area-upgrade img{}

.area-upgrade{width:100%;position:relative;background:url(../img/top/upgradetop_bg.jpg);background-position:center center;height:10vw;}
.area-upgrade:before{content:'';width:100vw;position:absolute;top:1px;left:50%;transform:translate(-50%,-50%);height:1px;background-color:#999;}
.area-upgrade:after{content:'';width:100vw;position:absolute;top:0;left:50%;transform:translate(-50%,-50%);height:1px;background-color:#000;}


/* news */
.content-news{background:url(../img/top/news-bg.jpg) center center;background-size:cover;padding:50px 0 0;position:relative;z-index: 2;box-shadow:0 0 2vw rgba(0,0,0,0.9),0 0 10px rgba(0,0,0,0.9);}

.news-headline{position:relative;color:#ddd;text-align:center;font-size:38px;padding:5px 0 5px;line-height:1.2;border-bottom:1px solid #ede4b3;display:inline-block;left:50%;transform:translate(-50%);margin-bottom:20px;}


.slider-news{margin:0 auto 0;width:90%;max-width:1300px;}
.slider-news-item{margin:0 20px 0;width:300px;position:relative;background:rgba(0,0,0,0.5);box-shadow:0 0 12px rgba(0,0,0,0.4);}
.slider-news-item .news-img-wrap{overflow:hidden;}
.slider-news-item .news-img-wrap img{width:100%;transition:all 0.4s;-webkit-backface-visibility: hidden;}
.slider-news-item:hover .news-img-wrap img{transform:scale(1.04,1.04);}
.slider-news-item .news-info{padding:15px 20px 50px;position:relative;}
.slider-news-item .news-date{color:#9c8620;font-size:13px;}
.slider-news-item .news-text{color:#fff;height:4.8em;line-height:1.6;font-size:14px;position:relative;}
.slider-news-item .news-select{color:#9c8620;display:inline-block;position:absolute;bottom:18px;left: 50%;transform: translate( -50%);font-size:14px;border:1px solid #9c8620;padding:5px 15px;line-height:1;border-radius:30px;overflow: hidden;}
.slider-news-item .news-select:after{content:'';display:block;width:100%;height:100%;position:absolute;left:-100%;top:0;background:#9c8620;transition:all 0.5s;}
.slider-news-item:hover .news-select:after{left:0;color:#24340e;}
.slider-news-item:hover .news-select .text{color:#24340e;position:relative;z-index:1;}

.slider-news .slick-list {padding:2vh 0 2vh;}

.slider-news-item.new:after{content:'NEW';background:#fffa53;padding:4px 10px 3px;display:block;position:absolute;left:-15px;top:-10px;font-size:14px;line-height:1;border-radius:20px;font-style: italic;box-shadow:0 0 8px rgba(0,0,0,0.6);}

.slider-news-item.none .news-select:after{width:100%;}
.slider-news-item.none .news-img-wrap img{opacity:0;}
.slider-news-item.none .news-img-wrap{background-color:rgba(255,255,255,0.05);}
.slider-news-item.none .news-info{opacity:0;}
.slider-news-item.none .news-date{opacity:0;}
.slider-news-item.none .news-text{opacity:0;}
.slider-news-item.none .news-select{opacity:0;}

.content-news{padding-bottom:40px;}

.banner-wrap {display:flex;justify-content: center;background-color:rgba(0, 29, 3, 0.3);padding:30px 0 30px;margin-top:80px;margin-bottom:-10px;}
.banner-wrap .banner-box{}
.banner-wrap .banner-box img{display:block;margin:0 12px;box-sizing: border-box;width:300px;box-shadow:0 0 8px rgba(0,0,0,0.6);}

.slider-news .slick-prev{width:78px!important;height:73px!important;background:url(../img/common/btn_toleft.png);z-index:1;text-indent:-9999px;left:-80px;}
.slider-news .slick-next{width:78px!important;height:73px!important;background:url(../img/common/btn_toright.png);z-index:1;text-indent:-9999px;right:-80px;}
.slick-prev:hover,.slick-prev:focus{background:url(../img/common/btn_toleft.png)!important;}
.slick-next:hover,.slick-next:focus{background:url(../img/common/btn_toright.png)!important;}

.slider-news .slick-prev.slick-disabled{display:none!important;}
.slider-news .slick-next.slick-disabled{display:none!important;}




.slick-dots li {position: relative;display: inline-block;width: 30px!important;height: 5px!important;margin: 0 5px;padding: 0;cursor: pointer;opacity:1;}
.slick-dots li button{background:#aaa!important;opacity:1;height:5px!important;width:100%!important;padding:0px!important;}
.slick-dots li button:before{display:none;}
.slick-dots li.slick-active button{background:#c1ab42!important;}



/* feature */

.content-feature{position:relative;height:134vw;background-size:100%;z-index: 1;margin-bottom:-9vw;}
.feature-bg{transform: skewY(5deg);height:134vw;transform-origin:right top;}
.feature-bg__img{background:url(../img/top/features_bg.jpg);height:134vw;width:100%;background-size:100%;position:absolute;top:0;left:0;}

/* story */

.story-title{position:absolute;top:0;left:0;font-size:7vw;z-index:1;color:#fff;left:6vw;top:4vw;line-height:1.3;text-shadow:0 0 2vw rgba(0,0,0,0.8),0 0 2vw rgba(0,0,0,0.8),0 0 2vw rgba(0,0,0,0.8);z-index:3;line-height:1.2;}
.story-title .min{font-size:4vw;line-height:1.1;}
.story-title__exp{font-size:1vw;line-height:1.1;background-color:#000;padding:0.8vw;margin-top:1.6vw;text-align:center;}


.story-movie__wrap{position:absolute;top:0;left:0;width:80vw;z-index:1;}
.story-movie{top:0;left:0;width:100%;display:block;opacity:0.6;}
/* .story-movie__wrap:before{content:'';display:block;background:url(../img/top/story-movie-flame.png);width:80vw;height:100%;background-size:100%;position:absolute;bottom:0;right:0;z-index:1;} */

.story-img1{position:absolute;top:-2vw;right:5vw;width:74vw;z-index:2;}
.story-img2{position:absolute;top:3vw;right:-29vw;width:80vw;z-index:2;}


.info-wrap{background-color:rgba(0,0,0,0.8);border:1px solid #8f855b;padding:1.5vw 2vw;position:absolute;z-index:11;}
/* character */

.character-info{width:39vw;padding:1.5vw 2vw;top:60vw;left:5vw;top:60vw;left:5vw;position:absolute;z-index:11;}
.character-title{color:#fff;font-size:2.5vw;line-height: 1.2 }
.character-title .big{color:#fff;font-size:4vw;}
.character-img{position:absolute;z-index:11;left:-17vw;top:34vw;z-index:10;width:94vw;}

.character-title .min{font-size:1.9vw;}

/* action */

.action-info{width:46vw;padding:2vw 2vw 1.5vw;top:110vw;right:5vw;position:absolute;z-index:22;}
.action-title{color:#fff;font-size:2.5vw;line-height: 1.3}
.action-img{position:absolute;z-index:21;left:-10vw;top:79vw;width:62vw;}
.action-movie__wrap{position:absolute;z-index:11;left:0vw;top:84vw;z-index:20;width:100vw;background-color:#000;transform: skewY(-5deg);height:26vw;overflow:hidden;border-top:0.6vw solid #000;border-bottom:0.6vw solid #000;}
.action-movie{position:absolute;width:60vw;background-color:#000;right:0;top:0;transform-origin:top right;}
.action-movie__wrap .cover-movie{position:absolute;width:60vw;background-color:#000;transform: skewY(5deg);right:0;top:0;transform-origin:top right;padding-top:56%;}
.action-movie__wrap .cover-movie:after{content:'';background:url(../img/top/cover-movie-action.png) repeat-Y;width:5vw;height:100%;display:block;position:absolute;top:0;left:0;background-size:100%;}


/* product */

.content-product {color: #333;padding-top: 15vw;}
.wrap-centering{text-align:center;}

}

/* IE Hack */

@media all and (-ms-high-contrast: none) {
  .news-headline{
    background: none !important;
		font-weight:normal!important;
		font-family: "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
  }
}



@media screen and (min-width: 1551px) {/*大画面用サイズ変更*/

}






/*----------------------------------------
	for Tab
----------------------------------------*/

@media screen and (max-width: 1199px) and (min-width: 641px){
	.btn-movie{position:absolute;left:auto;top:30px;right:30px;display:block;width:220px;background-color:#000;border:1px solid #fff;}
}



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


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


	/*  */

  .wrap-banner-lefttop{position:absolute;left:30px;top:30px;display:block;z-index:4;}
  .banner_lefttop{width:300px;height:100px;display:block;margin-bottom:8px;}

  .btn-movie:after{content:'';background:url(../img/top/play-mark.png);display:block;top:40%;left:50%;width:55px;height:55px;margin:-27px 0 0 -27px;position:absolute;}



  /* visual */
  .visual-img{width:100%;margin-top:0;display:block;}
  .top-movie__wrap{position:absolute;top:0;left:0;width:100%;}
  .top-movie__wrap video{width:100%;}


  /* top-info */
  .content-topinfo{background:url(../img/top/topinfo-base_sp.png) center top no-repeat;background-size:100%;margin-top:-19vw;position:relative;z-index:2;padding-bottom:8vw;}

  .topinfo-logo{width:96vw;display:block;position:relative;margin-left:3vw;top:1vw;}
  .topinfo-date{width:50vw;display:block;position:relative;margin-left:26vw;}
  .topinfo-reservebtn{width:90vw;display:block;position:relative;margin-left:5vw;margin-top:2vw;}
  .topinfo-console__wrap{width:80vw;display:block;position:relative;margin-left:10vw;margin-top:3vw;text-align:center;}
  .topinfo-console__wrap .console-icon{height:6vw;display:inline-block;margin:0 0vw;}

  .topinfo-console__wrap .console-icon.icon-ps4{margin-right:1vw;}
  .topinfo-console__wrap .console-icon.icon-nsw{margin-right:1vw;}

  .movie-flame{background:url(../img/top/flame-movie.jpg);display:block;position:relative;left:5vw;padding:0.4vw;box-shadow:3px 3px 2px rgba(0,0,0,0.6);background-size:cover;background-color:#000;width:90vw;margin-top:4vw;}
  .movie-flame:before{content:'';display:block;width:18%;padding-top:18%;background:url(../img/top/icon-play.png);position:absolute;background-size:100%;left:13%;top:14%;z-index:1;}
  .movie-flame__inner{position:relative;}
  .movie-title{position:absolute;color:#fff;text-align:center;top:50%;font-size:10px;width:55%;z-index:1;right:0%;font-size:14px;line-height:1.2;transform:translate(0,-50%);color:#000;}
  .movie__img{width:40vw;display:block;transition:all 0.5s;}

/*  */

  .area-upgrade img{width:85vw;left:7vw;position:absolute;top:50%;margin-top:-5vw;}

  .area-upgrade{width:100%;position:relative;background:url(../img/top/upgradetop_bg_sp.jpg);background-position:center center;height:20vw;}
  .area-upgrade:before{content:'';width:100vw;position:absolute;top:1px;left:50%;transform:translate(-50%,-50%);height:1px;background-color:#999;}
  .area-upgrade:after{content:'';width:100vw;position:absolute;top:0;left:50%;transform:translate(-50%,-50%);height:1px;background-color:#000;}


  /* news */
  .content-news{background:url(../img/top/news-bg.jpg) center center;background-size:cover;padding:4vw 0 0;position:relative;z-index: 2;box-shadow:0 0 2vw rgba(0,0,0,0.9),0 0 10px rgba(0,0,0,0.9);}

  .news-headline{position:relative;color:#ddd;text-align:center;font-size:26px;padding:5px 0 5px;line-height:1.2;border-bottom:1px solid #ede4b3;display:inline-block;left:50%;transform:translate(-50%);margin-bottom:3vw;}


  .slider-news{margin:0 auto 0;width:80%;}
  .slider-news-item{margin:0 20px 0;width:240px;position:relative;}
  .slider-news-item .news-img-wrap{overflow:hidden;box-shadow:0 0 12px rgba(0,0,0,0.6);border:1px solid #9c8620;box-sizing:border-box;}
  .slick-list{overflow:visible!important;}
  .slider-news-item .news-img-wrap img{width:100%;transition:all 0.4s;-webkit-backface-visibility: hidden;}
  .slider-news-item:hover .news-img-wrap img{transform:scale(1.04,1.04);}
  .slider-news-item .news-info{padding:15px 0px 50px;position:relative;}
  .slider-news-item .news-date{color:#9c8620;font-size:12px;}
  .slider-news-item .news-text{color:#fff;height:4.8em;line-height:1.6;font-size:14px;}
  .slider-news-item .news-select{color:#9c8620;display:inline-block;position:absolute;bottom:12px;left: 50%;transform: translate( -50%);font-size:12px;border:1px solid #9c8620;padding:5px 15px;line-height:1;border-radius:30px;overflow: hidden;}
  .slider-news-item .news-select:after{content:'';display:block;width:100%;height:100%;position:absolute;left:-100%;top:0;background:#9c8620;transition:all 0.5s;}



  .slider-news .slick-list {padding:2vh 0 0;}


  .slider-news-item.new:after{content:'NEW';background:#fffa53;color:#333;padding:3px 10px 3px;display:block;position:absolute;left:-15px;top:-10px;font-size:12px;line-height:1;border-radius:20px;font-style: italic;box-shadow:0 0 8px rgba(0,0,0,0.6);}

  .slider-news-item.none .news-select:after{width:100%;}
  .slider-news-item.none .news-img-wrap img{opacity:0;}
  .slider-news-item.none .news-img-wrap{background-color:rgba(255,255,255,0.05);}
  .slider-news-item.none .news-info{opacity:0;}
  .slider-news-item.none .news-date{opacity:0;}
  .slider-news-item.none .news-text{opacity:0;}
  .slider-news-item.none .news-select{opacity:0;}

  .slider-news .slick-prev{width:78px!important;height:73px!important;background:url(../img/common/btn_toleft.png);z-index:1;text-indent:-9999px;left:-80px;}
  .slider-news .slick-next{width:78px!important;height:73px!important;background:url(../img/common/btn_toright.png);z-index:1;text-indent:-9999px;right:-80px;}
  .slick-prev:hover,.slick-prev:focus{background:url(../img/common/btn_toleft.png)!important;}
  .slick-next:hover,.slick-next:focus{background:url(../img/common/btn_toright.png)!important;}


  .slider-news .slick-dots li{margin:0!important;}

  .slick-dots{display:flex!important;justify-content: center;}
  .slick-dots li {position: relative;display: block!important;width: 30px!important;height: 3px!important;margin: 0 5px;padding: 0;cursor: pointer;opacity:1;}
  .slick-dots li button{background:#495f2d!important;opacity:1;height:3px!important;width:100%!important;padding:0px!important;}
  .slick-dots li button:before{display:none;}
  .slick-dots li.slick-active button{background:#c1ab42!important;}

  .banner-wrap {display:flex;flex-wrap:wrap;justify-content:space-between;background-color:rgba(0, 29, 3, 0.83);padding:5vw 5vw 7vw;margin-top:60px;margin-bottom:-10px;}
  .banner-wrap li{display:block;width:49%;margin-top:2%;}
  .banner-wrap .banner-box img{width:100%;display:block;}


  /* feature */

  .content-feature{position:relative;height:288vw;background-size:100%;z-index: 1;margin-bottom:-9vw;}
  .feature-bg{transform: skewY(5deg);height:288vw;transform-origin:right top;}
  .feature-bg__img{background:url(../img/top/features_bg.jpg);height:288vw;width:100%;background-size:cover;position:absolute;top:0;left:0;}

  /* story */

  .story-title{position:absolute;top:0;left:0;font-size:14vw;z-index:1;color:#fff;left:6vw;top:8vw;line-height:1.3;z-index:3;line-height:1.2;width:100%;text-shadow:0 0 2vw rgba(0,0,0,0.8),0 0 2vw rgba(0,0,0,0.8),0 0 2vw rgba(0,0,0,0.8);}
  .story-title .min{font-size:8vw;line-height:1.1;}
  .story-title__exp{font-size:3vw;line-height:1.2;background-color:#000;padding:2vw;margin-top:3vw;text-align:center;width:55%;line-height:1.3;}


  .story-movie__wrap{position:absolute;top:0;left:0;width:80vw;z-index:1;}
  .story-movie{top:0;left:0;width:99%;display:block;opacity:0.6;}
  .story-movie__wrap:before{content:'';display:block;background:url(../img/top/story-movie-flame.png);width:80vw;height:100%;background-size:100%;position:absolute;bottom:0;right:0;z-index:1;}

  .story-img1{position:absolute;top:-7vw;right:-14vw;width:110vw;z-index:2;}
  .story-img2{position:absolute;top:26vw;right:-63vw;width:140vw;z-index:2;}


  .info-wrap{background-color:rgba(0,0,0,0.8);border:1px solid #8f855b;padding:1.5vw 2vw;position:absolute;z-index:11;}
  /* character */

  .character-info{width:80vw;padding:2vw 5vw 2vw;left:5vw;top:140vw;left:5vw;position:absolute;z-index:11;letter-spacing:0.1em;}
  .character-title{color:#fff;font-size:4vw;line-height:1.5; }
  .character-title .big{color:#fff;font-size:6vw;}
  .character-img{position:absolute;z-index:11;left:-37vw;top:83vw;z-index:10;width:164vw;}

  .character-info .btn-more{width:60%;margin:3% auto;}

  .character-title .min{font-size:4vw;display:block;}

  /* action */

  .action-info{width:80vw;padding:5vw 5vw 2vw;top:235vw;right:5vw;position:absolute;z-index:22;}
  .action-title{color:#fff;font-size:4vw;line-height: 1.5;}
  .action-img{position:absolute;z-index:21;left:-22vw;top:175vw;width:122vw;}
  .action-movie__wrap{position:absolute;z-index:11;left:0vw;top:84vw;z-index:20;width:100vw;background-color:#000;transform: skewY(-5deg);height:26vw;overflow:hidden;border-top:0.6vw solid #000;border-bottom:0.6vw solid #000;display:none;}
  .action-movie{position:absolute;width:60vw;background-color:#000;right:0;top:0;transform-origin:top right;}
  .action-movie__wrap .cover-movie{position:absolute;width:60vw;background-color:#000;transform: skewY(5deg);right:0;top:0;transform-origin:top right;padding-top:56%;}
  .action-movie__wrap .cover-movie:after{content:'';background:url(../img/top/cover-movie-action.png) repeat-Y;width:5vw;height:100%;display:block;position:absolute;top:0;left:0;background-size:100%;}

  .action-info .btn-more{width:60%;margin:3% auto;}

  /* product */

  .content-product {color: #333;padding-top: 15vw;}
  .wrap-centering{text-align:center;}



}