---
version: alpha
name: Forest Activity
description: "Forest activity LP where Naomi acts as the guide/leader inviting participants into a hidden-land night tour: full-bleed nature, green terrain, readable course cards, and orange booking energy."
colors:
  primary: "#073F31"
  secondary: "#1B6F55"
  tertiary: "#FF6F12"
  neutral: "#E9FFF8"
  forestDeep: "#006D45"
  forestGreen: "#58BF16"
  forestGreenDark: "#0A7C61"
  forestMint: "#E9FFF8"
  forestYellow: "#FFC629"
  forestOrange: "#FF6F12"
  ctaInk: "#002B1F"
  paper: "#FFFDF2"
  whiteCard: "#FFFFFF"
  onDark: "#FFFFFF"
  onLight: "#073F31"
typography:
  displayHero:
    fontFamily: "Noto Sans JP, Hiragino Sans, Yu Gothic, YuGothic, Meiryo, sans-serif"
    fontSize: 6rem
    fontWeight: 1000
    lineHeight: 0.95
    letterSpacing: "-0.09em"
  displaySection:
    fontFamily: "Noto Sans JP, Hiragino Sans, Yu Gothic, YuGothic, Meiryo, sans-serif"
    fontSize: 4.875rem
    fontWeight: 1000
    lineHeight: 1.02
    letterSpacing: "-0.08em"
  bodyBold:
    fontFamily: "Noto Sans JP, Hiragino Sans, Yu Gothic, YuGothic, Meiryo, sans-serif"
    fontSize: 1rem
    fontWeight: 800
    lineHeight: 1.9
  labelCaps:
    fontFamily: "Noto Sans JP, Hiragino Sans, Yu Gothic, YuGothic, Meiryo, sans-serif"
    fontSize: 0.75rem
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: "0.18em"
rounded:
  sm: 6px
  md: 22px
  lg: 34px
  pill: 9999px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  sectionPc: 112px
  sectionMobile: 72px
components:
  heroOverlayText:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.onDark}"
    rounded: "{rounded.sm}"
    padding: 24px
  buttonPrimary:
    backgroundColor: "{colors.forestOrange}"
    textColor: "{colors.ctaInk}"
    rounded: "{rounded.pill}"
    padding: 12px
  buttonSecondary:
    backgroundColor: "{colors.whiteCard}"
    textColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    padding: 12px
  storyCard:
    backgroundColor: "{colors.whiteCard}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 32px
  courseCard:
    backgroundColor: "{colors.whiteCard}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 28px
  afterCard:
    backgroundColor: "{colors.forestGreenDark}"
    textColor: "{colors.onDark}"
    rounded: "{rounded.lg}"
    padding: 32px
  quickFacts:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.onDark}"
    rounded: "{rounded.sm}"
    padding: 16px
  safetyCard:
    backgroundColor: "{colors.whiteCard}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 28px
  bookingForm:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 42px
---

## Overview

This is the handoff design spec for `lps/adventure-night.html`.

Forest Activity is a fictional forest activity LP. It borrows the posture of outdoor adventure sites — full-bleed forest photography, compact white navigation, strong green terrain/ridge transitions, and energetic orange CTAs — without copying any official logo, copy, image, or proprietary layout. In this version, Naomi is not just a model in the forest; she is the guide/leader who invites visitors toward a hidden-land night tour.

The page should make the visitor imagine following Naomi: her signal, the lantern path, bridge height, rope tension, air, and the moment before stepping into the hidden route.

## Colors

- **Primary / Forest Deep:** Navigation, footer, and readable dark green text.
- **Forest Green / Green Dark:** Terrain and outdoor energy. Use big fields confidently, but avoid making text sit on ambiguous mid-green when contrast suffers.
- **Forest Mint / Paper:** Light background for route and explanatory sections.
- **Forest Orange / Yellow:** CTA and small excitement signals. Orange is the booking/action energy.
- **White Card:** Course cards must stay readable. White or near-white cards with dark forest text are preferred over low-contrast translucent text.

## Typography

- Hero headline can be large, bold, and white because it sits over a darkened full-bleed forest photo.
- Section headings can be bold and playful, but Japanese line-height needs enough space to avoid cramped signage.
- Body/course copy should use dark forest green at strong weight, especially on the route section.
- Do not use pale yellow or white body copy on light mint backgrounds.

## Layout

Use a full-bleed photographic hero with Naomi in jungle-cruise guide clothing, then a vivid green terrain ridge that leads into the story section. The route/course section should be practical and readable: a visitor should understand which course fits them without fighting the background.

Conversion path should eventually become: course → date/price/safety → booking. In this seminar demo, the design direction is more important than a real booking backend, but the visual CTA should already point toward booking behavior.

The current conversion improvement layer moves the page closer to that path: the hero CTA becomes “空き日程を見る,” the course rows include price/time/age, safety cards answer family anxiety, and a booking request form collects course, date, party size, phone, and concerns.

## Elevation & Depth

Depth comes from terrain layers, photo darkness, white course cards, and soft shadows. Avoid gray low-contrast text over mint backgrounds.

## Shapes

- Terrain/ridge shapes can be organic and bold.
- Course cards use rounded 22px surfaces with clear contrast.
- CTAs use pill shapes, like outdoor-ticket actions.

## Components

- `heroOverlayText`: full-bleed photo copy; must always remain readable with shadow/overlay.
- `buttonPrimary`: orange action button for course/booking direction.
- `buttonSecondary`: white supporting button.
- `storyCard`: playful forest activity cards.
- `courseCard`: route menu rows. Must use white background and dark forest text.
- `afterCard`: Before/After review panel for the stronger experience copy.
- `quickFacts`: hero-adjacent conversion facts: price, age, safety training, and rain transfer policy.
- `safetyCard`: high-contrast cards for safety, guide support, weather, and family viewing.
- `bookingForm`: static demo booking form that shows where a real availability/calendar flow would connect.

## Do's and Don'ts

- **Do** use full-bleed nature and terrain shapes to create movement.
- **Do** keep route/course text high contrast and visible on hash jumps.
- **Do** show price, age limits, duration, and safety/rain policy before asking for a booking.
- **Do** show Naomi as a safari/jungle-cruise-style guide, not a generic black-jacket host.
- **Do** make the visitor imagine stepping into the forest.
- **Don't** copy official Foret Aventure branding, logo, exact copy, or assets.
- **Don't** leave pale text on mint backgrounds.
- **Don't** rely on scroll reveal for critical course text that may be opened via an anchor.