/* アフィリエイト向けブロック。色は yozora のスキンの変数を使う。 */

/* ---------- 商品リンクボックス ---------- */
.yb-product { display: flex; gap: 16px; align-items: flex-start; margin: 1.8em 0; padding: 16px; border: 1px solid var(--c-line, #e3e6eb); border-radius: var(--radius, 10px); background: var(--c-bg-soft, #f7f8fa); }
.yb-product__media { flex: 0 0 120px; }
.yb-product img.yb-product__img { display: block; width: 120px; height: 120px; object-fit: contain; border-radius: 6px; background: #fff; }
.yb-product__body { flex: 1; min-width: 0; }
.yb-product__name { margin: 0 0 4px; font-weight: 700; line-height: 1.5; color: var(--c-heading, inherit); }
.yb-product__desc { margin: 0 0 10px; font-size: .85rem; line-height: 1.7; color: var(--c-sub, #5c6474); }
.yb-product__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.yb-product__btn { flex: 1 1 140px; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border-radius: 6px; color: #fff !important; font-size: .85rem; font-weight: 700; text-align: center; text-decoration: none !important; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); transition: transform .1s, box-shadow .1s; }
.yb-product__btn:hover { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
.yb-shop--amazon { background: #b35c00; }   /* Amazon のオレンジを、白文字が読める濃さに */
.yb-shop--rakuten { background: #bf0000; }
.yb-shop--yahoo { background: #c4002b; }
.yb-shop--official { background: var(--c-accent, #2a5ba8); color: var(--c-on-accent, #fff) !important; }
.yb-shop--other { background: #4b5563; }
.yb-product__note { margin: 8px 0 0; font-size: .72rem; color: var(--c-sub, #5c6474); }
@media (max-width: 520px) {
	.yb-product { flex-direction: column; align-items: stretch; }
	.yb-product__media { flex: none; align-self: center; }
}

/* ---------- CTA ボタン ---------- */
.yb-cta { margin: 1.8em 0; text-align: center; }
.yb-cta__micro { margin: 0 0 6px; font-size: .85rem; font-weight: 700; color: var(--c-heading, inherit); }
.yb-cta__btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-width: min(100%, 320px);
	padding: 14px 28px;
	border-radius: 999px;
	color: #fff !important;
	font-weight: 700; font-size: 1rem; line-height: 1.4;
	text-decoration: none !important;
	overflow: hidden;
	box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
	transition: transform .1s, box-shadow .1s;
}
.yb-cta__btn::after { content: "›"; font-size: 1.3em; line-height: 1; }
.yb-cta__btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.yb-cta--accent { background: var(--c-accent, #2a5ba8); color: var(--c-on-accent, #fff) !important; }
.yb-cta--orange { background: #c2410c; }
.yb-cta--green { background: #15803d; }
.yb-cta--red { background: #b91c1c; }
/* ゆっくり光が走る（動きを減らす設定の端末では止める） */
.yb-cta__btn span::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: yb-shine 3.2s ease-in-out infinite; }
@keyframes yb-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .yb-cta__btn span::before { animation: none; display: none; } }

/* ---------- メリット・デメリット ---------- */
.yb-pc { display: grid; gap: 12px; margin: 1.8em 0; }
@media (min-width: 600px) { .yb-pc { grid-template-columns: 1fr 1fr; } }
.yb-pc__col { padding: 14px 16px; border-radius: 8px; border: 2px solid var(--yb-pc); background: color-mix(in srgb, var(--yb-pc) 6%, transparent); }
.yb-pc--pros { --yb-pc: #15803d; }
.yb-pc--cons { --yb-pc: #b45309; }
.yb-pc__title { margin: 0 0 8px; font-weight: 700; color: color-mix(in srgb, var(--yb-pc) 55%, var(--c-heading, #111)); } /* 暗い背景でも明るい背景でも読める濃さにする */
.yb-pc ul { margin: 0; padding: 0; list-style: none; }
.yb-pc li { position: relative; padding-left: 1.4em; font-size: .9rem; line-height: 1.7; }
.yb-pc li + li { margin-top: 4px; }
.yb-pc--pros li::before { content: "○"; position: absolute; left: 0; color: var(--yb-pc); font-weight: 700; }
.yb-pc--cons li::before { content: "△"; position: absolute; left: 0; color: var(--yb-pc); font-weight: 700; }