@charset "utf-8";

/**
 * 一覧カードのタイプ別フレーム（2026/10/01 追加）
 *
 * 使うページ   TOP一覧（C-4 / C-7）
 *              ウォッシュ／マリアージュ・ライブラリ（D-4 / D-5）
 *
 * ■ 依頼元の参考画像（PC 3列・カード幅 392px）の実測
 *
 *   フレームの外形 60–452 に対して、サムネの枠（3px の焦げ茶）が 77–436。
 *   内側への余白は 約17px ＝ カード幅の 4.3%。
 *   ⇒ padding を % で持つ（% は幅基準なので縦も同じ比率になる）。
 *
 *   枠の画像は 590×590 の1枚絵。左上と右下に切れ目がある。
 *     マリアージュ  img_frameMariage.png（#E18551 系）
 *     ウォッシュ    img_frameWash.png（#5BC2C1 系）
 *   ★色の決め方は pairing_card.php にある。TOP はフラグで決め（両方立って
 *     いればマリアージュ）、ライブラリはそのページのタイプで固定する。
 *
 * ■ pc.css / sp.css に混ぜない
 *
 *   一覧カードだけの指定なので、不要になったら link ごと外せるようにする。
 *   読んでいるのは top.php と type_library.php の2本。
 */

.pairFrame {
	padding: 4.3%;
	background: no-repeat center / 100% 100%;
}

/* ★figure の既定マージン（16px 40px）を消す。サイト共通のリセットに
   頼らない（Docker のスタブには無く、ローカルで枠の内側が大きく空いた） */
.pairFrame figure {
	margin: 0;
}

/* ★同じ理由で、サムネも枠の幅に収める。sp.css には max-width が無く、
   ローカルでは 572px の原寸で縦に伸びた（枠の画像が 100% 100% で追従して崩れる） */
.pairFrame .pairListItemsImg {
	display: block;
	width: 100%;
	height: auto;
}

.pairFrame--mariage {
	background-image: url(/RD/sakepair-lab/lib/img/index/img_frameMariage.png);
}

.pairFrame--wash {
	background-image: url(/RD/sakepair-lab/lib/img/index/img_frameWash.png);
}

/**
 * タイプのラベル（マリアージュ／ウォッシュ）を【横並び】にする。
 *
 *   既存CSSは img を display:block で縦に積んでいる。
 *   参考画像は横並びで、間隔は 約10px。
 *   ★入り切らない幅では折り返す。
 *   ★.pairFrame の後ろの .tagWrap だけに効かせる（＝枠付きの一覧だけ）。
 *     ライブラリはラベルが1枚なので、横並びにしても並びは変わらない。
 *     ただし下の SP 指定でラベルの大きさは TOP と揃う（2026/10/01）。
 */
.pairFrame ~ .tagWrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

/**
 * ===== SP（〜767px）=====
 *
 * ★ラベルの大きさを【高さ】で固定する（2026/10/01）。
 *   sp.css は .tagWrap に max-width:84px を持っていて、縦積み前提で
 *   画像の幅を 84px に縮めていた（＝マリアージュとウォッシュで高さが違った）。
 *   横並びにすると 84px に2枚は入らないので、上限を外して高さを揃える。
 *     画像は 144×34 / 124×34（PC は原寸）⇒ 半分の高さ 17px で 72 / 62px。
 *     （以前の SP はマリアージュが 84×約20px。一回り小さくなる）
 *     72 + 10 + 62 = 144px。カード幅（375px 端末で 142px）に 2px 足りず、
 *     隙間だけ 6px に詰める ⇒ 140px で1行に収まる。
 */
@media (max-width: 767px) {
	.pairFrame ~ .tagWrap {
		max-width: none;
		gap: 4px 6px;
	}

	.pairFrame ~ .tagWrap img {
		width: auto;
		max-width: none;
		height: 17px;
	}
}