@charset "UTF-8";

.contents-store {
	padding: 40px 0;
}

.store-block {
	width: 90%;
	max-width: 500px;
	margin: 0 auto;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}

.contents-store .store-block:first-child {
	margin-top: 50px;
}

.contents-store .store-block:not(:first-child) {
	margin-top: 20px;
}

.store-ttl {
	box-sizing: border-box;
	width: 105px;
	text-align: left;
	font-size: 12px;
	padding: 8px 20px 8px 0;
}

.store-main {
	box-sizing: border-box;
	min-height: 80px;
	width: calc(100% - 105px);
	padding: 8px 0 8px 20px;
	border-left: 1px rgba(255, 255, 255, 0.4) solid;
	text-align: left;
}

.store-main .text {
	padding-top: 20px;
	font-size: 12px;
	color: #fff;
	text-align: left;
}

@media screen and (min-width: 751px){
	.contents-store {
		padding: 80px 0;
	}

	.store-block {
		width: 95%;
		max-width: 1000px;
	}

	.store-ttl {
		width: 180px;
		text-align: right;
		font-size: 16px;
	}

	.store-main {
		width: calc(100% - 180px);
	}
}


/* select */

.selectCountry {
	position: relative;
	width: 100%;
	max-width: 280px;
}

.selectCountry:after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	position: absolute;
	right: 15px;
	top: 45%;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	transform: translateY(-50%) rotate(45deg);
}

.countryList {
	box-sizing: border-box;
	width: 100%;
	color: #fff;
	padding: 10px 12px;
	border: 2px #fff solid;
	background: #000;
	position: relative;

	outline:none;
	text-indent: 0.01px;
	text-overflow: '';
	vertical-align: middle;
	font-size: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.countryList option{
	background-color: #fff;
	color: #333;
}
.countryList::-ms-expand {
	display: none;
}
.countryList:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #828c9a;
}


/***
 * tab
 * 
*/
.contents-store {
	text-align: center;
}
.tabBtn label {
	box-sizing: border-box;
	display: inline-block;
	cursor: pointer;
	transition: .2s;
	min-width: 100px;
	border: 2px #fff solid;
	background: #000;
	padding: 7px 12px;
	margin: 0 5px 10px 0;
	text-align: center;
	font-size: 12px;
}
.tabBtn label:hover {
	opacity: 0.5;
}
.tabBtn label.active {
	color: #000;
	background: #fff;
}
.shopList {
}
.tabArea {
	display: none;
}
.tabBtn label.active {
}
.tabArea.active {
	display: block;
}

@media screen and (min-width: 751px){
	.tabBtn label {
		min-width: 115px;
		font-size: 14px;
	}
}


/***
 * shop list
 *
 *
*/
.products-list-switch,
.products-list-steam,
.products-list-xbox,
.products-list-ps4 {
	list-style: none;
}

.products-list-switch li:not(:first-child),
.products-list-steam li:not(:first-child),
.products-list-xbox li:not(:first-child),
.products-list-ps4 li:not(:first-child) {
	margin-top: 30px;
}

.products-list-switch dt img,
.products-list-steam dt img,
.products-list-xbox dt img,
.products-list-ps4 dt img {
	width: 100%;
}

.products-list-switch dd,
.products-list-steam dd,
.products-list-xbox dd,
.products-list-ps4 dd {
	margin-top: 5px;
}

.products-list-switch dd em,
.products-list-steam dd em,
.products-list-xbox dd em,
.products-list-ps4 dd em {
	display: block;
	margin-top: 5px;
}

.products-list-switch dd h1,
.products-list-steam dd h1,
.products-list-xbox dd h1,
.products-list-ps4 dd h1 {
	font-size: 18px;
	line-height: 22px;
	margin-top: 10px;
	display: block;
}

.products-list-switch dd h2,
.products-list-steam dd h2,
.products-list-xbox dd h2,
.products-list-ps4 dd h2 {
	font-size: 15px;
	margin-top: 20px;
}

.products-list-switch dd .btn a,
.products-list-steam dd .btn a,
.products-list-xbox dd .btn a,
.products-list-ps4 dd .btn a {
	background: url(../img/button_store.png) no-repeat;
	background-size: 100% 100%;
	position: relative;
	display: block;
	max-width: 250px;
	padding: 5px 10px 5px 35px;
	text-align: center;
	text-decoration: none;
}

.products-list-switch dd .btn a:after,
.products-list-steam dd .btn a:after,
.products-list-xbox dd .btn a:after,
.products-list-ps4 dd .btn a:after {
	content: '';
	display: block;
	width: 17px;
	height: 18px;
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: url(../img/icon_cart.png) no-repeat;
	background-size: 100% auto;
}

.products-list-switch dd .btn p,
.products-list-steam dd .btn p,
.products-list-xbox dd .btn p,
.products-list-ps4 dd .btn p {
	width: 100%;
	color: #2a0b07;
	font-size: 11px;
	font-weight: bold;
	text-shadow: 0 1px 0 rgba(237, 211, 118, 0.5);
	font-family: 'arial', Meiryo, メイリオ, "游ゴシック", "Yu Gothic UI", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, 'MS PGothic', helvetica, sans-serif;
	letter-spacing: 0.05rem;
}

.products-list-switch dd .btn span,
.products-list-steam dd .btn span,
.products-list-xbox dd .btn span,
.products-list-ps4 dd .btn span {
	display: inline-block;
}

.products-list-switch dd .detail,
.products-list-steam dd .detail,
.products-list-xbox dd .detail,
.products-list-ps4 dd .detail {
	margin: 10px 0;
}

.products-list-switch dd .detail p:not(:first-child),
.products-list-steam dd .detail p:not(:first-child),
.products-list-xbox dd .detail p:not(:first-child),
.products-list-ps4 dd .detail p:not(:first-child) {
	margin-top: 3px;
}

.products-list-switch dd .detail span,
.products-list-steam dd .detail span,
.products-list-xbox dd .detail span,
.products-list-ps4 dd .detail span {
	color: #f8b551;
}

.steam-spec_ttl {
	color: #f8b551;
	margin: 40px 0 8px;
	font-size: 14px;
	font-weight: normal;
}

.steam-spec .detail {
	width: 100%;
	max-width: 450px;
}

.steam-spec .detail td {
	border: 1px #999 solid;
	padding: 3px 8px;
	font-size: 11px;
}

.steam-spec .more-text {
	width: 100%;
	margin-top: 30px;
	font-size: 12px;
	line-height: 22px;
}


.steam-spec tr td:nth-child(odd) {
	width: 80px;
	font-size: 10px;
}

.steam-spec tr td:nth-child(even) {
	width: calc(100% - 80px);
}

@media screen and (min-width: 751px){
	.steam-spec .more-text {
		font-size: 13px;
		line-height: 24px;
	}

	.products-list-switch li:not(:first-child),
	.products-list-steam li:not(:first-child),
	.products-list-xbox li:not(:first-child),
	.products-list-ps4 li:not(:first-child) {
		margin-top: 15px;
	}

	.products-list-switch dl,
	.products-list-steam dl,
	.products-list-xbox dl,
	.products-list-ps4 dl {
		overflow: hidden;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
	}

	.products-list-switch dt,
	.products-list-steam dt,
	.products-list-xbox dt,
	.products-list-ps4 dt {
		width: 200px;
	}

	.products-list-switch dd,
	.products-list-steam dd,
	.products-list-xbox dd,
	.products-list-ps4 dd {
		padding-left: 20px;
	}

	.products-list-switch dd .btn a,
	.products-list-steam dd .btn a,
	.products-list-xbox dd .btn a,
	.products-list-ps4 dd .btn a {
		max-width: 100%;
		display: inline-block;
		transition: .3s;
	}

	.products-list-switch dd .btn a:hover,
	.products-list-steam dd .btn a:hover,
	.products-list-xbox dd .btn a:hover,
	.products-list-ps4 dd .btn a:hover {
		opacity: .6;
	}

	.products-list-switch dd .btn span,
	.products-list-steam dd .btn span,
	.products-list-xbox dd .btn span,
	.products-list-ps4 dd .btn span {
		font-size: 14px;
	}

	.steam-spec_ttl {
		margin-top: 30px;
	}

	.steam-spec .detail td {
		font-size: 13px;
	}

	.steam-spec tr td:nth-child(odd) {
		font-size: 12px;
	}

	.steam-spec tr td:nth-child(odd) {
		width: 130px;
	}

	.steam-spec tr td:nth-child(even) {
		width: calc(100% - 130px);
	}
}

/***
 * animation
 *
*/
.fadeIn {
	animation: fadeIn 1s ease-in-out;
}
.fadeOut {
	animation: fadeOut 1s ease-in-out;
}
@keyframes fadeIn {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes fadeOut {
	0%{opacity: 1;}
	100%{opacity: 0;}
}