body {
      font-family: 'Noto Sans JP', sans-serif;
      margin: 0;
      padding: 0;
      background: #fdfdfd;
      color: #333;
    }
    header {
      background: #9d00ac;
      color: white;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
      font-size: 2.5rem;
    }
    .hero {
      text-align: center;
      height: 300px;
    }
    .section {
      padding: 40px 20px;
      max-width: 960px;
      margin: auto;
    }
    .card {
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
    h2 {
      color: #66003F;
      border-left: 5px solid #99007f;
      padding-left: 12px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    table th, table td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    table th {
      background: #660047;
      color: white;
    }
    .cta-button {
      display: inline-block;
      background: #990091;
      color: white;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
      transition: background 0.3s;
    }
    .cta-button:hover {
      background: #007a3d;
    }
    
  <style>
@media screen and (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .card > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .card > div[style*="flex: 1 1"] {
    flex: 1 1 100% !important;
  }
}

@media screen and (max-width: 600px) {
  .section {
    padding: 20px 10px;
  }

  .cta-button {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 768px) {
  .section {
    margin-top: 10px !important;
  }
}