body {
      font-family: sans-serif;
      margin: 20px;
      line-height: 1.6;
      background: #f9fafb;
      color: #333;
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #444;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    th, td {
      border: 1px solid #e5e7eb;
      padding: 15px;
      vertical-align: top;
    }
    th {
      background: #e0f2f1;
      text-align: center;
      font-weight: bold;
    }
    td[data-label="項目"] {
      font-weight: bold;
      background: #f0f8f7; 
      color: #665352;  
      font-size: 0.9em;   /* 少し小さめ */
      text-align: center; /* 中央寄せ */
      vertical-align: middle; /* 縦方向も中央に */ 
    }

    /* スマホ表示をカード型に */

 @media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: none;
  }

  tr {  
    border: 1px ;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  td {
    border: none;
    padding: 10px 5px;
    border-bottom: 1px 
  }

  td:last-child {
    border-bottom: none;
  }

  /* 「日帰り型」「宿泊型」だけにラベルを付ける */
  td[data-label="日帰り型"]::before,
  td[data-label="宿泊型"]::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #00695c;
  }

  /* スマホで非表示にしたいセル用 */
  .hide-sp {
    display: none;
  }

}