/*==========================================
common
==========================================*/
/*サイト設定--------------------------------*/
.cf:after{
content:"";
display:block;
clear:both;
}

.pc { display: block; }
.sp { display: none; }

body{
	background: #000;
}
img {
	width: 100%;
	height: auto;
	display:block;
	line-height:0;
	/* vertical-align: bottom; */
}

#pagetop{
    position:fixed;
    right:10px;
    bottom:0px;
    cursor:pointer;
    z-index: 10;
	width: 100px;
	height: auto;
}
/* ===========================================
キービジュアル
=========================================== */
#KV {
	margin:90px auto 0;
	width: 100%;
	max-height: 965px;
	background: #000 url(../../images/pc/bg.jpg) center top repeat-x;
	background-size: 100% 100%;
}
#KV_chara {
	width: 100%;
	background: #000 url(../../images/pc/kv_chara.png) center top no-repeat;
	background-size:cover;
	position: relative;
}
#KV_chara img {
	margin: 0 auto;
	width: 100%;
	max-height: 965px;
	overflow: hidden;
	max-width: 1920px;
}

#KV_chara img.logo_ps4 {
	max-width: 160px;
	width: 11vw;
	height: auto;
}
#KV_chara img.logo_xbox {
	max-width: 181px;
	width: 13vw;
	height: auto;
}
#KV_chara img.logo_nsw {
	max-width: 160px;
	width: 11vw;
	height: auto;
}


#KV_chara #HeaderTrade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align:left;
}

#KV_chara #HeaderTrade ul {
  padding: 20px 0 15px 20px;
}

#KV_chara #HeaderTrade ul li {
  float: left;
  margin: 0 15px 0 0;
}

#KV_chara #HeaderTrade ul li:nth-of-type(1) img {
  width: 11.9375vw; height:auto;
  max-width: 191px;
}

#KV_chara #HeaderTrade ul li:nth-of-type(2) img {
  width: 5vw; height:auto;
  max-width: 86px;
}

#KV_chara #HeaderTrade ul li:nth-of-type(3) img {
  width: 6.1875vw; height:auto;
  max-width: 99px;
}

#KV_chara #HeaderTrade ul li:nth-of-type(4) img {
  width: 5.25vw; height:auto;
  max-width: 80px;
}

#KV_chara #Js-openModal6509884874{
  display:block;
  width:calc(265/1920*100vw);
  position:absolute;
  bottom:calc(190/965*100%); left:calc(30/1920*100vw);
  cursor:pointer;
  transition:opacity 0.6s;
}

#KV_chara #Js-openModal6509884874:hover{
  opacioty:0.5;
}

#KV_Bnr p {
	margin-left: 20px;
	width: 26vw;
	max-width: 470px;
	text-align: left;
	background: #000;
}
#KV_Bnr p.q,
#KV_Bnr p.bnr_update,
#KV_Bnr p.bnr_nsw_about {
	margin-top:5px;
}
#KV_Bnr p.bnr_nsw {
	background: none;
}

/* ===========================================
ミドル
=========================================== */
.conW {
	margin: 0 auto;
	/* animation-delay; */
	padding: 0 10%;
	width: 75%;
	max-width: 1170px;
	text-align: center;
}
#Middle {
	padding: 80px 0;
	width: 100%;
	background: #000 url(../../images/pc/middle_bg.png) center top no-repeat;
	background-size:cover;
}
/* ===========================================
ミドル
----------------------------------------------
告知
=========================================== */
#Event {
	margin-bottom: 2.5%;
	position: relative;
}
#Event p {
	position: absolute;
	bottom: 15%;
	left: 37.5%;
	margin: 0 auto;
	width: 25%;
}
/* ===========================================
ミドル
----------------------------------------------
NEWS
=========================================== */
#topB {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
#News {
	float: left;
	width: 43%;
	padding: 15px 3%;
	background-color: rgba(0,0,0,0.8);
	height: 250px;
	overflow-y: scroll;
	text-align: left;
	font-size: 16px;
	color: #fff;
}
#News ul li {
	margin: 0 0 15px;
}
#News ul li:last-child {
	margin: 0;
}
#News .date {
	float: left;
	width: 24%;
	color: #ffef00;
	line-height: 1.2;
}
#News .newsT {
	float: right;
	width: 76%;
	line-height: 1.2;
}

#News a:link,
#News a:visited {
	text-decoration: underline;
	color: #00f0ff;
}
#News a:hover {
	text-decoration: none;
}
/* ===========================================
ミドル
----------------------------------------------
Twitter
=========================================== */
#TW {
	float: right;
	padding: 0 1%;
	width: 47%;
	height: 280px;
	background-color: rgba(255,255,255,0.9);
}

.sub_bnr_area {
	width: 47%;
	max-width: 469px;
}

.sub_bnr_area .banner_quiz{
	margin-top: 1vw;
}

/* ===========================================
ミドル
----------------------------------------------
MOVIE
=========================================== */
#Movie {
	margin-bottom: 2%;
}
#Movie ul {
	width: 100%;
}
#Movie ul li {
	float: left;
	width: 49%;
	margin-right: 2%;
}
#Movie ul li p {
	background: #000;
}
#Movie ul li:last-child {
	margin-right: 0;
}
#Movie p.btn a {
	margin: 20px auto 50px;
	padding: 15px 0;
	width:50%;
	display: block;
	background: #f33212;
	text-decoration: none;
	color: #fff;
}
#Movie p.btn a:hover {
	background: #fff000;
	color: #000;
}
#Movie .container {
	width: 50%;
	margin: 0 auto;
}
#Movie .container p {
	background: #000;
}
/* ===========================================
ミドル
----------------------------------------------
BANNER
=========================================== */
#Banner {
	margin: 2% 0;
}
#Banner ul {
	width: 100%;
}
#Banner ul li {
	float: left;
	width: 49%;
	background: #000;
	margin-right: 2%;
}
#Banner ul li:last-child {
	margin-right: 0;
}
#OpenM {
	margin: 2% 0;
}
#OpenM ul {
	width: 100%;
}
#OpenM ul li {
	float: left;
	width: 49%;
	margin-right: 2%;
}
#OpenM ul li:last-child {
	margin-right: 0;
}
/* ===========================================
About
=========================================== */
#About {
	width: 100%;
	background: url(../../images/pc/about_bg.png) center center no-repeat;
	background-size: cover;
}
#About #AboutBody {
	margin: 0 auto;
	padding: 50px 0 100px;
}
#About #AboutBody h2 {
	margin: 0 auto 50px;
	max-width: 500px;
}
#About #AboutBody p {
	margin: 0 auto;
	max-width: 770px;
}
/* ===========================================
コンテンツ
=========================================== */
#ConArea {
	width: 100%;
}
#ConArea .CA {
	margin: 0 auto;
	width: 100%;
	position: relative;
}
#ConArea .CA .title {
	width: 700px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}
#ConArea .CA .title {
	background: url(../../images/pc/con_title_base.png) top left no-repeat;
	background-size: 100% auto;
}
#ConArea #C1.CA {
	background: #000 url(../../images/pc/c1_bg.png) center center no-repeat;
}
#ConArea #C2.CA {
	background: #000 url(../../images/pc/c2_bg.png) center center no-repeat;
}
#ConArea #C3.CA {
	background: #000 url(../../images/pc/c3_bg.png) center center no-repeat;
}
#ConArea #C4.CA {
	background: #000 url(../../images/pc/c4_bg.png) center center no-repeat;
}
#ConArea #C5.CA {
	background: #000 url(../../images/pc/c5_bg.png) top center no-repeat;
}
#ConArea #C1.CA,
#ConArea #C2.CA,
#ConArea #C3.CA,
#ConArea #C4.CA,
#ConArea #C5.CA {
	background-size: cover !important;
}

#ConArea .descri {
	margin: 0 auto;
	padding: 180px 0;
	max-width: 826px;
	width: 100%;
}
#ConArea .descri p {
	margin-bottom: 50px;
}

#ConArea .descri img.cs {
	margin: 0 auto;
	max-width: 250px;
	width: 100%;
}

/* ===========================================
スペック
=========================================== */
#Spec {
	padding: 70px 0;
	background: #000 url(../../images/pc/bg.jpg) center top repeat-x;
	background-size: 100% 100%;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 3px;
	line-height: 2;
}

#Spec .conW{
  width: 95%;
  max-width: 1560px;
  padding: 0;
}

#Spec .conW > span{
  display:block;
  width:100%; height:100%;
  position:relative;
}

#Spec .conW >span > a{
  display:block;
  width:calc(252/1568*100%); height:calc(40/723*100%);
  position:absolute;
  top:0; right:0;
}

#Spec h3 {
	margin: 0 auto;
	width: 126px;
}
#Spec p {
	margin: 50px auto 0;
	max-width: 1560px;
	width: 100%;
}

#Spec p.Spec_btn {
	max-width: 407px;
	height: auto;
	width: 30vw;
}

#AgreeService {
	padding: 20px 0;
	width: 100%;
	text-align: center;
	background: #18205b;
}
#AgreeService p {
	margin: 0 auto;
	max-width: 1100px;
	width: 90%;
	color:#fff;
	font-size: 16px;
	line-height: 1.2;
}
#AgreeService p a:link,
#AgreeService p a:visited {
	color:#fff000;
	text-decoration: underline;
}
#AgreeService p a:hover {
	text-decoration: none;
}

/* ===========================================
解像度比較表
=========================================== */
#resol {
	margin: 70px 0 0;
}
#resol h3 {
	margin: 0 auto 30px;
	width: 222px;
}
#resol table {
	margin: 0 auto;
	padding: 0;
	max-width: 1620px;
	width: 95%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 16px;
}
#resol table td {
  width:10%;
  margin: 0; padding: 0;
  word-break: break-all;
  border:#fff 1px solid;
}
#resol table td.title {
	background: #fff;
	color: #f2270e;
	letter-spacing: normal;
}
#resol table tr.device td {
  padding:0.5em 0;
  line-height:1.1;
	background: #000;
	color:#fff;
}
#resol table tr.img td {
	padding: 2%;
}

#resol table tr.mode td {
  padding:0.5em 0;
  line-height:1.1;
}

/* ===========================================
スペック比較表
=========================================== */
#spec_comparison {
	margin: 70px 0 0;
}

#spec_comparison h3 {
	margin: 0 auto 30px;
	width: 257px;
}



#spec_comparison table {
	margin: 0 auto;
	padding: 0;
	max-width: 1620px;
	width: 95%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: min(1vw, 18px);
	letter-spacing: 0.04em;
}

#spec_comparison table ul {
	list-style: disc;
	line-height: 1.5;
}

#spec_comparison table ul li {
	list-style: disc;
	line-height: 1.5;
	margin-left: 1.2vw;
}

#spec_comparison table th {
	border:#fff 1px solid;
	background: #000;
	margin: 0;
	padding: 0;
}

#spec_comparison table td {
	border:#fff 1px solid;
	background-color: #f0f0f0;
	color: #000;
	text-align: left;
	margin: 0;
	padding: 1%;
	line-height: 1.5;
}

/* ===========================================
フッター FOOTER
=========================================== */
/* #trademark ul {
	display: inline-block;
}
#trademark ul li {
	float:left;
} */

#CopyR {
	width: 100%;
	border-top:#545454 1px solid;
}

#CopyR p {
	padding:15px 0;
	color: #eee;
	font-size: 12px;
	line-height: 1.5;
}

.store_bnr {
	padding: 15px 0;
	display: flex;
	justify-content: space-between;
	width: 75%;
	max-width: 1170px;
	margin: 0 auto;
}

.store_bnr li {
	max-width: 285px;
	width: 24.5%;
}

@media only screen and (max-width: 750px) {
	.pc { display: none; }
	.sp { display: block; }

	img { width: 100%; height: auto; }

	body{
		background: #000;
	}

	article#Contents {
		margin: 0 auto;
		padding:0;
		width: 100%;
		height: auto;
		background: url(../../images/sp/db.png) center top no-repeat;
		background-size: 100% auto;
	}

	#HeaderTrade {
		width: 100%;
		text-align:left;
		background: #000;
	}
	#HeaderTrade ul {
		padding: 3%;
	}
	#HeaderTrade ul li {
		float:left;
		width: 28%;
	}


	/* ===========================================
	キービジュアル
	=========================================== */
	#KVSP {
		margin:0 auto;
		width: 100%;
		height: 180%;
		background: #000;
		position: relative;
	}
	#CopyR p {
		margin: 0 auto;
		font-size: 10px;
		width:90%;
	}
	#KV_Bnr {
		position: absolute;
		bottom: 4%;
		left: 0;
		width: 100%;
	}
	#KV_Bnr p {
		margin: 0 auto;
		width: 100% !important;
		max-width: 80%;
		text-align: left;
		background: #000;
	}
	#KV_Bnr p.q {
		margin-top:2%;
	}

  #KVSP #Js-openModal894984984{
    display:block;
    width:calc(400/750*100vw);
    position:absolute;
    bottom:calc(256/965*100%); left:calc(175/750*100vw);
  }
	/* ===========================================
	ミドル
	=========================================== */
	.conW {
		margin: 0 auto;
		/* animation-delay; */
		padding: 0 10%;
		width: 80%;
		max-width: 1170px;
		text-align: center;
	}
	#Middle {
		padding: 10% 0;
		width: 100%;
		background: #000 url(../../images/pc/middle_bg.png) center top no-repeat;
		background-size:cover;
	}
	/* ===========================================
	ミドル
	----------------------------------------------
	告知
	=========================================== */
	#Event {
		margin-bottom: 5%;
		position: static;
	}
	#Event p {
		position: static;
		margin: 0 auto;
		width: 100%;
	}
	/* ===========================================
	ミドル
	----------------------------------------------
	NEWS
	=========================================== */
	#topB {
		width: 100%;
		flex-direction: column;
	}
	#News {
		margin-bottom: 3%;
		float: none;
		width: 95%;
		padding: 2.5%;
		height: 150px;
		font-size: 2.5vw;
	}
	/* ===========================================
	ミドル
	----------------------------------------------
	Twitter
	=========================================== */
	#TW {
		float: none;
		padding: 0 1%;
		width: 98%;
		height: 280px;
	}

	.sub_bnr_area {
		width: 100%;
		max-width: none;
		margin-top: 5vw;
	}

	.sub_bnr_area .banner_quiz{
		margin-top: 5vw;
	}
	/* ===========================================
	ミドル
	----------------------------------------------
	MOVIE
	=========================================== */
	#Movie {
		margin-bottom: 3%;
	}
	#Movie ul {
		width: 100%;
	}
	#Movie ul li {
		float: none;
		width: 100%;
		margin-right: 0;
	}
	#Movie ul li:last-child {
		margin-top: 1%;
	}
	#Movie p.btn a {
		margin: 5% auto 10%;
		padding: 3% 0;
		width: 100%;
	}
	#Movie .container {
		width: 100%;
	}
	/* ===========================================
	ミドル
	----------------------------------------------
	BANNER
	=========================================== */
	#Banner {
		margin-top: 3%;
	}
	#Banner ul {
		width: 100%;
	}
	#Banner ul li {
		float: none;
		width: 100%;
		background: #000;
		margin-right: 0;
	}
	#Banner ul li:last-child {
		margin-right: 0;
		margin-top: 1%;
	}
	#OpenM {
		margin: 0 0 2%;
	}
	#OpenM ul {
		width: 100%;
	}
	#OpenM ul li {
		float: left;
		width: 100%;
		margin-right: 2%;
	}
	#OpenM ul li:last-child {
		margin-right: 0;
		margin-top: 1%;
	}
	/* ===========================================
	About
	=========================================== */
	#About {
		width: 100%;
		background: #000;
		background-size: cover;
	}
	#About #AboutBody {
		margin: 0 auto;
		padding: 0;
	}
	#About #AboutBody h2 {
		margin: 0 auto 20px;
		max-width: 620px;
	}
	#About #AboutBody p {
		margin: 0 auto;
		max-width: 627px;
	}
	/* ===========================================
	コンテンツ
	=========================================== */
	#ConArea {
		width: 100%;
	}
	#ConArea .CA {
		margin: 0 auto;
		width: 100%;
		position: relative;
	}
	#ConArea .CA .title {
		width: 90%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#ConArea .CA .title {
		background: url(../../images/sp/con_title_base.png) top left no-repeat;
		background-size: 100% auto;
	}
	#ConArea #C1.CA {
		background: #000 url(../../images/sp/c1_bg.png) top center no-repeat;
	}
	#ConArea #C2.CA {
		background: #000 url(../../images/sp/c2_bg.png) top center no-repeat;
	}
	#ConArea #C3.CA {
		background: #000 url(../../images/sp/c3_bg.png) bottom center no-repeat;
	}
	#ConArea #C4.CA {
		background: #000 url(../../images/sp/c4_bg.png) top center no-repeat;
	}
	#ConArea #C5.CA {
		background: #000 url(../../images/sp/c5_bg.png) top center no-repeat;
	}
	#ConArea #C1.CA,
	#ConArea #C2.CA,
	#ConArea #C3.CA,
	#ConArea #C4.CA,
	#ConArea #C5.CA {
		background-size: cover;
	}
	#ConArea .descri {
		margin: 0 auto;
		padding: 20% 0;
		max-width: 100%;
		width: 100%;
	}
	#ConArea .descri p {
		margin-bottom: 10%;
	}
	#ConArea .descri img.cs {
		margin: 0 auto;
		max-width: 100%;
		width: 50%;
	}

	/* ===========================================
	スペック
	=========================================== */
	#Spec {
		width: 100% !important;
		padding: 10% 0;
		background: #000 url(../../images/pc/bg.jpg) center top repeat-x;
		background-size: 100% 100%;
	}
	#Spec h3 {
		margin: 0 auto;
		width: 30%;
	}
	#Spec p {
		margin: 10% auto 0;
		width: 100%;
	}

	#Spec p.Spec_btn {
		max-width: none;
		height: auto;
		width: 65vw;
	}

	/* ===========================================
	解像度比較表
	=========================================== */
	#resol {
		margin: 10% 0 0;
	}
	#resol h3 {
		margin: 0 auto 15px;
		width: 180px;
	}
	#resol p {
		width: 90%;
		font-size: 4vw;
		margin-bottom: 4vw;
	}

  #resol .conW{
    height:728px;
    overflow:auto;
  }

  #resol .conW >img{
    width:auto; height:100%;
  }

	/* ===========================================
	スペック比較表
	=========================================== */
  #spec_comparison .conW{
    height:728px;
    overflow:auto;
  }

  #spec_comparison .conW >span{
    width:min-content; height:100%;
  }

  #spec_comparison .conW >span >img{
    width:auto; height:100%;
  }

	#spec_comparison {
		margin: 10% 0 0;
	}

	#spec_comparison h3 {
		margin: 0 auto 15px;
		width: 58vw;
	}

	#spec_comparison p {
		width: 90%;
		font-size: 4vw;
		margin-bottom: 4vw;
	}

	#spec_comparison .table_wrap {
		width: 90%;
		margin: 0 auto;
		overflow: scroll;
	}

	#spec_comparison table {
		margin: 0 auto;
		padding: 0;
		max-width: 1620px;
		width: 200%;
		border-collapse: collapse;
		border-spacing: 0;
		font-size: 3.2vw;
		letter-spacing: 0.04em;
	}

	#spec_comparison table ul li {
		margin-left: 4vw;
	}

	#spec_comparison .flex {
		display: flex;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 3vw;
		align-items: center;
    justify-content: center;
	}
	#spec_comparison p.txt {
		margin: 0;
		width: auto;
	}

	#spec_comparison .arrow {
		width: 3vw;
		max-width: 24px;
		height: auto;
	}

	#spec_comparison .arrow.rotate {
		transform: rotate(-180deg);
		margin-right: 2vw;
	}

	#bnr_about {
		display: none !important;
	}

	.store_bnr {
    justify-content: center;
    flex-wrap: wrap;
    padding: 4vw 0;
    width: 80%;
	}

	.store_bnr li {
		width: 100%;
    max-width:unset;
		margin-bottom: 4vw;
	}

	.store_bnr li:last-child {
		margin-bottom: 0;
	}
}

.questionnaire {
	max-width: 	1170px;
	width: 75%;
	margin: 0 auto;
	margin-bottom: 1vw;
	display: flex;
	justify-content: space-between;
}

/* .questionnaire li:first-child {
	margin-right: 2vw;
} */

.questionnaire a {
	display: inline-block;
	max-width: 380px;
	width: calc(380 / 1600 * 100vw);
}

.questionnaire img{
	max-width: 100%;
	height: auto;
}
@media only screen and (max-width: 750px) {
	.questionnaire {
		display: block;
		width: 80%;
		margin-bottom: 3vw;
	}
	.questionnaire li {
		margin-bottom: 3vw;
	}
	/* .questionnaire li:first-child {
		margin-right: 0;
	} */
	.questionnaire li:last-child {
		margin-bottom: 0;
	}
	.questionnaire a {
		width: 100%;
	}
}

.img_border img {
	border: 1px solid #ffffff;
}