株式会社ストラテジックディシジョン｜人材紹介コーポレートサイト

# STRATEGIC DECISION — Style Reference

> An expansive corporate index framed by a black navigation rail, oversized editorial type, and an electric green-to-blue brand mark.

**Website:** [strategicd.co.jp](https://strategicd.co.jp/)
**Original URL:** https://strategicd.co.jp/
**Final URL:** https://strategicd.co.jp/
**Theme:** light, with pale blue-gray and white content fields, black typography, and concentrated gradient artwork.
**Inspected:** September 29, 2026. Supplied retrieval timestamp: 13:23:09 UTC / 22:23:09 JST.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage: opening viewport, five numbered business/company sections, news, persistent navigation and contact affordances, and footer. Visual captures cover the desktop opening, WHO WE ARE section, and page end, plus the mobile opening and page end. Rendered DOM measurements provide additional evidence for the intervening content. Linked pages and an opened navigation panel were not inspected.

STRATEGIC DECISION presents a specialist recruitment business through a deliberately spacious editorial structure. A narrow black strip occupies the left edge throughout the supplied captures. The remaining canvas alternates between cool gray and white, with large uppercase headings, numbered sections, Japanese explanatory text, and thin black rules. A circular CONTACT graphic stays near the lower-right area, while saturated green-to-blue artwork supplies the strongest color.

This is a corporate homepage with several destinations: business services, industry teams, consultants, company information, recruitment, and news. Its hierarchy comes from section numbers, changes of scale, contrasting fields, and large amounts of open space. The page is not organized as a sequence of promotional cards.

The opening state needs special care. The desktop capture is predominantly empty gray with a vertical Japanese statement at the upper right; the mobile capture shows a large gradient symbol. These are the observed states. Their difference does not establish an animation sequence or a permanent rule for hiding content.

## How to Read This Reference

- **Measured** means a value reported by the supplied rendered DOM or computed styles. Measurements apply to the stated viewport and capture state.
- **Calculated** means arithmetic using those measurements, such as subtracting the rail width from the viewport width.
- **Estimated** means a visual approximation from an original-page screenshot. Estimated font sizes, artwork bounds, and rule widths are identified explicitly.
- **Recommended** means an implementation decision for a new site. Breakpoints, accessible behavior, fallback fonts, and optional hover feedback are not recovered source behavior.
- **Source variables** retain their actual names. Other tokens and all Quick Start class names are reference aliases.
- A DOM rectangle does not prove that an element was visible. Several navigation links were outside the viewport, and the mobile H1 had a measured box despite being absent from the supplied opening image.
- Computed font-family declarations identify the requested stacks. The supplied evidence does not independently verify which downloaded font file rendered every glyph.

## Tokens — Colors

### Default Palette

| Name | Value | Source or reference token | Evidence and role |
| --- | --- | --- | --- |
| Cool Canvas | `#e8eeef` | Source `--color-primary`; alias `--color-canvas` | Measured HTML background at both viewports; dominant opening, media, news, and footer field |
| Black Ink | `#000000` | Alias `--color-ink` | Measured text color; visually matches the rail and fine dividers |
| White Field | `#ffffff` | Alias `--color-field` | Visible desktop chapter text panel; white is also measured on offscreen navigation text |
| Electric Green | `#64ff50` | Source `--color-green`, `--bg-green` | Declared brand color; visually consistent with the bright green artwork regions |
| Bright Blue | `#0064ff` | Source `--bg-blue-pale` | Declared blue; suitable reference anchor for the gradient's blue region |
| Deep Blue | `#0000e6` | Source `--bg-blue` | Declared saturated blue; visually consistent with the large footer artwork |

The gradient is concentrated in the identity artwork. Body text, dividers, section numbers, arrows, and contact lettering remain black. Keep the pale canvas genuinely cool rather than replacing it with warm off-white.

**Gradient limitation:** the source variables are exact, but the supplied evidence does not expose the SVG gradient stops, their positions, or animated interpolation. A green → bright blue → deep blue CSS gradient is an approximation, not a measured reconstruction of the artwork.

### Declared Secondary Colors

These variables appear in the rendered page environment, but their roles are not established by the supplied captures.

| Source variable | Value |
| --- | --- |
| `--bg-gray` | `#84909f` |
| `--bg-orange` | `#fb8023` |
| `--bg-red` | `#ff3200` |
| `--bg-violet` | `#be29a0` |
| `--bg-green-deep` | `#00e12c` |
| `--bg-pink` | `#ff6e6e` |
| `--bg-yellow` | `#ffe61e` |

Do not assign these colors to teams, staff categories, or interaction states without further evidence. WordPress administrative colors and Swiper defaults also appear in the variable dump; their presence does not establish visible homepage colors or controls. No selectable color themes were observed.

## Tokens — Typography

### Japanese Text — Measured Stack

- **Computed family:** `noto-sans-cjk-jp, sans-serif`.
- **Body weight:** `400`.
- **Opening statement weight:** `700`.
- **Character:** direct, compact Japanese sans-serif text with relatively short line lengths inside broad panels.
- **Reference alias:** `--font-japanese`.

The HTML element reports Times, but the body overrides it. Times is not evidence of a serif visual direction for this page.

### English Navigation and Links — Measured Stack

- **Computed family:** `acumin-pro, sans-serif` on primary navigation links and VIEW links.
- **Navigation weight:** `700`.
- **VIEW weight:** `600`.
- **Tracking:** negative, with `-0.04em` on the primary navigation links and `-0.02em` on VIEW.
- **Reference alias:** `--font-display`.

The large chapter headings visually use a heavy grotesk treatment. Their individual text spans were not included in the style sample, so their exact family and weight are not independently measured. Reusing the measured Acumin stack for those headings is a reasonable implementation recommendation, subject to font availability and licensing.

### Measured Type Scale

| Role | Desktop | Mobile | Weight and spacing |
| --- | --- | --- | --- |
| General body | `24px / 33.84px` | `14px / 19.74px` | `400`; normal tracking |
| Chapter description | `24px / 33.6px` | `14px / 19.6px` | `400`; `0.02em` tracking |
| Vertical H1 | `32.64px / 38.5152px` | `21.12px / 24.9216px` | `700`; `-0.05em` tracking |
| Offscreen primary navigation | `36px / 36px` | `28px / 28px` | Acumin stack, `700`; `-0.04em` tracking |
| Offscreen industry links | `17.1px / 17.1px` | About `17.09px / 17.09px` | Japanese stack, `500`; measured tracking `-1.44px` / `-1.12px` |
| VIEW | `45.984px / 64.8374px` | `22.988px / 32.4131px` | Acumin stack, `600`; `-0.02em` tracking |
| Privacy link | `18px / 25.38px` | `11px / 15.51px` | Japanese stack, `700` |
| Copyright | `20px / 28.2px` | `11px / 15.51px` | Japanese stack, `700` |

The mobile H1 values describe its DOM box and styles; they do not establish that the text was visible in the mobile opening capture.

### Display Typography — Estimates and Derived Evidence

| Element | Evidence | Practical interpretation |
| --- | --- | --- |
| Desktop chapter number | Visually about `64px` in the WHO WE ARE capture | A substantial index marker above the title |
| Desktop English chapter title | Visually about `100–104px` | Very heavy uppercase letters with tightly stacked lines |
| Additional title line | Chapter H2 box heights differ by approximately `83.19px` on desktop and `49.19px` on mobile | Calculated line advance; not a measured child font size |
| Mobile English title | Child typography not sampled | About `61.5px` with `0.8` line height is a starter approximation, not an observed font-size declaration |
| Japanese chapter subtitle | Visually about `24px`, bold, on desktop | Smaller than the English title but clearly part of the heading group |
| Rail MENU label | Visually about `16px` | Compact white lettering, rotated down the rail |
| Circular CONTACT lettering | Visually about `13–14px` desktop and `9–10px` mobile | Artwork-scale lettering; exact font and construction are unknown |

The H2 containers themselves report `24px` on desktop and `14px` on mobile. Those inherited values must not be copied as the size of the visibly oversized English descendants.

Keep deliberate title breaks. The current desktop section reads WHO WE / ARE, and the extracted consultant title reads CONSULT / ANTS. These breaks contribute to the compact, block-like composition.

## Tokens — Spacing & Shapes

### Spacing Scale

The evidence establishes two responsive states, not a complete spacing formula.

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Left rail / main offset | `50px` | `40px` | Measured main padding; confirmed visually |
| Chapter horizontal inset | About `50px` | `20px` | Desktop coordinates and screenshot; mobile measured coordinates |
| Chapter copy width | About `594px` | `310px` | Measured paragraph and heading boxes |
| First chapter heading inset below section start | `111px` | `31px` | Calculated from measured coordinates |
| Heading-group to description gap | `48px` | `28px` | Calculated from H2 bottom and paragraph top |
| Footer horizontal inset | `40px` | `20px` | Measured footer padding |
| VIEW row height | `114px` | `54px` | Measured link rectangles |
| Main bottom padding | `270px` | `270px` | Measured; not the entire visible footer-art region |
| H1 top offset | `30px` | `15px` | Measured |
| H1 right clearance | About `45px` | About `15px` | Calculated from measured boxes |
| Visible rule thickness | About `1px` | About `1px` | Screenshot estimate |

### Shapes

| Element | Treatment | Evidence |
| --- | --- | --- |
| Content panels | Rectangular, square corners | Visible in the desktop section |
| Image frame | Square corners | Visible WHO WE ARE image |
| VIEW link | Wide ruled row without a filled button body | Screenshot and measured link rectangle |
| Contact affordance | Circular text around a solid dark dot | Visible at both viewports |
| Brand symbol | Custom asymmetric outline with rounded outer mass and concave cutout | Visible mobile opening and desktop rail |
| Footer artwork | Oversized cropped gradient forms with rounded ends | Visible desktop page end |

Measured sample elements report `border-radius: 0`. This does not describe the geometry embedded inside logo or contact artwork. Use the authorized symbol asset for its contour rather than approximating the identity with a generic pill.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Available width after rail | `1390px`, calculated | `350px`, calculated |
| First content section begins | Document `y = 1000px` | Document `y = 844px` |
| Numbered-section region | `7203px` high | About `3807.14px` high |
| News section begins | Document `y = 8543px` | Document `y ≈ 4807.14px` |
| News section height | About `2732.89px` | About `2286.41px` |
| Total document height | Reported `12044px` | Reported `7730px` |
| Footer height | About `95.19px` | About `60.5px` |
| WHO WE ARE image | Visually about `595 × 648px` | No corresponding middle-page screenshot supplied |
| Contact artwork | Visually about `112px` across | Visually about `78px` across |

The contact anchor's sampled inline rectangle is much shorter than its visible circular artwork. Do not treat that rectangle as a verified circular hit target; descendant geometry and actual pointer coverage were not supplied.

## Components

### Persistent Left Rail

**Role:** a compact navigation edge that leaves most of the viewport available for the page.

The rail is solid black and spans the visible height. At desktop it occupies the first 50px. A small gradient symbol appears near `x = 10px`, `y = 24px`, with an approximately 30px-wide link. MENU sits near the vertical midpoint, with a fine chevron beside it.

At mobile the rail narrows to 40px and MENU remains centered vertically. The small upper logo is absent from the supplied mobile capture. Do not reserve the height of a conventional horizontal header: the sampled HEADER box has zero height, while the visible controls occupy the edge of the page.

The rail remains in the same screen location across the supplied scroll captures. This supports persistent edge placement; the precise positioning implementation was not sampled.

### Navigation Content — Closed State Evidence

**Role:** access to the five major homepage topics and their destinations.

The DOM contains numbered labels for BUSINESS, TEAMS, CONSULTANTS, WHO WE ARE, and RECRUIT, with Japanese explanations. Industry links cover manufacturing/automotive, construction/real estate, and IT/consulting.

Primary navigation links have white text, the Acumin stack, bold weight, and tight tracking. Their measured positions are outside the left edge: primary link boxes begin around `x = -1656px` on desktop and `x = -408px` on mobile. This supports an offscreen navigation structure in the captured state.

The open panel's composition, background extent, entrance direction, close control, focus behavior, and animation are unverified. The TEAMS label is present, but a standalone team-index destination is not established by the supplied link list.

### Opening Viewport

**Role:** establish the statement and visual identity before the numbered content begins.

The first content section starts exactly one supplied viewport height down the document. The desktop opening is a pale field, a black rail, a vertical statement at the upper right, and the circular contact affordance near the lower right. A small piece of green artwork is clipped at the top-right edge.

The statement is the actual source copy: “プロフェッショナル人材を 戦う企業へ。” It occupies two vertical columns in the desktop capture. Its measured box is approximately `77.02 × 372.11px` at `x = 1317.97px`, `y = 30px`. A vertical Japanese layout is visually established; `writing-mode: vertical-rl` is a practical implementation recommendation.

The mobile capture instead shows a large symbol, approximately `292 × 247px`, beginning near `x = 63px`, `y = 173px`. Its left side moves through green and turquoise toward saturated blue on the right. No accompanying wordmark or statement is visibly readable in that image, although the H1 remains in the rendered DOM.

Do not interpret the desktop's empty central area as proof that the intended experience has no central artwork. Equally, do not invent a completed desktop composition from an unobserved state. A new implementation should provide a readable static state independent of animation readiness.

### Numbered Chapter Panel

**Role:** introduce a topic and connect it to a dedicated page or group of pages.

The desktop WHO WE ARE capture gives the clearest anatomy. The area after the rail divides into two approximately equal panels, separated by a thin black vertical rule. The left panel is white; the right is pale gray.

The left stack contains:

1. A large chapter number: `4`.
2. A very large uppercase title, broken into WHO WE / ARE.
3. The Japanese subtitle “ストラテジックディシジョンについて”.
4. A short Japanese paragraph after approximately 48px of separation from the complete heading group.

The copy begins at `x = 100px`, leaving 50px between the rail edge and text. Its width is about 594px. Large empty areas below the paragraph are part of the observed composition.

The right stack begins at approximately `x = 795px`. It contains a tall rectangular photograph, a gap, and the ruled VIEW row. The photograph appears strongly soft-focused in this capture. That softness is a visible state, not verified evidence of an intentional blur filter or hover reveal.

On mobile, measured text and link boxes use the same `x = 60px`, `310px` width and appear in sequential vertical order. This supports a stacked chapter layout inside the 350px content strip. The exact mobile visual treatment of the middle sections remains less certain because no middle-page mobile capture was supplied.

### VIEW Link Row

**Role:** a strong but visually unboxed route to a detail page.

VIEW appears in large semibold English type on the left of a full-width row. A thin horizontal arrow occupies the right. The desktop WHO WE ARE example is bounded by thin horizontal rules and is approximately 595px wide by 114px high. Mobile links measure 310px wide by 54px high.

The whole measured link rectangle carries the destination, rather than only the word. Verified destinations include `/business`, the three industry pages, `/consultant`, `/whoweare`, and `/recruit`.

In the desktop chapter capture, the contact graphic overlaps the far-right arrow area. Preserve the independent identity of the two controls, but a new implementation should reserve enough clearance to prevent competing hit targets. Hover and focus appearances were not observed.

### Industry Team Entries

**Role:** let visitors select the team relevant to their business or career.

The rendered content includes three bilingual entries:

| Japanese label | English label | Verified destination |
| --- | --- | --- |
| 製造・自動車業界 | MANUFACTURING / AUTOMOTIVE | `/business/manufacturer` |
| 建設・不動産業界 | CONSTRUCTION / REAL ESTATE | `/business/construction` |
| IT・コンサル業界 | IT / CONSULTING | `/business/it` |

Each entry has its own VIEW link. Desktop link rows share the right-column position and width, while mobile rows share the main 310px content width. Their measured vertical intervals are 456px on desktop and 220px on mobile.

No supplied screenshot establishes individual industry imagery or category colors. Keep those details unspecified rather than assigning them from the unused color variables.

### Consultant Introduction

**Role:** introduce the people behind the recruitment service.

The heading is section `3`, and its English word is broken as CONSULT / ANTS in the extracted content. The introduction is followed by eight romanized staff names and a VIEW link to `/consultant`.

Name order differs between the desktop and mobile extracts. This alone does not establish a carousel, randomized ordering, or autoplay. Portrait arrangement, controls, slide timing, and hover behavior were not visually verified. For reuse, preserve the strong section heading and clear route to the consultant directory without inventing a particular slider.

### News Rows

**Role:** present company updates with dates and substantial inline text.

The current DOM contains six dated entries, including awards, a seminar announcement, and a company identity/site renewal notice. Rendered vertical coordinates place the more recent entries above the older ones, even though the plain text extraction starts with the oldest entry.

At the desktop page end, the news region has a black left area, a white date column, and a pale-gray text column. In the supplied capture, the black area extends to roughly `x = 250px`, the date column to approximately `x = 707px`, and the body text begins around `x = 753px`. Thin rules separate the regions.

The mobile ending shows news copy spanning the 350px content strip with 20px horizontal padding. Text uses the measured `14px` body scale and approximately `19.7px` line height. The available evidence shows substantial article text in the page flow; it does not establish an accordion or click-to-expand interaction.

Repeated NEWS text exists in the DOM, but no marquee behavior or speed was verified.

### Circular Contact Link

**Role:** maintain access to the contact destination throughout the page.

Repeated CONTACT lettering forms an open circular ring around a solid dark dot. The surrounding gray canvas remains visible; the component is not a filled circular button or a shadowed floating card. Its link destination is `/contact`.

The visible diameter is approximately 112px on desktop and 78px on mobile. In the opening captures, right clearance is about 40px and 20px respectively. The control appears higher in the page-end captures, above the footer text. This is consistent with footer clearance behavior, but the responsible positioning or animation logic is unverified.

Lettering orientation differs between captures. Continuous rotation is plausible but not established by these still images. A static circular treatment is sufficient to reproduce the evidenced appearance.

### Footer Artwork and Legal Row

**Role:** close the page with a large brand gesture and minimal utility information.

The desktop ending includes oversized gradient forms extending from the left edge of the content area. Their rounded ends and large cropped scale dominate the background. The visible central blue form is approximately 315px tall; other forms are cut by the artwork boundaries and viewport.

On mobile, the visible artwork appears as a broad rectangular green-to-blue crop spanning the entire 350px content width. In the supplied ending image it is roughly 338px tall. These are different captured appearances; the evidence does not establish whether every difference comes from responsive cropping, animation phase, or both.

The legal row sits below a thin black rule. PRIVACY POLICY aligns left and ©STRATEGIC DECISION aligns right. Desktop footer padding is 40px horizontally; mobile padding is 20px. Both labels fit on one line in the 390px capture, using 11px bold type.

The artwork can continue behind the desktop legal region. Keep the rule and text legible over that field without adding a card, rounded container, or elevation shadow.

## Tokens — Motion & Interaction

No reliable source durations, easing curves, or keyframes were supplied.

| Feature | Evidence | What remains unverified |
| --- | --- | --- |
| Persistent rail | Same edge placement across captures | Exact `position` rule and stacking implementation |
| Contact presence | Visible near lower right across scroll states | Fixed/sticky logic and footer avoidance algorithm |
| Contact lettering orientation | Different orientations in still images | Continuous rotation, direction, duration, easing |
| Opening artwork | Different visible desktop and mobile states | Entrance sequence, reveal completion, scroll linkage |
| Offscreen navigation | Negative horizontal link coordinates | Opening trigger behavior, panel transition, keyboard handling |
| Soft photograph | Strongly blurred appearance in one chapter capture | Intentional art direction, loading state, CSS filter, hover reveal |
| Loading assets | `loading-screen-in` and `loading-screen-out` image references in DOM | Visible loader sequence and timing |
| Consultant names | Different extraction orders | Carousel, automatic movement, or ordering logic |
| Repeated NEWS labels | Repetition in rendered text | Marquee or other animation |

Sampled elements report `animation: none` and a transition entry of `all`. The latter does not establish a nonzero transition duration. These samples also do not cover every artwork element, pseudo-element, or script-driven effect.

The capture process waited for document load, relevant finite animations, layout/text stability, and image decoding within bounded time limits. It temporarily paused perpetual animations during readiness checks and resumed them afterward. This improves capture reliability but does not prove that every delayed reveal completed.

**Recommended implementation policy:** render essential headings and destinations immediately. Optional link feedback can use a short `160ms ease-out` transition. Provide a reduced-motion mode, and keep brand artwork meaningful as a static composition. These are recommendations, not measured motion tokens.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Main canvas | Solid `#e8eeef` | Broad calm field around typography and artwork |
| Navigation rail | Solid black with white MENU and small desktop symbol | Persistent orientation and navigation access |
| Chapter text field | White on desktop | Distinguishes the explanatory half from media |
| Chapter media field | Pale gray | Supports the photograph and VIEW row |
| Rules | Thin black lines | Defines columns, action rows, news entries, and footer |
| Identity artwork | Highly saturated green/blue gradients | Concentrated visual energy |
| Contact link | Dark text and dot over the existing surface | Persistent contact access without an enclosing card |

There is no visible general-purpose shadow or rounded-card system in the supplied captures. Separation comes from adjoining fields, hard edges, linework, and scale.

## Imagery

The clearest visual assets are the custom gradient symbol, the soft photograph in WHO WE ARE, and the huge gradient shapes at the page end.

The symbol combines an expansive rounded right side with a concave lower-left cutout. The original page's renewal notice explains that the identity evokes the number `2`, representing the two parties connected by the business. That meaning is independently present in the inspected homepage text.

The WHO WE ARE photograph contains indistinct dark-clothed figures against a light background. It is intentionally described here as soft in the captured state; the underlying photographic treatment and cause of blur are not established. Do not apply a blanket blur to all replacement photography on this evidence.

The footer artwork depends on oversized cropping. Its shapes extend beyond their frame rather than appearing as small decorative badges. The mobile ending preserves a large uninterrupted gradient area.

### Observed Asset References

Paths are relative to https://strategicd.co.jp/. They were present in the supplied original-page DOM; their files were not separately fetched during this analysis.

| Asset | Observed path | Supported use |
| --- | --- | --- |
| Header identity symbol | `/wp/wp-content/themes/sd_2023_v3/assets/img/h_logo.svg` | Linked home identity; desktop rail appearance is visible |
| Loading artwork | `/wp/wp-content/themes/sd_2023_v3/assets/img/loading.svg` | Referenced by loading-screen image elements; sequence unverified |
| WHO WE ARE photograph | Exact path not provided | Tall soft photographic frame in the desktop capture |
| Large opening/footer artwork | Exact paths not provided | Visible symbol and cropped gradient forms; animation implementation unknown |

Use authorized original assets where available. The tiny rail logo can confirm identity, but its path does not prove that the larger artwork is produced from that same file.

## Layout & Responsive Behavior

### Desktop: A Narrow Edge and Two Large Fields

The 50px rail leaves 1390px for the homepage. In the WHO WE ARE capture this divides into two approximately 695px fields. After horizontal padding, each content column is approximately 595px wide. The central rule is near `x = 744–745px`.

Text begins at `x = 100px`; media begins at `x = 795px`. This is a coordinated composition built from two large fields, not a centered maximum-width card. The image occupies much of the right panel's height, while the left paragraph is followed by open white space.

The chapter region is tall: its measured extent is 7203px before the separate news area. Repeated heading positions and link coordinates support generous vertical pacing, but do not establish a universal `100vh` height for every chapter. The team section has more vertical content than the other topics.

### Mobile: Preserve the Rail, Stack the Content

At 390px wide, the 40px rail still consumes a meaningful part of the viewport. The content strip is 350px; with 20px padding on each side, usable text width is 310px.

Measured mobile heading, paragraph, and VIEW boxes share that width. Their document ordering supports a single vertical sequence of introduction, related content, and link before the next chapter. Base text drops from 24px to 14px, and VIEW drops from about 46px to 23px.

The opening remains one viewport high before the numbered content begins. The large symbol visible in the mobile opening should be treated as captured artwork placement, not evidence that every large-screen opening must use the same layout.

### Footer and Contact Clearance

The contact ring shrinks to approximately 78px and sits about 20px from the right edge in mobile captures. It moves visually upward near the legal row. A reusable implementation should explicitly test overlap against VIEW arrows and footer links.

The legal row keeps its left/right arrangement at the tested phone width. At narrower widths or enlarged text, allowing the row to wrap is a recommended resilience improvement.

### What Is Not Established

- The breakpoint separating the two layouts.
- Tablet or landscape behavior.
- Whether column content is pinned, sticky, or transformed during intermediate scrolling.
- The complete mobile treatment of middle-page imagery.
- A scroll-snap rule or scroll-driven animation timeline.
- Safe-area handling, browser zoom behavior, or keyboard navigation.

The Quick Start uses `48rem` as a recommended breakpoint. It is not a recovered source value.

## Do’s and Don’ts

### Do

- Preserve the black rail and its asymmetric reduction of usable page width.
- Use the exact measured pale canvas, `#e8eeef`.
- Organize the homepage around numbered topics and clear detail-page links.
- Combine very large English headings with smaller Japanese labels and body text.
- Keep hard panel boundaries, square image frames, and fine black rules.
- Retain the desktop relationship between white copy fields and pale media fields.
- Concentrate saturated gradients in identity artwork.
- Make VIEW a broad link row with a simple directional arrow.
- Preserve substantial open space around the opening and chapter copy.
- Treat the circular CONTACT graphic as a separate recurring component.
- Keep observed states, inferred behavior, and implementation recommendations distinct.

### Don’t

- Don't replace the rail with an unrelated horizontal navigation pattern.
- Don't turn the corporate index into a uniform grid of rounded promotional cards.
- Don't color every team or news category using unverified secondary variables.
- Don't use the inherited H2 font size as the size of its large English title.
- Don't infer a carousel from staff-name order or a library variable alone.
- Don't claim contact rotation, image deblurring, or a menu animation without interaction evidence.
- Don't make essential copy depend on a delayed reveal completing.
- Don't recreate the custom symbol with an approximate generic blob when the authorized artwork is available.
- Don't let the contact control obscure another link's arrow or hit target in a new implementation.
- Don't transfer unverified imagery or layout details from linked pages into this homepage reference.

## Recommended Implementation Additions

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

- Give the contact link a clear accessible name and a hit area covering the entire visible ring.
- Implement MENU as a real button. If it controls an overlay, manage its expanded state, keyboard focus, Escape dismissal, and focus restoration.
- Keep a readable static H1 and meaningful brand state available when animation, fonts, or images load slowly.
- Give each VIEW link a destination-specific accessible name, such as View company information, while retaining the concise visible label.
- Provide visible keyboard focus with sufficient contrast on both pale and black surfaces.
- Test Japanese text enlargement and narrow phones; consider a 16px mobile body variant if readability takes priority over exact source proportions.
- Keep decorative artwork out of the accessibility tree and provide useful alternatives for meaningful photography.
- Reserve contact clearance near other actions and the footer. Test actual hit regions rather than relying on an inline anchor rectangle.
- Provide reduced-motion behavior and avoid mandatory perpetual movement.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#e8eeef`.
- Typography, rules, rail, and arrows: `#000000`.
- Desktop chapter copy field: `#ffffff`.
- Brand color anchors: `#64ff50`, `#0064ff`, `#0000e6`.
- Gradient stop locations: implementation approximation unless original artwork is used.
- Link treatment: black typography and rules; no general filled CTA color.

### Overall Prompt

“Create a Japanese recruitment company's corporate homepage using a persistent black left rail, a cool pale-gray canvas `#e8eeef`, white editorial copy panels, and oversized numbered English section titles. Use Japanese sans-serif body copy and tightly tracked English navigation and VIEW links. On desktop, pair a spacious white introduction panel with a pale media panel and a wide ruled VIEW action. Preserve a vertical Japanese opening statement, generous empty space, a custom green-to-blue identity asset, and a circular CONTACT link with lettering around a dark dot. On mobile, retain a narrower rail and stack chapter content within the remaining width. Treat business, industry teams, consultants, company information, recruitment, and news as distinct destinations. Keep essential content readable without animation.”

### Example Component Prompts

1. **Chapter panel:** “Build a two-field WHO WE ARE section after a 50px black rail. Use a white left field with a large 4, an approximately 104px uppercase title broken into two lines, a Japanese subtitle, and a 24px explanatory paragraph. Place a square-cornered tall photograph on the pale-gray right field. Separate the fields with a fine black rule. Heading size is an approximation.”
2. **VIEW row:** “Create a 595px-wide, 114px-high desktop link row with thin horizontal black rules, a roughly 46px semibold VIEW label, and a restrained arrow aligned right. At the reference phone width, use 310px by 54px and approximately 23px text. Keep the entire row interactive.”
3. **Contact component:** “Create a transparent circular contact link, approximately 112px across on desktop and 78px on mobile. Arrange repeated CONTACT lettering around a solid dark center dot. Use no shadow or filled outer disk. Provide a full circular hit area and a clear accessible name. Rotation is optional recommended behavior, not required evidence.”
4. **Mobile shell:** “At 390px viewport width, keep a 40px black rail and a 350px content strip. Use 20px content insets, giving 310px text and action rows. Stack each numbered chapter's heading, explanation, media, and destination link. Retain the pale background and strong black type.”
5. **Footer:** “Close the page with oversized cropped green/blue identity artwork, a pale legal area, and a thin black rule. Align PRIVACY POLICY left and the company copyright right. Keep the contact link clear of both. Use an authorized artwork asset rather than inventing an exact source animation.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not an extracted stylesheet. It uses a conventional root font size and explicit component tokens. Measured endpoint sizes are retained where available. Display heading sizes, the breakpoint, SVG construction, and hover feedback are recommendations or approximations.

The scaffold does not reproduce unverified animation, menu behavior, or a loading sequence. It keeps the opening statement readable and accepts authorized artwork supplied by the implementation.

```css
:root {
  /* Measured palette and declared brand anchors */
  --color-canvas: #e8eeef;
  --color-field: #ffffff;
  --color-ink: #000000;
  --color-green: #64ff50;
  --color-blue-bright: #0064ff;
  --color-blue-deep: #0000e6;

  /* Measured family declarations; font loading is separate */
  --font-japanese: 'noto-sans-cjk-jp', sans-serif;
  --font-display: 'acumin-pro', sans-serif;

  --rail-width: 50px;
  --panel-inset: 50px;
  --footer-inset: 40px;
  --rule-width: 1px;

  --text-body: 24px;
  --text-statement: 32.64px;
  --text-view: 45.984px;
  --text-privacy: 18px;
  --text-copyright: 20px;

  /* Display sizes below are visual approximations */
  --text-number: 64px;
  --text-chapter: 104px;
  --heading-gap: 14px;
  --copy-gap: 48px;

  --view-height: 114px;
  --contact-size: 112px;
  --contact-right: 40px;
  --contact-bottom: 44px;

  /* Recommended feedback, not recovered source motion */
  --motion-feedback: 160ms ease-out;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-japanese);
  font-size: var(--text-body);
  line-height: 1.41;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

.sd-page {
  margin-inline-start: var(--rail-width);
  min-inline-size: 0;
}

.sd-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  inline-size: var(--rail-width);
  color: white;
  background: black;
}

.sd-rail__logo {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-start: 10px;
  inline-size: 30px;
}

.sd-rail__logo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.sd-menu {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-inline-size: 44px;
  min-block-size: 64px;
  padding: 8px;
  border: 0;
  color: inherit;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.sd-menu__label {
  writing-mode: vertical-rl;
  font: 700 16px / 1 var(--font-display);
}

.sd-hero {
  position: relative;
  min-block-size: 100vh;
  min-block-size: 100svh;
}

.sd-hero__statement {
  position: absolute;
  inset-block-start: 30px;
  inset-inline-end: 45px;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: var(--text-statement);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.05em;
}

.sd-chapter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--rule-width) solid currentColor;
}

.sd-chapter__copy {
  min-inline-size: 0;
  padding: 110px var(--panel-inset) 80px;
  background: var(--color-field);
}

.sd-chapter__heading {
  margin: 0;
}

.sd-chapter__number {
  display: block;
  margin-block-end: var(--heading-gap);
  font: 700 var(--text-number) / 0.8 var(--font-display);
}

.sd-chapter__title {
  display: block;
  font: 700 var(--text-chapter) / 0.8 var(--font-display);
  letter-spacing: -0.04em;
}

.sd-chapter__label {
  display: block;
  margin-block-start: var(--heading-gap);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.18;
}

.sd-chapter__description {
  margin: var(--copy-gap) 0 0;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.sd-chapter__media {
  min-inline-size: 0;
  padding: 120px var(--panel-inset) 72px;
  border-inline-start: var(--rule-width) solid currentColor;
  background: var(--color-canvas);
}

.sd-chapter__image {
  display: block;
  inline-size: 100%;
  aspect-ratio: 595 / 648;
  object-fit: cover;
  border-radius: 0;
  /* No blur filter: its source cause is unverified. */
}

.sd-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-block-size: var(--view-height);
  margin-block-start: 44px;
  padding-block: 16px;
  border-block: var(--rule-width) solid currentColor;
  font: 600 var(--text-view) / 1.41 var(--font-display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.sd-view__arrow {
  flex: 0 0 auto;
  inline-size: 68px;
  block-size: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--motion-feedback);
}

.sd-contact {
  position: fixed;
  inset-inline-end: var(--contact-right);
  inset-block-end: calc(
    var(--contact-bottom) + env(safe-area-inset-bottom, 0px)
  );
  z-index: 20;
  display: grid;
  place-items: center;
  inline-size: var(--contact-size);
  aspect-ratio: 1;
  border-radius: 50%;
  text-decoration: none;
}

.sd-contact svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  fill: currentColor;
}

.sd-contact text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

/* Optional class controlled by application overlap handling. */
.sd-contact.is-near-footer {
  --contact-bottom: 136px;
}

.sd-footer-art {
  overflow: hidden;
  background: var(--color-canvas);
}

.sd-footer-art img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* Supply authorized artwork and tune cropping separately. */
}

.sd-footer {
  padding-inline: var(--footer-inset);
}

.sd-footer__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-block: 33px;
  border-block-start: var(--rule-width) solid currentColor;
  font-weight: 700;
}

.sd-footer__privacy {
  font-size: var(--text-privacy);
  text-decoration: none;
}

.sd-footer__copyright {
  margin: 0;
  font-size: var(--text-copyright);
}

/* Recommended accessible states. */
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (hover: hover) {
  .sd-view:hover .sd-view__arrow {
    transform: translateX(4px);
  }
}

/* Recommended breakpoint; the original breakpoint is unknown. */
@media (max-width: 48rem) {
  :root {
    --rail-width: 40px;
    --panel-inset: 20px;
    --footer-inset: 20px;
    --text-body: 14px;
    --text-statement: 21.12px;
    --text-view: 22.988px;
    --text-privacy: 11px;
    --text-copyright: 11px;
    --text-number: 36px;
    --text-chapter: 61.5px;
    --heading-gap: 6px;
    --copy-gap: 28px;
    --view-height: 54px;
    --contact-size: 78px;
    --contact-right: 20px;
    --contact-bottom: 30px;
  }

  .sd-rail__logo {
    display: none;
  }

  .sd-hero__statement {
    inset-block-start: 15px;
    inset-inline-end: 15px;
  }

  .sd-chapter {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-chapter__copy {
    padding-block: 30px 40px;
  }

  .sd-chapter__media {
    padding-block: 24px 40px;
    border-inline-start: 0;
  }

  .sd-view {
    margin-block-start: 24px;
    padding-block: 8px;
  }

  .sd-view__arrow {
    inline-size: 38px;
    block-size: 20px;
  }

  .sd-contact.is-near-footer {
    --contact-bottom: 90px;
  }

  .sd-footer__row {
    padding-block: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-view__arrow {
    transition: none;
  }
}
```

### Component Markup

This fragment demonstrates the chapter and circular link anatomy. Place the chapter inside `.sd-page`. Supply an authorized photograph at the local example path. The circular lettering is a new SVG implementation of the observed idea, not recovered source markup.

```html
<section class='sd-chapter' aria-labelledby='company-title'>
  <div class='sd-chapter__copy'>
    <h2 class='sd-chapter__heading' id='company-title'>
      <span class='sd-chapter__number'>4</span>
      <span class='sd-chapter__title'>WHO WE<br>ARE</span>
      <span class='sd-chapter__label' lang='ja'>
        ストラテジックディシジョンについて
      </span>
    </h2>
    <p class='sd-chapter__description' lang='ja'>
      ストラテジックディシジョンという社名に込めた想いや、私たちの使命についてご紹介します。
    </p>
  </div>
  <div class='sd-chapter__media'>
    <img
      class='sd-chapter__image'
      src='/images/company-photo.jpg'
      alt=''
      width='595'
      height='648'
      loading='lazy'
    >
    <a class='sd-view' href='/whoweare' aria-label='View company information'>
      <span>VIEW</span>
      <svg class='sd-view__arrow' viewBox='0 0 70 28' aria-hidden='true'>
        <path d='M1 14H66M48 2L66 14L48 26'/>
      </svg>
    </a>
  </div>
</section>

<a class='sd-contact' href='/contact' aria-label='Contact Strategic Decision'>
  <svg viewBox='0 0 120 120' aria-hidden='true' focusable='false'>
    <defs>
      <path id='contact-orbit'
        d='M60 11a49 49 0 1 1 0 98a49 49 0 1 1 0-98'/>
    </defs>
    <text textLength='307.88' lengthAdjust='spacing'>
      <textPath href='#contact-orbit'>CONTACT CONTACT CONTACT CONTACT </textPath>
    </text>
    <circle cx='60' cy='60' r='14.5'/>
  </svg>
</a>
```

The empty photograph alternative assumes the adjacent text supplies its meaning; replace it with a useful description if the chosen image conveys additional information. Use a unique path ID if multiple circular components appear in the same document. Menu behavior and contact overlap detection require separate implementation.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: #e8eeef;
  --color-field: #ffffff;
  --color-ink: #000000;
  --color-brand-green: #64ff50;
  --color-brand-blue: #0064ff;
  --color-brand-deep: #0000e6;

  --font-japanese: 'noto-sans-cjk-jp', sans-serif;
  --font-display: 'acumin-pro', sans-serif;

  --text-copy: var(--text-body);
  --text-display: var(--text-chapter);
  --text-index: var(--text-number);
  --text-action: var(--text-view);

  --spacing-rail: var(--rail-width);
  --spacing-panel: var(--panel-inset);
  --spacing-contact: var(--contact-size);
  --radius-panel: 0px;
}
```

## Sources & Evidence

- [STRATEGIC DECISION — original and final homepage](https://strategicd.co.jp/): HTTP 200; original and final URLs are identical. Authority for the page identity, visible content, destination links, and measured design values.
- **Capture date:** September 29, 2026; supplied retrieval timestamp `2026-09-29T13:23:09.248Z`. Individual screenshot timestamps were not separately supplied.
- **Desktop evidence:** 1440 × 1000 viewport; original-page opening, WHO WE ARE, and ending captures; rendered DOM and computed-style sample; reported document height 12044px.
- **Mobile evidence:** 390 × 844 viewport; original-page opening and ending captures; rendered DOM and computed-style sample; reported document height 7730px.
- **Computed evidence:** source color variables, font-family declarations, selected font sizes and weights, text tracking, element rectangles, main/footer padding, link destinations, and sampled animation/transition entries.
- **Original-page identity explanation:** the rendered renewal notice describes the symbol's reference to two parties. The page title and news copy identify the company independently.
- **Inspection method:** the supplied browser traversed intermediate scroll positions and performed bounded readiness checks. SharedWorkers and service workers were disabled during inspection.
- **Limitations:** no independent browsing or asset retrieval was performed for this reference. Menu opening, link activation, hover, focus, forms, full animation timelines, and linked-page designs were not tested. Some visible differences may reflect capture state rather than permanent responsive rules.

This reference describes the current homepage evidence at the stated viewports. The implementation scaffold preserves its measured proportions and visual hierarchy while explicitly labeling estimates and recommended additions.