/* ===================================
   有料版口座切り替え レスポンシブ対応
   =================================== */

/* === スマホ対応（768px以下） === */
@media (max-width: 768px) {
  /* テーブルを横スクロール可能に */
  .my-paid-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .my-paid-table th,
  .my-paid-table td {
    padding: 8px 6px;
    font-size: 13px;
  }

  .my-paid-table input[type="text"] {
    min-width: 100px;
    font-size: 13px;
  }

  .my-paid-table input[type="submit"] {
    padding: 6px 10px;
    font-size: 12px;
  }

  .my-paid-table small {
    font-size: 10px;
  }
}

/* === さらに小さい画面（480px以下）=== */
@media (max-width: 480px) {
  /* カード形式に変換 */
  .my-paid-table,
  .my-paid-table thead,
  .my-paid-table tbody,
  .my-paid-table tr,
  .my-paid-table th,
  .my-paid-table td {
    display: block;
    width: 100%;
    white-space: normal;
  }

  .my-paid-table thead {
    display: none;
  }

  .my-paid-table tr {
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .my-paid-table td {
    border: none;
    padding: 8px 0;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .my-paid-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #333;
    margin-right: 10px;
  }

  /* 商品名 */
  .my-paid-table td:nth-child(1)::before { content: "商品名:"; }
  /* 口座番号 */
  .my-paid-table td:nth-child(2)::before { content: "口座番号:"; }
  .my-paid-table td:nth-child(2) {
    flex-direction: column;
    align-items: flex-start;
  }
  /* 購入日時 */
  .my-paid-table td:nth-child(3)::before { content: "購入日:"; }
  /* 更新日時 */
  .my-paid-table td:nth-child(4)::before { content: "更新日:"; }
  /* 編集ボタン */
  .my-paid-table td:nth-child(5) {
    justify-content: center;
    padding-top: 12px;
  }
  .my-paid-table td:nth-child(5)::before { content: none; }

  .my-paid-table input[type="text"] {
    width: 100%;
    margin-top: 4px;
  }

  .my-paid-table input[type="submit"] {
    width: 100%;
    padding: 10px;
  }
}