# Morioka Eye Clinic — Style Reference

> Bright rooms, generous breathing space, and a precise flash of blue.

**Website:** [morioka-ganka.com](https://morioka-ganka.com/)
**Original URL:** https://morioka-ganka.com/
**Final URL:** https://morioka-ganka.com/
**Theme:** light in both supplied viewport observations; alternate themes were not evidenced.
**Inspected:** September 12, 2026; supplied retrieval timestamp `2026-09-12T07:02:48.812Z`, equivalent to 16:02:48.812 JST.
**Viewports:** desktop `1440 × 1000` CSS pixels; mobile `390 × 844` CSS pixels.
**Scope:** the current clinic homepage, including its opening composition, navigation, message, three navigation groups, four service entries, three environment stories, column previews, news, footer, and mobile appointment controls. Visual evidence comprises three desktop captures and two mobile captures; the supplied DOM adds measurements for sections outside those images. Linked pages and external booking flows were not inspected.

Morioka Eye Clinic presents healthcare through daylight, human conversation, and the architecture of its rooms. An almost-white ivory canvas supports warm charcoal text. Electric blue identifies the clinic and punctuates section labels, links, and outlined appointment buttons. Pale timber, frosted glass, soft cyan, and sky photography provide the broader palette without turning the interface into a collection of colored panels.

The page is a substantial clinic website homepage with several visitor tasks. It supports checking hours, finding the clinic, understanding treatment, reading educational material, and booking an appointment. Its visual rhythm alternates expansive photographs and quiet editorial text with more structured service cards and practical information. Desktop preserves a large photographic opening with a timetable fitted into its lower-right corner. Mobile separates the photograph, notice, and timetable, then keeps two compact actions close to the bottom of the screen.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Measurements belong to the recorded viewport and state; they are not automatically global CSS rules.
- **Derived** means arithmetic from those measurements, such as the 40px gap between two service cards.
- **Visual estimate** means a proportion or treatment judged from the attached captures. It is not a sampled color or inspected declaration.
- **Recommended** means guidance for a new implementation. The Quick Start is an adaptation, with its own selectors and explicitly chosen breakpoints.
- Token names below are descriptive aliases. Original custom-property identifiers are included where available.
- Some environment text rectangles are approximately 1.1 times their computed line dimensions. Those bounds may include a transform on an ancestor. Use the computed font sizes for typography and the settled screenshot for composition; the evidence does not establish the transform mechanism.
- Repeated notices, duplicate navigation text, and zero-height submenu elements occur in the DOM. They do not represent multiple visible copies of the same interface.

## Tokens — Colors

### Default Palette

| Name | Value | Implementation alias / source | Role and evidence |
| --- | --- | --- | --- |
| Ivory Canvas | `#fbfcf7` | `--color-canvas` / `--s-color-4aa69339` | Measured body background; also the environment and news sections. Source alpha is fully opaque. |
| Pale Section | `#f3f4ec` | `--color-section` | Measured service and column section backgrounds. A subtle green-gray shift separates long content regions. |
| Clinic Blue | `#0000f9` | `--color-blue` / `--s-color-2a95e1ae` | Measured section labels and service links; visually used by the brand and footer appointment outlines. |
| Warm Charcoal | `#423e3e` | `--color-ink` / `--s-color-d4975e00` | Measured reading text, navigation labels, and dark button fills. |
| White Surface | `#ffffff` | `--color-surface` / `--s-color-aeb3d007` | Measured service cards, column cards, and outlined button surfaces; reversed button text. |
| Light Gray | `#e5e5e5` | `--color-rule` / `--s-color-7583819d` | Measured desktop notice badge fill. Useful adaptation color for the fine dividers visible in the captures; individual divider colors were not supplied. |
| Notice Date | `#b2b1b1` | `--color-date` | Measured header/mobile notice dates and news-list dates. |
| Column Date | `#939393` | `--color-column-date` | Measured dates inside article previews. |
| Next-Page Veil | `rgba(1, 67, 115, 0.6)` | `--color-photo-veil` | Measured mobile footer link background; supplies a blue veil over its photograph. |

### Color Distribution

Ivory and photography occupy most of the page. Blue is highly saturated but spatially restrained: the logo, small English section labels, destination text, telephone links, and fine appointment outlines carry it. The primary desktop reservation button and both mobile dock buttons use charcoal rather than blue fills.

The footer's large blue field is visibly a photograph of sky and the clinic facade. It is not evidence of a flat blue section token or a CSS gradient. A fallback such as `#c3dafa` is a **recommended approximation only**, pending the actual image.

Several layout wrappers report `#333333`, and the document root reports black text. Visible child text usually overrides those defaults with charcoal. Likewise, the transparent `--g-color-*` properties do not prove a visible gradient system. Base the palette on rendered content and the explicit surface values above.

## Tokens — Typography

### Japanese Reading Text

**Measured family:** `'あおとゴシック R'`, referenced by source variable `--s-font-e794edd0`.

Paragraphs use this family at regular weight. Section and environment headings also declare it, often with computed `font-weight: 700`. These are the supplied declarations; the evidence does not reveal whether every requested weight resolves to a separate font file or synthesized weight.

The visual character is open and gentle, with generous line height and modest heading sizes. Body text is allowed to occupy a substantial part of each section without becoming a dense block.

### Japanese Navigation and Utility Text

**Measured family:** `'あおとゴシック M'`, referenced by `--s-font-e7bfbd9d`.

Used for navigation, notices, appointment labels, service destination labels, and column headings. Many utility labels compute to weight `400` even though the family name contains `M`; do not replace that declaration with an assumed numeric medium weight.

### English Section Labels and Dates

**Measured family:** `Roboto`, referenced by `--s-font-6197f9f1`.

English labels such as `MESSAGE`, `OUR SERVICE`, `CLINIC ENVIRONMENT`, `COLUMN`, and `NEWS` are small, blue, regular-weight labels with `0.1em` tracking. Numbered environment captions use the same family, for example `01 | Comfortable`. Column and news dates also use Roboto.

### Brand and Icons

The header identity is a graphic lockup. The measured 32px bold style on its otherwise text-empty H1 wrapper does not identify the lettering in that artwork. The white hero lockup combines the clinic symbol with `を拓く` and the small Roman caption `ME WO HIRAKU`; its font or asset format is not established by the supplied records.

The desktop Instagram control explicitly computes to `Font Awesome 6 Brands`, with an 18px glyph. A `Material Symbols Outlined` font declaration and labels including `add`, `launch`, and `phone_in_talk` appear in the rendered evidence. Preserve their simple plus, external-link, and telephone meanings; do not render the ligature strings as ordinary visible text.

The source also declares `'ゴシックMB101 R JIS2004'`. No sampled visible text in this evidence establishes its use, so it is not assigned a role here.

### Type Scale

All sizes and line heights below are measured computed values, before any ancestor transform.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Primary navigation | `17 / 23.8px` | Replaced by menu control | `400`, M family | `0.1em` |
| Desktop notice label and title | `15 / 15px` label; `15 / 21px` title | Label `12 / 12px`; title `14 / 19.6px` | `400`, M family | `0.05em` |
| Notice date | `15 / 21px` | `12 / 16.8px` | `400`, M family | `0.05em` |
| Header reservation label | `16 / 22.4px` | Dock label not measured | `400`, M family | `0.1em` |
| Mobile menu caption | Not visible | `10 / 14px` | `400`, M family | `0.1em` |
| English section label | `15 / 27px` | `12 / 21.6px` | `400`, Roboto | `0.1em` |
| Message heading | `26 / 41.6px` | `26 / 41.6px` | Desktop `700`; mobile `400`, R family | Desktop `0.05em`; mobile `0.03em` |
| Message paragraph | `17 / 30.6px` | `17 / 30.6px` | `400`, R family | Desktop `0.05em`; mobile normal |
| Service section heading | `26 / 41.6px` | `24 / 38.4px` | Desktop `700`; mobile `400`, R family | `0.05em` |
| Service-card heading | `24 / 38.4px` | `22 / 35.2px` | `700`, M family | Desktop `0.05em`; mobile `-0.03em` |
| Service paragraph | `17 / 30.6px` | `16 / 28.8px` | `400`, R family | `0.05em` |
| Service destination | `17 / 29.75px` | Same | `400`, M family | `0.05em` |
| Environment section heading | `28 / 44.8px` | `24 / 38.4px` | `700`, R family | `0.05em` |
| Environment story heading | `24 / 38.4px` | `20 / 32px` | `700`, R family | `0.05em` |
| Environment paragraph | `17 / 34px` | `15 / 30px` | `400`, R family | `0.05em` |
| Column heading | `20 / 32px` | Same | `700`, M family | `0.03em` |
| Column excerpt | `16 / 32px` | `15 / 30px` | `400`, R family | `0.03em` |
| Column/news date | `14 / 14px` | `12 / 12px` | `400`, Roboto | `0.1em` |
| News headline | `18 / 32.4px` | `16 / 28.8px` | `700`, R family | `0.05em` |
| Opening timetable note | `12 / 21.6px` | `14 / 25.2px` | `400`, M family | `0.1em` |
| Footer address and phone | Not sampled | `15 / 24px` | `400`, R family | `0.05em` |
| Footer explanatory notes | Not sampled | `14 / 22.4px` | `400`, R family | `0.05em` |

The mobile opening notes become larger, while several section labels become smaller. The responsive system is selective rather than a uniform scale reduction. Column and news section headings remain 26px on mobile.

**Recommended font fallback:** use a Japanese system sans-serif stack if the named source fonts are unavailable. Load the source families only through an appropriate licensed setup. Retain the size, spacing, and line-height relationships when substituting.

## Tokens — Spacing & Shapes

**Density:** very open at section level, moderate within reading blocks, compact within navigation and schedules.

There is no evidence of a single source spacing unit. Values such as 65px card padding and 133px section separation coexist with familiar 8px, 24px, and 32px intervals.

### Spacing Scale

| Use | Value | Evidence |
| --- | --- | --- |
| Desktop button label/icon gap | `3px` | Measured header action wrapper |
| Mobile notice date/title gap | `2px` | Measured notice item |
| Text/link icon gap | `8px` | Measured message and archive links |
| Header horizontal page inset | `20px` | Measured at both viewports |
| Column/news mobile page inset | `24px` | Measured card/list rectangles |
| Service mobile page inset | `32px` | Measured card rectangles |
| Mobile message page inset | `40px` | Measured 310px paragraph at x=40 |
| Section label to main heading | `32px` | Derived from message, service, column, and news positions |
| Service heading to paragraph | `30px` | Derived from card text positions |
| Service grid gap | Desktop `40px`; mobile `24px` | Derived from adjacent card rectangles |
| Column grid gap | Desktop `30px`; mobile `20px` | Derived from adjacent card rectangles |
| Column card padding | `40px` | Measured at both viewports |
| News row padding | `32px` | Measured at both viewports |
| Service card padding | Desktop `65px`; mobile `40px 32px 56px` | Measured |
| Message heading to body | `60px` | Derived at both viewports |
| Message body to link | `54px` | Derived at both viewports |
| Environment section top padding | `112px` | Measured at both viewports |
| Several section bottom clearances | `133px` | Derived from recorded section/content bounds; not universal |

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Hero frame | `8px` | Measured on desktop and mobile |
| Desktop notice badge | `4px` | Measured |
| Service cards | `0` | Measured |
| Column cards | `5px` | Measured |
| Header action pills | `9999px` | Measured |
| Instagram circle | `999px` | Measured |
| Mobile menu pill | `9999px` | Measured |
| Footer appointment pills | `64px` | Measured on mobile |
| Environment photograph | Approximately `5–6px` | Visual estimate from desktop story capture |

### Layout Measurements

| Element | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Document height | `10052.56px` | `12626.16px` | Measured; content and capture-state dependent |
| Initial header | `1400 × 126px`, x=20 | `350 × 84px`, x=20 | Measured |
| Header brand link | `230 × 39.70px` | `180 × 31.08px` | Measured graphic wrapper |
| Scrolled desktop header | Approximately `80px` high | Header absent from supplied footer capture | Visual observation; exact visibility logic unverified |
| Hero | `1400 × 850px`, x=20, y=128 | `350 × 396.23px`, x=20, y=88 | Measured |
| Desktop reservation pill | `132.80 × 36.39px` | — | Measured |
| Desktop contact-order pill | `174.78 × 36.39px` | — | Measured |
| Instagram control | `35 × 35px` | — | Measured |
| Mobile menu | — | `81.30 × 41px`, x=288.70, y=23 | Measured |
| Service grid | Two 540px columns; 40px gap | One 326px column | Measured/derived |
| Service card | `540 × 424.58px` | `326 × 370.58–399.38px` | Measured; mobile height varies with text |
| Column card | Approximately `346.28 × 292px` | `342 × 284px` | Measured |
| News list | `920px` wide | `342px` wide | Measured |
| First environment photograph | Approximately `671 × 447px`, x≈72 | Not visually captured | Desktop visual estimate |
| Mobile action dock | — | Two approximately `180 × 47px` pills; 6px gap, 12px outer clearance | Visual estimate |

## Components

### Site Header

**Role:** recognizable identity and fast access to recurring clinic tasks.

The initial desktop header has a blue graphic logo on the far left and a two-level utility region on the right. The notice occupies the upper line; navigation and appointment controls occupy the lower line. Navigation begins around x=538 at the recorded desktop width, leaving a deliberate expanse between the logo and menu.

The lower row contains `診療内容` and `私たちについて` with small plus marks, then `診療時間`, `アクセス`, a circular Instagram link, an outlined `コンタクト注文` pill, and a charcoal `WEB予約` pill. Navigation text uses 17px type and 0.1em tracking. The external-action pills use 6px vertical and 18px horizontal padding, plus a small external-link symbol.

In both scrolled desktop captures, a compact ivory header remains at the top and the notice row is absent. Its visible height is approximately 80px. The evidence supports these two states, but not a precise scroll threshold or a distinction between sticky and fixed implementation.

On mobile, the logo reduces to 180px wide and a dark pill replaces the desktop navigation. Two fine horizontal lines sit above the 10px `MENU` caption. The button's computed padding is `10px 24px 6px` with a 4px internal gap. No opened menu was supplied.

### Notice Strip

**Role:** surfaces an operational update without displacing the clinic identity.

Desktop uses a small gray `お知らせ` badge, a pale date, and a charcoal title on one line, above a fine horizontal rule. The badge is exactly `110 × 21px`, with a 4px radius and `3px 20px` padding. The visible example is the September temporary-surgery notice.

Mobile moves the notice below the hero. A narrow category column sits left of a vertical divider; the date and wrapping title sit to its right. The measured content item is 232px wide, with the date above the title and a 2px gap. Thin horizontal rules frame the strip. The capture places it approximately 32px below the photograph.

The DOM contains repeated items positioned horizontally outside the visible slot. This supports a carousel-like structure, but autoplay cadence, direction, swipe support, and pause behavior are unverified. Reproduce one coherent visible notice at rest; the repeated DOM text is not a visible multi-item list.

### Photographic Hero

**Role:** establishes an approachable clinic atmosphere before presenting detailed information.

A single large photograph sits inside an 8px-radius frame with 20px page gutters. The scene is bright and observational: a smiling child peeks around a pale timber partition, a clinician is cropped at the right edge, and a blue operating-room sign sits high in the background. Frosted glass and shallow focus create room for the white central lockup.

The composition relies on exposure and subject placement. The white lettering remains visually quiet over a luminous background; there is no observed heavy dark gradient, long paragraph, or large central booking button. Keep the white lockup as supplied artwork when available. Its exact font and file URL are unknown.

Desktop uses a wide `1400 × 850px` image region. Mobile becomes a portrait-like `350 × 396.23px` frame. The child remains toward the left, the sign stays high, and much of the clinician falls outside the crop. The evidence cannot distinguish an alternate source image from responsive cropping; either approach requires deliberate focal-point control.

### Opening Timetable

**Role:** gives a practical answer inside the first screen's visual hierarchy.

Desktop fits an ivory panel into the hero's lower-right corner. Its visually estimated footprint is about 586px wide, beginning around x=834 and y=773. The top-left corner is softly rounded, while the panel meets the image's bottom and right edges. It feels like a cutout in the photograph rather than an elevated floating card.

Inside, a compact schedule uses a time column followed by seven day columns. Solid top and bottom rules and dotted internal horizontal rules organize the rows. Filled circles, double-ring circles, dashes, and the source label `手術` distinguish entries. Small `13:00` annotations appear beneath the special morning markers. These details belong to the captured schedule, not a permanent medical-hours specification.

The visible table is approximately 450px wide on desktop. Below it, explanatory notes use measured 12px type with a 21.6px line height. On mobile the schedule moves below the notice, spans approximately 326px, and the notes increase to 14px with a 25.2px line height. The timetable itself is visible in the images but its cell semantics and asset format are not established by the DOM excerpt.

**Recommended implementation:** build a real table with row and column headers and textual meanings for every symbol. Maintain one underlying schedule data source for the opening and footer versions.

### Message Section

**Role:** introduces the clinic's approach with a calm reading interval.

A centered blue `MESSAGE` label leads into a modest Japanese heading, followed by a narrow paragraph block and a small text link. At desktop, the paragraph measures 498px wide; on mobile it measures 310px. The heading-to-paragraph gap is 60px in both observations, and the closing link begins 54px after the paragraph.

The source heading `目の健康寿命を延ばす / 地域に開かれた眼科クリニック` occupies two desktop lines and three mobile lines. Mobile retains the 26px size while changing the measured weight and tracking. Preserve readable line breaks and the generous vertical rhythm rather than shrinking the entire text block.

### Three Navigation Groups

**Role:** provides a broad route map before the symptom-oriented service section.

The DOM groups links under `診療内容`, `受診される方へ`, and `私たちについて`. Desktop places the groups side by side; mobile stacks them. Background-image declarations and white foreground text support a photographic navigation treatment, although these panels are not shown in the attached screenshots.

The category titles have tall, narrow measured boxes consistent with vertical Japanese text: desktop labels use 24px type with a 33.6px line height. The destination rows below are horizontal. Desktop rows measure approximately `239.61 × 56px`, with 10px padding and 20px labels. Mobile rows measure `262 × 65px`, with `16px 12px` padding and 18px labels.

Keep the category title and its three destinations together. This component is a set of related navigation groups; it should not become three unrelated promotional offers. Exact image subjects, overlay values, and hover appearances remain unverified.

### Service Card

**Role:** translates a visitor's concern into an appropriate treatment destination.

The pale section contains four white, square-cornered cards. Desktop uses a two-by-two arrangement inside a derived 1120px span. Each card is an actual link containing a heading, a short explanation, and a blue destination label near the bottom. The four contexts are uncertainty about seeking care, interest in surgery, a child's vision, and screening after age forty.

Desktop cards measure `540 × 424.58px` with 65px padding. The heading uses 24px M-family text; the paragraph uses 17px R-family text. A 30px gap separates them. The blue destination sits well below the paragraph, preserving a generous lower region instead of compressing everything into a tight text stack.

Mobile cards are 326px wide, with `40px 32px 56px` padding and a 24px vertical gap. Headings reduce to 22px and use measured negative tracking of `-0.03em`. Paragraphs reduce to 16px. Heights vary between approximately 371px and 399px, so do not force the mobile cards into a fixed desktop height.

The full card is the destination link. A nested interactive button is unnecessary. Specific decorative assets or hover transformations inside the cards are not established by the supplied images.

### Environment Story

**Role:** demonstrates the clinic's interpersonal and physical atmosphere.

The desktop capture of `01 | Comfortable` pairs a landscape consultation photograph with a narrow text column. The photograph is approximately 671px wide and 447px tall, positioned around x=72 and y=300 in that scrolled capture. Text begins around x=869, leaving roughly 126px between the image and copy. Broad empty space surrounds the pair.

The text anatomy is a blue numbered English caption, a two-line Japanese heading, and a paragraph. The recorded typography is `15 / 27px` for the caption, `24 / 38.4px` for the heading, and `17 / 34px` for the paragraph. The image shows a clinician listening to a seated patient, framed through the room's doorway, with pale wood and eye-examination equipment reinforcing the setting.

Two further stories, `02 | Support` and `03 | Space`, appear in the DOM. Their text discusses all generations and a relaxing environment. Their specific photographs are not visible in the attached captures and should not be invented as observed assets.

On mobile, the story text relocates to the left side of the page and uses 20px headings with 15px paragraphs. The supplied records support a stacked treatment, but the mobile photograph dimensions were not provided. The desktop environment section occupies approximately 3398px, while its mobile counterpart occupies approximately 2785px. These are expansive narrative sequences, not small feature cards.

### Column Preview

**Role:** offers educational content as a secondary browsing path.

Three article links appear across desktop and stack on mobile. Each measured card has a white surface, 5px corners, and 40px padding. The anatomy is date, two-line heading, and three-line excerpt. The measured text fills almost the entire inner height; no separate thumbnail slot is evidenced in these cards.

Desktop cards are approximately 346px wide and 292px tall, separated by 30px. Mobile cards retain a similar width of 342px and become 284px tall, separated by 20px. The heading stays at `20 / 32px`; only the date and excerpt become slightly smaller.

The source supplies visibly shortened titles and excerpts with ellipses. Whether truncation comes from content processing or CSS is unknown. For a new implementation, keep the full accessible title available even when the visual preview is shortened.

### News List

**Role:** presents operational notices in a quieter, more linear format.

A centered `NEWS` label and Japanese heading precede three wide links. The desktop list measures 920px across. Each row uses 32px padding, a small date above an 18px headline, and roughly 123–124px total height. The date is not a separate left-hand desktop column: the measured date and headline share the same left edge.

Mobile rows measure 342px wide and keep the 32px padding. Headlines reduce to 16px and wrap naturally; the longer entries increase to approximately 147px tall. The list ends with a compact blue archive link rather than a full-width filled CTA.

### Footer and Next-Page Link

**Role:** consolidates contact, schedule, site navigation, and the next suggested page.

The footer uses a large sky-and-building photograph across its full width. On desktop, a contact block starts around x=170 and the navigation block around x=823. The left block is approximately 505px wide; the right block approximately 447px. These are visual estimates from the footer capture.

The contact anatomy is blue logo, postal address with a small map link, telephone and fax, timetable, schedule/payment notes, and two outlined appointment pills. Telephone and payment-detail links are blue and underlined. The footer repeats practical information from the opening, allowing visitors to act after reading the whole page.

A short photographic link at the top of the right block contains a small arrow, `NEXT`, and `私たちについて` in white. Its desktop footprint is approximately `447 × 145px`. Mobile records measure a `342 × 180px` link with a blue translucent background. The mobile link element reports zero radius, while the desktop screenshot shows a softly rounded outer frame; do not assume one universal corner rule.

Desktop navigation forms three compact groups. Mobile places the next-page link and navigation before the contact block. Additional links wrap into a slash-separated sequence, followed by Instagram. The contact block then appears lower over the same sky photograph. This is a real visual reorder: the source text extraction alone lists contact information first, but the mobile element coordinates and screenshot establish the displayed order.

At the bottom, a small copyright line and `Designed by` label sit quietly near the left edge. The captures do not require a larger credit panel.

### Mobile Action Dock

**Role:** keeps the two principal practical actions available while reading.

Two charcoal pills float near the bottom: `診療時間・アクセス` and `WEB予約`, the latter with an external-link symbol. They appear in both mobile captures, including the footer. Each is approximately 180px wide and 47px tall; the gap is about 6px, with 12px side and bottom clearance.

There is a subtle shadow beneath the pills, visible against the pale page. A dock-specific shadow is appropriate; it does not imply a general shadow system for content cards. The combined hours/access control's activation result is not supplied. The reservation destination is present in the rendered links.

### Eye Motif

A small circular motif with two eyes and surrounding Japanese text appears at the lower-right of the desktop environment capture. Its total diameter is approximately 120px. It adds a restrained playful note that connects directly to the clinic's subject.

Its click behavior, pointer response, rotation, and visibility rules are unverified. Treat it as an observed visual motif, not evidence of a symptom checker or interactive assistant.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| General element transitions | Measured `0.3s cubic-bezier(0.4, 0.4, 0, 1)` on many elements | A shared transition declaration exists. It does not identify the changed property or triggering event for every component. |
| Body background | Measured `background 0.5s cubic-bezier(0.4, 0.4, 0, 1)` | A background transition is declared; no alternate page theme was observed. |
| Desktop service cards | Measured `0.8s` transition with `0.3s` delay | Longer delayed transitions are configured. Reveal direction, opacity endpoints, and trigger are unknown. |
| Mobile service cards | Measured general 300ms cubic-bezier transition | The sampled mobile declaration differs from desktop. |
| Header compaction | Initial and scrolled desktop screenshots differ | Notice disappears and header becomes shorter; threshold and animation sequence are unverified. |
| Notice track | Repeated links occupy offscreen horizontal positions | Consistent with a looping track; autoplay, timing, and manual controls were not exercised. |
| Environment geometry | Some text bounds are about 1.1× computed dimensions | A transformed state may affect bounds; no scroll-linked scale animation can be specified from this alone. |
| Menu and plus controls | Visible affordances; submenu entries have zero-height bounds in desktop sample | Collapsed content exists. Opening, focus movement, hover triggers, and dismissal were not tested. |
| Eye motif | One static desktop capture | Motion and interaction are unknown. |
| Reservation, telephone, map, and content links | Destinations present in rendered DOM | Link intent is supported; destination interfaces and completion flows were not inspected. |

The supplied capture process waited for document load, finite animations, layout/text stability, and visible image decoding within bounded time limits. Perpetual animations were temporarily paused during readiness checks and resumed afterward. This procedure improves the usefulness of the still images but is not a motion recording.

**Recommended adaptation:** use restrained color and opacity feedback with the measured 300ms easing. Keep content visible by default. Add larger reveals only after their behavior has been specified and validated, and provide a reduced-motion alternative. No parallax, image slideshow, cursor-following eyes, or menu choreography should be claimed as a verified feature here.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Solid ivory `#fbfcf7` | Connects the header, reading sections, and image margins |
| Section field | Pale `#f3f4ec` | Separates service and educational-content regions |
| Service card | White, square corners | Gives each visitor concern a distinct destination |
| Column card | White, 5px corners | Contains compact editorial previews |
| Opening hours panel | Ivory, fitted to the image corner | Introduces practical information without a floating-card effect |
| Main action | Charcoal pill with white text | Signals booking and persistent mobile tasks |
| Secondary appointment action | White pill with blue outline/text | Offers booking and telephone choices in the footer |
| Photo navigation | Image with white labels; blue veil evidenced on footer link | Connects destination content with the clinic's physical setting |
| Footer | Continuous sky/facade photograph | Supplies a spacious final contact environment |

Borders are fine, corners are modest except on controls, and depth is minimal. The strongest separations come from whitespace, photography, subtle surface changes, and charcoal action shapes.

## Imagery

The current captures show bright, natural clinic photography with soft shadows and restrained saturation. Pale timber contributes warmth; frosted glass and blue signage contribute freshness. Human subjects appear in ordinary clinic situations rather than isolated portrait cutouts.

The hero photograph places the child low and left of center, using the surrounding architecture as negative space. The consultation photograph is framed through a doorway, letting the observer feel near the room without crowding the conversation. The footer photograph shows a diagonal building edge rising through the lower-right region beneath a broad sky. These compositions give the interface a sense of openness and location.

### Observed Asset References

| Asset | Evidence | Implementation guidance |
| --- | --- | --- |
| Blue clinic logo | Desktop/mobile header and footer | Preserve the geometric mark, Japanese lettering, and small Roman subtitle as one authorized asset. |
| White hero lockup | Desktop/mobile hero | Preserve the symbol, white lettering, tracking, and relative scale. Font and URL unknown. |
| Child in clinic interior | Desktop/mobile opening captures | Supply responsive crops that retain the face, timber partition, and blue sign. |
| Consultation photograph | Desktop environment capture | Use approximately 3:2 framing; preserve the clinician/patient relationship and room context. |
| Sky and clinic facade | Desktop/mobile footer captures | Retain enough sky behind contact text and reserve the facade for the lower region. |
| Next-page building photograph | Desktop footer capture | Use a short wide crop with a blue veil and white destination text. |
| Eye motif | Desktop environment capture and eye text in DOM | Preserve as a small supporting visual; its behavior is unspecified. |

Complete URLs for these major assets were not supplied. Some DOM text includes truncated storage URLs and background-image declarations; they are not reliable downloadable asset references. Do not invent filenames or infer a particular photo from a truncated path.

**Recommended production handling:** use authorized images, reserve aspect ratios before loading, and provide separate focal positions or sources where mobile cropping needs them. Keep the logo and campaign lettering separate from photographic compression. Use ordinary smooth image rendering; this design has no pixel-art treatment.

## Layout & Responsive Behavior

### Page Sequence

The rendered homepage follows this order: opening photograph and operational information, message, three navigation groups, service guidance, environment stories, column previews, news, and footer. Desktop document height is approximately 10,053px; mobile is approximately 12,626px. These measurements describe this content snapshot and should not be recreated as fixed page heights.

### Desktop

The opening nearly fills the initial viewport while retaining a 20px frame. Content below changes width according to purpose: approximately 500px for the message, 1120px for the service grid, 1100px for the column grid, and 920px for news. The environment image/copy pair spreads farther across the page, with broad negative space and a visibly narrow reading column.

The service layout is two columns; navigation groups and column previews use three. News remains a single vertical list. The footer returns to two unequal columns. These distinct widths and densities are part of the hierarchy; a single universal card grid would flatten it.

### Mobile

- Header navigation becomes a small menu pill while the brand remains fully visible.
- The photograph keeps 20px side gutters and changes crop and aspect ratio.
- Notice and timetable move into the document flow below the hero.
- Message text retains 17px body type and gains more line breaks.
- Navigation groups, service cards, and column previews stack vertically.
- Service cards use 32px page gutters; column/news content uses 24px; message paragraphs use 40px.
- Environment text becomes a narrow-screen reading block with smaller headings and body text; its mobile imagery was not visually supplied.
- Footer navigation precedes the contact block, and secondary destinations wrap into slash-separated links.
- The two dark action pills remain visible near the bottom in both supplied mobile states.

A partial source media rule references `max-width: 1140px` for line-break visibility. This is evidence of one responsive threshold, not proof that all component layouts switch there. No tablet or landscape-mobile viewport was supplied.

### Responsive Implementation Implications

Keep image crop decisions independent of type scaling. Preserve the distinct 20px, 24px, 32px, and 40px mobile insets where they support the composition. Let card and news-row heights grow with content. Add bottom clearance for the action dock and test at enlarged text sizes; in the supplied opening capture, the dock occupies part of the lower note region.

The CSS below chooses `70rem` for navigation/hero rearrangement and `48rem` for content stacking. These are recommended starting points, not recovered source breakpoints.

## Do’s and Don’ts

### Do

- Keep the main canvas exact at `#fbfcf7` and the blue accent exact at `#0000f9`.
- Use charcoal for reading text and the main filled appointment controls.
- Let photographs carry scale, warmth, and the physical identity of the clinic.
- Preserve small tracked English labels above modest Japanese headings.
- Maintain body line heights around 1.8–2, with narrow readable columns.
- Fit the desktop timetable into the hero's lower-right corner and move it below the image on mobile.
- Preserve square service cards and the subtler 5px corners of column cards.
- Keep each service concern linked to a clear destination.
- Retain multiple routes to hours, access, and booking throughout the page.
- Keep the footer's photographic sky readable behind practical information.
- Use the eye motif sparingly as a small expression of the clinic's subject.

### Don’t

- Do not replace the gentle heading scale with oversized heavy marketing typography.
- Do not spread the saturated blue across every card or section background.
- Do not give all content the same rounded-card treatment.
- Do not replace the sky photograph with an unexplained generic gradient.
- Do not crop the child's face or place hero text across the clinician's body.
- Do not infer the logo's font from its empty H1 wrapper.
- Do not copy offscreen notice repetitions into the visible layout.
- Do not shrink every mobile text role by the same percentage.
- Do not force mobile cards into fixed heights or hide wrapped notices.
- Do not infer interaction behavior from plus signs, eye artwork, or a transition declaration alone.
- Do not treat the timetable as a purely decorative image in a new implementation.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the current site.

- Give the logo link an accessible clinic name and the hero lockup an equivalent text alternative if its message is meaningful.
- Preserve a semantic heading hierarchy. Some mobile visual headings appear as paragraph elements in the supplied DOM; an adaptation can retain their appearance with H2 elements.
- Use real table headers, a caption, and accessible explanations for timetable markers. Provide a readable alternative if the seven-day layout becomes too small.
- Increase menu, social, and appointment target areas to at least 44px without unnecessarily enlarging the visible artwork. Several measured source controls are smaller.
- Implement menu state with `aria-expanded`, an explicit controlled region, keyboard access, and appropriate focus handling. Choose the interaction model before adding motion.
- Keep notice clones outside the accessibility tree and tab order if a looping track is implemented. Offer a stable presentation under reduced motion.
- Provide visible focus states and underlines for text links. Strengthen the light date colors where necessary for readable contrast.
- Reserve safe-area-aware clearance below content for the mobile dock, including when text is enlarged.
- Keep booking, telephone, and map destinations as appropriately named links. Distinguish an external destination in its accessible description when useful.
- Load the opening photograph promptly, defer lower photographs, and reserve image dimensions to prevent layout shifts.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#fbfcf7`.
- Alternating service/column sections: `#f3f4ec`.
- Text and filled action pills: `#423e3e`.
- Brand, section captions, and destination links: `#0000f9`.
- Cards and outlined-button surfaces: `#ffffff`.
- Desktop notice badge: `#e5e5e5`.
- Footer next-page photo veil: `rgba(1, 67, 115, 0.6)`.
- Sky blue comes primarily from photography; no exact flat sky token was established.

### Overall Prompt

“Create a Japanese eye-clinic homepage inspired by the current Morioka Eye Clinic reference. Use an ivory `#fbfcf7` canvas, warm charcoal `#423e3e` text, and precise electric-blue `#0000f9` accents. Lead with a bright clinic photograph inside 20px gutters and an 8px-radius frame, with a small white graphic statement centered over open architectural space. Place a compact timetable in an ivory lower-right cutout on desktop. Use gentle Japanese sans-serif typography, 24–28px section headings, 16–17px body text, generous 1.8–2 line heights, and small tracked blue English labels. Follow with a narrow message, grouped navigation, four square white service cards on a pale field, spacious photograph-and-copy environment stories, compact article cards, news, and a sky-and-building footer. On mobile, move the notice and timetable below the photograph, stack content, and retain two charcoal appointment/access pills near the bottom.”

### Example Component Prompts

1. **Header and opening:** “Use a blue graphic clinic identity at left and compact Japanese navigation at right. Put a light-gray notice badge and one dated update above the desktop navigation. Follow with a luminous clinic photograph. Keep the reservation pill charcoal, the contact-order pill white with a fine outline, and the social control circular. On mobile show a small charcoal MENU pill and relocate the notice below the image.”
2. **Timetable:** “Create a compact clinic schedule with a time column and seven day columns. Use charcoal circles, double-ring markers with small annotations, dashes, fine solid outer horizontal rules, and dotted internal rules. Use an accessible HTML table. Place it in an ivory corner panel on desktop and in normal flow on mobile.”
3. **Service card:** “Create a whole-card treatment link with square corners and a white fill on `#f3f4ec`. Use 65px desktop padding, a 24px Japanese heading, a 17px explanatory paragraph 30px below it, and a small blue destination near the bottom. Mobile uses a 326px-wide card at a 390px viewport, `40px 32px 56px` padding, and natural content height.”
4. **Environment story:** “Pair a bright 3:2 consultation photograph on the left with a roughly 400px reading column on the right. Use a small blue numbered English caption, a quiet two-line Japanese heading, and generously spaced body text. Preserve broad ivory margins and pale timber/glass imagery. Stack the pair on mobile. Treat animation as a separate specification.”
5. **Footer and mobile dock:** “Place clinic contact details and a compact schedule over a broad pale-sky photograph with the building entering from the lower right. Use blue telephone links and two white appointment pills with blue outlines. On desktop place the next-page image link and grouped site navigation alongside. On mobile show navigation before contact details and retain a separate pair of dark bottom action pills.”

## Quick Start

### CSS Custom Properties

This CSS is a reusable adaptation, not the original stylesheet. Exact colors and type roles follow the supplied measurements. Responsive formulas, header state selectors, focus styles, hover feedback, dock clearance, and the sky fallback are recommendations. The example uses CSS Grid even where source elements report Flexbox.

Suggested component hierarchy:

```text
body.clinic-page
  header.site-header
    div.header-inner
      a.brand
      nav.primary-nav
      button.menu-toggle
  main
    div.opening
      aside.notice
      section.hero
        img.hero-photo
        img.hero-lockup
      aside.hours-panel
        table.hours-table
        p.hours-note
    section.message
    section.section.services
      div.section-heading
      div.service-grid
        a.service-card
    section.section.environment
      article.environment-story
        img.environment-photo
        div.environment-copy
    section.section.columns
      div.column-grid
        a.column-card
    section.section.news
      div.news-list
        a.news-row
  footer.clinic-footer
    img.footer-photo
    div.footer-inner
      div.footer-contact
      div.footer-nav
    p.footer-credit
  nav.mobile-dock
```

Supply authorized image sources and meaningful HTML content. Menu expansion and the optional `data-header-compact` state need application behavior; this stylesheet does not invent those interactions. The notice is a single element positioned above desktop navigation and returned to normal flow on mobile.

```css
:root {
  /* Measured source colors */
  --color-canvas: #fbfcf7;
  --color-section: #f3f4ec;
  --color-ink: #423e3e;
  --color-blue: #0000f9;
  --color-surface: #ffffff;
  --color-rule: #e5e5e5;
  --color-date: #b2b1b1;
  --color-column-date: #939393;
  --color-photo-veil: rgba(1, 67, 115, 0.6);

  /* Recommended fallback until a footer photograph is supplied */
  --color-sky-fallback: #c3dafa;

  /* Source family names with recommended fallbacks */
  --font-reading: 'あおとゴシック R', 'Hiragino Kaku Gothic ProN',
    'Yu Gothic', sans-serif;
  --font-ui: 'あおとゴシック M', 'Hiragino Kaku Gothic ProN',
    'Yu Gothic', sans-serif;
  --font-latin: Roboto, Arial, sans-serif;

  --text-body: 17px;
  --text-section: 26px;
  --text-label: 15px;
  --leading-body: 1.8;
  --leading-heading: 1.6;
  --tracking-body: 0.05em;
  --tracking-label: 0.1em;

  --space-icon: 8px;
  --space-page: 20px;
  --space-card-gap: 40px;
  --space-label-heading: 32px;
  --space-heading-body: 30px;
  --radius-photo: 8px;
  --radius-column: 5px;
  --radius-pill: 9999px;
  --width-services: 1120px;
  --width-columns: 1100px;
  --width-news: 920px;
  --header-height: 126px;

  /* Measured easing, applied only to selected feedback properties */
  --motion-ui: 300ms cubic-bezier(0.4, 0.4, 0, 1);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

.clinic-page {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-reading);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.clinic-page img { display: block; max-width: 100%; }
.clinic-page button { font: inherit; cursor: pointer; }
.clinic-page a { color: inherit; text-underline-offset: 0.2em; }
.clinic-page a:focus-visible,
.clinic-page button:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 4px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  background: var(--color-canvas);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-height);
  margin-inline: var(--space-page);
}

.brand { flex: 0 0 230px; }
.brand img { width: 230px; height: auto; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 42px;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.primary-nav > a { white-space: nowrap; text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 6px; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 18px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color var(--motion-ui), background-color var(--motion-ui);
}

.pill.pill-dark {
  color: var(--color-surface);
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.pill.pill-blue { color: var(--color-blue); padding: 8px 20px; }
.social-link { width: 35px; height: 35px; padding: 0; }
.menu-toggle { display: none; }

/* Optional compact state: application code determines when it applies. */
.clinic-page[data-header-compact='true'] { --header-height: 80px; }
.clinic-page[data-header-compact='true'] .primary-nav { margin-top: 0; }

.opening { position: relative; margin-top: 128px; }

.notice {
  position: absolute;
  z-index: 31;
  top: -108px;
  right: 30px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  width: min(872px, calc(100% - 360px));
  padding-block: 6px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
}

.notice-label {
  padding: 3px 20px;
  border-radius: 4px;
  background: var(--color-rule);
  text-align: center;
  line-height: 1;
  text-decoration: none;
}

.notice-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}

.notice-item time { flex: none; color: var(--color-date); }
.notice-title { overflow-wrap: anywhere; }

.hero {
  position: relative;
  height: clamp(640px, 85svh, 900px);
  margin-inline: var(--space-page);
  overflow: hidden;
  border-radius: var(--radius-photo);
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focal, 50% 50%);
}

.hero-lockup {
  position: absolute;
  top: 47%;
  left: 50%;
  width: clamp(180px, 22vw, 320px);
  height: auto;
  transform: translate(-50%, -50%);
}

.hours-panel {
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 586px;
  padding: 30px 30px 14px;
  border-radius: 8px 0 8px 0;
  background: var(--color-canvas);
}

.hours-table {
  width: min(450px, 100%);
  border-collapse: collapse;
  border-block: 1px solid var(--color-ink);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
}

.hours-table th,
.hours-table td { padding: 7px 3px; font-weight: 400; }
.hours-table tr + tr,
.hours-table tbody { border-top: 1px dotted var(--color-ink); }
.hours-table th:first-child { white-space: nowrap; }
.hours-note { margin: 8px 0 0; font: 12px/1.8 var(--font-ui); letter-spacing: 0.1em; }

.eyebrow {
  margin: 0;
  color: var(--color-blue);
  font: 400 var(--text-label)/1.8 var(--font-latin);
  letter-spacing: var(--tracking-label);
}

.section-heading { margin-bottom: 54px; text-align: center; }
.section-heading h2,
.message h2 {
  margin: 32px 0 0;
  font-size: var(--text-section);
  line-height: var(--leading-heading);
  letter-spacing: 0.05em;
}

.message { padding: 159px 40px 200px; text-align: center; }
.message-copy { max-width: 498px; margin: 60px auto 0; }
.message-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 54px; }
.section { padding: 151px 0 133px; }
.services,
.columns { background: var(--color-section); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  width: min(var(--width-services), calc(100% - 64px));
  margin-inline: auto;
}

.service-card {
  display: flex;
  flex-direction: column;
  min-height: 424.58px;
  padding: 65px;
  background: var(--color-surface);
  text-decoration: none;
}

.service-card h3 {
  margin: 0;
  font: 700 24px/1.6 var(--font-ui);
  letter-spacing: 0.05em;
}

.service-card p { margin: 30px 0 0; }
.service-card .service-destination {
  margin-top: auto;
  padding-top: 48px;
  color: var(--color-blue);
  font: 400 17px/1.75 var(--font-ui);
}

.environment { padding-top: 112px; }
.environment > .section-heading h2 { font-size: 28px; }

.environment-story {
  display: grid;
  grid-template-columns: minmax(0, 671px) minmax(0, 400px);
  align-items: center;
  gap: clamp(48px, 8.75vw, 126px);
  width: min(1296px, calc(100% - 80px));
  min-height: 100svh;
  margin-inline: auto;
}

.environment-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.environment-copy h3 { margin: 12px 0 30px; font-size: 24px; line-height: 1.6; }
.environment-copy > p:last-child { margin: 0; line-height: 2; }

.column-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  width: min(var(--width-columns), calc(100% - 48px));
  margin-inline: auto;
}

.column-card {
  min-width: 0;
  min-height: 292px;
  padding: 40px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-column);
  background: var(--color-surface);
  text-decoration: none;
}

.column-card time,
.news-row time { display: block; font: 14px/1 var(--font-latin); letter-spacing: 0.1em; }
.column-card time { color: var(--color-column-date); }
.column-card h3 { margin: 12px 0 24px; font: 700 20px/1.6 var(--font-ui); letter-spacing: 0.03em; }
.column-card p { margin: 0; font-size: 16px; line-height: 2; letter-spacing: 0.03em; }

.news-list { width: min(var(--width-news), calc(100% - 48px)); margin-inline: auto; }
.news-row { display: block; padding: 32px; border-top: 1px solid var(--color-rule); text-decoration: none; }
.news-row:last-child { border-bottom: 1px solid var(--color-rule); }
.news-row time { color: var(--color-date); }
.news-row h3 { margin: 12px 0 0; font-size: 18px; line-height: 1.8; }

.clinic-footer {
  position: relative;
  min-height: 920px;
  padding: 120px 0 24px;
  background: var(--color-sky-fallback);
}

.footer-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.footer-inner { position: relative; display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: clamp(48px, 10.28vw, 148px); width: min(1100px, calc(100% - 48px)); margin-inline: auto; }
.footer-contact { min-width: 0; }
.footer-contact address { margin-block: 30px; font-style: normal; }
.footer-contact .hours-table { width: 100%; }
.footer-contact .footer-text-link { color: var(--color-blue); text-decoration: underline; }
.footer-notes { font-size: 14px; line-height: 1.6; }
.footer-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.footer-credit { position: relative; width: min(1260px, calc(100% - 64px)); margin: 240px auto 0; font-size: 10px; line-height: 1.8; }
.mobile-dock { display: none; }

/* Recommended feedback; original hover endpoints were not supplied. */
@media (hover: hover) {
  .pill-dark:hover { background: var(--color-blue); border-color: var(--color-blue); }
  .service-card:hover h3,
  .column-card:hover h3,
  .news-row:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; }
}

/* Recommended breakpoint for navigation and opening rearrangement. */
@media (max-width: 70rem) {
  .site-header { position: relative; }
  .header-inner { min-height: 84px; }
  .brand { flex-basis: 180px; }
  .brand img { width: 180px; }
  .primary-nav { display: none; }
  .menu-toggle {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 10px 24px 6px;
    border: 0;
    border-radius: var(--radius-pill);
    color: white;
    background: var(--color-ink);
    font: 10px/1.4 var(--font-ui);
    letter-spacing: 0.1em;
  }
  .menu-lines { width: 32px; height: 7px; border-block: 1px solid currentColor; }
  .opening { display: flex; flex-direction: column; margin-top: 4px; }
  .hero { order: 0; height: auto; aspect-ratio: 350 / 396.234375; }
  .hero-lockup { top: 50%; width: 175px; }
  .notice {
    position: static;
    order: 1;
    width: calc(100% - 64px);
    margin: 32px auto 0;
    padding-block: 12px;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--color-rule);
  }
  .notice-label { align-self: stretch; display: grid; place-items: center; padding: 0 8px; border-right: 1px solid var(--color-rule); border-radius: 0; background: transparent; font-size: 12px; }
  .notice-item { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding-inline: 16px 8px; font-size: 14px; }
  .notice-item time { font-size: 12px; }
  .hours-panel { position: static; order: 2; width: calc(100% - 64px); margin: 32px auto 0; padding: 0; border-radius: 0; }
  .hours-table { width: 100%; font-size: 10px; }
  .hours-note { font-size: 14px; }
  .mobile-dock {
    position: fixed;
    z-index: 40;
    right: 12px;
    bottom: calc(12px + var(--safe-bottom));
    left: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .mobile-dock .pill { min-height: 47px; padding: 10px 6px; font-size: 14px; box-shadow: 0 2px 5px rgb(66 62 62 / 18%); }
  .clinic-page { padding-bottom: calc(84px + var(--safe-bottom)); }
}

/* Recommended content breakpoint; measured phone values applied here. */
@media (max-width: 48rem) {
  :root { --text-label: 12px; }
  .message { padding: 107px 40px 72px; }
  .message h2 { font-weight: 400; letter-spacing: 0.03em; }
  .message-copy { letter-spacing: normal; }
  .section { padding: 131px 0 133px; }
  .service-grid { grid-template-columns: 1fr; gap: 24px; }
  .services .section-heading h2 { font-size: 24px; font-weight: 400; }
  .service-card { min-height: 0; padding: 40px 32px 56px; }
  .service-card h3 { font-size: 22px; letter-spacing: -0.03em; }
  .service-card p { font-size: 16px; }
  .service-card .service-destination { margin-top: 48px; padding-top: 32px; }
  .environment > .section-heading h2 { font-size: 24px; }
  .environment-story { grid-template-columns: 1fr; gap: 32px; width: calc(100% - 48px); min-height: 0; padding-block: 64px; }
  .environment-copy h3 { margin-bottom: 12px; font-size: 20px; }
  .environment-copy > p:last-child { font-size: 15px; }
  .column-grid { grid-template-columns: 1fr; gap: 20px; }
  .column-card { min-height: 284px; }
  .column-card p { font-size: 15px; }
  .column-card time,
  .news-row time { font-size: 12px; }
  .news-row h3 { font-size: 16px; }
  .clinic-footer { padding-top: 64px; }
  .footer-inner { grid-template-columns: 1fr; gap: 80px; }
  .footer-nav { order: 0; }
  .footer-contact { order: 1; font-size: 15px; line-height: 1.6; }
  .footer-credit { margin-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .clinic-page *,
  .clinic-page *::before,
  .clinic-page *::after { transition: none !important; animation: none !important; }
}
```

The hero height formula reproduces 850px at the inspected desktop height but is not a recovered source formula. The mobile image ratio likewise matches the observed phone frame, not a verified rule for every device. Calibrate actual images and intermediate widths before using either in production. The schedule's 10px adaptation is only a compact starting point; provide an enlarged readable presentation where needed.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the custom properties above first. This mapping does not imply that the original website uses Tailwind.

```css
@theme inline {
  --color-clinic-canvas: var(--color-canvas);
  --color-clinic-section: var(--color-section);
  --color-clinic-ink: var(--color-ink);
  --color-clinic-blue: var(--color-blue);
  --color-clinic-surface: var(--color-surface);
  --color-clinic-rule: var(--color-rule);

  --font-clinic-reading: var(--font-reading);
  --font-clinic-ui: var(--font-ui);
  --font-clinic-latin: var(--font-latin);

  --text-clinic-body: 17px;
  --text-clinic-label: 15px;
  --text-clinic-heading: 26px;
  --text-clinic-card: 24px;

  --spacing-clinic-page: 20px;
  --spacing-clinic-mobile-content: 32px;
  --spacing-clinic-card: 65px;
  --spacing-clinic-grid: 40px;

  --radius-clinic-photo: 8px;
  --radius-clinic-column: 5px;
  --radius-clinic-pill: 9999px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [Morioka Eye Clinic](https://morioka-ganka.com/). Both supplied URLs are identical; the recorded response status is HTTP 200.
- **Capture date:** September 12, 2026. Supplied retrieval timestamp: `2026-09-12T07:02:48.812Z`.
- **Desktop evidence:** `1440 × 1000` CSS-pixel observation; opening, first environment story, and footer screenshots; supplied document height approximately 10,053px.
- **Mobile evidence:** `390 × 844` CSS-pixel observation; opening and footer screenshots; supplied document height approximately 12,626px.
- **Rendered data:** visible page text, link destinations, custom properties, computed typography, backgrounds, spacing, radii, transitions, and element bounds supplied for both viewports. The element lists are excerpts rather than complete asset or accessibility inventories.
- **Observed states:** settled opening compositions and selected scrolled positions. Captures establish desktop header compaction and mobile bottom-action persistence across the supplied states. No menu opening, hover sequence, keyboard navigation, booking completion, or eye-motif interaction was provided.
- **Inspection limitations:** analysis used only the supplied original-page captures and rendered evidence. No additional browsing, commands, or file access were performed. Image URLs for major visual assets, intermediate breakpoints, exact scroll offsets, animation timelines, and destination-page behavior remain unverified. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current homepage in the supplied September 12, 2026 evidence. Visual estimates and implementation recommendations are explicitly separated from measured source values.