# Musashinitta Cocoro Clinic — Style Reference

> A quiet blue clinic website where a cat-shaped speech bubble makes conversation feel approachable.

**Website / original URL:** [musashinitta-cocoro.com](https://musashinitta-cocoro.com/)
**Final URL:** [https://musashinitta-cocoro.com/](https://musashinitta-cocoro.com/)
**Theme:** light, with pale blue, white, and occasional deep-blue sections
**Inspected:** September 12, 2026, at 06:50:18 UTC / 15:50:18 JST
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels
**Scope:** the current clinic homepage, including its illustrated hero, introduction, clinical information, symptom categories, access information, and footer. Evidence consists of five supplied desktop/mobile captures and rendered DOM/computed-style observations. Linked pages, an open mobile menu, and completed reservation flows were not inspected.

Musashinitta Cocoro Clinic uses a restrained blue palette, generous empty space, and friendly line illustrations to introduce psychiatric and psychosomatic care. The central identity is a cat merged with a speech bubble: rounded ears, three conversation dots, and an open, curved tail. This motif appears at very different scales, from the small header mark to the oversized footer illustration.

The desktop opening is an asymmetric composition around a centered circular illustration. A navigation rail occupies the left edge, Japanese copy runs vertically on the right, and two large circles communicate station proximity and online reservations. Mobile rearranges these parts: the illustration nearly fills the width, the message becomes horizontal beneath it, and a compact telephone/reservation bar remains at the bottom. The rest of the page provides a long, carefully paced route through the clinic's approach, practical information, and symptom guidance.

## How to Read This Reference

- **Measured** values come directly from the supplied rendered rectangles or computed styles. Measurements describe the two inspected viewports, not an inferred universal formula.
- **Estimated** values describe screenshot geometry or visual qualities for elements without supplied bounds or styles. They are marked explicitly.
- **Calculated** values are simple relationships between measurements, such as a paragraph measuring 22 times its font size.
- **Recommended** values and behaviors support a new implementation. They do not establish how the original site was coded.
- Token names are implementation aliases. The supplied custom-property inventory mainly contains generic publishing-system presets; their presence does not prove those colors, gradients, shadows, or sizes are used visibly.
- The captures show the desktop hero, the beginning of the symptom section, and the footer, plus the mobile hero and footer. Intermediate sections have substantial DOM evidence but less visual coverage.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Observed role |
| --- | --- | --- | --- |
| Pale Blue Canvas | `#DDEBF3` | `--color-canvas` | Measured BODY background on both viewports; the main visual field around the hero, access area, and section transitions |
| Clinic Blue | `#395CA3` | `--color-ink` | Measured text color, logo fill declaration, strong detail button, and mobile information-section background |
| Soft Action Blue | `#77AFD9` | `--color-soft-blue` | Measured telephone links, secondary pill backgrounds, small utility text, and hero counter text |
| Mist Panel | `#EEF5F9` | `--color-panel` | Measured background of the symptom section |
| White | `#FFFFFF` | `--color-white` | Measured desktop footer, mobile menu control, hero reservation counter button, and introduction link; visually present in symptom cards and illustrations |
| Reservation Yellow | `#FFE100` | `--color-reserve` | Measured desktop and mobile reservation-link background; also visible in appointment badges and the station-time numeral |

The visible hierarchy relies on three closely related light surfaces: the blue canvas, the lighter symptom panel, and white content. Clinic Blue provides the common linework and typography. Yellow is concentrated around appointment availability and reservation access; it is a functional accent rather than a general decorative color.

The illustrated halo contains a visibly grainy light-blue field. Its texture produces many blue values, so it should not be reduced to a claimed exact solid fill. A fallback color used in the Quick Start is explicitly an approximation.

### Theme Presets

Only one theme is evidenced. The dark-blue information section is part of that page composition, not evidence of a selectable dark mode. No theme-switching control was supplied.

## Tokens — Typography

### Japanese Interface and Narrative

**Measured family:** `Zen Kaku Gothic New, sans-serif`.

Navigation, hero copy, narrative paragraphs, symptom descriptions, and most action labels use this family at weight `500`. Its moderate weight and open spacing keep the interface gentle without making the practical information visually weak.

**Measured body fallback stack:** `Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN, sans-serif`, weight `400`. This remains visible in address and structural text styles. The site does not apply one font declaration uniformly to every element.

These are computed family declarations. The supplied evidence does not identify font-file URLs or independently verify the selected font face for every glyph.

### Latin Utility and Contact Numbers

**Measured family:** `Montserrat, sans-serif`, usually weight `600`.

Use it for the telephone number, small English section labels, `MORE`, and copyright. Contact numbers receive unusually generous tracking for such a practical element: the 22px telephone links use `2.2px`, or `0.1em`.

The hero's sampled current-slide button declares `Montserrat, serif`, weight `500`. Preserve this as a separate source observation; it is not the same fallback stack as the phone links.

### Brand Wordmark

The clinic wordmark is graphic identity. The logo link includes an SVG-style fill declaration of `#395CA3`, and the screenshots show customized lettering and spacing. The H1's inherited font size does not measure the graphic wordmark's letterforms. Do not identify a logo typeface from that inherited value.

### Type Scale

All values below are measured unless otherwise noted. Line height is the CSS line box, not the visible letter height.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Default BODY text | `16 / 32px` | `14 / 23.8px` | 400 | Normal |
| Desktop navigation | `16 / 32px` | Hidden in the captured closed-menu state | 500 | Normal |
| Hero Japanese message | `22 / 51.92px` | `17 / 26.01px` | 500 | `0.1em` |
| Introduction heading | `28 / 50.12px` | `20 / 35.8px` | 500 | `0.1em` |
| Introduction paragraph | `16 / 32px` | `14 / 28px` | 500 | Normal |
| `ABOUT US` label | `10 / 20px` | `10 / 17px` | 600 | `0.1em` |
| Symptom-section heading | `34 / 64.6px` | `20 / 38px` | 500 | `0.1em` |
| Symptom-card heading | `22 / 44px` | `20 / 34px` | 500 | `0.1em` |
| Symptom description | `16 / 30.08px` | `14 / 26.32px` | 500 | Normal |
| Standard detail pill | `16 / 32px` | `13 / 22.1px` | 500 | `0.1em` |
| Disease-link pill | `16 / 24px` | `13 / 19.5px` | 500 | Normal |
| Main symptom-detail action | `18 / 36px` | `13 / 22.1px` | 500 | `0.1em` |
| Header/footer telephone | `22 / 44px` | Footer: `22 / 37.4px` | 600 | `0.1em` |
| Access telephone | `20 / 40px` | `20 / 34px` | 600 | `0.1em` |
| Mobile dock telephone | Not applicable | `16 / 16px` | 600 | `0.1em` |
| Reservation link | `16 / 27.2px` | Dock: `12 / 14.4px` | 500 | `0.05em` |
| Current-slide button | `17px`, normal line height | `11px`, normal line height | 500 | Normal |
| Copyright | `10 / 20px` | `10 / 17px` | 600 | Desktop `1.5px`; mobile `0.5px` |

The information and access H2 wrappers report smaller inherited sizes than some visually prominent title treatments might suggest. Child-span measurements were not supplied, so their wrapper styles should not be presented as complete measurements of every visible heading part.

The HTML root is measured at `10px` on both viewports. The Quick Start uses explicit pixel sizes and a conventional root; it does not copy unknown source `rem` formulas.

## Tokens — Spacing & Shapes

**Character:** spacious sections, compact practical controls, rounded boundaries, and repeated circles.

There is no evidence of a single global spacing unit. Preserve the actual relationships: modest internal gaps, generous section breathing room, and a narrow narrative column inside a much wider page.

### Spacing Scale

| Use | Desktop measurement | Mobile measurement |
| --- | --- | --- |
| Header brand inset | Left `48.09px`, top `58px` | Left/top `20px` |
| Gap within linked brand | `18.432px` | `12px` |
| Navigation row pitch | `48px`: 32px link height plus 16px separation | Closed menu; rows not visible |
| Main content inset | `144px` on each side for a 1152px region | About `30.61px` for a 328.77px region |
| Introduction heading to paragraph | `25px` | `20px` |
| Introduction paragraph to `MORE` | `40px` | `45px` |
| Introduction-section padding | `285px` top, `215px` bottom | `30px` top, `70px` bottom |
| Symptom-section top padding | `180px` | `70px` |
| Standard pill vertical padding | `21px` | `16px` |
| Disease-pill vertical padding | `13px` | `10px` |
| Disease-pill gap | `10px`, calculated from adjacent bounds | `8px`, calculated from adjacent bounds |
| Desktop hero action gap | `20px`, screenshot estimate | Actions are reorganized into a dock |
| Access-to-footer separation | `240px`, calculated from section bounds | `100px`, calculated from section bounds |

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Symptom-section upper corners | Desktop `60px`; mobile `30px` | Computed style |
| Desktop footer upper corners | `60px` | Computed style |
| Mobile footer's visible white surface | About `20px` | Screenshot estimate; the sampled FOOTER itself is transparent with zero radius |
| Standard action pills | `50px` | Computed style |
| Disease-link pills | Desktop `40px`; mobile `50px` | Computed style |
| Desktop reservation link | `50%` | Computed style |
| Mobile menu button | `30px` on a 70px square | Computed style; a rounded square rather than a perfect circle |
| Hero illustration halo and counter plate | Circular | Screenshot evidence |
| Symptom-card group's outer top corners | About `60px` | Desktop screenshot estimate |

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Hero section | `1440 × 1000px` | `390 × 844px`, including 90px bottom padding |
| Header wrapper | `344.02px` wide, `1000px` high | Full width with a zero-height wrapper; visible children extend outside it |
| Linked header brand | `216 × 166.84px` | `138 × 115.23px` |
| Hero illustration halo | Approximately `624px` diameter, centered at `(720, 500)` | Approximately `420px` diameter, centered at `(195, 392)`; horizontally clipped by the viewport |
| Hero counter plate | Approximately `126px` diameter | Approximately `84px` diameter |
| Desktop reservation circle | `160 × 160px`, at `(1220, 794)` | Replaced by a `109.80 × 50px` dock segment |
| Shared content region | `1152px`, equal to 80% of this viewport | Approximately `328.77px`, equal to 84.3% of this viewport |
| Introduction paragraph | `352px` wide | `308px` wide |
| `MORE` link | `290 × 74px` | `260 × 54.09px` |
| Main symptom-detail action | `427 × 100px` | `328.77 × 54.09px` |
| Footer wordmark link | `382.45 × 48.23px` | `291 × 36.69px` |
| Document height | `8997.78px` | `8187.41px` |

The introduction paragraph is **calculated to be 22em wide at both sizes**: 352 ÷ 16 and 308 ÷ 14. This is a useful reconstruction rule, but the original width declaration was not supplied.

## Components

### Header Identity and Desktop Navigation

**Role:** establish the clinic identity and provide direct routes into its information pages.

The linked brand combines a small cat/speech-bubble symbol with a two-line Japanese wordmark and a tiny English subtitle. On desktop it starts about 48px from the left and 58px from the top. A vertical list of seven links sits lower down, beginning near y = 387px.

Each navigation link has a small light-blue dot, blue 16px text, and a 48px vertical pitch. The destinations include the homepage, clinic introduction, clinical information, disease/treatment information, columns, access, and reservations. The labels include `当院について`, `診療案内`, and `ご予約について`.

A telephone block occupies the lower-left part of the opening viewport. It combines a small booking/inquiry label, the tracked Montserrat phone number, and a yellow appointment-only badge.

The desktop rail is visible in the opening capture and absent from the supplied lower-page captures. Its full scroll-positioning logic is not established. Do not reserve a permanent 344px sidebar gutter for every subsequent section: the main section containers are centered across the page.

### Illustrated Hero and Message

**Role:** normalize seeking help through approachable situations rather than a large promotional headline.

The hero has four evidenced message entries. The desktop capture displays entry 3 of 4, with two standing people expressing physical discomfort. The mobile capture displays entry 1 of 4, with a seated patient and clinician in conversation. The other supplied text entries address sleep difficulties and concern for someone close to the visitor; their artwork is not visible in the supplied captures.

Component anatomy:

1. A large light-blue circular field with fine grain.
2. A centered human illustration with blue outlines, white faces, and restrained muted fills.
3. A Japanese message paired with a much smaller English translation.
4. A white circular counter plate overlapping the lower-right edge of the illustration field.

Desktop Japanese copy is vertical and sits near the right edge. In the captured third message, it reads `こころの不調が カラダに出ることも。`. The English translation occupies narrow vertical runs alongside it.

Mobile puts the message below the circle, centered in two Japanese lines. The captured copy is `言葉にできないモヤモヤも 気軽に相談してほしい。`. Small uppercase English copy follows beneath.

The counter uses diagonally arranged current and total numerals separated by a fine slash. Only the current-number button has supplied DOM bounds: approximately 22 × 22px on desktop and 16 × 16px on mobile. The large white plate must not be assumed to be an equally large clickable target.

### Station and Reservation Circles

**Role:** make location convenience and reservation access easy to find in the opening view.

Two circles sit side by side at the desktop hero's lower right. The station circle is blue with white text and a yellow numeral in the one-minute walking-time statement. Its approximate diameter matches the reservation circle's measured 160px size.

The yellow reservation circle contains a small calendar icon, `WEB予約`, and the tiny caption `RESERVE`. Its destination is `/reserve/`. The source link uses a 50% radius and 55px top padding; the icon and stacked text create an intentionally spacious vertical composition inside the circle.

The station badge was not supplied as a link. Its interaction should not be invented. On mobile, these two circles are not retained as a pair; reservation access moves to the bottom dock, while station information remains available in the access section.

### Mobile Menu and Contact Dock

**Role:** retain navigation access and booking contact while the page becomes a single-column reading experience.

The menu control is a measured 70 × 70px white rounded square at `(300, 20)` in the 390px viewport. Two blue horizontal lines and a tiny `MENU` label sit inside. It remains at the same upper-right screen position in the supplied lower-page capture, supporting a viewport-anchored presentation.

The closed state is the only supplied state. Menu contents, opening animation, focus management, dismissal, and scroll locking remain unverified. The button's sampled text is empty, so its accessible name cannot be established from the excerpt.

The bottom dock spans approximately 360px with 15px side margins and a 50px visible height. Its left white region contains the inquiry label, telephone link, and a small yellow appointment-only badge. The right yellow region is the measured 109.80px-wide reservation link. A faint shadow separates the dock from the page; its exact shadow values are unavailable.

The same dock appears in both mobile captures, including at the footer. Its telephone destination is `tel:0367152255`, and reservation access points to `/reserve/`.

### Introduction Narrative

**Role:** explain the clinic's supportive approach before presenting practical information.

The DOM establishes a centered introduction with a small `ABOUT US` label, a two-line Japanese heading, a narrow multi-paragraph narrative, and a white `MORE` pill linking to `/about/`.

The heading `また、こころが満ちる、その時まで。` uses 28px type on desktop and 20px on mobile. The paragraph remains approximately 22em wide and uses a generous 2.0 line height. Explicit paragraph breaks are part of the reading rhythm.

The measured section is 1918.36px tall on desktop and 1680.22px on mobile. Its visible text occupies only part of those bounds. The supplied captures do not establish all imagery or decorative content responsible for the remaining space; do not replace that unknown area with invented photographs or claim it is entirely empty.

### Clinical Information and Hours

**Role:** make specialties, appointment requirements, opening hours, and closed days available on the homepage.

The rendered content includes specialties, an appointment-only note, morning and afternoon hours, closed-day information, and a seven-day schedule table. Two actions lead to `/information/` and `/reserve/`.

On desktop, those actions sit in one row: a 290px-wide detail pill followed by a narrower reservation pill, both 74px high. On mobile they become two full-width 328.77px pills, each about 54px high, with a 10px gap.

The mobile information SECTION has a measured `#395CA3` background. The desktop SECTION itself is transparent, although its heading is white. A nested surface or background treatment may supply the desktop contrast, but that structure is not included in the sampled elements. A full-width blue desktop band is therefore a reconstruction choice, not a verified source rule.

The schedule visibly simplifies its row labels on mobile: desktop includes the time range beside morning/afternoon, while the mobile rendered text keeps the shorter labels. Full hours remain in the separate information text. This is a useful example of reducing table density without removing the underlying information.

### Symptom Section and Cards

**Role:** help visitors recognize relevant concerns and reach explanatory disease pages.

A lighter blue section begins with broad rounded upper corners. The desktop capture shows a centered cat mark, the heading `こんな症状ありませんか？`, and a small `ANY CONCERNS?` subtitle. A large white card group begins below.

Four categories are evidenced: sleep difficulties, mood difficulties, physical symptoms, and difficulties in social life. On desktop they form two columns, with the first two headings aligned at the same document y position and the remaining pair aligned below. On mobile, all four appear in a single vertical sequence.

Each card combines:

- A small pale-blue sequence number above the title; `01` and `02` are visible in the supplied desktop image.
- A blue Japanese title.
- A topic-specific line illustration.
- A narrow paragraph describing recognizable experiences.
- One or more rounded links to related disease information.

The desktop screenshot shows rounded outer corners and a narrow pale divider between the first two white cards. Do not turn the group into four detached, heavily shadowed floating cards.

Desktop description widths vary from 320 to 352px. Mobile widths vary from 238 to 266px, preserving comfortable short lines within the approximately 329px content region. Disease pills wrap in centered rows. On mobile, ordinary disease links measure about 135.19 × 39.5px and form two columns, with an odd final item centered.

The sleep card contains a longer explanatory link rather than a list of short disease names. Allow that item to wrap and grow in height. A separate strong blue `詳しく見る` pill follows the complete group.

### Pill Links

**Role:** provide a consistent family of secondary navigation actions.

Three evidenced variants cover most of the page:

| Variant | Appearance | Geometry and use |
| --- | --- | --- |
| Introduction | White fill, blue text, tracked Montserrat `MORE` | 290 × 74px desktop; 260 × 54.09px mobile |
| Standard detail | Soft-blue fill, white text, often a small circular arrow at left | 74px desktop height; about 54px mobile height; 50px radius |
| Strong detail | Clinic-blue fill, white text | 427 × 100px desktop; full content width and about 54px height on mobile |

Disease-link pills form a smaller related family. They use a 24px desktop line height with 13px vertical padding, producing 50px height. Mobile uses 19.5px line height with 10px vertical padding, producing 39.5px height.

The arrow-in-disc treatment is visible on the access detail link. Its exact internal geometry is not supplied and should be treated as a visual estimate when reused.

### Access Information and Map

**Role:** connect the clinic's station proximity, address, telephone number, and map.

Desktop content places a text region at x = 144px with a measured width of 432px. The map is visible to the right in the lower-page capture, with an estimated width of approximately 672px. This suggests a wider map column with roughly 48px between columns, but the map's own DOM bounds were not supplied.

Mobile stacks the access content and map. The visible map is approximately 329px wide, matching the main content region. It retains recognizable Google map controls, a clinic pin, and attribution. The map's full height and interaction behavior were not measured.

The telephone and fax are side by side in the desktop access text and stacked on mobile. The detail action points to `/access/`. Map panning, zooming, keyboard behavior, and any external map destination were not exercised.

### Footer

**Role:** close with clinic identity and practical contact information.

Desktop uses a full-width white surface with measured 60px upper corners. The left content begins at x = 112px and includes a horizontal wordmark, address, telephone/fax row, two rows of dotted navigation links, and copyright. A large cat/speech-bubble mark occupies the right side, approximately 420px wide in the screenshot.

Mobile changes the composition substantially. The mascot becomes a smaller centered mark, approximately 116px wide, overlapping the top edge of a white rounded surface. The wordmark, two-line address, telephone, fax, and copyright are centered beneath it. The desktop footer navigation is not visible in the mobile capture or mobile rendered link list.

The sampled mobile FOOTER reports a transparent background and zero radius even though a rounded white surface is visible. Reproduce the visible result with a wrapper or a direct footer style as appropriate; do not claim that the original FOOTER carries those white-surface styles.

## Tokens — Motion & Interaction

| Treatment | Evidence | What remains unverified |
| --- | --- | --- |
| Link transitions | Sampled logo, navigation, telephone, reservation, and pill links report `0.5s` transitions | Changed properties, easing, and visible hover endpoints |
| Introduction heading animation | Mobile `ABOUT US` element reports `1s forwards fadeInAnime` | Keyframes, trigger conditions, and exact visual movement |
| Four-entry hero | Four message entries exist; desktop displays 3/4 and mobile 1/4 | Autoplay, duration, transition style, looping, swiping, and counter-button behavior |
| Mobile menu | Closed button is visible at top right in both mobile captures | Open layout, animation, focus behavior, and dismissal |
| Telephone links | `tel:0367152255` is present in rendered links | Device dialer behavior was not exercised |
| Detail and reservation navigation | Homepage links expose their destinations | Destination-page rendering and booking completion |
| Map | Map interface and controls are visible | Panning, zooming, touch handling, and keyboard access |

A computed `transition: all` entry alone does not establish a timed animation. Likewise, `animation: none` on sampled elements does not rule out JavaScript-driven transitions elsewhere.

The capture process waited for initial rendering and finite motion, and temporarily paused perpetual animations during readiness checks. These settled images establish appearance, not a complete motion recording.

**Recommended implementation:** use restrained color/opacity transitions for links, and use a modest dissolve if a rotating hero is required. Keep image, Japanese message, English translation, and counter synchronized. Supply pause and manual navigation controls if autoplay is introduced. Do not present a particular dissolve duration or autoplay interval as measured source behavior.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Solid `#DDEBF3` | Continuous calm background and broad section spacing |
| Hero halo | Grainy light blue, circular | Focuses attention on illustrated human situations |
| Symptom section | `#EEF5F9`, large upper radii | Separates symptom guidance from preceding information |
| Symptom cards | White, grouped with pale separators | Organizes categories while preserving a soft overall mass |
| Information area | Deep blue confirmed on mobile | Gives practical clinic information a stronger contrast field |
| Secondary links | Soft-blue pills, white labels | Repeated routes to further information |
| Strong detail link | Deep-blue pill, white label | Gives the end of the symptom group a clear exit action |
| Reservation access | Yellow with blue details | Distinguishes booking access from ordinary navigation |
| Footer | White with rounded upper boundary | A clear closing block for identity and contact details |
| Mobile dock | White/yellow strip with a faint shadow | Keeps contact and booking available over the long page |

There is no evidenced general elevation system. Most separation comes from color fields, generous spacing, rounded silhouettes, and white surfaces. The subtle mobile dock shadow should not become a shadow on every component.

## Imagery

The illustration style uses smooth blue contours with rounded joins, white faces and hands, minimal facial features, and muted gray-blue or teal clothing. Human figures express concern through posture and small marks: a hand on the chest, a tense shoulder, a troubled speech bubble, or a conversation gesture. The tone is sympathetic and everyday.

The cat identity combines a recognizable animal face with a functional communication symbol. Its three dots connect the brand to the site's emphasis on conversation. Repetition is controlled: a small identity mark, a section emblem, and a large footer signature each have a different compositional role.

Texture belongs mainly to the circular hero field. Keep the linework clean. Applying pixelated rendering or a heavy noise filter to the entire interface would damage the observed distinction between smooth characters and a softly textured background.

No photographic content is visible in the supplied captures. Intermediate DOM excerpts do not provide a complete image inventory, so photography elsewhere on the homepage cannot be ruled out.

### Observed Asset References

No image file URLs or filenames were supplied. The following are visual references, not downloadable asset paths.

| Asset | Supplied evidence | Reuse guidance |
| --- | --- | --- |
| Cat/speech-bubble identity | Desktop and mobile headers, symptom heading, both footers | Preserve the silhouette and three-dot motif when authorized to reuse the original identity |
| Graphic wordmark | Header and footer captures | Treat as artwork; do not infer its font from H1 styles |
| Physical-discomfort scene | Desktop hero, entry 3/4 | Two standing figures, blue contours, muted fills, small concern bubbles |
| Consultation scene | Mobile hero, entry 1/4 | Two seated figures with speech bubbles and a calm conversational gesture |
| Sleep and mood illustrations | First two cards in the desktop symptom capture | Small topic-specific drawings with the same contour style |
| Calendar icon | Desktop reservation circle and mobile dock | Small blue outline symbol with white detail |
| Map | Desktop lower-page fragment and mobile footer-region capture | Preserve map attribution and real location data in a working implementation |

Use authorized original assets when available. For a new clinic identity, commission distinct artwork with comparable restraint rather than copying the mascot or inferring unseen illustrations.

## Layout & Responsive Behavior

The page preserves its information sequence across the inspected widths: hero, introduction, clinical information, symptom guidance, access, and footer. Responsive changes alter composition and density rather than removing the clinic's core practical information.

| Area | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header | Tall left-side identity/navigation composition | Compact top-left identity and top-right menu control |
| Hero illustration | Approximately 624px circle, centered in the viewport | Approximately 420px circle, slightly wider than the viewport |
| Hero copy | Vertical Japanese copy to the right of the illustration | Horizontal centered copy below the illustration |
| Booking access | Lower-left telephone and lower-right circular badges | Persistent white/yellow bottom dock |
| Introduction | Narrow centered 352px paragraph | Narrow centered 308px paragraph |
| Information actions | Two pills on one row | Two full-width stacked pills |
| Schedule labels | Morning/afternoon plus time ranges | Shorter row labels; full hours remain elsewhere in the section |
| Symptom categories | Two columns and two rows | Four stacked categories |
| Disease links | Content-dependent widths and centered wrapping | Approximately equal-width two-column wrapping |
| Access | Text beside a wider map | Text above map; telephone/fax stack |
| Footer | Left-aligned contact block, navigation, large right mascot | Centered contact block and smaller overlapping mascot; no visible footer navigation |

The approximately 80% desktop and 84.3% mobile container widths are measured relationships at these specific viewports. The original breakpoint and width formulas were not supplied. The introduction's wider mobile outer wrapper is an exception to the shared main container.

The mobile hero's measured 90px bottom padding and persistent dock show that bottom contact controls influence the layout. A new implementation should reserve space throughout the page for the dock and device safe areas, including when text is enlarged.

The Quick Start uses a recommended 1100px composition breakpoint. Tablet, intermediate desktop, short landscape, browser zoom, and enlarged-text layouts require separate validation.

## Do’s and Don’ts

### Do

- Keep the canvas, ink, soft-blue action color, mist panel, white, and reservation yellow distinct.
- Use the mascot and human illustrations as the main identity-bearing imagery.
- Preserve the centered desktop circle with its separate left navigation and right vertical message.
- Move the message beneath the illustration on mobile.
- Keep the narrative column narrow and its paragraph rhythm generous.
- Use moderate Japanese heading sizes, weight 500, and approximately 0.1em tracking.
- Make telephone numbers conspicuous through Montserrat, weight, and spacing.
- Group symptom cards on a white surface with restrained dividers.
- Let disease links wrap and let longer explanatory links grow vertically.
- Preserve the different desktop and mobile footer compositions.
- Keep reservation yellow concentrated around appointment access and status.

### Don’t

- Don’t replace the illustrated opening with an oversized headline or a generic hospital photograph.
- Don’t crop the people simply to make every scene fill the circle identically.
- Don’t apply grain, blur, or pixelation to all text and linework.
- Don’t turn every link into a yellow primary button.
- Don’t retain the desktop navigation gutter beside all lower-page sections.
- Don’t shrink the desktop hero as a single image to create the mobile layout.
- Don’t make a 16px counter numeral the only practical carousel target.
- Don’t assume menu behavior, carousel timing, or map interactions from still captures.
- Don’t import unused publishing-system gradients and shadow presets into the visual palette.
- Don’t copy malformed navigation destinations into a new build.

## Recommended Implementation Additions

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

- Give the menu a clear accessible name, an expanded state, and a controlled navigation region. If it opens a modal panel, implement focus containment and return focus on close.
- Add visible focus outlines. Expand narrow navigation and disease-link hit areas to at least 44px where feasible; the observed mobile disease pills are only 39.5px tall.
- Review small light-blue text and white-on-light-blue labels. Calculated from the supplied solid colors, white on `#77AFD9` is approximately 2.35:1, while Clinic Blue on white is approximately 6.5:1. Retain the palette through a stronger label color or darker interactive fill where normal-size text requires more contrast.
- Keep tiny English labels and appointment badges supplementary. Essential booking information should remain understandable without reading the smallest captions.
- Expose the clinic name as accessible heading/link text even when the visible identity is SVG artwork.
- If the hero rotates automatically, provide pause, manual controls, reduced-motion behavior, and a stable reading alternative. Keep inactive slides out of focus order and avoid repeatedly announcing decorative changes.
- Use semantic table headers for opening hours. Ensure shortened mobile row labels remain associated with the full time ranges.
- Give the map an accessible title and keep the address available as ordinary text. Preserve the map provider's attribution.
- Reserve bottom space for the mobile dock, safe-area insets, enlarged text, and focused elements reached by keyboard.
- Correct the duplicated absolute URL found in the desktop footer's `TOP` link; use the canonical homepage destination.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#DDEBF3`.
- Main text, outlines, identity, and strong actions: `#395CA3`.
- Secondary actions and telephone emphasis: `#77AFD9`.
- Symptom-section surface: `#EEF5F9`.
- Cards, footer, and menu surface: `#FFFFFF`.
- Reservation access and appointment accents: `#FFE100`.
- Hero halo: textured light blue; no exact texture asset or single fill was supplied.

### Overall Prompt

“Create a Japanese clinic homepage with a calm pale-blue canvas, deep-blue typography and linework, white content surfaces, and a small amount of bright yellow for reservation access. Use Zen Kaku Gothic New at medium weight for Japanese interface copy, Montserrat for telephone numbers and small English labels, and generous paragraph spacing. Build the desktop hero around a large centered textured circle containing an approachable human illustration, with a left navigation rail and vertical Japanese copy at right. On mobile, move the message below a nearly full-width circle, show a white rounded menu button at top right, and keep telephone and reservation access in a bottom dock. Continue with a narrow introduction, practical clinic information, grouped illustrated symptom cards, access information, and a rounded white footer. Use distinct authorized artwork. Treat carousel and menu behavior as implementation requirements to define, not as known source behavior.”

### Example Component Prompts

1. **Desktop hero:** “On a 1440 × 1000 canvas filled with `#DDEBF3`, place an approximately 624px grainy blue circle at the viewport center. Put a restrained medical conversation or concern illustration inside. Place a small linked identity and dotted navigation at left, vertical 22px Japanese copy at right, a white circular current/total plate near the illustration's lower-right edge, and two 160px circles for station information and booking near the bottom right.”
2. **Mobile contact dock:** “Create a 50px-high bottom contact strip with 15px side margins. Use a white telephone area with a small yellow appointment badge and a roughly 110px yellow booking area containing an outline calendar and `WEB予約`. Keep the telephone number at 16px in tracked Montserrat. Provide safe-area padding and enough page clearance for the dock.”
3. **Symptom cards:** “Create a mist-blue section with 60px upper corners on desktop and 30px on mobile. Center a small identity emblem and a moderately sized Japanese heading. Group four white illustrated concern cards in two desktop columns and one mobile column. Each card has a pale-blue number, a blue title, a small line illustration, a narrow descriptive paragraph, and wrapping blue pill links.”
4. **Introduction:** “Set a two-line 28px Japanese heading above a 22em-wide paragraph column with 16px medium-weight text and 2.0 line height. Use a tiny tracked English eyebrow and a centered white `MORE` pill. On mobile, use 20px heading text and 14px narrative text while keeping the 22em paragraph relationship.”
5. **Footer:** “Use a white footer with broad rounded upper corners. On desktop, put the graphic wordmark, address, telephone/fax, dotted navigation, and copyright at left, balanced by a large friendly identity illustration at right. On mobile, center the contact details and let a smaller mascot overlap the top edge. Retain bottom clearance for the fixed contact dock.”

## Quick Start

### CSS Custom Properties

This is a visual scaffold, not extracted source CSS. Exact colors and measured type sizes are retained; layout formulas, the 1100px breakpoint, the halo fallback, focus styles, and hover endpoints are recommended adaptations. It deliberately uses a conventional root font size.

Provide authorized artwork through normal image elements. Optionally set `--hero-texture` to an authorized texture image. No original asset filename is implied. Font declarations require an appropriate font-loading setup; no font resource URLs were supplied.

The component classes assume semantic links, a real menu button, a hero illustration container, a current/total status plate, grouped symptom articles, and separate desktop/mobile contact presentations. CSS does not implement carousel state, menu logic, or the map.

```css
:root {
  /* Measured palette */
  --color-canvas: #ddebf3;
  --color-ink: #395ca3;
  --color-soft-blue: #77afd9;
  --color-panel: #eef5f9;
  --color-white: #fff;
  --color-reserve: #ffe100;

  /* Approximate fallback for the textured illustration field */
  --color-halo-fallback: #addcf5;
  --hero-texture: none;

  /* Observed family declarations */
  --font-body: 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-ja: 'Zen Kaku Gothic New', sans-serif;
  --font-latin: 'Montserrat', sans-serif;
  --font-counter: 'Montserrat', serif;

  --text-body: 16px;
  --text-hero: 22px;
  --text-section: 34px;
  --text-card: 22px;
  --text-button: 16px;
  --tracking-heading: 0.1em;
  --leading-body: 2;
  --leading-concern: 1.88;

  --radius-section: 60px;
  --radius-pill: 50px;
  --radius-menu: 30px;
  --content-width: 80%;
  --hero-size: min(43.333vw, 62.4svh);
  --dock-height: 50px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --link-duration: 500ms;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font: 400 var(--text-body) / var(--leading-body) var(--font-body);
}

a { color: inherit; }
button { color: inherit; font: inherit; }
img, svg { max-width: 100%; }

.clinic-container {
  width: var(--content-width);
  max-width: 1440px; /* Recommended large-screen cap */
  margin-inline: auto;
}

.clinic-hero {
  position: relative;
  min-height: max(100svh, 800px);
  overflow: hidden;
}

.hero-brand {
  position: absolute;
  top: 58px;
  left: 3.34%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18.432px;
  width: 216px;
  text-decoration: none;
}

.hero-brand__symbol { width: 90px; }
.hero-brand__wordmark { width: 100%; }

.hero-nav {
  position: absolute;
  top: 38%;
  left: 3.34%;
}

.hero-nav ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px; /* Recommended larger target */
  padding-inline: 20px;
  font: 500 16px / 2 var(--font-ja);
  text-decoration: none;
}

.hero-nav a::before {
  position: absolute;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-soft-blue);
  content: '';
}

.hero-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--hero-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-halo-fallback);
  background-image: var(--hero-texture);
  background-size: cover;
  transform: translate(-50%, -50%);
}

.hero-illustration {
  display: block;
  width: 54%;
  height: 60%;
  object-fit: contain;
}

.hero-copy {
  position: absolute;
  top: 21.8%;
  right: 4.375%;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 12px;
}

.hero-copy__ja {
  margin: 0;
  writing-mode: vertical-rl;
  font: 500 var(--text-hero) / 2.36 var(--font-ja);
  letter-spacing: var(--tracking-heading);
}

.hero-copy__en {
  margin: 0;
  writing-mode: vertical-rl;
  font: 600 9px / 2 var(--font-latin); /* Visual approximation */
  letter-spacing: 0.1em;
}

.hero-progress {
  position: absolute;
  right: 3%;
  bottom: 6%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 126px;
  aspect-ratio: 1;
  padding: 30px;
  border: 2px solid var(--color-soft-blue);
  border-radius: 50%;
  color: var(--color-soft-blue);
  background: var(--color-white);
  font: 500 17px / 1 var(--font-counter);
}

.hero-progress::after {
  position: absolute;
  top: 50%;
  left: 34%;
  width: 32%;
  border-top: 1px solid var(--color-soft-blue);
  opacity: 0.4;
  transform: rotate(-45deg);
  content: '';
}

.hero-progress__current { align-self: start; }
.hero-progress__total { align-self: end; text-align: right; }

.hero-contact {
  position: absolute;
  bottom: 58px;
  left: 3.34%;
}

.phone-link {
  color: var(--color-soft-blue);
  font: 600 22px / 2 var(--font-latin);
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
}

.hero-actions {
  position: absolute;
  right: 60px;
  bottom: 46px;
  display: flex;
  gap: 20px;
}

.hero-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  font: 500 16px / 1.7 var(--font-ja);
}

.hero-circle--station {
  color: var(--color-white);
  background: var(--color-ink);
}

.hero-circle--station strong { color: var(--color-reserve); }
.hero-circle--reserve { background: var(--color-reserve); }
.menu-toggle, .contact-dock { display: none; }

.about-section { padding-block: 285px 215px; }

.about-heading {
  margin: 20px auto 25px;
  text-align: center;
  font: 500 28px / 1.79 var(--font-ja);
  letter-spacing: 0.1em;
}

.eyebrow {
  color: var(--color-soft-blue);
  text-align: center;
  font: 600 10px / 2 var(--font-latin);
  letter-spacing: 0.1em;
}

.narrative {
  max-width: 22em;
  margin-inline: auto;
  font: 500 var(--text-body) / 2 var(--font-ja);
}

.section-title {
  margin: 0;
  text-align: center;
  font: 500 var(--text-section) / 1.9 var(--font-ja);
  letter-spacing: 0.1em;
}

.section-mark {
  display: block;
  width: 100px;
  margin: 0 auto 24px;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  max-width: 100%;
  padding: 21px 34px;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background: var(--color-soft-blue);
  text-align: center;
  text-decoration: none;
  font: 500 var(--text-button) / 2 var(--font-ja);
  letter-spacing: 0.1em;
  transition: background-color var(--link-duration),
    color var(--link-duration), opacity var(--link-duration);
}

.pill--white { color: var(--color-ink); background: var(--color-white); }
.pill--strong { background: var(--color-ink); }
.pill--more { width: 290px; font-family: var(--font-latin); font-weight: 600; }
.pill--large { min-height: 100px; width: 427px; font-size: 18px; }
.pill--arrow { padding-left: 80px; }

.pill__icon {
  position: absolute;
  left: 30px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-ink);
}

.action-row { display: flex; flex-wrap: wrap; gap: 20px; }

/* A blue desktop information surface is an adaptation choice. */
.information-surface {
  padding-block: 65px;
  color: var(--color-white);
  background: var(--color-ink);
}

.hours-scroll { overflow-x: auto; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td {
  padding: 12px 8px;
  border-bottom: 1px solid currentColor;
  text-align: center;
}

.concerns {
  padding-block: 180px 120px;
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background: var(--color-panel);
}

.concern-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 60px;
  overflow: hidden;
  border-radius: 60px;
  counter-reset: concern;
}

.concern-card {
  padding: 76px 40px;
  background: var(--color-white);
  text-align: center;
  counter-increment: concern;
}

.concern-card::before {
  color: var(--color-soft-blue);
  font: 600 20px / 1.5 var(--font-latin);
  content: counter(concern, decimal-leading-zero);
}

.concern-card__title {
  margin: 8px 0 28px;
  font: 500 var(--text-card) / 2 var(--font-ja);
  letter-spacing: 0.1em;
}

.concern-card__image {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 36px;
  object-fit: contain;
}

.concern-card__text {
  max-width: 22em;
  margin-inline: auto;
  font: 500 var(--text-body) / var(--leading-concern) var(--font-ja);
}

.disease-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.disease-link {
  display: block;
  max-width: 100%;
  padding: 13px 32px 13px 40px;
  border-radius: 40px;
  color: var(--color-white);
  background: var(--color-soft-blue);
  font: 500 16px / 1.5 var(--font-ja);
  text-decoration: none;
}

.access-grid {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 14fr);
  align-items: center;
  gap: 48px;
}

.map-frame {
  width: 100%;
  min-height: 300px;
  aspect-ratio: 1.05; /* Recommended; original height was not supplied */
  overflow: hidden;
  border: 0;
  border-radius: 30px;
}

.clinic-footer {
  position: relative;
  margin-top: 240px;
  padding: 110px 0;
  border-radius: 60px 60px 0 0;
  background: var(--color-white);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
  width: calc(100% - 224px);
  margin-inline: auto;
}

.footer-wordmark { display: block; width: 382px; }
.footer-mascot { width: 420px; justify-self: center; }
.contact-numbers { display: flex; flex-wrap: wrap; gap: 25px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 16px; }

.copyright {
  font: 600 10px / 2 var(--font-latin);
  letter-spacing: 0.15em;
}

/* Recommended focus and hover states, not measured endpoints */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

.information-surface :focus-visible { outline-color: var(--color-white); }

@media (hover: hover) {
  .pill:hover, .disease-link:hover { background: var(--color-ink); }
  .pill--white:hover { color: var(--color-white); }
  .pill--strong:hover { opacity: 0.85; }
  .hero-circle--reserve:hover { opacity: 0.85; }
}

/* Recommended composition breakpoint; the source breakpoint is unknown. */
@media (max-width: 1100px) {
  :root {
    --text-body: 14px;
    --text-hero: 17px;
    --text-section: 20px;
    --text-card: 20px;
    --text-button: 13px;
    --radius-section: 30px;
    --content-width: 84.3%;
    --hero-size: min(107.692vw, 420px);
  }

  body { line-height: 1.7; }

  .clinic-hero {
    min-height: max(100svh, calc(var(--hero-size) + 382px));
    padding-bottom: 90px;
  }

  .hero-brand { top: 20px; left: 20px; width: 138px; gap: 12px; }
  .hero-brand__symbol { width: 58px; }
  .hero-nav, .hero-contact, .hero-actions { display: none; }

  .menu-toggle {
    position: fixed;
    z-index: 50;
    top: 20px;
    right: 20px;
    display: grid;
    place-content: center;
    gap: 7px;
    width: 70px;
    height: 70px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-menu);
    background: var(--color-white);
    cursor: pointer;
  }

  .menu-toggle__lines {
    width: 30px;
    height: 11px;
    border-block: 1.5px solid currentColor;
  }

  .menu-toggle__label {
    font: 600 8px / 1 var(--font-latin);
    letter-spacing: 0.15em;
  }

  .hero-scene { top: 182px; transform: translateX(-50%); }
  .hero-illustration { width: 64%; height: 72%; }

  .hero-copy {
    position: relative;
    inset: auto;
    display: block;
    width: calc(100% - 32px);
    margin: calc(182px + var(--hero-size) + 18px) auto 0;
    text-align: center;
  }

  .hero-copy__ja { writing-mode: horizontal-tb; line-height: 1.53; }
  .hero-copy__en {
    margin-top: 12px;
    writing-mode: horizontal-tb;
    font-size: 8px;
  }

  .hero-progress {
    right: 9%;
    bottom: -2px;
    width: 84px;
    padding: 20px;
    font-size: 11px;
  }

  .contact-dock {
    position: fixed;
    z-index: 60;
    right: 15px;
    bottom: 0;
    left: 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    min-height: calc(var(--dock-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    overflow: hidden;
    border-radius: 7px 7px 0 0;
    background: var(--color-white);
    box-shadow: 0 0 12px rgb(57 92 163 / 10%);
  }

  .dock-phone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px clamp(8px, 6.15vw, 24px);
  }

  .dock-phone__label { font: 500 8px / 1.2 var(--font-ja); }
  .dock-phone .phone-link { font-size: 16px; line-height: 1; }

  .appointment-badge {
    display: grid;
    place-items: center;
    min-height: 30px;
    padding: 3px;
    border-radius: 7px;
    background: var(--color-reserve);
    text-align: center;
    font: 500 8px / 1.2 var(--font-ja);
  }

  .dock-reserve {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--dock-height);
    background: var(--color-reserve);
    font: 500 12px / 1.2 var(--font-ja);
    text-decoration: none;
  }

  .about-section { padding-block: 30px 70px; }
  .about-heading { margin-bottom: 20px; font-size: 20px; }
  .narrative { max-width: min(22em, calc(100% - 40px)); }
  .information-surface { padding-block: 60px; }
  .action-row { flex-direction: column; gap: 10px; }

  .pill { min-height: 54px; padding: 16px 34px; line-height: 1.7; }
  .action-row .pill { width: 100%; }
  .pill--more { width: 260px; }
  .pill--large { width: 100%; min-height: 54px; font-size: 13px; }
  .pill--arrow { padding-left: 52px; }
  .pill__icon { left: 16px; width: 26px; height: 26px; }

  .concerns { padding-block: 70px; }
  .concern-grid { grid-template-columns: 1fr; margin-top: 40px; border-radius: 30px; }
  .concern-card { padding: 40px 25px; }
  .concern-card__title { line-height: 1.7; }
  .concern-card__text { max-width: 19em; }
  .disease-links { gap: 8px; margin-top: 20px; }

  .disease-link {
    flex: 0 1 calc(50% - 4px);
    min-height: 44px; /* Recommended increase from the observed 39.5px */
    padding: 10px 12px;
    border-radius: 50px;
    font-size: 13px;
  }

  .disease-link--long { flex-basis: 100%; }
  .access-grid { grid-template-columns: 1fr; gap: 40px; }
  .map-frame { aspect-ratio: auto; height: 300px; }

  .clinic-footer {
    margin-top: 100px;
    padding: 80px 24px calc(120px + var(--safe-bottom));
    border-radius: 20px 20px 0 0;
    text-align: center;
  }

  .footer-inner { display: block; width: 100%; }
  .footer-wordmark { width: 291px; margin-inline: auto; }

  .footer-mascot {
    position: absolute;
    top: -50px;
    left: 50%;
    width: 116px;
    transform: translateX(-50%);
  }

  .contact-numbers { flex-direction: column; align-items: center; gap: 0; }
  .footer-links { display: none; }
  .copyright { line-height: 1.7; letter-spacing: 0.05em; }
}

@media (prefers-reduced-motion: reduce) {
  .pill, .disease-link, .hero-circle, .menu-toggle { transition: none; }
  .reveal { animation: none; opacity: 1; transform: none; }
}
```

This scaffold intentionally leaves scene-specific artwork sizing and intermediate section decoration adjustable. It does not hardcode the observed 8998px or 8187px document heights. Content, fonts, images, and responsive wrapping should determine the final document length.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-clinic-canvas: var(--color-canvas);
  --color-clinic-ink: var(--color-ink);
  --color-clinic-soft: var(--color-soft-blue);
  --color-clinic-panel: var(--color-panel);
  --color-clinic-reserve: var(--color-reserve);

  --font-clinic-ja: var(--font-ja);
  --font-clinic-latin: var(--font-latin);

  --text-clinic-body: var(--text-body);
  --text-clinic-hero: var(--text-hero);
  --text-clinic-section: var(--text-section);
  --text-clinic-card: var(--text-card);

  --radius-clinic-section: var(--radius-section);
  --radius-clinic-pill: var(--radius-pill);
  --radius-clinic-menu: var(--radius-menu);
}
```

## Sources & Evidence

- [Current Musashinitta Cocoro Clinic homepage](https://musashinitta-cocoro.com/): original and final URL, HTTP 200, with matching clinic identity in the title, wordmark, address, contact information, and copyright.
- Supplied retrieval timestamp: **September 12, 2026, 06:50:18.210 UTC**, equivalent to **15:50:18.210 JST**.
- Desktop inspection: **1440 × 1000 CSS pixels**, document height approximately **8997.78px**. Three supplied captures show the hero, the opening of the symptom section, and the footer with a map fragment above it.
- Mobile inspection: **390 × 844 CSS pixels**, document height approximately **8187.41px**. Two supplied captures show the hero and the map/footer region, including the persistent menu control and contact dock.
- Rendered evidence includes element rectangles, computed colors, font-family declarations, type sizes, spacing, radii, selected transition/animation declarations, text, and link destinations. Full stylesheets, font resources, image URLs, and a complete decorative-element inventory were not supplied.
- Capture readiness included document loading, visible-image decoding, finite-animation checks, and layout/text stability checks. Perpetual animations were temporarily paused during readiness checks and resumed afterward. This does not establish that every delayed effect or interaction was observed.
- Analysis is limited to the supplied current-page evidence. No additional browsing, command execution, linked-page inspection, menu activation, reservation submission, or historical reconstruction was performed.

Measured values describe these captures. Screenshot estimates and implementation recommendations are labeled separately, especially for the hero artwork, map geometry, mobile footer surface, responsive breakpoint, and motion behavior.