@import url(common.css);

/* --------------------------------------------------

PC→テーブル + スマホ→grid
（.u-like-rtable）

-------------------------------------------------- */
.u-like-rtable table {
  width: 100%;
  margin-top: 1em;
}
.u-like-rtable table th,
.u-like-rtable table td {
  border: 1px solid var(--border_gray);
}

.u-like-rtable table {
  width: 100%;
  border-collapse: collapse;
}

.u-like-rtable td {
  padding: 6px 10px;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
  vertical-align: middle;
}

/* SP：1行＝1カードにしてGridで並べ直す */
@media (max-width: 768px) {
  /* テーブルをブロック化 */
  .u-like-rtable table,
  .u-like-rtable tbody {
    display: block;
    width: 100%;
  }
  .u-like-rtable table {
    border-top: 1px solid var(--border_gray);
  }

  /* 1行をカード化 */
  .u-like-rtable tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 1em 0;
    border-bottom: 1px solid var(--border_gray);
    background: #fff;
  }

  .u-like-rtable table th,
  .u-like-rtable table td {
    border: unset;
  }
  .u-like-rtable td {
    border: 0;
    padding: 0;
  }

  /* 1列目：項目名を強く */
  .u-like-rtable td:nth-child(1) {
    font-weight: 700;
    line-height: 1.5;
  }

  /* 2列目・3列目：ラベル（数量/価格）＋値 をGridで */
  .u-like-rtable td:nth-child(2),
  .u-like-rtable td:nth-child(3) {
    display: grid;
    grid-template-columns: 6.5em 1fr; /* 左：ラベル / 右：値 */
    gap: 10px;
    align-items: start;
  }

  .u-like-rtable td:nth-child(2)::before {
    content: "数量";
    font-weight: 700;
    color: #444;
  }

  .u-like-rtable td:nth-child(3)::before {
    content: "価格";
    font-weight: 700;
    color: #444;
  }

  /* 合計行だけ少し目立たせる（最後の行を合計として扱う想定） */
  .u-like-rtable tr:last-child {
    background: #f7f7f7;
    border-style: solid;
  }

  .u-like-rtable tr:last-child td:nth-child(1) {
    font-size: 1.05em;
  }

  .u-like-rtable tr:last-child td:nth-child(3) .price_block {
    font-weight: 700;
  }
}