/* Homepage product animation: desktop service column, stacked on phones. */
.service-visual { display:flex; align-items:flex-start; gap:18px; min-width:0; }
.service-visual > .number { flex:0 0 18px; }
.product-loop { position:relative; margin:0; min-width:0; flex:1; background:#fff; }
.product-loop video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.loop-toggle { position:absolute; right:4px; bottom:4px; min-height:44px; min-width:44px; padding:8px 10px; border:1px solid #d4d4d4; background:rgba(241,241,241,.92); color:#393939; font-size:11px; cursor:pointer; }
.loop-toggle:hover { background:#393939; color:white; }
@media (min-width:801px) and (max-width:1100px) {
  .service-with-loop { grid-template-columns:1fr 2fr 24px; gap:24px; }
  .service-visual { gap:10px; }
}
@media (max-width:800px) {
  .service-with-loop .service-visual { grid-column:1 / -1; display:grid; grid-template-columns:25px minmax(0,1fr); gap:16px; }
  .service-with-loop > .service-copy { grid-column:2; }
  .product-loop { width:100%; max-width:480px; }
}