@charset "utf-8";
/***********************************************************
 トップページ 商品カード（新しい書き方版）
 ・pub_item.php の表（table）レイアウトを、グリッドで置き換えたもの
 ・見た目は元の #items（style.css）の設定に合わせている
************************************************************/

/* 3列に並べる（210px × 3列 ＋ すき間15px × 2 ＝ 660px） */
.item-grid {
	display: grid;
	grid-template-columns: repeat(3, 210px);
	column-gap: 15px;
	row-gap: 15px;
}

/* 同じ行のカードの高さをそろえる（元の表と同じく、短いタイトルの帯も同じ高さに伸ばす） */
.item-card {
	display: flex;
}

/* カード全体を1つのリンクにする */
.item-card__link,
.item-card__link:link,
.item-card__link:visited,
.item-card__link:hover,
.item-card__link:active {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}
.item-card__link {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* 上段：発売日（ピンクの帯・上の角だけ丸く） */
.item-card__release {
	display: block;
	background-color: #ff84a1;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	text-align: right;
	padding: 4px 6px 2px 4px;
	border-radius: 6px 6px 0 0;
}

/* 中段：商品画像 */
.item-card__image {
	display: block;
	position: relative;
	padding: 4px 0;
	line-height: 0;
}
.item-card__photo {
	display: block;
	width: 210px;
	height: 298px;
}

/* セールマーク（画像の左下・右下に重ねる） */
.item-card__badge {
	position: absolute;
	bottom: 4px;
	line-height: 0;
}
.item-card__badge--point { left: 0; }  /* ソクミルPOINT増量 */
.item-card__badge--sale  { right: 0; } /* 動画配信SALE */

/* 下段：演者「タイトル」（ピンクの帯・下の角だけ丸く） */
.item-card__title {
	display: block;
	background-color: #ff84a1;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	padding: 5px 6px 4px 6px;
	line-height: 17px;
	border-radius: 0 0 6px 6px;
	flex: 1;                 /* 余った高さいっぱいに伸ばす */
	display: flex;
	flex-direction: column;
	justify-content: center; /* 文字を上下の真ん中に（元の表と同じ） */
}

/* マウスを乗せたとき、商品画像を少し薄くする（元のJavaScriptの動きをCSSで再現） */
.item-card__link:hover .item-card__photo {
	opacity: 0.6;
	transition: opacity 0.2s;
}

/* 「作品をすべて見る」ボタン */
.item-more {
	text-align: right;
	margin: 15px 0 15px 0;
	line-height: 0;
}
.item-more a:hover img {
	opacity: 0.6;
	transition: opacity 0.2s;
}

/* スマホ表示（#contents_smp の中）のときの文字サイズ（元の設定と同じ） */
#contents_smp .item-card__release { font-size: 120%; line-height: 1.4em; }
#contents_smp .item-card__title   { font-size: 125%; line-height: 1.3em; }
#contents_smp .item-more          { margin-top: 20px; }

/* ただいま制作中（元の #items と同じ余白） */
.items-reservation {
	padding: 15px 0 20px 0;
}

/* 人気作品ピックアップ（元の表の最後の行のすき間 15px と同じ） */
#items_favorite_pickup .item-grid {
	margin-bottom: 15px;
}