# Sansuikaku Recruiting Site — Style Reference

> A ryokan recruitment story composed with warm paper, vertical Mincho lettering, fine lines, and generous breathing room.

**Website / original URL:** [sansuikaku.com/recruit](https://sansuikaku.com/recruit/)
**Final URL:** [https://sansuikaku.com/recruit/](https://sansuikaku.com/recruit/)
**Theme:** light, with warm ivory and broad beige sections
**Inspected:** September 12, 2026, at 13:44:34 UTC / 22:44:34 JST, through the supplied browser evidence
**Viewports:** desktop 1440 × 1000; mobile 390 × 844 CSS pixels
**Scope:** the current recruitment homepage: opening composition, persistent header, introductory statement, director’s message, company and business introductions, people and work sections, interview links, application area, and footer. Visual captures show the opening on both devices, the desktop company introduction, and the closing/footer on both devices. Other homepage sections are documented through the supplied rendered DOM and computed measurements. Linked pages and menu-open states were not inspected.

Sansuikaku’s recruitment homepage uses the visual language of its hospitality business to introduce an employer. A calligraphic identity, restrained Mincho typography, warm interiors, and exceptionally open compositions establish the atmosphere. Black application links provide concentrated contrast without dominating the page.

The opening statement is arranged in four vertical columns, read from right to left. Each column begins at a different height, and three delicate diagonal strokes connect the spaces between them. A small photographic media window sits near the lower-left edge, leaving the central typography almost alone on the paper-colored canvas.

Further down, the page becomes a long editorial sequence. Vertical section titles sit beside offset horizontal paragraphs; beige surfaces group the company and business material; interview entries give names a clear hierarchy. The closing invitation returns to the staggered vertical composition. This is the homepage of a recruitment site with several linked information pages, rather than an isolated application form.

## How to Read This Reference

- **Measured values** come from the supplied rendered DOM and computed-style export. Tables round fractional pixels for readability.
- **Visual observations** come from the original-page desktop and mobile captures. Image composition, decorative lines, and logo proportions are described visually where element measurements were not supplied.
- **Calculated values** are arithmetic relationships between recorded bounds, such as column gaps. They do not establish the original CSS formula.
- **Estimates** are explicitly identified. No image sampling, additional browsing, asset inspection, or interaction testing was performed for this document.
- **Implementation aliases** are proposed names for reuse. Original custom-property names are identified separately.
- **Recommendations** and the Quick Start describe a new implementation. They are not claims about unobserved source behavior.

The browser viewport and document width differ: the desktop root measured 1425px inside a 1440px viewport, and the mobile root measured 375px inside a 390px viewport. Account for this 15px difference when comparing coordinates. Do not build a permanent 15px blank strip into a recreation; use the actual available layout width.

## Tokens — Colors

### Default Palette

| Name | Measured value | Original property | Role |
| --- | --- | --- | --- |
| Warm Paper | `#FFFEFA` | `--color-white` | Root background, narrative sections, application area, footer, and reversed application text |
| Light Beige | `#E2DBCB` | `--color-beige-light` | Company introduction, business section, and circular upward-arrow control |
| Text Ink | `#201C15` | `--color-black-text` | Main Japanese text, headings, telephone number, and footer content |
| Button Black | `#100F0D` | `--color-black-bg` | Filled application links |
| Soft Beige | `#BDBAB3` | `--color-beige` | Romanized interview names; a suitable implementation color for the visually similar fine rules |
| Muted Beige | `#96938D` | `--color-beige-dark` | Business-category captions |
| Pure Black | `#000000` | `--color-black-pure` | Declared utility color; do not replace the warmer main text color with it globally |
| Pure White | `#FFFFFF` | `--color-white-pure` | Recorded introductory reverse text and several header/navigation computed colors |

The small floral mark in the logo appears ochre-gold. Its exact asset color was not supplied. An approximate `#DDAE50` is a visual reference only, not a measured source token; use the authorized logo asset rather than recoloring or redrawing it from this estimate.

### Palette Behavior

The paper and beige backgrounds are distinct solid surfaces. The design does not depend on gradients, translucent cards, or a general shadow system. The lounge photograph introduces red upholstery, timber browns, dark furniture, and green foliage, but those colors belong to the imagery rather than to a broader UI palette.

Several header elements have computed white text while appearing dark over paper in the captures. The logo also appears cooler over the lounge photograph. The supplied export does not include enough compositing or ancestor-state information to explain this difference. Preserve the rendered contrast, and do not infer a specific blend mode or copy white text onto the ivory background without checking the result.

Only the light presentation is evidenced. No selectable theme system was observed.

## Tokens — Typography

### Japanese Editorial Typeface

- **Recorded family:** `"Shippori Mincho B1", serif`, also declared as `--font`.
- **Principal weight:** `500`, including body paragraphs and the directly measured vertical section headings.
- **Emphasis:** `700` on text links and some heading containers.
- **Character:** fine Mincho strokes, deliberate punctuation, and enough tracking to keep vertical copy open.
- **Implementation alias:** `--font-ja`.

The calligraphic wordmark is separate brand artwork. It should not be recreated by setting the company name in the body typeface.

### English Labels and Numerals

- **Recorded family:** `"Ibarra Real Nova", serif`, declared as `--font-en`.
- **Verified uses:** the vertical scroll caption, telephone number, footer index heading, and copyright.
- **Tracking:** commonly `0.03em`; the mobile telephone number uses `0.06em`.
- **Important distinction:** Romanized staff names and the director’s Romanized name retain Shippori Mincho B1 in the measured export. Do not automatically apply the English family to every Latin string.

These are recorded CSS family declarations. Font-file URLs and per-glyph font resolution were not supplied.

### Type Scale

Values below are computed CSS pixels, shown as **font size / line height**.

| Role | Desktop | Mobile | Weight and tracking |
| --- | --- | --- | --- |
| Default body | `14 / 21` | `14.578 / 21.867` | `500`, normal tracking |
| Opening vertical statement | `38 / 38` | `27.074 / 27.074` | `500`; `0.227em` → `0.1em` |
| Closing vertical invitation | `44 / 44` | `24.991 / 24.991` | `500`; `0.227em` → `0.1em` |
| Vertical section title | `36 / 36` | `23.950 / 23.950` | `500`, `0.1em` |
| Business section heading | `38 / 57` | `23.950 / 35.925` | `500`, `0.02em` |
| Interview section heading | `38 / 57` | `26.033 / 39.049` | `500`, `0.02em` |
| Introductory reverse paragraph | `16 / 50` | `15.620 / 35.404` | `500`; `0.16em` → `0.06em` |
| Standard director-message paragraph | `16 / 36` | `15.620 / 35.300` | `500`, `0.07em` |
| Company introduction paragraph | `14 / 40` | `14.578 / 31.239` | `500`, `0.05em` |
| Work introduction paragraph | `18 / 40.5` | `14.578 / 31.239` | `500`, `-0.05em` |
| Business name | `24 / 36` | `18.743 / 28.115` | `500`, normal tracking |
| Interview name | `30 / 45` | `22.909 / 34.363` | `500`, normal tracking |
| Interview Romanized name | `13 / 19.5` | `11.454 / 17.181` | `500`, soft beige |
| Header application label | `16 / 24` | `14.578 / 21.867` | `500` |
| Main application label | `14 / 21` | `16.661 / 24.991` | `500` |
| Telephone number | `28 / 42` | `33.322 / 49.982` | `500`; `0.03em` → `0.06em` |
| Footer index label | `11 / 16.5` | `11.454 / 17.181` | `400`, `0.03em` |
| Copyright | `11 / 16.5` | `8.330 / 12.496` | `500`, normal tracking |

The desktop scroll caption is `11px / 16.5px`, with recorded weight `200` and `0.03em` tracking. The menu button is `14px / 21px` on desktop and approximately `13.537px / 20.305px` on mobile.

Director-message heading containers report `21px / 31.5px`, weight `700`, on desktop. Their nested text styling is not fully represented in the export, so these container values should not be treated as a complete measurement of every visible heading glyph.

### Vertical Typesetting

The opening columns use a one-character-wide line box and generous character spacing. Their stagger comes from different top padding values on otherwise aligned paragraph boxes. Preserve real vertical Japanese typesetting, including punctuation behavior, rather than rotating a horizontal text block.

Reading order should remain semantic: `日本の旅館と、`, then `那須の観光を`, then `もっともっと`, then `面白くする。`. A recreation can keep that DOM order and arrange the columns visually from right to left.

## Tokens — Spacing & Shapes

**Density:** very sparse at the opening and section boundaries, with more concentrated paragraphs inside narrow editorial columns.

**Root measurements:** `10px` desktop and `10.413px` mobile. The underlying responsive root formula was not supplied. The Quick Start uses ordinary CSS pixels and an unchanged browser root instead of guessing that formula.

### Spacing Scale

These are recurring measured relationships, not evidence of one universal spacing scale.

| Use | Desktop | Mobile |
| --- | --- | --- |
| Header application inset from layout right | `20px` | `10.406px` |
| Header application top | `22px` | `10.406px` |
| Footer outer inset | `40px` | `20.813px` |
| Broad section-heading left inset | `76px` | `19.781px` |
| Text-link label-to-line gap | `15px` | `15.620px` |
| Text-link padding | `10px 5px` | `10.413px 5.207px` |
| Company title-to-copy horizontal gap | `77px`, calculated | `36.438px`, calculated |
| Company copy start below title start | `100px`, calculated | `83.297px`, calculated |
| Business-row bottom padding | `30px` | `31.239px` |
| Gap between interview link boxes | `100px` horizontally | `52.063px` vertically |
| Business-section bottom padding | `300px` | `145.782px` |
| People-section top padding | `300px` | `145.782px` |

The large intervals matter as much as the small ones. Desktop sections repeatedly use hundreds of pixels around imagery and text. Reducing every section to a standard 64px top and bottom padding would substantially change the rhythm.

### Border Radius

| Element | Observed treatment |
| --- | --- |
| Application links | `0`, square corners |
| Measured content links | `0` |
| Visible photographic frames | Square corners |
| Footer upward-arrow button | `50%`, circular |

Fine diagonal connectors and the footer divider appear approximately one pixel thick. Their stroke declarations were not included; `1px solid #BDBAB3` is a practical approximation, not a verified border token.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Layout root | `1425px` wide | `375px` wide |
| Document height | approximately `18441.41px` | approximately `16626.06px` |
| Opening column group | approximately `476px` wide | approximately `264.5px` wide |
| Opening column start-to-start distance | `146px` | approximately `79.141px` |
| Clear gap between opening columns | `108px`, calculated | approximately `52.063px`, calculated |
| Opening paragraph-box top | `287.922px` | `252.566px` |
| Header application link | `110 × 30px` | `93.703 × 27.063px` |
| Company introduction copy | `791.656px` wide | `248.063px` wide |
| Standard director-message copy | `675.875px` wide | `293.266px` wide |
| Business entry link | `1029.188 × 181px` | `333.375 × 272.313px` for the first four entries |
| Interview entry link | `355 × 595.938px` | `281.313 × 467.719px` |
| Main application link | `270 × 68px` | `281.141 × 62.469px` |
| Upward-arrow button | `50 × 50px` | `41.641 × 41.641px` |

Several vertical headings have tall element bounds because their boxes extend alongside content. Do not interpret the entire measured box height as the occupied glyph height.

## Components

### Persistent Header

**Role:** maintain the identity and provide immediate application access throughout a long page.

The identity sits at the upper left; `( Menu )` and the dark `応募する` link occupy the upper right. The header remains at the top in the supplied scrolled captures. Its exported container has zero height, consistent with an overlaid arrangement, although the positioning declaration itself was not included.

On desktop, the brand lockup is approximately 360px wide in the screenshot, with the English recruitment descriptor beside the Japanese logo. On mobile, the lockup is approximately 125px wide and places the English descriptor underneath. These logo dimensions are visual estimates.

The compact application link contains a left-inset label and a short horizontal rule extending toward its right edge. It uses paper text on Button Black, without a radius or shadow. Its href points to the employer’s Indeed jobs page. Navigation was not followed, so new-tab behavior and the destination’s interface remain unverified.

### Opening Navigation Index

**Role:** give direct access to the recruitment site’s main destinations.

At the desktop opening, seven links form a right-aligned vertical index below the application link. The first box starts at `y=80px`; each occupies a `40px` vertical step. Text is `14px`, with `7px` vertical padding recorded on the anchors.

| Source label | Recorded destination |
| --- | --- |
| `ホーム` | `/recruit/` |
| `山水閣を知る` | `/recruit/about/` |
| `働く人を知る` | `/recruit/staff/` |
| `仕事を知る` | `/recruit/work/` |
| `スタッフインタビュー` | `/recruit/staff/#staffInterview` |
| `募集職種` | `/recruit/work/#workAboutJobOpenings` |
| `よくある質問` | `/recruit/work/#workFAQ` |

The mobile opening shows the menu trigger without a visible expanded index. Navigation anchors still appear in the exported DOM, which does not prove that they are visible, focusable, or available in the closed state. The desktop scrolled captures also show the menu trigger without the opening index. The exact visibility trigger and menu-opening interaction were not exercised.

### Opening Vertical Statement

**Role:** introduce the employer’s ambition before presenting detailed information.

Four narrow text columns occupy the center of a mostly empty viewport. At desktop size, their left coordinates are `912.5`, `766.5`, `620.5`, and `474.5px` in reading order. Each is `38px` wide. All paragraph boxes begin at approximately `287.922px`, with top padding producing the stagger.

| Column in reading order | Desktop top padding | Mobile top padding |
| --- | --- | --- |
| `日本の旅館と、` | `0` | `0` |
| `那須の観光を` | `121.6px` | `37.903px` |
| `もっともっと` | `45.6px` | `18.952px` |
| `面白くする。` | `144.4px` | `75.807px` |

Three fine diagonal strokes occupy the gaps between columns. Their directions alternate, giving the composition a loose connecting rhythm without enclosing the text. Their exact vector paths were not supplied.

The mobile composition remains vertical and staggered, rather than becoming a conventional horizontal heading. Both font size and tracking decrease, while the group retains substantial empty space above and below it.

### Opening Media Window and Scroll Cue

**Role:** introduce the physical workplace while preserving the typographic opening.

The desktop capture shows an approximately `320 × 180px` media frame at `x≈40px`, `y≈780px`. It contains a person preparing food in a dark interior. The mobile capture shows a corridor and a staff member in a roughly `350px`-wide frame starting near `x=20px`, `y=746px`; the frame continues below the captured viewport.

The different scenes do not establish whether the source is a video, slideshow, or another media arrangement. Playback, looping, sound, controls, and any relationship between media scale and scrolling are unverified.

On desktop, a small vertical `SCROLL` label sits near the lower right, with a fine line extending below it. The label is absent from the supplied mobile opening.

### Introductory Statement

**Role:** explain the relationship between the ryokan and the wider Nasu region.

The first introductory section starts at document `y=2000px` on desktop and `y=1688px` on mobile: exactly twice the respective viewport height in these captures. This establishes a long opening allocation, but does not by itself prove sticky positioning, scroll pinning, or a particular animation timeline.

Two paragraphs use computed pure-white text. The first desktop paragraph is `1025px` wide, starts at `x=200px`, and uses `16px / 50px` type. On mobile it becomes `333.375px` wide at `x=20.813px`, with `15.620px / 35.404px` type.

The supplied screenshots do not show this section’s full backdrop. Preserve the recorded reverse-text intent only after pairing it with a verified or deliberately chosen contrasting surface.

### Director’s Message

**Role:** present the employer’s philosophy through a substantial editorial narrative.

The DOM identifies an introductory message, a representative label, and the name `KATAOKA TAKAO`, followed by three thematic passages. Desktop text columns shift between left and right positions rather than sitting in one repeated centered stack.

Two representative desktop paragraph columns begin at `x=321px` and `x=552.5px`, both approximately `675.875px` wide. The associated heading groups sit to their left. The third passage uses a larger `18px / 40.5px` paragraph style with negative tracking, so the source does not apply one universal body-text rule throughout.

On mobile, the thematic headings become horizontal multiline groups starting near `x=19.781px`. Their paragraphs begin farther right, at `x=60.922px`, and measure `293.266px` wide. This preserves an editorial indent even after the desktop composition collapses.

Exact portrait crops and intermediate image placement were not visually available in the supplied captures.

### Company Introduction

**Role:** connect the workplace’s atmosphere with the company’s history and ambitions.

A broad lounge photograph transitions directly into a Light Beige surface. In the desktop capture, the visible photograph contains timber wall panels, large windows, upholstered chairs, low wooden tables, and warm interior lighting. The visible image area is only a portion of the full section; its screenshot height should not be treated as the source asset ratio.

The vertical `山水閣を知る` heading starts at `x=154px`. A `36px` heading column and a calculated `77px` gap lead to the copy at `x=267px`. The paragraph starts `100px` below the heading’s box top, creating an intentional vertical offset.

The copy is relatively small at `14px`, but its `40px` line height gives it a spacious rhythm. A right-aligned `私たちについて` text link closes the block.

On mobile, the title remains vertical at approximately `23.950px`. It begins at `x=45.734px`, while the copy begins at `x=106.125px`, leaving a narrow `248.063px` reading column. This is a specific retained composition, not a fully stacked title-and-body layout.

### Text-and-Line Link

**Role:** provide a quiet transition from an introduction to a detail page.

The link consists of bold Mincho text followed by a fine horizontal line. It has no filled container. Desktop measurements show `16px / 24px` text, `10px 5px` padding, and a `15px` gap. The company link measures `182 × 44px`; its anatomy is consistent with a roughly `45px` line after the label.

Other instances include `この場所をつくる人たち` and `おもてなしの舞台裏`. Their total widths change with the text; they should not be forced into a shared wide button size.

No hover endpoint was captured. Underlining or a small line change would be a recommended enhancement, not an observed original effect.

### Business Entries

**Role:** show the breadth of the company’s activities.

The business section continues the beige background. Its desktop heading begins at `x=76px`, while the introductory paragraph sits to the right at `x≈752.828px`. On mobile, the heading and paragraph stack at approximately `x=19.781px`.

The source identifies five entries: two ryokan businesses, `The One`, `那須プリン`, and accommodation-management consulting. Four entries have recorded external anchors; the consulting entry does not have a corresponding anchor in the supplied link evidence.

Desktop entry anchors use flex layout, a `38px` gap, and `30px` bottom padding. Their text starts `358px` after the row’s left edge; subtracting the gap suggests a preceding `320px` media slot. This is calculated layout evidence, not a measured image element.

On mobile, those anchors become block layout and span approximately `333.375px`. Titles use `18.743px` text above muted `13.537px` category captions. Exact image crops, decorative borders, and hover behavior were not supplied.

### People and Work Introductions

**Role:** lead visitors toward staff information, daily work, and job requirements.

These sections return to Warm Paper. Both combine a vertical section title, offset horizontal copy, and a text-and-line link.

The desktop people title begins farther right, at `x≈441.344px`, with copy at `x≈554.344px`. The work title returns to `x=154px`, with copy at `x=267px`. This alternating placement contributes to the page’s editorial pacing.

On mobile, both use the same compact geometry as the company introduction: a vertical title at `x≈45.734px` and a `248.063px` paragraph column at `x≈106.125px`. They do not inherit the horizontal-heading treatment used by the director’s thematic passages.

### Interview Feature Links

**Role:** provide individual entry points into staff stories.

Three block links are recorded, each containing a role caption, Japanese name, and Romanized name. Desktop link boxes are `355px` wide at `x=80`, `535`, and `990px`, producing three columns with `100px` gaps.

The role caption begins approximately `505.438px` below each desktop link’s top. On mobile it begins approximately `394.859px` below the top. This establishes a substantial upper media region plus spacing, but the image bounds and exact crop are not included in the export.

Use the measured text hierarchy: `14px` role, `30px` Japanese name, and `13px` soft-beige Romanized name on desktop. Mobile reduces these to approximately `13.537`, `22.909`, and `11.454px`.

Mobile entries form a single centered stack, approximately `281.313px` wide, with `52.063px` between link boxes. A portrait ratio of `3:4` is a useful implementation recommendation for replacement media, not a verified source image ratio.

### Closing Invitation and Application Block

**Role:** return from the employer story to a direct application action.

The closing invitation repeats the four-column vertical pattern with different copy. Desktop type increases to `44px`, and the columns begin at `x=989`, `790`, `591`, and `392px`. Their start-to-start distance is `199px`. On mobile, type becomes approximately `24.991px`, with a `69.75px` column step.

A centered sentence follows, then the `indeedで応募する` link. On desktop, there are `80px` between the sentence’s line box and the application link. The button measures `270 × 68px`, with `25px` left padding and a short trailing rule.

On mobile, the link becomes slightly wider at `281.141px`, slightly shorter at `62.469px`, and uses larger label text. This is a deliberate increase in mobile emphasis rather than uniform downscaling.

The telephone area is horizontal on desktop: a small explanatory label, a `15px` gap, and the number `0287-76-3180`. On mobile, the label sits above the number. The number grows from `28px` to approximately `33.322px`, making the secondary contact route prominent and readable. Its recorded href is `tel:0287-76-3180`.

### Footer and Upward-Arrow Control

**Role:** provide a complete index and company identity after the application area.

A thin horizontal divider separates the application content from the lower footer. A beige circular upward-arrow button straddles this rule near the right edge. Its appearance suggests a return-to-top action, but clicking and scroll behavior were not tested.

Desktop places the brand and company information on the left, with a compact index on the right. The footer directly identifies `株式会社 山水閣` and its address. The navigation wraps into four links on the first row and three on the second, with approximately `30px` horizontal gaps.

Mobile reverses the visual order: index first, then the brand and address. Navigation wraps into rows of three, two, and two links. The footer remains open and borderless below its initial divider.

Copyright aligns right on desktop and left on mobile. Its measured mobile size is only `8.330px`; raising that in a new implementation is recommended for readability.

## Tokens — Motion & Interaction

The export records transition declarations, not a complete interaction demonstration. Static settled captures cannot establish animation direction, trigger thresholds, or media playback.

| Element or token | Recorded value | Evidence boundary |
| --- | --- | --- |
| Opening statement paragraphs | `opacity 0.4s` | Fade declaration; trigger and sequence unverified |
| Introductory paragraphs | `opacity 1s` | Fade declaration; backdrop and reveal progression not visually captured |
| Section headings | `opacity 0.8s 0.06s, filter 0.8s 0.06s` | A 60ms delay is recorded; filter endpoints are unknown |
| Menu trigger | `clip-path 0.5s, transform 0.5s, opacity 0.5s` | Includes a prefixed clip-path transition; menu-open behavior untested |
| Application links | `background 0.5s` | Transition duration known; alternate background color unverified |
| Closing statement and invitation sentence | `opacity 1s` | Fade declaration only |
| Source easing property | `cubic-bezier(0.33, 1, 0.68, 1)` | Declared as `--easing`; use on every listed transition is not established |

Many other elements report only `transition: all` without a useful nonzero duration in the supplied record. Do not turn those entries into invented timing specifications.

The sampled element records show `animation: none`. This does not rule out JavaScript-driven motion, media playback, animations on omitted descendants, or pseudo-elements. The capture process waited for finite animation and layout stability and temporarily paused perpetual animations during readiness checks; it is not a frame-by-frame motion audit.

**Recommended adaptation:** use restrained opacity transitions and the declared easing where appropriate, keep content visible without JavaScript, and provide reduced-motion behavior. Do not invent parallax, a pinned media expansion, an autoplay soundtrack, or a particular menu overlay as an original-site finding.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Main canvas | Solid `#FFFEFA` | Continuous paper-like foundation |
| Company and business chapters | Solid `#E2DBCB` | Group related information across a long section |
| Photographic surface | Natural warm interiors and dark workplace scenes | Supply material texture and place-specific color |
| Application action | `#100F0D` rectangle with ivory text | Concentrated high contrast |
| Secondary link | Bare text and fine rule | Quiet navigation within editorial content |
| Divider | Visually thin beige-grey line | Separate the lower footer without enclosing it |
| Upward-arrow control | Beige circle with a fine dark arrow | A small geometric exception among square elements |

There is no visible general elevation system. Avoid introducing shadows or rounded panels to distinguish every component. Section color, spacing, alignment, and image boundaries already provide structure.

## Imagery

The supplied original-page photographs emphasize the actual hospitality setting: warm timber, upholstered seating, window light, darker preparation spaces, and staff within the building. They introduce texture and human activity while the surrounding interface remains quiet.

The desktop lounge image has a wide environmental composition. Red upholstery provides a strong focal point inside the photograph, balanced by neutral furniture and green views through the windows. Preserve these natural contrasts instead of applying a beige tint over every image.

The small opening media frame has a different role from the broad lounge image. It offers a glimpse of work while allowing the headline to retain most of the viewport. Turning that opening into a full-screen background image would change the hierarchy.

### Observed Asset References

No original media URLs, image filenames, video sources, or intrinsic dimensions were included in the supplied evidence. The following references identify visible roles only.

| Asset role | Evidence | Implementation guidance |
| --- | --- | --- |
| Brand lockup | Header and footer captures | Preserve calligraphic lettering, small floral mark, and separate recruitment descriptor |
| Desktop opening media | Food preparation scene in a small dark frame | Retain the small landscape window and lower-left placement |
| Mobile opening media | Corridor scene with a staff member | Respect the mobile crop and avoid asserting playback behavior |
| Company-section photograph | Wide lounge view in the desktop middle capture | Use a broad environmental image with square edges |
| Interview media regions | Space before captions in measured link boxes | Obtain the actual images before claiming their composition or ratio |

Use original assets when authorized and available. The CSS shell can reproduce layout and typography, but it cannot supply the identity carried by the wordmark and workplace imagery.

## Layout & Responsive Behavior

The measured document remains long at both sizes: approximately 18,441px on desktop and 16,626px on mobile. Mobile reduces large spatial intervals while allowing paragraphs and interview entries to grow vertically.

| Area | Desktop observation | Mobile observation |
| --- | --- | --- |
| Brand | Recruitment descriptor beside logo | Descriptor beneath compact logo |
| Opening navigation | Right-side index visible | Menu trigger visible; index not visible in capture |
| Opening statement | Four vertical columns, `38px` type | Four vertical columns, approximately `27px` type |
| Opening media | Small landscape frame near lower left | Wider relative to the viewport and partly below the fold |
| Director’s thematic headings | Narrow groups beside paragraphs | Horizontal multiline groups above indented paragraphs |
| Company, people, and work titles | Vertical beside offset copy | Remain vertical beside a narrow copy column |
| Business section introduction | Heading and paragraph across the row | Heading above paragraph |
| Business entries | Flex rows | Block entries |
| Interviews | Three columns | One centered vertical stack |
| Telephone | Label and number side by side | Label above a larger number |
| Footer | Identity left, index right | Index before identity |

The source therefore uses several responsive strategies within one page. Avoid a global rule that makes every vertical heading horizontal or stacks every section in the same way.

The exact breakpoint rules were not supplied. The Quick Start uses `48rem` as a recommended working breakpoint, with mobile values anchored to the observed phone capture. Tablet, landscape-phone, browser zoom, and intermediate-width behavior still require testing.

## Do’s and Don’ts

### Do

- Keep the paper `#FFFEFA`, beige `#E2DBCB`, text `#201C15`, and button `#100F0D` roles distinct.
- Use Shippori Mincho B1 for the main Japanese interface and the verified English family for utility labels and telephone numerals.
- Preserve four genuinely vertical opening columns, uneven starts, and delicate diagonal connectors.
- Retain the small opening media window and generous surrounding space.
- Use different alignments for different editorial passages rather than one repeated centered section template.
- Keep company, people, and work section titles vertical on mobile.
- Preserve square photographs, bare text links, and compact black application rectangles.
- Make the mobile telephone number more prominent, matching the observed hierarchy.
- Move the footer index before the company identity on mobile.
- Keep measurements, estimates, and new implementation decisions clearly separated.

### Don’t

- Don’t replace the calligraphic logo with text in a vaguely similar font.
- Don’t turn the opening into a full-bleed photographic banner.
- Don’t make the vertical headline uniformly aligned or rotate a horizontal sentence as a substitute.
- Don’t introduce pill buttons, rounded card grids, gradients, or decorative shadows throughout the page.
- Don’t shrink all typography proportionally on mobile; several contact elements become larger.
- Don’t apply Ibarra Real Nova to every Romanized name when the recorded source uses the Japanese family there.
- Don’t assume exported navigation anchors are visible merely because their bounds exist.
- Don’t interpret the two-viewport opening allocation as proof of scroll pinning.
- Don’t invent asset paths, video settings, menu choreography, or hover endpoints.
- Don’t preserve very small or low-contrast secondary text without assessing readability in the new implementation.

## Recommended Implementation Additions

These are improvements for a new implementation, not verified features of the original:

- Keep the opening statement in logical reading order and use decorative connectors with `aria-hidden='true'`.
- Provide a meaningful page heading even if the identity is image-based. The exported empty H1 does not establish the accessibility of its descendants.
- Give the menu an accessible name, `aria-expanded`, and a relationship to its controlled navigation. Ensure hidden links cannot receive focus.
- Give the upward-arrow control an explicit name such as ‘Back to top’, and test keyboard operation.
- Retain visible focus indicators on application, telephone, interview, and text links.
- Increase compact controls toward a 44px touch target without unnecessarily enlarging their visible artwork.
- Raise the mobile copyright size and assess contrast for soft-beige Romanized names and muted business captions.
- Use responsive image sources and explicit dimensions. Reserve media space before loading, and avoid lazy-loading the first visible opening asset.
- If the opening asset is video, provide a poster and deliberate playback, sound, and reduced-motion behavior after verifying the actual content requirements.
- Keep content visible when scripts fail. Reveals should enhance an already readable document.
- Add scroll offsets for anchor destinations so persistent header controls do not obscure the target heading.

## Agent Prompt Guide

### Quick Color Reference

- Main paper: `#FFFEFA`.
- Company and business surface: `#E2DBCB`.
- Main text: `#201C15`.
- Application fill: `#100F0D`, with `#FFFEFA` text.
- Romanized interview names: `#BDBAB3`.
- Business captions: `#96938D`.
- Fine-line approximation: `#BDBAB3`, about `1px`.
- Gold belongs to the supplied logo; it is not a general action color.

### Overall Prompt

“Create a Japanese ryokan recruitment homepage with warm ivory `#FFFEFA`, light beige `#E2DBCB`, dark brown-black text `#201C15`, and square black application links. Use Shippori Mincho B1 for Japanese editorial text and Ibarra Real Nova for small English utility labels and the telephone number. Build the opening around four staggered vertical Japanese columns with thin diagonal connectors, broad empty space, and a small landscape media window near the lower left. Continue with long editorial sections, offset paragraphs, vertical chapter titles, a beige company-and-business passage, and three staff interview links. On mobile, retain vertical chapter titles, stack interview entries, enlarge the telephone number, and place the footer index before the identity. Treat menu animation and media playback as separate implementation decisions.”

### Example Component Prompts

1. **Opening statement:** “Set `日本の旅館と、`, `那須の観光を`, `もっともっと`, and `面白くする。` as four right-to-left vertical Mincho columns. At desktop size use 38px text, 108px clear column gaps, and top offsets of 0, 121.6, 45.6, and 144.4px. Place three pale diagonal strokes between columns. Keep the warm paper mostly empty.”
2. **Company chapter:** “Follow a wide lounge photograph with a solid light-beige section. Place a 36px vertical heading at the left and a 14px paragraph column 77px beyond it, beginning 100px lower. Use 40px line height and finish with a bold text link followed by a fine horizontal line.”
3. **Application link:** “Create a square black rectangle with ivory Mincho text, a left-inset label, and a short line meeting the right edge. Use 110 × 30px for the desktop header and 270 × 68px for the closing action. Add an accessible focus treatment without introducing rounded styling.”
4. **Interview entries:** “Use three unboxed 355px-wide desktop links with 100px gaps. Reserve a substantial upper media region, then show a 14px role caption, 30px Japanese name, and 13px soft-beige Romanized name. Stack centered entries on mobile. Treat a 3:4 replacement portrait crop as a recommendation, not a verified source ratio.”
5. **Mobile editorial layout:** “Keep company, people, and work titles vertical at about 24px. Place their paragraph columns to the right, approximately 248px wide at the observed phone layout. Convert only the director’s thematic headings to horizontal lines above indented copy.”
6. **Footer:** “Separate the footer with a fine beige-grey rule and a small beige circular upward-arrow control. On desktop, put the identity left and the index right. On mobile, show the index first with naturally wrapping links, followed by the logo, address, and small copyright text.”

## Quick Start

### CSS Custom Properties

This is a static implementation scaffold, not extracted source CSS. It uses measured colors and representative dimensions with a conventional root font size. The breakpoint, replacement portrait ratio, hover endpoint, and accessibility adjustments are recommendations. Fonts and authorized image assets must be supplied separately.

The opening below occupies one viewport as a usable static starting point. It does not reproduce the original’s measured two-viewport allocation or claim to implement its unverified scroll/media orchestration.

```css
:root {
  /* Measured palette, exposed through implementation aliases. */
  --paper: #fffefa;
  --beige-light: #e2dbcb;
  --ink: #201c15;
  --button-black: #100f0d;
  --beige: #bdbab3;
  --beige-dark: #96938d;

  --font-ja: 'Shippori Mincho B1', serif;
  --font-en: 'Ibarra Real Nova', serif;
  --type-body: 14px;
  --type-hero: 38px;
  --type-vertical: 36px;
  --hero-tracking: 0.227em;
  --hero-gap: 108px;
  --outer-inset: 40px;
  --header-inset: 20px;
  --chapter-gap: 77px;
  --section-space: 300px;

  /* Source easing token; application here is a recommendation. */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-action: 500ms;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-ja);
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
[id] { scroll-margin-top: 80px; }
[hidden] { display: none !important; }

.site-header {
  position: fixed;
  z-index: 20;
  inset: var(--header-inset) var(--header-inset) auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.brand { inline-size: 360px; max-inline-size: 40vw; }
.header-tools { display: flex; align-items: center; gap: 30px; }
.menu-trigger {
  border: 0;
  padding: 5px 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.apply-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  inline-size: 270px;
  max-inline-size: 100%;
  min-block-size: 68px;
  padding-inline-start: 25px;
  color: var(--paper);
  background: var(--button-black);
  border-radius: 0;
  font-size: 14px;
  text-decoration: none;
  transition: background var(--duration-action) var(--ease-out);
}
.apply-link::after {
  content: '';
  flex: 0 0 30px;
  block-size: 1px;
  background: currentColor;
}
.apply-link--small {
  inline-size: 110px;
  min-block-size: 30px;
  padding-inline-start: 15px;
  font-size: 16px;
}
.apply-link--small::after { flex-basis: 15px; }

.hero {
  position: relative;
  min-block-size: 100vh;
  min-block-size: 100svh;
}
.hero-lines {
  position: absolute;
  top: 28.8vh;
  top: 28.8svh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: var(--hero-gap);
  margin: 0;
  font-size: var(--type-hero);
  font-weight: 500;
}
.hero-line {
  display: block;
  flex: none;
  width: 1em;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: var(--hero-tracking);
}
.hero-line:nth-of-type(2) { padding-top: 3.2em; }
.hero-line:nth-of-type(3) { padding-top: 1.2em; }
.hero-line:nth-of-type(4) { padding-top: 3.8em; }
.hero-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--beige);
  pointer-events: none;
}
.hero-connectors path { vector-effect: non-scaling-stroke; }
.hero-media {
  position: absolute;
  left: 40px;
  bottom: 40px;
  width: 320px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0;
}
.hero-media > img,
.hero-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chapter { background: var(--beige-light); }
.chapter-photo { width: 100%; height: auto; }
.chapter-body {
  display: grid;
  grid-template-columns: var(--type-vertical) minmax(0, 791.656px);
  align-items: start;
  column-gap: var(--chapter-gap);
  margin-left: clamp(20px, 10.694vw, 154px);
  padding: 120px 40px var(--section-space) 0;
}
.chapter-title {
  margin: 0;
  writing-mode: vertical-rl;
  font-size: var(--type-vertical);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
}
.chapter-copy { min-width: 0; padding-top: 100px; }
.chapter-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 40px;
  letter-spacing: 0.05em;
}
.text-link {
  display: flex;
  align-items: center;
  gap: 15px;
  width: fit-content;
  max-width: 100%;
  margin: 30px 0 0 auto;
  padding: 10px 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}
.text-link::after {
  content: '';
  flex: 0 0 45px;
  height: 1px;
  background: currentColor;
}

.interview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 6.944vw, 100px);
  width: calc(100% - 160px);
  max-width: 1265px;
  margin-inline: auto;
}
.interview-link { display: block; text-decoration: none; }
.interview-media {
  width: 100%;
  aspect-ratio: 3 / 4; /* Recommended replacement crop. */
  object-fit: cover;
  margin-bottom: 30px;
}
.interview-role { margin: 0 0 5px; font-size: 14px; }
.interview-name {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.5;
}
.interview-roman {
  margin: 0;
  color: var(--beige);
  font-size: 13px;
}

.application { padding: 100px 20px 200px; text-align: center; }
.application > .apply-link { margin: 80px auto 0; }
.contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}
.contact p { margin: 0; }
.contact-number {
  font-family: var(--font-en);
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.site-footer {
  position: relative;
  border-top: 1px solid var(--beige);
}
.back-to-top {
  position: absolute;
  top: -25px;
  right: var(--outer-inset);
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--beige-light);
  text-decoration: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  grid-template-areas: 'identity index';
  gap: 40px;
  padding: 100px var(--outer-inset) 0;
}
.footer-identity { grid-area: identity; }
.footer-index { grid-area: index; }
.footer-index-title {
  margin: 0 0 40px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 27px 30px; }
.footer-nav a { text-decoration: none; }
.copyright {
  margin: 96px var(--outer-inset) 60px;
  font-family: var(--font-en);
  font-size: 11px;
  text-align: right;
  text-transform: uppercase;
}

/* Recommended breakpoint; the source breakpoint was not supplied. */
@media (max-width: 48rem) {
  :root {
    --type-body: 14.578px;
    --type-hero: 27.074px;
    --type-vertical: 23.95px;
    --hero-tracking: 0.1em;
    --hero-gap: clamp(24px, 13.35vw, 52.063px);
    --outer-inset: 20.813px;
    --header-inset: 10.413px;
    --chapter-gap: 36.438px;
    --section-space: 145.782px;
  }
  .brand { inline-size: 125px; }
  .header-tools { gap: 15.62px; }
  .menu-trigger { font-size: 13.537px; }
  .apply-link--small {
    inline-size: 93.703px;
    min-block-size: 27.063px;
    padding-inline-start: 10.413px;
    font-size: 14.578px;
  }
  .hero { min-block-size: 1050px; }
  .hero-lines { top: 30vh; top: 30svh; }
  .hero-line:nth-of-type(2) { padding-top: 1.4em; }
  .hero-line:nth-of-type(3) { padding-top: 0.7em; }
  .hero-line:nth-of-type(4) { padding-top: 2.8em; }
  .hero-media {
    top: calc(100vh - 98px);
    top: calc(100svh - 98px);
    bottom: auto;
    left: 20px;
    width: calc(100% - 40px);
  }
  .chapter-body {
    grid-template-columns: var(--type-vertical) minmax(0, 1fr);
    margin-left: 45.734px;
    padding: 80px 20.813px var(--section-space) 0;
  }
  .chapter-copy { padding-top: 83.297px; }
  .chapter-copy p { font-size: 14.578px; line-height: 31.239px; }
  .text-link { gap: 15.62px; font-size: 15.62px; }
  .text-link::after { flex-basis: 31px; }
  .interview-grid { grid-template-columns: 1fr; width: 75%; gap: 52.063px; }
  .interview-media { margin-bottom: 20px; }
  .interview-role { font-size: 13.537px; }
  .interview-name { font-size: 22.909px; }
  .interview-roman { font-size: 11.454px; }
  .application { padding-bottom: 84px; }
  .application > .apply-link {
    width: 281.141px;
    min-height: 62.469px;
    margin-top: 62px;
    font-size: 16.661px;
  }
  .contact { flex-direction: column; gap: 2px; }
  .contact-number { font-size: 33.322px; letter-spacing: 0.06em; }
  .back-to-top { top: -22px; width: 44px; height: 44px; }
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'index' 'identity';
    gap: 80px;
    padding-top: 72px;
  }
  .footer-index { max-width: 312.563px; }
  .footer-nav { gap: 27px 31.239px; }
  .copyright {
    margin-top: 64px;
    margin-bottom: 40px;
    font-size: 11px; /* Recommended increase from the observed 8.33px. */
    text-align: left;
  }
}

/* Recommended feedback and motion safeguards. */
:where(a, button):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
@media (hover: hover) {
  .apply-link:hover { background: var(--ink); }
  .text-link:hover,
  .footer-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apply-link { transition: none; }
}
```

The mobile `1050px` opening height is a simple scaffold choice that leaves room for the below-fold media frame. Replace it with a content-aware layout when integrating real media; it is not a measured source value.

### Minimal Opening Markup

The connector path is an approximate drawing derived from the visible desktop composition. It is not an original asset. Keeping the text as four spans preserves a useful reading order while the flex direction places the first phrase on the right.

```html
<section class='hero' aria-labelledby='recruit-title'>
  <h1 class='hero-lines' id='recruit-title' lang='ja'>
    <span class='hero-line'>日本の旅館と、</span>
    <span class='hero-line'>那須の観光を</span>
    <span class='hero-line'>もっともっと</span>
    <span class='hero-line'>面白くする。</span>
    <svg class='hero-connectors' viewBox='0 0 476 424'
         preserveAspectRatio='none' aria-hidden='true' focusable='false'>
      <path d='M57 253 L131 199 M195 190 L282 224 M349 213 L423 130' />
    </svg>
  </h1>
  <!-- Add an authorized image or verified media implementation here. -->
  <figure class='hero-media'></figure>
</section>
```

Use a responsive brand asset for the two lockup arrangements. The CSS does not implement menu state, a media player, reveal triggers, or return-to-top scripting. A native anchor targeting the page top can provide the latter without inventing a scroll animation.

### Tailwind v4 Token Mapping

Optional mapping for projects already using Tailwind v4. This does not identify the original site’s framework. Define the properties above first.

```css
@theme inline {
  --color-paper: var(--paper);
  --color-surface-beige: var(--beige-light);
  --color-ink: var(--ink);
  --color-action: var(--button-black);
  --color-muted: var(--beige-dark);
  --color-soft: var(--beige);

  --font-editorial: var(--font-ja);
  --font-utility: var(--font-en);

  --text-body: var(--type-body);
  --text-hero: var(--type-hero);
  --text-vertical: var(--type-vertical);

  --spacing-outer: var(--outer-inset);
  --spacing-chapter-gap: var(--chapter-gap);
  --spacing-section: var(--section-space);
}
```

## Sources & Evidence

- **Original and final page:** [Sansuikaku Recruiting Site](https://sansuikaku.com/recruit/). The supplied browser record reports HTTP `200`, an unchanged final URL, and the title `【公式】那須高原の宿 山水閣 RECRUITING SITE`.
- **Capture timestamp:** September 12, 2026, `13:44:34.608 UTC`, equivalent to `22:44:34.608 JST`.
- **Desktop evidence:** 1440 × 1000 viewport; 1425px measured root width; approximately 18441.41px document height. Original-page captures cover the opening, company introduction, and closing/footer.
- **Mobile evidence:** 390 × 844 viewport; 375px measured root width; approximately 16626.06px document height. Original-page captures cover the opening and closing/footer.
- **Rendered DOM and computed styles:** source custom properties, font-family declarations, text sizes, line heights, tracking, element bounds, display modes, padding, gaps, recorded transitions, and link destinations.
- **Capture process:** initial observation lasted at least five seconds. Readiness checks considered document load, finite animation, sampled layout/text stability, and visible-image decoding, subject to the supplied time limits. Scrolling traversed intermediate positions before accepting settled captures.
- **Interaction limits:** no menu opening, hover endpoint, application navigation, telephone activation, or upward-arrow activation was demonstrated. The record does not establish video playback settings, scroll-linked timelines, complete asset loading, or delayed content completeness.
- **Scope limits:** linked recruitment subpages and external destinations were not opened. Exact asset paths, intrinsic media dimensions, full CSS selectors, responsive formulas, and breakpoint declarations were not supplied. SharedWorkers and service workers were disabled during the browser inspection.

This reference describes the current homepage represented by those captures and measurements. Its CSS and prompts are explicitly labeled adaptations; unobserved states remain unverified.