body {
      font-family: sans-serif;
      margin: 0;
      background: #ffffff;
      color: #222;
      line-height: 1.8;
    }
    header {
      background: #f4f4f4;
      padding: 0px 20px;
      text-align: center;
    }
    header h1 {
      font-size: 3rem;
      margin-bottom: 0.5em;
    }

    .hero {
      background: #e6f2ff;
      padding: 5px 20px;
      margin: 0 auto;
    }
    .hero h1 {
      font-size: 3rem;
      margin: 0.3em;
      text-align: center;
      line-height: 1.3;
    }
    .hero p {
      font-size: 1.5em;
      text-align: center;
      margin: 10px;
    }
    .hero h2 {
      text-align: center;
      margin-bottom: 0px;
    }

    section {
      padding: 0px 20px;
      max-width: 960px;
      font-size: 1.5em;
      margin: 0 auto;
    }
    section h2 {
      font-size: 2.5rem;    /* 48px */
      margin-top: 35px;
      margin-bottom: 0px;
    }
    section h3 {
      margin-top: 10px;
      margin-bottom: 0px;
    }
    section p {
      margin-top: 0;
      margin-bottom: 14px;
    }
    
    .cta {
      text-align: center;
      margin: 35px;
    }
    .cta a {
      display: inline-block;
      background: #0077cc;
      color: white;
      padding: 15px 30px;
      text-decoration: none;
      border-radius: 8px;
      font-size: 1.1em;
    }
    footer {
      background: #f8f8f8;
      text-align: center;
      padding: 30px;
      font-size: 0.9em;
      color: #666;
    }
    img {
      margin: 30px auto 0px auto;
      border-radius: 10px;
      width: 100%;
      max-width: 1200px;
      height: auto;
      display: block;
      align-items: center;
    }

    .photo-row {
      display: flex;
      justify-content: center;
      gap: 20px; /* 写真間のスペース */
      flex-wrap: wrap; /* 小さい画面では縦並びにする */
      margin-top: 0px;
    }

    .photo-box {
      text-align: center;
      max-width: 450px;
      margin: 0px;
      padding: 0px;
    }

    .photo-box img {
      width: 100%;
      border-radius: 10px;
    }
    .caption {
      font-size: 16px;
      color: #5c5c5c;
      margin-top: 0px;
      margin-bottom: 0px;
      text-align: center;
    }

    .framed-image {
      margin-top: 15px;
      border: 1px solid #2773ff;          /* グレーの実線枠 */
      border-radius: 14px;              /* 角を丸める（任意） */
      box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 影をつけて立体感 */
    }

    .lp-photo {
      display: block;       /* 画像下の余白防止 */
      max-width: 100%;      /* 親幅を超えない */
      width: 100%;          /* 親幅にフィット */
      height: auto;         /* 縦横比維持 */
    }

    .sns-links {
      display: flex !important;      /* 横並びに */
      justify-content: center !important;  /* 中央揃え */
      gap: 200px;                 /* アイコン間の間隔 */
      margin-top: 0px;
      padding-top: 0px;
      text-align: center !important;
    }

    .sns-icon {
      width: 45px;
      height: 45px;
    }


    /* ================================
      Pricing Table（追加分）
      - 既存セレクタとは独立した専用クラス
      - 末尾に置くことで必要箇所だけ上書き
    ================================ */
    .price-table-wrap {
      margin-top: 12px;
      overflow-x: auto;                 /* 狭い画面で横スクロール */
      -webkit-overflow-scrolling: touch;
    }

    .price-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;              /* 列幅を安定させる */
      font-size: 1.4rem;
    }

    .price-table caption {
      text-align: left;
      font-weight: 600;
      margin: 0 0 .5rem;
    }

    .price-table th,
    .price-table td {
      border: 1px solid #e5e7eb;
      padding: 12px 14px;
      vertical-align: middle;
      text-align: left;
    }

    .price-table thead th {
      background: #f7f8fb;
      text-align: left;
    }

    .price-table tbody tr:nth-child(even) {
      background: #fbfbfd;
    }

    .price-table .note {
      font-size: .95rem;
      background: #f9fafb;
    }

    /* 任意：金額など折り返したくない箇所に使用 */
    .price-table .nowrap { white-space: nowrap; }

    /* ===== スマホ（〜600px）===== */
    @media (max-width: 600px) {
      .price-table { font-size: 1rem; }
      .price-table th,
      .price-table td { padding: 10px; }
      .price-table caption { font-size: 1rem; }
      /* 金額だけは折り返し防止したい場合 */
      .price-table td .nowrap { white-space: nowrap; }
    }

    /* ===== iPad〜（768px〜）===== */
    @media (min-width: 768px) {
      .price-table { font-size: 1.06rem; }
      .price-table th,
      .price-table td { padding: 12px 16px; }
    }

    /* ===== PC〜（1024px〜）===== */
    @media (min-width: 1024px) {
      .price-table { font-size: 1.4rem; }
      .price-table th,
      .price-table td { padding: 14px 18px; }
    }


    @media (max-width: 600px) {
      section {
        padding: 10px;
        max-width: 100%;
        font-size: 1.1em;
      }

      .hero h1 {
        font-size: 1.8em;
      }

      .hero p {
        font-size: 1.1em;
      }

      section h2 {
        font-size: 1.5em;
      }

      video {
        width: 100%;
        height: auto;
      }
    }

    @media (min-width: 768px) {  /* iPad〜 */
      .lp-photo { width: 90%; }
    }

    @media (min-width: 1024px) { /* PC〜 */
      .lp-photo { width: 90%; }
    }