/* CSS Document */

/** サムネイルリスト（イベント等で使い回す？） **/
.product_list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}
.product_list .item {
	display: flex;
	flex-direction: column;
	cursor: pointer;
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--txt-size-m);
	background-color: #fff;
	padding: 10px;
	border: 2px solid var(--color-text);
	box-shadow: 3px 3px 0px var(--color-text);
}

.product_list .item .top {
	flex-grow: 1;
}
.product_list .item .top .subject {
	font-weight: bold;
	line-height: 1.45;
}

.product_list .item .bottom {
	font-size: var(--txt-size-xs);
	padding-top: 15px;
}
.product_list .item .bottom .date span,
.product_list .item .bottom .price span{
	font-weight: bold;
	width: 7em;
}

.product_list .item .thumb {
  width: 100%;
	padding: 15px;
	background-color: #f0f0f0;
	margin-bottom: 12px;
	line-height: 1.5;
}

@media screen and (max-width: 767px) {
.product_list {
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	width: calc(100% - 16px);
	margin: 0 auto 20px;
}
.product_list .item {
	padding: 6px;
	box-shadow: none;
}
.product_list .item .thumb {
	padding: 8px;
	margin-bottom: 6px;
}
}



.product_list .item .thumb img {
  object-fit: contain;
	width: 100%;
	height: 100%;
	transition: 0.3s transform ease;
}
.product_list .item:hover .thumb img {
	transform: scale(1.15)
}

.tag {
	padding: 2px 15px;
	color: #fff;
	border-radius: 99px;
	font-size: var(--txt-size-xs);
}
@media screen and (max-width: 767px) {
.tag {
	padding: 1px 8px;
}
}

.btn.pack.current,
.bg-pack {
	border-color: #FF3C3C;
	background-color: #FF3C3C;
}
.btn.deck.current,
.bg-deck {
	border-color: #F0D90E;
	background-color: #F0D90E;
}
.btn.peripheral.current,
.bg-peripheral {
	border-color: #499BFF;
	background-color: #499BFF;
}

.product_grid {
	display: flex;
	gap: 15px;	
}
.product_grid .product_image {
	width: 500px;
	display: flex;
	flex-direction: column;
	gap:10px;
}
@media screen and (max-width: 767px) {
.product_grid {
	display: block;
}
.product_grid .product_image {
	width: 100%;
}
}


.product_grid .mainImage {
	padding: 5px;
	background-color: #fff;
}
.product_grid .product_image .thumbs {
	display: flex;
	gap:10px;
	justify-content: center;
}
.product_grid .product_image .thumbs img {
	padding: 5px;
	width: 25%;
	background-color: #fff;
}
.product_grid .product_image .thumbs .current {
	border: 3px solid var(--color-sub);
}
.product_grid .product_text {
	flex: 1;
}