/* ============ Reset ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
}
body {
  font-family:
    "Hiragino Sans",
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  /* Dreamy lavender → pink gradient for the PC side margins.
     Light beams & sparkles are layered on via body::before. */
  background: linear-gradient(
    180deg,
    #6b6bbe 0%,
    #8a7ed4 25%,
    #b09add 55%,
    #d4b3d8 85%,
    #e0bcc8 100%
  );
  background-attachment: fixed;
  color: #1a1f4d;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  position: relative;
  min-height: 100vh;
}

/* Atmospheric overlay: diagonal light streaks + scattered sparkles.
   Fixed so it stays put while the LP scrolls. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Bright diagonal light beam */
    linear-gradient(
      115deg,
      transparent 38%,
      rgba(200, 230, 255, 0.35) 47%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(200, 230, 255, 0.35) 53%,
      transparent 62%
    ),
    /* Softer secondary beam */
    linear-gradient(
        108deg,
        transparent 58%,
        rgba(190, 220, 255, 0.25) 65%,
        rgba(220, 240, 255, 0.4) 67%,
        transparent 75%
      ),
    /* Sparkle dots */
    radial-gradient(2px 2px at 12% 18%, #fff, transparent 60%),
    radial-gradient(1px 1px at 85% 28%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 48%, #fff, transparent 60%),
    radial-gradient(1px 1px at 22% 72%, #fff, transparent 60%),
    radial-gradient(2px 2px at 72% 82%, #fff, transparent 60%),
    radial-gradient(1px 1px at 92% 58%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 55%, #fff, transparent 60%),
    radial-gradient(1px 1px at 60% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 35% 92%, #fff, transparent 60%);
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}

/* ============ LP wrapper ============ */
.lp {
  position: relative;
  z-index: 1;
  max-width: 470px;
  margin: 0 auto;
  background: #e9eeff;
  /* Soft white-purple glow so the card floats on the dreamy background. */
  box-shadow:
    0 0 60px rgba(255, 255, 255, 0.35),
    0 20px 50px rgba(60, 40, 100, 0.25);
}

/* ============ Section base ============
   Source images: 941 x 1672. container-type enables cqw inside. */
.sec {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  container-type: inline-size;
}
.sec-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Hero section uses the new image's native aspect ratio (1024x1536) */
.sec.sec-1 {
  aspect-ratio: 1024 / 1536;
}

/* Section 2 (Problem) uses the new 1122x1402 image */
.sec.sec-2 {
  aspect-ratio: 1122 / 1402;
}

/* Section 3 (Service Features) uses the new 1122x1402 image */
.sec.sec-3 {
  aspect-ratio: 1122 / 1402;
}

/* Section 5 (Why) uses the new 1122x1402 image */
.sec.sec-5 {
  aspect-ratio: 1122 / 1402;
}

/* Section 6 (Performance) uses 1055x1491 image */
.sec.sec-6 {
  aspect-ratio: 1055 / 1491;
}

/* Section 7 (Support Flow) uses 1672x941 landscape image */
.sec.sec-7 {
  aspect-ratio: 1672 / 941;
}

/* ============================================================
   CTA BUTTONS (Hero & Final)
   Pixel-matched to the painted reference (S__55828486_0.jpg).
   Source button height ≈ 105px on a 941-wide section → 6.3% of
   section height → 11.1cqw. All sizing in cqw to scale exactly
   with the section.
   ============================================================ */
.btn {
  position: absolute;
  left: 13.3%;
  right: 11.3%;
  display: flex;
  align-items: center;
  height: 10.6cqw;
  padding: 0 4cqw 0 3.5cqw;
  border-radius: 999px;
  font-family:
    "Hiragino Sans",
    "Noto Sans JP",
    -apple-system,
    sans-serif;
  font-weight: 800;
  font-size: 4.4cqw;
  letter-spacing: 0.06em;
  color: #fff;
  gap: 1.6cqw;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

/* The LINE wordmark text-tracking is slightly tighter,
   but Japanese text spacing should be wider, especially for 資料請求 */
.btn-doc .btn-text {
  letter-spacing: 0.35em;
  padding-left: 0.35em;
}
.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.btn:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* --- LINE button (green pill) ---
   Two-layer background:
     1) Top glossy highlight (white → transparent at 50%)
     2) Solid green gradient
   Plus a CRISP WHITE OUTER RING via box-shadow (no blur). */
/* Button gradients sampled directly from reference S__55828486_0.jpg.
   Top→bottom: brighter to darker, matching the painted button's gradient. */
.btn-line {
  background: linear-gradient(180deg, #40d36b 0%, #02b53f 100%);
  box-shadow:
    0 0 0 0.4cqw #ffffff,
    0 1.2cqw 2.4cqw rgba(2, 165, 60, 0.4);
}

.btn-doc {
  background: linear-gradient(180deg, #3264fb 0%, #2440d0 100%);
  box-shadow:
    0 0 0 0.4cqw #ffffff,
    0 1.2cqw 2.4cqw rgba(36, 64, 208, 0.4);
}

.btn-doc-outline {
  background: transparent;
  border: 0.4cqw solid #6a8cff;
  color: #a8b3ff;
  box-shadow: none;
}
.btn-doc-outline:hover {
  background: rgba(106, 140, 255, 0.1);
}

/* --- Left icon (color chip PNG; button base color matches chip exactly
   so the chip blends invisibly into the button) --- */
.btn-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.btn-icon svg {
  width: 6cqw;
  height: 6cqw;
  display: block;
}
.btn-icon img {
  height: 7.2cqw; /* ~68% of button height — matches reference proportions */
  width: auto;
  display: block;
}
.icon-doc-outline {
  /* outline variant fallback if used */
}

/* --- Text --- */
.btn-text {
  flex: 1;
  text-align: center;
  font-weight: 700;
}

/* --- Right arrow --- */
.btn-arrow {
  flex-shrink: 0;
  width: 3cqw;
  height: 4cqw;
  display: grid;
  place-items: center;
  opacity: 0.95;
  margin-right: 1cqw;
}
.btn-arrow svg {
  width: 100%;
  height: 100%;
}

/* --- Per-button positions ---
   Hero buttons: matched to the painted reference (S__55943203.jpg).
   LINE button has 2-line text (sub「公式LINEで」+ main「無料相談」), doc button is single line. */
.btn-hero-line,
.btn-hero-doc {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 19cqw;
  font-size: 3cqw;
  padding: 0 1.5cqw;
  gap: 0;
  letter-spacing: 0;
  border-radius: 5.5cqw;
}
.btn-hero-line .btn-icon,
.btn-hero-doc .btn-icon {
  justify-self: start;
}
.btn-hero-line .btn-icon img {
  height: 11.5cqw;
  width: auto;
  max-width: none;
}
.btn-hero-doc .btn-icon img {
  height: 10.5cqw;
  width: auto;
  max-width: none;
}
.btn-hero-line .btn-arrow,
.btn-hero-doc .btn-arrow {
  justify-self: end;
  width: 3.6cqw;
  height: 4.8cqw;
  margin: 0;
}
/* Text in the auto-sized center column — truly centered against the button */
.btn-hero-line .btn-text,
.btn-hero-doc .btn-text {
  text-align: center;
}
/* LINE button: 2-line text with hierarchy */
.btn-hero-line .btn-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}
.btn-hero-line .btn-text-sub {
  font-size: 3.5cqw;
  font-weight: 500;
}
.btn-hero-line .btn-text-main {
  font-size: 5cqw;
  font-weight: 500;
}
/* Doc button: single line, large bold */
.btn-hero-doc .btn-text {
  font-size: 4.8cqw;
  font-weight: 500;
  line-height: 1;
}
.btn-hero-line {
  top: 83%;
  left: 3.9%;
  right: 52.1%;
}
.btn-hero-doc {
  top: 83%;
  left: 52.2%;
  right: 3.8%;
}
.btn-doc.btn-hero-doc .btn-text {
  letter-spacing: 0.1em;
  padding-left: 0.1em;
}

/* --- Hero CTA attention effects ---
   1) Color-matched halo that breathes around each button (green/blue).
   2) Bright diagonal shine band that sweeps across the surface.
   The two buttons are staggered so the effects alternate L↔R. */
.btn-hero-line,
.btn-hero-doc,
.btn-cta-line,
.btn-cta-doc {
  overflow: hidden;
  isolation: isolate;
}

/* Shine sweep */
.btn-hero-line::before,
.btn-hero-doc::before,
.btn-cta-line::before,
.btn-cta-doc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.35) 55%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: btn-shine 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.btn-hero-doc::before,
.btn-cta-doc::before {
  animation-delay: 1.3s;
}
@keyframes btn-shine {
  0%,
  45% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

/* Color-matched breathing halo (overrides the static box-shadow on .btn-line / .btn-doc) */
.btn-hero-line,
.btn-cta-line {
  animation: btn-halo-green 2.2s ease-in-out infinite;
}
.btn-hero-doc,
.btn-cta-doc {
  animation: btn-halo-blue 2.2s ease-in-out infinite;
  animation-delay: 1.1s;
}
@keyframes btn-halo-green {
  0%,
  100% {
    box-shadow:
      0 0 0 0.4cqw #ffffff,
      0 1.2cqw 2.4cqw rgba(2, 165, 60, 0.4),
      0 0 0 0 rgba(64, 211, 107, 0);
  }
  50% {
    box-shadow:
      0 0 0 0.4cqw #ffffff,
      0 1.2cqw 2.4cqw rgba(2, 165, 60, 0.55),
      0 0 4cqw 1.2cqw rgba(64, 211, 107, 0.75);
  }
}
@keyframes btn-halo-blue {
  0%,
  100% {
    box-shadow:
      0 0 0 0.4cqw #ffffff,
      0 1.2cqw 2.4cqw rgba(36, 64, 208, 0.4),
      0 0 0 0 rgba(90, 140, 255, 0);
  }
  50% {
    box-shadow:
      0 0 0 0.4cqw #ffffff,
      0 1.2cqw 2.4cqw rgba(36, 64, 208, 0.55),
      0 0 4cqw 1.2cqw rgba(90, 140, 255, 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-hero-line,
  .btn-hero-doc,
  .btn-cta-line,
  .btn-cta-doc,
  .btn-hero-line::before,
  .btn-hero-doc::before,
  .btn-cta-line::before,
  .btn-cta-doc::before {
    animation: none;
  }
}

/* Section 8 Final CTA buttons positioned over the painted button area
   in qa-clean.png (same coordinates as the painted version) */
.btn-final-line {
  top: 78.7%;
}
.btn-final-doc {
  top: 86%;
}

/* ============================================================
   SECTION 08 : Q&A + FINAL CTA
   Buttons stacked vertically. LINE green (top), 資料 white (bottom).
   Measured from the painted reference (LINE_ALBUM_LP参考(スキルプラス)_260529_2 2.png).
   ============================================================ */
.btn-cta-line,
.btn-cta-doc {
  height: 9cqw;
  font-size: 3.5cqw;
  font-weight: 500;
  padding: 0 2cqw 0 5cqw;
  gap: 1.5cqw;
  letter-spacing: 0;
}
.btn-cta-line .btn-icon img,
.btn-cta-doc .btn-icon img {
  height: 7.5cqw;
}
.btn-cta-line .btn-arrow,
.btn-cta-doc .btn-arrow {
  width: 2.8cqw;
  height: 3.8cqw;
}
.btn-cta-line .btn-text,
.btn-cta-doc .btn-text {
  flex: 1;
  text-align: center;
  padding-right: 4cqw;
}

/* Stacked layout: LINE on top, 資料 below — both centered, same width.
   Both buttons use the same styling as the hero buttons
   (LINE green, 資料 blue gradient with white content). */
.btn-cta-line {
  top: 78.5%;
  left: 15.7%;
  right: 15.7%;
}
.btn-cta-doc {
  top: 85%;
  left: 15.7%;
  right: 15.7%;
}
.btn-doc.btn-cta-doc .btn-text {
  letter-spacing: 0.25em;
  padding-left: 0.25em;
}

/* ============================================================
   SECTION 08 : Q&A accordion overlays
   Transparent click targets sit over the painted Q cards.
   Opening reveals the answer with a white panel below the card.
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SECTION 07 : Plan buttons
   ============================================================ */
.plan-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  height: 5.2cqw;
  width: 23%;
  padding: 0 2.5cqw;
  border: 0.35cqw solid #4a5cff;
  border-radius: 999px;
  background: #fff;
  color: #4a5cff;
  font-weight: 700;
  font-size: 2.8cqw;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.plan-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.plan-btn:active {
  transform: translateY(0);
}
.plan-btn span {
  font-size: 1.5em;
  font-weight: 300;
  line-height: 0.5;
}
.plan-btn.grad {
  background: linear-gradient(90deg, #4a5cff 0%, #8a6cff 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0.6cqw 1.5cqw rgba(106, 76, 255, 0.35);
}

.plan-btn-1 {
  left: 6.5%;
  top: 86.5%;
}
.plan-btn-2 {
  left: 38.5%;
  top: 86.5%;
}
.plan-btn-3 {
  left: 70.5%;
  top: 86.5%;
}

/* ============================================================
   FOOTER : Legal links
   Minimal text band sitting at the bottom of the LP card.
   ============================================================ */
.lp-footer {
  background: #0a1240;
  padding: 28px 16px;
  text-align: center;
}
.lp-footer-link {
  display: block;
  color: #a8b3ff;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.lp-footer-link + .lp-footer-link {
  margin-top: 10px;
}
.lp-footer-link:hover {
  color: #fff;
}

/* ============================================================
   STICKY BOTTOM CTA
   Appears after the hero scrolls out of view and hides again
   once the final CTA section enters the viewport.
   Width is matched to .lp (max 470px) and centered, so on
   desktop it sits under the LP card, on mobile it spans full width.
   ============================================================ */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 470px;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -4px 20px rgba(10, 18, 64, 0.12);
  z-index: 100;
  transform: translate(-50%, 100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.sticky-cta.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  border-radius: 999px;
  font-family:
    "Hiragino Sans",
    "Noto Sans JP",
    -apple-system,
    sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}
.sticky-btn:active {
  transform: translateY(1px);
  filter: brightness(0.97);
}
.sticky-btn-line {
  background: linear-gradient(180deg, #40d36b 0%, #02b53f 100%);
  box-shadow: 0 4px 12px rgba(2, 165, 60, 0.35);
}
.sticky-btn-doc {
  background: linear-gradient(180deg, #3264fb 0%, #2440d0 100%);
  box-shadow: 0 4px 12px rgba(36, 64, 208, 0.35);
}
.sticky-btn-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}
.sticky-btn-icon img {
  height: 32px;
  width: auto;
  display: block;
}
.sticky-btn-doc .sticky-btn-text {
  letter-spacing: 0.18em;
  padding-left: 0.18em;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 470px) {
  .lp {
    box-shadow: none;
  }
}