@charset "utf-8";
    html, body {
      height: 100%;
    }
    html {
      block-size: 100dvh;
    }
    body {
      margin: 0;
      block-size: 100svh;
      display: grid;
      place-items: center;
      overflow: hidden; 
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
      background: #fafafa;
      color: #111;
    }

    .wrap {
      inline-size: min(92vw, 720px);
      text-align: center;
      display: grid;
      gap: clamp(16px, 2.5vmin, 28px);
      align-content: center;
      justify-items: center;
    }


    .logo {
      inline-size: clamp(200px, 28vmin, 320px);
      aspect-ratio: 1 / 1; /* 正方形想定。お好みで調整 */
      display: block;
    }
    .logo img, .logo svg {
      inline-size: 100%;
      block-size: 100%;
      object-fit: contain;
      display: block;
    }

    .tagline {
      font-size: clamp(14px, 1.8vmin, 18px);
      opacity: .75;
    }

    .cta {
      --padY: clamp(10px, 1.6vmin, 14px);
      --padX: clamp(18px, 3vmin, 26px);
      appearance: none;
      border: 0;
      border-radius: 999px;
      padding: var(--padY) var(--padX);
      font-size: clamp(15px, 2vmin, 18px);
      line-height: 1;
      background: #111;
      color: #fff;
      cursor: pointer;
      transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: .6em;
    }
    .cta:focus-visible {
      outline: 3px solid #3b82f6; /* アクセシビリティ */
      outline-offset: 3px;
    }
    .cta:hover { transform: translateY(-2px); filter: brightness(1.03); }
    .cta:active { transform: translateY(0); filter: brightness(.97); }

    /* 動きを控えたい利用者配慮 */
    @media (prefers-reduced-motion: reduce) {
      .cta { transition: none; }
    }

    .safe-pad { padding-bottom: env(safe-area-inset-bottom); }