body {
  font-family: sans-serif;
}
a {
  color: initial;
  text-decoration: none;
}

@media screen {
  .row {
    height: 6em;
    width: calc(6em * 150 / 107);
  }
  img {
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .img-c {
    display: inline-block;
  }
  .img-c:hover:not(:active) > img {
    transform: scale(3);
  }
  .row {
    display: inline-flex;
    vertical-align: middle;
    margin: 2px;
    border: solid 1px black;
    background-color: white;
    align-items: center;
    justify-content: center;
  }
  .row > span {
    font-size: 3em;
    font-weight: bold;
  }
  .name, .serial {
    display: none;
  }
}

@media print {
  body {
    counter-reset: index;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .row.header {
    counter-reset: index;
  }
  .row {
    max-height: 6em;
    display: grid;
    grid-template-columns: 11em 12em 16em;
    align-items: center;
    break-inside: avoid;
  }
  .img-c {
    max-height: 6em;
    display: flex;
    align-items: center;
  }
  .img-c:before {
    counter-increment: index;
    content: counter(index);
    padding-right: 4px;
    width: 2ch;
    text-align: right;
  }
  img {
    max-height: 6em;
    object-fit: contain;
  }
  .row > span {
    font-size: 2em;
    font-weight: bold;
    border-bottom: solid 1px black;
    grid-column: span 3;
    counter-reset: index;
  }
  .serial {
    font-size: 1.5em;
  }
  .serial:before {
    content: "商品番号:";
    font-size: 0.5em;
    color: #888;
  }
}