モリヤマレコード｜映像制作会社のポートフォリオ

# Moriyama Record — Style Reference

> A quiet white portfolio that gives film frames room to speak.

**Website:** [mori-record.jp](https://mori-record.jp/)
**Original URL:** https://mori-record.jp/
**Final URL:** https://mori-record.jp/
**Theme:** white portfolio surface with black typography, gray secondary text, and a dark photographic contact footer.
**Inspected:** September 23, 2026, 06:14:07 JST; supplied retrieval timestamp: September 22, 2026, 21:14:07.826 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current homepage, including its identity header, introductory heading, selected work links, archive link, and contact footer. Evidence consists of three desktop captures, two mobile captures, and rendered DOM/computed-style samples. Destination pages and expanded interaction states were not inspected.

Moriyama Record presents its film production work through oversized imagery and unusually restrained supporting information. The interface is predominantly white, black, and gray. Color comes from the work itself: twilight blues, green outdoor scenes, dark interiors, and warmer commercial photography. Regular-weight grotesque headings establish scale without adding visual weight to the surrounding interface.

The defining arrangement alternates full-width film frames with asymmetric groups: one large work beside a narrow stack of two smaller works. A fine vertical rule sits to the left of each work, separated from the image by a generous inset. Rounded image corners soften this otherwise precise geometry. On mobile, the small works become a two-column pair while major works retain their full-width emphasis.

The page closes with a large archive link and a contact area over a close photograph of a turntable. The white content surface has rounded lower corners where it meets this dark photograph. Preserve this progression from open white space to cinematic imagery and finally to a tactile, photographic footer.

## How to Read This Reference

- **Measured** values come directly from the supplied rendered DOM, element rectangles, or computed styles at the two inspected viewports.
- **Calculated** values are arithmetic derived from those measurements, such as the available image width after subtracting a card's left padding.
- **Estimated** values come from the supplied screenshots. Image radii, secondary gray, and several icon dimensions fall into this category because their individual styles were not sampled.
- **Recommended** values describe a reusable implementation. They are not claims about the original source code.
- Token names are descriptive aliases. The only supplied source custom property is `--vw`, measured as `1440px` and `390px` respectively.
- Element bounds can exist for content that is not visibly exposed. Mobile navigation and introductory address text must not be treated as visible merely because they appear in the DOM evidence.
- Screenshot positions belong to particular scroll states. The footer's overlapping sampled bounds are not a reliable static document-flow map.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Canvas White | `#ffffff` | `--color-canvas` | Measured body background; visible portfolio surface |
| Primary Black | `#000000` | `--color-ink` | Measured body and link text; visually used for rules, logo, and filled play symbols |
| Secondary Gray | approximately `#808080` | `--color-muted` | Screenshot estimate for `Company`, the `All` portion of the archive link, and director captions; these descendants were not individually sampled |
| Reverse White | `#ffffff` | `--color-reverse` | Measured contact-link and footer address text |
| Subtle Outline | approximately `#d6d6d6` | `--color-outline` | Screenshot estimate for the small mobile down-chevron control |
| Footer Shade | translucent black | `--footer-shade` | The photograph appears darkened; the presence, opacity, and implementation of a separate overlay were not measured |

There is no observed chromatic action color. Black circles indicate work/archive actions on white; a white circle carries the envelope symbol in the footer. The blue, green, and brown tones in photographs are content colors, not an interface palette to distribute across buttons or labels.

For a new implementation, use a dark overlay only as needed to keep footer text readable over the chosen photograph. An opacity near `0.55` is a starting recommendation, not a recovered source value.

## Tokens — Typography

### Computed Font Stack

The sampled elements declare:

```css
font-family: neue-haas-grotesk-text, fot-cezanne-pron, sans-serif;
font-weight: 400;
```

This is direct evidence of the computed family stack. It does not independently establish which font file rendered every glyph. Use the named fonts only when appropriately available; no font-file URLs or loading declarations were supplied.

The combination supports a neutral Latin grotesque and Japanese text within the same small metadata system. Display headings remain regular weight. Their impact comes from size, tight tracking, and surrounding space rather than boldness.

The Japanese wordmark is distinctive logo artwork. Its heavy, slanted lettering should not be reproduced by assuming that it uses the body font.

### Type Scale

| Role | Desktop measured value | Mobile measured value | Notes |
| --- | --- | --- | --- |
| Root font size | `10px` | `10.4px` | Source sizing context; do not copy numeric source rem values into a conventional 16px root |
| Body and work metadata | `14px / 24px` | `12.48px / 18.72px` | Weight `400`; normal tracking |
| Introductory heading | `88px / 100px` | `45.76px / 52px` | Tracking `-2.2px` and `-1.144px`, both equal to `-0.025em` |
| Archive and contact links | `88px / 88px` | `45.76px / 45.76px` | Same display scale, with tighter line height |
| Desktop navigation | `14px / 24px` | Not visible in the closed mobile capture | Weight `400` |
| Mobile navigation DOM | — | `14.56px / 24.96px` | Sampled with `5.2px` vertical padding; expanded appearance was not verified |
| Footer address | `14px / 24px` | `12.48px / 18.72px` | White text |
| Map link | `14px / 32px` | `12.48px / 33.28px` | Line heights measured inside a bordered capsule |
| Archive count | approximately `12–14px` | approximately `10–12px` | Visual estimate; raised relative to the display label |

The heading deliberately separates `Film Production` and `Company`. The first line is black and the second gray. At 390px wide, the first line still fits on a single line. Preserve that hierarchy and verify wrapping after loading the actual font.

The desktop heading's reported rectangle is approximately `604.59 × 188px`, despite a computed `100px` line height. On mobile it is approximately `327.63 × 97.77px`. These are measured element bounds, not a guarantee that a plain two-line heading with the same font size will produce an identical box.

## Tokens — Spacing & Shapes

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Outer work-list inset | `40px` | approximately `15.6px` | Measured card origins |
| Rule-to-content inset | `40px` | `15.6px` | Measured card left padding |
| Main text/image alignment from viewport left | `80px` | approximately `31.2px` | Outer inset plus card padding |
| Main work-group separation | `120px` | approximately `62.4px` | Calculated from adjacent card/group bounds |
| Gap between stacked small desktop cards | `40px` | Replaced by a horizontal pair | Calculated from measured rectangles |
| Horizontal gap between mobile small cards | — | approximately `16.64px` | Calculated from measured widths and origins |
| Desktop narrow-to-large column gap | `120px` | No equivalent vertical split | Calculated |
| Image-to-caption gap | approximately `20px` | approximately `15.6px` | Visual/geometry estimate |
| Caption-to-director spacing | approximately `28px` | approximately `15.6px` | Reconstruction consistent with card heights; not individually sampled |
| Header top inset | approximately `40px` | approximately `14.55px` | Measured logo-container origin |

The two-stage left inset is essential. The rule is at the outer card edge, while the image and both caption lines begin farther right. Do not position the rule directly against the thumbnail.

### Border Radius

| Element | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Large film frame | approximately `20px` | approximately `10px` | Screenshot estimate |
| White sheet lower corners | approximately `30px` | approximately `20–21px` | Screenshot estimate |
| Map capsule | `17px` | `17.68px` | Measured |
| Play and envelope symbols | Circular | Circular | Visually observed |
| Work-card outer container | `0px` | `0px` | Measured anchor radius; rounding belongs to its media region |

### Layout Measurements

| Element | At 1440 × 1000 | At 390 × 844 |
| --- | --- | --- |
| Document height | `8063px` | `5276px` |
| Header height | `110px` | approximately `61.34px` |
| Main origin | `y = 230px` | `y = 130px` |
| First work anchor | `x = 40px`, `y = 460px`, `1360 × 838.5px` | `x ≈ 15.59px`, `y ≈ 245.45px`, `358.81 × 261.66px` |
| Full-size media width | `1320px` | approximately `343.21px` |
| Full-size media height | `742.5px` at 16:9 | approximately `193.06px` at 16:9 |
| Medium work anchor width | `920px` | approximately `358.81px` |
| Medium media width | `880px` | approximately `343.21px` |
| Small work anchor width | `320px` | approximately `171.08px` |
| Small media width | `280px` | approximately `155.48px` |
| Archive link bounds | approximately `491.95 × 88px` | approximately `269.38 × 45.77px` |
| Footer height | `770px` | `624px` |
| Map link box | `60 × 34px` | approximately `62.39 × 35.36px` |
| Back-to-top link box | `80 × 48px` | approximately `62.39 × 37.44px` |

Media dimensions are calculated from anchor width minus its left padding. Their agreement with the screenshots and total card heights strongly supports a 16:9 media frame. Individual media rectangles were not included in the supplied element samples.

## Components

### Identity Header

**Role:** establish the company identity and provide primary navigation.

On desktop, the logo occupies a measured `250 × 70px` region at approximately `(40, 40)`. Its visible anatomy is a circular outlined monogram followed by the Japanese wordmark. The navigation sits to the far right, vertically centered around the logo, with `Top`, `Works`, `About`, and `Contact` links. A small black dot precedes the active `Top` item; the work count appears raised beside `Works`.

On mobile, the visible identity becomes smaller and the navigation labels are replaced by three horizontally arranged black dots. The sampled logo link stretches across much of the header, but the artwork itself does not fill that whole width. Keep rendered artwork dimensions distinct from its DOM container.

The supplied DOM includes navigation links and `Close`, but no opened menu capture. Its panel appearance, opening behavior, focus handling, and animation are unverified. Header persistence during scrolling is also unverified.

### Introductory Heading and Address

**Role:** state the business plainly before the portfolio begins.

The desktop introduction pairs a large two-line heading on the left with a compact English address and telephone block on the right. Its heading starts at `x = 80px`, matching work images rather than their left rules. There is substantial empty space between the header and introduction.

The address uses ordinary body-sized text and multiple short lines. It does not become a badge, card, or competing display element.

On mobile, the heading starts near `x = 31.2px`. The address is not visible in the supplied initial capture even though it remains in the DOM text. A small outlined circle with a down-chevron appears beside the second heading line. Its action was not tested; do not label it as a confirmed address disclosure or scrolling control.

### Work Card

**Role:** introduce a film and link to its work-detail page.

Each card consists of:

1. A thin black vertical rule along the outer left edge.
2. An inset, rounded landscape media frame.
3. A compact title containing client, format, and work name.
4. A small black circular play symbol following the title.
5. A gray director line beginning with `Dir:`.

The full card is represented by an anchor in the evidence. For example, the opening work links to `/works/1063062007/` and displays `asics ― ブランド 『GEL-RIDEWALK 2』` with `Dir: Yutaka Obara`.

The play symbol reads as part of the title, not as a large centered video control over the photograph. It may wrap with the caption: in the narrow mobile card for `Tanaka meat boutique`, the symbol occupies a following line. Avoid reserving a rigid right-hand icon column that would change this wrapping.

The rule extends through the metadata area. The card has no visible enclosing box, shadow, or separate tinted background. Longer titles increase its height; do not force every caption into one line.

Director names are credits for the displayed films. They are not evidence of who designed or developed the website.

### Full-Width Feature Work

**Role:** establish scale and periodically reset the portfolio rhythm.

At desktop width, the first feature uses a `1320px`-wide media region inside a `1360px`-wide anchor. A second full-width feature appears later for `アイリスオーヤマ ― CM 『清掃ロボット Whiz i』`.

The opening image extends below the first desktop viewport. Its caption is therefore below the fold rather than overlaid on the image. On mobile, the same work's image and both caption lines fit comfortably into the initial viewport.

### Asymmetric Work Group

**Role:** vary emphasis without adding decorative interface chrome.

The desktop group pairs a `920px` anchor with a `320px` side column and a `120px` gap. The large work alternates between left and right. The side column holds two smaller work links separated by `40px`.

The side stack starts below the large work's top edge. In the first measured group, the offset is approximately `85.65px`. A later shorter stack has an offset of approximately `82.05px`. These offsets equal 15% of the respective stack heights, so a `translateY(15%)` is a useful reconstruction. The original positioning mechanism was not supplied.

On mobile, the side stack becomes two equal-width cards in one row. The first pair appears before the adjacent large work: the small cards begin near `y = 569.5px`, while that large work begins near `y = 825.39px`. This is responsive rearrangement, not merely proportional desktop shrinkage.

### Archive Link

**Role:** connect the curated homepage selection to the complete works archive.

A large centered `All Works` link follows the portfolio with substantial white space. `All` is gray, `Works` black, and the count is raised in small type. A filled black circle with a light directional/play mark follows the label.

The supplied homepage contains 20 work anchors, while navigation and archive labels report 102 works. Treat the count as content data. The archive link points to `https://mori-record.jp/works/`; that destination was not inspected.

On mobile, the measured distance from the final small-card row's bottom to the archive link's top is approximately `185.12px`. Retain this deliberate pause before the footer.

### Contact Footer

**Role:** conclude the portfolio with a direct route to contact information.

The footer is a full-width photograph of a turntable, dark enough to support white text. A large `Get in Touch` link and white circular envelope symbol lead the composition. Despite the envelope icon, its observed destination is `/contact/`, not a `mailto:` URL.

The lower information area contains the company name `株式会社モリヤマレコード`, a Japanese address, telephone number, outlined `Map` capsule, and copyright. The company identity is supported directly by this original-page footer.

On desktop, the contact heading begins at the same `80px` alignment as the main images. The address and telephone occupy adjacent columns, while copyright sits toward the lower right. The back-to-top mark is near the upper right.

On mobile, the heading begins near `31.2px`. Address and telephone still occupy adjacent areas; the map control sits below the address, and copyright remains on the right. The back-to-top mark moves to the bottom center. Preserve the space around the heading instead of immediately packing contact details beneath it.

### Footer Transition and Back-to-Top Mark

The white foreground terminates in rounded lower corners over the photographic footer. This is a large sheet edge, not a rounded footer card inside page margins.

The back-to-top mark is a thin horizontal bar over an open upward chevron. Its observed anchor destination is `https://mori-record.jp/#`. The evidence supports a top-link affordance, but does not establish smooth scrolling or its duration.

The footer's sampled vertical bounds overlap portfolio coordinates. This is compatible with a layered reveal, but the supplied snapshots do not establish fixed positioning, pinning, parallax, or the governing script. Reproduce the visible layering before attempting any scroll-dependent behavior.

## Tokens — Motion & Interaction

| Element or behavior | Evidence | Practical interpretation |
| --- | --- | --- |
| Logo container | Computed `filter 0.25s linear` transition | A short filter transition is defined; its trigger and endpoint were not supplied |
| Navigation links | Computed `color 0.25s linear` transition | A short color transition is defined; no activated hover state was captured |
| Other sampled elements | Many report `transition: all` without a useful nonzero duration | Insufficient evidence for an animation specification |
| CSS animation samples | `animation: none` on sampled elements | Does not rule out animation on descendants, scripts, or media |
| Work links | Detail-page URLs present in anchors | Navigation is supported by markup; click outcomes were not tested |
| Repeated `00:00` text | Present in work-link DOM, absent from the visible card captions | Suggests media-related interface text; does not prove autoplay, hover playback, or visible player controls |
| Mobile three-dot control | Visible in closed state | Expanded menu behavior unverified |
| Introductory down-chevron | Visible on mobile | Action unverified |
| Footer reveal | Overlap in bounds and a layered visual transition | Exact scroll behavior unverified |
| Map link | External map URL present | Destination is known from markup; external page was not inspected |

The capture procedure waited for document readiness, visible image decoding, and sampled layout stability. It also handled finite motion and temporarily paused perpetual animation during readiness checks. These precautions improve capture reliability but do not constitute a playback or interaction test.

For an adaptation, keep feedback restrained. A `250ms linear` color transition is consistent with the measured navigation declaration. Do not invent image zooms, spring motion, cursor effects, autoplay rules, or elaborate page transitions as original-site findings.

## Surfaces

| Surface | Appearance | Structural purpose |
| --- | --- | --- |
| Main canvas | Solid white | Makes typography and films the dominant content |
| Work card | Transparent over white | Groups media and metadata through alignment and a left rule |
| Media frame | Rounded landscape image | Supplies most of the page's color and texture |
| Play/archive marker | Black circular fill with light symbol | Compact action cue |
| Contact marker | White circular fill with dark envelope | Reverses the action treatment over photography |
| White sheet edge | Broad rounded lower corners | Separates the portfolio from the photographic ending |
| Footer | Dark turntable photograph | Supports reversed contact text and closes the visual narrative |
| Map link | Transparent capsule with a fine light outline | Secondary utility action |

There is no visible general-purpose elevation system. Hierarchy comes from media size, whitespace, text scale, and the transition between white and photographic surfaces.

## Imagery

The work images are cinematic frames with varied subjects and lighting. The opening frame places dark human silhouettes against a blue-gray and muted pink twilight sky. Smaller mobile frames include a very dark interior and a bright waterside scene. The large middle-page commercial frame shows a helmeted student against grass and a stone wall.

Keep these differences. A shared filter across all works would erase the range that the minimal shell is designed to accommodate. Use clear landscape frames with readable subjects and preserve the approximately 16:9 presentation. Select an appropriate crop for each work rather than stretching an image to fit.

The footer photograph has a different function. Its record, tonearm, wood, and dark grooves form a continuous background beneath the contact information. On mobile, the narrow viewport shows a tighter crop of the same subject. Keep text over quiet portions of the photograph and verify contrast with the final asset.

### Observed Asset References

No image, video, logo, or font-file asset URLs were included in the supplied evidence. The following are identification references, not downloadable asset paths.

| Visual | Original-page association | Evidence boundary |
| --- | --- | --- |
| Circular monogram and Japanese wordmark | Header home link | Visible artwork; source format and path unknown |
| Opening twilight frame | `/works/1063062007/` | Work-page href observed; media source unknown |
| Dark interior frame | `/works/789195679/` | Work-page href observed; media source unknown |
| Waterside frame | `/works/740730008/` | Work-page href observed; media source unknown |
| Helmeted student frame | `/works/1206465642/` | Work-page href observed; media source unknown |
| Turntable photograph | Homepage footer | Image visible in both viewport captures; source path unknown |

Use authorized original assets when available. The CSS below reproduces the surrounding system; it does not supply the company's logo or film imagery.

## Layout & Responsive Behavior

### Desktop

The page has two alignment rails: an outer `40px` inset for logo and work rules, and an inner `80px` alignment for major text and media. The first work begins at `y = 460px`, following the header and a spacious introduction.

The portfolio's desktop rhythm combines full-width anchors with alternating large/small groups. At the inspected width, each asymmetric group occupies `1360px`: `320px + 120px + 920px`. These are anchor widths, not image widths. The `40px` inset within every anchor produces different media proportions while keeping the left-rule treatment consistent.

The offset small stacks can extend below the large work beside them. A uniform equal-height card grid would lose this editorial rhythm.

### Mobile

At 390px wide, the outer rail moves to approximately `15.6px`, and the media/text alignment to approximately `31.2px`. Feature and medium works share the same full available width. Smaller works remain in pairs rather than becoming a universal single-column list.

The first full-width card ends near `y = 507.11px`; the following paired row begins near `569.5px`, preserving a gap of approximately `62.4px`. The pair's director labels align near the bottom even when titles wrap differently.

The navigation labels are absent from the closed screenshot, the address is not visibly exposed in the introduction, and the footer's back-to-top mark moves to the bottom center. The contact heading stays on one line in the supplied 390px capture.

### Scaling and Implementation Limits

The mobile measurements are consistent with a `10.4px` unit at 390px, including `4.4` units for the display size and `1.5` units for the rail inset. That arithmetic does not establish the original scaling formula or breakpoint.

The Quick Start uses a conventional root size, explicit desktop values, and a recommended mobile unit. Its `1023px` breakpoint is an implementation choice. Intermediate widths, landscape phones, zoomed text, and devices narrower than 390px were not inspected.

The DOM link sequence and mobile visual order differ in the first asymmetric group. A new implementation should deliberately reconcile reading order, keyboard order, and visual placement rather than copying visual reordering without checking accessibility.

## Do’s and Don’ts

### Do

- Keep the interface predominantly white, black, and gray; let the films supply color.
- Use large regular-weight display text with approximately `-0.025em` tracking.
- Preserve the separate outer rule and inner image alignment.
- Alternate full-width works with asymmetric large/small groups.
- Retain two-column small-work pairs on mobile where captions remain usable.
- Round the media region while leaving the outer work card unboxed.
- Keep titles and director credits outside the image.
- Preserve the small inline play symbol and natural caption wrapping.
- Give the archive link generous whitespace before the photographic footer.
- Use the actual contact-page destination for the envelope CTA.
- Treat work counts, titles, and director names as editable content.

### Don't

- Don't flatten the desktop portfolio into a uniform three-column card grid.
- Don't replace the regular display typography with heavy bold headings.
- Don't add colored category pills, filled card backgrounds, or shadow elevation.
- Don't place a large play button in the center of every image when matching the captured state.
- Don't attach the left rule directly to the thumbnail edge.
- Don't remove all small-card pairing on mobile.
- Don't infer autoplay or modal playback from the play symbol or `00:00` DOM text.
- Don't turn the envelope link into email without a separate product decision.
- Don't treat sampled footer coordinates as proof of a particular parallax implementation.
- Don't present film directors as website production credits.

## Recommended Implementation Additions

These recommendations are additions for a new implementation, not verified features of the original page.

- Use semantic work links with meaningful accessible names. Decorative play symbols inside the link should not become nested interactive controls.
- Give menu, chevron, envelope, and back-to-top controls explicit accessible names. Only implement the introductory chevron after defining its actual action.
- If a mobile menu is added, expose `aria-expanded`, support keyboard operation, and make focus handling appropriate to the chosen panel behavior.
- Keep visible focus indicators on white and photographic surfaces.
- Retain compact visuals while providing at least approximately 44px touch targets for standalone icon controls and the Map link.
- Darken small gray captions if necessary for contrast. `#737373` is a practical alternative to the estimated `#808080`; the large gray heading can keep its lighter treatment.
- Reserve image dimensions and use responsive sources. Prioritize the first visible frame and defer offscreen media loading.
- If previews are introduced, provide a static poster, reduced-motion behavior, and explicit sound controls. Their behavior is not specified by the supplied evidence.
- Test long Japanese titles, narrow Latin director names, text zoom, and mobile keyboard order before enforcing fixed card heights.
- Use a static layered footer as the baseline. Add scroll effects only after testing readability, performance, and reduced-motion behavior.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: `#ffffff`.
- Primary text and rules: `#000000`.
- Large secondary words: approximately `#808080`.
- Small secondary text: estimated gray in the original; `#737373` recommended for an accessible adaptation.
- Work/archive action: black circle with a light symbol.
- Footer text and contact circle: white.
- Footer background: darkened turntable photograph; no separate brand accent color.

### Overall Prompt

“Create a film production company homepage with a white, image-led portfolio. Use regular grotesque typography, an 88px desktop heading, tight negative tracking, and small Japanese/English work captions. Place a circular monogram and Japanese wordmark at the upper left, with sparse navigation at the upper right. Set ‘Film Production’ in black and ‘Company’ in gray. Build the portfolio from rounded 16:9 film frames with a thin vertical rule offset to the left. Alternate full-width works with one large work beside two smaller stacked works, reversing the composition across sections. On mobile, use approximately 46px display text, full-width major works, and paired small cards. End with a spacious ‘All Works’ link and a dark turntable photograph behind a white ‘Get in Touch’ heading. Keep the interface unboxed and free of shadows.”

### Example Component Prompts

1. **Work card:** “Create a transparent portfolio link on white. Place a 1px black vertical rule at its left edge, then inset a rounded 16:9 image by 40px on desktop or approximately 16px on mobile. Below it, set a small title with an inline black circular play symbol, followed by a gray ‘Dir:’ caption. Keep all text outside the image.”
2. **Desktop work group:** “At a 1440px viewport, use 40px outer margins and a 1360px group with 320px and 920px anchor columns separated by 120px. Stack two small works in the narrow column with a 40px gap and offset the stack downward. Alternate which side holds the large work.”
3. **Mobile portfolio:** “At 390px, put card rules around 15.6px from the viewport edge and media around 31.2px from the left. Keep major works full width. Arrange small works in two columns with roughly 16.6px between card anchors, allow caption wrapping, and align director lines within a pair.”
4. **Contact footer:** “Use a full-width close photograph of a turntable with enough darkening for white text. Place a large regular-weight ‘Get in Touch’ link and white circular envelope symbol above small company, address, and telephone information. Add an outlined Map capsule and a thin back-to-top chevron. Let a white sheet with rounded lower corners overlap the photograph.”
5. **Interaction constraints:** “Use restrained color feedback consistent with a 250ms linear transition. Do not invent autoplay, an expanded menu design, or parallax as source behavior. Keep work cards as detail-page links unless separately specified.”

## Quick Start

### CSS Custom Properties

This is a recommended adaptation of the measured proportions, not recovered source CSS. It keeps a conventional document root and uses a separate mobile unit. Gray, media radii, footer shading, and the breakpoint are estimates or implementation choices.

Expected structure: `.content-sheet` contains `.site-header`, `.intro`, `.work-list`, and `.archive-link-wrap`. Each asymmetric group contains a `.work-stack` with two work links and one `.work-card--large`. Put the small stack first in the markup for `.work-group--large-right`; put the large link first for `.work-group--large-left`. Each work link contains `.work-media` and `.work-meta`, with title and director children. The footer follows the white sheet.

Load licensed fonts and authorized media separately. Set `--footer-image` to the chosen photograph. Menu/disclosure logic and media playback are intentionally outside this visual starter.

```css
:root {
  /* Measured colors and declared font stack */
  --color-canvas: #fff;
  --color-ink: #000;
  --color-reverse: #fff;
  --font-ui: 'neue-haas-grotesk-text', 'fot-cezanne-pron', sans-serif;

  /* Estimated colors; darker small text is a recommendation */
  --color-muted: #808080;
  --color-muted-text: #737373;
  --color-outline: #d6d6d6;
  --footer-image: none;
  --footer-shade: rgb(0 0 0 / 0.55);

  --text-body: 14px;
  --leading-body: 24px;
  --text-display: 88px;
  --leading-display: 100px;
  --tracking-display: -0.025em;

  --outer: 40px;
  --rail-inset: 40px;
  --content-inset: 80px;
  --work-gap: 120px;
  --stack-gap: 40px;
  --caption-gap: 20px;
  --director-gap: 28px;

  /* Screenshot estimates */
  --radius-media: 20px;
  --radius-sheet: 30px;
  --play-size: 20px;
  --cta-size: 70px;
  --motion-feedback: 250ms linear;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
}
a { color: inherit; }
button { font: inherit; }

.content-sheet {
  position: relative;
  z-index: 1;
  background: var(--color-canvas);
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 110px;
  padding: 40px var(--outer) 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 30px;
  text-decoration: none;
  transition: filter var(--motion-feedback);
}
.brand-symbol { display: block; width: 70px; height: 70px; }
.brand-wordmark { display: block; width: 150px; height: auto; }
.primary-nav { display: flex; align-items: center; gap: 30px; }
.primary-nav a {
  position: relative;
  text-decoration: none;
  transition: color var(--motion-feedback);
}
.primary-nav [aria-current='page']::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}
.menu-toggle { display: none; }

.intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 20.4167vw);
  gap: 40px;
  min-height: 230px;
  margin-top: 120px;
  padding-inline: var(--content-inset) var(--outer);
}
.intro-title {
  margin: 0;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}
.intro-title > span { display: block; }
.muted { color: var(--color-muted); }
.intro-address { padding-top: 8px; font-style: normal; }
.intro-address p { margin: 0; }
.intro-address p + p { margin-top: 24px; }
.intro-chevron { display: none; }

.work-list {
  display: grid;
  gap: var(--work-gap);
  padding-inline: var(--outer);
}
.work-group {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 23fr);
  gap: var(--work-gap);
  align-items: start;
}
.work-group--large-left {
  grid-template-columns: minmax(0, 23fr) minmax(0, 8fr);
}
.work-stack {
  display: grid;
  gap: var(--stack-gap);
  /* Reconstruction consistent with the measured stack offsets */
  transform: translateY(15%);
}
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: var(--rail-inset);
  text-decoration: none;
}
.work-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--color-ink);
}
.work-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: #eee;
}
.work-media > :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: var(--caption-gap);
}
.work-title { margin: 0; font: inherit; }
.work-director {
  margin: auto 0 0;
  padding-top: var(--director-gap);
  color: var(--color-muted-text);
}
.play-mark {
  display: inline-grid;
  place-items: center;
  width: var(--play-size);
  height: var(--play-size);
  margin-left: 10px;
  border-radius: 50%;
  vertical-align: -0.2em;
  background: var(--color-ink);
}
.play-mark::before {
  content: '';
  border-block: 3px solid transparent;
  border-left: 5px solid var(--color-reverse);
  transform: translateX(1px);
}

.archive-link-wrap {
  display: flex;
  justify-content: center;
  padding: 341px var(--outer);
}
.display-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-weight: 400;
  text-decoration: none;
}
.display-link sup {
  font-size: 14px;
  line-height: 1;
  letter-spacing: normal;
}
.cta-circle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--cta-size);
  height: var(--cta-size);
  border-radius: 50%;
  color: var(--color-reverse);
  background: var(--color-ink);
}
.cta-circle svg { width: 24%; height: 24%; }

/* Static layering: this does not claim to reproduce a scroll reveal. */
.contact-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 770px;
  margin-top: calc(-1 * var(--radius-sheet));
  padding: 150px var(--content-inset) 80px;
  color: var(--color-reverse);
  background-color: #211e19;
  background-image:
    linear-gradient(var(--footer-shade), var(--footer-shade)),
    var(--footer-image);
  background-position: center;
  background-size: cover;
}
.contact-link { align-self: flex-start; gap: 50px; }
.contact-link .cta-circle {
  color: var(--color-ink);
  background: var(--color-reverse);
}
.footer-bottom { position: relative; margin-top: auto; }
.footer-company { margin: 0 0 24px; }
.footer-address {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 100px;
  font-style: normal;
}
.footer-address p { margin: 0; }
.map-link {
  display: grid;
  grid-column: 1;
  place-items: center;
  width: 60px;
  min-height: 34px;
  margin-top: 40px;
  border: 1px solid currentColor;
  border-radius: 17px;
  text-decoration: none;
}
.copyright { position: absolute; right: 0; bottom: 0; margin: 0; }
.back-top {
  position: absolute;
  top: 170px;
  right: 110px;
  width: 80px;
  height: 48px;
}
.back-top svg { display: block; width: 100%; height: 100%; }

/* Recommended focus treatment; original focus states were not captured. */
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* Chosen breakpoint; intermediate source behavior is unverified. */
@media (max-width: 1023px) {
  :root {
    --u: clamp(8.533px, 2.666667vw, 14px);
    --text-body: calc(1.2 * var(--u));
    --leading-body: calc(1.8 * var(--u));
    --text-display: calc(4.4 * var(--u));
    --leading-display: calc(5 * var(--u));
    --outer: calc(1.5 * var(--u));
    --rail-inset: calc(1.5 * var(--u));
    --content-inset: calc(3 * var(--u));
    --work-gap: calc(6 * var(--u));
    --caption-gap: calc(1.5 * var(--u));
    --director-gap: calc(1.5 * var(--u));
    --radius-media: var(--u);
    --radius-sheet: calc(2 * var(--u));
    --play-size: calc(1.5 * var(--u));
    --cta-size: calc(3.5 * var(--u));
  }
  .site-header {
    min-height: calc(5.9 * var(--u));
    padding: calc(1.4 * var(--u)) calc(1.4 * var(--u)) 0;
  }
  .brand { gap: calc(1.5 * var(--u)); }
  .brand-symbol {
    width: calc(4.5 * var(--u));
    height: calc(4.5 * var(--u));
  }
  .brand-wordmark { width: calc(10 * var(--u)); }
  .primary-nav { display: none; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
  }
  .menu-toggle > span {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: currentColor;
  }
  .intro {
    display: block;
    min-height: calc(11.1 * var(--u));
    margin-top: calc(6.6 * var(--u));
    padding-inline: var(--content-inset);
  }
  .intro-address { display: none; }
  .intro-chevron {
    position: absolute;
    display: grid;
    place-items: center;
    top: calc(5.8 * var(--u));
    right: var(--content-inset);
    width: calc(2.8 * var(--u));
    height: calc(2.8 * var(--u));
    border: 1px solid var(--color-outline);
    border-radius: 50%;
    background: transparent;
  }
  .work-group { display: flex; flex-direction: column; }
  .work-group > * { width: 100%; }
  .work-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(1.6 * var(--u));
    transform: none;
  }
  .play-mark { margin-left: 8px; }
  .archive-link-wrap { padding-block: calc(17.8 * var(--u)); }
  .display-link { gap: calc(1.4 * var(--u)); }
  .display-link sup { font-size: calc(1.1 * var(--u)); }
  .contact-footer {
    min-height: calc(60 * var(--u));
    padding: calc(10 * var(--u)) var(--content-inset)
      calc(12 * var(--u));
  }
  .footer-company { margin-bottom: calc(2 * var(--u)); }
  .footer-address { column-gap: calc(3 * var(--u)); }
  .map-link {
    width: calc(6 * var(--u));
    min-height: calc(3.4 * var(--u));
    margin-top: calc(2.4 * var(--u));
    border-radius: calc(1.7 * var(--u));
  }
  .back-top {
    top: auto;
    right: auto;
    bottom: calc(4 * var(--u));
    left: 50%;
    width: calc(6 * var(--u));
    height: calc(3.6 * var(--u));
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand, .primary-nav a { transition: none; }
}
```

The starter preserves visible proportions but does not reproduce every text-bound measurement or total document height. Check the loaded fonts, actual captions, and chosen image crops at both reference viewports. The mobile navigation is represented only in its captured closed state; provide a working menu before shipping.

### Tailwind v4 Token Mapping

Optional aliases for an implementation already using Tailwind v4. These do not imply that the original website uses Tailwind. Define the properties above first.

```css
@theme inline {
  --color-record-paper: var(--color-canvas);
  --color-record-ink: var(--color-ink);
  --color-record-muted: var(--color-muted);
  --color-record-caption: var(--color-muted-text);
  --font-record: var(--font-ui);
  --text-record-body: var(--text-body);
  --text-record-display: var(--text-display);
  --spacing-record-outer: var(--outer);
  --spacing-record-rail: var(--rail-inset);
  --spacing-record-content: var(--content-inset);
  --spacing-record-group: var(--work-gap);
  --radius-record-media: var(--radius-media);
  --radius-record-sheet: var(--radius-sheet);
}
```

## Sources & Evidence

- **Inspected original and final page:** [Moriyama Record](https://mori-record.jp/). Both supplied URLs are identical; the supplied HTTP status is `200`.
- **Capture date:** September 22, 2026, 21:14:07.826 UTC, equivalent to September 23, 2026, 06:14:07.826 JST.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport, three screenshots covering the opening area, a middle work, and the footer; rendered document height `8063px`.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport, two screenshots covering the opening area and footer; rendered document height `5276px`.
- **Computed evidence:** font stack, text size, weight, line height, tracking, body colors, selected transition declarations, element bounds, card padding, Map radius, and the `--vw` property.
- **Navigation evidence:** homepage anchors identify work-detail pages, the works archive, About, Contact, an external map, and the top-of-page target. These destination pages were not opened as part of this analysis.
- **Interaction scope:** supplied scrolling captures and readiness observations only. No activated menu, chevron, hover, playback, contact form, or back-to-top sequence was supplied.
- **Inspection limitations:** screenshot estimates are explicitly marked; the precise asset URLs, original breakpoint, complete stylesheets, font-file loading, and footer reveal implementation are unknown. Delayed content and unexercised behaviors remain unverified.

This reference describes the current homepage evidenced by the supplied captures and DOM. The CSS and prompts are reusable adaptations of that evidence, with accessibility additions and implementation choices identified separately.