/* Midoris Toolkit: 管理画面で選んだおすすめ記事のレスポンシブレイアウト */
@media only screen and (min-width: 769px) {
	.related-posts.mdrs-related-posts.mdrs-desktop-1 ul,
	.related-posts.mdrs-related-posts.mdrs-desktop-2 ul,
	.related-posts.mdrs-related-posts.mdrs-desktop-3 ul,
	.related-posts.mdrs-related-posts.mdrs-desktop-4 ul {
		display: grid !important;
		gap: 1.5em !important;
		overflow: visible !important;
		padding: 16px 0 !important;
		white-space: normal !important;
	}

	.related-posts.mdrs-related-posts.mdrs-desktop-1 ul {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.related-posts.mdrs-related-posts.mdrs-desktop-2 ul {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.related-posts.mdrs-related-posts.mdrs-desktop-3 ul {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.related-posts.mdrs-related-posts.mdrs-desktop-4 ul {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 1em !important;
	}

	.related-posts.mdrs-related-posts.mdrs-desktop-1 li,
	.related-posts.mdrs-related-posts.mdrs-desktop-2 li,
	.related-posts.mdrs-related-posts.mdrs-desktop-3 li,
	.related-posts.mdrs-related-posts.mdrs-desktop-4 li {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.related-posts.mdrs-related-posts.mdrs-desktop-4 .rep p {
		font-size: .86em;
	}
}

@media only screen and (max-width: 768px) {
	.related-posts.mdrs-related-posts.mdrs-mobile-1 ul,
	.related-posts.mdrs-related-posts.mdrs-mobile-2 ul {
		display: grid !important;
		gap: 14px !important;
		overflow: visible !important;
		/* 左右16px は記事本文の見出しの位置に合わせた余白 */
		padding: 10px 16px 20px !important;
		white-space: normal !important;
	}

	.related-posts.mdrs-related-posts.mdrs-mobile-1 ul {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.related-posts.mdrs-related-posts.mdrs-mobile-2 ul {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	.related-posts.mdrs-related-posts.mdrs-mobile-1 li,
	.related-posts.mdrs-related-posts.mdrs-mobile-2 li {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.related-posts.mdrs-related-posts.mdrs-mobile-1 ul::after,
	.related-posts.mdrs-related-posts.mdrs-mobile-2 ul::after {
		display: none !important;
	}

	/* 広告は1行をまるごと使う（2列だと1セルが165px前後で、250px に足りないため） */
	.related-posts.mdrs-related-posts.mdrs-mobile-1 > ul > li.mdrs-rp-ad,
	.related-posts.mdrs-related-posts.mdrs-mobile-2 > ul > li.mdrs-rp-ad {
		grid-column: 1 / -1 !important;
	}

	.related-posts.mdrs-related-posts.mdrs-mobile-2 .rep p {
		font-size: .84em;
	}
}

/*
 * グリッド表示のとき、列幅を揃える。
 * 広告のタグ（AdSense の ins）は自前で最小幅を要求するため、そのままだと
 * 広告の入った列だけが広くなり、記事カードの列が圧迫されて細くなる。
 * 最小幅を 0 にして、どの列も均等に並ぶようにする。
 *
 * 768px以下は親テーマの横スクロール（カード幅 240〜300px）が効く範囲なので、
 * ここで min-width を 0 にすると横スクロールが壊れる。769px以上に限定する。
 */
@media only screen and (min-width: 769px) {
	.related-posts.mdrs-related-posts > ul > li {
		min-width: 0;
	}

	/*
	 * 広告は1行をまるごと使う。
	 * AdSense の fluid 形式は枠が 250px 未満だと表示されない
	 * （コンソールに "Fluid responsive ads must be at least 250px wide" が出る）。
	 * 3列だと1列あたり約216pxで足りないため、広告だけ全幅にする。
	 */
	.related-posts.mdrs-related-posts > ul > li.mdrs-rp-ad {
		grid-column: 1 / -1;
	}
}

/*
 * 2列を選んでいて、かつ画面が十分に広いときは、広告もカードと同じ大きさで並べる。
 * 1030px を境にしているのは、これ未満だと1マスが 250px を下回って
 * 広告が表示されなくなるため（実測: 900px→245px / 1030px→259px）。
 */
@media only screen and (min-width: 1030px) {
	.related-posts.mdrs-related-posts.mdrs-desktop-2 > ul > li.mdrs-rp-ad {
		grid-column: auto;
	}
}

/*
 * スマートフォンの横スクロール表示でも、広告の枠を 250px 以上にする。
 * 親テーマはカードを min-width:240px / max-width:300px に固定するため、
 * そのままでは広告が 240px になって表示されない。
 */
@media only screen and (max-width: 768px) {
	.related-posts.mdrs-related-posts.slide > ul > li.mdrs-rp-ad {
		min-width: 300px;
		max-width: none;
	}
}