/* 爬虫類記事に貼る図鑑のリンクカード [zukan_card](2026-11-02 飯田さん・見本 preview hachurui-zukan-linkcard-mock-20261102 の2版)。カードを貼ったページだけ読む(inc/zukan.php) */
.zkc-wrap { container-type: inline-size; margin: 40px 0 24px; } /* 上の余白は本文の段落と同じ 40px(まとめ・基本アイテムの箱の下でくっつかないように・11/2 飯田さん。段落の下では重なって 40px のまま) */
.zkc, .article-body a.zkc { position: relative; isolation: isolate; display: flex; align-items: stretch; overflow: hidden; border-radius: 8px; background: #efefef; color: #333; text-decoration: none; }
.zkc::after { content: ""; position: absolute; right: -50px; bottom: -44px; z-index: -1; width: 300px; aspect-ratio: 500 / 354; background: url("images/zukan/zukan_rep.png") no-repeat center / contain; opacity: .3; transform: rotate(-15deg); pointer-events: none; } /* 右の本の絵(飯田さんの画像)を透過して斜めにし、文字の後ろに */
.zkc-pic { flex: 0 0 38%; max-width: 300px; }
.zkc-pic img, .article-body .zkc-pic img { display: block; width: 100%; height: 100%; margin: 0; aspect-ratio: 4 / 3; object-fit: cover; }
.zkc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 18px 24px; }
.zkc-title { font-size: 24px; font-weight: 800; line-height: 1.35; }
.zkc-q { color: #2f9c93; }
.zkc-title small { margin-left: 4px; font-size: 16px; font-weight: 700; }
.zkc-sub { font-size: 17px; font-weight: 700; line-height: 1.5; }
.zkc-url { color: #777; font-size: 13px; line-height: 1.5; word-break: break-all; }
.zkc-btn { align-self: flex-start; padding: 7px 18px; border-radius: 4px; background: #4f9e6b; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.5; }
.zkc, .zkc-btn { transition: box-shadow .2s, background-color .2s, transform .2s; }
.zkc:hover, .zkc:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .16); } /* マウスを乗せるとカードが少し浮く(2026-11-02 飯田さん) */
.zkc:hover .zkc-btn, .zkc:focus-visible .zkc-btn { background: #2e7d4f; box-shadow: 0 2px 0 #23603c; transform: translateY(-1px); } /* ボタンは濃い緑に */
.zkc-btn::before { content: ""; display: inline-block; margin-right: 7px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; vertical-align: 1px; } /* ▶ の字はサイトの字の種類だと青い絵文字になるので、白い三角を形で描く */
.article-body a.zkc:hover { color: #333; text-decoration: none; }
.zkc-note { padding: 8px 12px; border: 1px dashed #c00; color: #c00; font-size: 13px; }
@container (max-width: 560px) {
	.zkc-pic { flex-basis: 36%; }
	.zkc-body { gap: 5px; padding: 10px 10px 10px 12px; }
	.zkc-title { font-size: 14px; }
	.zkc-title small { margin-left: 2px; font-size: 11px; }
	.zkc-sub { font-size: 11px; }
	.zkc-url { display: none; }
	.zkc-btn { padding: 3px 10px; font-size: 11px; }
	.zkc::after { width: 150px; right: -34px; bottom: -24px; }
}