# Tsuruha Drug Recruitment — Style Reference

> Oversized red ambition, everyday pharmacy scenes, and friendly rounded information panels.

**Website:** [tsuruha-recruit.jp](https://tsuruha-recruit.jp/)
**Original URL:** https://tsuruha-recruit.jp/
**Final URL:** https://tsuruha-recruit.jp/
**Response:** HTTP 200; the supplied observation records no URL change.
**Theme:** light appearance in both inspected viewports.
**Inspected:** September 13, 2026, Japan Standard Time. The supplied capture timestamp is September 12, 2026, at 18:09:13.670 UTC, equivalent to September 13 at 03:09:13.670 JST.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current recruitment homepage. Direct visual evidence covers the desktop opening, statistics, and footer, plus the mobile opening and news/footer. Rendered text and element measurements document the intervening employee stories, FAQ content, social promotion, statistics, and recruitment sections. Linked pages and open navigation states were not inspected.

Tsuruha presents recruitment as an energetic introduction to people and workplace life. A huge red “Be No.1” composition overlaps pharmacy imagery and incorporates employee cutouts. Below it, white panels sit on a pale gray canvas patterned with thin white drawings of medicines and healthcare objects. Heavy Japanese display lettering, oversized English section labels, and large statistics provide the main visual punctuation.

This is a recruitment portal with several audiences and substantial editorial content. Four prominent opening links separate general and nutritionist recruitment, pharmacist recruitment, experienced recruitment, and part-time work. Employee interviews, short-video questions, company figures, news, and a detailed desktop sitemap support those paths. Preserve this breadth when adapting the design.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, and element rectangles. Measurements are rounded where additional precision would not help implementation.
- **Visual estimates** describe shapes, artwork, or boundaries visible in the captures but absent from the supplied style records.
- **Calculated** values express relationships between measured dimensions. They do not establish the original CSS formula or breakpoint.
- **Recommendations** describe a reusable implementation, including the CSS below. They are not claims about original behavior.
- All token names introduced here are descriptive aliases. The exported custom properties primarily concern editor and slider infrastructure; they do not provide an authoritative public brand-token system.
- A computed family declaration identifies the requested font stack, not necessarily the font used for every fallback glyph.
- A sampled anchor rectangle can represent an inline line box rather than its complete visible artwork. Social links and some footer links demonstrate this limitation.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Canvas Gray | `#f5f5f5` | `--color-canvas` | Measured body background in both viewports; visible around panels and beneath the medical pattern |
| Surface White | `#ffffff` | `--color-surface` | Visible header, route cards, statistics surfaces, news panel, and footer panels; also measured on recruitment-section buttons |
| Text Black | `#000000` | `--color-ink` | Measured body text and dark heading segments; also the visible icon and news-badge color |
| Identity Red | `#ff0000` | `--color-brand` | Measured on “People,” red FAQ/statistics heading segments, and the back-to-top control; visually dominates the hero artwork and menu corner |
| Action Red | `#ff1b20` | `--color-action` | Measured general-role recruitment panel, ordinary red pills, interview links, and general-role FAQ CTA |
| Statistics Yellow | `#ffcd00` | `--color-stat` | Measured on the first word of the statistics heading; matching yellow fills are visible on alternating statistics cards |
| Pharmacist Blue | `#064cce` | `--color-pharmacy` | Measured pharmacist recruitment panel, pharmacist interview links, and pharmacist FAQ CTA |
| Entry Cyan | `#009de8` | `--color-entry` | Measured background of the desktop `ENTRY` pill |

Identity Red and Action Red are separate observed colors. The former carries large brand expressions; the latter repeatedly fills navigation and recruitment components. Likewise, Entry Cyan is distinct from the deeper profession-specific blue.

### Supporting Accents

| Name | Value | Suggested token | Restricted use |
| --- | --- | --- | --- |
| Character Blue | `#69b8fc` | `--color-character-blue` | Measured speech capsules beside the junior illustrated character |
| Character Pink | `#ff9acc` | `--color-character-pink` | Measured speech capsules beside the senior illustrated character |
| Fine Divider | approximately `#d8d8d8` | `--color-rule` | Visual estimate for news separators and white statistics-card outlines; exact border color was not supplied |

Social platform icons retain their recognizable platform colors. Their gradients and black/red fills belong to those marks; they are not a general gradient system for the page.

## Tokens — Typography

### Japanese Body and Interface — Noto Sans JP

- **Measured stack:** `'Noto Sans JP', sans-serif`.
- **Roles:** body copy, recruitment labels, article titles, statistics descriptions, navigation, and most Japanese utility text.
- **Observed weights:** `400`, `500`, `700`, and `900`, depending on role.
- **Character:** clear, compact, and practical. Ordinary text remains much quieter than the display headings.
- **Suggested alias:** `--font-body`.

The body declares 16px in both viewports, but actual descriptive paragraphs commonly measure 18px on desktop and 14.4px on mobile. Do not infer every text size from the body declaration.

### Japanese Display — Dela Gothic One

- **Measured stack:** `'Dela Gothic One', sans-serif`.
- **Roles:** the large FAQ and statistics headings, plus Japanese headings in the day-in-the-life section.
- **Observed weights:** `400` on the day-in-the-life headings and `500` on FAQ/statistics headings.
- **Character:** broad, dense glyphs with very heavy silhouettes. Much of the apparent weight comes from the typeface itself.
- **Suggested alias:** `--font-display`.

The statistics heading divides a single phrase into yellow, black, and red segments. This makes typography function as a graphic composition without requiring each word to become a separate panel.

### Latin Display and Utility — Montserrat

- **Measured stack:** `Montserrat, sans-serif`.
- **Roles:** “People,” “THE DAY,” `ENTRY`, news dates, and footer copyright.
- **Observed weights:** `900` for the large section labels, `700` for entry/copyright, and `500` for dates.
- **Suggested alias:** `--font-latin`.

Some footer Japanese text also has a computed Montserrat stack. Japanese glyphs require fallback coverage; the supplied record does not identify the actual fallback font.

### Hero Lettering and Logo

The hero’s red lettering, Japanese slogan strips, and employee cutouts form a tightly arranged composition. The supplied text-element records do not establish whether its lettering is live type, vector artwork, raster artwork, or several combined layers. Do not assign the hero lettering a font based only on resemblance. Treat the logo and collage as supplied visual assets until their construction is verified.

### Type Scale

Sizes below are measured CSS values. Each size/line-height pair is expressed in pixels.

| Role | Family / weight | Desktop | Mobile |
| --- | --- | --- | --- |
| Header slogan | Noto Sans JP / 700 | `11.2 / 16.8` | `9.6 / 14.4` |
| Desktop `ENTRY` | Montserrat / 700 | `16 / 50` | Not visible in the supplied mobile state |
| “People” | Montserrat / 900 | `160 / 128` | `56 / 44.8` |
| FAQ and statistics display | Dela Gothic One / 500 | `115.2 / 115.2` | `50.7 / 50.7` |
| Day-in-the-life introductory heading | Dela Gothic One / 400 | `36.8 / 36.8` | `20 / 20` |
| Day-in-the-life Japanese emphasis | Dela Gothic One / 400 | `60.8 / 60.8` | `32 / 32` |
| “THE DAY” | Montserrat / 900 | `129.6 / 129.6` | `58.5 / 58.5` |
| Employee-interview section title | Noto Sans JP / 700 | `48 / 57.6` | `24 / 28.8` |
| Interview article title | Noto Sans JP / 700 | `24 / 36` | `14.4 / 21.6` |
| Interview introduction / news excerpt | Noto Sans JP / 400 | `18 / 28.8` | `14.4 / 23.04` |
| FAQ introduction | Noto Sans JP / 400 | `18 / 25.2` | `14.4 / 20.16` |
| FAQ card title | Noto Sans JP / 700 | `18 / 25.2` | `14.4 / 20.16` |
| Statistics label | Noto Sans JP / 700 | `24 / 28.8` | `18 / 21.6` |
| Recruitment-panel title | Noto Sans JP / 900 | `48 / 57.6` | `28 / 33.6` |
| Ordinary pill label | Noto Sans JP / 700 | `14.4 / 17.28` | `12.8 / 15.36` |
| News date | Montserrat / 500 | `18 / 21.6` | `16 / 19.2` |

FAQ card titles have measured tracking of `0.72px` on desktop and `0.576px` on mobile, equivalent to `0.04em`. Sampled desktop footer links use `0.72px` at 14.4px, equivalent to `0.05em`. Most other sampled text uses normal tracking.

The large statistics numerals appear approximately 100px tall in the desktop capture, but their font-size declarations were not included. Treat that scale as a visual estimate, not a measured token.

## Tokens — Spacing & Shapes

**Base system:** a conventional 16px root, mixed fixed spacing, and percentage-width containers. There is no evidence of a single universal spacing unit.

**Density:** generous separation between major stories, tighter spacing within recruitment routes, article pairs, and footer navigation.

### Spacing Scale

| Use | Desktop measurement | Mobile measurement |
| --- | --- | --- |
| Opening recruitment-route gap | `10px` | `10px` |
| Interview card separation | approximately `10px`, calculated from card positions | Cards stack; approximately `40px` separates one article’s actions from the next article |
| FAQ horizontal card gap | `25px`, calculated | `10px`, calculated |
| People section top padding | `100px` | `50px` |
| FAQ section top padding | `100px` | `20px` |
| Statistics section padding | `170px 30px 0` | `60px 10px 0` |
| Gap between the two recruitment panels | `120px`, calculated | `60px`, calculated |
| News section padding | `120px 0 60px` | `60px 0 30px` |
| Footer padding | `100px 0 20px` | `40px 0 14px` |
| Standard pill padding | `15px 60px 15px 30px` | `12px 40px 12px 20px` |
| White pill inside recruitment panel | `18px 60px 18px 30px` | Same measured padding |

The extra right padding in ordinary pills reserves room for an arrow. Preserve that asymmetry instead of centering text inside equal horizontal padding.

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Desktop `ENTRY` pill | `50px` | Measured |
| Ordinary filled and outlined pills | `40px` | Measured |
| Profession-specific FAQ CTA | `10px` | Measured |
| Large recruitment panel | `100px` desktop; `20px` mobile | Measured |
| Character speech capsule | `999px` | Measured |
| Back-to-top control | `50%` | Measured |
| Opening white route card | approximately `10px` | Visual estimate |
| Statistics card | approximately `30px` | Desktop visual estimate |
| Desktop footer panel | approximately `35–40px` | Visual estimate |
| Hero media lower-right corner | approximately `100px` desktop; `40px` mobile | Visual estimate |

Large rounded panels and modestly rounded route cards have different jobs. Avoid applying the 100px recruitment-panel radius to every component.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Total document height | `9881.94px` | `8833.58px` |
| Main section container | `1353.59px` wide at `x = 43.20` | `351px` wide at `x = 19.5` |
| Container relationship | Calculated `94%` width, `3%` margins | Calculated `90%` width, `5%` margins |
| Header home-link rectangle | `470 × 90px`, starting at `x = -10` | `390 × 50px`, starting at `x = 0` |
| Hero section | `1440 × 777.59px`, starting at page top | `390 × 197.44px`, starting at `y = 50` |
| First recruitment route | `460.80 × 110px` at `x = 907.20`, `y = 577.59` | `351 × 60px` at `x = 19.5`, `y = 411.23` |
| Interview article link | `644.72 × 506.89px` | `336.95 × 292.72px` |
| FAQ card width | `285.81px` | `152.95px` |
| Recruitment panel | `1353.59 × 700px` | `351 × 770.45px` |
| News section width | `1200px` | `351px` |
| News excerpt width | `760px` | `311px` |
| Footer height | `1482.84px` | `263.97px` |

The visible media frame is consistent with a 16:9 area approximately 1382.4px wide on desktop and 351px wide on mobile. Those widths are calculated from the section heights and supported by the visible right edge; the media element’s own rectangle was not exported.

## Components

### Persistent Identity Header

**Role:** retain brand recognition and access to recruitment navigation during a long page visit.

On desktop, the identity occupies a white tab attached to the upper-left edge. Its lower-right corner is strongly rounded and it casts a soft shadow. Inside are the red square logo, black recruitment wordmark, a thin vertical divider, and a small two-line Japanese slogan.

The visible tab extends approximately 460px across the viewport, while its measured home-link rectangle begins 10px outside the left edge and is 470px wide. The header element itself has a zero-height rectangle; its child controls establish the visible interface.

At 390px, the white identity strip spans the viewport and measures 50px high. The logo and slogan shrink, while the red menu corner overlaps the right side. The same header remains at the top in the supplied scrolled captures. This supports persistent positioning, although the exported records do not include the exact positioning declaration.

### Entry Pill and Menu Corner

**Role:** separate the direct entry shortcut from broad site navigation.

The desktop `ENTRY` control is a cyan `115 × 50px` pill at `top: 20px`, with its right edge 140px from the viewport edge. Its label uses white Montserrat at 16px/700. The observed href is `/#info-1`; it is a same-page link, not evidence of an application form opening immediately.

The menu is a red corner shape with a large concave-to-the-page silhouette created by its rounded lower-left edge. It occupies approximately `120 × 120px` on desktop and `80 × 80px` on mobile. The mobile capture clearly shows three white horizontal lines above `MENU`.

The cyan entry pill is absent from the supplied mobile appearance and rendered link list. The menu remains visible.

Navigation groups exist outside the visible viewport in the closed-state DOM: sampled desktop groups begin at `x = 1470`, and mobile groups at `x = 440`. Their contents include company information, recruitment categories, news, welfare, and part-time recruitment. Their offscreen position does not establish the open drawer’s dimensions, animation, backdrop, or keyboard behavior.

### Workplace Hero and Employee Collage

**Role:** establish scale, ambition, and a recognizable human workplace.

The image area is left aligned and stops short of the right viewport edge. Its lower-right corner is rounded. The supplied desktop capture shows pharmacy products and dispensing equipment; the mobile capture shows people inside a store. Keep the setting specific enough to communicate the actual workplace.

A large red, two-line “Be No.1” composition overlaps the lower-left part of the media and extends onto the pale background below. Five employee cutouts interrupt the letterforms and their surrounding space. Three short Japanese slogan strips sit across the middle in white-on-red treatment.

**Visual estimates:** the collage spans roughly 800px on desktop and 310–320px on mobile. Its lower edge extends approximately 100px below the desktop media and 60px below the mobile media.

The artwork should feel assembled as a single composition. Preserve cutout edges, relative person sizes, intentional overlap, and the placement of the slogan within the lettering. A normal text heading beside a separate staff photograph would lose these relationships.

### Opening Recruitment Routes

**Role:** let visitors choose their recruitment audience immediately.

Four white rounded rectangles contain bold red Japanese labels and a small right-aligned arrow entering a vertical bracket. The entire rectangle is linked.

The current destinations are:

| Source label | Destination |
| --- | --- |
| `新卒採用｜総合職&管理栄養士` | `/sogo/` |
| `新卒採用｜薬剤師職` | `/yakuzaishi/` |
| `キャリア採用｜薬剤師職 / 登録販売者` | `/career/` |
| `パート・アルバイト` | `/part-time/` |

On desktop, the stack is 460.8px wide, sits 5% from the right edge, and begins 200px above the hero section’s lower boundary. Every route is 110px high with a 10px gap.

On mobile, it becomes a 351px-wide stack in the normal reading sequence, with 60px-high routes. The first route begins at page coordinate 411.23px. The gap between the media section’s lower edge and this first route is 163.80px; this area accommodates the projecting collage and deliberate breathing room.

### Introduction Panel

**Role:** explain the employer’s community focus and ambition after the route choices.

The visible beginning is a white panel with oversized red and black Japanese lettering. On desktop it starts beneath the projecting hero composition; on mobile it follows the four recruitment routes with approximately 20px separation.

The rendered text describes community-rooted service, customer-first thinking, scale, and future growth. The complete panel and its text styles are not present in a dedicated capture, so its full artwork and internal geometry remain only partially documented.

### Day-in-the-Life Feature

**Role:** introduce two supervisor stories through a distinct editorial feature.

The rendered layout contains three levels of white display text: a smaller Dela Gothic One introduction, a larger Japanese emphasis, and very large Montserrat “THE DAY.” Two links lead to the dispensing-operations and store-operations supervisor stories.

On desktop, the two pill links share a horizontal row; one is deep blue and the other action red. On mobile, they stack vertically with a 15px gap and measure approximately `264.55 × 39.36px` each.

Text styling and placement are measured. The feature’s full media treatment is not visible in the attached section captures, so do not invent a specific image montage or playback interaction.

### Employee Interview Section

**Role:** connect recruitment categories with individual experiences.

The desktop heading row places a huge red “People” label on the left and the Japanese section title with supporting copy on the right. Two linked article blocks sit beneath it. Each has a `Pick Up` marker, a media region, a bold article title, and two separate audience links beneath the article.

The article links measure approximately 644.72px wide on desktop. Title content is inset 30px from each side. On mobile, article links stack at 336.95px wide and title insets reduce to 16px.

The two action pills under each mobile article remain side by side and wrap their labels to two lines. Their measured heights grow to 54.72px. This is a useful reminder that pill height follows content here; the source does not force every mobile pill into one line.

General-role interview actions use red, while pharmacist interview actions use deep blue.

### FAQ Content Grid

**Role:** answer work, workplace, systems, and career questions through short-video content.

The section title uses black for `よくある` and red for `質問`, both in Dela Gothic One. A centered explanatory paragraph follows.

The content grid has four columns on desktop and two columns on mobile. Each linked item groups a media region, a bold question, and a recruitment-category label. The provided links lead to question detail pages; embedded playback behavior was not exercised.

Measured title offsets are consistent with square media slots followed by about 10px desktop or 5px mobile spacing. This is a geometry-based inference because the media rectangles were not exported.

Two large category CTAs follow the grid. Desktop versions sit side by side and measure approximately `396.33 × 121.16px`. Mobile versions stack at 315.91px wide, with content-dependent heights of about 81px and 91px. Both use a 10px radius, white text, and profession-specific red or blue fills.

### Social Recruitment Characters

**Role:** make practical recruitment questions approachable through recurring illustrated personalities.

The desktop composition places two hand-drawn staff characters around a central account introduction. Their black outlines, white coats, blue or pink clothing accents, and small colored speech capsules provide a lighter visual register than the giant headings.

The center contains an account label, graphic heading, short bold description, and Instagram, YouTube, and TikTok links. The desktop screenshot shows circular platform marks approximately 50px across. Mobile link widths measure 40px, although the exported inline rectangles are only 24px high and should not be treated as complete icon bounds.

Character biographies and speech text appear in desktop rendered text but are absent from the mobile rendered text. The central account introduction and social links remain. Mobile illustration placement is not documented by a dedicated screenshot.

### Statistics Heading and Cards

**Role:** turn employment figures into a strong, scannable section.

The heading `数字で知るツルハ` uses yellow, black, and red in sequence. At desktop width it reads on one line. On mobile, `数字で知る` forms the first line and `ツルハ` occupies the next line. This is an observed composition change, not merely a smaller font.

Desktop cards form four columns. The visible first row alternates white and yellow surfaces. White cards have a fine gray outline, red labels and numerals, and black units. Yellow cards reverse major labels and numerals to white while retaining black icons, units, and date notes.

A typical card contains:

1. A centered Japanese metric label, sometimes with an additional reporting-period line.
2. A black outline illustration, such as a beach umbrella, group of people, money bag, or person.
3. A dominant numeral with a much smaller unit aligned near its baseline.
4. An optional explanatory line or secondary figure.
5. A small reporting-year note near the bottom.

**Desktop visual estimates:** cards are approximately `301 × 362px`, with 30px horizontal gaps, 40px row gaps, and 30px corner radii.

Mobile measurements support two narrow columns approximately 160.5px wide, separated by 10px. The bonus card and parental-leave card span the full approximately 331px inner width. Preserve those exceptions: the bonus sentence and paired parental-leave figures need more horizontal space.

The source repeats the average-age metric in two positions. It also shows different female parental-leave percentages in the two rendered snapshots: 99.2 on desktop and 67.2 on mobile, while the associated counts remain 126 out of 127. The evidence does not establish whether this is an unfinished dynamic update or a content discrepancy. Do not use either capture as a verified HR dataset, and do not infer a count-up animation from the difference alone.

### Profession-Specific Recruitment Panels

**Role:** give general/nutritionist and pharmacist recruitment substantial, distinct entry sections.

Two large panels use action red and deep blue respectively. Both measure 1353.59px wide and 700px high on desktop, with 100px radii. The general-role copy is positioned on the left; pharmacist copy is positioned on the right.

Each content group contains a heavy white Japanese role heading, a small recruitment label, a descriptive paragraph, and two white pill links with text matching the panel color. The white links measure about 378.34px wide and 53.28px high on desktop.

On mobile, each panel becomes 351px wide and approximately 770.45px high, with a 20px radius. Both titles begin roughly 442px below their panel’s top, indicating a substantial visual area above the copy. Exact media crops were not included in the supplied element records. The copy width becomes approximately 315.89px, and the white links remain comfortably wide.

### News Panel

**Role:** provide recent recruitment and professional-activity updates without another oversized display section.

The desktop news section is a 1200px-wide layout with the Japanese title and English “Information” label at the left and the article list at the right. Mobile changes to one column.

The mobile screenshot shows a shared white rounded panel containing three linked entries. Each entry has a Montserrat date, a compact rectangular black category badge with bold white text, and a Japanese excerpt beneath. Thin gray horizontal rules separate the entries. The list has approximately 20px horizontal padding, producing a measured 311px text width inside a 351px panel.

The centered red `一覧はこちら` pill sits outside the white list panel. It measures approximately `136.81 × 39.36px` on mobile and links to `/information/`.

The visible ellipses are part of the rendered excerpts. The evidence does not establish whether truncation occurs on the server or through CSS.

### Desktop Sitemap and Compact Mobile Footer

**Role:** offer extensive desktop navigation and a much shorter mobile conclusion.

The desktop footer includes entry links, a left column of content and utility panels, and wider recruitment-navigation panels to the right. A panel heading combines a short red dash, bold Japanese text, and a smaller English subtitle. Utility panels add a fine red circular arrow at the right.

The career panel contains a general introduction column and separate registered-seller and pharmacist link columns. Rounded white panels sit directly on the medical-pattern canvas, without a strong card-shadow system.

At 390px, these extensive entry and sitemap blocks are absent from the rendered link list and visible footer. Three corporate links stack above the centered recruitment logo and copyright. The measured footer height falls from about 1483px to 264px.

The footer visibly includes `Copyright TSURUHA Holdings ,Inc. All rights reserved.` This is a copyright statement, not evidence of design or development authorship.

### Back-to-Top Control

**Role:** provide a compact return path after a long scroll.

The scrolled screenshots show a red circular control with a white upward chevron near the lower-right corner. It appears approximately 50px across on desktop and measures 45px on mobile. The mobile screenshot places it about 10px from the right and 30px above the bottom edge.

Its href is `/#`, and the computed transition is `0.3s`. The initial mobile element rectangle is below the visible viewport, while the scrolled capture shows it onscreen. The reveal threshold and actual scrolling behavior were not tested.

## Tokens — Motion & Interaction

| Element or treatment | Supplied evidence | What remains unverified |
| --- | --- | --- |
| Desktop `ENTRY` pill | Computed transition `0.5s` | Changed properties and hover appearance |
| FAQ card titles | Computed transition `0.5s` | Color, position, or other target state |
| News dates and excerpts | Computed transition `0.5s` | Actual hover treatment |
| Sampled desktop footer links | Computed transition `0.5s` | Actual hover treatment |
| Profession FAQ CTAs | `opacity 0.3s, transform 0.3s` | Opacity endpoint, movement distance, and trigger |
| Social links | `opacity 0.3s, transform 0.3s` | Hover/focus endpoint and movement distance |
| Back-to-top control | Computed transition `0.3s`; visible in scrolled captures | Reveal threshold and scroll easing |
| Mobile day-in-the-life headings | Animation summaries `0s 0.2s`, `0s 0.4s`, and `0s 0.6s` | Animation names and meaningful keyframes; these records do not prove visible staggered motion |
| Hero workplace media | Different workplace frames in the desktop and mobile captures | Video element, autoplay, loop duration, audio state, playback controls, and sequence |
| Statistics values | One percentage differs between snapshots | Whether any numeric animation exists or had completed |

The inspection process waited for document loading, visible image decoding, sampled layout/text stability, and finite animation settling within stated time limits. Perpetual animations were temporarily paused for readiness checks and then resumed. These preparations improve capture stability but do not establish every delayed state or interaction.

For a new implementation, short 200–300ms opacity or transform feedback is compatible with the measured transition vocabulary. Any proposed movement distance, easing, media playback, menu transition, or numeric animation must be treated as an addition.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Pale gray with white healthcare line drawings | Connects distant sections and the footer |
| Identity tab | White, strongly rounded at one corner, soft shadow | Keeps the logo legible above imagery |
| Hero media | Full-color workplace image with one large rounded corner | Establishes the setting |
| Route card | White, modest radius, red label and arrow | Separates recruitment audiences |
| Main content surface | Broad white region | Gives dense display headings and content room to breathe |
| Statistics card | Alternating outlined white and solid yellow | Creates rhythm within repeated data |
| Recruitment panel | Large solid red or deep blue field | Gives each professional route a clear identity |
| News and sitemap panel | White with restrained rules and rounded edges | Organizes functional information |

Most content panels appear flat. Soft shadows are most evident around persistent header utilities; avoid turning every card into an elevated tile.

## Imagery

The strongest photographic theme is ordinary work: medicine shelves, dispensing counters, store aisles, and employees in professional clothing. The background is detailed and recognizable, while the red collage provides the visual foreground.

The employee cutouts are an essential part of the hero rather than decorative portraits placed nearby. Their white coats connect visually with the white UI surfaces, while their varied poses soften the enormous letterforms. Use clean, high-resolution transparency and preserve natural proportions.

Three illustration languages coexist with clear roles:

- Thin white healthcare-object outlines form a low-contrast background pattern.
- Black outline pictograms explain statistics.
- Looser black-outlined staff characters add personality to social recruitment content.

Do not substitute emoji or a single generic icon family for all three roles.

### Observed Asset References

No original asset filenames, media URLs, or downloadable font files were supplied. The following are asset requirements identified from the original-page evidence, not claimed source paths.

| Asset | Observed use | Implementation note |
| --- | --- | --- |
| Recruitment logo lockup | Header and footer | Preserve the red square, Japanese wordmark, and English recruitment subtitle |
| Workplace media | Hero | Support separate responsive crops; playback format is unverified |
| “Be No.1” employee composition | Hero overlap | Preserve lettering, five cutouts, and slogan-strip relationships |
| Healthcare pattern tile | Page margins and footer | White linework on the gray canvas; keep it behind readable content |
| Statistics pictograms | Metric cards | Black outline illustrations with a consistent visual size |
| Staff character illustrations | Social recruitment promotion | Preserve their hand-drawn quality and limited blue/pink accents |
| Social platform marks | Account links | Retain recognizable platform identity and provide accessible names |
| Article and recruitment media | Measured editorial and role sections | Exact files and crops were not included in the evidence |

Use authorized assets when available. CSS can reproduce the layout and surfaces; it cannot reproduce the identity of the actual logo, employee collage, or character illustrations by itself.

## Layout & Responsive Behavior

The main desktop content width is 94% of the viewport. Mobile reduces this to 90%, increasing the relative outer gutter. Nested content widths vary by section rather than following one universal inner container: the People section uses approximately 96% of its section width, the FAQ grid approximately 90%, and statistics use explicit 30px desktop or 10px mobile padding.

| Area | Desktop behavior | Mobile behavior |
| --- | --- | --- |
| Header | Separate left identity tab, cyan entry pill, red menu corner | Full-width 50px identity strip and smaller menu corner; no visible cyan entry pill |
| Hero routes | Overlap the hero’s lower-right region | Follow the hero collage in a full-width stack |
| People heading | English display at left, Japanese introduction at right | English display, Japanese title, and copy stack |
| Interview articles | Two columns | One column; two action pills remain paired under each article |
| FAQ content | Four columns | Two columns |
| FAQ category CTAs | Two side-by-side blocks | Two vertically stacked blocks |
| Statistics title | One line | Two lines with the brand word on the second line |
| Statistics cards | Four columns | Two columns, with bonus and parental-leave cards spanning both |
| Recruitment panels | Wide 700px panels with alternating copy sides | Tall panels with visual area above the copy |
| News | Heading beside list | Heading above shared list panel |
| Footer | Extensive entry and sitemap panels | Corporate links, logo, and copyright only |

These differences explain why the mobile page is shorter overall despite several stacked sections: the large desktop footer is removed from the rendered mobile layout.

No tablet viewport or intermediate breakpoint was supplied. The CSS below uses 767px as a recommended implementation breakpoint and introduces intermediate safeguards; it does not claim that the original site uses that breakpoint.

## Do’s and Don’ts

### Do

- Preserve the distinct identity red, action red, pharmacist blue, and entry cyan.
- Use Dela Gothic One for the observed Japanese display role and Montserrat for large Latin section labels.
- Keep the hero collage overlapping both workplace imagery and the surrounding canvas.
- Give all four recruitment audiences prominent opening routes.
- Use strong radius changes between small route cards and large recruitment panels.
- Preserve the alternating statistics surfaces and mobile full-width exceptions.
- Keep black outline illustrations and small units subordinate to large numerals.
- Allow mobile interview action labels to wrap while keeping their pair together when space permits.
- Keep the medical pattern subtle and away from unprotected body text.
- Retain the substantial desktop sitemap and explicitly plan the shorter mobile footer.

### Don’t

- Don’t reduce this portal to one application button and a few generic feature cards.
- Don’t use deep blue and entry cyan interchangeably.
- Don’t assign a font to the hero artwork without asset-level evidence.
- Don’t shrink the entire desktop composition uniformly to fit a phone.
- Don’t force every mobile statistics card into a narrow half-width column.
- Don’t use pill-shaped category badges for news; the observed badges are compact black rectangles.
- Don’t add shadows, gradients, or floating motion to every white panel.
- Don’t infer a carousel from exported slider-related custom properties.
- Don’t claim autoplay video, count-up statistics, or a specific menu animation from these captures.
- Don’t copy inconsistent statistics into a production dataset without checking the underlying content.

## Recommended Implementation Additions

These recommendations are not verified original-site features:

- Implement the menu with a real button, an accessible name, `aria-expanded`, controlled focus, and Escape handling. Keep closed navigation out of the keyboard sequence.
- Provide a single meaningful page heading even if the hero title is artwork. Use semantic heading levels for subsequent sections instead of reproducing the source’s multiple section-level H1 elements.
- Give decorative cutouts and pattern illustrations empty alternatives when nearby text supplies their meaning. Provide meaningful alternatives for editorial images.
- Review color contrast before shipping. Calculated contrast is approximately 1.5:1 for white on statistics yellow, 3.9:1 for white on action red, and 3.0:1 for white on entry cyan. Use black on yellow and darker action variants where small text requires stronger contrast.
- Increase short mobile pills from the observed roughly 39px height to a minimum 44px touch target. Preserve the 60px opening routes.
- Use one validated data source for metric values, reporting periods, and repeated figures. If counters are added, keep the final value available to assistive technology and reduced-motion users.
- If the hero uses video, supply an appropriate poster, reserve its dimensions, provide a pause mechanism when needed, and avoid making essential information depend on playback.
- Reserve image dimensions and load below-the-fold editorial media progressively. Give the initial hero assets priority without delaying readable recruitment links.
- Ensure that destinations omitted from the mobile footer remain reachable through accessible navigation.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: `#f5f5f5` with restrained white medical linework.
- Panels: `#ffffff`; ordinary text and outline icons: `#000000`.
- Large identity expressions: `#ff0000`.
- General-role actions and recruitment panel: `#ff1b20`.
- Pharmacist actions and recruitment panel: `#064cce`.
- Statistics accent: `#ffcd00`.
- Desktop entry shortcut: `#009de8`.
- Character speech accents only: `#69b8fc` and `#ff9acc`.

### Overall Prompt

“Create a Japanese recruitment portal inspired by the current Tsuruha Drug homepage. Use a pale gray healthcare-pattern canvas, white rounded panels, oversized red identity lettering, Dela Gothic One Japanese display headings, Montserrat Latin section labels, and Noto Sans JP interface text. Build a workplace-photo hero with a large supplied employee-and-lettering collage overlapping its lower-left edge. Place four white recruitment-route cards at the lower right on desktop and below the collage on mobile. Follow with employee stories, a four-to-two-column FAQ grid, yellow-and-white statistic cards, large red and deep-blue professional recruitment panels, news, and a detailed desktop sitemap. Use a compact mobile footer. Treat media playback and menu animation as implementation decisions requiring separate specification.”

### Example Component Prompts

1. **Hero and routes:** “Create a left-aligned workplace-media frame with a large rounded lower-right corner. Overlay supplied red ‘Be No.1’ artwork and five employee cutouts across its lower-left edge. At 1440px, place four 460.8 × 110px white route cards at the right with 10px gaps. At 390px, use 351 × 60px stacked routes below the projecting artwork.”
2. **Statistics section:** “Set `数字で知るツルハ` in Dela Gothic One, with yellow, black, and red word segments. Use four desktop columns of rounded cards with black outline illustrations and huge numerals. Alternate outlined white cards and yellow cards. On mobile use two columns, but let bonus and parental-leave cards span both columns.”
3. **Interview section:** “Use a huge red Montserrat ‘People’ heading and a smaller Japanese introduction. Create two desktop article columns that stack on mobile. Under each article, retain paired rounded audience links; allow their labels to wrap to two lines. Use red for general-role actions and deep blue for pharmacist actions.”
4. **News panel:** “Build one white rounded list surface with three entries. Each entry contains a Montserrat date, a small black rectangular category badge, and a readable Japanese excerpt. Separate entries with thin gray rules. Place a red arrow pill outside and below the panel.”
5. **Footer:** “Create rounded white sitemap panels over a pale gray medical-linework background. Use short red dashes before bold Japanese headings and smaller English subtitles. On mobile, replace the extensive panel layout with three stacked corporate links, a centered recruitment logo, and copyright; retain other destinations in accessible navigation.”

## Quick Start

### CSS Custom Properties

This is an implementation adaptation, not recovered source CSS. It reproduces measured endpoint sizes where practical and labels estimated artwork geometry through comments. Load the three observed font families through your project’s font setup. Supply authorized logo, collage, photography, and pattern assets separately; no original asset paths were available.

The example deliberately increases ordinary mobile pills to at least 44px and includes an optional stronger-contrast mode. Intermediate layouts and the 767px breakpoint are recommendations.

```css
:root {
  /* Colors measured in the supplied rendered evidence */
  --color-canvas: #f5f5f5;
  --color-surface: #fff;
  --color-ink: #000;
  --color-brand: #f00;
  --color-action: #ff1b20;
  --color-stat: #ffcd00;
  --color-pharmacy: #064cce;
  --color-entry: #009de8;
  --color-character-blue: #69b8fc;
  --color-character-pink: #ff9acc;

  /* Estimated divider and recommended accessible alternatives */
  --color-rule: #d8d8d8;
  --color-action-readable: #d90016;
  --color-entry-readable: #0074aa;

  --font-body: 'Noto Sans JP', sans-serif;
  --font-display: 'Dela Gothic One', sans-serif;
  --font-latin: 'Montserrat', sans-serif;
  --text-body: 18px;
  --text-pill: 14.4px;
  --text-stat-label: 24px;

  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --section-width: 94%;
  --radius-route: 10px;
  --radius-stat: 30px;
  --radius-panel: 100px;
  --radius-pill: 40px;

  /* Recommended motion and optional supplied decorative tile */
  --motion-feedback: 300ms ease;
  --medical-pattern: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background-color: var(--color-canvas);
  background-image: var(--medical-pattern);
  font-family: var(--font-body);
  font-size: 16px;
}

img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }

.section-shell {
  width: var(--section-width);
  margin-inline: auto;
}

.copy {
  font-size: var(--text-body);
  line-height: 1.6;
}

/* Persistent header: visible desktop tab geometry is approximated. */
.brand-lockup {
  position: fixed;
  z-index: 30;
  inset: 0 auto auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 460px;
  height: 90px;
  padding: 18px 22px;
  border-radius: 0 0 60px 0;
  background: var(--color-surface);
  box-shadow: 0 5px 8px rgb(0 0 0 / 16%);
  text-decoration: none;
}

.brand-logo { width: 198px; flex: 0 0 auto; }

.brand-slogan {
  margin: 0;
  padding-left: 15px;
  border-left: 1px solid currentColor;
  font-size: 11.2px;
  font-weight: 700;
  line-height: 1.5;
}

.entry-link {
  position: fixed;
  z-index: 31;
  top: 20px;
  right: 140px;
  width: 115px;
  height: 50px;
  border-radius: 50px;
  color: #fff;
  background: var(--color-entry);
  font: 700 16px/50px var(--font-latin);
  text-align: center;
  text-decoration: none;
}

.menu-toggle {
  position: fixed;
  z-index: 32;
  top: 0;
  right: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  width: 120px;
  height: 120px;
  border: 0;
  border-radius: 0 0 0 100%;
  color: #fff;
  background: var(--color-brand);
  font: 700 11px/1 var(--font-latin);
}

.menu-lines {
  position: relative;
  width: 28px;
  height: 20px;
  border-block: 3px solid currentColor;
}

.menu-lines::after {
  content: '';
  position: absolute;
  inset: 6px 0 auto;
  border-top: 3px solid currentColor;
}

/* The visual wrapper anchors the collage independently of route flow. */
.hero { position: relative; }
.hero-visual { position: relative; }

.hero-media {
  width: 96%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0 0 100px 0;
}

.hero-media > img,
.hero-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Estimated composition geometry; tune against the supplied artwork. */
.hero-art {
  position: absolute;
  z-index: 1;
  left: 5vw;
  bottom: -7.5vw;
  width: 56vw;
  height: auto;
}

.hero-routes {
  position: absolute;
  z-index: 2;
  top: calc(100% - 200px);
  right: 5%;
  display: grid;
  gap: 10px;
  width: 32%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 110px;
  padding: 20px;
  border-radius: var(--radius-route);
  color: var(--color-action);
  background: var(--color-surface);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.route-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.main-story { padding-top: 144px; }
.white-panel { background: var(--color-surface); }

.display-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(50.7px, 8vw, 115.2px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.people-title {
  margin: 0;
  color: var(--color-brand);
  font: 900 clamp(56px, 11.111vw, 160px)/0.8 var(--font-latin);
}

.interview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 96%;
  margin-inline: auto;
}

.interview-title {
  margin: 0;
  padding: 30px;
  font-size: 24px;
  line-height: 1.5;
}

.article-actions { display: flex; justify-content: center; gap: 20px; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 15px 60px 15px 30px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-action);
  font-size: var(--text-pill);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.pill--pharmacy { background: var(--color-pharmacy); }

.faq-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 25px;
  width: 90%;
  margin-inline: auto;
}

.faq-card { text-decoration: none; }
.faq-media { width: 100%; aspect-ratio: 1; object-fit: cover; }

.faq-title {
  margin: 10px 0;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.numbers { padding: 170px 30px 0; }
.numbers-title { display: flex; flex-wrap: wrap; justify-content: center; }
.numbers-title .number-word { color: var(--color-stat); }
.numbers-title .brand-word { color: var(--color-brand); }

.numbers-intro {
  margin: 20px 0 60px;
  font-size: var(--text-body);
  line-height: 1.4;
  text-align: center;
}

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

/* Card height and numeral sizing approximate the desktop capture. */
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 362px;
  padding: 24px 14px 14px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-stat);
  background: var(--color-surface);
  text-align: center;
}

.stat-title {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--text-stat-label);
  font-weight: 700;
  line-height: 1.2;
}

.stat-icon { width: 80px; height: 80px; margin: 16px 0 8px; }
.stat-value { margin: auto 0 12px; white-space: nowrap; line-height: 1; }

.stat-value strong {
  color: var(--color-brand);
  font-family: var(--font-latin);
  font-size: clamp(56px, 7.2vw, 104px);
  font-weight: 900;
}

.stat-unit { margin-left: 4px; font-size: 24px; font-weight: 700; }
.stat-note { margin: auto 0 0; font-size: 14.4px; line-height: 1.4; }
.stat-card--yellow { border-color: var(--color-stat); background: var(--color-stat); }
.stat-card--yellow .stat-title,
.stat-card--yellow .stat-value strong { color: #fff; }

.recruit-panel {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 700px;
  margin-block: 120px;
  overflow: hidden;
  border-radius: var(--radius-panel);
  color: #fff;
  background: var(--color-action);
}

.recruit-panel--pharmacy { background: var(--color-pharmacy); }
.recruit-copy { align-self: center; padding: 50px clamp(30px, 6.4vw, 92px); }
.recruit-copy h2 { margin: 0; font-size: 48px; font-weight: 900; line-height: 1.2; }
.recruit-media { width: 100%; height: 100%; object-fit: cover; }

.recruit-panel .pill {
  width: 100%;
  margin-top: 20px;
  padding: 18px 60px 18px 30px;
  color: var(--color-action);
  background: #fff;
}

.recruit-panel--pharmacy .pill { color: var(--color-pharmacy); }

.news {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 40px;
  width: min(1200px, 90%);
  margin-inline: auto;
  padding: 120px 0 60px;
}

.news-list { padding: 40px; border-radius: 30px; background: #fff; }
.news-item { display: block; padding-block: 24px; text-decoration: none; }
.news-item + .news-item { border-top: 1px solid var(--color-rule); }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.news-date { font: 500 18px/1.2 var(--font-latin); }
.news-badge { padding: 3px 10px; color: #fff; background: #000; font-weight: 700; }
.news-excerpt { margin: 10px 0 0; font-size: var(--text-body); line-height: 1.6; }

.footer-panel { padding: 40px; border-radius: 40px; background: #fff; }
.footer-title { display: flex; align-items: baseline; gap: 10px; }
.footer-title::before { content: ''; width: 25px; height: 5px; border-radius: 5px; background: #f00; }
.corporate-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

.back-to-top {
  position: fixed;
  z-index: 20;
  right: 10px;
  bottom: 30px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  background: var(--color-brand);
}

/* Recommended feedback; original endpoints were not supplied. */
.pill, .route-link { transition: transform var(--motion-feedback); }
@media (hover: hover) {
  .pill:hover, .route-link:hover { transform: translateY(-2px); }
}

:where(a, button):focus-visible { outline: 3px solid #000; outline-offset: 4px; }
[id] { scroll-margin-top: 110px; }

/* Optional stronger-contrast mode for small labels. */
.accessible-contrast .route-link { color: var(--color-action-readable); }
.accessible-contrast .entry-link { background: var(--color-entry-readable); }
.accessible-contrast .pill:not(.pill--pharmacy):not(.recruit-panel .pill) {
  background: var(--color-action-readable);
}
.accessible-contrast .stat-card--yellow .stat-title,
.accessible-contrast .stat-card--yellow .stat-value strong { color: #000; }

/* Recommended intermediate safeguard, not an observed breakpoint. */
@media (min-width: 768px) and (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recruit-copy { padding-inline: 30px; }
}

@media (max-width: 767px) {
  :root {
    --section-width: 90%;
    --text-body: 14.4px;
    --text-pill: 12.8px;
    --text-stat-label: 18px;
    --radius-panel: 20px;
  }

  body { padding-top: 50px; }
  .brand-lockup { width: 100%; height: 50px; gap: 6px; padding: 8px 90px 8px 10px; border-radius: 0; }
  .brand-logo { width: 110px; }
  .brand-slogan { padding-left: 5px; font-size: 9.6px; }
  .entry-link { display: none; }
  .menu-toggle { width: 80px; height: 80px; }
  .hero-media { width: 90%; border-bottom-right-radius: 40px; }
  .hero-art { width: 82vw; bottom: -15vw; }
  .hero-routes { position: static; width: 90%; margin: 163.8px auto 0; }
  .route-link { min-height: 60px; font-size: 16px; }
  .main-story { padding-top: 20px; }

  .display-title { font-size: 13vw; }
  .interview-grid { grid-template-columns: 1fr; gap: 40px; }
  .interview-title { padding: 16px; font-size: 14.4px; }
  .article-actions { gap: 10px; padding-inline: 10px; }
  .article-actions .pill { flex: 1; min-width: 0; }
  .pill { padding: 12px 40px 12px 20px; }
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 10px; }
  .faq-title { margin-top: 5px; font-size: 14.4px; }

  .numbers { padding: 60px 10px 0; }
  .numbers-title .brand-word { flex-basis: 100%; }
  .numbers-intro { margin: 10px 0 30px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
  .stat-card { min-height: 300px; padding-inline: 8px; }
  .stat-card--wide { grid-column: 1 / -1; }
  .stat-value strong { font-size: clamp(42px, 14.35vw, 56px); }
  .stat-unit { font-size: 18px; }
  .stat-note { font-size: 12px; }

  .recruit-panel { display: flex; flex-direction: column; min-height: 0; margin-block: 60px; }
  .recruit-media { order: 0; height: 420px; }
  .recruit-copy { order: 1; width: 100%; padding: 22px 5% 30px; }
  .recruit-copy h2 { font-size: 28px; }

  .news { display: block; padding: 60px 0 30px; }
  .news-list { padding: 20px; }
  .news-item { padding-block: 15px; }
  .news-date { font-size: 16px; }
  .news-badge { font-size: 12.8px; }
  .desktop-sitemap { display: none; }
  .corporate-links { flex-direction: column; align-items: center; gap: 10px; }
  .back-to-top { width: 45px; height: 45px; }
  [id] { scroll-margin-top: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .pill, .route-link, .entry-link, .back-to-top { transition: none; }
  .pill:hover, .route-link:hover { transform: none; }
}
```

The collage should be a child of `.hero-visual`; `.hero-routes` should be its sibling inside `.hero`. Assign `.stat-card--wide` explicitly to the bonus and parental-leave cards. Alternate statistics colors through content classes rather than assuming that every even grid column is yellow after responsive wrapping.

Use a real button for `.menu-toggle` and real links for routes. The CSS does not implement menu focus management, entry navigation, back-to-top visibility, media playback, or animated statistics. Those behaviors require separate implementation and testing.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: #f5f5f5;
  --color-surface: #fff;
  --color-ink: #000;
  --color-brand: #f00;
  --color-action: #ff1b20;
  --color-stat: #ffcd00;
  --color-pharmacy: #064cce;
  --color-entry: #009de8;

  --font-body: 'Noto Sans JP', sans-serif;
  --font-display: 'Dela Gothic One', sans-serif;
  --font-latin: 'Montserrat', sans-serif;

  --text-copy: var(--text-body);
  --text-action-label: var(--text-pill);
  --text-metric-label: var(--text-stat-label);

  --radius-route: 10px;
  --radius-stat: 30px;
  --radius-recruit: var(--radius-panel);
  --radius-pill: 40px;

  --spacing-route-gap: 10px;
  --spacing-panel-inset: 30px;
}
```

## Sources & Evidence

- [Tsuruha Drug Recruitment homepage](https://tsuruha-recruit.jp/): original and final inspected URL, reported HTTP 200, rendered page title, text, link destinations, computed element styles, and measured rectangles supplied by the browser observation.
- **Capture timestamp:** `2026-09-12T18:09:13.670Z`, equivalent to September 13, 2026, at 03:09:13.670 JST. Separate timestamps for individual screenshots were not supplied.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport, opening/statistics/footer captures, and a measured document height of 9881.94px.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport, opening/news-footer captures, and a measured document height of 8833.58px.
- **Observed state coverage:** loaded page and supplied scroll positions. Preparation included at least five seconds of initial observation and bounded readiness checks. SharedWorkers and service workers were disabled during inspection.
- **Limitations:** no independent browsing was performed for this reference. Original asset paths, full stylesheet rules, breakpoint declarations, font-file loading, open menu states, hover endpoints, application flows, media playback, counter completion, and linked-page contents were not supplied or exercised.

This reference describes the current homepage shown in the supplied original-site evidence. Measurements, visual estimates, calculated relationships, and recommended adaptations are identified separately throughout.