@charset "utf-8";




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


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

.content__wrap{background-color:#151515;background:url(../img/top/spec-bg.jpg) center top;padding:0px 0 0!important;}

.head-image__img{margin-top:-26vw!important;}
.privilege__wrap{margin-top:140px;}
.privilege__wrap{padding:40px 0;}

#tab{}

.tab_list{text-align:center;width:800px;margin:0 auto 70px;}
.tab_list li{display:inline-block;margin:0 10px;padding:15px 20px;border-radius:10px;border:1px solid #000;transition:all 0.3s;position:relative;background:transparent;}
.tab_list li:hover{background-color:#000;}
.tab_list li:hover .on{display:block;}
.tab_list li:hover .off{display:none;}
.tab_list li .on{display:none;}
.tab_list li .off{display:block;}
.tab_list li.active{background-color:#000;}
.tab_list li.active .on{display:block;}
.tab_list li.active .off{display:none;}
.tab_list li img{height:40px;width:auto;display:block;}
.tab_list li img.ps4{width:164px;}
.tab_list li img.nsw{width:154px;}
.tab_list li img.stm{width:174px;}

.tab_list li.active:after{
	content:'';
	position:absolute;
	bottom:-14px;
	left:50%;
	margin-left:-20px;
	display:block;
	border-top: 14px solid #000;
  border-right: 14px solid transparent;
  border-left: 14px solid transparent;
}

.tab .tab_list li:hover img{transform:scale(1.06);}

.tab .img{margin:0 auto 0;display:block;}
.tab .img.steam{width:240px;border-radius:15px;}


.tab .twoline{display:flex;justify-content:center;padding-top:50px;}
.tab .twoline .box{width:260px;margin:0 10px;}
.tab .tit{text-align:center;color:#29336a;}
.tab .price{text-align:center;color:#272b44;font-size:14px;}
.tab .price .num{font-size:220%;margin-right:4px;}
.tab .btn{background-color:#e65500;color:#fff;padding:15px 15px;margin:15px auto 0 ;display:block;text-align:center;;box-shadow:2px 3px 0px rgba(0,0,0,0.1);max-width:500px;box-sizing:border-box;line-height:1.4;transition:all 0.5s;}
.tab .btn.non{background-color:#aaa;color:#fff;}




.tab .other{background-color:rgba(255,255,255,0.8);color:#e65500;padding:8px 15px;margin:8px auto 0 ;display:block;text-align:center;box-shadow:2px 3px 0px rgba(0,0,0,0.1);max-width:500px;box-sizing:border-box;border:2px solid #e65500;transition: all 0.2s;}
.tab .btn.out:after{content:'';display:inline-block;background-image:url('../img/common/icon_out.svg');background-repeat:no-repeat;width:18px;height:17px;background-size:100%;margin-left:0.5em;margin-bottom:-0.1em;position:relative;z-index:1;}

.tab .btn:hover{background-color:#c83000;}
.tab .btn.non:hover{background-color:#aaa;}
.tab .other:hover{background-color:rgb(255, 240, 201);}

.content-storebenefits{position:relative;overflow:hidden;}
.content-storebenefits:after{background:url(../img/top/features_bg.jpg);background-size:100%;width:100%;height:100%;content:'';display:block;position:absolute;top:0;left:0;z-index:0;opacity:0.3;background-attachment: fixed;}
.content-storebenefits__inner{position:relative;z-index:1;padding:60px 0;width:100%;max-width:1200px;margin:0 auto;}
.storebenefits__title{color:#fff;font-size:52px;text-align:center;margin-bottom:30px;margin-top:60px;}
.storebenefits__title .line{border-bottom:1px solid #fff;display:inline-block;}

.storebenefits__attentiontext{text-align:center;color:#fff;margin-bottom:30px;}

.storebenefits__wrap-flex{display: flex;flex-wrap: wrap;}

.storebenefits__box{width:30.3%;background:rgba(255,255,255,0.4) url(../img/top/spec-bg.jpg);margin:0 1.5% 3%;background-size:cover;box-shadow:10px 10px 10px rgba(0,0,0,0.5);padding-bottom:100px;position:relative;}
.storebenefits__box .image{width:100%;display:block;background-color:#000;position:relative;}
.storebenefits__box .image img{width:100%;display:block;transition:all 0.3s;}
.storebenefits__box .image img:hover{opacity:0.5;}
.storebenefits__box .image img.non:hover{opacity:1;}

.shop-name{text-align:center;padding:6% 5% 6%;font-size:20px;font-weight:bold;text-shadow:1px 1px 0 rgba(0,0,0,0.1);line-height:1.4;}
.goods-name{text-align:center;padding:5% 5% 2%;font-weight:bold;line-height:1.3;}
.chara-name{font-size:14px;color:#333;text-align: center;padding:0% 5% 0%;line-height:1.6;}
.storebenefits__btn{text-align:center;background:#e65500 center center;color:#fff;padding:10px 0;display:block;width:90%;box-shadow:4px 4px 0px rgba(0,0,0,0.2);position:absolute;bottom:5%;left:5%;transition: all 0.5s;}

.storebenefits__btn:hover{background-color:#c83000;}

.storebenefits__btn.out:after{content:'';display:inline-block;background-image:url('../img/common/icon_out.svg');background-repeat:no-repeat;width:18px;height:17px;background-size:100%;margin-left:0.5em;margin-bottom:-0.1em;position:relative;z-index:1;}

.line-product{margin:60px auto;height:1px;background-color:#666;width:900px;}

.sub-title{font-size:30px;font-weight:800;text-align:center;padding-bottom:30px;line-height:1.2;}
.sub-title .min{font-size:15px;text-align:center;color:#e65500;background-color:rgba(255, 255, 255, 0.8);border-radius:30px;padding:5px 15px;border:1px solid #e65500;}

.privilege__img_01{display:block;margin:-30px auto 0;width:800px;position:relative;}
.privilege__img_02{display:block;margin:-30px auto 0;width:800px;position:relative;}


.privilege__img_01_i{display:block;margin:-30px auto 0;width:800px;position:relative;}
.privilege__img_02_i{display:block;margin:-30px auto 0;width:800px;position:relative;}

.privilege__img_01_i img{width: 100%;display: block;}
.privilege__img_02_i img{width: 100%;display: block;}

.btn_sb_movie{position:absolute;right:10px;bottom:10px;width:200px;}
.btn_sb_movie img{display:block;width:100%;}

.btn_sb_movie.state_i{right:-90px;bottom:50px;}

.centering{text-align:center;width:100%;}
.privilege__img{display:block;margin: 30px auto 20px;width: 800px!important;}


}






@media screen and (min-width: 1551px) {/*大画面用サイズ変更*/
/* #visual{padding-top:40%;width:100%;background-position:center top;position:relative;background-size:100%;} */
/* #visual{padding-top:40%;width:100%;background:#fff url(../img/top/visual_img.jpg) no-repeat;background-position:center top;position:relative;background-size:100%;} */
#content_story_character{background-size:100%;}
}






/*----------------------------------------
	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;}

	.wrap-banner-lefttop{right:20px;left:auto;top:40px;}
		.banner_lefttop{width:240px;display:block;margin-bottom:8px;}
		.banner_lefttop img{width:100%;display:block;margin-bottom:8px;}

}



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


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


	/*  */

	.content__wrap{background-color:#151515;background:url(../img/top/spec-bg.jpg);background-size:100%;padding:10vw 0 0!important; z-index: 10;position: relative;}

	.head-image__img{margin-top:-26vw!important;}
	.privilege__wrap{margin-top:25vw;}

	#tab{}

		.tab_list{text-align:center;width:90%;margin:0 auto 20px;}
		.tab_list li:nth-child(3n+1){border-right:0;}
		.tab_list li:nth-child(3n+2){border-right:0;}
		.tab_list:after{content:'';display:block;clear:both;}
		.tab_list li{display:block;margin:0 0px;padding:15px 0px;border-radius:0px;border:1px solid #000;transition:all 0.3s;position:relative;background:transparent;width:33%;float:left;box-sizing: border-box;}
		.tab_list li .on{display:none;}
		.tab_list li .off{display:block;}
		.tab_list li.active{background-color:#000;}
		.tab_list li.active .on{display:block;}
		.tab_list li.active .off{display:none;}
		.tab_list li img{height:20px;width:auto;display:block;margin:0 auto;}

		.tab_list li.active:after{
			content:'';
			position:absolute;
			bottom:-14px;
			left:50%;
			margin-left:-20px;
			display:block;
			border-top: 14px solid #000;
		  border-right: 14px solid transparent;
		  border-left: 14px solid transparent;
		}



	.tab .img{margin:0 auto 0;display:block;width:50%;}
	.tab .img.steam{width:200px;border-radius:15px;}


	.tab .twoline{justify-content:center;padding-top:30px;}
	.tab .twoline .box{width:90%;margin:0 auto 5vw;}
	.tab .tit{text-align:center;color:#29336a;}
	.tab .price{text-align:center;color:#272b44;font-size:14px;line-height:1.2;}
	.tab .price .num{font-size:220%;margin-right:4px;}
	.tab .btn{background-color:#e65500;color:#fff;padding:15px 15px;margin:15px auto 0 ;display:block;text-align:center;;box-shadow:2px 3px 0px rgba(0,0,0,0.1);max-width:500px;box-sizing:border-box;line-height:1.4;}
	.tab .btn.non{background-color:#aaa;color:#fff;padding:10px 15px;margin:15px auto 0 ;display:block;text-align:center;border-radius:30px;box-shadow:2px 3px 0px rgba(0,0,0,0.1);max-width:500px;font-size:15px;box-sizing:border-box;}

	.tab .other{background-color:rgba(255,255,255,0.8);color:#888;padding:8px 15px;margin:8px auto 0 ;display:block;text-align:center;border-radius:30px;box-shadow:2px 3px 0px rgba(0,0,0,0.1);max-width:500px;box-sizing:border-box;border:2px solid #888;}
	.tab .btn.out:after{content:'';display:inline-block;background-image:url('../img/common/icon_out.svg');background-repeat:no-repeat;width:18px;height:17px;background-size:100%;margin-left:0.5em;margin-bottom:-0.1em;position:relative;z-index:1;}

	.wrap-centering{text-align:center;}

	.content-storebenefits{position:relative;overflow:hidden;}
	.content-storebenefits:after{background:url(../img/top/features_bg.jpg);background-size:100%;width:100%;height:100%;content:'';display:block;position:absolute;top:0;left:0;z-index:0;opacity:0.3;background-attachment: fixed;}
	.content-storebenefits__inner{position:relative;z-index:1;padding:60px 0;width:100%;max-width:1200px;margin:0 auto;}
	.storebenefits__title{color:#fff;font-size:20px;text-align:center;margin-bottom:30px;margin-top:30px;}
	.storebenefits__title .line{border-bottom:1px solid #fff;display:inline-block;font-size:22px;}

	.storebenefits__attentiontext{text-align:center;color:#fff;margin-bottom:30px;font-size:9px;margin-top:-20px;}

	.storebenefits__wrap-flex{display: flex;flex-wrap: wrap;}

	.storebenefits__box{width:80%;background:rgba(255,255,255,0.4) url(../img/top/spec-bg.jpg);margin:0 auto 3%;background-size:cover;box-shadow:10px 10px 10px rgba(0,0,0,0.5);position:relative;}
	.storebenefits__box .image{width:100%;display:block;position:relative;}
	.storebenefits__box .image img{width:100%;display:block;}

	.shop-name{text-align:center;padding:6% 5% 6%;font-size:16px;font-weight:bold;text-shadow:1px 1px 0 rgba(0,0,0,0.1);line-height:1.4;color:#333;}
	.goods-name{text-align:center;padding:5% 5% 1%;font-weight:bold;line-height:1.3;color:#333;}
	.chara-name{font-size:14px;color:#333;text-align: center;padding:0% 5% 0%;}
	.storebenefits__btn{text-align:center;background:#e65500 center center;color:#fff;padding:10px 0;display:block;width:90%;box-shadow:4px 4px 0px rgba(0,0,0,0.2);margin:15px auto 20px;}

	.storebenefits__btn:hover{background-color:#c83000;}

	.storebenefits__btn.out:after{content:'';display:inline-block;background-image:url('../img/common/icon_out.svg');background-repeat:no-repeat;width:18px;height:17px;background-size:100%;margin-left:0.5em;margin-bottom:-0.1em;position:relative;z-index:1;}

	.line-product{margin:40px auto;height:1px;background-color:#666;width:900px;}

	.sub-title{font-size:20px;font-weight:800;text-align:center;padding-bottom:30px;line-height:1.2;color:#333;line-height:1.7;}
	.sub-title .min{font-size:13px;text-align:center;color:#e65500;background-color:rgba(255, 255, 255, 0.8);border-radius:30px;padding:5px 15px;border:1px solid #e65500;}

	.privilege__img_01{width: 100%;display: block;margin-top: -15vw;}
	.privilege__img_02{width: 100%;display: block;margin-top: -4vw;}

	.privilege__img_01_i{width: 100%;display: block;margin-top: -28vw;position:relative;z-index:2;}
	.privilege__img_02_i{width: 100%;display: block;margin-top: -4vw;position:relative;}

	.privilege__img_01_i img{width: 100%;display: block;}
	.privilege__img_02_i img{width: 100%;display: block;}

	.btn_sb_movie{position:absolute;right:10px;bottom:10px;width:140px;}
	.btn_sb_movie img{display:block;width:100%;}

	.btn_sb_movie.state_i{bottom:-30px;}

	.centering{text-align:center;width:100%;}
	.privilege__img{display:block;margin: 30px auto 20px;width: 94%!important;}


}
