# Shogakukan Publishing Services — Style Reference

> An open, photographic corporate homepage with the rhythm of Japanese book design.

**Website:** [www.sho-ps.co.jp](https://www.sho-ps.co.jp/)
**Original URL:** https://www.sho-ps.co.jp/
**Final URL:** https://www.sho-ps.co.jp/
**Theme:** light; white canvas, charcoal text, publishing green, and restrained orange artwork.
**Inspected:** September 17, 2026, at 04:33 JST. Supplied retrieval timestamp: `2026-09-16T19:33:40.056Z`.
**Viewports:** desktop `1440 × 1000`; mobile `390 × 844` CSS pixels.
**Scope:** the current corporate homepage, including its photographic opening, company introduction, interview teaser, business and policy links, company information, recruitment navigation, news, and footer. Visual evidence consists of three desktop captures and two mobile captures, supported by rendered DOM measurements across the homepage. Linked destination pages were not inspected.

Shogakukan Publishing Services presents its work through people, books, and everyday professional activity. Broad white margins surround large photographs. Charcoal Japanese typography supplies structure; green highlights selected words, section labels, directional controls, and small navigation marks. A shallow open-book curve reappears in the identity, section decoration, and oversized pale background artwork.

The desktop opening has three distinct visual zones: a narrow identity and navigation rail at left, a large central photograph, and a vertical statement at right. Small photographic previews occupy the lower side areas. On mobile, the identity becomes compact, a dark MENU tab remains near the upper-right corner, and the vertical statement overlaps the upper part of the photograph. Later sections alternate editorial text, image links, ruled information rows, and a pale green news field.

This is a corporate information gateway. Its hierarchy gives business, company, recruitment, and news content separate entry points. Preserve that information architecture when adapting the design.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM, computed styles, or custom properties. These measurements describe the captured state, rather than every possible viewport or interaction state.
- **Visual estimate** means a dimension or treatment was judged from a current-page screenshot. Image radii, some icon sizes, and photograph boundaries fall into this category.
- **Calculated** means a value follows directly from supplied measurements, such as the gap between adjacent cards.
- **Recommended** means implementation guidance for a new build. The CSS scaffold, breakpoint choice, accessibility additions, and unsampled hover treatments are recommendations.
- **Token names** introduced here are descriptive aliases. Names beginning with the source prefix `--color-` are identified explicitly where relevant.

The desktop document box measured `1425px` wide inside the requested `1440px` viewport. The mobile document measured `375px` inside the requested `390px` viewport. Both have a `15px` difference, consistent with the capture's scrollbar or gutter allocation. Do not reinterpret the mobile inspection as a separately requested 375px viewport or force a 15px empty strip into a new implementation.

The text extraction includes offscreen navigation, multiple carousel states, and repeated labels. Their presence in the DOM does not establish simultaneous visibility. Use the screenshots to identify the visible state and the DOM to establish measurements and available content.

## Tokens — Colors

### Default Palette

| Name | Value | Source / implementation alias | Role and evidence |
| --- | --- | --- | --- |
| White | `#ffffff` | Source `--color-white`, `--color-background1`; alias `--surface` | Measured root background; dominant canvas and footer surface |
| Charcoal | `#333333` | Source `--color-black`, `--color-text2`, `--color-background4`; alias `--ink` | Measured body and heading text; measured mobile MENU background and dark slide-label fill |
| Publishing Green | `#009f5d` | Source `--color-green`, `--color-dark-green`, `--color-text3`, `--color-background2`; alias `--brand` | Measured English section-label color; visually repeated in arrows, headline emphasis, and identity artwork |
| News Mist | `#edf2f0` | Source `--color-light-green`; alias `--surface-news` | Measured news-section background at both viewports |
| Fine Rule | `#e6e6e6` | Source `--color-border-gray`; alias `--rule` | Declared border token; consistent with the visually fine information-row separators |
| Caption Gray | `#9e9e9e` | Source `--color-gray6`; alias `--ink-caption` | Measured hero-thumbnail captions |
| Date Gray | `#999999` | Source `--color-gray`, `--color-gray9`, `--color-text4`; alias `--ink-muted` | Measured mobile news dates |
| Pale Gray | `#f2f2f2` | Source `--color-background3`, `--color-light-gray` | Declared neutral surface; a suitable approximation for the pale circular controls visible in news artwork |

The source name `--color-black` resolves to charcoal, not pure black. The interface depends on this softer text color against white.

### Secondary Declared Tokens

These values exist in the supplied custom properties. Their precise assignment to individual visible assets was not established.

| Family | Source values | Reuse guidance |
| --- | --- | --- |
| Supporting greens | `--color-green3: #49b27f`; `--color-green2: #ace5cd` | Secondary accents and pale brand treatments |
| Green-tinted backgrounds | `--color-background-green: #f2f7f5`; `--color-background-green2: #dcf5e4` | Optional supporting surfaces; keep the observed news field at `#edf2f0` |
| Warm backgrounds | `--color-background-orange: #faf6f2`; `--color-light-orange: #faf6f5` | Very light warmth for decorative brand artwork |
| Orange accents | `--color-orange2: #f38f3d`; `--color-orange: #ff8359` | Declared accent options; neither was independently verified as the exact orange inside the logo image |

The visible identity contains orange and green. Treat its colors as part of the authorized artwork until the actual asset can be inspected. Do not substitute a declared orange token and present it as a measured logo fill.

There is no evidenced user-selectable color theme. White remains the dominant page surface throughout the supplied captures.

## Tokens — Typography

### Japanese Text — Noto Sans JP

- **Computed family:** `'Noto Sans JP', sans-serif`.
- **Measured weights:** `400` for body copy, `500` for the vertical hero statement and several labels, `600` for navigation and major Japanese headings, and `700` for thumbnail captions and some footer headings.
- **Default size:** `16px`, with a computed `24px` line height and `0.64px` tracking.
- **Character:** clear, composed, and contemporary. The hero achieves impact through vertical composition and tracking rather than a very heavy weight.
- **Implementation alias:** `--font-jp`.

The supplied evidence identifies computed family declarations. Font files, loading behavior, and actual fallback use were not independently inspected.

### English Section Labels — Almarai

- **Computed family:** `Almarai, sans-serif` on sampled labels including INTERVIEW, COMPANY, and OUR BUSINESS.
- **Typical desktop treatment:** `14px / 14px`, weight `400`, tracking `0.56px`.
- **Mobile variations:** `12px / 12px` for COMPANY, NEWS, and the image-link labels; `10px / 10px` for INTERVIEW.
- **MENU:** `11px / 11px`, weight `700`, tracking `0.44px`.
- **Implementation alias:** `--font-en`.

Keep the English labels as quiet section markers. The principal content hierarchy remains Japanese.

### Type Scale

All entries below are measured unless marked otherwise. Size and line height are shown as `size / line-height`.

| Role | Desktop | Mobile | Weight | Tracking / notes |
| --- | --- | --- | --- | --- |
| Vertical hero statement | `50 / 67px` | `32 / 41.6px` | `500` | `10px` desktop; `6.08px` mobile |
| Introductory statement | `48 / 76.8px` | `28 / 44.8px` | `600` | `0.04em`; spacious `1.6` leading |
| Business / policy image-link title | `40 / 48px` | `24 / 28.8px` | `600` | `0.08em` |
| Company section heading | `24 / 28.8px` | `18 / 21.6px` | `600` | `0.04em` desktop; `0.08em` mobile |
| Company information-row title | `32 / 38.4px` | `24 / 43.2px` | `600` | `0.04em`; unusually generous mobile leading |
| Recruitment heading | `48 / 57.6px` | `28 / 44.8px` | `600` | `0.04em` |
| Recruitment navigation title | `24 / 28.8px` | `18 / 21.6px` | `600` | `0.04em` |
| Introductory paragraph container | `16 / 24px` | `16 / 24px` | `400` | `0.04em`; nested children were not all sampled |
| Company-row description | `14 / 25.2px` | `13 / 23.4px` | `400` | `0.04em`; `1.8` leading |
| Interview description | `14 / 28px` | `13 / 26px` | `400` | `0.04em`; `2` leading |
| Recruitment introduction | `15 / 27px` | `14 / 25.2px` | `400` | `0.04em` |
| Dark vertical slide tag | `16 / 22.4px` | `14 / 19.6px` | `500` | `0.4em` |
| Thumbnail caption | `10 / 12px` | `10 / 12px` | `700` | `0.08em` |
| Desktop primary navigation | `16 / 16px` | — | `600` | `0.04em` |
| Offscreen mobile menu category | — | `18 / 18px` | `600` | Measured in the closed-menu DOM; not an opened-menu observation |
| Utility link | `12 / 16.8px` | `12 / 16.8px` | `400` | `0.04em` |
| Mobile news title | Not sampled | `13 / 23.4px` | `500` | `0.06em` |
| Mobile news category / date | Not sampled | `12 / 12px`; `10 / 10px` | `500` | Category green; date gray |
| Mobile footer group heading | Not sampled | `15 / 22.5px` | `700` | `0.04em` |
| Mobile footer link | Not sampled | `13 / 15.6px` | `400` | Normal tracking in the sampled links |

### Vertical Typesetting

The headline reads in three vertical columns: `人と本`, `出逢う瞬間を`, and `共に創る。`. The final phrase is green. Preserve Japanese vertical reading order and punctuation handling when implementing this with `writing-mode: vertical-rl`.

The smaller photographic annotations also use vertical composition, but with a different hierarchy: a short white-on-charcoal action word sits beside black text on white paper-like strips. These labels should remain distinct from the main statement.

## Tokens — Spacing & Shapes

The site combines small, regular component gaps with much larger editorial intervals. An 8px-based implementation scale is convenient, but the evidence does not establish one universal source spacing system.

### Spacing Scale

| Use | Measured or calculated value | Interpretation |
| --- | --- | --- |
| Desktop utility icon-to-text gap | `6px` | Compact secondary navigation |
| Desktop primary navigation gap | `12px` | Space between text and its directional mark |
| Desktop primary link cadence | `32px` | `16px` text boxes begin at y = 292, 324, 356, and 388 |
| Desktop image-link gutter | `16px` | Calculated from adjacent card rectangles |
| Mobile image-link gutter | `8px` | Calculated vertical gap between stacked cards |
| Mobile ordinary content inset | `24px` | Produces a measured `327px` text column within the `375px` document |
| Mobile image-link outer inset | `8px` | Produces measured `359px` cards |
| Desktop rail padding | `64px 40px` | Measured header padding |
| Desktop company-row padding | `48px 24px 48px 0` | Large link rows with a separate arrow area |
| Mobile company-row padding | `28px 0 36px` | More compact rows, still generous vertically |
| Desktop news padding | `80px 0 100px` | Measured tinted section |
| Mobile news padding | `56px 0 64px` | Measured responsive reduction |
| Hero-to-intro interval | About `140px` desktop; `72px` mobile | Calculated from the preview-band endpoint and section start |
| Business-to-company interval | `128px` desktop; `80px` mobile | Calculated from section rectangles |
| Company-to-recruitment interval | `200px` desktop; `88px` mobile | Calculated from section rectangles |

### Border Radius and Shape

| Element | Treatment | Evidence |
| --- | --- | --- |
| General layout and links | Square geometry | Sampled anchor and container radii are `0px` |
| Dark slide tag | `1px` radius | Measured |
| Main photograph and image cards | Very slight rounding, approximately `3–4px` | Visual estimate; image-wrapper styles were not supplied |
| Company / image-link arrow | Approximately `48px` circle on desktop | Visual estimate |
| Primary navigation arrow | Approximately `16px` green circle | Visual estimate |
| News-image arrow | Approximately `32px` pale circle | Visual estimate |
| Mobile MENU tab | Square dark rectangle with an inward notch at the left | Observed shape; `86 × 40px` measured box |
| Book ornament | Shallow central dip joining two horizontal strokes | Observed graphic motif; original path data unavailable |

No visible general-purpose shadow system is present. Image boundaries, white space, fine rules, and circular arrow marks provide separation.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Document width | `1425px` | `375px` |
| Document height | Approximately `5382px` | Approximately `5920px` |
| Left header region | `248px` wide | Compact header box `91 × 96px` |
| Header logo link | `168 × 176px`, at `(40, 64)` | `91 × 96px`, at `(24, 12)` |
| Source `--slidewidth` | `880px` | `373px` |
| Main photograph | Approximately `880 × 704px`, beginning near `(273, 32)` | Visible crop approximately `367 × 424px`, beginning near `(8, 136)` |
| Hero headline box | `201 × 360px`, at `(1180, 70)` | `124.78 × 228.48px`, at `(234.22, 80)` |
| Pause control | `82 × 34px`, at `(1310.5, 582)` | `88 × 38px`, at `(285.36, 514.31)` |
| Introductory text column | `864px`, beginning at x = `396` | `327px`, beginning at x = `24` |
| Business / policy card | `552.5 × 434.09px` each | `359 × 282px` each |
| Company information column | `450px`, beginning at x = `835` | `327px`, beginning at x = `24` |
| Company information row | Approximately `201.77px` high | Approximately `158.97px` high |
| Recruitment link column | `600px` wide | `327px` wide |
| Standard recruitment row | `93px` high | `73px` high |
| Mobile news card | — | `285 × 253.39px`; adjacent card begins `309px` later |
| Footer height | About `437px` | `887.03px` |

Photograph dimensions are screenshot estimates because image-element rectangles were not included in the evidence. In particular, the mobile `--slidewidth` value is not identical to the visible photographic crop. Do not silently substitute one for the other.

## Components

### Desktop Identity and Navigation Rail

**Role:** keeps the corporate identity and main destinations visible beside the editorial content.

The rail occupies a `248px` region. The tall logo lockup sits at x = `40px`, y = `64px`, with a `168 × 176px` link box. Japanese lettering is stacked above a tracked English wordmark and the orange-and-green book mark.

The first primary navigation item begins at y = `292px`. Four compact rows lead to the homepage, business, company, and recruitment sections. Each combines `16px`, weight-600 text with a small green circular chevron. The lower utility links use `12px` type, small book or envelope symbols, and underlined text.

Navigation remains visible in the supplied scrolled desktop captures, while the large opening logo leaves the viewport. Its vertical position changes between captures. This supports persistent, scroll-managed navigation, but does not establish an exact fixed or sticky positioning algorithm. The measured rail extends through the main content and ends around the footer boundary.

Secondary navigation links exist in the DOM. Their hover, focus, or expansion behavior was not exercised.

### Mobile Identity and MENU Tab

**Role:** preserves branding while recovering horizontal space.

The mobile logo is `91 × 96px` at `(24, 12)`. The MENU control is an `86 × 40px` charcoal tab at `(289, 20)` in the supplied viewport. White uppercase text sits beside a vertical three-dot mark. A small inward notch cuts into the left edge.

The tab appears in both the opening and footer screenshots, supporting persistent placement while scrolling. The logo is not similarly persistent in the footer view.

The closed-menu DOM places navigation outside the document's visible right edge. Category controls become buttons, while child destinations remain links. Category boxes measure `287 × 88px`; their text is `18px`, weight `600`. These observations support a separate mobile navigation panel, but its opened appearance, transition direction, accordion behavior, focus handling, and close interaction remain unverified.

### Photographic Hero

**Role:** translates the company's work into human actions before introducing detailed corporate information.

The visible desktop photograph shows a handshake between a suited person and a person in an apron, with bookshelves and a storefront environment behind them. Its broad crop places the joined hands near the visual center. The photo is independently centered within the document rather than aligned to the later text column.

The vertical headline sits in white space to the right. It uses three columns, `50px` type, weight `500`, and `10px` tracking. Green is reserved for the final phrase.

The mobile composition changes substantially: the photograph begins lower on the page, and the `32px` headline overlaps its upper-right area. The image becomes a tall crop. Preserve the handshake and the surrounding work context when selecting responsive focal points.

### Vertical Slide Annotation

**Role:** names the action represented by each photograph.

The visible handshake state uses the action `繋げる` and the supporting copy `本の魅力が輝くように`. The dark tag is on the right of the white copy strips.

On desktop, the tag measures `30px` wide and approximately `79px` high, with `6px 7px` padding. On mobile it measures `28px` wide and approximately `69px` high, with `5px 6px` padding. Its `1px` radius is barely perceptible.

The DOM contains seven action labels: `考える`, `繋げる`, `届ける`, `訪ねる`, `調べる`, `見出す`, and `伝える`. These establish the content set. They do not prove a particular runtime sequence or interval.

### Preview Strips and Playback Control

**Role:** exposes other photographic themes and provides an explicit playback affordance.

On desktop, small photo previews sit in horizontal strips on both sides of the large central image, near its lower edge. Preview captions are `10px`, weight `700`, gray, and centered. Measured caption boxes are `80px` wide; adjacent desktop positions differ by `104px`, giving a calculated `24px` gap.

On mobile, one continuous visible strip runs below the photograph. Caption boxes measure approximately `72.8px`, with an approximately `8.31px` gap. The right edge reveals a partial item. Image heights are approximately `60px` in the screenshots.

The playback button is a small white rectangle containing a pause symbol and `一時停止`. On desktop it sits in the right-hand white space; on mobile it overlays the lower-right corner of the photograph. Both `再生` and `一時停止` appear in the button's DOM content, but only the pause label is visible in the supplied captures.

Playback state changes, thumbnail selection, dragging, and swipe behavior were not tested. Preserve the control affordance without inventing an autoplay duration.

### Introduction and Book-Rule Label

**Role:** explains the company's purpose in an editorial voice.

WHO WE ARE appears in green above a shallow open-book underline. The decorative line is roughly `108px` wide on desktop and `96px` on mobile, based on the screenshots.

The desktop statement occupies an `864px` column beginning at x = `396px`. Its `48px / 76.8px` typography creates broad, deliberate lines. Mobile uses a `327px` column and `28px / 44.8px` text. This preserves generous leading even as the statement wraps into more lines.

Body copy begins about `32px` after the statement in both measured layouts. Its paragraph container uses a `24px` grid gap on desktop and `16px` on mobile. Keep the statement and explanation as separate typographic levels.

### Interview Teaser

**Role:** provides a more personal route into leadership and company direction.

The measured text area is narrower than the main introduction: `412px` on desktop and `253px` on mobile. It contains a green INTERVIEW label, a Japanese heading, a short paragraph, and the link `代表対談はこちら` aligned toward the right.

The desktop heading is `24px / 28.8px`; mobile uses `18px / 21.6px`. Descriptions use double leading: `14px / 28px` and `13px / 26px` respectively. This makes the teaser feel like an inset editorial note.

Associated imagery and the complete surrounding visual composition were not established by the supplied screenshot crops. Do not invent a portrait layout from the text alone.

### Business and Policy Image Links

**Role:** offers two equally prominent routes into services and working principles.

Each card is one large link containing:

1. A full-area photograph.
2. A small vertical white-strip annotation near the upper-left corner.
3. An English category label near the lower-left corner.
4. A large Japanese title immediately below the English label.
5. A white circular chevron near the lower-right corner.

The business image shows a hand selecting a book from a shelf. The policy image shows hands writing in a notebook. The lower parts of both images remain light enough to support charcoal text; the exact overlay technique was not supplied.

Desktop cards are `552.5 × 434.09px`, separated by `16px`. The title block is inset `40px` from the left and approximately `32px` from the bottom. The English label and Japanese title have a measured `10px` gap.

Mobile stacks the cards with an `8px` gap. Each measures `359 × 282px`, with title blocks inset `24px` horizontally and about `20px` from the bottom. The title-label gap becomes `8px`. The policy title retains two lines.

The underlying destinations are `/business/` and `/policy/`. Their interior pages were not inspected.

### Company Information Block

**Role:** balances an atmospheric office photograph with practical corporate links.

The desktop screenshot places a tall office photograph on the left: a blue chair, desk equipment, and horizontal window blinds. Its visible width is approximately `435px`. At right, a `450px` information column begins at x = `835px`.

The header combines a green COMPANY label and the smaller Japanese heading `企業情報`. Behind and to the right, three oversized pale book-curve motifs repeat the brand shape. Their exact colors and asset construction were not measured.

Two large ruled links follow: `メッセージ` and `会社概要`. Each includes a title, a two-line description, and a green circular arrow. Desktop rows have `48px` top and bottom padding and an approximately `202px` total height. Titles use `32px`; descriptions use `14px / 25.2px`.

On mobile, the header and rows occupy the regular `327px` column. Titles become `24px / 43.2px`, descriptions become `13px / 23.4px`, and rows become approximately `159px` high. The mobile image's precise placement and crop were not visually captured.

### Recruitment Gateway

**Role:** gathers recruitment information without making the whole homepage a recruitment campaign.

The DOM establishes a RECRUIT section with a large Japanese heading, introductory copy, a principal recruitment link, three supporting rows, and a smaller FAQ link.

On desktop, the introduction occupies a `280px` column at x = `280px`; navigation occupies `600px` at x = `685px`. The heading uses `48px` type. Standard supporting rows are `93px` high with `24px` titles.

On mobile, the introduction and navigation use the same `327px` column. The heading is `28px`, navigation titles are `18px`, and supporting rows are `73px` high. The primary row includes explanatory copy and measures approximately `108px` high.

Observed destinations include `/recruit/`, `/recruit/workstyle/`, `/recruit/welfare/`, `/recruit/data/`, and `/recruit/faq/`. The surrounding recruitment imagery and any decorative motion are not established by the visible captures.

### News Section

**Role:** gives recent corporate updates a distinct, quiet surface.

A full-width `#edf2f0` field extends behind the news content and the desktop rail area. A section label and heading precede three article links.

In the desktop screenshot, the cards form three equal columns across approximately `1005px`, with approximately `40px` gaps. Each image is a white rectangle showing a centered horizontal brand lockup. The visual image ratio is approximately `3:2`. A small pale circular arrow sits inside the lower-right corner.

Below each image, a green category label and a gray date share a line, separated visually by a short rule. The article title appears below with no enclosing card border or shadow. The captured dates are `2026.06.26`, `2026.06.15`, and `2025.06.13`.

Mobile retains horizontal card placement. Measured card starts are x = `24`, `333`, and `642px`, with `285px` card widths and `24px` gaps. This is a horizontally extended layout, rather than three stacked cards. Swipe, dragging, and scroll-snap behavior were not exercised.

The underlined `全てのニュース` link is aligned to the right and paired with a small green arrow.

### Footer and Page-Top Link

**Role:** repeats the information architecture and supplies the company location and utility links.

The desktop footer spans the full page width below the navigation rail. A horizontal logo and address occupy the left area. Business, company, and recruitment groups form separate columns, followed by news, contact, and privacy links. Small green dots mark ordinary destination links.

On mobile, the logo is centered in a measured `180 × 75px` box. The address sits below it in `12px / 21.6px` type. The three navigation groups stack vertically, but each group's child links use two columns. Sampled child-link widths are `131.5px` with a calculated `16px` gap inside a `279px` group width.

The mobile footer uses approximately `48px` horizontal positioning for its navigation groups, deeper than the ordinary `24px` content inset. News and contact remain adjacent utility links, followed by the privacy link.

A thin horizontal rule separates the navigation from the small copyright line and PAGE TOP control. The copyright text reads `©2024 Shogakukan Publishing Services Inc.`; this is displayed content, not the inspection year. PAGE TOP links to `/#body`. Smooth scrolling was not verified.

## Tokens — Motion & Interaction

### Measured Transition Declarations

| Element | Supplied computed value | What it establishes |
| --- | --- | --- |
| Secondary navigation / sampled footer links | `color 0.3s cubic-bezier(0.1, 0.6, 0.68, 1)` | A short color transition is defined; the changed state was not captured |
| Many thumbnail-caption states | `opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1)` | Caption opacity can change over 200ms |
| Other thumbnail-caption states | `opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s` | A 300ms opacity transition with a 600ms delay is defined |
| Interview, FAQ, and news utility links | `background-color 0.3s` | A background-color transition is defined; the precise hover appearance is unverified |
| Many ordinary containers | `transition: all`; `animation: none` in the supplied summary | Insufficient to infer an active animation, duration, or interaction |

The caption delay is not evidence of the carousel's autoplay interval. The supplied samples do not expose a complete slide-transition timeline.

### Observed Affordances and Limits

- A pause control is visible in both opening captures, and play/pause labels exist in its DOM.
- Repeated slide content and preview states support a carousel structure. Its interval, easing, loop behavior, and pause persistence remain unverified.
- The mobile MENU tab is visible at the opening and footer. No opened-menu screenshot or click result was supplied.
- The desktop rail remains present during scrolling, but its exact positioning logic is unknown.
- News links extend horizontally on mobile. Their layout is measured; input behavior is not.
- PAGE TOP has a fragment destination. A specific scrolling animation is not established.

The capture process waited for page readiness, sampled layout stability, and visible image decoding. Perpetual animation was temporarily paused during readiness checks and resumed afterward. These precautions improve screenshot stability but do not establish all delayed content, hover states, keyboard behavior, or runtime animation semantics.

For a new implementation, favor restrained color and opacity changes around the supplied 200–300ms durations. Any additional image zoom, arrow translation, or menu entrance effect should be treated as a design recommendation.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | White | Gives photographs and vertical typography room to breathe |
| Navigation rail | Visually continuous with surrounding page | Maintains identity without introducing a heavy sidebar panel |
| Hero copy strips | White paper-like blocks over photography | Protects the legibility of small vertical annotations |
| Slide action tag | Charcoal with white text | Distinguishes the action word from explanatory copy |
| Business / policy cards | Photographic surface with a light lower area | Supports large dark link titles |
| Company rows | White with thin horizontal rules | Makes information links feel orderly and substantial |
| News region | Pale green-gray `#edf2f0` | Marks a change from corporate storytelling to updates |
| News image panels | White with centered identity artwork | Provides consistent article imagery |
| Directional marks | Green, white, or pale gray circles | Indicates linked surfaces at several scales |
| Mobile MENU | Charcoal notched tab | A compact, persistent navigation landmark |
| Footer | White with a fine closing rule | Returns to a plain corporate directory |

Avoid adding elevation to every linked region. The observed hierarchy comes primarily from scale, alignment, image area, and spacing.

## Imagery

Photography is naturalistic and directly related to publishing work. The supplied current-page captures show a handshake, bookshelves, a book being selected, handwriting, office furniture, and small previews of reading, computer work, walking, and conversation.

The palette within the images is broader than the interface palette: navy clothing, warm bookshop wood, pale blue daylight, white paper, and muted office surfaces. Preserve that natural color variety instead of applying a uniform green tint.

Hands, books, tools, and workplace context carry meaning. The main handshake crop intentionally includes partial bodies rather than requiring a full portrait. Mobile cropping keeps the central action legible within a tall frame.

### Observed Asset References

The supplied evidence does not contain image `src` values or original asset paths. The references below identify visible artwork without inventing filenames.

| Asset | Current-page evidence | Implementation guidance |
| --- | --- | --- |
| Tall header identity | Desktop and mobile opening captures | Use the authorized logo asset; do not recreate its lettering with an assumed font |
| Horizontal identity | News image panels and footer captures | Preserve the wide lockup and orange/green book mark |
| Handshake photograph | Desktop and mobile hero captures | Prepare responsive focal points around the joined hands |
| Book-selection photograph | Desktop business card | Keep the book and reaching hand visible behind the lower title |
| Notebook photograph | Desktop policy card | Preserve the writing action and light lower text area |
| Office chair and blinds | Desktop company section | Use a tall composition with quiet architectural lines |
| Book-curve ornaments | Intro label and company background | Reuse authorized artwork or create a clearly identified approximation |
| Small preview photographs | Desktop and mobile opening strips | Retain recognizable subject matter at thumbnail size |

The interview and recruitment text is documented, but their complete imagery is not. Obtain those assets from an authorized implementation source before attempting a faithful full-page reproduction.

## Layout & Responsive Behavior

### Desktop Composition

The page uses several alignments rather than a single centered max-width container:

- The identity rail occupies `248px` at the left.
- The hero photograph is centered within the document and uses a source slide width of `880px`.
- The hero statement occupies its own narrow area at the right.
- Business and policy cards begin at x = `280px` and extend to approximately x = `1401px`.
- Ordinary company and news content uses a narrower span ending near x = `1285px`.
- The main introduction is further inset, beginning at x = `396px`.
- The footer returns to a full-width layout with approximately `80px` side insets in the screenshot.

These deliberate shifts create the editorial rhythm. Flattening every section onto one identical grid would remove an important part of the composition.

### Mobile Composition

The desktop rail disappears from the visible page and is replaced by compact branding plus the persistent MENU tab. The headline remains vertical, becomes smaller, and overlaps the photograph. The preview strip moves below the image.

Text-led sections use `24px` side insets. The business and policy links use `8px` insets and stack vertically. Company information rows and recruitment links become full-width within the text column. News retains a horizontally extended row of cards. Footer groups stack while keeping two columns of child links.

The mobile footer is about twice the desktop footer height, reflecting real restructuring rather than uniform scaling. Body text remains `16px` in the sampled introductory containers, while supporting descriptions become `13–14px`.

### Measured Section Rhythm

Positions below are document coordinates, rounded to the nearest pixel. They help distinguish actual spacing from screenshot crop positions.

| Section | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Introduction, including interview teaser | `876 / 1045px` | `725 / 1303px` |
| Business and policy | `2081 / 434px` | `2116 / 572px` |
| Company | `2643 / 608px` | `2768 / 887px` |
| Recruitment | `3452 / 738px` | `3743 / 713px` |
| News | `4290 / 655px` | `4520 / 513px` |
| Footer | `4945 / approximately 437px` | `5033 / 887px` |

Only two viewport sizes were supplied. Exact media-query thresholds, intermediate tablet layouts, landscape behavior, and image source switching remain unknown. The Quick Start uses a recommended breakpoint rather than claiming to recover the original one.

## Do’s and Don’ts

### Do

- Preserve the white canvas, charcoal typography, and exact primary green `#009f5d`.
- Keep the corporate information hierarchy visible: business, company, recruitment, and news.
- Use Noto Sans JP for Japanese text and Almarai for the evidenced English utility roles.
- Preserve the hero's moderate font weight, strong tracking, and vertical reading order.
- Let workplace photography supply warmth and human context.
- Maintain different widths for the centered hero, inset introduction, broad image cards, and narrower information columns.
- Repeat the open-book curve sparingly as a recognizable brand ornament.
- Use thin rules and circular chevrons to organize linked content.
- Retain a horizontal news row on mobile when following the observed composition.
- Preserve the mobile footer's two-column child-link groups.
- Distinguish a declared transition from an interaction that was actually tested.

### Don’t

- Don't replace the corporate homepage with a single campaign funnel or an oversized primary conversion button.
- Don't convert the desktop identity rail into a conventional top navigation bar when reproducing this composition.
- Don't turn the mobile hero statement into an ordinary horizontal heading.
- Don't make every Japanese heading weight `700`; the source uses `500` and `600` strategically.
- Don't put all content into identical rounded cards or add a shadow to every link.
- Don't apply a green wash to every photograph.
- Don't introduce large orange buttons merely because orange appears in the logo.
- Don't treat hidden menu content or duplicated carousel text as simultaneously visible UI.
- Don't infer an autoplay interval from the thumbnail-caption delay.
- Don't force source slide widths to equal screenshot-visible image widths.
- Don't invent asset paths, unobserved menu states, or missing section imagery.

## Recommended Implementation Additions

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

- Give the mobile menu an accessible name, `aria-expanded`, and a relationship to its controlled panel. Manage focus and prevent closed offscreen links from remaining keyboard-accessible.
- Connect the playback control to the actual carousel timer and announce its current action. Respect reduced-motion preferences by starting in a static or paused state.
- Keep duplicated carousel items out of the accessibility tree and tab order. Use one coherent reading order for the headline and slide description.
- Implement mobile news overflow as a keyboard- and touch-accessible scroll region. Do not require dragging as the only way to reach articles.
- Increase effective touch targets for small arrow and playback controls while preserving their compact visual appearance.
- Use meaningful image alternatives where a photograph conveys content; mark repeated book ornaments and decorative arrows as decorative.
- Test vertical Japanese punctuation, font fallback, and line wrapping with the actual production copy.
- Check text contrast carefully. Calculated WCAG contrast for `#009f5d` against white is approximately `3.4:1`, so small essential green text needs attention. A recommended darker text-only green such as `#007b48` provides approximately `5.3:1`; it is not an observed source token.
- Keep the pale thumbnail captions and dates readable at small sizes. A darker neutral can be used for essential metadata in an accessibility-focused adaptation.
- Supply responsive image sizes and preserve each image's focal point. Reserve image dimensions to avoid moving the vertical headline or adjacent labels during loading.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas and footer: `#ffffff`.
- Body text, headings, dark slide tags, and MENU tab: `#333333`.
- Primary brand accent: `#009f5d`.
- News-section background: `#edf2f0`.
- Fine separators: source token `#e6e6e6`.
- Thumbnail captions: measured `#9e9e9e`.
- News dates: measured `#999999`.
- Orange: confined mainly to identity artwork; exact artwork fill not established.

### Overall Prompt

“Create a Japanese publishing-services corporate homepage with a white canvas, charcoal text, and green `#009f5d` accents. On desktop, place a tall identity lockup and compact navigation in a 248px left rail. Center a large workplace photograph independently of the later content grid, with a three-column vertical Japanese statement to its right. Highlight only the final phrase in green. Add small photographic preview strips near the lower sides and a compact pause control. Continue with an inset editorial introduction, a leadership interview teaser, two large photographic links, ruled company-information rows, recruitment navigation, a pale green news section, and a full corporate directory footer. Use Noto Sans JP for Japanese text, Almarai for small English labels, open-book curve ornaments, fine rules, and circular chevrons. On mobile, use compact branding and a dark notched MENU tab, overlap the vertical headline with the photograph, stack the image links, and retain horizontally arranged news cards.”

### Example Component Prompts

1. **Hero:** “A white Japanese corporate opening with a large central photograph of a bookstore-related handshake. Place three vertical headline columns at the right, using medium-weight Noto Sans JP and generous tracking; make the final column green. Add small vertical white copy strips and a charcoal action tag over the photograph. On mobile, use a tall crop and overlap the headline near the upper-right edge.”
2. **Business link:** “A broad photographic link showing a hand selecting a book. Place a short vertical annotation on white strips near the upper-left corner. At the lower-left, use a small English label above a 40px Japanese title. Place a white circular chevron at the lower-right. Use a barely rounded image edge and no shadow.”
3. **Company row:** “A spacious white information link with a fine gray top rule, a 32px semibold Japanese heading, a two-line 14px description, and a 48px green circle containing a white chevron. Use 48px vertical padding. On mobile, reduce the heading to 24px and the description to 13px while retaining generous leading.”
4. **News:** “A pale green-gray section using `#edf2f0`, with three desktop article columns. Each has a white image panel containing the horizontal identity, a small pale arrow circle, green category text, a gray date, and a plain dark title. On mobile, use 285px-wide cards separated by 24px in a horizontal overflow row.”
5. **Footer:** “A white corporate footer with a horizontal identity and address, three navigation groups, utility links, and a fine bottom rule. Use small green bullets. On mobile, center the identity and address, stack the navigation groups, keep two columns within each group, and place copyright opposite a compact PAGE TOP link.”

## Quick Start

### CSS Custom Properties

This is a recommended implementation scaffold. It uses measured colors and typography alongside geometry adapted from the supplied captures. The `1200px` breakpoint, hover color, simplified image wash, and layout formulas are recommendations. Load the identified fonts and authorized image assets separately. Menu state, carousel playback, and slide synchronization require application logic.

```css
:root {
  /* Measured palette */
  --surface: #fff;
  --ink: #333;
  --brand: #009f5d;
  --surface-news: #edf2f0;
  --rule: #e6e6e6;
  --ink-caption: #9e9e9e;
  --ink-muted: #999;
  --surface-soft: #f2f2f2;

  /* Recommended accessible small-text variant */
  --brand-text: #007b48;

  /* Computed source families; font loading is separate */
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: Almarai, sans-serif;

  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  --rail-width: 248px;
  --hero-width: 880px;
  --radius-image: 4px; /* Visual approximation */
  --arrow-size: 48px; /* Visual approximation */
  --ease-link: cubic-bezier(0.1, 0.6, 0.68, 1);
  --ease-caption: cubic-bezier(0.215, 0.61, 0.355, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

a { color: inherit; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

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

/* The frame ends before the full-width footer. */
.site-frame { position: relative; }

.site-rail {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 5;
  width: var(--rail-width);
  padding: 64px 40px;
}

.site-brand {
  display: block;
  width: 168px;
  height: 176px;
}

.site-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Suggested persistence; the original scroll algorithm is unknown. */
.rail-nav {
  position: sticky;
  top: 40px;
  margin-top: 52px;
}

.rail-primary { display: grid; gap: 16px; }

.rail-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
}

.rail-utilities {
  display: grid;
  gap: 14px;
  margin-top: 36px;
  font-size: 12px;
  line-height: 1.4;
}

.arrow-circle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--arrow-size);
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
}

.arrow-circle::before {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: translateX(-2px) rotate(45deg);
}

.rail-link .arrow-circle { --arrow-size: 16px; }
.rail-link .arrow-circle::before {
  width: 4px;
  height: 4px;
  border-width: 2px;
  transform: translateX(-1px) rotate(45deg);
}

.mobile-menu { display: none; }

.hero {
  position: relative;
  min-height: 736px;
  padding-top: 32px;
  overflow: clip;
}

.hero-media {
  position: relative;
  width: min(var(--hero-width), calc(100% - 544px));
  aspect-ratio: 5 / 4;
  margin-inline: auto;
}

.hero-media > img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-image);
  object-fit: cover;
  object-position: center;
}

.hero-title {
  position: absolute;
  z-index: 2;
  top: 70px;
  left: calc(50% + 468px);
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: 0.2em;
}

.hero-title > span {
  display: block;
  white-space: nowrap;
}

.hero-title .accent { color: var(--brand); }

.hero-caption {
  position: absolute;
  top: 48px;
  left: 144px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hero-caption p { margin: 0; }

.hero-copy {
  writing-mode: vertical-rl;
  padding: 6px 4px;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}

.hero-copy > span { display: block; }

.hero-tag {
  writing-mode: vertical-rl;
  padding: 6px 7px;
  border-radius: 1px;
  color: #fff;
  background: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.4em;
}

.hero-playback {
  position: absolute;
  top: 582px;
  right: 32px;
  min-width: 82px;
  height: 34px;
  border: 1px solid var(--rule);
  color: var(--ink);
  background: #fff;
  font-size: 10px; /* Approximation of the visible inner label */
}

.hero-thumbnails {
  position: absolute;
  top: 652px;
  display: flex;
  gap: 24px;
  width: max-content;
}

.hero-thumbnails--before { right: calc(50% + 464px); }
.hero-thumbnails--after { left: calc(50% + 464px); }

.hero-thumb { flex: 0 0 80px; width: 80px; }
.hero-thumb img { width: 100%; height: 60px; object-fit: cover; }
.hero-thumb p {
  margin: 12px 0 0;
  color: var(--ink-caption);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  transition: opacity 200ms var(--ease-caption);
}

.content-inner {
  margin-left: calc(var(--rail-width) + 32px);
  margin-right: 140px;
}

.intro { margin-top: 140px; }
.intro-inner {
  width: min(864px, calc(100% - 420px));
  margin-left: calc(var(--rail-width) + 148px);
}

.section-label {
  margin: 0;
  color: var(--brand);
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
}

.book-rule {
  display: block;
  width: 108px;
  height: 8px;
  margin-top: 8px;
  color: var(--brand);
}

.intro-lead {
  margin: 48px 0 32px;
  font-size: 48px;
  line-height: 1.6;
  font-weight: 600;
}

.intro-body { display: grid; gap: 24px; }
.intro-body p { margin: 0; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 160px 24px 128px calc(var(--rail-width) + 32px);
}

.feature-link {
  position: relative;
  display: block;
  aspect-ratio: 14 / 11;
  overflow: hidden;
  border-radius: var(--radius-image);
  text-decoration: none;
}

.feature-link > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Recommended approximation of the light lower image area. */
.feature-link::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgb(255 255 255 / 60%));
  pointer-events: none;
}

.feature-heading {
  position: absolute;
  z-index: 1;
  left: 40px;
  right: 96px;
  bottom: 32px;
}

.feature-heading p {
  margin: 0 0 10px;
  font: 400 14px/1 var(--font-en);
}

.feature-heading h2 {
  margin: 0;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.feature-link > .arrow-circle {
  position: absolute;
  z-index: 1;
  right: 32px;
  bottom: 32px;
  color: var(--ink);
  background: #fff;
}

.company-grid {
  display: grid;
  grid-template-columns: minmax(0, 435px) minmax(0, 450px);
  gap: 120px;
}

.company-photo { width: 100%; height: 100%; object-fit: cover; }
.company-heading { padding: 36px 0 63px; }
.company-heading h2 {
  margin: 16px 0 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}

.company-link {
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 48px 24px 48px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}

.company-link-copy { flex: 1; min-width: 0; }
.company-link h3 {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
}
.company-link p { margin: 0; font-size: 14px; line-height: 1.8; }

.news {
  margin-top: 100px;
  padding: 80px 0 100px;
  background: var(--surface-news);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 64px;
}

.news-card { display: block; min-width: 0; text-decoration: none; }
.news-image {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-image);
  background: #fff;
}
.news-image > img { width: 54%; height: auto; }
.news-image .arrow-circle {
  --arrow-size: 32px;
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: var(--ink);
  background: var(--surface-soft);
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 12px;
  line-height: 1;
}
.news-category { color: var(--brand-text); }
.news-date {
  padding-left: 8px;
  border-left: 1px solid var(--ink-muted);
  color: var(--ink-muted);
  font-size: 10px;
}
.news-title { margin: 20px 0 0; font-size: 14px; line-height: 1.8; font-weight: 500; }
.news-more { display: flex; justify-content: flex-end; margin-top: 48px; }

.site-footer { padding: 72px 80px 24px; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(300px, 2fr) repeat(3, 1fr) minmax(120px, 0.8fr);
  gap: 40px;
}
.footer-logo { width: 168px; height: auto; }
.footer-address { margin-top: 40px; font-size: 12px; line-height: 1.8; }
.footer-group h2 { margin: 0 0 20px; font-size: 15px; font-weight: 700; }
.footer-group ul { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.footer-group a { display: flex; gap: 6px; font-size: 13px; line-height: 1.2; text-decoration: none; }
.footer-group a::before { content: '•'; color: var(--brand); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid #bfbfbf;
  font-size: 10px;
}

.rail-link, .company-link, .footer-group a {
  transition: color 300ms var(--ease-link);
}

@media (hover: hover) {
  /* Recommended hover state; not captured in the supplied evidence. */
  .rail-link:hover, .company-link:hover, .footer-group a:hover {
    color: var(--brand-text);
  }
}

/* Recommended threshold; original media queries were not supplied. */
@media (max-width: 1199px) {
  .site-rail { inset: 12px auto auto 24px; width: 91px; padding: 0; }
  .site-brand { width: 91px; height: 96px; }
  .rail-nav { display: none; }

  .mobile-menu {
    position: fixed;
    z-index: 20;
    top: 20px;
    right: 15px;
    display: block;
    width: 86px;
    height: 40px;
    padding: 0 18px 0 20px;
    border: 0;
    color: #fff;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 50%);
    font: 700 11px/1 var(--font-en);
    letter-spacing: 0.04em;
  }

  .hero {
    --photo-height: clamp(360px, 108.8vw, 520px);
    min-height: calc(136px + var(--photo-height) + 92px);
    padding-top: 136px;
  }
  .hero-media { width: calc(100% - 16px); height: var(--photo-height); aspect-ratio: auto; }
  .hero-title { top: 80px; right: 16px; left: auto; font-size: 32px; line-height: 1.3; letter-spacing: 0.19em; }
  .hero-caption { top: 16px; left: 16px; gap: 6px; }
  .hero-copy { font-size: 14px; }
  .hero-tag { padding: 5px 6px; font-size: 14px; }
  .hero-playback { top: calc(136px + var(--photo-height) - 46px); right: 8px; min-width: 88px; height: 38px; }
  .hero-thumbnails--before { display: none; }
  .hero-thumbnails--after {
    top: calc(136px + var(--photo-height) + 16px);
    right: 0;
    left: 24px;
    width: auto;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .hero-thumb { flex-basis: 72.8px; width: 72.8px; }
  .hero-thumb p { margin-top: 5px; }

  .content-inner { margin-inline: 24px; }
  .intro { margin-top: 72px; }
  .intro-inner { width: auto; margin-inline: 24px; }
  .intro-lead { font-size: 28px; }
  .intro-body { gap: 16px; }
  .book-rule { width: 96px; }
  .section-label { font-size: 12px; }

  .feature-grid { grid-template-columns: 1fr; gap: 8px; margin: 88px 8px 80px; }
  .feature-heading { left: 24px; right: 76px; bottom: 20px; }
  .feature-heading p { margin-bottom: 8px; font-size: 12px; }
  .feature-heading h2 { font-size: 24px; }
  .feature-link > .arrow-circle { --arrow-size: 40px; right: 20px; bottom: 20px; }

  .company-grid { display: flex; flex-direction: column; gap: 32px; }
  /* Recommended mobile image order; its original placement is unverified. */
  .company-photo { order: 2; height: auto; max-height: 480px; }
  .company-heading { padding: 24px 0 56px; }
  .company-heading h2 { margin-top: 12px; font-size: 18px; }
  .company-link { gap: 23px; padding: 28px 0 36px; }
  .company-link h3 { margin-bottom: 4px; font-size: 24px; line-height: 1.8; }
  .company-link p { font-size: 13px; }

  .news { margin-top: 64px; padding: 56px 0 64px; }
  .news-grid { display: flex; gap: 24px; margin-top: 40px; margin-right: -24px; padding-right: 24px; overflow-x: auto; }
  .news-card { flex: 0 0 285px; }
  .news-meta { margin-top: 14px; }
  .news-title { margin-top: 14px; font-size: 13px; }
  .news-more { margin-top: 36px; }

  .site-footer { padding: 64px 24px 24px; }
  .footer-grid { display: block; }
  .footer-brand { text-align: center; }
  .footer-logo { width: 180px; margin-inline: auto; }
  .footer-address { margin-top: 24px; }
  .footer-group { margin: 54px 24px 0; }
  .footer-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .footer-bottom { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-thumb p, .rail-link, .company-link, .footer-group a {
    transition: none;
  }
  /* Application logic must also stop automatic slide changes. */
}
```

### Component Markup Examples

Keep vertical text in a sensible source order. The browser handles column direction through CSS.

```html
<h1 class='hero-title' lang='ja'>
  <span>人と本</span>
  <span>出逢う瞬間を</span>
  <span class='accent'>共に創る。</span>
</h1>

<a class='company-link' href='/company/'>
  <div class='company-link-copy'>
    <h3 lang='ja'>会社概要</h3>
    <p lang='ja'>小学館P.Sの会社概要・アクセスマップ・沿革をご紹介します。</p>
  </div>
  <span class='arrow-circle' aria-hidden='true'></span>
</a>

<!-- Recommended approximation, not the original brand path. -->
<svg class='book-rule' viewBox='0 0 108 8' aria-hidden='true'>
  <path d='M0 2H40C47 2 50 6 54 6C58 6 61 2 68 2H108'
        fill='none' stroke='currentColor' stroke-width='4'/>
</svg>
```

The CSS covers the main visual primitives. Complete the interview, recruitment, and mobile-menu layouts using the measurements above and verified assets. It does not supply missing imagery or reconstruct unobserved interaction states.

### Tailwind v4 Token Mapping

Optional aliases for an implementation that already uses Tailwind v4. This is not evidence of the original site's framework.

```css
@theme inline {
  --color-surface: #fff;
  --color-ink: #333;
  --color-brand: #009f5d;
  --color-brand-text: #007b48;
  --color-news: #edf2f0;
  --color-rule: #e6e6e6;
  --color-caption: #9e9e9e;

  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: Almarai, sans-serif;

  --text-caption: 10px;
  --text-utility: 12px;
  --text-body: 16px;
  --text-section: 24px;
  --text-feature: 40px;
  --text-statement: 48px;

  --spacing-rail: 248px;
  --spacing-content-inset: 24px;
  --spacing-arrow: 48px;
  --radius-image: 4px;
}
```

## Sources & Evidence

- [Shogakukan Publishing Services homepage](https://www.sho-ps.co.jp/): original and final URL; supplied HTTP status `200`.
- Supplied browser retrieval timestamp: `2026-09-16T19:33:40.056Z`, equivalent to September 17, 2026, 04:33 JST.
- Three current-page desktop captures at `1440 × 1000`: opening composition, business/company content, and news/footer content.
- Two current-page mobile captures at `390 × 844`: opening composition and footer.
- Rendered DOM and computed-style evidence for both viewports: document dimensions, element rectangles, font declarations, colors, custom properties, links, and selected transition declarations.
- Observed navigation destinations establish homepage link structure only. Destination-page design, menu opening, carousel controls, hover states, keyboard behavior, and smooth scrolling were not independently exercised.

This reference describes the current homepage represented by the supplied inspection. Screenshot estimates, calculated dimensions, and recommended implementation choices are labeled separately from measured source values.