# Jikorikai / Self-Understanding Program — Style Reference

> A spacious Japanese coaching homepage built from vertical writing, expressive faces, bright circles, and quiet slate-colored chapters.

**Website:** [jikorikai.com](https://jikorikai.com/)
**Original URL:** https://jikorikai.com/
**Final URL:** https://jikorikai.com/
**Theme:** white introductory canvas, pale-gray explanatory sections, and slate sections with white text; no selectable theme was verified.
**Inspected:** October 2, 2026, 05:16:35 JST — October 1, 2026, 20:16:35.639 UTC, as recorded in the supplied browser evidence.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current service homepage. Visual captures cover the desktop hero, third program feature, desktop footer, mobile hero, and mobile footer ending. Rendered DOM and computed-style evidence cover the longer homepage, including introduction, method explanation, three features, testimonials, topic links, representative introduction, counseling/download links, FAQ, related books, footer, and navigation markup.

Jikorikai introduces a three-month self-understanding coaching program through a long editorial sequence. Its identity comes from deliberately loose composition: a large illustrated face, two columns of vertical Japanese copy, overlapping colored circles, and generous empty space. Typography has substantial weight and tracking, but headings remain moderate in size. The illustrations carry much of the emotional expression.

The page becomes more structured as it progresses. A deep slate field holds numbered features with white rules and monochrome drawings. Later sections provide testimonials, company information, program navigation, and ways to contact the service. The footer is a substantial navigation destination, with a small multicolor symbol, ruled action links, and a globe surrounded by illustrated speech bubbles.

## How to Read This Reference

- **Measured** means a value is explicitly present in the supplied rendered DOM or computed styles. Rectangles are browser layout bounds, not necessarily the visible edges of a glyph or illustration.
- **Visual estimate** means a dimension, color, or shape was judged from the supplied current-page screenshots. These estimates were not obtained through pixel sampling.
- **Calculated** means a relationship was derived from measured values, such as a gutter expressed as a percentage of viewport width.
- **Recommended** means implementation guidance for a new project. Recommended breakpoints, accessibility behavior, and CSS adaptations are not claims about the original source.
- **Token names** are descriptive aliases introduced here, except where a source custom property is explicitly identified.
- **Evidence limits:** no additional browsing, file inspection, or control activation was performed for this reference. DOM presence does not establish visibility, and a transition declaration does not establish its trigger.

The source root font size is a conventional **16px** at both inspected widths. Several section-title wrappers compute to 16px while occupying much taller boxes; their descendant styling or artwork is not included in the element sample. Do not treat those wrapper values as measurements of the visible title lettering.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Canvas White | `#ffffff` | `--color-canvas` | Measured body background; measured text color in dark sections |
| Charcoal | `#222222` | `--color-ink` | Measured primary text; visually consistent with the illustration linework |
| Slate | `#44475c` | `--color-slate` | Measured feature-section, related-books panel, and footer background |
| Quiet Gray | `#f4f4f4` | `--color-muted-surface` | Measured method-explanation and FAQ background |
| Secondary Ink | `#4d4d4d` | `--color-secondary` | Measured testimonial attribution, FAQ text, and representative-section eyebrow |
| Pink Circle | approximately `#ff7f99` | `--color-pink` | Visual estimate from the current hero circles |
| Yellow Circle | approximately `#f2cc00` | `--color-yellow` | Visual estimate from the current hero circles |
| Green Circle | approximately `#18bf80` | `--color-green` | Visual estimate from the current hero circles |
| Orange Intersection | approximately `#f26700` | `--color-overlap` | Visual estimate of the pink/yellow overlap; compositing method unverified |
| Rail Slate | approximately `#3d4054` | `--color-rail` | Visual estimate of the darker counseling strip in desktop captures |

White, charcoal, slate, and pale gray establish the page hierarchy. The saturated colors belong primarily to circular illustration motifs and the small footer identity symbol. They are not evidenced as a universal button-color system.

### Section Color Behavior

The interface changes contrast by section. The opening is almost entirely white, the method explanation uses pale gray, and the feature sequence switches to white typography on slate. The footer returns to the same measured slate background, creating a strong visual ending.

The header's `Menu` button computes to white text in the supplied DOM but appears dark in the opening screenshots. The responsible descendant or compositing behavior was not captured. For a new implementation, reproduce the visible contrast explicitly and verify it on each background; copying the isolated white declaration would not reproduce the shown result.

The supplied custom properties also contain numerous generic preset colors, gradients, and shadows. Their presence does not demonstrate that they are used in the inspected design. They are excluded from this palette.

## Tokens — Typography

### Japanese Text

- **Measured computed family:** `dnp-shuei-gothic-gin-std, sans-serif`.
- **Measured weights:** 500 for much of the body and utility text; 600 for principal Japanese headings and prominent navigation.
- **Character:** substantial Gothic forms, generous tracking, and relaxed line spacing. The result feels deliberate and approachable.
- **Implementation alias:** `--font-japanese`.
- **Limitation:** computed family names establish the declared stack, not the font delivery mechanism or the exact font file used for every rendered glyph.

### Latin Utilities and Feature Numbers

- **Measured computed family:** `Inter, DNPShueiGoGinStd-B, sans-serif`.
- **Roles:** `Menu`, `Close`, and feature numerals such as `03`.
- **Weights:** 500 on the menu controls; 600 on feature numbers.
- **Implementation alias:** `--font-utility`.

The logo is represented by a linked graphic-sized box with empty extracted anchor text. Its visible wordmark should be treated as an identity asset; the surrounding paragraph's font declaration is not proof of the logo's lettering font.

### Type Scale

All values below are measured unless noted. Each size pair is font size / line height.

| Role | Desktop | Mobile | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Root/body default | `16 / 24px` | `16 / 24px` | 500 | Normal |
| Hero vertical headline | `36 / 72px` | `22 / 44px` | 600 | `9px` / `5.5px`, both `0.25em` |
| Introduction vertical heading | `32 / 64px` | `20 / 40px` | 600 | `0.2em` |
| Introduction opening question | `24 / 48px` | `20 / 40px` | 600 | `0.15em` |
| Introduction paragraphs | `18 / 40.5px` | `15 / 30px` | 600 | `1.62px` / `1.8px` |
| Method explanation | `16 / 32px` | `14 / 28px` | 500 | `0.06em` |
| Feature number | `40 / 60px` | `20 / 30px` | 600 | Normal |
| Feature heading | `24 / 36px` | `20 / 30px` | 600 | `0.09em` |
| Testimonial heading | `24 / 36px` | `20 / 30px` | 600 | `0.09em` |
| Testimonial attribution | `16 / 32px` | `14 / 28px` | 500 | `0.06em` |
| Topic-group heading | `16 / 24px` | `16 / 24px` | 600 | `0.09em` |
| Topic link | `12 / 16px` | `14 / 20px` | 500 | `0.06em` |
| Representative heading | `24 / 40.8px` | `20 / 30px` | 600 | `0.09em` |
| Counseling/download title | `32 / 48px` | `20 / 30px` | 600 | `0.09em` |
| FAQ question | `16 / 24px` | `14 / 21px` | 600 | `0.16em` |
| FAQ answer | `16 / 32px` | `14 / 23.8px` | 500 | `0.06em` |
| Related-books heading | `32 / 48px` | `20 / 30px` | 600 | `0.09em` |
| Related-books body | `14 / 28px` | `12 / 20.4px` | 500 | `0.06em` |
| Primary footer navigation | `20 / 28px` | `18 / 28px` | 600 | `0.06em` |
| Secondary footer navigation | `12 / 16px` | `11 / 16.5px` | 500 | `0.06em` |
| Legal links | `11 / 16.5px` | Same | 500 | `0.06em` |
| Copyright | `10 / 15px` | Same | 500 | `0.06em` |
| Menu control | `20 / 20px` | `15 / 15px` | 500 | `0.06em` |

The feature-description lettering in the desktop capture appears approximately 16px with a 27–28px line rhythm. This is a **visual estimate**; a directly measured description leaf element was not supplied.

### Vertical Writing

The hero preserves the source copy `やりたいこと探しを / 終わらせる。` as two vertical columns, read from the right column to the left. At desktop width, its measured box is 144 × 405px. On mobile, the text begins below a 100px top inset and uses an 88px-wide two-column arrangement.

The introduction and the later invitation also use vertical writing. The FAQ heading changes orientation between the two observed layouts. For implementation, `writing-mode: vertical-rl` and deliberate line breaks are appropriate recommendations. The exact source writing-mode declaration was not included in the evidence.

## Tokens — Spacing & Shapes

**Density:** exceptionally spacious at section level, with compact navigation and legal details.

**Shape language:** circles, square-edged content blocks, horizontal rules, and simple illustrated contours. The sampled structural elements generally report zero border radius. Circular icons are localized exceptions visible in the screenshots.

### Spacing Scale

These values recur in measured padding, margins inferred from adjacent bounds, or control geometry. They form a useful reference scale rather than a confirmed original token system.

| Value | Observed application |
| --- | --- |
| `15px` | Gap between adjacent 50px testimonial controls |
| `20px` | Number-to-feature-heading gap; several action-link bottom insets |
| `30px` | Paragraph separation in the introduction; FAQ vertical button padding; mobile testimonial text inset |
| `40px` | Desktop scroll-circle diameter |
| `50px` | Testimonial control size; desktop testimonial text-block vertical padding |
| `60px` | Mobile heading-to-feature spacing; repeated footer navigation row interval |
| `80px` | Mobile introduction top padding and separation after the first two features |
| `100px` | Mobile FAQ vertical padding; space before the features' closing detail link |
| `120px` | Mobile method/features section padding; desktop FAQ top padding |
| `140px` | Desktop separation padding after features 01 and 02 |
| `160px` | Calculated desktop footer navigation inset below its opening divider |
| `200px` | Desktop introduction, method, and feature-section top padding |
| `240px` | Desktop method and feature-section bottom padding |
| `415px` | Desktop introduction bottom padding |

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Document height | `14917.38px` | `13842.11px` | Measured DOM bounds |
| Hero height | `1000px` | `844px` | Measured; matches each viewport height |
| General outer gutter | `60.47px` | `26.13px` | Measured recurring alignment |
| General content width | `1319.06px` | `337.75px` | Measured recurring bounds |
| Header identity box | `258 × 23px` | `190 × 17px` | Measured linked graphic box |
| Header identity position | `x 60.47, y 54px` | `x 26.13, y 20px` | Measured |
| Menu button | `59.56 × 35px` | `44.67 × 27px` | Measured |
| Introduction prose width | `659.52px` | `285.47px` | Measured |
| Introduction prose left edge | `299.52px` | `52.27px` | Measured |
| Feature-section horizontal inset | Left `180px`, right `240.47px` | `26.13px` each side | Measured |
| Feature text column | `420.05px` wide at `x 779.48px` | `337.75px` wide at `x 26.13px` | Measured |
| Features 01/02 outer height | `1140px` each | `727.53px` each | Includes bottom padding |
| Feature 03 outer height | `1000px` | `677.53px` | Measured |
| Active testimonial media box | `719.72 × 531.80px` | `390 × 288.16px` | Measured linked media region |
| Footer main width | `1080px`, starting at `x 180px` | `337.75px` | Measured |
| Footer action-link box | `270.55 × 71px` | `337.75 × 71px` | Measured |
| Total footer height | `1349.5px` | `1824px` | Measured |

**Calculated gutter relationships:** the general desktop gutter is approximately 4.2% of viewport width; the mobile gutter is approximately 6.7%. Mobile reading paragraphs use an inset close to 13.4%. These relationships fit the supplied widths; the original breakpoint and formulas were not supplied.

### Illustration and Rule Geometry

| Detail | Visual estimate |
| --- | --- |
| Desktop hero face, excluding rays | Approximately `432 × 477px` |
| Mobile hero face | Approximately `210 × 232px` |
| Desktop colored circles | Approximately `240px` diameter |
| Mobile colored circles | Approximately `100px` diameter |
| Feature illustration group | Approximately `350–360px` wide in the supplied desktop feature capture |
| Footer globe-and-faces illustration | Approximately `220 × 165px` at both captured widths |
| Feature and footer action rules | Approximately `3px` thick |
| Footer circular arrow | Approximately `30px` diameter |

Use actual asset bounds when available. Transparent margins can make an image element's dimensions differ from its visible drawing.

## Components

### Overlay Header

**Role:** immediate identity and access to site navigation.

The opening composition places a linked wordmark at the upper left and an underlined `Menu` button at the upper right. It has no visible filled header band in the hero captures. The measured header wrapper is zero-height while its children occupy visible positions; this supports an overlaid composition but does not independently establish fixed positioning.

On desktop, the wordmark box begins about 60px from the left and the menu about 60px from the right. On mobile, both align to the approximately 26px gutter. The logo itself contains internal spacing, so the visible lettering starts farther inward than the anchor bounds.

The menu uses a short, solid underline and no enclosing button shape. Preserve this compact treatment. Navigation markup containing `Close` and repeated links exists in the DOM, but an opened-menu interaction was not captured.

### Full-Viewport Illustrated Hero

**Role:** communicate the program's emotional promise before introducing detailed information.

The desktop hero has four principal layers:

1. A white viewport-sized canvas.
2. A large face centered horizontally, with black hair, minimal facial marks, and a thick charcoal outline.
3. Two columns of vertical Japanese copy to the right, starting at measured `x 1051.2px` and `y 297.5px`.
4. Saturated circles near the perimeter, plus the small lower-left scroll control.

In the desktop capture, overlapping pink and yellow circles enter from the left edge around the upper-middle area. A green circle sits near the lower-left corner. Their overlap is visibly orange. The illustration shows closed eyes, a small smile, and short radiating strokes above the head.

The mobile composition is substantially rearranged. The copy occupies the upper center, pink and yellow circles overlap near the upper right, and the green circle appears above and to the right of the face. The face starts around `y 422px`, leaving a broad white area below. It has open eyes and a different mouth expression in this capture.

The different expressions establish distinct captured artwork states. They do not establish an animation duration, sequence, or user trigger.

### Scroll Cue

**Role:** invite progression beyond the opening composition.

The desktop `Scroll Down` button is a measured `181.19 × 40px` flex box at approximately `x 60.47px`, `y 920px`. A slate circular control contains a white downward chevron; the label sits to its right.

The control is absent from the mobile hero screenshot and from the mobile sample of visible elements. Its destination and scrolling behavior were not activated. A new implementation can use an anchor to the introduction and preserve native scrolling.

### Introduction Chapter

**Role:** explain the service through an unhurried editorial passage.

On desktop, a vertical two-column heading sits toward the right while a roughly 660px prose column begins farther left and lower down. The opening question uses 24px type; subsequent paragraphs use 18px text with 40.5px line height. The section's 200px top and 415px bottom padding are central to its slow pacing.

On mobile, the vertical heading remains near the right side. The main prose follows lower in the document with approximately 52px side insets, yielding a 285px reading column. Text becomes 15px with 30px line height. The section remains long: 1446px in the supplied mobile DOM.

Preserve the separation between the short opening question and the explanatory paragraphs. The large vertical distances make the introduction feel like a sequence of thoughts.

### Method Explanation

**Role:** introduce the program's method and its three conceptual inputs.

This is a full-width pale-gray section. The measured padding changes from `200px 0 240px` on desktop to `120px 0` on mobile. The source text explains the relationship among `大事なこと`, `得意なこと`, and `好きなこと`.

There is a substantial region between the heading and explanatory paragraph in the DOM. Its complete diagram or artwork was not provided in the current screenshots. Preserve an illustration slot when adapting the structure, but do not claim a specific diagram layout, concept-to-color mapping, or animation from the supplied evidence.

The final paragraph changes from 16px/32px to 14px/28px on mobile and uses a narrower approximately 286px mobile measure.

### Numbered Feature Stage

**Role:** present three distinct program characteristics with equal editorial importance.

The entire feature sequence uses measured slate `#44475c` and white text. At desktop width, the content occupies an asymmetric inner region: 180px from the left edge and approximately 240px from the right. An illustration occupies the left side; the right text column is approximately 420px wide.

The third feature capture shows the anatomy clearly:

- A large white rule above the information group.
- The feature number `03` in 40px Inter with a 60px line box.
- A 24px Japanese heading in three lines, separated from the number by 20px.
- A second white rule below the heading group.
- A compact explanatory paragraph and a dated footnote below the rule.
- A monochrome illustration of a seated learner, with outlined `98%` lettering and radiating marks.

The `98%` figure is source-page copy with a footnote covering August 1, 2021 through February 28, 2022. Preserve that qualifier if quoting the claim; the inspection does not independently verify its statistical meaning or currency.

Desktop stages allocate approximately one inspected viewport height to each feature, with another 140px after the first two. Mobile stages use one content column, 20px numbers, and 20px/30px headings. The number appears about 370px after each mobile stage's beginning, consistent with a substantial illustration region preceding the text. The exact mobile illustration bounds were not sampled.

The closing link `プログラム詳細を見る` points to `/details/` and is centered below the feature sequence.

### Testimonial Story Display

**Role:** connect a program outcome to a named graduate and coach.

The rendered content includes a current `01 / 03` indicator, three interview destinations, and paired 50px controls. This supports a carousel-like component structure. Autoplay, swipe behavior, wrapping, and control effects remain unverified.

The active desktop composition uses a large media box on the left, approximately 720 × 532px, and a 360px text column starting around `x 900px`. The text contains a 24px heading and a secondary-color attribution naming the graduate and coach.

On mobile, the media box spans all 390px of the viewport and is followed by a text region aligned to the 26px page gutter. The heading becomes 20px/30px and reserves 55px of right padding. The two controls remain 50 × 50px with a 15px gap.

Other story elements have overlapping or transformed-looking bounds in the DOM. Do not reproduce them as three simultaneously visible stacked articles solely from those bounds. No supplied screenshot establishes their exact imagery or inactive-slide appearance.

### Topic-Link Groups

**Role:** help visitors browse graduate stories through personal questions.

The four group labels are `大事`, `得意`, `好き`, and `やりたいこと`. Each group contains a short set of hashtag-prefixed text links to topic archives.

Desktop headings align in four columns; their sampled content widths are approximately 234px. Mobile groups stack vertically and use a roughly 286px text width. Unlike most text, the links increase from 12px/16px on desktop to 14px/20px on mobile.

The link text and headings compute to white. Their ancestor backgrounds and complete visual framing were not included in the screenshot set. Preserve the measured grouping and readable spacing without inventing a verified category-color system.

### Representative Introduction

**Role:** connect the program to its company and representative.

The entire section links to `/company/interview/`. Its measured box is 1440 × 680px on desktop and 390 × 631.8px on mobile. It includes the eyebrow `代表の想い`, a heading, and a name/role block identifying `株式会社ジコリカイ代表取締役` and `八木 仁平`.

Desktop text begins at `x 180px`; mobile text aligns to the approximately 26px page gutter. The heading changes from 24px/40.8px to 20px/30px. Any associated image composition is outside the supplied visual captures and should be checked before replication.

### Counseling and Download Links

**Role:** offer two clear next steps after the service explanation.

A centered vertical invitation precedes the two links. On desktop, `無料カウンセリング` and `資料ダウンロード` occupy equal measured regions of approximately 629 × 506px, separated by about 61px. Their titles use 32px/48px type.

On mobile, the links stack in the same order. Each is approximately 338px wide and 357–359px tall, with 20px/30px titles. The destinations are `/contact/` and `/download/`.

These are large linked content regions. The supplied evidence does not establish embedded forms, hover illustrations, or submission behavior.

### FAQ Preview

**Role:** address common concerns before visitors leave the homepage.

The FAQ sits on pale gray. Desktop composition pairs a narrow vertical white heading tile with a roughly 661px question column. The measured heading tile is 100 × 228.8px, including `28px 32px` padding.

On mobile, the heading becomes a centered horizontal white tile measuring approximately 171 × 70px with 20px padding. The question column expands to the standard 338px content width. Questions are buttons with 30px top/bottom padding and space reserved on the right.

Answer text exists in the DOM, but some answer bounds overlap subsequent question positions. This does not establish that all answers were visibly expanded; clipping or collapsed containers may explain those bounds. No accordion toggle was exercised.

A new implementation should use explicit expanded states and associated answer panels. The source preview also includes a link to the full `/faq/` page.

### Related-Books Panel

**Role:** link the service to its broader published method.

An inset slate panel appears before the footer. It measures approximately 1319 × 602px on desktop and 338 × 547px on mobile. The desktop element computes to flex layout; the mobile element computes to block layout.

The content consists of a small eyebrow, a two-line heading, explanatory copy, and a link to `/company/#related-books`. The heading changes from 32px/48px to 20px/30px. The mobile copy region is unusually narrow, about 221px wide within the larger panel.

The panel's complete media content is not shown in the supplied screenshots. Its color, typography, bounds, and link target are measured; book-cover arrangement is unverified.

### Footer Navigation and Closing Illustration

**Role:** provide a complete map of the service and its organization.

The footer begins with a broad `プログラム詳細` link and a white divider. On desktop this opening region is approximately 1080 × 351px. The subsequent content begins about 160px below its divider.

The main desktop arrangement has a brand area on the left and two navigation columns on the right. Primary links use 20px/28px type, secondary company/recruitment links use 12px/16px, and action rows use a prominent label, right-side icon, and white bottom rule.

The screenshot distinguishes two icon treatments:

- A white circular disk containing a small slate chevron.
- Two offset outlined squares for the media and news links.

The external-link symbol indicates a different destination type; new-tab behavior was not verified. The workshop also has an external destination in the DOM while using the circular-arrow treatment, so icon appearance should not be treated as a complete destination classifier.

A globe with diagonal latitude/longitude lines and three illustrated speech bubbles anchors the lower-left region. Legal links form a small horizontal row to its right, followed by the copyright line.

Mobile preserves two columns for the primary navigation groups. The action rows then become full width. The globe illustration moves into a centered position below those actions, followed by vertically stacked legal links. The desktop footer wordmark is not present in the supplied mobile footer element sample.

### Edge Counseling Link

**Role:** retain access to counseling during deeper desktop reading.

A narrow strip labeled `無料カウンセリング` appears at the lower-right edge in the desktop feature and footer screenshots. Its measured link box is approximately 60.47 × 287.2px, positioned at `x 1379.53px`, `y 712.8px` within the 1000px viewport. It contains vertical text and a small two-person illustration near the bottom.

A corresponding mobile link has measured bounds of 390 × 80px at the bottom of the viewport, but it is not visible in either supplied mobile screenshot. Its visibility condition is therefore unresolved. Do not present it as a verified always-visible mobile bar.

## Tokens — Motion & Interaction

### Measured Transition Declarations

| Element | Computed transition | What is established |
| --- | --- | --- |
| Main header | `opacity 0.9s cubic-bezier(0.52, 0.08, 0.18, 1)` | Header opacity can transition; trigger unverified |
| Desktop scroll cue | `opacity 1.2s cubic-bezier(0.37, 0.16, 0.12, 1)` | An opacity transition is defined |
| Active testimonial heading | Transform and opacity, `1.2s cubic-bezier(0.22, 0.11, 0.22, 1)`, `0.15s` delay | Defined heading transition and delay |
| Active testimonial attribution | Same properties and easing, `0.3s` delay | Defined text staggering relative to the heading |
| FAQ heading tile | Opacity and transform, `0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19)` | Defined heading transition |
| Topic links | `opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)` | Short opacity feedback is supported |
| Primary/footer legal navigation | `0.35s cubic-bezier(0.22, 0.11, 0.22, 1)` | Duration and easing are recorded; changed property/value unverified |

These declarations suggest restrained fades and text movement with slower editorial reveals. They do not establish actual translation distances, scroll thresholds, hover opacity targets, or a motion library.

### Observed States and Limits

- The supplied browser procedure included initial observation and scrolling through the document, with readiness checks for layout, text, images, and finite animation.
- Hero artwork differs between the desktop and mobile captures. Timing, cause, and full expression sequence are unknown.
- The supplied sampled elements report `animation: none`. This does not rule out animation in unsampled descendants, image assets, SVG, canvas, or script-driven transforms.
- Menu, testimonial, FAQ, and scroll controls are present, but their activation was not recorded.
- Generic transition values such as `all` without a meaningful recorded duration are not useful motion specifications.
- No scroll hijacking, mandatory snapping, audio, autoplay interval, or reduced-motion support was verified.

**Recommended adaptation:** keep native document scrolling, retain the measured reveal timings only where they serve comprehension, and make content visible without JavaScript. If adding animated character expressions, provide a static reduced-motion state.

## Surfaces

| Surface | Appearance | Purpose |
| --- | --- | --- |
| Opening canvas | Flat white | Gives the face, vertical copy, and circles room to breathe |
| Explanatory field | Flat `#f4f4f4` | Separates method and FAQ content |
| Feature field | Flat `#44475c`, white type and rules | Gives the three program features sustained visual weight |
| Related-books panel | Inset slate rectangle | Creates a distinct linked editorial feature |
| FAQ title tile | White rectangle on pale gray | Isolates the heading without a rounded-card treatment |
| Footer | Full-width slate | Holds dense navigation within a spacious composition |
| Desktop counseling strip | Slightly darker slate, visually estimated | Separates the persistent edge action from the main section |
| Small arrow control | White circle with slate glyph | Provides a compact endpoint to ruled links |

The supplied captures show flat surfaces without visible elevation shadows, gradients, glass blur, or a general rounded-card system. Separation comes from section color, linework, alignment, and empty space.

## Imagery

The visible artwork uses smooth black-and-white contours, solid black hair, white faces, and small expressive marks. Thick outlines coexist with delicate details such as the globe grid and external-link squares. The artwork has a vector-like finish, but no asset format or animation technology was supplied.

The main face is large enough to function as the hero's principal image. Its expression is simple and legible at mobile scale. The colored circles remain separate from the character, keeping the face monochrome while adding warmth to the overall composition.

### Observed Asset References

No original image URLs or filenames were included in the supplied evidence. The following references identify visible subjects rather than inventing asset paths.

| Subject | Evidence | Reproduction guidance |
| --- | --- | --- |
| Hero face with closed eyes and small smile | Desktop hero capture | Preserve the broad hair silhouette, generous white face, rounded contours, and short rays above the head |
| Hero face with open eyes and different mouth | Mobile hero capture | Treat as a captured state; do not infer an animation sequence |
| Pink, yellow, and green circles | Desktop and mobile hero captures | Keep flat fills, circular geometry, and the orange overlap of pink/yellow |
| Learner at desk with outlined `98%` | Desktop feature 03 capture | Preserve the monochrome drawing and outlined statistical lettering |
| Small multicolor footer symbol | Desktop footer capture | Keep it compact beside the white wordmark |
| Globe with three portrait speech bubbles | Desktop and mobile footer captures | Preserve its approximately 220px visible width and its role as a quiet closing illustration |
| Two-person counseling illustration | Desktop edge-link captures | Retain its small scale and position at the bottom of the strip |
| Circular chevrons and offset-square icons | Desktop/mobile footer captures | Use crisp, minimal geometry with no enclosing rectangular button |

Use authorized artwork when available. For new illustrations, maintain smooth antialiased contours and consistent visual weight. Pixelated rendering, photographic hero replacements, and elaborate shaded character styles would materially change the observed identity.

The testimonial, representative, formula, and book sections contain media-related space or content in the DOM, but their image details cannot be specified reliably from the provided captures.

## Layout & Responsive Behavior

### Desktop Composition

The homepage combines several alignment systems rather than using one universal centered container:

- General content and the header use approximately 60px outer gutters.
- Introduction prose uses a narrower, offset column beginning around 300px.
- The feature section uses an asymmetric region from 180px to approximately 1200px.
- Footer content uses a centered 1080px region.
- The active testimonial media extends farther left than its text column.

These offsets are a defining part of the composition. Reducing everything to a single fixed-width card stack would erase the editorial rhythm.

### Observed Mobile Changes

| Area | Desktop behavior | Mobile behavior |
| --- | --- | --- |
| Hero copy | Right of the face | Upper center, above the face |
| Hero circles | Mostly left of the composition | Upper-right cluster and green circle above the face |
| Hero face | Approximately 432px wide | Approximately 210px wide, lower in the viewport |
| Header | 258px identity box; 20px menu type | 190px identity box; 15px menu type |
| Introduction | Offset prose with vertical heading at right | Vertical heading followed by narrow reading column |
| Features | Illustration beside 420px text column | Illustration region precedes full-width text |
| Feature number | 40px | 20px |
| Testimonial | Media and text side by side | Full-bleed media followed by inset text |
| Topic groups | Four columns | Four vertically stacked groups |
| Counseling/download | Two equal regions in a row | Two stacked regions |
| FAQ heading | Vertical white tile beside questions | Horizontal white tile above questions |
| Footer primary navigation | Two columns beside brand area | Two columns across the available content width |
| Footer action links | Two-column arrangement | Single full-width sequence |
| Footer illustration | Lower-left | Centered above legal links |
| Legal navigation | Horizontal row | Vertical list |

The mobile document is slightly shorter overall despite the footer becoming taller. Much of that difference comes from the more compact feature sequence: about 2688px on mobile versus 4161px on desktop. Responsive behavior therefore changes both spatial relationships and pacing.

### Breakpoints and Viewport Height

Only two viewport widths were supplied. The exact breakpoint is unknown. A breakpoint near 48–56rem is a reasonable **implementation recommendation**, with intermediate-width testing to prevent collisions among the portrait, vertical heading, and circles.

The observed source custom property `--vh` is `10px` on desktop and `8.44px` on mobile, equal to 1% of the respective viewport heights. The hero matches the full viewport at both sizes. The relationship is measured; the original formula consuming `--vh` was not supplied.

For an adaptation, use modern viewport units with a content-safe minimum height. Preserve the mobile layout at 390 × 844, then test shorter phones and landscape screens rather than assuming the captured composition will fit unchanged.

## Do’s and Don’ts

### Do

- Preserve the measured white, slate, pale-gray, and charcoal foundation.
- Use bright circles as illustration motifs with generous surrounding space.
- Keep the Japanese hero in two vertical columns with `0.25em` tracking.
- Maintain the emotional clarity of the large monochrome face.
- Use 500/600 typography weights and generous Japanese line spacing.
- Give the numbered features substantial space and a consistent illustration/text relationship.
- Retain the white rules and distinct number-heading-description hierarchy on slate.
- Recompose the mobile hero instead of merely shrinking the desktop arrangement.
- Keep two mobile columns for primary footer navigation while stacking action rows.
- Preserve the globe-and-speech-bubbles illustration as a meaningful closing element.
- Keep source qualifications adjacent to quoted numerical claims.
- Separate measured behavior from implementation improvements in project documentation.

### Don’t

- Don't replace the long service and company navigation structure with a single conversion block.
- Don't make every action a saturated pill button.
- Don't introduce a general shadow, gradient, or glass-surface system.
- Don't convert vertical Japanese copy into a rotated horizontal image.
- Don't use generic preset variables as evidence of the visible color palette.
- Don't treat a wrapper's 16px computed font as the visible size of an unsampled graphic heading.
- Don't assume the menu was opened because `Close` markup exists.
- Don't render all FAQ answers or testimonial slides visibly because their text is present in the DOM.
- Don't invent artwork URLs, animation frameworks, autoplay timings, or concept-to-color mappings.
- Don't force the measured mobile counseling box to remain visible; its captured visibility is unresolved.
- Don't shrink the footer's already-small legal text further to maintain one-line layouts.
- Don't crop the hero face or the footer globe into conventional thumbnail cards.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified source features.

- Expand the effective mobile menu target to at least 44 × 44px while preserving its compact visible label and underline.
- Give the logo an accessible name and keep decorative circle and portrait details out of the accessibility tree when nearby text supplies their meaning.
- Implement the vertical headline as selectable text with sensible source order and `lang='ja'`.
- If the menu is modal, provide focus management, Escape dismissal, an accessible label, and a clear expanded state on its trigger.
- Give testimonial controls explicit names and expose the current item. Do not require autoplay to access content.
- Use buttons with `aria-expanded` and `aria-controls` for FAQ toggles; remove collapsed content from keyboard interaction.
- Increase legal text toward 12–14px when readability takes priority over exact capture fidelity.
- Reserve space for any visible mobile counseling bar, including the bottom safe area, so it cannot cover legal links or form controls.
- Support reduced motion and a stable character-art state. Keep essential content visible when enhancement scripts fail.
- Load the measured font families only when available and licensed; test a Japanese-capable sans-serif fallback for vertical text metrics.
- Test 200% text zoom, narrow widths, and landscape screens. Decorative circles can move or clip, but functional controls and copy should remain reachable.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: measured `#ffffff`.
- Primary text: measured `#222222`.
- Feature sections, books panel, and footer: measured `#44475c`.
- Explanatory and FAQ sections: measured `#f4f4f4`.
- Secondary text: measured `#4d4d4d`.
- Circle approximations: pink `#ff7f99`, yellow `#f2cc00`, green `#18bf80`.
- Dark-section controls: white rules and small white circular arrows.
- Surface treatment: flat, square-edged, and spacious.

### Overall Prompt

“Create a Japanese coaching-service homepage inspired by the current Jikorikai composition. Use white, charcoal `#222222`, slate `#44475c`, and pale gray `#f4f4f4`. Build a full-height opening with a large monochrome illustrated face, two columns of vertical Japanese copy, a small upper-left identity, and an underlined Menu control at the upper right. Place pink, yellow, and green circles around the composition, including a warm orange overlap. Use substantial Japanese Gothic typography, moderate heading sizes, generous tracking, and very large section gaps. Continue through an editorial introduction, method explanation, three numbered slate feature stages, testimonials, counseling/download links, FAQ, and a comprehensive slate footer. On mobile, move the vertical copy above the face, stack content stages, retain two columns of primary footer navigation, and use full-width ruled action rows. Treat the supplied measurements as targets and explicitly mark any new interaction behavior.”

### Example Component Prompts

1. **Hero:** “At 1440 × 1000, place a roughly 432px-wide monochrome face near the center and a 36px vertical Japanese headline at the right with 72px column spacing and 9px tracking. Keep a white canvas and perimeter circles around 240px in diameter. At 390 × 844, use a roughly 210px face below the headline, 22px text with 5.5px tracking, and 100px circles near the upper right.”
2. **Feature stage:** “Create a slate `#44475c` section with a monochrome learner illustration at left and a 420px white text column at right. Place a 40px feature number above a 24px/36px heading. Frame the heading group with white horizontal rules and put the explanation below. Stack artwork before text on mobile and reduce the number and heading to 20px.”
3. **Testimonial:** “Use a large media region beside an inset text column with a 24px Japanese heading, gray graduate/coach attribution, and two 50px controls separated by 15px. On mobile, let media span the viewport and align text to 26px gutters. Implement explicit navigation without assuming autoplay.”
4. **FAQ:** “Place questions on pale gray. Use a narrow white vertical heading tile at desktop width and a centered horizontal tile on mobile. Questions have generous vertical padding, tracked Gothic text, and accessible expand/collapse buttons. Keep the answer layout stable.”
5. **Footer:** “Create a spacious slate footer with white navigation, a left identity area, two desktop navigation columns, ruled action rows, and compact circle-arrow or offset-square icons. Include a small monochrome globe with illustrated speech bubbles. On mobile, keep primary navigation in two columns, stack action rows, center the globe, and place legal links vertically below it.”
6. **Illustration direction:** “Draw a friendly human face using solid black hair, smooth charcoal outlines, a white face, and a few expressive facial marks. Keep the expression readable at about 210px wide. Use flat colored circles outside the face and retain ample empty space.”

## Quick Start

### CSS Custom Properties

This is a reusable approximation of the measured composition, not recovered source CSS. It uses a normal 16px root, exact measured neutral colors, estimated accent colors, and a recommended 56rem breakpoint. Illustration placement is calibrated to the supplied captures; intermediate widths require testing.

Supply authorized artwork inside `.hero__portrait`, `.feature__art`, and `.footer__illustration`. No asset filenames are assumed. The optional counseling link should retain `hidden` until the application's chosen visibility condition is satisfied.

```css
:root {
  /* Measured neutral palette */
  --color-canvas: #ffffff;
  --color-ink: #222222;
  --color-slate: #44475c;
  --color-muted-surface: #f4f4f4;
  --color-secondary: #4d4d4d;

  /* Visual approximations, not sampled source values */
  --color-pink: #ff7f99;
  --color-yellow: #f2cc00;
  --color-green: #18bf80;
  --color-overlap: #f26700;
  --color-rail: #3d4054;

  /* Observed computed font stacks */
  --font-japanese: dnp-shuei-gothic-gin-std, sans-serif;
  --font-utility: Inter, DNPShueiGoGinStd-B, sans-serif;
  --weight-body: 500;
  --weight-heading: 600;

  /* Desktop measurements and derived relationships */
  --page-gutter: 4.2vw;
  --feature-left: 12.5vw;
  --feature-right: 16.7vw;
  --footer-width: 1080px;
  --text-hero: 36px;
  --text-heading: 24px;
  --text-body: 16px;
  --text-number: 40px;
  --tracking-body: 0.06em;
  --tracking-heading: 0.09em;
  --tracking-vertical: 0.25em;
  --section-top: 200px;
  --section-bottom: 240px;
  --rule-width: 3px;
  --radius-circle: 50%;

  /* Measured timing values; application triggers are separate */
  --duration-reveal: 1.2s;
  --duration-link: 0.35s;
  --ease-reveal: cubic-bezier(0.22, 0.11, 0.22, 1);
  --ease-header: cubic-bezier(0.52, 0.08, 0.18, 1);
}

.jikorikai-reference,
.jikorikai-reference * {
  box-sizing: border-box;
}

.jikorikai-reference {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-japanese);
  font-size: 16px;
  font-weight: var(--weight-body);
  line-height: 1.5;
}

.jikorikai-reference [hidden] {
  display: none !important;
}

.jikorikai-reference img {
  display: block;
  max-width: 100%;
  height: auto;
}

.jikorikai-reference a {
  color: inherit;
}

.jikorikai-reference button {
  color: inherit;
  font: inherit;
}

.page-wide {
  margin-inline: var(--page-gutter);
}

.site-header {
  position: absolute;
  z-index: 10;
  inset: 50px var(--page-gutter) auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.site-header__brand {
  display: block;
  width: 258px;
  margin-top: 4px;
}

.menu-button {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 3px solid currentColor;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-utility);
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.hero {
  position: relative;
  min-height: 760px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-canvas);
}

.hero__title {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 73%;
  margin: 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: var(--text-hero);
  font-weight: var(--weight-heading);
  line-height: 2;
  letter-spacing: var(--tracking-vertical);
}

.hero__portrait {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(30vw, 432px);
  margin: 0;
  transform: translate(-50%, -50%);
}

.hero__portrait img {
  width: 100%;
}

.hero__circle-group {
  position: absolute;
  top: 23.7%;
  left: -10px;
  width: 380px;
  height: 260px;
  isolation: isolate;
  pointer-events: none;
}

.hero__circle {
  position: absolute;
  width: 240px;
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
}

.hero__circle--pink {
  top: 0;
  left: 0;
  background: var(--color-pink);
}

.hero__circle--yellow {
  top: 18px;
  left: 139px;
  background: var(--color-yellow);
  /* Recommended approximation of the visible overlap */
  mix-blend-mode: multiply;
}

.hero__circle--green {
  top: calc(100% - 244px);
  left: -6px;
  background: var(--color-green);
  pointer-events: none;
}

.hero__scroll {
  position: absolute;
  z-index: 3;
  bottom: 40px;
  left: var(--page-gutter);
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  letter-spacing: 0.06em;
}

.hero__scroll-icon {
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--color-canvas);
  background: var(--color-slate);
}

.intro {
  padding-block: 200px 415px;
}

.intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 660px) 128px;
  column-gap: 120px;
  margin-left: 20.8vw;
  margin-right: var(--page-gutter);
}

.intro__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 32px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.2em;
}

.intro__copy {
  grid-column: 1;
  grid-row: 1;
  padding-top: 200px;
  font-size: 18px;
  font-weight: 600;
  line-height: 2.25;
  letter-spacing: 0.09em;
}

.intro__copy p {
  margin: 0 0 30px;
}

.intro__question {
  font-size: 24px;
  line-height: 2;
  letter-spacing: 0.15em;
}

.method,
.faq {
  background: var(--color-muted-surface);
}

.method {
  padding-block: var(--section-top) var(--section-bottom);
}

.features {
  padding: var(--section-top) var(--feature-right)
    var(--section-bottom) var(--feature-left);
  color: var(--color-canvas);
  background: var(--color-slate);
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: clamp(40px, 8.33vw, 120px);
  min-height: 100svh;
}

.feature + .feature {
  margin-top: 140px;
}

.feature__art {
  width: min(100%, 360px);
  margin: 0 auto;
}

.feature__heading-group {
  padding-block: 50px 60px;
  border-block: var(--rule-width) solid currentColor;
}

.feature__number {
  margin: 0 0 20px;
  font-family: var(--font-utility);
  font-size: var(--text-number);
  font-weight: 600;
  line-height: 1.5;
}

.feature__title {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking-heading);
}

.feature__body {
  margin: 30px 0 0;
  font-size: 16px;
  /* Approximation based on the desktop feature capture */
  line-height: 1.7;
  letter-spacing: var(--tracking-body);
}

.story {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 8.33vw;
  margin-inline: var(--page-gutter) 12.5vw;
}

.story__media {
  aspect-ratio: 1.353 / 1;
  overflow: hidden;
}

.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.09em;
  transition:
    transform var(--duration-reveal) var(--ease-reveal) 0.15s,
    opacity var(--duration-reveal) var(--ease-reveal) 0.15s;
}

.story__attribution {
  color: var(--color-secondary);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.06em;
}

.story__controls {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 50px;
}

.story__controls button {
  width: 50px;
  height: 50px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.faq {
  display: grid;
  grid-template-columns: 100px minmax(0, 661px);
  gap: 9.7vw;
  padding: 120px 20.8vw 100px 16.7vw;
}

.faq__title {
  align-self: start;
  margin: 50px 0 0;
  padding: 28px 32px;
  writing-mode: vertical-rl;
  background: var(--color-canvas);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

.faq__question {
  width: 100%;
  padding: 30px 60px 30px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--color-secondary);
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.faq__answer {
  padding-block: 20px 30px;
  color: var(--color-secondary);
  line-height: 2;
  letter-spacing: 0.06em;
}

.site-footer {
  color: var(--color-canvas);
  background: var(--color-slate);
}

.footer__inner {
  width: min(var(--footer-width), calc(100% - 52px));
  margin-inline: auto;
}

.footer__lead {
  display: block;
  padding-block: 150px;
  border-bottom: var(--rule-width) solid currentColor;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.footer__grid {
  display: grid;
  grid-template-columns: 7fr 11fr;
  grid-template-areas: 'brand nav' 'art legal';
  row-gap: 120px;
  padding-block: 160px 120px;
}

.footer__brand {
  grid-area: brand;
  width: 258px;
}

.footer__navigation {
  grid-area: nav;
  padding-right: 30px;
}

.footer__primary,
.footer__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 89px;
}

.footer__primary a {
  display: block;
  margin-bottom: 32px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.footer__primary .footer__secondary {
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.footer__actions {
  row-gap: 30px;
  margin-top: 34px;
}

.footer__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 71px;
  padding-block: 20px;
  border-bottom: var(--rule-width) solid currentColor;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.circle-arrow {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--color-slate);
  background: var(--color-canvas);
}

.footer__illustration {
  grid-area: art;
  align-self: end;
  width: 220px;
  margin: 0;
}

.footer__legal {
  grid-area: legal;
  align-self: end;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.footer__copyright {
  margin: 40px 0 0;
  font-size: 10px;
  line-height: 15px;
}

.contact-rail {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--page-gutter);
  min-width: 52px;
  min-height: 287px;
  padding: 30px 4px 20px;
  color: var(--color-canvas);
  background: var(--color-rail);
  writing-mode: vertical-rl;
  text-decoration: none;
}

/* Recommended accessible focus indicator */
.jikorikai-reference :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* Recommended breakpoint; the original breakpoint is unknown */
@media (max-width: 56rem) {
  :root {
    --page-gutter: 6.7vw;
    --text-hero: 22px;
    --text-heading: 20px;
    --text-number: 20px;
    --section-top: 120px;
    --section-bottom: 120px;
  }

  .site-header {
    top: 20px;
  }

  .site-header__brand {
    width: 190px;
    margin-top: 0;
  }

  .menu-button {
    padding-bottom: 10px;
    border-bottom-width: 2px;
    font-size: 15px;
    line-height: 15px;
  }

  .hero {
    min-height: 720px;
  }

  .hero__title {
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero__portrait {
    top: 50%;
    width: min(54vw, 260px);
    transform: translateX(-50%);
  }

  .hero__circle-group {
    top: 37px;
    right: 6vw;
    left: auto;
    width: 124px;
    height: 140px;
  }

  .hero__circle {
    width: 100px;
  }

  .hero__circle--pink {
    top: 40px;
    left: 24px;
  }

  .hero__circle--yellow {
    top: 0;
    left: 0;
  }

  .hero__circle--green {
    top: 39.6%;
    right: 12.8vw;
    left: auto;
  }

  .hero__scroll {
    display: none;
  }

  .intro {
    padding-block: 80px 150px;
  }

  .intro__layout {
    display: block;
    margin-inline: 13.4vw;
  }

  .intro__title {
    margin-left: auto;
    font-size: 20px;
  }

  .intro__copy {
    padding-top: 130px;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.12em;
  }

  .intro__question {
    font-size: 20px;
  }

  .features {
    padding-inline: var(--page-gutter);
  }

  .feature {
    display: block;
    min-height: 0;
  }

  .feature + .feature {
    margin-top: 80px;
  }

  .feature__art {
    width: min(100%, 338px);
    margin-bottom: 30px;
  }

  .feature__heading-group {
    padding-block: 30px;
  }

  .feature__body {
    font-size: 14px;
  }

  .story {
    display: block;
    margin-inline: 0;
  }

  .story__copy {
    padding: 30px var(--page-gutter) 0;
  }

  .story__title {
    padding-right: 55px;
    font-size: 20px;
  }

  .story__attribution {
    font-size: 14px;
  }

  .story__controls {
    margin-inline: var(--page-gutter);
  }

  .faq {
    display: block;
    padding: 100px var(--page-gutter);
  }

  .faq__title {
    width: fit-content;
    margin: 50px auto;
    padding: 20px;
    writing-mode: horizontal-tb;
    font-size: 20px;
    letter-spacing: 0.09em;
  }

  .faq__question {
    padding-right: 26px;
    font-size: 14px;
  }

  .faq__answer {
    font-size: 14px;
    line-height: 1.7;
  }

  .footer__inner {
    width: auto;
    margin-inline: var(--page-gutter);
  }

  .footer__lead {
    padding-block: 80px 172px;
    font-size: 20px;
  }

  .footer__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: 120px 100px;
  }

  .footer__brand {
    display: none;
  }

  .footer__navigation {
    padding-right: 0;
  }

  .footer__primary {
    column-gap: 26px;
  }

  .footer__primary a {
    font-size: 18px;
  }

  .footer__primary .footer__secondary {
    font-size: 11px;
    line-height: 16.5px;
  }

  .footer__actions {
    grid-template-columns: 1fr;
    row-gap: 10px;
    margin-top: 50px;
  }

  .footer__action {
    font-size: 18px;
  }

  .footer__illustration {
    align-self: center;
    margin: 100px auto 90px;
  }

  .footer__legal {
    align-self: stretch;
  }

  .footer__legal-links {
    flex-direction: column;
    gap: 12px;
  }

  .contact-rail {
    left: 0;
    width: 100%;
    min-height: calc(80px + env(safe-area-inset-bottom, 0px));
    padding: 0 var(--page-gutter)
      env(safe-area-inset-bottom, 0px);
    writing-mode: horizontal-tb;
  }
}

/* Recommended behavior for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .jikorikai-reference *,
  .jikorikai-reference *::before,
  .jikorikai-reference *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The quick start adds some unverified details, including testimonial control outlines, a FAQ divider, and a multiply blend for circle overlap. Those are implementation choices. The source captures establish the broader geometry and appearance, not those exact CSS techniques. Menu logic, testimonial state, FAQ state, illustration assets, and counseling-link visibility require separate implementation.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: #ffffff;
  --color-ink: #222222;
  --color-slate: #44475c;
  --color-muted-surface: #f4f4f4;
  --color-secondary: #4d4d4d;

  /* Estimated illustration accents */
  --color-circle-pink: #ff7f99;
  --color-circle-yellow: #f2cc00;
  --color-circle-green: #18bf80;

  --font-japanese: dnp-shuei-gothic-gin-std, sans-serif;
  --font-utility: Inter, DNPShueiGoGinStd-B, sans-serif;

  --text-hero: var(--text-hero);
  --text-feature: var(--text-heading);
  --text-feature-number: var(--text-number);
  --spacing-page-gutter: var(--page-gutter);
  --spacing-section-top: var(--section-top);
  --spacing-section-bottom: var(--section-bottom);
  --radius-circle: 50%;
}
```

When translating this mapping into a production token system, use distinct source-variable names for dynamic font sizes, such as `--site-hero-size`, to avoid a self-referential `--text-hero` declaration. The neutral colors and font stacks can be used directly; the accent colors remain approximations.

## Sources & Evidence

- **Inspected original/final page:** [https://jikorikai.com/](https://jikorikai.com/). The supplied browser record reports HTTP 200 and the same original and final URL.
- **Capture timestamp:** October 1, 2026, 20:16:35.639 UTC, equivalent to October 2, 2026, 05:16:35.639 JST.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; current hero, feature 03, and footer screenshots; rendered DOM text, link destinations, element bounds, computed styles, and custom properties. Recorded document height is approximately 14917.38px.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; current hero and footer-ending screenshots; corresponding DOM and computed-style evidence. Recorded document height is approximately 13842.11px.
- **Inspection procedure:** the supplied browser process included at least five seconds of initial observation, document/image readiness checks, layout/text stability checks, and scrolling through intermediate positions. Perpetual animations were temporarily paused during readiness checks and then resumed. SharedWorkers and service workers were disabled.
- **Interaction coverage:** scrolling was part of capture preparation. No supplied evidence records menu activation, testimonial navigation, FAQ toggling, link navigation, hover outcomes, or keyboard interaction.
- **Limits:** full original stylesheets, asset URLs, font files, breakpoint definitions, and animation timelines were not supplied. Many lower-page regions have DOM evidence without a corresponding visual capture. Readiness checks do not prove that every delayed state or interaction was exercised.

This reference describes the current homepage shown in the supplied evidence. Measured values, visual estimates, and recommended implementation choices are identified separately throughout.