MANERUBETA
アドバンスト・メディカル・ケア 採用サイトのWebサイトプレビュー

DESIGN REFERENCE

アドバンスト・メディカル・ケア 採用サイト

採用サイト清潔感信頼感ネイビー淡いブルーグラデーション社員写真幾何学余白レスポンシブ

ネイビーと淡いブルー、ゆったりした和文タイポグラフィ、菱形に切り取った社員写真が特徴の採用サイト。スマートフォンでは応募導線を画面下部に常設。

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

design.md

ダウンロード

Advanced Medical Care / Recruitment — Style Reference

An airy recruitment gateway framed in navy, with people seen through a diagonal mosaic of light.

Website: Advanced Medical Care recruitment Original URL: https://www.amcare.co.jp/recruit/ Final URL: https://www.amcare.co.jp/recruit/ Theme: light; white canvas, pale blue surfaces, navy emphasis, and restrained warm highlights. Inspected: September 13, 2026, 04:31 JST. The supplied retrieval timestamp is September 12, 2026, 19:31:45.314 UTC. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current recruitment homepage, including its navigation, opening hero, company and department introductions, employee stories, president-message feature, career and workplace sections, editorial updates, selection links, application routes, and footer. Visual evidence comprises three desktop captures and two mobile captures; the rendered DOM and computed-style inventory cover substantially more of the document. Linked pages and opened navigation states were not inspected.

Advanced Medical Care presents recruitment as a broad exploration of the company. The homepage provides multiple routes into its work, people, culture, and selection process. Application links remain available while visitors read. Its visual identity combines the composure of a healthcare organization with approachable workplace photography: navy text, bright offices, soft blue fields, generous line spacing, and small amounts of creamy yellow.

The most distinctive composition is the opening hero. A widely tracked Japanese statement occupies a quiet upper-left field while upright employee photographs appear through diagonal, diamond-shaped windows on the right. Pale blue seams connect those windows to the geometry of the brand mark. On mobile, the statement moves above a separately composed photographic area, followed by a full-width news block. The rest of the page alternates spacious editorial introductions, compact story grids, broad photographic features, and a comprehensive sitemap.

How to Read This Reference

  • Measured means a value appears directly in the supplied computed styles or element bounds. Measurements are CSS pixels unless otherwise stated.
  • Derived means a value is calculated from those bounds, such as the gap between adjacent cards.
  • Estimated means an appearance or dimension is read visually from a supplied capture. It is not an extracted CSS declaration or an automated pixel sample.
  • Recommended means an implementation choice for reuse. The CSS below is an adaptation, not recovered source code.
  • Named tokens are descriptive aliases unless an actual source custom property is identified.
  • Computed styles establish the declared font family; font files and individual glyph fallback were not independently inspected.
  • The mobile DOM includes navigation descendants that are absent from the closed-menu screenshot. Their existence and bounds do not establish that an expanded menu was visible or tested.
  • The supplied page-title field is empty. This document's title is an editorial reference title, not a recovered HTML title.

Tokens — Colors

Default Palette

Name Value Reuse token Evidence and role
AMC Navy #30416b --color-ink Measured: major headings, application buttons, links, and icon color. Also present in source --icon-color and --btn-icon-bg.
Pale Blue #e8eef7 --color-soft Measured: president-message banner and footer background. Visually consistent with the mobile hero-copy surface.
White #ffffff --color-page Measured: outlined action backgrounds and mobile header; visually the main page canvas and legal footer band.
Reading Charcoal #2a2a2a --color-text Measured: employee-story text, banner description, footer links, and company information.
Intro Gray #5a5a5a --color-muted Measured: explanatory paragraphs introducing sections.
Slate #6d7991 --color-slate Measured: discussion labels and desktop copyright text.
Warm Highlight #fbf4da --color-highlight Declared source preset: --wp--preset--color--highlight. The visible news badges are creamy yellow, but their own computed background was not supplied. This is a suitable reuse value, not a confirmed badge sample.
Fine Rule approximately #c5cbd6 --color-rule Estimated: pale outlines around secondary controls and the desktop return-to-top circle.
Ambient Blue approximately #cfdef7 --color-ambient-blue Estimated: the stronger blue portions of the hero wash and diagonal seams.
Ambient Warmth approximately #fcf8e3 --color-ambient-warm Estimated: diffuse yellow light within the background.

Navy is the primary action color as well as the heading color. White and pale blue occupy most of the interface; yellow acts as a small category highlight and a low-contrast atmospheric tint. The blue and yellow within the logo remain part of the supplied brand artwork rather than becoming a second button palette.

The desktop news panel appears less opaque than the mobile navy block. Its exact alpha was not extracted. rgba(48, 65, 107, .9) is a recommended approximation, not a measured declaration.

Palette Interpretation

The custom-property inventory contains numerous generic publishing presets, including vivid gradients and shadow recipes. Their presence does not show that the page uses them. Base anchors also report black while nested text in the visible news block appears white. Use the visible component and its relevant descendants to interpret color; do not turn every inherited value into a design token.

No theme selector or dark appearance is established by the supplied evidence.

Tokens — Typography

Japanese Interface and Editorial Text

  • Measured family: 'Noto Sans JP', sans-serif.
  • Measured weight: 400 throughout the sampled navigation, headings, paragraphs, and card text.
  • Base: 16px / 25.6px, with 0.64px letter spacing.
  • Character: open, orderly Japanese sans-serif typography. Scale, tracking, whitespace, and navy color establish hierarchy more strongly than heavy weight.
  • Reuse token: --font-body: 'Noto Sans JP', sans-serif.

Keep the hero's deliberate three-line statement:

一人でも多くの人が
健康で幸せに過ごせる
未来をつくる

The hero is not the largest type on the desktop page: its 45px headline is smaller than the principal 56px section headings. On mobile, the hero is 24px while principal section headings remain 36px. Preserve this distinction instead of applying one generic display size everywhere.

Latin Utility Text

The desktop copyright explicitly computes to Jost, sans-serif, 14px / 22.4px, weight 400, and 0.64px tracking. This supports Jost for that utility line only. The evidence does not establish it as the font for every English label or decorative word.

The corporate logo and anniversary mark are artwork. Do not recreate their lettering by substituting either interface font.

Type Scale

All values below are measured unless marked otherwise. Desktop and mobile values correspond to the two supplied viewports, not to a recovered fluid formula.

Role Desktop size / line height Mobile size / line height Tracking and notes
Base body 16 / 25.6px 16 / 25.6px 0.64px
Hero statement 45 / 72px 24 / 38.4px 0.16em: 7.2px and 3.84px
Principal section heading 56 / 89.6px 36 / 57.6px 0.08em
Career-path and newsletter heading 46 / 73.6px 36 / 57.6px 0.08em
General notices heading 40 / 64px 36 / 57.6px 0.08em
President-message heading 36 / 57.6px 20 / 32px 0.08em
Main introductory paragraph 22 / 39.6px 16 / 28.8px Usually 0.64px; some desktop introductions use 0.88px
Employee-story text 20 / 36px 14 / 25.2px 0.64px
Discussion label 16 / 25.6px 12 / 19.2px Slate text; 0.64px
Newsletter title 20 / 32px 14 / 22.4px Navy; 0.64px
Large text-and-arrow link 22 / 35.2px 20 / 32px Desktop gap 16px; mobile gap 12px
Workplace utility link 20 / 32px 18 / 28.8px Navy
Header application label 15 / 24px 14 / 22.4px in bottom bar 0.64px
Header newsletter label 16 / 25.6px 16 / 25.6px Same 92 × 32px control
Footer group heading 18 / 28.8px 18 / 28.8px 1.44px, or 0.08em
Footer child link 16 / 25.6px 12 / 19.2px Fixed 0.64px tracking
Closing invitation 32 / 51.2px 20 / 32px 0.08em
Large application block 32 / 51.2px 24 / 38.4px White on navy

Some introductory paragraphs use 1.6 rather than 1.8 line height, including the newsletter introduction. This is a small hierarchy with component-specific variations, not a single paragraph rule applied universally.

News headlines appear approximately 14px and slightly heavier in the captures. Their individual text styles were not extracted; the 16px value on the parent anchor is not sufficient to identify the nested label's font size.

Tokens — Spacing & Shapes

Measured root size: 16px on both viewports. Conventional rem conversion is appropriate.

Density: compact navigation and metadata within a page that uses unusually generous section separation. The mobile layout retains substantial whitespace rather than compressing every section.

Spacing Scale

Use Value Evidence
Gap between application pills 8px Derived: desktop and mobile bounds
Gap between news rows 8px Derived: row starts are about 30.516px apart; row boxes are about 22.516px high
Mobile grid column gap 12px Derived: employee and newsletter grids
Logo-group gap 16px Measured: brand anchor
Desktop arrow-link gap 16px Measured
Desktop navigation gap 20px Derived: consecutive link bounds
Mobile feature-banner text inset 32px Derived: banner and heading left coordinates
Desktop wide-panel margin 40px Measured or visually supported: brand, feature banner, closing application block
Desktop date-to-notice gap 40px Measured
Mobile heading-to-introduction gap 48px Derived: principal section text bounds
Desktop employee column gap 52px Derived: 332px cards at x = 170, 554, 938
Mobile overview-card separation 56px Derived
Mobile employee row gap 64px Derived
Desktop employee row gap 100px Derived
Desktop overview column gap 120px Derived
Major section breathing room roughly 120–172px desktop; often 156px mobile Measured/derived examples, not one universal spacing declaration

Border Radius

Element Value Evidence
Text links and sampled card anchors 0 Measured: does not determine the radius of every child image
President-message banner 8px Measured at both viewports
Large navy application block 8px Measured at both viewports
External recruitment-site link boxes 4px Measured
Application pills 9999px Measured
Menu and return-to-top controls Circle Measured: 9999px radius
Desktop hero outer corners approximately 8px Estimated from the capture

Layout Measurements

Element Desktop 1440 × 1000 Mobile 390 × 844
Document height 11788.56px, reported rounded as 11789px 13420.41px, reported rounded as 13420px
Initial header 80px measured 74px effective visible height; main top padding is 74px
Brand-and-anniversary group 195.89 × 44px at x = 40px 160.27 × 36px at x = 20.78px
Primary editorial content 1100px, x = 170px 351px, x = 19.5px
Alternate mobile content width — 348.44px, x = 20.78px, used by several components
Hero outer area approximately 1360 × 840px, x = 40, y = 88 Full viewport width; copy, media, and news stack
Hero headline 530 × 216px, x = 128, y = 184 348.44 × 115.17px, x = 20.78, y = 90
Desktop news overlay approximately 688 × 100px at the hero's lower left Full-width block, approximately 158px high
Employee cards 332px wide; three columns 169.5px wide; two columns
Newsletter cards 340px wide; three columns with 40px gaps 169.5px wide; two columns with 12px gaps
President-message banner 1360 × 425px, x = 40px 369.34 × 466.23px, x = 10.33px
Large arrow control token 3.625rem = 58px 3rem = 48px
Chevron size token 0.5625rem = 9px 0.5rem = 8px
Persistent application buttons 140 × 40px in header 170.22 × 48px, y = 779px, with 17px remaining below
Large application block 675 × 240px 348.44 × 134px
Footer navigation span approximately 1200px, x = 120px Approximately 348.44px, x = 20.78px

The mobile HEADER element itself reports a zero-height bounding box while its visible descendants occupy the top 74px. Reproduce the visible header and content clearance; do not translate that wrapper measurement into a zero-height visual interface.

The repeated 1100px editorial region is more useful than the generic 960px and 1200px publishing presets in the custom-property inventory. A source max-width formula was not supplied; the Quick Start uses a recommended container rule that matches the inspected desktop width.

Components

Persistent Site Header

Role: corporate identity, section navigation, editorial access, and applications.

The initial desktop header is an 80px strip. A corporate logo and anniversary mark sit together at the left. Six plain navigation links lead through the recruitment site's main categories. They are followed by a square-cornered outlined AMC通信 link and two application pills: filled navy エントリー and outlined 募集要項.

The brand group starts 40px from the left. Primary navigation starts near x = 449px; its links use 16px regular text with approximately 20px gaps. The newsletter link is 92 × 32px, while each application pill is 140 × 40px.

The header remains visible in the middle and footer captures. Its scrolled appearance is approximately 64px high, with a smaller brand group and a fine bottom rule. The exact positioning mechanism, compact-state threshold, and animated properties were not supplied.

On mobile, the visible header contains the 160.27px brand group, the same 92 × 32px newsletter control, and a 40px circular hamburger button. Full navigation is absent from the closed state. The extracted DOM contains category buttons and nested links, supporting grouped navigation architecture; its opening behavior remains unverified.

Mission Hero and Diagonal Portrait Mosaic

Role: communicates the recruitment mission and establishes the people-focused identity.

On desktop, the hero is a broad rounded rectangle inset approximately 40px from either side. The headline begins about 88px inside its left edge and 96px below its top. Its three lines use navy, regular weight, 45px type, 72px line height, and unusually open 0.16em tracking.

The photographs occupy a rising diagonal composition from the lower-left portion toward the upper right. People remain upright inside diamond-shaped windows; pale blue seams separate the images. The available scenes include a clinician, headset-based customer service, office work, and a welcoming standing staff member. Keep faces clear of the seams and preserve bright workplace context around them.

The left text field contains a very soft blue-to-warm wash. The gradient does not read as a hard color band, and the outer panel has no pronounced shadow.

On mobile, the structure changes to three blocks: a pale-blue statement panel from approximately y = 74–221px, a full-width photographic panel from approximately y = 221–513px, and the news panel below. The photo area is approximately 4:3. Its composition reveals additional people at the right, so a centered crop of the desktop image is unlikely to reproduce the mobile result. The evidence does not establish whether the original uses separate assets, individual clipped images, or another compositing method.

Hero News Panel

Role: places three current editorial updates within the opening experience.

The desktop panel overlays the hero's lower-left edge. Its anatomy is a narrow News label column, approximately 119px wide, and a three-row list. List anchors begin at x = 176px, measure 536px wide, and are approximately 22.52px high with 8px vertical gaps.

Each row contains a small cream AMC通信 pill followed by white headline text. Long headlines truncate visually with an ellipsis. The badge is approximately 80px wide on desktop and 68px on mobile; those badge widths are visual estimates.

On mobile, the panel becomes a full-width navy section below the images. News moves above the list and receives a thin white divider. The list has a 12px left inset. Preserve the visible one-line preview while retaining the complete article title in the link's accessible text.

Three rows are visible simultaneously. There is no evidence of a ticker, carousel, automatic rotation, or a dismiss action.

Company Overview

Role: offers three routes into foundational company information.

The AMCを知る section begins with a large heading and a muted introduction, then routes to 1ページでわかるAMC, 動画で知るAMC, and 働く人への思い.

Desktop bounds establish an asymmetric composition: the left route is approximately 584px wide, the right routes are approximately 396px wide, and the horizontal gap is 120px. The right column begins alongside the introductory paragraph, while the larger left route begins lower. This creates an editorial stagger instead of three identical cards in one row.

On mobile, all three routes become 351px-wide blocks in a single sequence. Their measured link boxes are approximately 290.39px high with 56px between them. Their image files, crop treatment, and interior decorative details are not exposed by the supplied screenshots or image-source inventory.

Department Routes

Role: separates clinic support, cosmetics and supplements, and corporate functions.

The three department links form large adjacent desktop panels, each approximately 455.33 × 583.58px. Their descriptions are white 16px / 28.8px text, inset about 48px from each panel's left edge. This supports a contrast treatment within the panels, although their exact imagery and background overlays are not visually documented here.

On mobile, the links stack as approximately 348.44 × 316.41px blocks with 56px gaps. Their descriptions change to black 14px / 25.2px text at the full content width. This is a meaningful change in text treatment and composition, not just a reduction in panel size.

The desktop bounds span approximately x = -1 to 1361px. They should not be casually normalized into three 480px viewport thirds; the clipping or wrapper responsible for that offset was not included.

Employee Interview Grid

Role: makes individual careers and experiences the central recruitment content.

Six linked profiles contain role, department, story text, a name, and joining-year information. The desktop layout has three columns and two rows: 332px cards, 52px column gaps, and 100px between row boxes. Card text uses charcoal 20px / 36px regular type.

The mobile layout retains two columns. Each card is 169.5px wide; the column gap is 12px, row gap 64px, and story text 14px / 25.2px. Six profiles therefore become three rows rather than a carousel or six full-width stacked panels.

The link bounds include a substantial region above the story text. Individual media bounds and portrait crops were not supplied, so no exact portrait aspect ratio is claimed. For reuse, keep media, role information, story, and joining metadata inside one coherent link without adding nested interactive controls.

A right-aligned すべての社員インタビューを見る link closes the section. Its large arrow-control footprint changes from 58px to 48px on mobile.

Staff Discussion Cards

Role: introduces shared experiences around childcare and leadership.

Two discussion links align to the same desktop 332px column rhythm as the employee grid, leaving the third column unoccupied. Their text stack is a slate category label followed by a charcoal story heading. Desktop labels use 16px / 25.6px; headings use 20px / 36px.

On mobile, both remain side by side at 169.5px. Labels reduce to 12px / 19.2px, headings to 14px / 25.2px, and the label-to-heading separation is 12px. Different story lengths produce different card heights; the shorter card should not gain an invented block of filler text.

President-Message Feature

Role: introduces regular leadership communications as an editorial feature.

This is a single linked banner, 1360 × 425px on desktop, with an exact #e8eef7 background and 8px radius. The supplied middle capture shows the president's portrait at left fading softly into the blue text surface. At right, a two-line navy heading sits above a charcoal explanation and a large filled circular arrow.

The heading begins at x = 632px and uses 36px / 57.6px with 0.08em tracking. The description is 20px / 36px, separated from the heading box by 32px. The arrow circle is approximately 92px across in the screenshot; it is larger than the general 58px arrow token.

On mobile, the measured banner becomes 369.34 × 466.23px, inset approximately 10.33px. Text begins 32px inside the panel and around 260px below its top. The heading is 20px / 32px; the description is 14px / 25.2px, with 24px between their boxes. This establishes a top media area and lower text area. The exact mobile portrait crop and arrow placement are not captured visually.

Career Paths and Workplace Sections

Role: connects individual growth with practical working conditions.

The career-path introduction occupies a narrow 374px desktop text column at x = 170px. It uses a 46px heading, 20px / 36px description, and a 58px-high text-and-arrow link. On mobile, it expands to the main 351px content width with a 36px heading and 16px / 28.8px body text.

The workplace text occupies a 390px desktop column at x = 880px, reversing the side used by the preceding career introduction. Its three utility links route to workplace benefits, employment provisions, and an office gallery. The mobile text returns to the left content edge, and the links reduce from 20px to 18px.

These bounds establish alternating text placement. They do not establish the exact neighboring image arrangement, which is outside the supplied visual captures.

Newsletter Grid

Role: supplies ongoing company and employee activity through AMC通信.

Three entries contain a category, headline, and date. Desktop links are 340px wide with 40px column gaps. Headlines use navy 20px / 32px; varied title lengths produce visibly different content heights.

On mobile, entries occupy a two-column grid at 169.5px per column. The third entry begins a second row at the left, with a measured 48px row gap after the tallest first-row card. Headlines reduce to 14px / 22.4px.

Keep this editorial grid distinct from the compact three-line hero news panel. The hero summarizes; this section provides richer article previews. Individual preview-image subjects and image paths are not available in the supplied evidence.

Selection Routes

Role: answers questions about application process, desired candidates, career registration, and competing offers.

Desktop contains four adjacent links, each approximately 274.75 × 177.19px, within the 1100px content span. Each has an h3 label at 22px / 39.6px and internal padding of 8px 16px on the link.

Mobile replaces that horizontal arrangement with four 284.44px-wide rows inside a more deeply inset region beginning at x = 52.78px. Each row is 81px high with 20px top and bottom padding. Labels use 18px / 32.4px and leave space for a trailing control. Exact divider styling was not extracted.

General Notices

Role: presents corporate announcements separately from the recruitment newsletter.

Five dated notices appear as lightweight text rows. Desktop dates and titles share a row with a measured 40px gap. The rows begin 60px apart, while each anchor box is 28px high.

On mobile, the date sits above the title with a 4px flex gap. Titles use 14px / 25.2px; their tracking is 0.56px. Row heights expand to accommodate the text, with 28px between successive anchor boxes. Preserve actual dates and semantic time elements instead of turning this list into another image-card grid.

Application Area and Persistent Mobile Actions

Role: makes the next recruitment step available at both the end of the content and during browsing.

The closing invitation leads to a large navy entry block and recruitment requirements, followed by external recruitment-site links. The desktop entry block measures 675 × 240px with 8px corners and 32px white text. On mobile, it measures 348.44 × 134px, with 24px text and 48px horizontal padding.

The external-site link boxes measure 180 × 50px on desktop and approximately 169.5 × 47.08px on mobile. Their destinations are present in the DOM, but their image labels and destination-page behavior were not inspected.

Separately, mobile has a persistent white action bar. Its two pills are 170.22 × 48px, separated by 8px, at x = 20.78px and 199px. They appear in both the top and footer captures. The filled entry button and outlined requirements button preserve the desktop action hierarchy.

The captured buttons end 17px above the viewport bottom. Safe-area handling was not established; supporting device insets is a recommended addition.

Sitemap and Legal Footer

Role: provides a complete navigation index and corporate identity.

The desktop footer is a large pale-blue field followed by a white legal band. Five broad column groups distribute home, company/work, people/workplace, selection/notices, and application routes across approximately 1200px. Their starts are unevenly spaced to fit the content; this is not a set of equal-width cards.

Category labels use navy 18px text with 0.08em tracking. Child links use charcoal 16px text and generous vertical spacing. The first row begins 112px below the footer's top.

On mobile, category groups form a vertical sequence, while child links wrap horizontally within each group. Category labels remain 18px; child links reduce to 12px. The visible footer does not require an accordion to expose its links. Do not confuse this always-visible sitemap with the untested hamburger-menu structure.

The white legal area contains the corporate and anniversary marks, company name, postal address, corporate-site link, privacy link, and copyright. The inspected page independently identifies its operator as 株式会社アドバンスト･メディカル･ケア and links to https://www.amcare.co.jp/. Production credits are not established by the inspected original-page evidence.

A white outlined 58px return-to-top circle appears near the desktop lower-right corner. Its destination is the recorded #top anchor. It is absent from the supplied mobile captures.

Tokens — Motion & Interaction

Treatment Recorded evidence What can be concluded
Header transition 0.2s cubic-bezier(0.4, 0, 0.2, 1) A short transition is defined. Different top and scrolled header appearances are visible; exact trigger and animated properties are unknown.
Plain navigation and legal links background-size 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) Consistent with a background-based underline treatment. Hover activation and direction were not exercised.
Return-to-top control 0.2s cubic-bezier(0.4, 0, 0.2, 1) The control has a transition and a #top link. This does not establish smooth scrolling.
External recruitment links 0.3s A transition duration is defined; the changed appearance is unverified.
Common arrow token 58px desktop, 48px mobile A responsive control size, not motion evidence.
Sampled element animation none No active named CSS animation appears on the sampled elements. This does not rule out scripts, pseudo-elements, or unrecorded states.
Persistent mobile application links Same viewport position in top and footer captures Persistent action availability is visually supported.
Mobile menu and grouped categories Button elements and nested links in DOM Controls exist; opening, closing, focus movement, and submenu animation remain unverified.

The capture process waited for document readiness, image decoding, sampled layout stability, and applicable finite animation completion. It also temporarily paused perpetual animations during readiness checks. These procedures improve the reliability of settled layouts but do not document a motion sequence.

Use restrained motion when adapting the design. A short underline reveal and a compact-header transition fit the recorded values. Parallax, portrait rotation, automatic news movement, image zoom, menu choreography, and video autoplay would be new behavior and should not be described as observed features.

Surfaces

Layer Appearance Purpose
Page canvas White with occasional diffuse blue and warm washes Gives the long document continuity without boxing every section
Hero text field Very light blue and creamy ambient color Keeps the navy mission statement readable
Photographic mosaic Bright workplace photography divided by pale-blue diagonals Establishes people and brand geometry
News panel Navy, with cream badges and white text Concentrates small, timely information
Editorial content Mostly open page surface Supports varied content widths and generous spacing
President feature Exact pale-blue fill and 8px corners Creates a distinct leadership feature
Primary applications Solid navy Provides the strongest recurring action emphasis
Secondary applications White with a thin outline Maintains a clear paired action hierarchy
Sitemap Full-width pale blue Separates comprehensive navigation from editorial content
Legal band and mobile action backing White Preserves readability around dense utility information

No general shadow-based elevation system is established in the captures. Separation comes from image boundaries, background fields, whitespace, thin outlines, and restrained rounding. Generic shadow presets in the DOM are not evidence that cards should receive shadows.

Imagery

Photography supplies the human warmth. The visible hero uses bright clinical and office settings, neutral clothing, natural skin tones, and approachable working expressions. Staff are shown assisting, communicating, presenting, and working, rather than as isolated silhouettes on a colored background.

The hero's geometry is structural. Its diagonal seams should be broad enough to read as pale-blue divisions, but they should not dominate faces. Portraits remain upright; only their framing is diagonal. A broad quiet region is preserved for desktop copy, while the mobile composition gathers more of the people into a compact full-width image.

The president-message feature uses a different photographic treatment: one large portrait blending into the panel background. Keep the office setting visible and fade the boundary gently. An abrupt circular headshot or an isolated cutout would change the banner's character.

Observed Asset References

No original image src, srcset, or background-image file paths were included for the photographs and logos. Asset filenames cannot be recovered from the link URLs.

Visual asset Evidence Reuse guidance
Corporate logo and anniversary mark Desktop and mobile headers and legal footers Use approved artwork with its original proportions and separation
Desktop hero mosaic Opening desktop capture Preserve the diagonal window system and left text clearance
Mobile hero mosaic Opening mobile capture Art-direct for the phone composition; do not assume the desktop center crop is sufficient
President portrait with office background Middle desktop capture Preserve the broad portrait and gentle fade into pale blue
Chevron and external-link symbols Captures and icon custom properties Use restrained geometric strokes; individual source properties contain inline SVG data
Employee, overview, and newsletter media Card geometry and content are recorded, but individual assets are not shown in the supplied visual scope Request or supply authorized assets during implementation; do not invent original filenames or crop measurements

A practical implementation can use a precomposed mosaic in a <picture> element or recreate the windows with clipped images. Either approach is a recommendation. The evidence does not identify the original construction technique.

Layout & Responsive Behavior

The desktop page uses several coordinated widths. The hero and major banners sit within approximately 40px outer margins. Most editorial content occupies a centered 1100px region. The footer expands to approximately 1200px. Narrow text columns and asymmetric overview links create variation within that larger system.

The mobile page retains the same information architecture while changing composition by component. Common content widths are 351px and 348.44px; these come from different wrappers and should not be mistaken for one perfectly uniform gutter formula.

Area Desktop observation Mobile observation
Header Full navigation and paired application pills Brand, newsletter link, and circular menu control
Application access Header controls Persistent bottom controls
Hero Copy and mosaic share one wide panel Copy, art-directed image, and news form separate stacked blocks
Company overview Unequal columns with staggered placement Three full-width routes
Department links Large adjacent panels with white descriptions Stacked links with black descriptions
Employee interviews Three columns, two rows Two columns, three rows
Discussions Two items on the first two tracks of the wider grid Two columns across the content width
President feature Portrait at left, text at right Upper media region and lower text region, as supported by bounds
Newsletter Three columns Two columns; third item starts the next row
Selection Four adjacent links Four deeply inset horizontal rows
General notices Date and title share a row Date above title
Footer Five distributed navigation groups Stacked groups with wrapping child links

The desktop document is approximately 11.79kpx high; mobile is approximately 13.42kpx. Mobile retains substantial section separation, including repeated 156px offsets. It does not simply shrink the desktop page or stack every card into one column.

Only these two viewport widths were supplied. Exact breakpoints, tablet layouts, landscape behavior, and zoom behavior remain unknown. The Quick Start proposes breakpoints for a robust adaptation and labels them accordingly.

Do’s and Don’ts

Do

  • Keep exact navy #30416b and pale blue #e8eef7 as the core pair.
  • Use regular-weight Noto Sans JP, generous line heights, and deliberate heading tracking.
  • Preserve the hero's three-line statement and its quieter scale relative to principal section headings.
  • Keep photographs upright inside the diagonal framing.
  • Art-direct the mobile hero independently when necessary.
  • Preserve the desktop news overlay and its mobile transformation into a full-width block.
  • Maintain two-column employee and newsletter grids on the inspected phone width.
  • Give company-overview routes their asymmetric desktop relationship.
  • Use pills for persistent application actions and modest 8px rounding for large feature blocks.
  • Retain the footer's full navigation depth and clear company information.
  • Keep measured values, visual estimates, and new implementation choices distinguishable.

Don’t

  • Do not reduce the recruitment homepage to a hero and a short generic conversion funnel.
  • Do not place a new set of application buttons inside the current desktop hero's copy area.
  • Do not replace the pale backdrop with saturated blue gradients or a dark overall theme.
  • Do not make every heading bold; the sampled hierarchy is primarily regular weight.
  • Do not turn all content into identical floating cards with large radii and shadows.
  • Do not rotate the people themselves to create the diamond effect.
  • Do not infer a news carousel from the compact panel or animation from a still image.
  • Do not expose hidden menu descendants merely because the DOM provides their bounds.
  • Do not collapse the mobile employee grid to one column without a deliberate new requirement.
  • Do not treat generic publishing presets as the site's applied palette, spacing, or elevation system.
  • Do not invent asset paths, unseen hover states, or mobile media crops.

Recommended Implementation Additions

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

  • Use a semantic navigation landmark, one page h1, section headings, and lists for profiles, notices, and sitemap groups.
  • Give the hamburger an explicit accessible name and expose aria-expanded and aria-controls. Test keyboard access, Escape handling, and focus return in the implemented menu.
  • Preserve the visual 40px menu circle while allowing at least a 44px effective touch target where space permits.
  • Add visible navy focus outlines on light surfaces and white outlines within navy panels.
  • Keep full news headlines in the DOM when the visual preview uses ellipsis.
  • Reserve space for the persistent mobile action bar, include safe-area insets, and ensure focused content can scroll clear of both fixed regions.
  • Use real links for routes and time elements for notice dates. Name external recruitment links even if their visible content is a logo.
  • Provide appropriate image alternatives; suppress duplicate announcements when an image only repeats nearby linked text.
  • Supply image dimensions and responsive sources. Prioritize the opening mosaic and defer lower-page media without causing layout shifts.
  • Reduce motion when requested and keep content accessible without reveal animations.
  • Test the compact two-column cards and long Japanese labels at text zoom. An additional single-column fallback at very narrow widths may be appropriate, but was not observed here.
  • Keep small utility text legible. A slightly larger mobile copyright is a reasonable improvement over the very small text visible in the capture.

Agent Prompt Guide

Quick Color Reference

  • Main canvas: white #ffffff.
  • Headings, key links, filled application buttons: navy #30416b.
  • Feature panels and sitemap: pale blue #e8eef7.
  • Reading text: charcoal #2a2a2a.
  • Introductions: gray #5a5a5a.
  • Quiet labels: slate #6d7991.
  • Cream badge starting point: declared highlight #fbf4da; exact badge fill is unverified.
  • Ambient blue and yellow gradients: very light, diffuse, and visually estimated.
  • Elevation: whitespace and background changes; no general card-shadow system.

Overall Prompt

“Create a Japanese healthcare recruitment homepage inspired by the current Advanced Medical Care site. Use a white canvas, navy #30416b, pale blue #e8eef7, and regular-weight Noto Sans JP. Build a wide desktop hero with a three-line, openly tracked Japanese mission statement at upper left and bright workplace photographs framed by pale-blue diamond seams at right. Add a compact three-row navy news overlay at the lower left. Use a centered editorial width around 1100px, large 56px section headings, spacious introductions, an asymmetric company overview, a three-column employee grid, a broad president-message banner, selection links, and a comprehensive pale-blue sitemap. At 390px, separate hero copy, photography, and news; retain two-column story grids; move paired application pills into a persistent white bottom bar. Keep unverified interactions minimal and label newly chosen breakpoints and media crops as implementation decisions.”

Example Component Prompts

  1. Hero: “A broad healthcare recruitment hero with a quiet pastel field at left, regular navy Japanese copy at 45px with 0.16em tracking, and upright employee photos inside diagonal diamond windows at right. Use approximately 8px outer corners and no heavy shadow. Provide a separate mobile composition with 24px copy above the image.”
  2. News panel: “Three single-line article links on navy, each preceded by a small cream category pill. Put News in a narrow left column on desktop. On mobile, move News above the rows with a thin white rule, and place the panel below the hero image.”
  3. Employee grid: “Six recruitment-story links arranged in three desktop columns and two mobile columns. At the reference widths, use 332px cards with 52px gaps and 169.5px cards with 12px gaps. Keep role, department, story, name, and joining year in one readable hierarchy, without card shadows.”
  4. President feature: “A pale-blue horizontal banner with an office portrait fading into its background, a two-line regular navy heading, a charcoal description, and a large navy circular arrow. Use 8px corners. On mobile, place media above the text with a 32px inner text inset.”
  5. Footer: “A spacious pale-blue recruitment sitemap with five distributed desktop groups, navy 18px group labels, and charcoal child links. On mobile, stack groups but allow child links to wrap horizontally. Finish with a white corporate identity and legal band.”
  6. Mobile actions: “Two equal 48px-high application pills on a persistent white bottom surface: filled navy entry and white outlined requirements. At 390px, use about 21px side margins and an 8px gap. Include safe-area support and enough page clearance for the bar.”

Quick Start

CSS Custom Properties

The following CSS uses measured colors, font sizes, control dimensions, and grid gaps. Container formulas, breakpoints, gradient placement, hover activation, and some media layout rules are recommended adaptations. It is not the original stylesheet. Supply the font files and approved image assets separately.

:root {
  /* Measured colors */
  --color-page: #ffffff;
  --color-ink: #30416b;
  --color-soft: #e8eef7;
  --color-text: #2a2a2a;
  --color-muted: #5a5a5a;
  --color-slate: #6d7991;

  /* Declared preset; its use as a news badge is an adaptation */
  --color-highlight: #fbf4da;

  /* Visual estimates */
  --color-rule: #c5cbd6;
  --color-ambient-blue: #cfdef7;
  --color-ambient-warm: #fcf8e3;

  --font-body: 'Noto Sans JP', sans-serif;
  --font-latin: Jost, sans-serif;
  --weight-regular: 400;
  --text-hero-size: 45px;
  --text-section-size: 56px;
  --text-secondary-size: 46px;
  --text-lead-size: 22px;
  --text-story-size: 20px;
  --leading-heading: 1.6;
  --leading-reading: 1.8;
  --tracking-body: 0.04em;
  --tracking-heading: 0.08em;
  --tracking-hero: 0.16em;

  --content-max: 1100px;
  --wide-max: 1360px;
  --footer-max: 1200px;
  --wide-gutter: 40px;
  --header-height: 80px;
  --radius-panel: 8px;
  --radius-pill: 9999px;
  --arrow-size: 58px;
  --chevron-size: 9px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Recorded transition timings */
  --motion-short: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-underline: 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-page);
  font: var(--weight-regular) 16px/1.6 var(--font-body);
  letter-spacing: var(--tracking-body);
}

img { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; }
main { padding-top: var(--header-height); }
[id] { scroll-margin-top: calc(var(--header-height) + 24px); }

.content {
  width: min(var(--content-max), calc(100% - 160px));
  margin-inline: auto;
}

.wide {
  width: min(var(--wide-max), calc(100% - 80px));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-height);
  padding-inline: var(--wide-gutter);
  background: var(--color-page);
  transition: height var(--motion-short);
}

.brand { flex: 0 0 auto; }
.brand img { width: 195.89px; height: 44px; object-fit: contain; }

.nav-primary {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  white-space: nowrap;
  color: #000;
}

.text-link {
  padding-bottom: 0.01em;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor)
    right bottom / 0 1px no-repeat;
  transition: background-size var(--motion-underline);
}

.header-actions { display: flex; gap: 8px; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 40px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
}

.pill--primary { color: white; background: var(--color-ink); }
.pill--secondary {
  color: var(--color-ink);
  background: white;
  border-color: var(--color-rule);
}

.newsletter-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 92px;
  width: 92px;
  height: 32px;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  background: white;
  font-size: 16px;
  text-decoration: none;
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  color: var(--color-ink);
  background: white;
}

/* Recommended state hook; the original scroll threshold is unknown. */
.site-header[data-compact='true'] {
  height: 64px;
  border-bottom: 1px solid var(--color-rule);
}
.site-header[data-compact='true'] .brand img {
  width: 142px;
  height: 32px;
}

.hero {
  position: relative;
  height: clamp(620px, 58.333vw, 840px);
  margin: 8px 40px 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--color-soft);
}

/* Use approved artwork with the intended desktop text clearance. */
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-heading {
  position: absolute;
  z-index: 1;
  top: 96px;
  left: 88px;
  width: 530px;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-hero-size);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-hero);
}
.hero-heading span { display: block; }

.hero-news {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 119px minmax(0, 1fr);
  width: min(688px, 100%);
  color: white;
  background: rgba(48, 65, 107, .9);
}

.hero-news-heading {
  display: grid;
  place-items: center;
  margin: 0;
  background: rgba(255, 255, 255, .06);
  font-size: 16px;
  font-weight: 400;
}

.hero-news-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  list-style: none;
}

.hero-news-list li { min-width: 0; }
.news-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: white;
  text-decoration: none;
}

/* Badge dimensions and nested news type are visual approximations. */
.news-tag {
  flex: 0 0 80px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: var(--color-highlight);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.news-title {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.section { padding-top: 148px; }
.section--intro { padding-top: 172px; }

/* Optional ambient treatment; gradient geometry is not measured. */
.section--ambient {
  background:
    radial-gradient(ellipse at 52% 8%, var(--color-ambient-warm), transparent 35%),
    radial-gradient(ellipse at 0 0, var(--color-ambient-blue), transparent 42%);
}

.section-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-section-size);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--tracking-heading);
}
.section-title--secondary { font-size: var(--text-secondary-size); }

.section-lead {
  margin: 56px 0 0;
  color: var(--color-muted);
  font-size: var(--text-lead-size);
  line-height: var(--leading-reading);
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 584fr) minmax(0, 396fr);
  gap: 120px;
}

.people-grid, .talk-grid, .newsletter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 100px;
}
.people-grid, .talk-grid { gap: 100px 52px; }
.newsletter-grid { gap: 48px 40px; margin-top: 48px; }

.story-link { display: block; min-width: 0; text-decoration: none; }
.story-title {
  margin: 16px 0 0;
  font-size: var(--text-story-size);
  font-weight: 400;
  line-height: 1.8;
}
.story-label { color: var(--color-slate); font-size: 16px; }
.newsletter-grid .story-title { color: var(--color-ink); line-height: 1.6; }

.arrow-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--arrow-size);
  color: var(--color-ink);
  font-size: 22px;
  text-decoration: none;
}

.arrow-circle {
  display: inline-grid;
  flex: 0 0 var(--arrow-size);
  place-items: center;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  color: white;
  background: var(--color-ink);
}
.arrow-circle::before {
  content: '';
  width: var(--chevron-size);
  height: var(--chevron-size);
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Responsive banner arrangement; exact media geometry is an adaptation. */
.feature-banner {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr) 92px;
  align-items: center;
  gap: 32px;
  min-height: 425px;
  margin-top: 140px;
  padding-right: 48px;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--color-soft);
  text-decoration: none;
}
.feature-photo {
  align-self: stretch;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: linear-gradient(to right, #000 78%, transparent);
}
.feature-copy { padding-block: 48px; }
.feature-copy h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .08em;
}
.feature-copy p { margin: 32px 0 0; font-size: 20px; line-height: 1.8; }
.feature-banner > .arrow-circle { --arrow-size: 92px; }

.notice-list { display: grid; gap: 32px; margin-top: 64px; }
.notice-link { display: flex; gap: 40px; text-decoration: none; }
.notice-link time { flex: 0 0 83px; }
.notice-link p { margin: 0; }

.sitemap { margin-top: 100px; background: var(--color-soft); }
.sitemap-inner {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  width: min(var(--footer-max), calc(100% - 80px));
  margin-inline: auto;
  padding-block: 112px;
}
.sitemap-group + .sitemap-group { margin-top: 72px; }
.sitemap-heading {
  margin: 0 0 16px;
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .08em;
}
.sitemap ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sitemap a { text-decoration: none; }

.legal { padding-block: 28px; background: white; }
.legal-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  width: min(var(--footer-max), calc(100% - 80px));
  margin-inline: auto;
}
.legal address { font-size: 14px; font-style: normal; }
.copyright { color: var(--color-slate); font: 14px/1.6 var(--font-latin); }
.mobile-actions { display: none; }

/* Recommended hover activation using the recorded underline timing. */
@media (hover: hover) {
  .text-link:hover { background-size: 100% 1px; background-position: left bottom; }
}

:where(a, button):focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}
.hero-news a:focus-visible { outline-color: white; }

/* Proposed navigation breakpoint; the original breakpoint is unknown. */
@media (max-width: 80rem) {
  :root { --header-height: 74px; }
  body { padding-bottom: calc(82px + var(--safe-bottom)); }
  .site-header,
  .site-header[data-compact='true'] {
    height: 74px;
    padding-inline: clamp(20px, 5.3285vw, 40px);
    gap: 18px;
  }
  .brand img,
  .site-header[data-compact='true'] .brand img { width: 160.27px; height: 36px; }
  .nav-primary, .header-actions { display: none; }
  .newsletter-nav { margin-left: auto; }
  .menu-toggle { display: block; flex: 0 0 40px; }
  .mobile-actions {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    display: flex;
    gap: 8px;
    padding: 17px clamp(20px, 5.3285vw, 40px) calc(17px + var(--safe-bottom));
    background: white;
  }
  .mobile-actions .pill { flex: 1; min-width: 0; min-height: 48px; font-size: 14px; }
  .mobile-actions .pill--secondary { border-color: var(--color-ink); }
}

/* Proposed content breakpoint; mobile endpoints follow supplied bounds. */
@media (max-width: 48rem) {
  :root {
    --text-hero-size: 24px;
    --text-section-size: 36px;
    --text-secondary-size: 36px;
    --text-lead-size: 16px;
    --text-story-size: 14px;
    --arrow-size: 48px;
    --chevron-size: 8px;
  }
  .content { width: 90%; }
  .wide { width: 94.7%; }
  .hero { height: auto; margin: 0; border-radius: 0; }
  .hero-heading { position: static; width: auto; padding: 16px 5.3285vw; }
  .hero-media { position: static; display: block; aspect-ratio: 4 / 3; }
  .hero-news {
    position: static;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 16px 12px;
    background: var(--color-ink);
  }
  .hero-news-heading {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid white;
    background: none;
  }
  .hero-news-list { padding: 0; }
  .news-tag { flex-basis: 68px; }
  .section, .section--intro { padding-top: 156px; }
  .section-lead { margin-top: 48px; }
  .overview-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .people-grid, .talk-grid, .newsletter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    margin-top: 56px;
  }
  .people-grid, .talk-grid { row-gap: 64px; }
  .newsletter-grid { row-gap: 48px; }
  .story-label { font-size: 12px; }
  .arrow-link { gap: 12px; font-size: 20px; }
  .feature-banner { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; margin-top: 80px; }
  .feature-photo {
    height: 240px;
    mask-image: linear-gradient(to bottom, #000 78%, transparent);
  }
  .feature-copy { padding: 20px 32px 32px; }
  .feature-copy h2 { font-size: 20px; }
  .feature-copy p { margin-top: 24px; font-size: 14px; }
  /* Recommended mobile arrow placement; its original position is unverified. */
  .feature-banner > .arrow-circle { --arrow-size: 48px; justify-self: end; margin: 0 32px 24px; }
  .notice-list { gap: 28px; margin-top: 48px; }
  .notice-link { flex-direction: column; gap: 4px; }
  .notice-link time { flex-basis: auto; }
  .notice-link p { font-size: 14px; line-height: 1.8; }
  .sitemap-inner { display: block; width: 89.3435%; padding-block: 56px; }
  .sitemap-column + .sitemap-column,
  .sitemap-group + .sitemap-group { margin-top: 32px; }
  .sitemap ul { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; }
  .legal-inner { display: grid; width: 89.3435%; gap: 24px; }
  /* Recommended readability adjustment; mobile copyright size was not extracted. */
  .copyright { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .text-link { transition: none; }
}

The header rules describe a closed-menu shell. Implement and test menu behavior before shipping; CSS alone does not provide its focus management or expanded state. Likewise, the compact-header data attribute needs an application-controlled state. The proposed breakpoints should be checked between the two reference widths.

Hero Markup Example

The two filenames below are local implementation placeholders, not observed original asset paths. Supply desktop and mobile compositions with appropriate text clearance. This shell expects the diamond collage to be present in the image artwork; it does not generate the mosaic from unrelated portraits.

<section class='hero' aria-labelledby='recruit-mission'>
  <picture class='hero-media'>
    <source media='(max-width: 48rem)' srcset='hero-phone.webp'>
    <img src='hero-wide.webp' alt='' fetchpriority='high'>
  </picture>

  <h1 class='hero-heading' id='recruit-mission'>
    <span>一人でも多くの人が</span>
    <span>健康で幸せに過ごせる</span>
    <span>未来をつくる</span>
  </h1>

  <section class='hero-news' aria-labelledby='hero-news-title'>
    <h2 class='hero-news-heading' id='hero-news-title'>News</h2>
    <ul class='hero-news-list'>
      <li>
        <a class='news-link' href='/recruit/corporate/newsletter/2026090101/'>
          <span class='news-tag'>AMC通信</span>
          <span class='news-title'>当社が健康社会に貢献するチームジャパンに参画。東京ミッドタウンクリニックでの「次世代型ニュートラシューティカル」臨床試験販売を発表</span>
        </a>
      </li>
      <li>
        <a class='news-link' href='/recruit/corporate/newsletter/2026082601/'>
          <span class='news-tag'>AMC通信</span>
          <span class='news-title'>「社長からの発信」記事更新／私たちの事業の成り立ち・つながり</span>
        </a>
      </li>
      <li>
        <a class='news-link' href='/recruit/corporate/newsletter/2026081901/'>
          <span class='news-tag'>AMC通信</span>
          <span class='news-title'>未来の医療を世界へ。当社が三菱商事株式会社と資本業務提携を行いました</span>
        </a>
      </li>
    </ul>
  </section>
</section>

The article routes and text above are observed examples. Replace them with the destination project's actual content when adapting the design. The empty image alternative assumes the mosaic is atmospheric and that nearby content provides the relevant recruitment message; use a meaningful alternative if the image carries information that is otherwise absent.

Tailwind v4 Token Mapping

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

@theme inline {
  --color-amc-navy: var(--color-ink);
  --color-amc-soft: var(--color-soft);
  --color-amc-page: var(--color-page);
  --color-amc-text: var(--color-text);
  --color-amc-muted: var(--color-muted);
  --color-amc-slate: var(--color-slate);
  --color-amc-highlight: var(--color-highlight);
  --font-sans: var(--font-body);
  --font-utility: var(--font-latin);
  --text-hero: var(--text-hero-size);
  --text-section: var(--text-section-size);
  --text-lead: var(--text-lead-size);
  --text-story: var(--text-story-size);
  --container-editorial: var(--content-max);
  --container-feature: var(--wide-max);
  --radius-panel: 8px;
  --radius-pill: 9999px;
  --spacing-arrow: var(--arrow-size);
}

Sources & Evidence

  • Original and final page: https://www.amcare.co.jp/recruit/. The supplied browser observation records HTTP 200 and the same original and final URL.
  • Capture record: 2026-09-12T19:31:45.314Z, equivalent to September 13, 2026, 04:31:45.314 JST. Desktop viewport: 1440 × 1000; mobile viewport: 390 × 844 CSS pixels.
  • Visual scope: desktop opening hero, middle president-message feature and career-section beginning, and footer; mobile opening hero and footer. These establish visible composition, photographic treatment, persistent controls, and selected scrolled states.
  • Rendered evidence: full page text and link inventory, document heights, sampled element bounds, computed colors and typography, padding and gaps, radii, transition values, and custom properties at both viewports. Measurements for sections outside the attached visual crops are identified as DOM-based findings.
  • Operator evidence: the original page's legal footer names 株式会社アドバンスト･メディカル･ケア, shows its address, and links to https://www.amcare.co.jp/. The corporate destination was not independently inspected for this reference.
  • Interaction limits: scrolling and settled page states are represented. Menu opening, submenu activation, hover, keyboard navigation, form behavior, article navigation, and return-to-top activation were not demonstrated. Recorded CSS timing is not a substitute for an observed interaction sequence.
  • Inspection limits: no original photographic asset paths, font binaries, complete stylesheet rules, tablet captures, or mobile president-banner screenshot were supplied. The browser capture disabled SharedWorkers and service workers. Readiness checks do not guarantee delayed content or unexercised behavior was fully represented.

This reference describes the current page supplied in the inspection evidence. Its CSS, accessibility additions, media assembly options, and intermediate responsive rules are explicitly reusable recommendations rather than claims about unobserved source implementation.

← デザイン一覧に戻る