/* Modern Amazon affiliate link card (overrides plugins/amazonjs/css/amazonjs.css) */
.amazonjs_item { display: block; position: relative; box-sizing: border-box; margin: 1em 0; padding: 0; border: 0.1rem solid #e6e6e6; border-radius: 1.2rem; background: #ffffff; background-image: none; color: #222222; font-size: 1.4rem; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.06); }
.amazonjs_item:hover { border-color: #f0c14b; transform: translateY(-0.2rem); box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.1); }
.amazonjs_item * { box-sizing: border-box; margin: 0; padding: 0; border: 0; }
.amazonjs_item a { display: flex; gap: 1.6rem; align-items: center; padding: 1.6rem; color: inherit; text-decoration: none; }
.amazonjs_item .amazonjs_image { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 8.8rem; height: 8.8rem; border-radius: 0.8rem; border: 0.1rem solid #f0f0f0; background: #fafafa; overflow: hidden; }
.amazonjs_item .amazonjs_image img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.amazonjs_item .amazonjs_info { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.8rem; min-width: 0; }
.amazonjs_item .amazonjs_info h4.amazonjs_title { display: -webkit-box; color: #1a1a1a; font-size: 1em; font-weight: 600; line-height: 1.5; overflow: hidden; transition: color 0.2s ease; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.amazonjs_item:hover .amazonjs_info h4.amazonjs_title { color: #e47911; }
.amazonjs_item .amazonjs_info::after { content: "Amazonで見る"; display: inline-flex; gap: 0.4rem; align-items: center; align-self: flex-start; padding: 0.5rem 1.2rem; border-radius: 99.9rem; background: linear-gradient(180deg, #f7ca4d, #f0ad2c); color: #ffffff; font-size: 0.8em; font-weight: 600; letter-spacing: 0.02em; }


@media (max-width: 480px) {
  /* プラグイン本体のamazonjs.cssには、旧デザイン（画像をfloatさせてinfoをmargin-leftで
     逃がすレイアウト）向けの .amazonjs_info { margin-left: 7rem !important; } が残っており、
     このflexboxベースの新デザインでは不要な左余白になっていたため打ち消す。 */
  .amazonjs_item .amazonjs_info { margin-left: 0 !important; }
  .amazonjs_item a { gap: 1.2rem; padding: 1.2rem; }
  .amazonjs_item .amazonjs_image { width: 6.4rem; height: 6.4rem; }
  .amazonjs_item .amazonjs_info h4.amazonjs_title { font-size: 0.92em; }
  .amazonjs_item .amazonjs_info::after { padding: 0.4rem 1rem; font-size: 0.75em; }
}