# SANU 2nd Home Co-Owners — Style Reference

> An intimate portrait of life with a dog, carried through a narrow editorial column inside an expansive natural landscape.

**Original URL:** [https://www.sa-nu.com/lp/co-owners-dog](https://www.sa-nu.com/lp/co-owners-dog)
**Final URL:** [https://www.sa-nu.com/lp/co-owners-dog](https://www.sa-nu.com/lp/co-owners-dog)
**Theme:** nature photography, warm cream, dark brown and olive surfaces, and a vivid orange conversion accent.
**Inspected:** September 13, 2026, at 02:19 JST. The supplied capture record is timestamped September 12, 2026, at 17:19:27.416 UTC.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current dog-friendly Co-Owners page, including the opening hero, desktop navigation and scenery, introductory story, property lineup, service features, owner testimonials, two-day stay narrative, closing conversion content, photographic footer, and persistent brochure action.

The defining composition is a narrow story surrounded by a much larger landscape. At the inspected desktop size, the story is 440px wide and sits slightly right of the viewport center. A left rail holds the identity, four section links, and a brochure preview. A separate brand statement sits over the scenery at the lower right. The mobile version removes these surrounding elements and lets the same story occupy the full screen width.

Photography establishes the emotional tone: a person greeting a dog beside a cabin window, a mountain landscape, clear water, and a quiet forest encounter. Cream editorial sections provide pauses between darker photographic passages. Rounded orange brochure links supply the strongest interface contrast. Most other geometry remains square and restrained.

## How to Read This Reference

- **Measured values** come from the supplied rendered DOM, computed styles, and element rectangles. They describe the captured states rather than a complete stylesheet.
- **Visual observations** come from three supplied desktop captures and two mobile captures. These show the opening, a desktop testimonial-to-itinerary transition, and the footer.
- **Estimates** describe proportions or colors visible in those captures when the corresponding computed property was not supplied.
- **Recommendations** are implementation guidance. The CSS, intermediate-width behavior, accessibility additions, and suggested state management are adaptations rather than recovered source code.
- **Coverage differs by section.** The DOM establishes the content and several measurements for the middle of the page, but those sections do not all have corresponding visual captures.
- **Bounding rectangles are not always layout rules.** Transforms, overlapping elements, and clipping can affect reported coordinates. Do not turn every captured rectangle into a fixed CSS dimension.

## Tokens — Colors

### Default Palette

| Name | Value | Reusable token / source variable | Evidence and role |
| --- | --- | --- | --- |
| Warm Cream | `#f2eee4` | `--color-cream` / source `--bace-02` | Measured source variable. Also measured on Features and How To Stay backgrounds and on the hero H1. Preserve the source variable's spelling when integrating with existing CSS. |
| Brown Ink | `#322e21` | `--color-ink` / source `--base-black` | Measured source variable and body text color. Supplies the warm alternative to neutral black. |
| Action Orange | `#ec572e` | `--color-accent` / source `--accent` | Measured palette variable. The captures show orange brochure actions; the painted fill of their inner elements was not separately sampled. |
| Dry Grass | `#d1c8a6` | `--color-grass` / source `--thema` | Measured palette variable. Appropriate for muted supporting surfaces. The bottom action strip appears in this color family, but its exact painted color and opacity are unmeasured. |
| White | `#ffffff` | `--color-white` / source `--white` | Measured body and introductory section background; visually present on testimonial cards and reversed interface details. |
| Hero Shadow | approximately `#1b120b` | `--color-hero-floor` | Visual estimate for the nearly black brown beneath the hero photograph. This is an adaptation token, not a recovered declaration. |
| Testimonial Shadow | approximately `#211f14` | `--color-voice-floor` | Visual estimate for the dark olive area beneath the testimonial cards. This is not the measured body ink token. |

The exact orange token should not be presented as a screenshot pixel sample. Likewise, the green, blue, and brown hues in the scenery belong to the photography, not to a verified collection of additional interface colors.

### Palette Behavior

The page changes surfaces as the story progresses: white introduction, cream explanatory sections, dark image-backed passages, white testimonial cards, and a muted bottom action strip. This is one coordinated palette. No user-selectable theme was evidenced.

The desktop landscape is dark enough for light navigation and the brand statement to remain readable. A translucent rectangular backing further separates the brochure preview from the scenery. Its appearance does not establish a blur filter or a particular overlay opacity.

## Tokens — Typography

### Japanese Body and Main Headline

- **Measured family declaration:** `dnp-shuei-gothic-gin-std, sans-serif`.
- **Body foundation:** `14px`, weight `400`, `22.4px` line height, and `0.5px` letter spacing.
- **Editorial paragraphs:** usually `16px`, with either `28px` or `25.6px` line height.
- **Main headline:** weight `500`, cream text, and `0.75px` tracking.
- **Character:** gently spaced Japanese Gothic lettering with moderate weight. The page gets its premium feeling from imagery and pacing rather than very heavy display text.

### English Section Labels

The sampled section headings declare `'Stahlkl 12 Ot', Arial, sans-serif` at `14px / 21px`, weight `400`, with `0.5px` tracking. Examples include About Dog Friendly Type, Lineup, Features, Owner's Voice, and How To Stay.

These English labels operate as small editorial identifiers above the more prominent Japanese messages. They should not become oversized display headings in an adaptation.

### Product Names and Numerals

Product-related elements also contain the declaration `'StahlKl12 OT', dnp-shuei-gothic-gin-std, sans-serif`. This differs in spacing from the section-label family string. Preserve the observed declarations when working with the original font setup; the evidence does not establish whether these are aliases for the same loaded face.

Several product text wrappers report `font-size: 0px` while their children contain independently styled text. This is not a visible zero-size typography token. Never apply it to an entire replacement product title or pricing block.

### Identity and Utility Lettering

The SANU / Co-Owners wordmark has a distinctive mixed letterform treatment visible in the captures. Its font, image format, and intrinsic asset dimensions were not supplied. Use authorized identity artwork instead of recreating it with the body font.

The large English navigation labels, brochure labels, MENU caption, and footer statement were not individually sampled. Their approximate visual sizes are useful for adaptation, but should remain separate from measured type tokens.

### Type Scale

| Role | Desktop | Mobile | Weight / tracking | Status |
| --- | --- | --- | --- | --- |
| Body foundation | `14px / 22.4px` | Same | `400`, `0.5px` | Measured |
| English section identifier | `14px / 21px` | Same | `400`, `0.5px` | Measured |
| Main hero H1 | `28px / 42px` | `23.4px / 35.1px` | `500`, `0.75px` | Measured |
| Introductory and section lead paragraphs | `16px / 28px` | Same | `400`, `0.75px` | Measured |
| Feature explanation | `16px / 25.6px` | Same | `400`, `0.5px` | Measured |
| Testimonial text | `16px / 25.6px` | Same | `500`, `0.5px` | Measured |
| Closing narrative paragraphs | `16px / 32px` | Same computed values | `400`, `0.75px` | Measured; desktop rectangles appear enlarged |
| Main property price numeral | `24.8205px`, normal line height | `22px`, normal line height | `400`, `0.5px` | Measured |
| Small property price label | `13.5385px / 21.6615px` | `12px / 19.2px` | `300`, approximately `0.535px` / `0.474px` | Measured |
| Property financial note | `12px / 19.2px` | Same | `300`, `0.5px` | Measured |
| Desktop English navigation | Approximately `22px` | Not visible in closed mobile state | Unmeasured child styling | Visual estimate |
| Compact brochure label | Approximately `16px` | Approximately `16px` | Medium visual weight | Visual estimate |
| Footer English statement | Approximately `28px` | Approximately `28px` | Medium visual weight | Visual estimate |

Some property values scale by approximately `440 / 390`, while editorial body text and financial notes stay the same size. This suggests local component scaling rather than a globally scaled page. The underlying source formula was not supplied.

## Tokens — Spacing & Shapes

**Spacing character:** consistent inner reading margins, generous vertical sections, tightly grouped navigation, and compact action controls.

There is no evidence of a universal spacing scale or a special root-unit system. The root remains `16px`; many inspected component values are ordinary pixel measurements.

### Spacing Scale

| Use | Value | Evidence |
| --- | --- | --- |
| Property-list link padding and internal gap | `4px` | Measured |
| Desktop navigation wrapper gap | `5px` | Measured; this is not the gap between navigation rows |
| Gap between desktop navigation rows | `12px` | Calculated from 48px row pitch and 36px link height |
| Mobile hero bottom padding | `16px` | Measured |
| Main editorial horizontal inset | `32px` per side | Measured on both viewports |
| Gap between adjacent closing intro paragraphs | `34px` | Calculated from the sampled About paragraph rectangles |
| Desktop hero top padding | `60px` | Measured |
| Main section vertical padding | `70px` | Measured on About, Lineup, and Features |
| Mobile hero top padding | `84.4px` | Measured; equals 10% of the captured viewport height, but the source formula is unknown |
| Desktop identity-to-navigation clearance | `88px` | Calculated from the logo link and first navigation rectangle |

### Border Radius

| Element | Shape | Status |
| --- | --- | --- |
| Hero and closing brochure anchor | `40px` radius | Measured |
| Compact orange brochure control | Fully rounded pill | Visually observed; some outer anchors report zero radius, so the painted rounding belongs to a nested layer |
| Free-information badge | Circular | Visually observed |
| Testimonial image controls | Circular outlines | Visually observed |
| Testimonial cards and image edges | Square | Visually observed |
| Desktop brochure backing | Square rectangle | Visually observed |

The pill and circular badge are the principal rounded motifs. There is no broad rounded-card system.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 | Status |
| --- | --- | --- | --- |
| Main story width | `440px` | `390px` | Measured |
| Main story left edge | `532.203px` | `0px` | Measured |
| Main story center | `752.203px`, about `32.2px` right of viewport center | `195px`, viewport center | Calculated |
| Standard editorial text width | `376px` | `326px` | Measured |
| Hero rectangle | `440 × 1000px`, top at `34px` | `390 × 844px`, top at `0px` | Measured |
| Large in-story brochure action | `303 × 72.8125px` | `258 × 62px` | Measured |
| Compact brochure action | `258 × 62px` | `258 × 62px` | Measured |
| Desktop logo link | `322 × 30px`, at approximately `122.2, 131px` | Not present as a side rail | Measured |
| Desktop navigation link | Approximately `318.9 × 36px` | Not visible in the closed state | Measured |
| Bottom action strip | Approximately `440 × 74px` | Approximately `390 × 74px` | Visual estimate supported by 62px action height and approximately 6px top/bottom clearance |
| Footer section | `440 × 1000px` | `390 × 844px` | Measured |
| Document height | Approximately `14,970px` | Approximately `14,095px` | Measured, content-dependent |

The desktop hero rectangle begins at 34px but the following About section begins at document y = 1000px. These bounds overlap. The closing narrative also has a sampled desktop width of 528px around the same story center, while ordinary sections are 440px wide. Neither observation is sufficient to recover the exact transform or overlap mechanism.

## Components

### Desktop Landscape and Navigation Rail

**Role:** maintain context and navigation while the narrow story moves through the page.

The landscape fills the desktop viewport behind all surrounding interface elements. The three desktop captures retain the same logo, navigation, brochure panel, and lower-right statement coordinates while showing different story positions. This supports persistent positioning, although the exact positioning declarations were not supplied.

The left rail begins around x = 122px. A 322px-wide identity sits near y = 131px. Four navigation rows begin around y = 249px with a 48px pitch. Each row combines a delicate line-and-ring marker, an English label, and a smaller Japanese translation in brackets.

The evidenced anchors are:

| Label | Actual fragment |
| --- | --- |
| Lineup / `ラインナップ` | `#lineup` |
| Features / `サービス概要` | `#features` |
| Owner's Voice / `オーナーの声` | `#owner-s-voice` |
| How To Stay / `愛犬との1泊2日の過ごし方` | `#hou-to-say` |

The unusual final fragment is the actual recorded target. Preserve it when linking to this page. Scroll duration, active-section styling, and keyboard focus after navigation were not tested.

### Desktop Brochure Preview

**Role:** keep the main conversion offer available without interrupting the story.

A translucent dark rectangle, approximately 338 × 352px, sits below the navigation. Its contents are centered: a short two-line explanation, a small downward ornament, a layered preview of printed information and a phone, and the compact orange action.

The preview occupies approximately 274 × 134px in the visible capture. Keep its overlapping brochure composition intact instead of presenting it as three unrelated interface cards. The action is 258 × 62px, centered beneath it.

### Hero

**Role:** establish the relationship between cabin life, the owner, and the dog before explaining the service.

A portrait photograph fills the upper story. The Co-Owners identity sits over its bright upper region. The lower image fades into a nearly black brown field carrying a centered, two-line Japanese H1, two lines of supporting copy, and the brochure action.

The actual headline is `山と海と、愛犬と。自然の中のシェア別荘。`. The line break between its two sentences is an important part of the composition. On mobile, the action begins at y = 766px and ends at y = 828px, leaving the measured 16px bottom inset.

Preserve the dog's face, the person's gesture, and the window relationship when adjusting the crop. A generic cabin exterior would not reproduce the emotional emphasis of this opening.

### Mobile Menu Affordance

**Role:** provide a compact navigation entry when the desktop rail is removed.

The opening mobile capture shows two short light horizontal rules with a small MENU caption at the upper right, approximately 24px from the right edge and 29px from the top. The visible mark is about 30px wide; its actual hit area is unknown.

The open menu, transition, focus behavior, and menu contents were not captured. The footer capture does not show this control, so persistent positioning should not be assumed.

### Brochure Action

**Role:** the recurring primary action across the hero, desktop rail, closing conversion area, and bottom strip.

The anatomy is consistent:

1. A wide orange capsule.
2. A dark circular badge at the left, containing `無料` and a muted light ring.
3. A centered `資料を見る` label.
4. A simple right arrow near the trailing edge.

The hero and closing action enlarge to 303 × 72.8125px on desktop. The side-rail and bottom-strip versions remain 258 × 62px. On mobile, the in-story actions also use the compact dimensions.

All sampled brochure links point to [https://contact.sa-nu.com/co-owners_form_dog](https://contact.sa-nu.com/co-owners_form_dog). The destination was recorded but not inspected. The evidence does not establish whether the next page immediately supplies a document or first collects information.

Duplicate action text appears in the DOM, while each capture shows one visible label. Keep one accessible label in a new implementation; duplicated text does not prove a particular hover animation.

### About Story

**Role:** translate the opening image into everyday benefits of staying with a dog.

This section has a measured white background, 70px vertical padding, and 32px inner margins. A small English identifier introduces Japanese narrative copy about sleeping, eating, and relaxing together. Paragraphs use `16px / 28px`, with deliberate short lines.

The section measures about 1692px tall on desktop and 1576px on mobile. Those are content-dependent captured heights, not recommended fixed heights. The spacing between sampled text groups indicates substantial intervening content; its exact imagery and arrangement are not fully visible in the supplied captures.

### Property Lineup

**Role:** move from atmosphere to concrete ownership choices.

The DOM contains six offerings across MOSS, HIKE, and RAY, with location, size where applicable, availability, pricing or sold-out information, amenities, and financing notes. A `物件一覧` link follows the lineup and points to [https://www.sa-nu.com/list](https://www.sa-nu.com/list).

The property metadata occupies a horizontal sequence. On mobile, successive sampled text blocks begin at x = 28px, 208px, and 388px, producing a 180px pitch. Their widths are 178px. Desktop equivalents are approximately 200.8px wide with a 203.1px pitch. These are metadata measurements, not verified outer card dimensions.

White section lead text contrasts with a transparent section background in the computed sample. The exact underlying image or painted layer was not supplied visually. Preserve a clear hierarchy of name, location, price, amenities, and qualifying notes; do not invent a detailed card surface from these text rectangles alone.

### Features

**Role:** explain the ownership model and its practical advantages.

The measured surface is Warm Cream. The opening explanation introduces the shared-ownership service, followed by numbered Features 01 and 02 groups. The body distinguishes affordability from access to multiple locations.

The content remains inside the narrow story column, with 32px inner margins and 16px text. Lead copy uses 28px line height; detailed explanations use 25.6px. The DOM supports the information hierarchy, but does not establish every image arrangement or number treatment.

### Owner Testimonial Cards

**Role:** provide personal experience through photographs and substantial quotations.

The desktop middle capture shows a horizontal row of white, square-cornered cards against a dark olive area. Each visible card combines a photograph above a padded quotation. The next card is partially visible at the right edge, making continuation apparent.

The first desktop card is approximately 316px wide, with a measured quotation width of 295.8px. Mobile quotation width is 253.8px, suggesting a card around 274px wide if the same approximately 10px inner padding is retained. That mobile card-width estimate is derived from text geometry, not a mobile testimonial screenshot.

Circular previous/next controls overlap the photograph edges. Small dots appear beneath the photo, and paw-shaped indicators appear below the larger card row. These suggest separate image and testimonial pagination levels, but their independent operation was not tested.

Quotation text is measured at `16px / 25.6px`, weight `500`. Keep the full quote readable and let card height follow its content.

### How To Stay Narrative

**Role:** turn the service into an understandable two-day visit.

The visible opening is a broad cream section with a centered English identifier and the Japanese title `愛犬と過ごす1泊2日`, followed by `in SANU CABIN MOSS`. The section has 70px top padding and continues into a long sequence of day labels and activity descriptions.

The DOM establishes Day 01 and Day 02 content covering arrival, relaxing indoors, exploring nature, cooking outdoors, evening time, and breakfast. Body copy stays at 16px with 25.6px line height.

This is the longest measured section: approximately 4867px on desktop and 4566px on mobile. Treat it as an editorial sequence with natural content height. The large cream area visible beneath the captured heading is not evidence that the section should remain empty; additional content is present farther down the document.

### Closing Narrative and Conversion Block

**Role:** return to the emotional promise and offer a final route to more information.

The closing narrative uses white text with measured `16px / 32px` paragraph styling. Its desktop bounding rectangle is wider than the ordinary story, but the transform responsible for that geometry is unverified.

The subsequent DOM includes a 97% satisfaction claim with a December 2025 survey note, an explanation of the brochure, and another primary action. The claim is source copy, not an independently verified statistic. Its exact graphic treatment is not visible in the supplied captures and should not be invented.

### Photographic Footer

**Role:** close with the same nature-and-companionship promise that opens the page.

A full-height portrait photograph shows a seated person and a dog among trees. Centered light text reads Live with nature., followed by `自然と共に生きる。` and the smaller copyright line `© 2025 Sanu Inc.`.

The footer occupies a measured viewport-height section on both tested sizes. Its photo extends to the bottom action strip. The mobile crop retains the person and dog in the lower half while tree trunks form the background behind the centered copy.

The copyright year is page content. It is not the inspection date.

### Persistent Bottom Action Strip

**Role:** maintain access to the brochure after the opening.

The later captures show a strip confined to the story width, with a centered 258 × 62px action and approximately 6px vertical clearance. At desktop size, it spans x ≈ 532–972px; on mobile, it spans the full 390px viewport.

The strip is absent from the captured opening hero and present in the later states. Its exact activation threshold, entrance animation, and hide/show logic were not supplied. A new implementation can show it after the hero action leaves view, but that trigger must be labeled as an adaptation.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| Owner's Voice heading reveal | Mobile computed transition: `opacity 0.8s, transform 0.8s` | An 800ms opacity/transform transition is declared on this sampled heading. Trigger, displacement, delay, and full easing details are unverified. |
| Persistent desktop surround | Same surrounding interface positions in three desktop captures | Navigation, brochure preview, and statement remain visually persistent across the supplied scroll states. |
| Landscape variation | Mountain scene in the opening capture; stream scene in later captures | Multiple scenery states exist. Video, timed slideshow, scroll selection, and crossfade behavior cannot be distinguished from these still captures. |
| Slider status | Extracted six-slide status text and two-slide testimonial status text | Slider structures are evidenced. Exact control ownership, autoplay timing, and looping rules are not fully established. |
| Testimonial navigation | Circular arrows, image dots, and paw indicators are visible | These are observable control affordances. Click, swipe, keyboard, and nested-slider behavior were not exercised. |
| Section links | Four rendered fragment URLs | In-page navigation targets are known. Smooth scrolling and active-link tracking are unverified. |
| Brochure links | Repeated rendered destination URL | The destination is known. Form, download, validation, and completion behavior are outside the inspected scope. |
| Mobile menu | Closed MENU control in the opening capture | The entry affordance exists; its open state is unknown. |
| Repeated label layers | Duplicate navigation and action text in DOM extraction | Layered text is present. A rolling-label hover effect cannot be asserted. |

Most sampled elements report `animation: none`, and many transition fields contain only `all`. Neither establishes that the whole site is static, nor provides a usable animation duration.

For an adaptation, use restrained opacity and positional reveals where they help pacing. The observed 800ms transition is a useful reference for the testimonial heading, not a requirement to animate every paragraph. Keep all essential content visible when enhancement scripts fail.

## Surfaces

| Layer | Appearance | Purpose | Evidence level |
| --- | --- | --- | --- |
| Desktop scenery | Edge-to-edge natural imagery with subdued exposure | Establishes place around the reading column | Visually observed |
| Desktop brochure backing | Translucent dark rectangle | Separates the preview from detailed scenery | Visually observed; opacity unmeasured |
| Hero lower field | Nearly black brown, blended into photography | Holds the main headline and action | Visually observed; exact gradient unmeasured |
| About | White | Gives the first narrative a clean reading surface | Measured |
| Features and itinerary | `#f2eee4` | Creates warm editorial pauses | Measured |
| Testimonial cards | White, square edges | Separates personal accounts from the dark section | Visually observed |
| Testimonial lower field | Very dark olive | Frames cards and paw indicators | Visual estimate for exact color |
| Bottom action strip | Muted grass/khaki family | Keeps the orange action distinct | Visually observed; exact paint unmeasured |

The page has little general-purpose elevation. A soft shadow is visible around the mobile footer action, but its parameters were not supplied. It does not imply that every card should receive a shadow.

## Imagery

Use natural light, tactile wood interiors, ordinary clothing, and direct physical interaction between people and dogs. The hero photograph centers the act of greeting the dog. The footer shows quiet companionship. Both make the property feel lived in rather than merely displayed.

The desktop scenery operates at a different scale: mountains and water create the wider environmental setting. It can tolerate broad cropping because the narrow story carries the focal interaction. The central portraits require much more careful subject placement.

The visible testimonial photograph includes a small dog inside a curved wood interior. The brochure preview mixes printed pages, dog photography, and a phone. These secondary images connect the emotional story to actual accommodations and information.

### Observed Asset References

No original image filenames, image URLs, video URLs, or intrinsic asset dimensions were included in the evidence. The following references identify visible subjects and placement rather than fabricated file paths.

| Asset subject | Original-page evidence | Treatment |
| --- | --- | --- |
| Person greeting a dog beside a cabin window | Desktop and mobile opening captures | Tall crop; identity above; dark gradient beneath |
| Mountain landscape with a person and dog | Desktop opening surround | Full-viewport background behind light navigation |
| Clear stream and wooded bank | Later desktop surrounds | Broad background with persistent interface overlays |
| Dog in a curved wood interior | Desktop testimonial transition capture | Card photograph with overlapping circular arrows |
| Brochure and phone composition | Desktop left rail | Contained layered preview, approximately 274px wide |
| Person and dog among trees | Desktop and mobile footer captures | Viewport-height portrait, centered light statement |
| SANU / Co-Owners identity | Opening and desktop rail | Preserve the supplied lettering; asset format unverified |

Use authorized photography and identity assets. CSS can reproduce the hierarchy and geometry, but cannot replace the specificity of the people, dogs, and cabin interiors.

## Layout & Responsive Behavior

The layout preserves a compact reading experience at both tested sizes. Desktop space is used for scenery and persistent context rather than expanding the story into a wide marketing grid.

At 1440px, the story center is approximately 32.2px to the right of the viewport center. This subtle asymmetry matters: the left rail is substantial, while the right side carries only the short brand statement. A mechanically centered three-column grid would produce different proportions.

At 390px, the story is full width, starts at the top edge, and retains 32px editorial insets. The desktop rail and right-hand statement are absent. The identity remains inside the hero, and the compact MENU affordance appears at the upper right.

| Responsive change | Desktop observation | Mobile observation |
| --- | --- | --- |
| Story framing | Narrow column over wide scenery | Full-width story |
| Main H1 | `28px / 42px` | `23.4px / 35.1px` |
| Editorial copy | `16px`, 376px text width | `16px`, 326px text width |
| Main brochure action | 303px wide | 258px wide |
| Compact brochure action | 258px wide | 258px wide |
| Property price numeral | Approximately 24.82px | 22px |
| Testimonial quotation width | Approximately 295.8px | Approximately 253.8px |
| Persistent action strip | Confined to the 440px story | Full viewport width |

The evidence does not identify the actual breakpoint, tablet layout, orientation handling, browser-toolbar behavior, or safe-area declarations. A `1280px` desktop-surround breakpoint is recommended in the Quick Start to leave sufficient room for the rail. It is not a recovered source value.

Do not set fixed heights for the long content sections from this document. The mobile testimonial section is taller than its desktop counterpart even though most other sections become shorter. Text wrapping and component content need to determine height.

## Do’s and Don’ts

### Do

- Preserve the narrow desktop story and the larger landscape around it.
- Keep the desktop story slightly right of center when matching the inspected composition.
- Use the measured cream, brown ink, orange, and grass palette as the interface foundation.
- Keep editorial text at 16px on the tested mobile size, with generous line height and 32px side insets.
- Lead with a specific human-and-dog interaction, then explain the property and ownership model.
- Repeat the same brochure-action anatomy across placements.
- Use square image and testimonial edges, reserving full rounding for actions and small controls.
- Preserve the distinction between small English section labels and larger Japanese messages.
- Let adjacent carousel content remain partially visible where evidenced.
- Keep source pricing qualifications and survey notes attached to the claims they qualify.
- Treat unknown motion and menu states as implementation decisions requiring their own validation.

### Don’t

- Don’t expand the story to a conventional 1100px content width on desktop.
- Don’t make the desktop navigation a full-width top bar when reproducing this composition.
- Don’t introduce green-filled buttons merely because the photography contains greenery.
- Don’t replace the portrait hero with an unrelated property exterior.
- Don’t assign exact colors to photograph pixels or overlays that were not measured.
- Don’t infer a background video, parallax system, or autoplay schedule from changing still images.
- Don’t reproduce duplicate DOM label layers as duplicate visible or announced text.
- Don’t copy `font-size: 0px` wrapper values into readable product components.
- Don’t generalize the footer action shadow into an elevated card system.
- Don’t hardcode captured property availability, prices, or satisfaction figures as permanent design content.
- Don’t let the persistent action strip cover the last meaningful content or keyboard focus target.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified original-page behavior:

- Give the mobile menu a real button, an accessible name, an expanded state, and keyboard-operable contents. Preserve focus when opening and closing it.
- Make slider arrows explicit buttons and provide accessible names for image pagination and testimonial pagination. Do not rely on paw silhouettes alone to communicate state.
- Give decorative desktop scenery empty alternative text and meaningful editorial images useful descriptions.
- Preserve one accessible label for each brochure link even if decorative text copies are used for animation.
- Reserve bottom clearance for the action strip and include `env(safe-area-inset-bottom)` on devices that need it.
- Validate actual text contrast. White against the declared orange is approximately 3.5:1, calculated from the token colors, so normal-size action text needs a darker fill or sufficiently dark lettering. An optional darker action token is included below.
- Provide visible focus indicators that work against both cream surfaces and photographs.
- Respect reduced-motion preferences. If scenery is animated in the adaptation, provide a static alternative and avoid requiring motion to reveal content.
- Load hero imagery promptly, defer later editorial images, and reserve image dimensions to reduce layout shifts.
- Recheck intermediate widths, short screens, text enlargement, carousel focus visibility, and the brochure destination as part of implementation testing.

## Agent Prompt Guide

### Quick Color Reference

- Editorial cream: `#f2eee4`.
- Main text: `#322e21`.
- Declared accent: `#ec572e`.
- Muted supporting color: `#d1c8a6`.
- White cards and introductory surface: `#ffffff`.
- Approximate hero shadow for adaptation: `#1b120b`.
- Approximate testimonial shadow for adaptation: `#211f14`.
- Optional darker action fill for normal-size white text: `#b84320`, a recommendation rather than an observed token.

### Overall Prompt

“Create a Japanese dog-friendly shared-vacation-home page with a narrow editorial story and expansive nature photography. At a 1440px desktop viewport, use a 440px story positioned about 32px right of center. Place a persistent identity, four bilingual section links, and a brochure preview to its left; place a short light brand statement at the lower right. Begin with a tall photograph of a person greeting a dog beside a cabin window, fading into dark brown behind a centered two-line Japanese headline. Alternate white, warm cream #f2eee4, and dark photographic sections. Use brown ink #322e21 and consistent orange brochure capsules with a circular free-information badge and a right arrow. At 390px, remove the desktop surround and use the full width with 32px editorial insets. Keep body text at 16px and reserve space for a compact bottom action strip. Treat menu behavior, slider behavior, and background motion as explicitly designed additions rather than assumed source behavior.”

### Example Component Prompts

1. **Hero:** “A viewport-height portrait composition showing a person and dog beside a wood cabin window. Place authorized Co-Owners identity artwork near the top. Blend the lower photograph into deep brown and stack the two-line Japanese headline, two short supporting lines, and an orange brochure capsule. At 390 × 844, make the capsule 258 × 62px with a 16px bottom inset.”
2. **Desktop rail:** “A quiet, light-colored navigation rail over subdued scenery. Use a 322px-wide identity, four 36px-high bilingual rows with a 48px pitch, and a translucent rectangular brochure panel beneath them. Pair large English labels with small bracketed Japanese translations and delicate line-and-ring markers.”
3. **Brochure action:** “An orange capsule containing a dark circular badge labeled `無料`, the centered label `資料を見る`, and a simple right arrow. Use 258 × 62px for the compact version and 303 × 72.8px for the desktop hero version. Keep one accessible label.”
4. **Testimonial:** “A horizontal sequence of square white quote cards on very dark olive. Use a cabin-and-dog photograph above 16px medium-weight Japanese text, approximately 10px inner padding, circular photo arrows, tiny image dots, and a separate row of paw-shaped testimonial indicators. Reveal part of the next card.”
5. **Stay narrative:** “A warm cream editorial section with a small centered How To Stay label, a larger Japanese two-line introduction, and Day 01 / Day 02 content. Keep the reading width to the story column, use 32px side insets, and let photographs and paragraphs determine section height.”
6. **Footer:** “A full-height forest portrait with a seated person and dog in the lower half. Center the light Live with nature. statement, its Japanese translation, and a small copyright line above the subjects. Place a muted grass-colored action strip along the bottom, confined to the story width on desktop.”

## Quick Start

### CSS Custom Properties

This CSS reproduces the main composition using a normal 16px root. It is an adaptation, not extracted source CSS. The desktop breakpoint, photo crops, overlay opacity, secondary type estimates, and interaction enhancements are recommendations.

The expected structure is a decorative `.scenery`, a `.desktop-rail`, a `.desktop-slogan`, and a `.story` containing the hero and editorial sections. Place `.cta-dock` outside `.story` so it can align independently with the viewport. Supply authorized media assets; no original asset file URLs were provided.

```css
:root {
  /* Measured palette values, with descriptive aliases. */
  --color-cream: #f2eee4;
  --color-ink: #322e21;
  --color-accent: #ec572e;
  --color-grass: #d1c8a6;
  --color-white: #ffffff;
  --color-action: var(--color-accent);

  /* Visual approximations, not recovered source declarations. */
  --color-hero-floor: #1b120b;
  --color-voice-floor: #211f14;

  /* Observed family declarations; load authorized fonts separately. */
  --font-body: 'dnp-shuei-gothic-gin-std', sans-serif;
  --font-label: 'Stahlkl 12 Ot', Arial, sans-serif;
  --font-product: 'StahlKl12 OT',
    'dnp-shuei-gothic-gin-std', sans-serif;

  --text-base: 14px;
  --text-body: 16px;
  --text-note: 12px;
  --leading-body: 1.75;
  --leading-detail: 1.6;
  --tracking-base: 0.5px;
  --tracking-editorial: 0.75px;

  --story-width: 440px;
  --inset: 32px;
  --section-space: 70px;
  --radius-action: 40px;
  --dock-height: 74px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

.sanu-page {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  letter-spacing: var(--tracking-base);
}

/* Optional accessibility adaptation; not an original palette token. */
.sanu-page--contrast {
  --color-action: #b84320;
}

.scenery,
.desktop-rail,
.desktop-slogan {
  display: none;
}

.story {
  position: relative;
  z-index: 1;
  width: min(100%, var(--story-width));
  margin-inline: auto;
  background: var(--color-white);
}

.section {
  padding: var(--section-space) var(--inset);
  scroll-margin-top: 24px;
}

.section--cream {
  background: var(--color-cream);
}

.eyebrow {
  margin: 0 0 24px;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.editorial-copy {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-editorial);
}

.editorial-copy + .editorial-copy {
  margin-top: 34px;
}

.fine-print {
  font-size: var(--text-note);
  font-weight: 300;
  line-height: 1.6;
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 84.4px var(--inset) 16px;
  overflow: hidden;
  color: var(--color-cream);
  background: var(--color-hero-floor);
}

.hero__media {
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  width: 100%;
  height: 78%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* Recommended gradient and crop; tune to the actual photograph. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 48%,
    rgb(27 18 11 / 18%) 58%,
    var(--color-hero-floor) 73%
  );
}

.hero__brand {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 210px;
  max-width: 70%;
  height: auto;
  transform: translateX(-50%);
}

.hero__copy {
  width: 100%;
  text-align: center;
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(21px, 6vw, 23.4px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.75px;
}

.hero__support {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.6;
}

.mobile-menu {
  position: absolute;
  top: 20px;
  right: 16px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  color: var(--color-cream);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.cta {
  --cta-width: 258px;
  --cta-height: 62px;
  --cta-badge: 50px;
  display: grid;
  grid-template-columns: var(--cta-badge) minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  width: var(--cta-width);
  max-width: 100%;
  min-height: var(--cta-height);
  margin-inline: auto;
  padding: 6px;
  border-radius: var(--radius-action);
  color: var(--color-white);
  background: var(--color-action);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.cta__badge {
  display: grid;
  place-items: center;
  width: var(--cta-badge);
  aspect-ratio: 1;
  border: 3px solid var(--color-grass);
  border-radius: 50%;
  color: var(--color-cream);
  background: var(--color-hero-floor);
  font-size: 14px;
  font-weight: 400;
}

.cta__arrow {
  font-size: 20px;
  line-height: 1;
}

.cta-dock {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 50%;
  display: flex;
  justify-content: center;
  width: min(100%, var(--story-width));
  padding: 6px 16px calc(6px + var(--safe-bottom));
  transform: translateX(-50%);
  background: var(--color-grass);
}

.cta-dock[hidden] {
  display: none;
}

/* Native scrolling is a recommended fallback, not observed source code. */
.quote-track {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 0 58px 24px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 58px;
  background: var(--color-voice-floor);
}

.quote-card {
  flex: 0 0 274px;
  padding: 10px;
  background: var(--color-white);
  scroll-snap-align: center;
}

.quote-card img {
  display: block;
  width: 100%;
  height: auto;
}

.quote-card blockquote {
  margin: 24px 0 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 25.6px;
}

.closing {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  padding: 35svh var(--inset)
    calc(var(--dock-height) + var(--safe-bottom));
  color: var(--color-white);
  background: var(--color-hero-floor);
  text-align: center;
}

.closing__media {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.closing__statement {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
}

.closing__translation {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.closing__copyright {
  margin: 32px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

/* Source-derived duration; no hidden initial state is imposed. */
.voice-heading {
  transition: opacity 800ms, transform 800ms;
}

.sanu-page :focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--color-cream);
}

/* Recommended breakpoint; only 390px and 1440px were inspected. */
@media (min-width: 1280px) {
  :root {
    --story-left: calc(50vw - 187.8px);
  }

  .scenery {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--color-ink);
  }

  .scenery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .scenery::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 30%);
  }

  .story {
    margin-top: 34px;
    margin-left: var(--story-left);
    margin-right: 0;
  }

  /* Normal-flow approximation of the captured overlapping hero bounds. */
  .hero {
    min-height: calc(100svh - 34px);
    padding: 60px var(--inset) 36px;
  }

  .hero__brand {
    top: 60px;
  }

  .hero h1 {
    font-size: 28px;
    line-height: 42px;
  }

  .hero__support {
    font-size: 18px;
  }

  .cta--hero {
    --cta-width: 303px;
    --cta-height: 72.8125px;
    --cta-badge: 58px;
    font-size: 18px;
  }

  .mobile-menu {
    display: none;
  }

  .desktop-rail {
    position: fixed;
    z-index: 2;
    top: 131px;
    left: calc(var(--story-left) - 410px);
    display: block;
    width: 338px;
    color: var(--color-cream);
  }

  .desktop-rail__brand {
    display: block;
    width: 322px;
    height: 30px;
    object-fit: contain;
  }

  .desktop-nav {
    display: grid;
    gap: 12px;
    margin-top: 88px;
  }

  .desktop-nav a {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    color: inherit;
    font-family: var(--font-label);
    font-size: 22px;
    text-decoration: none;
  }

  .desktop-nav small {
    font-family: var(--font-body);
    font-size: 12px;
  }

  .lead-panel {
    margin-top: 88px;
    padding: 24px 32px;
    background: rgb(50 46 33 / 20%);
    text-align: center;
  }

  .lead-panel__caption {
    margin: 0;
    font-size: 14px;
    line-height: 26px;
  }

  .lead-panel__preview {
    display: block;
    width: 100%;
    height: auto;
    margin: 20px 0 32px;
  }

  .desktop-slogan {
    position: fixed;
    z-index: 2;
    right: 56px;
    bottom: 136px;
    display: block;
    color: var(--color-white);
    text-align: right;
  }

  .cta-dock {
    left: var(--story-left);
    width: var(--story-width);
    transform: none;
  }

  .quote-track {
    padding-inline: 62px;
    scroll-padding-inline: 62px;
  }

  .quote-card {
    flex-basis: 316px;
  }

  .closing {
    padding-top: 39svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-heading {
    transition: none;
  }

  .quote-track {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}
```

A reusable brochure action can use the recorded destination. Its duplicated decorative label layers are intentionally unnecessary in this adaptation:

```html
<a class='cta' href='https://contact.sa-nu.com/co-owners_form_dog'>
  <span class='cta__badge'>無料</span>
  <span class='cta__label'>資料を見る</span>
  <span class='cta__arrow' aria-hidden='true'>→</span>
</a>
```

Add `cta--hero` for the enlarged desktop in-story version. For the persistent version, place the compact action inside `.cta-dock`. A recommended enhancement is to toggle the dock's `hidden` attribute when the hero action leaves view. The source threshold is unknown, and this CSS does not implement menu or carousel JavaScript.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original page uses Tailwind. Define the properties above before using these mappings.

```css
@theme inline {
  --color-cream: #f2eee4;
  --color-ink: #322e21;
  --color-accent: #ec572e;
  --color-grass: #d1c8a6;
  --color-action: var(--color-action);

  --font-editorial: 'dnp-shuei-gothic-gin-std', sans-serif;
  --font-section: 'Stahlkl 12 Ot', Arial, sans-serif;

  --text-caption: 12px;
  --text-label: 14px;
  --text-copy: 16px;
  --text-hero-mobile: 23.4px;
  --text-hero-desktop: 28px;

  --spacing-story: 440px;
  --spacing-editorial: 32px;
  --spacing-section: 70px;
  --spacing-action-width: 258px;
  --spacing-action-height: 62px;

  --radius-action: 40px;
}
```

If mapping the dynamic action color, use a differently named source variable such as `--sanu-action` and map `--color-action: var(--sanu-action)`; avoid a self-referencing custom property in production. Alternatively, map `--color-action` directly to the chosen orange value.

## Sources & Evidence

- [Original and final inspected page](https://www.sa-nu.com/lp/co-owners-dog): the supplied observation reports HTTP 200 and no URL change. This page is the authority for the content, design observations, source variables, and computed measurements in this reference.
- **Capture date:** September 12, 2026, 17:19:27.416 UTC / September 13, 2026, 02:19:27.416 JST.
- **Desktop evidence:** 1440 × 1000 CSS pixels; opening hero, testimonial-to-itinerary transition, and photographic footer captures, with a rendered DOM/style snapshot covering the longer page.
- **Mobile evidence:** 390 × 844 CSS pixels; opening hero and footer captures, with a rendered DOM/style snapshot covering the longer page.
- **Rendered link evidence:** section fragments on the original page, [the property list](https://www.sa-nu.com/list), and [the brochure contact destination](https://contact.sa-nu.com/co-owners_form_dog). Linked destination pages were not inspected.
- **Readiness scope:** the supplied collection waited for document loading, sampled text and layout stability, relevant finite animation settling, and visible image decoding, subject to stated time limits. It traversed intermediate scroll positions. These checks do not establish semantic completeness or prove that every delayed element appeared.
- **Environment limitations:** perpetual animations were temporarily paused during readiness checks and resumed afterward; service workers and SharedWorkers were disabled. These conditions can affect captured media or delayed behavior.
- **Unverified behavior:** menu opening, hover states, keyboard navigation, slider clicks and gestures, scenery timing, sticky-action trigger logic, contact-form behavior, and intermediate responsive widths.
- **Asset and attribution limits:** no original asset manifest or font-file URLs were supplied. The original footer visibly contains `© 2025 Sanu Inc.`; the inspected original-page evidence does not independently establish production-agency credits.

This reference describes the current page represented by the supplied captures and rendered evidence. Estimates and implementation recommendations are identified throughout; no additional browsing or file inspection was performed.