:is(#prod-delivery-list, #prod-delivery-summary) .delivery-card-label { display:none; }

@media (max-width:640px) {
  :is(#prod-delivery-list, #prod-delivery-summary) thead { display:none; }
  :is(#prod-delivery-list, #prod-delivery-summary) :is(table, tbody) { display:block; width:100%; min-width:0; }
  :is(#prod-delivery-list, #prod-delivery-summary) tbody tr {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    border:1px solid var(--g200);
    border-radius:10px;
    margin-bottom:10px;
    padding:12px;
    gap:8px 0;
    background:white;
  }
  :is(#prod-delivery-list, #prod-delivery-summary) tr.delivery-attention { border-left:4px solid #c2410c; }
  :is(#prod-delivery-list, #prod-delivery-summary) td {
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:8em minmax(0,1fr);
    column-gap:8px;
    min-width:0;
    padding:0;
    border-bottom:0;
    white-space:normal;
  }
  /* ラベルは 8 文字ちょうどで 8em に収まるよう、値より一段小さい文字にする。 */
  :is(#prod-delivery-list, #prod-delivery-summary) .delivery-card-label { display:block; font-size:12px; color:var(--g600); }
  :is(#prod-delivery-list, #prod-delivery-summary) .delivery-card-value { min-width:0; overflow-wrap:anywhere; }
  :is(#prod-delivery-list, #prod-delivery-summary) .badge { white-space:normal; overflow-wrap:anywhere; }
  :is(#prod-delivery-list, #prod-delivery-summary) :is(.delivery-cell-name, .delivery-cell-status) {
    display:block;
    grid-row:1;
    font-weight:600;
  }
  :is(#prod-delivery-list, #prod-delivery-summary) .delivery-cell-name { grid-column:1 / 3; }
  :is(#prod-delivery-list, #prod-delivery-summary) .delivery-cell-status { grid-column:3; text-align:right; }
  /* 店舗と交付物は名前の下に 1 行ずつ全幅で出す（長い名前を細い列で折り返さない）。 */
  #prod-delivery-list :is(.delivery-cell-store, .delivery-cell-doc) { display:block; grid-column:1 / -1; font-size:13px; color:var(--g600); overflow-wrap:anywhere; }
  #prod-delivery-list .delivery-cell-store { grid-row:2; }
  #prod-delivery-list .delivery-cell-doc { grid-row:3; }
  :is(#prod-delivery-list, #prod-delivery-summary) :is(.delivery-cell-name, .delivery-cell-status, .delivery-cell-store, .delivery-cell-doc) .delivery-card-label {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
  }
}