@charset "utf-8";

/* CSS Document */

/*------------------------

	2020 sale

------------------------*/

.sale2020 {
	font-family: 'Noto Sans Japanese';
	text-align: center;
	margin-top: 30px;
}

.sale2020 .price-arrow {
	width: 18px !important;
}

.sale2020-lead img {
	max-width: 394px;
	width: 60%;
}

.sale2020-period {
	font-size: 15px;
	font-weight: bold;
	margin: 1em 0;
}

.sale2020-price {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}

.sale2020 .price-small {
	font-size: .55em;
}

.sale2020 .price-big {
	font-weight: bold;
	margin-right: .2em;
}

.sale2020 .default-price {
	position: relative;
	font-size: 22px;
}

.sale2020 .default-price:after {
	content: "";
	position: absolute;
	display: block;
	height: 2px;
	bottom: 40%;
	width: 100%;
	background: #000;
}

.sale2020 .sale-price {
	font-size: 33px;
	color: #e60012;
	position: relative;
	top: -.2em;
}

.sale2020 .price-arrow {
	margin: 0 10px;
}

.sale2020 .nintendo-store-btn {
	position: relative;
	margin-bottom: 60px;
	display: block;
	background: #e60012;
	color: #fff;
	width: 90%;
	margin: 0 auto 4%;
	padding: 4% 0;
	text-align: center;
	padding: 14px 0;
	margin-top: 16px;
	text-decoration: none;

}

#wrapper .nintendo-store-btn img {
	width: 60%;
}



.sale2020 .nintendo-store-btn:after {
	content: "";
	display: block;
	width: 11px;
	height: 21px;
	right: 10px;
	background: url(../../images/sale-2020/btn-arrow.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

}


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

	.nintendo-store-btn:after,
	.xx-site-btn:after {
		width: 11px;
		height: 21px;
		right: 10px;
	}
}

.sale2020 .nintendo-store-btn img {
	width: 220px;
}

.sale2020 .nintendo-store-btn-text {
	margin-top: .6em;
	font-size: 16px;
	line-height: 1;
}

/******************************************

	top

******************************************/

/*** SP/TB（縦） ***/

@media only screen and (max-width: 599px),
only screen and (min-width: 600px) {

	#wrapper img {

		height: auto;

		width: 100%;

	}

}



.inner {

	height: auto;

	padding-left: 2.67%;

	padding-right: 2.67%;

}



h3 {

	background: url(../images/index/bg_h3.png) no-repeat center 0;

	background-size: 100%;

	width: 100%;

	padding-bottom: 16.67%;

	margin-top: 1em;

}



h4 {

	font-family: 'Noto Sans Japanese';

	text-align: center;

	font-weight: 500;

	font-size: 200%;

	line-height: 1.3em;

	margin: 0.7em 0 1em;

}



#area_01 p,
#area_02 p,
#area_03 dl,
#area_04 dl {

	font-family: 'Noto Sans Japanese';

	text-align: center;

	font-weight: 500;

	line-height: 1.4em;

}



/*------------------------

	mainImg

------------------------*/

#mainImg {

	background: url(../images/index/bg_main.jpg) center 0 no-repeat;

	background-size: 100%;

}



#main .inner {

	position: relative;

}



#mainImg #deviceLogo {

	position: absolute;

	right: 0;

	width: 16%;

}



#mainImg h1#logo {

	background: url(../images/common/logo.png) center 0 no-repeat;

	width: 56.8%;

	padding-bottom: 43.46%;

	position: absolute;

	left: 18%;

	top: 1%;

}



#mainImg .hard {

	padding-top: 74%;

}



#mainImg h2.release {

	background: url(../images/index/read_ttl.png) center 0 no-repeat;

	width: 100%;

	padding-bottom: 25.35%;

}



#mainImg .img03 {

	background: url(../images/index/main_img03.png) center 0 no-repeat;

	width: 100%;

	padding-bottom: 19.01%;

}



#mainImg .impotant {

	background: #252525;

	color: white;

	width: 100%;

	line-height: 1.4em;

	padding: 4% 4.67%;

	margin: 1em auto 2em;

}



#mainImg .impotant dt {

	font-size: 140%;

	font-weight: bold;

	margin-bottom: 0.7em;

	margin-left: -0.5em;

}



#mainImg .impotant dd {

	margin-bottom: 1em;

	width: 93%;

}



#mainImg .impotant dd:last-child {

	margin-bottom: 0;

}



#mainImg .impotant dd span {

	margin-right: 0.5em;

}



#mainImg .impotant dd a {

	color: #ffee00;

}



#mainImg .news {

	width: 100%;

	height: auto;

	margin-top: 1em;

	background: rgba(0, 27, 130, 0.8);

	border-top: solid 2px white;

	border-bottom: solid 2px white;

	box-shadow: 0px 0px 6px 2px;

}



#mainImg .news li {

	clear: both;

	width: 94.66%;

	margin: 0.8em 2.67% 0;

	border-bottom: solid 1px grey;

	display: inline-block;

}



#mainImg .news li a {

	text-decoration: none;

}



#mainImg .news li:last-child {

	border-bottom: solid 0px white;

}



#mainImg .news li dl {

	margin-left: 2%;

	margin-bottom: 1em;

	line-height: 1.4em;

}



#mainImg .news li dl dt {

	text-decoration: none;

	text-align: center;

	line-height: 1.3em;

	font-weight: 500;

	white-space: nowrap;

	font-size: 160%;

	margin-bottom: 0.1em;

	color: white;

	text-shadow: 0px 0px 6px #000000, 0px 0px 6px #000000, 0px 0px 6px #000000, 0px 0px 6px #000000;

}



#mainImg .news li dl .img {

	float: left;

	width: 35.21%;

	height: 29.57%;

	margin-top: 0.5em;

}



#mainImg .news li dl dd {

	float: left;

	width: 57.5%;

	margin: 0.5em 0em 1.1em 0.8em;

	line-height: 1.4em;

	text-decoration: none;

	display: block;

	background: #00012d;

	color: #999999;

	position: relative;

	padding: 0.5em 0.5em 28% 0.7em;

}



#mainImg .news li.date_in dl dd {

	padding-bottom: 23.5%;

}



/*#mainImg .news li dl dd{

	float: left;

	width:57.5%;

	margin: 0.4em 0em 1.1em 0.8em;

	line-height: 1.4em;

	text-decoration:none;

	display: block;

	background: #00012d;

	color:#999999;

	position: relative;

	padding:0.5em 0.5em 23.5% 0.7em;

	}*/

#mainImg .news li dl dd:after {

	content: "";

	background: url(../images/index/btn_icon.png) 0 0 no-repeat;

	background-size: 100%;

	width: 9.65%;

	padding-bottom: 5.16%;

	position: absolute;

	bottom: 0.5em;

	right: 0.5em;

}



#mainImg .news li dl dd .date {

	text-decoration: none;

	color: #ff9900;

	margin-bottom: 2px;

}



#mainImg .news li dl dd .new:after {

	content: "NEW";

	color: #cc3333;

	margin-left: 0.5em;

}



#mainImg .news li dl dd .txt {

	position: absolute;

	line-height: 1.8em;

}





#mainImg .topics:before {

	content: "";

	display: block;

	background: url(../images/common/prev.png) 0 0 no-repeat;

	background-size: 100%;

	width: 4.8%;

	padding-bottom: 4.8%;

	position: absolute;

	margin-top: 15%;

	margin-left: 0.5%;

}



#mainImg .topicsList:before {

	content: "";

	display: block;

	background: url(../images/common/next.png) 0 0 no-repeat;

	background-size: 100%;

	width: 4.8%;

	padding-bottom: 4.8%;

	position: absolute;

	right: 0.5%;

	margin-top: 15%;

}



#mainImg .topicsList {

	margin: 1.5em 5.67% 3em;

}



#mainImg .topicsList .bx-wrapper .bx-viewport {

	padding-bottom: 0% !important;

	height: 13em !important;

}



#mainImg .topics li {

	background: rgba(0, 0, 0, 0.8);

	width: 92%;

}



#mainImg .topics li a {

	text-decoration: none;

}



#mainImg .topics li dl dt {

	text-decoration: none;

	text-align: center;

	line-height: 1.3em;

	font-weight: 500;

	font-size: 148%;

	margin-top: 0.3em;

	color: white;

	text-shadow: 0px 0px 6px #000000, 0px 0px 6px #000000, 0px 0px 6px #000000, 0px 0px 6px #000000;

}



#mainImg .topics li dl .img {

	float: left;

	width: 35%;

	height: 29.57%;

	margin-left: 1em;

	margin-top: 0.5em;

}



#mainImg .topics li dl dd {

	float: left;

	width: 50.5%;

	margin: 0.4em 0em 1.1em 0.8em;

	line-height: 1.4em;

	text-decoration: none;

	display: block;

	background: black;

	color: #999999;

	position: relative;

	padding: 0.5em 0.5em 23.5% 0.7em;

}



#mainImg .topics li dl dd:after {

	content: "";

	background: url(../images/index/btn_icon.png) 0 0 no-repeat;

	background-size: 100%;

	width: 9.65%;

	padding-bottom: 5.16%;

	position: absolute;

	bottom: 0.5em;

	right: 0.5em;

}



#mainImg .topics li dl dd .date {

	text-decoration: none;

	color: #ff9900;

	margin-bottom: 2px;

}



#mainImg .topics li dl dd .new:after {

	content: "NEW";

	color: #cc3333;

	margin-left: 0.5em;

}



#mainImg .topics li dl dd .txt {

	position: absolute;

}



#news01 .photo img {

	margin-top: 40px;

}



#modal {

	display: none;

}



/*------------------------

	feature

------------------------*/

#feature {

	background: url(../images/index/bg_feature.jpg) no-repeat center 0;

	background-size: 100%;

	height: 65.33%;

}



#feature .img01 {

	background: url(../images/index/feature_img01.png) no-repeat center 0;

	width: 100%;

	padding-bottom: 8%;

}



#feature .img02 {

	background: url(../images/index/feature_img02.png) no-repeat center 0;

	width: 100%;

	padding-bottom: 20%;

	margin-top: 5.3em;

	display: block;

}



#feature p {

	line-height: 1.4em;

}



/*------------------------

	area_point

------------------------*/

#area_point {

	padding-top: 0.5em;

}



#area_point .img01 {

	background: url(../images/index/point_img01.png) no-repeat center 0;

	width: 100%;

	padding-bottom: 57.06%;

}



/*------------------------

	area_01

------------------------*/

#area_01 h3 {

	margin-top: -0.1em;

}



#area_01 h3 p {

	background: url(../images/index/area_01_h3.png) no-repeat center 0;

	width: 100%;

	padding-bottom: 8.2%;

	margin-bottom: -1.8em;

	position: relative;

	top: 1.8em;

}



#area_01 li dl {

	font-weight: 500;

	width: 100%;

	margin: 1em 0;

	position: relative;

	left: 17%;

}



#area_01 li dl dt {

	font-size: 180%;

	line-height: 1.6em;

	width: 30.98%;

	text-align: center;

	border: solid 2px black;

	float: left;

}



#area_01 li dl dd {

	font-size: 200%;

	line-height: 1.4em;

	float: left;

	margin-left: 0.5em;

}



#area_01 li p {

	clear: both;

}



.screenshot {

	margin-top: 5em;

	margin-bottom: 5em;

}



.screenshot li img {

	width: 100% !important;

	height: auto;

	box-sizing: border-box;

}



/*------------------------

	area_02

------------------------*/

#area_02 h3 p {

	background: url(../images/index/area_02_h3.png) no-repeat center 0;

	width: 100%;

	padding-bottom: 8.2%;

	margin-bottom: -1.8em;

	position: relative;

	top: 1.8em;

}



/*------------------------

	area_03

------------------------*/

#area_03 h3 p {

	background: url(../images/index/area_03_h3.png) no-repeat center 0;

	width: 100%;

	padding-bottom: 8.2%;

	margin-bottom: -1.8em;

	position: relative;

	top: 1.8em;

}



#area_03 li dl dt {

	font-size: 180%;

	line-height: 1.6em;

	width: 80%;

	text-align: center;

	margin: 0 auto;

	border: solid 2px black;

}





#area_03 .comments {

	line-height: 1.4em;

	display: block;

	margin-bottom: 4em;

	font-weight: 500;

	text-align: left;

}



/*------------------------

	area_04

------------------------*/

#area_04 h3 p {

	background: url(../images/index/area_04_h3.png) no-repeat center 0;

	width: 100%;

	padding-bottom: 8.2%;

	margin-bottom: -1.8em;

	position: relative;

	top: 1.8em;

}



#area_04 li dl dt {

	font-size: 180%;

	line-height: 1.6em;

	width: 80%;

	text-align: center;

	margin: 0 auto;

	border: solid 2px black;

}



#area_04 p {

	line-height: 1.4em;

	font-weight: 500;

	text-align: center;

}



#area_04 .comments {

	line-height: 1.4em;

	display: block;

	padding-top: 2em;

	margin-bottom: 3.5em;

	text-align: left;

}



/*------------------------

	dlc

------------------------*/

#dlc .h3 {

	font-family: 'Noto Sans Japanese';

	background: black;

	color: white;

	font-weight: 500;

	font-size: 150%;

	padding: 0.2em 0 0.3em;

	line-height: 1.4em;

	text-align: center;

}



#dlc p {

	line-height: 1.4em;

	font-family: 'Noto Sans Japanese';

	font-weight: 500;

}



#dlc .img01 {

	margin-bottom: 2.5em;

}



/*------------------------

	link

------------------------*/

#link {

	background: url(../images/index/bg_link.jpg) center 0 no-repeat;

	background-size: 100%;

	padding-bottom: 32%;

}



#link ul {

	position: relative;

	top: 1em;

}



#link ul li:first-child {

	width: 38.02%;

	float: left;

}



#link ul li:last-child {

	width: 61.98%;

	float: left;

}



#link .img01 {

	background: url(../images/index/link_img01.png) center 0 no-repeat;

	padding-bottom: 71.06%;

}



#link .img02 {

	background: url(../images/index/link_img02.png) no-repeat center 0;

	padding-bottom: 15.68%;

}



/*------------------------

	spec

------------------------*/

#spec {

	background-color: black;

	width: 100%;

	padding: 1em 0 20em;

}



#spec .inner {

	width: 100%;

}



#spec ul {

	color: #c9bfab;

}



#spec ul li {

	letter-spacing: normal;

	line-height: 1.8em;

	text-align: left;

}



#spec .title {

	color: #c8a57b;

	font-size: 115%;

	font-weight: bold;

}



#spec .price-ind {

	margin-left: 23.9%;

	text-indent: -23.9%;

}



#spec .short {

	margin-left: 11.9%;

	text-indent: -11.9%;

}



#spec .cero {

	margin-top: 0.5em;

	width: 43px;

	height: 52px;

}



.faq {

	margin-top: -18.8em;

}



.faq li {

	text-align: center;

	margin-bottom: 1em;

	background: black;

}



.faq li a {

	color: white;

	border: solid 1px white;

	padding: 1.4em 7.5em;

	text-decoration: none;

	display: block;

}



.faq li:first-child a {

	padding: 0.6em 7.5em;

	line-height: 1.4em;

}



.faq li:after {

	content: "＞";

	color: white;

	position: absolute;

	right: 6em;

	margin-top: -2.5em;

}







/*------------------------

	area_bnr

------------------------*/

#area_bnr {

	border-top: solid 1px #444;

	text-align: center;

	padding: 1em 0;

	background: black;

}