@media (max-width: 768px) {
    .mobile-table {
      width: 100%;
      border: none; /* 全体の枠線を消す */
    }
    .mobile-table th {
      display: none; /* ヘッダーをスマホサイズでは非表示に */
    }
    .mobile-table td {
      display: block;
      width: 100%;
      text-align: right;
      padding: 10px 0; /* 上下に余白を追加 */
      padding-left: 50%;
      position: relative;
      border: none; /* セルの枠線を消す */
    }
    .mobile-table td::before {
      content: attr(data-label);
      position: absolute;
      left: 0;
      width: 45%;
      text-align: left;
      font-weight: bold;
      color: #555; /* ラベルの色を調整 */
    }
    .mobile-table .group {
      margin-bottom: 20px; /* グループ間に余白を追加 */
      padding: 15px; /* グループ全体に余白を追加 */
      border: 2px solid #d3d3d3; /* 外枠を薄い灰色に変更 */
      border-radius: 8px; /* 角を丸くする */
      background-color: #ffffff; /* 背景色を白に設定 */
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 
                  0 4px 8px rgba(0, 0, 0, 0.15); /* 強調されたシャドウ効果 */
    }
  }