/* ========================================
   PC版レスポンシブ（1024px〜）
   タブレット版（768px）を中央に配置し、
   両サイドにグリッド背景（対応エリアと同じ）を表示
   ======================================== */

@media (min-width: 1024px) {

  /* ── body：グリッド背景（対応エリアと同じパターン） ── */
  body {
    background-color: #FFFFFF;
    background-image:
      linear-gradient(#E8EFF5 1px, transparent 1px),
      linear-gradient(90deg, #E8EFF5 1px, transparent 1px);
    background-size: 30px 30px;
  }

  /* ── body直下の要素を768px幅で中央配置 ── */
  body > header,
  body > section,
  body > .footer,
  body > main {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  /* ── フローティングCTA：768px幅で中央寄せ ── */
  .floating-cta {
    left: 50%;
    right: auto;
    width: 768px;
    max-width: 768px;
    margin-left: -384px;
  }

  /* ── ハンバーガーメニュー：開く時は768px領域の右端から、閉じる時は完全に画面外へ ── */
  .hamburger-menu {
    right: calc((100vw - 768px) / 2);
    transform: translateX(calc(100% + (100vw - 768px) / 2));
  }

  .hamburger-menu.is-open {
    transform: translateX(0);
  }
}