@charset "utf-8";
/***********************************************************
 「ダウンロード販売」「DMMブックス」「ソクミル」のランダム表示（新しい書き方版）
 ・元は1件ごとに表（table）を横に並べていたものを、div で置き換えたもの
 ・見た目は元の #pickup2〜4 / #pickup2_smp〜4_smp（style.css）の table の設定に合わせている
************************************************************/

/* ---------- PCサイドバー：2列に並べる ---------- */
#pickup2 .data .pk-item,
#pickup3 .data .pk-item,
#pickup4 .data .pk-item {
	float: left;
	margin: 0 10px 10px 0;
	width: 135px;
}
#pickup2 .data .pk-item:nth-child(even),
#pickup3 .data .pk-item:nth-child(even),
#pickup4 .data .pk-item:nth-child(even) {
	margin-right: 0;
}

/* ダウンロード販売：商品画像＋セールマーク（画像の左下・右下） */
#pickup2 .data .pk-item {
	height: 192px;
	position: relative;
}
#pickup2 .data .pk-item .td_sale {
	position: absolute;
	right: 0;
	bottom: 0;
}
#pickup2 .data .pk-item .td_sale_sokmil {
	position: absolute;
	left: 0;
	bottom: 0;
}

/* DMMブックス・ソクミル：枠の中で画像を上下左右の真ん中に */
#pickup3 .data .pk-item,
#pickup4 .data .pk-item {
	height: 196px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#pickup3 .data .pk-item img,
#pickup4 .data .pk-item img {
	max-width: 135px;
	max-height: 196px;
}


/* ---------- スマホ：4列に並べる ---------- */
#pickup2_smp .data .pk-item,
#pickup3_smp .data .pk-item,
#pickup4_smp .data .pk-item {
	float: left;
	margin: 0 9px 9px 0;
}
#pickup2_smp .data .pk-item:nth-child(4n),
#pickup3_smp .data .pk-item:nth-child(4n),
#pickup4_smp .data .pk-item:nth-child(4n) {
	margin-right: 0;
}

/* ダウンロード販売 */
#pickup2_smp .data .pk-item {
	position: relative;
}
#pickup2_smp .data .pk-item a img {
	width: 158px;
	height: 224px;
}
#pickup2_smp .data .pk-item .td_sale img,
#pickup2_smp .data .pk-item .td_sale_sokmil img {
	width: 53px;
}

/* DMMブックス・ソクミル */
#pickup3_smp .data .pk-item,
#pickup4_smp .data .pk-item {
	width: 148px;
	height: 223px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#pickup3_smp .data .pk-item img,
#pickup4_smp .data .pk-item img {
	width: 148px;
	max-height: 223px;
}