# MORI REFORM — Style Reference

> A neighborhood renovation company presented through warm paper, leafy greens, family photographs, and two playful characters.

**Website:** [mori-reform.jp](https://mori-reform.jp/)
**Original URL:** https://mori-reform.jp/
**Final URL:** https://mori-reform.jp/
**Theme:** light; cream content areas, white closing sections, and green accents
**Inspected:** October 5, 2026, at 05:36 JST; supplied retrieval timestamp: October 4, 2026, 20:36:00.036 UTC
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels
**Scope:** the current corporate and service homepage. Visual evidence covers the desktop opening, a works-to-small-renovation section, the desktop footer, the mobile opening, and the mobile footer. Rendered DOM evidence additionally covers service introductions, renovation stories, category links, news, blog entries, social imagery, and showroom information. Destination pages and opened navigation states were not inspected.

MORI REFORM combines a substantial local-business information architecture with an informal illustrated identity. The homepage introduces the company, presents renovation and new-build services, documents completed work, publishes local updates, and offers several routes to consultation. Its character comes from the relationship between ordinary domestic photography and deliberately simple green illustrations: foliage with uneven edges, angular animal-like faces, and a sketched laptop near the consultation area.

The opening composition is asymmetrical. A small vertical Japanese promise and compact brand lockup sit at the left, while a large photo mosaic occupies the upper and right portions of the screen. Cream cutouts turn its outer boundary into broad lobes. The rest of the page alternates generous breathing room with practical lists, rounded photographic tiles, outlined directory buttons, and compact green contact actions. The mobile version rearranges this composition substantially and introduces a persistent three-part navigation bar.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed-style record.
- **Derived** means arithmetic applied to measured rectangles, such as subtracting card width from the distance between adjacent cards.
- **Visual estimate** means a proportion, color, or detail read from the supplied current-page screenshots. It is not a sampled pixel value or recovered CSS declaration.
- **Recommended** means an implementation choice for a new project. Breakpoints, accessibility improvements, and unverified state behavior are identified accordingly.
- All named custom properties below are implementation aliases. The supplied record does not expose a complete set of authored brand variables.
- Measurements describe two captured layouts. They do not establish continuous scaling formulas between those layouts.

The original body has a computed `10px` font size, but most readable paragraphs override it. Likewise, several composite headings and button wrappers report small inherited sizes while their visible children are larger. Use measurements of actual text elements where available, rather than propagating wrapper styles to all content.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Warm Cream | `#F5F4E4` | `--mori-paper` | Measured `rgb(245, 244, 228)` on `main` at both viewports; the dominant opening and editorial background |
| Leaf Green | `#54A734` | `--mori-green` | Measured `rgb(84, 167, 52)` on contact and consultation actions; visually echoed by foliage and character artwork |
| Yellow Green | `#83AF0C` | `--mori-line` | Measured `rgb(131, 175, 12)` on official LINE actions |
| Pale Wheat | `#EFE6C2` | `--mori-wheat` | Measured `rgb(239, 230, 194)` on the four company/service feature cards |
| Black Ink | `#000000` | `--mori-ink` | Measured text color; also visible in navigation rules, logos, arrows, and social symbols |
| White | `#FFFFFF` | `--mori-white` | Visually observed in the closing consultation area, outlined directory buttons, and reversed control details; no corresponding surface element was measured |
| Deep Navigation Green | approximately `#418F24` | `--mori-nav-green` | Visual estimate for the circular desktop menu and mobile navigation bar; exact declaration unavailable |

The greens have distinct jobs. Leaf Green identifies ordinary inquiry actions, Yellow Green identifies LINE, and a deeper green supports persistent navigation. The pale wheat cards provide a quiet intermediate surface between the cream canvas and the illustrated decoration.

Additional greens appear inside the artwork. Their exact values were not supplied, so do not replace the illustrations with a supposedly complete palette reconstructed from these interface tokens.

### Color Boundaries

The first desktop capture and the works section share the cream canvas. The final desktop capture places online consultation on white, followed by a cream rectangular footer panel. A green illustrated band appears immediately above this closing area.

The supplied custom-property inventory includes numerous general WordPress colors, gradients, and shadows. Their presence does not establish use in the visible design. In particular, the blue, purple, and rainbow presets are not brand colors for this reference.

## Tokens — Typography

### Primary Japanese Interface

**Measured family:** `"Noto Sans JP", sans-serif`.

This stack appears on ordinary paragraphs, navigation, service headings, works titles, and news entries. Medium body text gives the page a steady, readable texture. Bold headings remain relatively compact; the large opening visual carries more weight than an oversized horizontal headline.

Measured weights are `400`, `500`, and `700`. The supplied record identifies the computed family stack, not the font files or their loading history.

### Button and Utility Family

Several contact actions and outlined directory-link wrappers declare a Yu Gothic stack containing `YuGothic`, `Yu Gothic Medium`, `Yu Gothic`, and their Japanese spelling aliases, followed by `sans-serif`.

These wrapper declarations often report `10px`. That is not a reliable measurement of the visible button label. The screenshots show larger nested text. A `14–16px` label is a practical visual approximation, depending on button size.

### Copyright and Artwork Lettering

The mobile copyright is measured as `Montserrat, sans-serif`, `10px`, weight `500`, line height `10px`, and tracking `0.6px`. Do not extend this finding to all English labels without additional evidence.

The brand wordmark has heavy, distinctive lettering and should be treated as supplied artwork. The circular Renovation house 栞 promotion uses fine Japanese lettering over a dark photograph. Its exact display family is not established by the provided styles.

### Type Scale

| Role | Desktop | Mobile | Weight / tracking | Evidence |
| --- | --- | --- | --- | --- |
| Introductory heading | `36px / 52px` | `24px / 37px` | `700`; `0.05em` | Measured |
| Introductory paragraph | `17px / 36px` | `14px / 26px` | `500`; normal tracking | Measured |
| Service-card heading | `30px / 46px` | `24px / 38px` | `700`; `0.05em` | Measured |
| Service-card paragraph | `17px / 32px` | `14px / 29px` | `500` | Measured |
| Works-card title | `20px / 32px` | `20px / 30px` | `500`; `1px` tracking | Measured |
| Works-card excerpt | `17px / 32px` | `17px / 32px` | `500` | Measured; deliberately larger than general mobile body text |
| News and blog heading | `32px / 32px` | `21px / 21px` | `700` | Measured |
| News and blog title | `17px / 28px` | `14px / 26px` | `500` | Measured |
| Desktop opening navigation | `17px / 17px` | Replaced by mobile controls | `700` | Measured |
| Opening announcement | `16px / 25.6px` | `14px / 22.4px` | `400`; `0.03em` | Measured |
| Online-consultation heading | `18px / 30px` | `18px / 30px` | `700`; `0.03em` | Measured |
| Online-consultation paragraph | `15px / 32px` | `14px / 26px` | `500` | Measured |
| Desktop footer links | `15px / 32px` | Sitemap absent from captured mobile rendering | `500` | Measured |
| Opening vertical slogan | approximately `24–26px` | approximately `20px` | Visually bold | Visual estimate; parent reports only inherited `10px` |
| Large directory-button label | approximately `16px` | approximately `14–16px` | Visually bold | Visual estimate |
| Mobile navigation caption | — | approximately `10px` | Visually bold | Visual estimate |

Use line height as an important part of the design. Desktop introductory paragraphs use more than twice their font size, and mobile text retains comfortable spacing. Compact headline blocks coexist with spacious paragraph rhythm.

## Tokens — Spacing & Shapes

**Density:** generous at section level, compact within utility controls.

**Shape language:** large rounded images and service cards, pill-shaped actions, circular promotional links, uneven foliage, and selectively square footer surfaces.

### Layout Measurements

| Element | Desktop at 1440px | Mobile at 390px | Evidence |
| --- | --- | --- | --- |
| Common content region | `1106px`, starting at `x=167` | `340px`, starting at `x=25` | Measured |
| Introductory text region | `844px`, starting at `x=298` | `340px` | Measured |
| Service card | `342 × 299px` | `340 × 249px` | Measured |
| Service-card horizontal padding | `40px` | `30px` | Measured |
| Service-card bottom padding | `47px` | `30px` | Measured |
| Service-card columns | Two, separated by `100px` | One | Derived from rectangles |
| Right service-column offset | Approximately `60px` lower | No stagger | Measured positions |
| Story link block | Two blocks, each `441 × 486px` | One rendered block, `390 × 429.3px` | Measured |
| Gap between desktop story blocks | `86px` | — | Derived |
| Works-card width | `334px` | `305px` | Measured |
| Works-card spacing | `52px` | `20px` | Derived from adjacent positions |
| Large directory button | `550 × 56px` | `340 × 50px` | Measured |
| Small contact pill in opening | `120 × 38px` | Replaced by bottom navigation | Measured |
| Consultation buttons | `334 × 48px` | `340 × 50px` | Measured |
| Small-renovation category cell | `158 × 214px` | Approximately `113.33 × 156.59px` | Measured |
| Social-feed image link | `215 × 215px` | Approximately `166.5 × 166.5px` | Measured; some mobile boxes differ by 1px in height |
| Mobile bottom navigation item | — | `130 × 66px` in opening state | Measured |
| Circular opening promotion | `317 × 317px` | `155 × 155px` | Measured |

### Spacing Scale

These are descriptive aliases for recurring measurements, not a recovered source scale.

| Suggested alias | Value | Practical use |
| --- | --- | --- |
| `--space-tight` | `7px` | Measured social-feed image gaps |
| `--space-small` | `10–12px` | Compact controls and image-to-label adjustments |
| `--space-control` | `20px` | Mobile consultation-button gap and mobile works-card gap |
| `--space-gutter` | `25px` | Measured mobile content inset |
| `--space-card-mobile` | `30px` | Mobile feature-card inset |
| `--space-card-desktop` | `40px` | Desktop feature-card inset |
| `--space-column` | `52px` | Desktop works-card gap and news/blog column gap |
| `--space-footer` | approximately `70px` | Visual desktop footer-panel inset |
| `--space-feature-column` | `100px` | Derived gap between desktop service cards |

The gap from the desktop works directory button's bottom to the small-renovation heading block is `124px`; the corresponding mobile gap is `53px`. This is a useful example of section spacing being reduced independently from card typography.

### Border Radius and Linework

| Element | Treatment | Evidence |
| --- | --- | --- |
| Service cards | `50px` radius at both viewports | Measured |
| Desktop small contact pill | `19px` radius on a `38px` box | Measured |
| Consultation pills | `30px` desktop; `25px` mobile | Measured |
| Circular opening promotion | Radius declaration equals its `317px` or `155px` box size, producing a circle | Measured |
| Works photographs | Approximately `45–50px` corners | Visual estimate |
| Opening mosaic tiles | Approximately `20–25px` desktop corners | Visual estimate |
| Directory buttons | Full pill, approximately `3px` black outline | Visual estimate; outer dimensions measured |
| Desktop menu | Approximately `100px` diameter | Visual estimate |
| Footer panel | Square corners | Observed screenshot |
| Back-to-top symbol | Uneven black horizontal stroke and upward chevron | Observed screenshot; mobile link box `67 × 42px` measured |

Avoid converting this into a universal rounded-card system. Some of the most important structures, including the footer panel and unboxed works metadata, remain rectangular or completely uncontained.

## Components

### Opening Photo Composition

**Role:** introduce the company's human and domestic world before presenting service details.

The desktop mosaic starts around `x=407`, touches the top and right edges, and reaches approximately `y=870`. These are visual bounds, not a measured containing box. Its photographs show renovated rooms, family life, a close view of a child's hand, and people in a kitchen. Pale gutters separate individual rounded tiles.

The outer contour has broad curved cutouts rather than a single rounded rectangle. Large foliage shapes overlap the top edge. Two angular green characters sit over the cream area near the mosaic's lower-left edge, around `x=360–700` in the desktop capture.

The mobile opening shows a different set of current photographs: drawing, discussion, a smiling person, and hands-on work. The supplied frames do not establish whether this difference is caused by responsive asset selection or a changing image sequence.

For implementation, treat the composition as art-directed media. A precomposed transparent asset or an authored image-and-mask composition can preserve its negative spaces. A regular equal-cell grid alone will not reproduce the silhouette.

### Vertical Promise and Brand Lockup

**Role:** establish the brand without competing with the photo composition.

The promise reads `住まいで / 暮らしを / 快適にする` in three vertical columns. On desktop its parent occupies `162 × 143px` at `x=98, y=228`. The logo link measures `219 × 118px` at `x=66, y=436.5`. A separate telephone link sits below at `x=66, y=576.5`, measuring `219 × 37px`.

The black brand artwork includes its own lettering and small green canopy shapes. Keep its original proportions. The phone number and business-hour lockup are visually important parts of this identity cluster, rather than tiny footer-only information.

On mobile, the slogan parent starts at `y=595`, the brand heading box at approximately `y=726.5`, and the circular promotion overlaps the adjacent area. The first screen does not show the complete brand block unobstructed.

A semantic implementation should retain a meaningful brand heading and accessible names for image links. Repeated logo placements do not require repeated top-level headings.

### Opening Announcement Strip

**Role:** provide a current event entry point within the opening scene.

On desktop, the link occupies `513 × 92px` at the top-right corner. It contains a small rounded thumbnail, a two-line announcement, and a green outlined circular arrow. Its visible white field contrasts with the photographs behind it.

The announcement text is measured at `16px / 25.6px`, with `0.48px` tracking. The observed destination is an event page on the same domain.

On mobile, this strip moves below the initial visible area: `x=20, y=853`, `370 × 66px`. The text becomes `14px / 22.4px`. Preserve this as a separate news component; it is not a sticky header established by the evidence.

### Desktop Primary Navigation and Menu Trigger

**Role:** expose major service and company destinations.

Near the bottom of the desktop opening, six bold underlined links lead to company philosophy, full renovation, new construction, works, small renovation, and company information. Two adjacent utility actions use a green filled contact pill and a green outlined access pill.

The ordinary links use `17px`, weight `700`, with `13px` bottom padding. The first starts at `x=46, y=933`; the two pills start at `y=927`. This deliberately anchors navigation below the opening composition.

In the scrolled desktop screenshots, a green circular menu trigger appears near `x=30, y=28`, approximately `100px` in diameter. Its white icon consists of horizontal bars of changing lengths above the word `menu`. The repeated position is consistent with a fixed control. Its exact activation threshold and opened state were not supplied.

### Mobile Bottom Navigation

**Role:** keep access, menu, and inquiry controls readily available.

The opening mobile capture has a full-width green bar spanning `y=778–844`. Three equal `130px` slots contain white icons above the labels `アクセス`, `メニュー`, and `お問い合わせ`. Thin lighter-green vertical dividers separate the slots.

The icons are a location symbol, the distinctive stacked-bar menu mark, and an envelope. Keep labels visible alongside these icons.

At the footer, the same three-part control appears as an inset rounded bar, approximately `360 × 66px`, positioned `15px` from each side and about `46px` above the screenshot bottom. The change in position and rounding is observable; its trigger and transition are not.

For a new implementation, reserve space for the bar and device safe area. The current opening visibly overlaps the logo and circular promotion, so reproducing that overlap should be a deliberate fidelity decision rather than an accidental side effect.

### Circular Renovation House Promotion

**Role:** provide a distinctive secondary destination for Renovation house 栞.

The current desktop opening uses a `317px` circular photograph at `x=1083, y=645`, with white Japanese lettering and a small calligraphic mark over a dark interior. A soft shadow separates it from the surrounding photos and cream field.

On mobile, it shrinks to `155px` and moves to `x=243, y=705`. Its measured right edge exceeds the viewport by `8px`; the screenshot shows cropping and overlap with the bottom navigation.

This is a special promotional object, not a model for every card. Its destination is the observed `/shiori/` link. The exact image overlay and shadow declarations were not supplied.

### Company Introduction and Four Feature Cards

**Role:** explain the company's approach and route visitors into deeper service information.

An introductory heading and paragraph lead into four pale wheat cards for philosophy, staff, full renovation, and new construction. Each card is a single linked region with a three-line bold heading, short supporting copy, a detail invitation, and an English category label such as `PHILOSOPHY` or `FULL REFORM`.

Desktop cards form two staggered columns. Their left edges are `x=328` and `x=770`; the right column begins about `60px` lower. Each card is `342 × 299px`, with `50px` corners and `40px` side padding.

The heading begins approximately `21px` above the card's measured top. This overlap is an important detail: the text and background do not behave like a conventional padded box. On mobile the overlap is approximately `15px`, the card becomes `340 × 249px`, and the four cards form one column with `52px` gaps.

The screenshot set does not directly show these cards. Their color, geometry, typography, and content anatomy are supported by computed styles and rendered rectangles; additional decorative details are not established.

### Renovation Story Entries

**Role:** connect completed projects to household circumstances and long-term relationships.

The section introduces numbered stories with a Japanese heading and the English wording `THE STORY OF RENOVATION`. Each entry links a story number, title, and excerpt as one content unit.

Desktop evidence contains two `441px`-wide story blocks separated by `86px`. The mobile rendering contains one `390px`-wide story block, with excerpt content inset by `25px`, followed by the directory button.

The difference in rendered entry count is real. It does not prove that the mobile version has a carousel or a hidden second story. Avoid adding such behavior as an observed feature.

### Works Rail and Project Card

**Role:** let visitors browse specific renovation outcomes.

The desktop screenshot shows a horizontal row extending beyond both viewport edges. Each card combines a large rounded photograph, a medium-weight project title, and a short excerpt with an ellipsis. The card itself has no visible enclosing panel or shadow.

Measured widths are `334px` desktop and `305px` mobile. Adjacent positions imply gaps of `52px` and `20px`, respectively. The photograph is approximately square; this proportion is supported by the screenshot and image-space geometry, rather than a supplied image-element measurement.

The mobile title remains `20px`, and the excerpt remains `17px / 32px`, with `10px` horizontal padding inside the card's text region. This is a notable exception to the smaller general mobile text scale.

The DOM contains repeated copies of five project links, including offscreen instances with large negative horizontal positions. This is consistent with a looping rail implementation. The precise movement, controls, swipe behavior, and autoplay interval were not tested. A different visible sequence between the screenshot and element record should be treated as a state difference, not a different layout system.

### Outlined Directory Button

**Role:** lead from a preview section to its complete archive or category page.

The visible works button is a white pill with a strong black outline, centered bold text, and a black circular right-arrow mark near its right edge. Its label is `実例をもっと見る`.

The outer link measures `550 × 56px` on desktop and `340 × 50px` on mobile. The same pattern is used for stories, small-renovation examples, news, and blog directories, with the news/blog desktop buttons matching their `527px` columns.

The wrapper has a computed radius of zero and a transparent background, while the screenshot clearly shows a rounded outlined treatment. This indicates that visible styling belongs to a child or pseudo-element not captured in the element sample. Reproduce the final appearance rather than the wrapper's isolated properties.

### Small-Renovation Heading and Category Links

**Role:** make smaller repairs approachable through examples, categories, and pricing context.

A short question, `ソレ直すとどのくらい？`, precedes the title `プチリフォームの実例と価格`. In the desktop screenshot, the main title sits on a pale rectangular strip with black rules across its top and bottom. The strip is approximately `476 × 85px`, and its visible title is approximately `32px`; both are visual estimates.

Supporting copy is centered below at `17px / 36px` desktop and `14px / 26px` mobile.

Seven desktop category cells fill the `1106px` container in equal `158px` widths. They pair Japanese labels with English subtitles and link to anchors for wall, basin, kitchen, joinery/sash, bathroom, toilet, and other work.

The mobile rendered evidence contains six categories in a three-column, two-row arrangement. Each column is approximately `113.33px`; the second row starts `20px` below the first. The desktop `Others` category does not appear in the supplied mobile text or links. Do not infer its mobile location.

### News, Blog, and Social Feed

**Role:** show continued activity and practical advice.

News and blog occupy two `527px` desktop columns, separated by `52px`. News entries group a date, category, and title; blog entries place a thumbnail region beside date and title. Both use `32px` section headings and shared directory buttons.

On mobile, news precedes blog in one `340px` column, and headings become `21px`. Blog rows retain an image-and-text relationship rather than turning into large vertical cards; their measured heights are approximately `103.6px`.

A separate social section contains four linked image tiles. Desktop tiles are `215px` square in one row, while mobile tiles form a two-by-two grid at approximately `166.5px` each, with `7px` gaps. The linked destinations are social posts; playback within the homepage was not observed.

### Showroom and Consultation Information

**Role:** translate browsing interest into an in-person visit or direct inquiry.

The rendered content includes showroom introduction, a prominent telephone link, contact and official LINE actions, address, opening information, access-map link, and practical visitor details. Desktop introductory copy is `17px / 36px`; mobile copy is `14px / 26px`.

Desktop contact and LINE actions appear side by side at `38px` high. Mobile actions become two full-width `340 × 50px` pills with a `20px` gap. The mobile map action is `310 × 50px` inside an additional inset.

The access-map URL points to directions for the displayed showroom address. Its navigation result was not exercised. Preserve the difference between an inquiry form, a telephone link, official messaging, and map directions in any adapted implementation.

### Online Consultation Block

**Role:** explain how to request a remote consultation.

The desktop closing area combines a bold heading with short black emphasis strokes, three lines of explanatory text, a small sketched laptop, and two green actions on the right. The action column is `334px` wide; each button is `48px` high with a `20px` gap.

On mobile, the heading wraps to two centered lines, the body uses the `340px` content width, and the buttons stack below it at `50px` high. The first is Yellow Green for LINE; the second is Leaf Green for a consultation request through the contact form. The laptop illustration is not visible in the supplied mobile footer capture.

The explanatory copy distinguishes the two channels: LINE uses the official account, while a Zoom consultation is requested through telephone or the form. The Zoom-labeled action points to `/contact/`; it is not evidence of an embedded video-call interface.

### Footer Panel and Back-to-Top Link

**Role:** close with company recognition, contact access, and secondary navigation.

Desktop uses a large square-cornered cream panel, approximately `1106 × 465px`, inside a white surrounding region. An underlined sitemap occupies the upper area. A thin muted horizontal rule separates it from the lower brand, telephone, contact, access, and social controls. The copyright runs vertically beside the panel's right edge.

The mobile footer becomes a compact cream panel approximately `340 × 243px`. It contains a horizontal Japanese/English brand lockup, telephone and hours artwork, a fine divider, `follow us!`, five black social symbols, and centered copyright. The desktop sitemap is absent from this captured rendering.

A hand-drawn back-to-top mark sits outside the panel. Its mobile link box is measured at `67 × 42px`, centered horizontally. The observed target is `/#top`; smooth scrolling was not verified.

## Tokens — Motion & Interaction

| Element or behavior | Evidence | What can be concluded |
| --- | --- | --- |
| Desktop announcement link | Computed `transition: opacity 0.6s` | An opacity transition is defined; trigger and target opacity are unverified |
| Desktop circular house promotion | Computed `transition: opacity 0.6s` | Same limited conclusion; no tested hover state |
| Desktop small-renovation category links | Computed `transition: opacity 0.6s` | Defined fade capability, not evidence of entrance animation |
| Separate small-renovation promotional link in desktop DOM | Computed `transition: top 2s, opacity 0.6s` on a `317px` circular link | Top position and opacity can transition; path, trigger, and full appearance are not established by the screenshots |
| Works rail | Repeated links and offscreen horizontal positions; viewport-edge cropping | Looping rail structure is supported; speed, autoplay, dragging, and controls are unverified |
| Opening photos | Different photographs in desktop and mobile captures | Responsive selection or a changing sequence is possible; timing cannot be inferred |
| Desktop menu | Same upper-left placement in scrolled screenshots | Persistent placement is supported; exact reveal threshold and open state are unknown |
| Mobile bottom navigation | Full-width opening state and inset footer state | Two appearances are observed; transition logic is unknown |
| Back-to-top link | Explicit `/#top` destination | Anchor intent is established; scrolling animation is not |
| Most sampled wrappers | `transition: all` and `animation: none` | No usable duration is provided by these entries; they do not establish animated behavior |

The capture process waited for loading, image decoding, and sampled layout stability, and temporarily paused perpetual animations during readiness checks. It is not a motion recording. Neither an `animation: none` value on an anchor nor a stable screenshot proves that its descendants, pseudo-elements, or scripts are static.

**Recommended adaptation:** use restrained opacity feedback for suitable desktop links, keep navigation state changes understandable without animation, and provide a manual works rail before introducing any autoplay. If automatic movement is added, offer pause controls and reduced-motion behavior. These are implementation recommendations, not verified features of the original.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Solid Warm Cream | Unifies the opening, service introductions, works, and editorial previews |
| Feature cards | Pale Wheat, large `50px` corners | Gives company and service explanations a soft background |
| Photo tiles | Full-color photography with rounded crops | Carries evidence of real homes, people, and work |
| Directory action | White pill with black outline and arrow disc | Makes archive navigation distinct from direct inquiry |
| Contact action | Leaf Green with white visible label | Signals inquiry and consultation routes |
| LINE action | Yellow Green with white visible label | Identifies the messaging channel |
| Persistent navigation | Deeper green with white icons | Supports orientation and mobile access |
| Closing consultation area | White | Separates practical contact information from the cream main sequence |
| Footer information panel | Square cream rectangle | Contains identity and secondary information without a dark footer |
| Special circular promotion | Dark photograph, white lettering, subtle shadow | Highlights a related destination |

There is no evidence of a general elevation scale. Most separation comes from spacing, outlines, image edges, and background changes. The circular promotion's shadow is a local exception.

## Imagery

The current opening mixes domestic detail, household life, completed rooms, and people working. This is essential to the tone: the company is presented through ordinary inhabitation and craft, alongside finished architecture.

Photography should retain plausible natural light, wood grain, skin tones, and useful room context. Avoid applying a universal green filter. The green belongs primarily to illustrations and interface accents.

The characters use simple angular heads, contrasting green bodies, round black-and-white eyes, and small triangular teeth. Their edges are slightly rough, as are the overlapping foliage silhouettes. The consultation laptop and back-to-top mark introduce a second, black hand-drawn line style. Preserve this selective irregularity without distressing all text or photographs.

### Observed Asset References

No image `src` URLs, downloadable filenames, or intrinsic dimensions were included in the supplied evidence. The references below identify visible asset roles rather than inventing file paths.

| Asset role | Current-page evidence | Reuse guidance |
| --- | --- | --- |
| Main brand lockup | Desktop opening, desktop footer, mobile opening and footer | Use authorized artwork and appropriate stacked or horizontal lockups |
| Photo mosaic | Desktop and mobile opening captures | Preserve the compound silhouette, narrow cream gutters, and varied tile sizes |
| Green character pair | Both opening captures | Retain asymmetry, contrasting green tones, and simple facial details |
| Foliage border | Opening corners and a band near the footer | Use broad overlapping shapes with slightly irregular contours |
| Renovation house promotion | Circular current opening link | Preserve the dark photograph and readable white artwork |
| Works photographs | Desktop mid-page capture | Use large, approximately square crops with strongly rounded corners |
| Consultation laptop | Desktop footer capture | Keep the informal black sketch treatment |
| Navigation symbols | Desktop circular menu and mobile bar | Match the location, stacked bars, and envelope silhouettes |
| Social symbols | Both footer captures | Preserve recognizable platform marks; visible X artwork can differ from the legacy URL hostname |
| Back-to-top mark | Both footer captures | Keep the uneven stroke rather than replacing it with a tiny generic chevron |

Use original assets only when authorized and available. For a new brand, commission corresponding photography and illustrations while preserving their compositional roles.

## Layout & Responsive Behavior

### Desktop Composition

The desktop page is approximately `8636px` tall in the supplied record. Most standard sections align to a centered `1106px` region, while the introduction narrows to `844px` and the opening uses the entire viewport.

The opening navigation sits near the first viewport's bottom. Later sections alternate narrower text, staggered service cards, paired story previews, a full-width works rail, and more conventional information columns. The works rail deliberately exceeds the central content region while its headings and directory button remain aligned.

News and blog share a row. Social images use a single horizontal sequence. The closing footer is broad and contains a full sitemap.

### Mobile Composition

The mobile document is approximately `9286px` tall. Standard text and buttons use a `340px` content width with `25px` side gutters.

The opening is not simply a scaled desktop composition. The visible mosaic occupies roughly the top `326px`. A large cream interval follows before the slogan at `y=595`, characters around `y=613`, and brand artwork around `y=727`. The announcement starts below the first viewport at `y=853`, and the introductory heading starts at `y=1138`.

This large empty interval is part of the captured current state. Its cause is not established. The record reports `--vh: 10px` at both viewports, which is insufficient to derive a reliable mobile viewport-height formula. Do not explain the gap as a verified animation or assume it should always equal a fixed portion of the screen.

The mobile service cards stack without the desktop stagger. One story entry appears in the rendered evidence. Works retain a horizontal rail, with a `305px` card and part of an adjacent card visible within the `390px` viewport. Small-renovation categories become three columns. News and blog stack, while the social images form a two-by-two grid.

Consultation actions expand to full content width. The final footer removes the visible sitemap and reorganizes identity, phone, and social links into a compact centered panel. A three-part bottom navigation bar remains visible in both supplied mobile captures.

### Responsive Implementation Guidance

The original breakpoint values were not provided. A breakpoint around `768px` is a reasonable starting recommendation for changing navigation and collapsing the measured desktop arrangements, with additional intermediate-width testing required.

Preserve component-specific changes. Do not reduce every type size by the same ratio: works excerpts remain `17px` on mobile, while general body copy becomes `14px`. Similarly, the `50px` service-card radius is retained while card height and padding decrease.

For a production adaptation, test short phone heights, landscape orientation, longer text, and safe-area devices. The large opening gap and partially covered identity should be reviewed explicitly rather than treated as universal layout requirements.

## Do’s and Don’ts

### Do

- Anchor the palette in measured cream `#F5F4E4`, Leaf Green `#54A734`, and Pale Wheat `#EFE6C2`.
- Keep ordinary text black and give it generous line height.
- Preserve the three-column vertical opening promise and compact brand scale.
- Treat the photo mosaic's outer silhouette as authored composition.
- Combine people, inhabited rooms, and construction activity in the imagery.
- Keep service cards softly rounded and their headings slightly overlapping the upper edge.
- Preserve the distinction between outlined directory links and filled contact actions.
- Keep works photographs large and their metadata unboxed.
- Retain the mobile works rail rather than forcing every preview into one vertical list.
- Use visible labels with mobile navigation icons.
- Preserve the square cream footer panel and the hand-drawn back-to-top mark.
- Distinguish measured responsive behavior from proposed breakpoints and motion.

### Don't

- Don't replace the multi-section corporate homepage with a single conversion pitch.
- Don't turn every content group into an elevated white card.
- Don't make the main headline enormous or remove the opening's asymmetry.
- Don't apply a green tint to all photography.
- Don't replace the characters with generic stock icons or smooth every irregular edge.
- Don't use the WordPress preset inventory as the site's visual palette.
- Don't treat a wrapper's `10px` font size or zero radius as the final appearance of its children.
- Don't render repeated extracted link labels as duplicate visible copy.
- Don't infer carousel speed, menu contents, or hover destinations from still captures.
- Don't make LINE and form-based consultation indistinguishable actions.
- Don't let a fixed mobile bar unintentionally make the final content unreachable.
- Don't invent image filenames, font families for artwork, or production-credit claims.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified original features.

- Give the mobile menu trigger an explicit accessible name and expose its expanded state. Implement keyboard handling and focus management only after defining the actual menu pattern.
- Provide meaningful alternative text for brand and project images; mark decorative foliage and redundant character artwork as decorative.
- Keep a visible focus outline on underlined links, circular promotions, social links, and pills.
- Validate contrast for white text on both green action fills. Where necessary, darken action backgrounds or adjust label treatment while retaining the brand colors elsewhere.
- Ensure mobile utility targets remain comfortably tappable, including social links whose inline text rectangles are smaller than their visible symbols.
- If carousel copies are used for looping, prevent redundant copies from creating repeated keyboard and screen-reader stops.
- Provide manual rail controls and a pause mechanism for any added automatic movement.
- Respect reduced-motion preferences in fades, rail movement, and scroll-triggered repositioning.
- Reserve space for the fixed navigation and safe area, particularly around the footer and back-to-top link.
- Review the mobile opening's large blank interval and brand overlap at multiple heights. A shorter version can be offered as an intentional adaptation, not described as the measured original.
- Reserve image space with intrinsic dimensions or aspect ratios to avoid shifts. Keep the initial composition responsive and defer noncritical imagery below it.
- Preserve access to company, policy, and service destinations when condensing the mobile footer.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#F5F4E4`.
- Feature-card surface: `#EFE6C2`.
- Text, linework, and social symbols: `#000000`.
- Contact and consultation fill: `#54A734`.
- Official LINE fill: `#83AF0C`.
- Closing consultation background and outlined button interiors: white.
- Persistent navigation: deeper green, approximately `#418F24`; exact original value unverified.
- Photography stays full color; additional illustration greens are asset-specific.

### Overall Prompt

“Create a Japanese renovation-company homepage inspired by MORI REFORM's current visual system. Use a warm cream canvas, black Noto Sans JP text, leaf-green contact actions, and pale wheat service cards. Compose the opening with a compact vertical Japanese promise and brand lockup on the left, a large irregularly masked photo mosaic on the right, broad green foliage, and two simple character illustrations. Use photographs of family life, actual interiors, and people doing renovation work. Continue into staggered company/service cards, renovation stories, a horizontal works rail, repair categories, news, blog content, social images, showroom details, and consultation options. Use white outlined pill buttons with black circular arrows for archive navigation. On mobile, stack service cards, preserve the works rail, use 25px content gutters, and provide a labeled three-part bottom navigation. Treat motion and menu behavior as separately specified implementation work.”

### Example Component Prompts

1. **Opening composition:** “Design a 1440 × 1000 desktop opening with cream negative space, a small three-column vertical promise, a 219px-wide brand lockup, and a photo mosaic occupying roughly the right 72% of the frame. Give the mosaic narrow cream gutters, rounded tiles, and a compound curved outer silhouette. Add irregular green foliage and two flat illustrated characters. Place a compact event strip at the upper right and a circular photographic secondary promotion near the lower right.”
2. **Service card:** “Create a pale wheat `#EFE6C2` service link, 342px wide and approximately 299px high, with 50px corners. Place a three-line 30px bold Japanese heading slightly above the background's upper edge, followed by 17px supporting text with a 32px line height and a short detail invitation. Use two staggered desktop columns; at 390px, use a single 340px-wide column with 24px headings.”
3. **Works rail:** “Create a horizontal project rail on cream. Use 334px desktop cards separated by 52px, with large square photographs rounded by about 50px, 20px medium-weight titles, and 17px excerpts. Leave the text unboxed and allow adjacent cards to crop at the viewport edges. On mobile use 305px cards and 20px gaps. Do not assume autoplay.”
4. **Directory action:** “Create a centered white outlined pill, 550 × 56px on desktop and 340 × 50px on mobile, with a roughly 3px black border. Center the label `実例をもっと見る` and place a black circle containing a white right-pointing arrow near the right edge. Use no drop shadow.”
5. **Online consultation:** “Create a white section with an 18px bold heading, short black emphasis strokes, readable Japanese explanatory copy, and a small hand-drawn laptop on desktop. Stack two 334 × 48px actions at the right: yellow green for official LINE and leaf green for requesting a consultation through a form. On mobile put the copy above two 340 × 50px pills with a 20px gap.”
6. **Mobile footer:** “Create a square cream panel inside 25px white side gutters. Center a horizontal brand lockup, telephone and hours artwork, a fine divider, a small follow label, five black social symbols, and a 10px tracked copyright. Place a hand-drawn back-to-top arrow outside the panel and a three-part deep-green navigation bar with visible access, menu, and inquiry labels.”

### Evidence-Safe Extension Prompt

“Retain the documented palette, type hierarchy, component geometry, and responsive relationships. Label any newly proposed breakpoint, animation, menu overlay, carousel control, or accessibility change as an implementation recommendation. Do not invent source asset paths or claim that proposed interactions were observed.”

## Quick Start

### CSS Custom Properties

The following CSS is an adaptation, not recovered source code. It uses a conventional root font size, measured component dimensions, and explicit recommendations where the original implementation is unknown.

The opening expects authorized brand, character, foliage, and precomposed transparent collage assets. Their file paths are intentionally unspecified. `.hero__collage` may instead contain an independently authored mosaic and mask. The optional inset dock state reproduces the appearance of the footer capture without claiming its original trigger.

```css
:root {
  /* Measured brand colors */
  --mori-paper: #f5f4e4;
  --mori-wheat: #efe6c2;
  --mori-green: #54a734;
  --mori-line: #83af0c;
  --mori-ink: #000;

  /* Visual approximations */
  --mori-white: #fff;
  --mori-nav-green: #418f24;
  --mori-rule: #b9b699;

  /* Confirmed family declarations */
  --mori-font-body: 'Noto Sans JP', sans-serif;
  --mori-font-control: YuGothic, 'Yu Gothic Medium',
    'Yu Gothic', sans-serif;
  --mori-font-copyright: Montserrat, sans-serif;

  /* Measured desktop dimensions */
  --mori-content: 1106px;
  --mori-intro: 844px;
  --mori-gutter: 25px;
  --mori-feature-radius: 50px;
  --mori-work-width: 334px;
  --mori-work-gap: 52px;
  --mori-directory-width: 550px;
  --mori-directory-height: 56px;

  /* Recommended implementation values */
  --mori-photo-radius: 50px;
  --mori-focus-width: 3px;
  --mori-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mori-fade: 600ms ease;
}

.mori-page,
.mori-page * {
  box-sizing: border-box;
}

.mori-page {
  margin: 0;
  color: var(--mori-ink);
  background: var(--mori-white);
  font-family: var(--mori-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 2.1176;
}

.mori-page img {
  max-width: 100%;
}

.mori-main {
  background: var(--mori-paper);
}

.mori-container {
  width: min(
    calc(100% - 2 * var(--mori-gutter)),
    var(--mori-content)
  );
  margin-inline: auto;
}

.mori-intro {
  max-width: var(--mori-intro);
  margin-inline: auto;
}

.mori-intro h2 {
  margin: 0 0 17px;
  font-size: 36px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: 0.05em;
}

.mori-intro p {
  margin: 0;
}

/* Opening: proportions calibrated to the supplied desktop frame. */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: var(--mori-paper);
}

.hero__collage {
  position: absolute;
  inset: 0 0 auto auto;
  width: 72%;
  z-index: 0;
}

.hero__collage img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__foliage {
  position: absolute;
  inset: 0 auto auto 0;
  width: 46%;
  z-index: 2;
  pointer-events: none;
}

.hero__slogan {
  position: absolute;
  top: 22.8%;
  left: 6.8%;
  display: flex;
  flex-direction: row-reverse;
  gap: 24px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.hero__slogan span {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.hero__identity {
  position: absolute;
  top: 43.65%;
  left: 4.583%;
  width: 219px;
}

.hero__identity img,
.hero__phone {
  display: block;
  width: 100%;
}

.hero__phone {
  margin-top: 22px;
}

.hero__characters {
  position: absolute;
  top: 53.7%;
  left: 25%;
  width: 340px;
  pointer-events: none;
}

.hero__promotion {
  position: absolute;
  right: 40px;
  bottom: 38px;
  width: 317px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  /* Approximation of the local photographic badge shadow. */
  box-shadow: 0 8px 16px rgb(0 0 0 / 15%);
  transition: opacity var(--mori-fade);
}

.hero__promotion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__notice {
  position: absolute;
  inset: 0 0 auto auto;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  width: 513px;
  min-height: 92px;
  padding: 12px 16px;
  color: var(--mori-ink);
  background: var(--mori-white);
  text-decoration: none;
  transition: opacity var(--mori-fade);
}

.hero__notice p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.hero__notice img {
  display: block;
  width: 76px;
  height: 66px;
  border-radius: 20px;
  object-fit: cover;
}

.hero__navigation {
  position: absolute;
  bottom: 35px;
  left: 46px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.hero__navigation > a:not(.mori-pill) {
  padding-bottom: 10px;
  border-bottom: 3px solid currentColor;
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

/* Feature cards preserve the measured stagger and title overlap. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 342px);
  gap: 110px 100px;
  width: min(100%, 784px);
  margin: 66px auto 0;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 299px;
  padding: 0 40px 47px;
  border-radius: var(--mori-feature-radius);
  color: inherit;
  background: var(--mori-wheat);
  text-decoration: none;
}

.service-card:nth-child(even) {
  transform: translateY(60px);
}

.service-card h3 {
  margin: -21px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.05em;
}

.service-card p {
  margin: 0;
  font-size: 17px;
  line-height: 32px;
}

.service-card__detail {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

/* Native horizontal scrolling is a recommended manual fallback. */
.works-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--mori-work-width);
  gap: var(--mori-work-gap);
  overflow-x: auto;
  padding: 38px max(
    25px,
    calc((100vw - var(--mori-content)) / 2)
  ) 12px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 25px;
}

.work-card {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}

.work-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--mori-photo-radius);
  object-fit: cover;
}

.work-card h3 {
  margin: 20px 0 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.05em;
}

.work-card p {
  margin: 0;
  font-size: 17px;
  line-height: 32px;
}

.mori-directory {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, var(--mori-directory-width));
  min-height: var(--mori-directory-height);
  margin-inline: auto;
  padding: 10px 64px;
  border: 3px solid var(--mori-ink);
  border-radius: 999px;
  color: var(--mori-ink);
  background: var(--mori-white);
  font-family: var(--mori-font-control);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.mori-directory::after {
  content: '';
  position: absolute;
  right: 18px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mori-ink);
}

.mori-directory::before {
  content: '';
  position: absolute;
  right: 27px;
  z-index: 1;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--mori-white);
}

.mori-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  color: var(--mori-white);
  background: var(--mori-green);
  font-family: var(--mori-font-control);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.mori-pill--line {
  background: var(--mori-line);
}

.mori-pill--outline {
  border-color: var(--mori-green);
  color: var(--mori-green);
  background: var(--mori-white);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px;
}

.editorial-grid h2 {
  font-size: 32px;
  line-height: 1;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.social-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.consultation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 334px;
  align-items: center;
  gap: 24px;
  padding-block: 80px 50px;
}

.consultation h2 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.03em;
}

.consultation p {
  margin: 0;
  font-size: 15px;
  line-height: 32px;
}

.consultation__actions {
  display: grid;
  gap: 20px;
}

.consultation__actions .mori-pill {
  min-height: 48px;
}

.footer-panel {
  padding: 55px 70px 75px;
  background: var(--mori-paper);
}

.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  padding-bottom: 40px;
}

.footer-sitemap a {
  color: inherit;
  font-size: 15px;
  line-height: 32px;
  text-underline-offset: 3px;
}

.footer-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
  padding-top: 35px;
  border-top: 1px solid var(--mori-rule);
}

.footer-copyright {
  font-family: var(--mori-font-copyright);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.06em;
}

.mobile-dock {
  display: none;
}

.mori-page :is(a, button):focus-visible {
  outline: var(--mori-focus-width) solid var(--mori-ink);
  outline-offset: 4px;
}

/* Recommended hover target; original opacity endpoint is unknown. */
@media (hover: hover) {
  .hero__notice:hover,
  .hero__promotion:hover {
    opacity: 0.8;
  }
}

/* Recommended intermediate-width adjustment. */
@media (min-width: 769px) and (max-width: 1100px) {
  .hero__navigation {
    right: 25px;
    left: 25px;
    flex-wrap: wrap;
    gap: 18px;
  }

  .hero__promotion {
    width: 220px;
    bottom: 140px;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 90px 40px;
  }

  .consultation {
    grid-template-columns: minmax(0, 1fr) 334px;
  }

  .consultation__illustration {
    display: none;
  }
}

/* Proposed breakpoint; not recovered from the original CSS. */
@media (max-width: 768px) {
  :root {
    --mori-work-width: 305px;
    --mori-work-gap: 20px;
    --mori-directory-height: 50px;
  }

  .mori-page {
    padding-bottom: calc(100px + var(--mori-safe-bottom));
    font-size: 14px;
    line-height: 26px;
  }

  .mori-intro h2 {
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 37px;
  }

  /* A capture-oriented reserve, not a measured hero-height rule. */
  .hero {
    min-height: 1040px;
  }

  .hero__collage {
    width: 100%;
  }

  .hero__foliage {
    width: 115px;
  }

  .hero__slogan {
    top: 595px;
    left: 35px;
    gap: 17px;
    font-size: 20px;
  }

  .hero__identity {
    top: 726px;
    left: 19px;
    width: 182px;
  }

  .hero__phone,
  .hero__navigation {
    display: none;
  }

  .hero__characters {
    top: 613px;
    right: 20px;
    left: auto;
    width: 210px;
  }

  .hero__promotion {
    top: 705px;
    right: -8px;
    bottom: auto;
    width: 155px;
  }

  .hero__notice {
    top: 853px;
    right: 0;
    left: 20px;
    width: auto;
    min-height: 66px;
    grid-template-columns: 59px minmax(0, 1fr) 20px;
    gap: 12px;
    padding: 8px;
  }

  .hero__notice img {
    width: 59px;
    height: 50px;
    border-radius: 14px;
  }

  .hero__notice p {
    font-size: 14px;
    line-height: 22.4px;
  }

  .service-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
    margin-top: 41px;
  }

  .service-card {
    gap: 17px;
    min-height: 249px;
    padding: 0 30px 30px;
  }

  .service-card:nth-child(even) {
    transform: none;
  }

  .service-card h3 {
    margin-top: -15px;
    font-size: 24px;
    line-height: 38px;
  }

  .service-card p {
    font-size: 14px;
    line-height: 29px;
  }

  .work-card h3 {
    padding-inline: 10px;
    line-height: 30px;
  }

  .work-card p {
    padding-inline: 10px;
    font-size: 17px;
    line-height: 32px;
  }

  .mori-directory {
    padding-inline: 45px;
    font-size: 14px;
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 20px;
  }

  .editorial-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .editorial-grid h2 {
    font-size: 21px;
  }

  .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consultation {
    grid-template-columns: minmax(0, 1fr);
    gap: 27px;
    padding-block: 60px 30px;
  }

  .consultation h2 {
    text-align: center;
  }

  .consultation p {
    font-size: 14px;
    line-height: 26px;
  }

  .consultation__illustration {
    display: none;
  }

  .consultation__actions .mori-pill {
    min-height: 50px;
  }

  .footer-panel {
    padding: 30px 20px;
    text-align: center;
  }

  .footer-sitemap {
    display: none;
  }

  .footer-identity {
    flex-direction: column;
    gap: 14px;
    padding-top: 0;
    border-top: 0;
  }

  .mobile-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: calc(66px + var(--mori-safe-bottom));
    padding-block: 10px calc(10px + var(--mori-safe-bottom));
    color: var(--mori-white);
    background: var(--mori-nav-green);
  }

  .mobile-dock > :is(a, button) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 0 8px;
    border: 0;
    color: inherit;
    background: transparent;
    font: 700 10px/1.2 var(--mori-font-body);
    text-decoration: none;
  }

  .mobile-dock > :is(a, button) + :is(a, button) {
    border-left: 3px solid rgb(255 255 255 / 15%);
  }

  .mobile-dock svg {
    width: 36px;
    height: 28px;
  }

  /* Optional appearance state; activation logic is unspecified. */
  .mobile-dock[data-layout='inset'] {
    right: 15px;
    bottom: calc(46px + var(--mori-safe-bottom));
    left: 15px;
    min-height: 66px;
    padding-block: 10px;
    border-radius: 10px;
  }
}

/* Recommended reduced-motion treatment for this adaptation. */
@media (prefers-reduced-motion: reduce) {
  .hero__notice,
  .hero__promotion {
    transition: none;
  }

  .works-rail {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}
```

Use real anchors for destinations and a real button for the menu trigger. Decorative arrows created by CSS should not supply the accessible name. Font loading, exact artwork, the menu implementation, rail controls, and any scroll-driven dock state remain separate integration work.

The mobile CSS intentionally illustrates the captured opening positions. For a more flexible production layout, replace those fixed offsets with an art-directed grid after testing the original composition at additional phone sizes. Keep that change documented as an adaptation.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original site uses Tailwind. Define the properties above first.

```css
@theme inline {
  --color-paper: var(--mori-paper);
  --color-wheat: var(--mori-wheat);
  --color-leaf: var(--mori-green);
  --color-line-action: var(--mori-line);
  --color-ink: var(--mori-ink);
  --color-nav-green: var(--mori-nav-green);

  --font-sans: var(--mori-font-body);
  --font-control: var(--mori-font-control);
  --font-copyright: var(--mori-font-copyright);

  --text-body: 17px;
  --text-body--line-height: 36px;
  --text-body-mobile: 14px;
  --text-body-mobile--line-height: 26px;
  --text-feature: 30px;
  --text-feature--line-height: 46px;
  --text-project: 20px;
  --text-project--line-height: 32px;

  --spacing-gutter: 25px;
  --spacing-column: 52px;
  --radius-feature: 50px;
  --radius-photo: 50px;
  --container-site: 1106px;
  --container-intro: 844px;
}
```

## Sources & Evidence

- **Inspected original and final website:** [MORI REFORM](https://mori-reform.jp/). The supplied browser record reports HTTP `200` and no change between original and final URLs.
- **Capture time:** `2026-10-04T20:36:00.036Z`, equivalent to October 5, 2026, 05:36 JST.
- **Desktop evidence:** supplied 1440 × 1000 opening, mid-page, and footer captures; rendered text, links, element rectangles, computed styles, and custom-property inventory. Document height is approximately `8636px`.
- **Mobile evidence:** supplied 390 × 844 opening and footer captures, plus the corresponding rendered DOM and computed styles. Document height is approximately `9286px`.
- **Confirmed destinations from the homepage:** company and service pages, project and story entries, small-renovation anchors, contact form, telephone, showroom directions, official messaging, social accounts, Renovation house 栞, and the top-of-page anchor. These are observed link targets; their destination pages were not inspected.
- **Inspection method limits:** initial observation lasted at least five seconds; readiness checks awaited loading, finite motion, sampled stability, and image decoding within stated time limits. Perpetual animations were paused during readiness checks and resumed afterward. SharedWorkers and service workers were disabled. These checks do not establish complete interaction behavior or exclude delayed content.
- **Unverified details:** menu contents and focus behavior, hover endpoints, carousel timing and controls, photo-sequence timing, exact responsive breakpoints, image source paths, artwork font identities, and the trigger for the mobile dock's alternate appearance.

This reference uses the supplied current-page evidence only. No additional browsing, command execution, destination-page inspection, or code testing was performed. The CSS and prompts are reusable implementation guidance, with estimates and recommendations distinguished from measurements.