MANERU

日本のWebデザインを、AIの制作リファレンスに。

広島はくしま病院｜大きな文字と余白が印象的な病院サイトのWebサイトプレビュー

DESIGN REFERENCE

広島はくしま病院｜大きな文字と余白が印象的な病院サイト

コーポレートサイト病院リハビリテーション余白写真中心大きなタイポグラフィ細い罫線グリーンレスポンシブ

「晴れやかに。」の大きな文字を病院写真に重ね、白・黄緑・グレーと細い罫線で構成。診療案内、お知らせ、採用情報をゆったり整理した病院サイト。

オリジナルサイトを見る
ジャンル
医療・ヘルスケア
元の業種
医療・病院
デザイン分析日
2026/9/24

design.md

ダウンロード

Hiroshima Hakushima Hospital — Style Reference

A spacious hospital homepage where expressive Japanese lettering meets clear skies, fine rules, and fresh green accents.

Website: Hiroshima Hakushima Hospital Original URL: https://www.hiroshima-hakushima-hp.jp/ Final URL: https://www.hiroshima-hakushima-hp.jp/ Theme: white canvas, slate text, and yellow-green accents; one observed appearance Inspected: September 24, 2026, at 05:47:09 JST; supplied retrieval timestamp: September 23, 2026, at 20:47:09.206 UTC Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels Scope: the current institutional homepage, including its opening composition, service links, hospital and recruitment panels, news, social feed, regional group directory, About link, footer, and persistent announcement banner. Linked destination pages and expanded interaction states were not inspected.

The homepage establishes its identity with the large phrase 「晴れやかに。」 overlapping the upper edge of a hospital photograph. Blue sky, mature trees, and the recognizable entrance provide most of the opening screen's color and detail. A small green hospital logo sits at the upper left, while fine, light interface text and a compact navigation matrix occupy the upper right.

The rest of the page maintains this balance between expressive scale and practical information. Numbered service rows, darkened photographic panels, dated announcements, a social grid, and a substantial network directory support different visitor needs. Broad white intervals separate these functions. Green is concentrated in the identity, recruitment link, group link, and current announcement artwork.

The defining relationship is between large imagery, delicate typography, and generous spacing. Preserve that relationship when adapting the design, while keeping clinical information, contact details, and navigation easy to read.

全文を表示閉じる

Hiroshima Hakushima Hospital — Style Reference

A spacious hospital homepage where expressive Japanese lettering meets clear skies, fine rules, and fresh green accents.

Website: Hiroshima Hakushima Hospital Original URL: https://www.hiroshima-hakushima-hp.jp/ Final URL: https://www.hiroshima-hakushima-hp.jp/ Theme: white canvas, slate text, and yellow-green accents; one observed appearance Inspected: September 24, 2026, at 05:47:09 JST; supplied retrieval timestamp: September 23, 2026, at 20:47:09.206 UTC Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels Scope: the current institutional homepage, including its opening composition, service links, hospital and recruitment panels, news, social feed, regional group directory, About link, footer, and persistent announcement banner. Linked destination pages and expanded interaction states were not inspected.

The homepage establishes its identity with the large phrase 「晴れやかに。」 overlapping the upper edge of a hospital photograph. Blue sky, mature trees, and the recognizable entrance provide most of the opening screen's color and detail. A small green hospital logo sits at the upper left, while fine, light interface text and a compact navigation matrix occupy the upper right.

The rest of the page maintains this balance between expressive scale and practical information. Numbered service rows, darkened photographic panels, dated announcements, a social grid, and a substantial network directory support different visitor needs. Broad white intervals separate these functions. Green is concentrated in the identity, recruitment link, group link, and current announcement artwork.

The defining relationship is between large imagery, delicate typography, and generous spacing. Preserve that relationship when adapting the design, while keeping clinical information, contact details, and navigation easy to read.

How to Read This Reference

  • Measured means a value appears in the supplied computed styles or element rectangles. Measurements describe the captured state, not every possible state.
  • Derived means arithmetic from those measurements, such as a column gap or width percentage.
  • Estimated means a visual approximation from the current desktop and mobile screenshots. These values were not obtained through pixel sampling or additional browser inspection.
  • Recommended means implementation guidance for a new build. It does not establish an existing feature of the original website.
  • Token names are reusable descriptive aliases unless a source custom property is explicitly identified.
  • Evidence coverage differs by section. The opening, desktop news area, and footer have direct visual coverage. Other sections have detailed DOM evidence but incomplete screenshot coverage.

Some extracted text belongs to alternate or concealed content. An element rectangle alone does not establish that its content was visible. This matters particularly for the photographic panels and mobile regional directory. The large opening lettering has no corresponding font measurement in the supplied element sample.

Tokens — Colors

Core Palette
Name Value Suggested token Evidence and role
Canvas White #ffffff --color-canvas Measured body background and source --s-color-__COLOR_STYLE_BACKGROUND; the dominant page surface
Slate Text #485157 --color-ink Measured rgb(72, 81, 87) on navigation labels, headings, service links, news, and contact details
Fresh Green #88ba28 --color-brand Measured recruitment fill, group accents, and source --s-color-489d2b3a
Reversed White #ffffff --color-on-image Measured photographic-panel text and recruitment label; also source text-accent color
Utility Charcoal #333333 --color-utility Measured service eyebrow and some supporting copy; several link wrappers also carry this value
Warm Rule Approximately #d8d5d2 --color-rule Estimated from navigation, news, and footer separators; exact border colors were not supplied
Service Wash Approximately #f0f0f0 --color-service Estimated from the visible mobile service background; sampled section wrapper itself is transparent
Regional Control Gray #eae9e8 --color-region-control Measured mobile region-button background
Directory Note Surface #eff0f0 --color-note Measured desktop facility-navigation note background
Directory Note Text #a1a2a5 --color-note-text Measured desktop facility-navigation note text

The bright green of the logo artwork is visually related to Fresh Green, but its exact asset color was not measured. Likewise, the cyan sky and deep foliage belong to photography; they are not established interface tokens.

Use resolved element colors as the primary guide. The source also declares generic values such as primary #000000, text #222222, secondary text #666666, and background variants #e6e6e6 and #f5f5f5. These declarations do not override the directly observed slate text and white canvas in this reference. Transparent gradient variables in the extraction are not evidence of a visible gradient treatment.

Regional Directory Accents

The desktop group directory introduces a localized category palette. Keep these colors within the regional information system.

Region Measured header fill Measured related text Role
Tokyo / Kanagawa #69bbea #69bbea Blue regional header and organization/category labels
Osaka / Nara #6fb486 #6fb485 Muted green regional header and labels
Kyoto / Hyogo #5cb8b3 #5cb8b3 Teal regional header and labels
Hiroshima #eda639 #eda639 Orange regional header and labels
Yamaguchi #87ba43 #87ba44 Leaf-green regional header and labels

The one-channel differences above are present in the computed values. A new implementation may consolidate each pair, but that would be a deliberate simplification.

On mobile, region-button surfaces resolve to gray. Most sampled organization labels use the main green instead of their desktop regional color; the sampled Yamaguchi organization label retains #87ba44.

Tokens — Typography

Main Interface Family

Computed family: 'ヒラギノ角ゴ W1 JIS2004'

Source variable: --s-font-89ae8207

This family string appears on navigation, service copy, panel headings, news, English section labels, and footer text. The screenshots show narrow, delicate strokes and a restrained institutional tone. Spacious line height and modest tracking do much of the visual work.

Measured weights vary by role: 400 for ordinary navigation and service copy, 500 for news dates and titles, and 700 for MENU and several section headings. A weight of 700 paired with this specific W1 family should not be interpreted as evidence for a heavy generic sans-serif appearance. Match the actual rendered result when selecting a fallback.

The supplied data identifies computed family strings, not the exact font files or glyph fallback used by the browser.

Directory Family

Computed family: 'ヒラギノ角ゴ W3 JIS2004'

Source variable: --s-font-e8b300c1

The regional directory uses this family for denser organization and facility lists. Desktop list text measures 14px / 23.8px; mobile list text measures 16px / 27.2px. The stronger family and larger mobile text help distinguish this information-heavy section from the lighter surrounding interface.

The phrase 「晴れやかに。」 has expressive, high-contrast Japanese strokes, with a Mincho-like structure and calligraphic flourishes. Its exact font, asset format, and implementation are unverified. It does not appear as a measured text heading in the supplied sample.

Treat this lettering as a distinct visual asset when reproducing the composition. A generic serif can provide a layout placeholder, but cannot reproduce the letterforms exactly.

The green hospital wordmark and four-lobed outline symbol are also artwork. The sampled H1 belongs to the logo region; its inherited 32px font size is not a measurement of either the visible logo lettering or the large hero phrase.

Type Scale

Values below are measured unless explicitly labeled as estimates.

Role Desktop size / line height Mobile size / line height Weight Tracking
MENU label 16px / 22.4px Same 700 0.8px, or 0.05em
Header navigation label 16px / 28px Header link matrix absent 400 Normal
Header service number 10px / 17.5px Header link matrix absent 400 Normal
SERVICE eyebrow 12px / 16.8px Same 400 0.6px, or 0.05em
Service statement 34px / 59.5px 24px / 42px 400 0.1em
Service-row title 18px / 31.5px 16px / 28px 400 Normal
Service-row number 12px / 21px Same 400 Normal
Photo-panel title 28px / 39.2px Same 700 1.4px, or 0.05em
OVERVIEW / RECRUIT caption 11px / 19.25px Same 400 0.55px, or 0.05em
Photo-panel paragraph 18px / 28.8px 16px / 25.6px 400 0.03em
Photo-panel links 18px / 31.5px 16px / 28px 400 0.05em
INFORMATION / Instagram 28px / 39.2px Same 700 0.05em
News date 16px / 24px 16px / 28.8px 500 0.05em
News title 18px / 27px 16px / 24px 500 0.05em
Group-directory heading 36px / 36px 24px / 24px 400 Normal
Facility link 14px / 23.8px 16px / 27.2px 400 Normal
Mobile region-button label Not applicable 16px / 22.4px 700 Normal
About-band Japanese label Approximately 40px, estimated 24px / 36px Mobile 400 Mobile 0.05em
Footer contact text Approximately 16px, estimated 15px / 26.25px Mobile 400 Usually 0.05em

The opening lettering occupies approximately an 800 × 160px visual area on desktop and a 310 × 65px area on mobile. These are estimated artwork bounds, not CSS font sizes.

Icons and Small Marks

The rendered evidence declares Material Icons and includes arrow_forward, arrow_upward, and keyboard_arrow_right ligatures. These correspond to directional controls. Render them as icons; do not expose the ligature strings as ordinary text.

A small raised dot appears beside MENU and several section headings. It is approximately 4–5px across in the screenshots. This is a recurring decorative detail, not a verified notification or status indicator.

Tokens — Spacing & Shapes

The site uses compact rows within very spacious sections. There is no evidence of a single mathematical spacing system; the values below provide a practical vocabulary extracted from the page.

Spacing Scale
Value Observed use Evidence
5px Padding around small header service numbers Measured
8px Navigation vertical padding; small directory insets Measured
10px Label inset after a number; spacing between mobile region controls Measured / derived
12px Mobile news text inset; service-row left padding Measured
13px Service-row vertical padding Measured
16px News-row spacing, service-row right padding, mobile region vertical padding Measured
20px Standard small navigation horizontal padding; desktop news text inset Measured / derived
24px Some panel sublink gaps; mobile footer navigation-group separation Derived
30px Desktop header navigation-column gap Derived
32px Photo-panel gap; desktop news/social inner insets Derived / measured
40px News heading-to-list gap; desktop service heading inset relative to eyebrow Derived
48px Mobile gap between hero section and service section Derived
60px Mobile gap from the news section end to Instagram section start Derived
64px Photo-panel vertical padding; mobile service eyebrow offset from section start Measured / derived
80px / 90px Mobile / desktop news-and-social section top padding Measured
220px Desktop gap between the hero section end and service section start Derived
Layout Measurements
Element Desktop: 1440 × 1000 Mobile: 390 × 844 Evidence
Document height 5434.70px 6989.94px Measured; dynamic content may alter later height
Header logo 200 × 37.23px, at (32, 24) 160 × 29.80px, at (13, 20) Measured
MENU button 82.86 × 31.39px, at (1335.14, 19) Same size, at (294.14, 23) Measured
Header service column 262.14px wide, three 45px rows Not displayed in initial mobile view Measured / visual
Header utility columns Two 104px columns Not displayed in initial mobile view Measured / visual
Recruitment fill 104 × 32px Initial header equivalent absent Measured
Hero photograph Approximately 1152 × 660px, at (144, 330) Approximately 351 × 422px, at (20, 139) Screenshot estimates
Hero section Starts at document y=155; height 854.14px Starts at y=0; height 600.61px Measured
Service section start Document y=1229.14 Document y=648.61 Measured
Service-row width / height 387.06 × 58.5px 295 × 55px Measured
Photo panels Each 632 × 440px; x positions 72 and 736 Each 331.5 × 480px; x position 29.25 Measured
Photo-panel separation 32px horizontally 32px vertically Derived
News-list width 616px 351px Measured
News text width 576px 327px Measured
Social content width 608px after wrapper padding 351px Derived / measured
Mobile regional button Not applicable 351 × 54.39px Measured
Fixed announcement Approximately 300 × 196px Approximately 200 × 130px Screenshot estimates
Announcement edge offsets Approximately 16px right and bottom Approximately 16px right and bottom Screenshot estimates

The 72px desktop content margin is exactly 5% of the viewport. The 19.5px mobile news margin is also 5%. The photo panels use a narrower mobile container: 331.5px, or 85% of the viewport. Do not force every section onto a single identical content width.

Border Radius and Linework
Element Treatment Evidence
Header links, service rows, news rows Square corners Measured 0px radius
Recruitment button Square corners Measured 0px radius
Hospital / recruitment photo panels 8px corners Measured
Hero photo Approximately 8px corners Estimated
Announcement artwork container Approximately 6–8px corners Estimated
Desktop regional headers 50px radius, producing pill ends Measured
About arrow enclosure Thin outlined oval, approximately 160 × 136px on desktop Estimated
Navigation and news separators Approximately 1px solid rules Estimated
Eyebrow decoration Fine diagonal line rising to the right Visible; approximately 150px long in the desktop About band

The page's rounded geometry is selective. Image corners are gently softened, while text navigation remains square and line-based.

Components

Persistent Identity and MENU

Role: maintain orientation while the visitor moves through a long homepage.

The green four-lobed hospital symbol and wordmark form a single horizontal lockup. It measures 200px wide on desktop and 160px on mobile. MENU sits separately at the opposite corner, with a small raised slate dot.

The same logo and MENU positions remain visible in the supplied scrolled captures. This is consistent with fixed positioning. The complete desktop link matrix scrolls out of view; it does not remain alongside them in the lower screenshots.

MENU is a native button with a white background, square corners, and measured padding of 5px 10px 4px 14px. Its inner text uses the main Japanese interface family, even though the button wrapper reports Arial. Use the label's computed typography when matching the visible result.

The logo has no visible full-width backing bar. In the mobile footer capture, content passes behind the persistent logo area. A new implementation should preserve the corner identity while improving separation where overlapping text becomes difficult to read.

Unverified: opening direction, overlay appearance, menu contents, close control, focus behavior, and scroll locking.

Desktop Navigation Matrix

Role: offer immediate routes to care information and institutional utilities.

Three compact columns sit near the top right, before the separate MENU control:

  1. A wide column contains 01, 02, and 03, followed by inpatient care, outpatient care, and recovery-phase rehabilitation labels.
  2. A narrow column contains 「病院案内」 and 「アクセス」.
  3. A narrow column contains 「お知らせ」, 「お問合せ」, and a green 「採用情報」 link.

The numbered rows are 45px high, with 10px number text and 16px / 28px labels. Fine horizontal separators define the rows. The two utility columns are 104px wide and separated from adjacent columns by 30px.

Recruitment is the only filled link in this matrix. Its green rectangle measures 104 × 32px and uses white text. Keep its emphasis compact; the navigation's hierarchy comes primarily from placement and grouping.

Opening Photograph and Lettering

Role: communicate the hospital's physical identity and welcoming tone.

The first screen is a layered composition: white space, dark expressive lettering, then a large rounded photograph. The lettering crosses the image boundary, with most strokes above the sky and the lower strokes overlapping it.

At desktop size, the image begins near y=330px, spans about 80% of the viewport, and retains a landscape proportion close to the referenced asset's 2000:1145 filename ratio. The building entrance sits below the center, with foliage framing both sides.

At mobile size, the frame begins near y=139px, spans about 90% of the viewport, and becomes a tall crop. The entrance and foreground remain legible, while substantial portions of the building's sides are removed. The photo ends near y=561px, followed by a generous white interval before the service background starts around y=649px.

Use a separate lettering layer and a separately cropped image. Preserve the relationship between the phrase and the photo edge. The supplied evidence does not establish a slideshow, video, or parallax effect.

Role: summarize the hospital's care proposition and route visitors to three clinical sections.

A small SERVICE eyebrow precedes the statement:

「あなたの明日を支える」 地域に根ざした医療、 リハビリを提供します。

The text uses 34px / 59.5px on desktop and 24px / 42px on mobile, with 0.1em tracking. The airy three-line structure is central to the section's tone.

The eyebrow and heading are deliberately offset: the heading begins 40px to the right of the desktop eyebrow and 16px to the right on mobile. A thin diagonal rule reinforces this asymmetry in the visible mobile section.

Three full-width link rows follow. Each combines a small number, a Japanese title, and a forward arrow aligned toward the right edge. Padding is 13px 16px 13px 12px. The rows measure 58.5px high on desktop and 55px on mobile.

The visible and linked service set contains three entries. Additional text inside a raw section excerpt is insufficient evidence for a fourth visible service. The supplied views also do not establish the full service-image composition.

Hospital Overview and Recruitment Panels

Role: provide two parallel institutional entry points.

On desktop, two photographic panels occupy a 90%-wide container with a 32px gap. Each measures 632 × 440px and has 8px corners. The left image shows a hospital reception/interior; the right shows a rehabilitation activity involving a staff member and tabletop equipment.

Both images appear darkened beneath white labels. The exact overlay color and opacity were not supplied. A starting overlay around 40–50% black is a recommendation to tune against the actual chosen photographs, not a measured source value.

The visible resting presentation emphasizes a centered Japanese title, a small raised dot, and an English caption: OVERVIEW or RECRUIT. Title typography is 28px / 39.2px; captions are 11px / 19.25px.

The DOM also contains supporting paragraphs, related links, and a wide destination link. The overview panel includes hospital details, access, a patient-message service, and contact. Recruitment includes application requirements and education information.

State limitation: the desktop screenshot does not show all of this detail, and some sampled child bounds overlap. A hover or reveal arrangement is possible, but its trigger and sequence were not tested. Do not present a guessed interaction as observed behavior.

On mobile, measured panels stack at 331.5 × 480px, with a 32px gap. Their paragraph and link typography reduces to 16px, while the Japanese titles remain 28px. The measured mobile text blocks occupy a sequential layout. Their complete visual appearance is outside the supplied mobile screenshots.

News List

Role: present current operational and recruitment announcements.

The INFORMATION heading is centered over a plain list. It uses the recurring small dot and measures 28px / 39.2px, with 0.05em tracking. A 40px gap separates its line box from the first list row.

Each linked item stacks a date above its title. Thin full-width rules divide the entries. There are no thumbnail images, category pills, or elevated cards in the observed list.

Desktop content width is 616px, with text inset 20px on both sides. Dates use 16px / 24px; titles use 18px / 27px. The first item is 89px high. Longer titles create taller entries, so preserve content-driven row height.

On mobile, the list becomes 351px wide, with 12px internal text insets. Dates remain 16px but receive 28.8px line height. Titles become 16px / 24px and wrap naturally. The first measured mobile entry is approximately 110.8px high.

The captured list contains four announcements dated from June through August 2026. Those dates describe content at inspection time, not reusable design constants.

Instagram Grid

Role: show everyday staff activity and the hospital community.

The Instagram heading aligns with INFORMATION on desktop and uses the same size, tracking, and raised-dot treatment. Below it, the screenshot shows six square post previews in a three-column, two-row grid, with narrow white gutters of approximately 4–5px.

The post artwork contains photography, Japanese captions, institutional branding, and small video indicators. Keep this visual density inside the feed; the surrounding page remains quiet.

The DOM identifies an embedded social widget and a separate heading link to the hospital's Instagram profile. The desktop content area is approximately 608px wide. Mobile places Instagram below the news section, in a 351px-wide block, after a measured 60px gap.

The mobile grid's exact column count is not visually established. Widget playback, post navigation, and loading behavior were not exercised. The recorded desktop wrapper height also does not describe the full six-tile screenshot reliably; avoid using that wrapper height as a fixed implementation target.

Regional Group Directory

Role: explain the wider healthcare network and link to affiliated facilities.

This is a substantial information section, with a measured desktop height of approximately 1206px. Its heading uses 36px text on desktop and 24px on mobile.

Desktop DOM coordinates show regional blocks distributed across the section. Each starts with a rounded colored region header, followed by organization names, facility-type labels, and indented facility links. The underlying illustration or map, if any, is not established by the supplied screenshots; do not invent its artwork or geography.

Regional headers use 14px / 23.8px text, 3px vertical padding, and 50px radius. Facility links use the stronger W3 family and slate text. The section introduces blue, muted green, teal, orange, and leaf green for regional classification.

Mobile provides five native region buttons with right-chevron icons. Each measures 351 × 54.39px, uses a gray background, and has 16px 32px padding. Their top positions are approximately 64.39px apart, establishing a 10px gap. Organization and facility text increases to 16px / 27.2px.

These controls suggest disclosure behavior, but no activation was recorded. The extracted facility text and overlapping bounds do not establish which panels were visibly expanded. Implement accessible disclosures if adopting this pattern, and specify their state independently.

A centered green group-site link concludes the section. Its measured mobile size is 160 × 38.75px, with white 13px label text and a forward arrow.

Role: provide a calm, prominent route into the hospital introduction before the footer.

A full-width white band is framed by fine top and bottom rules. Inside it, ABOUT US sits above a diagonal hairline, followed by 「病院案内」 and a large outlined arrow enclosure.

In the desktop screenshot, the band is approximately 315px high. The Japanese label and outlined arrow sit alongside each other, with ample white space around the group. The arrow enclosure appears slightly oval, approximately 160 × 136px.

The mobile DOM measures the link band at 390 × 352.80px, with 64px top and 72px bottom padding. The eyebrow remains 12px; the Japanese label becomes 24px / 36px. The exact mobile arrow geometry is unverified.

The entire observed band links to /about. A large visual arrow is part of this link's presentation, rather than evidence of a separate action.

Role: provide contact information, repeated navigation, institutional policies, and patient-support links.

Desktop uses a broad white footer with three principal groups: hospital identity and address on the left, navigation near the middle, and a patient-message utility on the right. Small copyright and design-link details sit low on the left, with policy and group links across the lower middle.

The patient-message utility includes a short explanation and two thin outlined rows: 「メールを書く」 and 「ご利用実績」. The first points to an external patient-message service; the second points to an internal page. Their appearance is restrained and rectangular.

On mobile, content is vertically reorganized. The visible secondary navigation precedes the contact block. The contact logo measures 200 × 37.23px, larger than the persistent mobile header logo. Its left inset is 23.41px, or about 6% of the viewport. Address and telephone text use 15px / 26.25px.

Numbered footer care links span approximately 343.19px. The smaller utility groups form two columns of approximately 161.59px, with a 20px gap. Policy links then form a relaxed vertical list, followed by group links and small copyright text.

The DOM includes telephone links and an upward-arrow anchor targeting /#. Activation and scrolling behavior were not tested.

Persistent Opening Announcement

Role: promote the announced spring 2027 opening of 「広島城北リハビリテーション病院」.

A rectangular promotional image remains at the lower right across the current desktop and mobile captures. Its anatomy is supplied artwork: an architectural rendering, cherry blossoms, a green circular opening-date badge, a white identity strip, and a green bottom action strip.

Its displayed size is approximately 300 × 196px on desktop and 200 × 130px on mobile, with roughly 16px edge offsets. A light shadow and small corner radius distinguish it from the mostly flat page.

The image links to /information/SN5xFyvg. It is a current announcement link, not a chat launcher. No dismiss control is visible in the captures.

The mobile banner covers part of the service copy and, farther down, footer space. Preserve the observed dimensions when documenting this version; for a new implementation, make obstruction management an explicit design decision.

Tokens — Motion & Interaction

Measured Transition Definitions
Target Computed value What the evidence establishes
Many links, labels, and wrappers 0.3s cubic-bezier(0.4, 0.4, 0, 1) A common transition definition exists; actual changing properties and hover results were not tested
Body background background 0.5s cubic-bezier(0.4, 0.4, 0, 1) A background transition is defined; no theme change was observed
Desktop overview / recruitment panels 1.2s cubic-bezier(0.4, 0.4, 0, 1) 0.6s Longer transition with delay is present; trigger and initial/final states are unverified
Desktop news / social wrappers Same 1.2s duration and 0.6s delay Defined section transition; not proof of a specific scroll-reveal effect
Mobile overview panel 1.2s with 0.6s delay This longer definition remains in the sampled mobile panel
Mobile recruitment, news, and social wrappers 0.3s cubic-bezier(0.4, 0.4, 0, 1) Transition definitions differ from their desktop counterparts
Sampled animation properties none No CSS keyframe animation reported for these sampled elements at extraction time

The source repeats transitions for several custom gradient properties. Reproducing that generated declaration list is unnecessary for a new implementation. Explicitly transition only the properties that a designed interaction changes.

Interaction Evidence and Limits
Interaction Supported observation Unverified detail
Page scrolling Top, middle, and footer views were supplied; corner identity and announcement remain visible Exact fixed/sticky implementation and visibility thresholds
Navigation links Destination URLs are present in rendered evidence Destination-page design and successful activation
MENU Native button exists on both viewports Open/close presentation and keyboard behavior
Photo panels Titles visible; supporting content exists in DOM Hover reveal, click reveal, or other state trigger
Mobile region controls Native buttons with chevrons exist Expansion, collapse, exclusivity, and animation
Social feed Six desktop previews are visible Playback and post-opening behavior
Back to top Upward-arrow link targets the page fragment Smooth scrolling, duration, and focus destination

The capture process waited for finite motion, layout stability, and visible image decoding. It temporarily paused perpetual animations during readiness checks. These precautions support analysis of settled layouts; they do not establish a complete motion inventory.

Recommended adaptation: use short 300ms color and border transitions with the observed easing. Keep content visible by default. Any reveal animation should be progressive enhancement, with a reduced-motion alternative. Do not invent parallax or a rotating hero to fill gaps in the evidence.

Surfaces

Layer Appearance Purpose
Main canvas Solid white Holds the long institutional page together
Service area Very light gray in the visible mobile capture Separates the first practical information section from the opening
Navigation and news White or transparent, fine rules, square geometry Organizes dense information without card elevation
Photographic panels Rounded image crops with darkening and white text Introduces hospital and recruitment destinations
Regional headers Local colored pills on desktop Distinguishes geographic groups
Mobile regional controls Flat warm-gray rectangles Provides compact regional navigation controls
About band White field between horizontal rules Creates a spacious final institutional link
Announcement Branded raster artwork with a subtle shadow Keeps a current announcement above page content

There is no general shadow hierarchy across the homepage. The announcement is a notable exception. Avoid spreading its promotional styling into the clinical navigation and news list.

Imagery

The opening photograph is specific and documentary: the hospital's front elevation, entrance canopy, shrubs, trees, and a broad cyan sky. Its welcoming quality comes from daylight, greenery, and the uncluttered composition.

The other confirmed photographic subjects are the reception/interior and a rehabilitation activity. These support the hospital's functions directly. Social previews show staff, training, and everyday activity, with text embedded in the post artwork.

The announcement uses a different visual mode: a planned-building rendering combined with seasonal blossom graphics and bold opening information. Keep it identifiable as announcement artwork, rather than a photograph of the existing hospital.

Cropping Guidance
  • Preserve the broad building-and-sky relationship in the desktop opening image.
  • Use a dedicated tall crop on mobile that keeps the entrance and foreground visible.
  • Keep headline lettering independent of the photograph so the overlap can change with the viewport.
  • Clip the photograph, not the overlapping lettering, to the rounded image frame.
  • Keep panel text readable over each actual photograph; tune overlays individually.
  • Preserve text within announcement artwork by displaying the complete image rather than cropping it to a generic ratio.
  • Render social artwork naturally. The page does not use pixelated image scaling.
Observed Asset References

These references come from the inspected original-page evidence. They are not bundled files.

Asset or resource Observed reference Evidence limit
Hospital hero photograph https://storage.googleapis.com/studio-design-asset-files/projects/65qmXLwvOV/s-2000x1145_v-frms_webp_d44d84ac-2138-42a3-9e21-7259c5c6724a_small.webp Complete URL appears in DOM excerpts; intrinsic dimensions were not independently decoded
Announcement image Asset reference begins with the same project path and s-800x522_v-fs_webp Remaining filename is truncated; no complete URL can be reconstructed reliably
Announcement destination https://www.hiroshima-hakushima-hp.jp/information/SN5xFyvg Link target observed; destination not inspected
Social embed https://snapwidget.com/embed/1032253 Referenced in the rendered section; internal widget styles were not supplied
Social profile https://www.instagram.com/hiroshima_hakushima_hospital/ Heading-link destination observed
Logo, hero lettering, and panel photographs Visible in current captures Complete asset URLs not supplied

Use authorized original assets when available. Similar stock photography cannot reproduce the same hospital identity, and CSS typography alone cannot reproduce the opening lettering exactly.

Layout & Responsive Behavior

Desktop Composition

The initial header spreads identity and navigation across the full width. The opening image is more narrowly centered at approximately 80% width. Below it, photographic panels and the news/social region expand to a 90%-wide content area.

The news and social region divides into two 648px wrappers. The news wrapper has 32px right padding; the social wrapper has 32px left and 8px right padding. This produces a generous 64px interval between the visible list and feed content.

The group directory occupies a substantial later portion of the page, followed by its green destination link, the About band, and the multi-column footer. Do not collapse the homepage into only its opening image and a few feature cards.

Mobile Composition
Area Observed adaptation
Header Logo reduces from 200px to 160px; MENU stays 16px; desktop navigation matrix is absent
Hero Image becomes a tall crop about 351 × 422px; lettering scales down while retaining overlap
Hero-to-service spacing Measured section gap reduces from 220px to 48px
Service statement Reduces from 34px to 24px; retains 1.75 line height and 0.1em tracking
Clinical links Rows reduce from 18px to 16px text while keeping comfortable row height
Photo panels Change from two columns to one; become 331.5px wide and 480px high
News and social Change from side-by-side sections to a vertical sequence
News Text insets reduce from 20px to 12px; titles wrap at 16px
Network directory Provides five gray region buttons and larger facility-list typography
Footer Navigation, contact, policy, and group content are vertically reorganized
Announcement Width reduces from about 300px to 200px; bottom-right placement persists

The mobile layout is not a uniformly scaled desktop layout. Different modules use different width percentages, and some typography remains unchanged while other text becomes smaller or larger.

Breakpoint limitation: only the two supplied viewport sizes were inspected. The original media-query thresholds and tablet behavior are unknown. A breakpoint around 60–64rem can be a starting recommendation for the main column changes, followed by content-driven testing. It is not a recovered source breakpoint.

Height limitation: the mobile hero image happens to be close to half the captured viewport height. A 50vh frame is a useful approximation for a new build, but the source sizing formula was not supplied.

Do’s and Don’ts

Do
  • Make the hospital photograph and overlapping Japanese lettering the opening's principal visual event.
  • Keep white dominant, with slate #485157 text and selective #88ba28 accents.
  • Preserve the fine-stroke interface appearance and generous Japanese line spacing.
  • Use numbered care links with horizontal rules and right-aligned arrows.
  • Retain the desktop navigation matrix as a distinct pattern from the persistent MENU control.
  • Keep the photo panels paired on desktop and stacked on mobile.
  • Present news as dated text rows with natural wrapping.
  • Keep regional colors scoped to the network directory.
  • Preserve the mobile image's entrance-focused crop.
  • Treat the announcement as a separate current-content component.
Don't
  • Don't replace the hospital homepage's information architecture with a single conversion sequence.
  • Don't substitute the logo's inherited H1 font size for the opening-lettering scale.
  • Don't claim a named hero font without additional evidence.
  • Don't turn every row into a rounded, shadowed card.
  • Don't use bright green for all text or every navigation element.
  • Don't spread the regional directory's five colors across the whole interface.
  • Don't assume concealed DOM content was visible in the captured resting state.
  • Don't invent menu transitions, hover reveals, or accordion behavior.
  • Don't shrink the desktop landscape image proportionally on mobile; preserve the observed tall framing.
  • Don't allow a persistent promotion to make essential text or controls unreachable in a new implementation.

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

  • Increase the MENU button's effective touch area from its measured 31.39px height to at least 44px while retaining the compact visible label.
  • Provide a visible slate focus outline and keyboard access to every navigation link, image destination, and disclosure.
  • Give an implemented menu an accessible name, expanded state, Escape handling, appropriate focus management, and focus restoration.
  • Use semantic buttons with aria-expanded and aria-controls, or native disclosure elements, for regional expansion. Keep hidden panels out of keyboard navigation.
  • Make photo-panel detail available to touch and keyboard users. Essential information should remain accessible without hover.
  • Check green/white small-text contrast. Keep the observed green as a brand token and introduce a separately labeled darker action variant where required.
  • Provide a text alternative for the opening lettering and meaningful alternatives for hospital photographs and announcement artwork.
  • Offer a dismissible or in-flow mobile announcement variant, with safe-area offsets if it remains fixed.
  • Give the persistent logo enough backing or clearance to avoid collisions with scrolled text.
  • Reserve social-feed space and provide a profile link if the external widget is unavailable.
  • Use content-driven panel heights at larger text settings. The measured 440px and 480px heights should become minimums when necessary.
  • Test font fallback, 200% zoom, longer Japanese labels, and reduced motion at intermediate widths.

Agent Prompt Guide

Quick Color Reference
  • Main page: #ffffff.
  • Main visible interface text: #485157.
  • Brand and selected filled links: #88ba28.
  • Text over darkened photography: #ffffff.
  • Fine rules: approximately #d8d5d2, estimated.
  • Service wash: approximately #f0f0f0, estimated.
  • Mobile regional controls: measured #eae9e8.
  • Regional accents: blue #69bbea, muted green #6fb486, teal #5cb8b3, orange #eda639, and leaf green #87ba43.
Overall Prompt

“Create a Japanese institutional hospital homepage inspired by the current Hiroshima Hakushima Hospital composition. Use a white canvas, slate text #485157, fresh green #88ba28, light Japanese sans-serif interface typography, fine horizontal rules, and broad vertical spacing. Place a small green identity at the upper left, a three-column navigation matrix at the upper right, and a separate persistent MENU label with a tiny raised dot. Overlap large expressive lettering such as 「晴れやかに。」 with the top edge of a rounded hospital photograph. Follow with a spacious service statement, three numbered care links, paired darkened photographic panels, a dated news list beside a six-image social grid, a regional facility directory, an outlined About band, and a practical footer. At 390px width, hide the desktop navigation matrix, use a tall entrance-focused hero crop, stack panels and information sections, and retain readable text. Treat unspecified menu and disclosure behavior as new implementation decisions.”

Example Component Prompts
  1. Opening: “Compose a white hospital homepage opening with a large slate Japanese lettering layer crossing the upper edge of a hospital exterior photo. At desktop, place the image near 80% viewport width in its landscape proportion. At mobile, use a 90%-wide tall crop that keeps the entrance visible. Use approximately 8px image corners and generous white space.”
  2. Navigation: “Build three fine-rule navigation columns: a wider numbered care list, a narrow hospital/access list, and a narrow news/contact/recruitment list. Use 16px light Japanese text, 10px numbers, 45px rows, 30px column gaps, and one compact square green recruitment link.”
  3. Service block: “Use a 12px SERVICE eyebrow, a delicate diagonal line, and a three-line Japanese statement at 34px with 1.75 line height and 0.1em tracking. Place three numbered, ruled care links below. Reduce the statement to 24px and row labels to 16px on mobile.”
  4. Photo panels: “Create two 8px-rounded photographic destination panels for hospital information and recruitment. Use reception and rehabilitation imagery, dark overlays, centered white 28px titles, tiny raised dots, and 11px English captions. Stack on mobile. Expose supporting links through a keyboard- and touch-accessible design rather than assuming an undocumented hover state.”
  5. News and social: “Place a centered INFORMATION heading above a plain dated list, beside a centered Instagram heading and a three-by-two square photo grid. Use slate type, 1px warm-gray rules, 16px dates, and 18px desktop news titles. Stack the sections and use 16px titles on mobile.”
  6. Footer: “Create a white hospital footer with identity and address, repeated fine-rule navigation, a patient-message utility with two outlined links, and small policy links. Precede it with a spacious ruled About band, diagonal eyebrow decoration, and a large outlined arrow. Reorganize the footer vertically on mobile.”
  7. Network directory: “Keep affiliated facilities organized by region and organization. Use localized colored pill headers and 14px directory text on desktop. On mobile, use flat gray region controls, right chevrons, and 16px facility text. Any disclosure behavior must include explicit keyboard and expanded-state handling.”

Quick Start

CSS Custom Properties

The following is an implementation scaffold, not recovered site CSS. Measured colors and type values are retained. Estimated rules, the service wash, hero placement, fixed-position behavior, and breakpoint choices are labeled or described as adaptations.

Use .hospital-page as the outer class. The desktop .top-nav expects three child navigation groups. Each .service-row expects a number, label, and arrow. Each .news-row expects a date followed by a title. Photo-panel images use .feature-image, with content in .feature-content.

The text-based .hero-slogan is a serif placeholder. Replace it with authorized lettering artwork for closer fidelity. Image files, menu logic, disclosure behavior, and the social widget must be supplied separately.

:root {
  /* Measured core colors */
  --color-canvas: #ffffff;
  --color-ink: #485157;
  --color-brand: #88ba28;
  --color-utility: #333333;
  --color-on-image: #ffffff;
  --color-region-control: #eae9e8;

  /* Screenshot estimates */
  --color-rule: #d8d5d2;
  --color-service: #f0f0f0;

  /* Measured regional header fills */
  --region-tokyo: #69bbea;
  --region-osaka: #6fb486;
  --region-kyoto: #5cb8b3;
  --region-hiroshima: #eda639;
  --region-yamaguchi: #87ba43;

  /* Source family strings with recommended generic fallbacks */
  --font-ui: 'ヒラギノ角ゴ W1 JIS2004', sans-serif;
  --font-directory: 'ヒラギノ角ゴ W3 JIS2004', sans-serif;
  --font-slogan-placeholder: serif;

  --text-eyebrow: 12px;
  --text-body: 18px;
  --text-section: 28px;
  --text-statement: 34px;
  --leading-copy: 1.6;
  --leading-navigation: 1.75;
  --tracking-label: 0.05em;
  --tracking-statement: 0.1em;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 40px;
  --space-section: 88px;
  --radius-image: 8px;
  --rule-width: 1px;

  /* Measured shared transition timing */
  --ease-site: cubic-bezier(0.4, 0.4, 0, 1);
  --duration-ui: 300ms;
}

.hospital-page,
.hospital-page *,
.hospital-page *::before,
.hospital-page *::after {
  box-sizing: border-box;
}

.hospital-page {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: var(--leading-navigation);
}

.hospital-page img { display: block; max-width: 100%; }
.hospital-page a { color: inherit; text-decoration: none; }
.hospital-page button { font: inherit; }
.hospital-page h1,
.hospital-page h2,
.hospital-page h3,
.hospital-page p { margin: 0; }

.page-container { width: 90%; margin-inline: auto; }

/* Fixed positioning approximates persistence across captures. */
.site-brand {
  position: fixed;
  top: 24px;
  left: 32px;
  z-index: 30;
  width: 200px;
}
.site-brand img { width: 100%; height: auto; }

.menu-trigger {
  position: fixed;
  top: 19px;
  right: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: flex-start;
  padding: 5px 10px 4px 14px;
  border: 0;
  border-radius: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}

.menu-trigger::after,
.heading-dot::after {
  content: '';
  display: inline-block;
  flex: none;
  width: 5px;
  height: 5px;
  margin-left: 4px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: top;
}

.top-nav {
  position: absolute;
  top: 20px;
  right: 160px;
  display: grid;
  grid-template-columns: 262.14px 104px 104px;
  gap: 30px;
}

.nav-row {
  display: flex;
  align-items: center;
  min-height: 45px;
  padding: 8px 20px;
  border-bottom: var(--rule-width) solid var(--color-rule);
  font-size: 16px;
  line-height: 28px;
}
.nav-row--numbered { padding: 8px 30px 8px 8px; }
.nav-number { padding: 5px; font-size: 10px; line-height: 17.5px; }
.nav-row--numbered .nav-label { padding-left: 10px; }

.hospital-page .nav-row--recruit {
  min-height: 32px;
  margin-top: 5px;
  padding: 2px 20px;
  border: 0;
  background: var(--color-brand);
  color: var(--color-on-image);
}

/* Recommended approximation of the opening geometry. */
.hero { padding: 198px 0 20px; }
.hero-slogan {
  position: relative;
  z-index: 1;
  width: 90%;
  margin: 0 auto -28px !important;
  text-align: center;
  font-family: var(--font-slogan-placeholder);
  font-size: clamp(56px, 11.11vw, 160px);
  font-weight: 400;
  line-height: 1;
}
.hero-photo {
  width: 80%;
  margin-inline: auto;
  aspect-ratio: 2000 / 1145;
  overflow: hidden;
  border-radius: var(--radius-image);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The full desktop service composition was not visually supplied. */
.service-section {
  margin-top: 220px;
  padding: 64px 0;
  background: var(--color-service);
}
.service-copy { width: min(100%, 427px); }
.eyebrow {
  position: relative;
  width: fit-content;
  margin-bottom: 69px !important;
  color: var(--color-utility);
  font-size: var(--text-eyebrow);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
}
.eyebrow::after {
  content: '';
  position: absolute;
  top: 72px;
  left: 0;
  width: 150px;
  border-top: 1px solid var(--color-rule);
  transform: rotate(-30deg);
  transform-origin: left center;
}
.service-body { margin-left: 40px; }
.service-statement {
  font-size: var(--text-statement);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: var(--tracking-statement);
}
.service-links { margin-top: 40px; }
.service-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58.5px;
  padding: 13px 16px 13px 12px;
  border-bottom: 1px solid var(--color-rule);
  font-size: 18px;
  line-height: 1.75;
}
.service-number { font-size: 12px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-block: 120px 42px;
}
.feature-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 440px;
  padding: 64px 0;
  overflow: hidden;
  border-radius: var(--radius-image);
  color: var(--color-on-image);
}
.feature-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 45%); /* Recommended starting overlay */
}
.feature-content { width: 70%; text-align: center; }
.feature-title { font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; }
.feature-caption { margin-top: 5px !important; font-size: 11px; line-height: 1.75; letter-spacing: 0.05em; }

/* An accessible detail variant; no unverified hover reveal is assumed. */
.feature-detail { margin-top: 18px !important; text-align: left; font-size: 18px; line-height: 1.6; letter-spacing: 0.03em; }
.feature-sublinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 24px; }
.feature-sublinks a { text-decoration: underline; text-underline-offset: 5px; }

.news-social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 90px;
}
.news-column { min-width: 0; padding-right: 32px; }
.social-column { min-width: 0; padding-inline: 32px 8px; }
.section-heading {
  margin-bottom: 40px !important;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.news-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.news-row { display: block; padding: 16px 20px; border-bottom: 1px solid var(--color-rule); }
.news-date { display: block; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0.05em; }
.news-title { margin-top: 4px !important; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 0.05em; }
.social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.social-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.directory { margin-block: var(--space-section); font-family: var(--font-directory); }
.directory-title { margin-bottom: 32px !important; text-align: center; font-family: var(--font-ui); font-size: 36px; font-weight: 400; line-height: 1.2; }
.region-header { padding: 3px 24px; border-radius: 50px; background: var(--region-color, var(--color-brand)); color: white; font-size: 14px; line-height: 1.7; }
.facility-list { font-size: 14px; line-height: 1.7; }
.region-control { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 32px; border: 0; border-radius: 0; background: var(--color-region-control); color: var(--color-ink); font-family: var(--font-directory); cursor: pointer; }

.about-band { display: flex; justify-content: center; align-items: center; gap: 56px; min-height: 315px; margin-top: 88px; padding: 64px 5%; border-block: 1px solid var(--color-rule); }
.about-title { font-size: 40px; font-weight: 400; letter-spacing: 0.05em; }
.about-arrow { display: grid; place-items: center; flex: none; width: 160px; height: 136px; border: 1px solid var(--color-rule); border-radius: 50%; font-size: 32px; }
.footer-main { display: grid; grid-template-columns: 280px minmax(0, 1fr) 331px; gap: 40px; padding-block: 64px 80px; }
.footer-logo { width: 200px; margin-bottom: 16px; }
.footer-contact { font-size: 16px; line-height: 1.75; letter-spacing: 0.05em; }
.outline-link { display: flex; justify-content: space-between; align-items: center; min-height: 42px; margin-top: 8px; padding: 8px 16px; border: 1px solid var(--color-rule); }
.footer-policies { display: flex; flex-wrap: wrap; gap: 12px 20px; padding-bottom: 48px; font-size: 13px; }

/* Optional current-announcement treatment; dimensions are estimates. */
.announcement { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; width: 300px; max-width: calc(100vw - 32px); overflow: hidden; border-radius: 6px; background: white; box-shadow: 0 2px 6px rgb(0 0 0 / 16%); }
.announcement img { width: 100%; height: auto; }

/* Recommended interaction feedback. */
.nav-row,
.service-row,
.news-row,
.outline-link { transition: background-color var(--duration-ui) var(--ease-site); }
@media (hover: hover) {
  .nav-row:not(.nav-row--recruit):hover,
  .service-row:hover,
  .news-row:hover,
  .outline-link:hover { background-color: var(--color-service); }
}
.hospital-page :focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }

/* Recommended breakpoint; the original threshold is unknown. */
@media (max-width: 64rem) {
  .top-nav { display: none; }
  .site-brand { top: 20px; left: 13px; width: 160px; }
  .menu-trigger { top: 23px; right: 13px; }
  .hero { padding: 87px 0 39px; }
  .hero-slogan { margin-bottom: -12px !important; font-size: clamp(44px, 14.36vw, 56px); line-height: 1.15; }
  .hero-photo { width: 90%; height: 50vh; aspect-ratio: auto; }
  .hero-photo img { object-position: center; }
  .service-section { margin-top: 48px; }
  .service-copy { width: 100%; padding-inline: 16px; }
  .service-body { margin-left: 16px; }
  .eyebrow { margin-bottom: 61px !important; }
  .service-statement { font-size: 24px; }
  .service-links { margin-top: 26px; }
  .service-row { min-height: 55px; font-size: 16px; }
  .feature-grid { width: 85%; grid-template-columns: 1fr; }
  .feature-panel { min-height: 480px; }
  .feature-content { width: 85%; }
  .feature-detail { font-size: 16px; }
  .news-social { grid-template-columns: 1fr; gap: 60px; padding-top: 80px; }
  .news-column,
  .social-column { padding: 0; }
  .news-row { padding-inline: 12px; }
  .news-date { line-height: 1.8; }
  .news-title { margin-top: 0 !important; font-size: 16px; }
  .directory-title { font-size: 24px; }
  .facility-list { font-size: 16px; }
  .about-band { flex-direction: column; gap: 24px; min-height: 352.8px; padding-block: 64px 72px; }
  .about-title { font-size: 24px; line-height: 1.5; }
  .about-arrow { width: 80px; height: 80px; } /* Recommended mobile geometry */
  .footer-main { display: flex; flex-direction: column; gap: 56px; }
  .footer-navigation { order: 1; }
  .footer-contact { order: 2; font-size: 15px; }
  .footer-patient-mail { order: 0; } /* Recommended placement */
  .footer-policies { flex-direction: column; gap: 16px; }
  .announcement { width: 200px; }
}

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

The scaffold intentionally leaves intermediate-width refinement to the implementation. Verify the long rehabilitation label, the serif placeholder, and footer columns with the fonts actually available. For production, enlarge the menu hit area and resolve announcement obstruction as described above.

Tailwind v4 Token Mapping

Optional aliases for a project that already uses Tailwind v4. This does not identify the original site's framework. Define the custom properties above first.

@theme inline {
  --color-hospital-canvas: var(--color-canvas);
  --color-hospital-ink: var(--color-ink);
  --color-hospital-brand: var(--color-brand);
  --color-hospital-rule: var(--color-rule);
  --color-hospital-service: var(--color-service);
  --color-hospital-region-control: var(--color-region-control);

  --font-hospital-ui: var(--font-ui);
  --font-hospital-directory: var(--font-directory);

  --text-hospital-eyebrow: 12px;
  --text-hospital-body: 18px;
  --text-hospital-section: 28px;
  --text-hospital-statement: 34px;

  --spacing-hospital-row: 16px;
  --spacing-hospital-gap: 32px;
  --spacing-hospital-section: 88px;
  --radius-hospital-image: 8px;
  --ease-hospital: cubic-bezier(0.4, 0.4, 0, 1);
}

Sources & Evidence

  • Inspected original and final page: https://www.hiroshima-hakushima-hp.jp/. Both supplied URLs are identical; the recorded response status is HTTP 200 and the page title is 「広島はくしま病院」.
  • Capture record: September 23, 2026, at 20:47:09.206Z, equivalent to September 24, 2026, at 05:47:09.206 JST.
  • Desktop visual evidence: three supplied 1440 × 1000 captures showing the opening, the photographic-panel/news/social area, and the lower About/footer area.
  • Mobile visual evidence: two supplied 390 × 844 captures showing the opening and footer.
  • Rendered evidence: supplied text, destination links, custom properties, element rectangles, computed typography, fills, padding, radii, transition strings, and sampled animation values for both viewports.
  • Observed traversal: the supplied process waited for settled content and traversed intermediate scroll positions. No menu activation, panel hover, regional-button activation, social playback, or destination-page inspection was documented.
  • Limitations: no additional browsing, file access, command execution, or interaction testing was performed for this reference. Font-file resolution, complete asset inventories, exact border colors, overlay opacity, original breakpoints, and concealed-state behavior remain unverified.

This reference describes the current homepage represented by those captures. Estimated values and implementation recommendations are explicitly distinguished from measured original-page evidence.

スタイルやページの種類、ジャンルが近いデザインを集めました。

← デザイン一覧に戻る