# Sony Music Group Graduate Recruitment 2026 — Style Reference

> An entertainment recruitment hub arranged like a giant illustrated record sleeve: loud colors, wavy borders, heavy lettering, and characters with a job to do.

**Website:** [Sony Music Group Graduate Recruitment 2026](https://graduate26.saiyo.sme.co.jp/)
**Original URL:** https://graduate26.saiyo.sme.co.jp/
**Final URL:** https://graduate26.saiyo.sme.co.jp/
**Theme:** bright multicolor sections, black structural backing, and white headline and utility surfaces. No selectable theme was evidenced.
**Inspected:** September 13, 2026, at 04:18 JST. Supplied browser evidence was retrieved at `2026-09-12T19:18:04.217Z`.
**Viewports:** desktop `1440 × 1000` CSS pixels; mobile `390 × 844` CSS pixels.
**Scope:** the currently served recruitment homepage, including its illustrated opening, message, job and interview previews, employee survey preview, company-information links, related resources, footer, persistent navigation, and visible cookie notice. Five original-page captures cover desktop opening, middle and footer views, plus mobile opening and footer views. Other sections also have rendered DOM measurements.

The page is the home of a recruitment website with several destination pages. Its navigation serves both exploration and application: visitors can browse work, interviews, employee answers, company information and schedules, while `ENTRY` and `MY PAGE` remain immediately available.

The defining visual relationship is between large, saturated fields and assertive black contours. Orange-red and yellow dominate; cyan separates layers; purple introduces the related-resource area. Green and pink distinguish supporting illustrations and survey shapes. A black-and-white checkerboard surrounds the opening composition, while oversized Japanese lettering occupies a white island at its center.

The artwork carries much of the identity. Six illustrated people represent different creative activities, accompanied by a musical note, mirror ball, monitor, game controller, microphone and speaker with eyes, arms or gloves. These figures recur between sections, connecting the page into one continuous illustrated world.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM, computed styles or custom properties. Measurements below are rounded to two decimals unless greater precision is useful.
- **Visual estimate** means a proportion, border, texture or dimension was assessed from an original-page screenshot. It is not a recovered CSS declaration.
- **Calculated** means arithmetic derived from recorded measurements, such as the spacing between adjacent links.
- **Recommended** means a choice for a new implementation. The Quick Start uses these choices where the original rules were not supplied.
- **Token names** are implementation aliases except for the six explicitly identified source color variables.
- Element rectangles can include transforms. A transformed survey-card rectangle is not necessarily its untransformed CSS width or height.
- Empty heading text and inherited font sizes do not describe the size of lettering drawn inside artwork. Image alternatives and accessible names were not comprehensively included in the evidence.
- The page still displays the 2026 campaign and the badge `3/11まで`. This records the served interface; it does not establish that applications were open on the inspection date.

## Tokens — Colors

### Default Palette

The following six source variables are present in both inspected viewport snapshots.

| Name | Exact source value | Source token | Role in the observed design |
| --- | --- | --- | --- |
| Campaign Yellow | `#ffcc00` | `--color-yellow`, recorded as `#fc0` | Broad inner hero field, survey board, company-information section and visible footer surface |
| Campaign Orange-Red | `#ff5733` | `--color-red` | Broad hero ring, job and survey section backing, recruitment Instagram pill |
| Cyan | `#5cc3ec` | `--color-lightblue` | Hero contour band, thick survey frame and illustrated details |
| Purple | `#9c79de` | `--color-purple` | Related-resource section and survey illustration surfaces |
| Green | `#4faf6f` | `--color-green` | Central circular survey motif and illustration accents |
| Pink | `#e7449d` | `--color-pink` | Survey label shapes, selected answer text and illustration accents |

### Structural and Utility Colors

| Name | Value | Evidence | Role |
| --- | --- | --- | --- |
| Black | `#000000` | Computed backgrounds and text; visible linework | Main lettering, drawing contours, action fills, checkerboard and structural backing |
| White | `#ffffff` | Computed action text; visible surfaces | Hero center, alternating checker squares, reversed controls and cookie notice |
| Consent Blue | `#1875b5` | Computed cookie buttons | `OK` fill and `Cookie Settings` text |
| Policy Link Blue | `#3860be` | Computed policy link | Underlined `Cookie Policy` text |
| Answer Blue | `#0086b6` | Computed survey excerpt text | A supporting answer excerpt inside the survey composition |
| Consent Close Gray | `#555555` | Computed close control | Cookie-notice close icon |

**Keep the color roles distinct.** Consent blue belongs to the utility notice. The recruitment actions use black and white, with a small yellow deadline badge. Promoting consent blue into the main CTA color would change the hierarchy.

The related-resource frames appear light gray in the screenshots, but their exact paint value was not supplied. The large background lettering uses darker, low-contrast versions of its surrounding section color; its exact color or opacity is also unverified.

A `--swiper-theme-color: #007aff` property appears in the evidence. This alone does not establish a visible blue component, an active carousel, or a navigation-arrow treatment.

## Tokens — Typography

### Dela Gothic One — Display Text and Actions

- **Computed family:** `"Dela Gothic One", sans-serif`.
- **Computed weight:** `400`. Its heavy appearance comes from the typeface design; the inspected elements do not require a fabricated `900` weight.
- **Roles:** message copy, survey questions, company-card headings, application actions, `VIEW ALL`, and offscreen navigation labels.
- **Character:** very wide, dense letterforms with a strong horizontal presence. Even short English labels feel substantial.

### Noto Sans JP — Supporting Text

- **Computed stack:** `"Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif`.
- **Weights:** `400` for regular supporting copy; `700` for introductions, captions and footer navigation. Cookie buttons use `600`.
- **Roles:** explanatory paragraphs, answer excerpts, related-resource captions, footer links and consent text.

The stacks above are directly evidenced computed declarations. Font-file loading and fallback resolution were not separately audited.

### Artwork Lettering and Wordmarks

The central `種も 仕掛けも キミ次第` composition is graphic lettering. The hero `h1` has empty extracted text and spans the artwork container. Several section headings likewise have inherited base font sizes despite displaying much larger lettering.

Do not interpret the hero's computed `16.4571px` inherited font size as its visual headline size. Preserve the authored lettering, line breaks and irregular proportions. The Sony Music Group wordmark is also a graphic identity element, not a request to approximate a logo with an italic font.

The survey heading is visibly white with a black outline and a hard black offset. Its letter height is approximately `65–75px` in the desktop middle capture, a **visual estimate**, not a measured CSS font size.

### Type Scale

Values are measured CSS pixels. Entries show `font size / line height`.

| Role | Family / weight | Desktop | Mobile | Tracking and interpretation |
| --- | --- | --- | --- | --- |
| Body inheritance | Noto Sans JP / 400 | `16.46 / 16.46` | `10.40 / 10.40` | Base inheritance; not the recommended size for all prose |
| Message paragraph | Dela Gothic One / 400 | `34.97 / 61.71` | `17.68 / 31.20` | Desktop `0.06em`; mobile `0.04em` |
| Job introduction | Noto Sans JP / 700 | `18.51 / 34.97` | `13.52 / 23.92` | Desktop `0.04em`; mobile normal |
| Survey questions | Dela Gothic One / 400 | `30.86–31.89 / 37.03` | `15.60–16.12 / 18.72` | Deliberate short lines within individual shapes |
| Survey answer excerpts | Noto Sans JP / 700 | `16.46 / 26.74` | `10.40 / 15.60` | Tracking varies by excerpt |
| Company-card title | Dela Gothic One / 400 | `28.80 / 28.80` | `16.64 / 16.64` | Normal tracking |
| Company-card description | Noto Sans JP / 400 | `14.40 / 26.74` | `9.88–11.44 / 18.72` | Mobile company overview is larger than the other descriptions |
| Header `ENTRY` | Dela Gothic One / 400 | `16.46 / 16.46` | `11.44 / 11.44` | Desktop `0.03em`; mobile `0.04em` |
| Header `MY PAGE` | Dela Gothic One / 400 | `15.43 / 15.43` | `11.44 / 10.40` | Mobile label breaks into two lines |
| `VIEW ALL` | Dela Gothic One / 400 | `16.46 / 16.46` | `10.40 / 10.40` | `0.04em` |
| Related-resource caption | Noto Sans JP / 700 | `16.46 / 16.46` | `10.40 / 10.40` | Mobile `-0.04em` |
| Footer navigation | Noto Sans JP / 700 | `14.40 / 20.57` | `12.48 / 31.20` | Mobile increases the line box relative to the letters |
| Cookie-policy link | Noto Sans JP / 700 | `13.008 / 19.512` | Same | Does not shrink with the campaign typography |
| Cookie buttons | Noto Sans JP / 600 | `13.008 / 15.61` | Same | Approximately `0.01em` |

The root computes to `10px` at both viewports. Desktop and mobile component sizes therefore cannot be explained by a changing root alone. Many values fit separate viewport-based design scales, but the underlying formulas and breakpoint declarations were not supplied.

## Tokens — Spacing & Shapes

**Density:** expansive illustrated sections with compact, heavy controls. The page uses generous vertical separation between content groups while allowing decorative shapes to overlap.

### Measured Spacing

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header top and right padding | `20.57px` | `0px` | Computed header padding |
| Gap between desktop header actions | Approximately `2.05px` | Adjacent divided cells | Calculated from rectangles; mobile screenshot |
| Message horizontal inset | `63.70px` | `33.19px` | Paragraph rectangle |
| Job-grid outer inset | Approximately `100.80px` | `21.31px` | First tile rectangle |
| Job-grid horizontal gap | Approximately `19.5–21.6px` | `21.86px` | Calculated from tile rectangles |
| Survey section side padding | `15.43px` | `0px` on an oversized section | Computed padding |
| Company-card horizontal gap | Approximately `14.41px` | `9.20px` | Calculated from rectangles |
| Related-resource horizontal gap | `28.80px` | `10.39px` between lower tiles | Calculated from rectangles |
| Footer principal content inset | Approximately `102.83px` | `25.97px` | Social and navigation rectangles |

### Shape Vocabulary

| Element | Treatment | Status |
| --- | --- | --- |
| Desktop header actions | Black capsules, white inset keyline, black outside edge | Screenshot-observed; radius measured at `30.86px` |
| Desktop `VIEW ALL` | Wide capsule with white label and right arrow | Radius measured at `41.14px` |
| Mobile `VIEW ALL` | Smaller capsule retaining a 3:1 width-to-height ratio | Radius measured at `26px` |
| Hero rings | Nested irregular lobed contours | Artwork geometry; no path data supplied |
| Survey board | Yellow grid field inside a thick cyan rounded frame | Visual estimate: frame around `25–27px`, outer radius around `70px` on desktop |
| Survey tiles | Circle, wavy badge and irregular label silhouettes with black outlines | Visible desktop artwork; exact paths unavailable |
| Related-resource section | Rounded top corners | Measured `51.43px` desktop, `26px` mobile |
| Related-resource image frames | Light-gray rim, black keylines, rounded inner image | Visual estimate: approximately `20px` outer radius desktop, `10px` mobile |
| Footer top | Large yellow rounded shoulder overlapping purple | Visually observed; the sampled footer wrapper itself has radius `0` |
| Cookie buttons | Nearly square rectangles | Measured `2px` radius |

Do not apply one universal radius to every component. The page mixes irregular contours, large section shoulders, capsules, circular badges and restrained utility rectangles.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Document height | `6484.97px` | `4552.09px` |
| Hero section | `1400 × 1000px`, starting at `x = 20px` | `390 × 572px`, including header clearance |
| Hero heading/artwork box | `1400 × 1000px` | `390 × 509.61px`, starting at `y = 62.39px` |
| Header wrapper | `1440 × 101.03px` | `390 × 62.39px` |
| Header `ENTRY` | `154.28 × 61.70px` | `95.67 × 26px` sampled link box |
| Header `MY PAGE` | `154.28 × 61.70px` | `83.19 × 26px` sampled link box |
| Menu button | `82.28 × 61.70px` | `72.80 × 26px` sampled box |
| `VIEW ALL` | `246.84 × 82.28px` | `156 × 52px` |
| Job tile anchor | Width `294.16px`; height `457.70–478.28px` | `162.75 × 219.95px` |
| Company-information anchor | `341.48 × 341.48px` | `172.80 × 190.25px` |
| Related-resource anchor | `310.63 × 166.61px` | Lower tiles `158.08 × 87.34px`; first anchor spans the section width |
| Footer application action | `164.56 × 45.25px` | `164.31 × 60.31px` |
| Cookie `OK` | `125 × 41.61px` | `350 × 41.61px` |
| Cookie close target | `44 × 44px` | `44 × 44px` |

## Components

### Persistent Action Header

**Role:** keep application and account access available while the visitor explores the recruitment site.

On desktop, three black capsules float at the top right over the artwork. `ENTRY` and `MY PAGE` have equal widths; the menu capsule is narrower. White inset outlines maintain separation from the surrounding black, checkerboard and colored graphics. A small yellow `3/11まで` badge overlaps the upper edge of the entry action. The menu symbol uses two white horizontal strokes.

The controls remain in the same viewport location across the supplied desktop scroll captures. This supports describing them as persistent. The exact positioning declaration was not included in the sampled styles.

At `390px`, the composition changes into a full-width black bar approximately `62.4px` high. A compact white brand mark sits at the left. Entry, account and menu controls become adjacent cells with thin vertical separators. Their capsule outlines disappear, and `MY PAGE` becomes a two-line label. The page artwork begins below this bar.

The measured mobile control boxes are only `26px` high. A new implementation should preserve the visual arrangement while providing a larger interactive area.

### Navigation Content

**Role:** expose the website's main destinations and secondary recruitment links.

The DOM contains seven navigation destinations: home, job introductions and interviews, employee survey, company overview, application requirements, recruitment schedule and seminar information. It also contains entry and account actions, an English recruitment-information link, and recruitment Instagram.

At capture time, these navigation labels are positioned outside the viewport to the right: approximately `x = 1583px` on desktop and `x = 465px` on mobile. The supplied captures do not show an opened menu. Its open-state background, overlay, focus behavior and entrance animation are unverified.

Repeated text such as `ENTRY ENTRY` and duplicated navigation labels occurs in extraction. Only one label is visibly presented in the closed interface. Do not render these duplicates as separate controls or assume a particular rolling-text animation.

### Illustrated Hero

**Role:** establish the campaign identity before introducing its content.

Read the composition from outside to inside:

1. A black-and-white checkerboard at the outer edges.
2. A substantial black wavy contour.
3. A cyan contour band.
4. A broad orange-red field.
5. A white separator with black linework.
6. A large yellow inner field carrying the Sony Music Group wordmark.
7. A black-edged white center containing the stacked campaign lettering and recruitment year.

People and anthropomorphic equipment overlap these boundaries. Their placements create a circular visual route around the central statement: filmmaking at upper left, publishing or graphics at upper right, music performance at lower left, recorded music at lower right, merchandise near the bottom left, and a laptop-based activity near the bottom right.

The white center provides a stable reading area within a dense composition. Keep the central message visually dominant; do not let decorative figures cover its strokes.

The mobile hero is recomposed into a tall, narrow field. Its main lettering stays large, with people and props pressed toward the sides. This is more than scaling the desktop screenshot to phone width. Use separately composed artwork or an explicitly responsive arrangement.

### Message Section

**Role:** turn the campaign slogan into an editorial statement.

The rendered text begins with `見出す力、進める気概、拡げる情熱。` and uses Dela Gothic One with a generous line height. Desktop copy occupies five lines; mobile introduces an extra break after `種も仕掛けも、`, producing six lines.

Measured desktop text is `34.97px` with `61.71px` line height. Mobile uses `17.68px` with `31.2px` line height. The supporting layout therefore retains an unusually open vertical rhythm even as the letters become smaller.

The section wrapper computes to black, and the paragraph computes to black text. No supplied screenshot isolates the painted surface beneath this paragraph. Those declarations must not be interpreted as evidence of intentional black-on-black text: intermediate artwork or backing layers are not represented by the sampled properties. Its exact visible backing requires further inspection.

### Job and Interview Preview

**Role:** offer four visual entry points into work categories, followed by access to the complete directory.

The section has an orange-red backing, a graphic heading, a centered two-line desktop introduction, four linked visual tiles, and a centered `VIEW ALL` capsule.

Desktop tiles are approximately `294px` wide. The second and fourth begin about `62px` lower than the first and third, creating a staggered rhythm. Their links target `/job/#job-1` through `/job/#job-4`.

Mobile changes to a two-by-two arrangement. Both tiles in each row share the same recorded top coordinate. Tile anchors are approximately `163 × 220px`, but some associated graphic-label rectangles extend below those anchor bounds. Reserve space for the complete artwork, not just the anchor measurement.

The supplied screenshots do not isolate the four tile illustrations. Their exact subjects and internal artwork should not be inferred from empty anchor text.

### View-All Capsule

**Role:** a consistent route from a visual preview to its complete content page.

Use black fill, white Dela Gothic One text, a fully rounded silhouette and a small right-pointing arrow. Desktop dimensions are `246.84 × 82.28px`; mobile dimensions are `156 × 52px`. Both retain a 3:1 proportion.

The job and survey previews each use this control. Its size and centered placement distinguish it from the smaller persistent header actions without introducing another action color.

### Employee Survey Board

**Role:** present employee answers as a playful collection of questions rather than a conventional list.

The desktop capture shows a thick cyan rounded frame around a yellow field with a fine square grid. A large white-and-black Japanese heading sits above the English subtitle `NEW EMPLOYEE SURVEY`.

Question links take different silhouettes. A purple wavy badge sits on the left, a larger green circle with a green-and-white checker rim occupies the center, and a pink label shape appears on the right. The complete DOM contains five questions, including application counts, other industries considered, impressions after joining, student-life advice and the start of job hunting.

Each question is a link to a specific anchor on `/survey/`. Some also include a short answer excerpt. Use a heavy question and a smaller supporting excerpt within the same linked shape; do not split them into unrelated controls.

Desktop transformed rectangles range from about `439px` to `560px` wide. On mobile, the central circular item is approximately `285px` wide and appears lower than the two upper side items. Several side items have rectangles extending beyond the viewport, including left edges around `-94px` and `-109px` and right edges beyond `465px`.

This establishes an oversized mobile composition at the sampled state. It does not establish swipe navigation, a carousel, or whether subsequent motion brings every item fully into view. For reuse, keep all essential question text reachable and provide the complete survey destination.

### Company-Information Links

**Role:** route visitors to practical recruitment information.

Four anchors contain a Dela Gothic One `h3` and a Noto Sans JP description. The destinations are company overview, application requirements, recruitment schedule and seminar information.

Desktop uses four equal `341.48px` squares in one row. Each has approximately `45.26px` top padding and `34.97px` horizontal padding. The heading sits near the top, with the paragraph much lower in the card, leaving a substantial middle area.

Mobile uses two columns and two rows. Cards become approximately `172.80 × 190.25px`, with `21.84px` top padding and `19.24px` horizontal padding.

The section backing is measured yellow. Individual anchors compute to transparent with zero border radius. Their exact painted graphic surfaces are not visible in the supplied captures, so the middle space should not be assigned invented iconography or a fabricated card shape.

### Related-Resource Section

**Role:** connect the recruitment site to an editorial publication and the two preceding campaign sites.

A purple section with rounded top corners carries a centered yellow `LINK` heading outlined in black. Three framed image links form an evenly spaced desktop row: Cocotame, the 2025 recruitment site and the 2024 recruitment site. Their captions are bold black text with a small external-link indicator.

The visible frames use light-gray rims, thin black outlines and rounded inner image corners. Desktop media frames are approximately `311 × 136px`, a visual estimate within the measured `310.63 × 166.61px` complete anchors.

On mobile, Cocotame occupies a centered first row with a roughly `158px` wide image. Its anchor spans the full section width. The two campaign links sit beneath it in two columns, each about `158px` wide.

Large, darker purple `RECRUIT2026` lettering extends across the lower portion of the section. It functions as a background graphic. Continuous scrolling of that lettering was not demonstrated.

### Footer and Boundary Mascots

**Role:** close the illustrated sequence while repeating useful navigation and application routes.

A yellow surface with large rounded top shoulders overlaps the purple resource section. A microphone-and-speaker illustration straddles the boundary at the center. Its visible footprint is approximately `300 × 160px` on desktop and `160 × 85px` on mobile, both visual estimates.

Desktop places the black Sony Music Group wordmark and orange-red Instagram pill on the left. Navigation occupies several columns toward the right, with entry and account capsules stacked at the far right.

Mobile places the wordmark and Instagram pill alongside each other, followed by a full-width home link, two navigation columns, and a side-by-side pair of larger application actions. Some of this content is covered by the cookie notice in the screenshot but remains present in the rendered DOM.

The footer also contains English recruitment information, privacy information, cookie settings, frequently asked questions, and `© 2025 Sony Music Entertainment (Japan) Inc. All Rights Reserved.`

### Cookie Notice

**Role:** a separate utility layer above the campaign artwork.

The notice is a full-width white bottom overlay with gray English explanatory text, an underlined policy link, `Cookie Settings`, a blue `OK` button and a gray close icon. Its typography and rectangular controls form a separate visual system from the campaign capsules.

The desktop notice occupies approximately the bottom `89px` of the capture. Text sits left; settings and confirmation controls sit toward the right; close is at the far edge.

On mobile, it occupies approximately `296px`, or 35% of the `844px` viewport. Copy wraps into a narrow paragraph above two full-width control rows. Both settings and confirmation have `350px` wide boxes inside `20px` side margins. The close target remains `44 × 44px`.

The overlay stays visible in all supplied page captures. Acceptance, dismissal, preference persistence and the settings panel were not exercised. Its white rectangle should not be mistaken for the page's underlying section background.

## Tokens — Motion & Interaction

### Evidenced Transition Declarations

These values come from computed styles. They establish declared timing, not a visually verified state change.

| Target | Desktop declaration | What can be concluded |
| --- | --- | --- |
| Header and footer application capsules | Background color, `0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)` | A timed background-color change is configured; final hover color was not supplied |
| `VIEW ALL` | Background and text color, same `0.4s` curve | Both colors have a configured transition |
| Related-resource captions | Text color, same `0.4s` curve | Caption color can transition |
| Footer utility links | Opacity, same `0.4s` curve | An opacity transition is configured |
| Graphic-label paragraphs in job tiles | `0.5s cubic-bezier(0, 0.55, 0.45, 1)` | Timing is supplied; the changed property and target state are not established |
| Many mobile counterparts | Reported as `all`, without a nonzero duration | Desktop timing should not be assumed to apply unchanged on mobile |

### Observed Behavior and Limits

- Initial and scrolled views demonstrate a long document with persistent top controls and a persistent bottom cookie overlay.
- Anchors establish destinations for entry, account login, job categories, survey questions and information pages. Their destination pages were not inspected.
- Sampled elements report `animation: none`. This does not rule out animation on descendants, pseudo-elements, scripts or image content.
- Capture preparation temporarily paused perpetual animations and resumed them afterward. That procedure does not provide a timeline, direction or duration for any specific decorative effect.
- No menu opening, hover result, cookie action, drag, swipe, parallax effect or continuous marquee behavior was demonstrated.

**Recommended reuse:** use the measured 400ms curve for restrained capsule color changes. Keep animated character movement optional and nonessential. Provide reduced-motion behavior without changing content order or hiding questions.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Structural backing | Black | Connects contours and supports sections whose visible paint comes from inner layers |
| Hero exterior | Checkerboard and nested colored rings | Creates visual depth through boundaries rather than lighting |
| Hero reading surface | White with a heavy black contour | Protects the campaign statement from the surrounding density |
| Job and survey backing | Orange-red | Connects the two main exploration previews |
| Survey board | Yellow grid with cyan frame | Organizes otherwise irregular question shapes |
| Company-information backing | Yellow | Supports practical recruitment routes |
| Related resources | Purple with darker background lettering | Marks the closing resource group |
| Footer | Yellow with black text and orange-red social action | Returns to the dominant campaign color |
| Consent overlay | White, gray text and blue utility controls | Independent browser-preference layer |

The principal depth cues are overlapping silhouettes, thick contours, alternating colors and hard black offsets. The supplied captures do not establish a general soft-shadow, glass-blur or gradient elevation system.

## Imagery

The imagery combines outlined people, expressive objects and graphic pattern. Human figures have simplified faces, varied clothing and recognizable creative props. Objects become companions through eyes, flexible black limbs, white gloves and small ground shadows.

The drawing style has visible texture and slight irregularity. Preserve that texture while keeping the outlines crisp. It is not a pixel-art interface: do not force `image-rendering: pixelated` onto the illustrations.

Checkerboard, graph-paper lines, stars, musical notes and wavy bands provide secondary rhythm. Use them at different scales. The checkerboard belongs to both the large hero perimeter and a smaller survey rim; the yellow grid stays behind the survey content.

### Observed Asset References

Asset URLs and file formats were not included in the supplied original-page evidence. The following are descriptive references to visible artwork, not recovered filenames.

| Artwork | Confirmed use | Reuse guidance |
| --- | --- | --- |
| Nested-wave hero composition | Desktop and mobile opening captures | Maintain separate wide and narrow compositions |
| Central campaign lettering | White hero center | Preserve the authored letter shapes and stacked reading order |
| Sony Music Group wordmark | Hero, mobile header and footer | Use an appropriate supplied brand asset; preserve its proportions |
| Six human figures | Around the hero perimeter | Keep props and silhouettes recognizable when resized |
| Musical note, mirror ball, monitor and controller | Hero and desktop section transition | Reuse as recurring motifs without covering essential text |
| Microphone and speaker | Hero and purple-to-yellow footer boundary | Anchor the pair to the section overlap |
| Survey heading and shaped panels | Desktop middle capture | Preserve the difference between graphic headings and live question text |
| Cocotame and prior-campaign previews | Related-resource section | Place within consistent frames while preserving each preview's artwork |

CSS can reproduce the color fields, frame system, layout and controls. It cannot substitute for the specific figures, lettering and contour paths that make the page recognizable.

## Layout & Responsive Behavior

### Recorded Section Geometry

The table records document-coordinate rectangles, not a recommendation to hardcode section heights.

| Section | Desktop top / height | Mobile top / height |
| --- | --- | --- |
| Hero | `0 / 1000px` | `0 / 572px` |
| Message | `1000 / 820.80px` | `572 / 458.58px` |
| Jobs and interviews | `1820.80 / 1359.77px` | `1030.58 / 1011.80px` |
| Employee survey | `3180.56 / 1450.09px` | `2042.38 / 983.81px` |
| Company information | `4680.02 / 885.59px` | `3026.19 / 679.11px` |
| Related resources | `5514.19 / 659.20px` | `3679.30 / 437.16px` |
| Footer | `6101.39 / 384.59px` | `4080.06 / 472.03px` |

These rectangles overlap in places. For example, the purple resource section begins approximately `51.42px` before the desktop company section ends, and approximately `26px` before it ends on mobile. The footer likewise overlaps the resource section. Preserve those transitions as layered composition rather than adding every measured section height sequentially.

### Desktop to Mobile Changes

| Component | Desktop | Mobile |
| --- | --- | --- |
| Header | Floating outlined capsules over artwork | Full-width black bar with divided controls and visible compact logo |
| Hero | Broad composition, measured at full viewport height | Tall artwork below a `62.4px` header allowance |
| Message | Five larger lines | Six smaller lines with an explicit extra break |
| Job preview | Four staggered tiles in one row | Two aligned columns and two rows |
| Survey | Broad overlapping composition | Central item moves lower; side-item rectangles extend beyond viewport |
| Company information | Four squares in one row | Two columns of taller rectangles |
| Related resources | Three equal links in one row | One centered resource above two campaign links |
| Footer | Brand left, navigation and stacked actions right | Brand/social row, two navigation columns and side-by-side actions |
| Cookie notice | Shallow horizontal strip | Tall stacked overlay |

At the initial mobile position, the cookie notice begins around `y = 548px` while the hero section ends at `572px`. It therefore covers approximately the last `24px` of that hero. On desktop, it covers the bottom of the `1000px` hero. These are overlay effects, not artwork dimensions.

Only two viewport widths were inspected. Tablet behavior, landscape phones, breakpoint thresholds, zoom behavior and safe-area handling remain unverified. The `48rem` breakpoint in the Quick Start is a recommendation.

## Do’s and Don’ts

### Do

- Keep the exact six campaign colors, with black and white organizing their boundaries.
- Give yellow and orange-red large areas; use cyan as a separating band and purple as a section change.
- Preserve the central white reading island and authored Japanese lettering.
- Use Dela Gothic One at its observed weight for display text and Noto Sans JP for supporting copy.
- Repeat a small family of illustrated characters across section boundaries.
- Maintain the desktop-to-mobile header transformation.
- Preserve the four-to-two-column changes in job and company previews.
- Keep the related-resource mobile hierarchy: one centered publication above two campaign links.
- Separate source measurements from approximate artwork geometry.
- Reserve space for the full visible artwork, including labels that extend beyond sampled anchor boxes.

### Don't

- Don't reduce the site to a single application CTA; its content-navigation role is central.
- Don't rebuild the hero as a generic rounded rectangle or one arbitrary CSS blob.
- Don't replace the graphic slogan with an ordinary large heading and expect the same identity.
- Don't apply bold synthetic weights to every Dela Gothic One element.
- Don't turn every survey question into an identical card.
- Don't introduce soft shadows or glossy gradients as the main depth system.
- Don't infer a carousel from offscreen cards or a library custom property.
- Don't assume repeated extracted text is meant to appear twice.
- Don't treat the cookie banner's blue as a recruitment brand color.
- Don't shrink all mobile prose to the smallest observed inherited font size.
- Don't infer open-menu visuals, hover colors or mascot animation from static captures.

## Recommended Implementation Additions

These are recommendations for reuse, not verified features of the original site.

- Provide a meaningful accessible name for the hero and image-based headings. Keep decorative figures and duplicated visual labels out of repeated screen-reader output.
- Preserve the small mobile header appearance while expanding action hit areas to at least `44px` high.
- Keep important mobile descriptions around `14px` or larger where possible. The observed `9.88–11.44px` descriptions should be treated as a fidelity measurement, not a readability target.
- Keep essential survey questions fully reachable. Clip decorative art separately from links and readable text.
- Implement menu state with a real button, `aria-expanded`, appropriate focus handling and an escape route. Do not infer this behavior from the offscreen DOM alone.
- Use visible focus outlines that remain clear on black, white and every campaign color.
- Give the cookie notice a bounded scrolling region when text grows or the viewport becomes short. Keep its controls reachable without forcing the entire page behind an inaccessible overlay.
- Supply responsive artwork dimensions to reserve space before images decode. Prioritize the opening composition and defer lower-page decorative imagery where appropriate.
- Provide reduced-motion alternatives if continuous character or background movement is added.
- Treat the deadline badge as content supplied by the recruitment system. Do not hardcode the captured date into a new campaign.

## Agent Prompt Guide

### Quick Color Reference

- Main fields: yellow `#ffcc00` and orange-red `#ff5733`.
- Contour separator and survey frame: cyan `#5cc3ec`.
- Related-resource field: purple `#9c79de`.
- Supporting shapes: green `#4faf6f` and pink `#e7449d`.
- Lettering, linework and primary action fills: black `#000000`.
- Hero center and reversed action labels: white `#ffffff`.
- Consent utility only: blue `#1875b5`.

### Overall Prompt

“Create an illustrated entertainment recruitment homepage inspired by this reference. Use large yellow and orange-red fields, cyan contour bands, a purple related-resource section, black outlines and white reading surfaces. Build the opening around nested wavy rings and a central three-line Japanese campaign statement. Surround it with textured outlined people and expressive music and media objects. Use Dela Gothic One for live display text and Noto Sans JP for supporting copy. Keep black application capsules at the desktop top right; transform them into a compact full-width black header on mobile. Follow the opening with a message, four job previews, a shaped employee-survey composition, four practical information links, related resources and a yellow footer. Preserve content navigation as well as application access. Use supplied artwork for the hero and character identity.”

### Example Component Prompts

1. **Header:** “Create three black desktop capsules with white inset outlines: ENTRY with a small yellow deadline badge, MY PAGE, and a two-stroke menu icon. On a phone, use a roughly 62px black bar with a small white logo and divided action cells. Keep interaction targets accessible.”
2. **Survey board:** “Place a large white heading with a hard black outline over a yellow graph-paper field inside a thick cyan rounded frame. Arrange a purple wavy badge, a green circle with a checker rim, and a pink label as distinct linked questions. Use heavy black text and smaller answer excerpts. Keep all essential copy reachable on mobile.”
3. **Related resources:** “Create a purple section with a yellow LINK heading, three rounded gray-rimmed preview frames, and bold black captions. On mobile, center the publication link above a two-column row of campaign previews. Add oversized darker purple background lettering without assuming it must animate.”
4. **Footer boundary:** “Overlap a yellow footer with large rounded top shoulders onto the purple section. Place a microphone-and-speaker character pair across the boundary. On desktop, put the brand and orange-red social pill at left and navigation plus black application actions at right. Reflow to compact rows and two navigation columns on mobile.”
5. **Job preview:** “Arrange four linked illustrated tiles on an orange-red field, lowering alternate desktop tiles by about 62px. Use two aligned columns on mobile. Place a black 3:1 VIEW ALL capsule beneath the complete artwork bounds.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source CSS. It uses measured endpoint sizes, exact source colors, estimated decorative frame geometry and a recommended `48rem` breakpoint. It keeps a conventional root font size. Hover end colors, focus treatment and larger mobile hit areas are recommended additions.

The hero and character paths must be supplied as artwork. The CSS below provides their layout containers and the surrounding component system. Load Dela Gothic One at weight `400` and Noto Sans JP at the required weights through the project's font setup.

```css
:root {
  /* Exact campaign colors from the supplied computed properties. */
  --color-yellow: #ffcc00;
  --color-red: #ff5733;
  --color-lightblue: #5cc3ec;
  --color-purple: #9c79de;
  --color-green: #4faf6f;
  --color-pink: #e7449d;
  --ink: #000000;
  --paper: #ffffff;
  --consent-blue: #1875b5;

  --font-campaign: 'Dela Gothic One', sans-serif;
  --font-body: 'Noto Sans JP', 'Helvetica Neue', Arial,
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;

  /* Measured desktop endpoints. */
  --text-message: 34.9714px;
  --leading-message: 61.7143px;
  --text-intro: 18.5143px;
  --text-question: 30.8571px;
  --text-card-title: 28.8px;
  --text-action: 16.4571px;
  --text-caption: 16.4571px;
  --header-offset: 0px;
  --action-height: 61.7031px;
  --action-width: 154.2813px;
  --view-all-width: 246.8438px;
  --view-all-height: 82.2813px;
  --resource-radius: 51.4286px;
  --resource-gap: 28.8px;

  /* Estimated decorative geometry and recommended utility spacing. */
  --frame-width: 26px;
  --board-radius: 72px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --pill-radius: 999px;
  --motion-color: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { box-sizing: border-box; }

body { margin: 0; }

.recruit-page {
  color: var(--ink);
  background: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

.recruit-page img { max-width: 100%; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20.5714px;
  pointer-events: none;
}

.site-header > * { pointer-events: auto; }
.header-brand { display: none; }
.header-actions { display: flex; gap: 2.0571px; }

.action-pill,
.view-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 2px solid var(--ink);
  border-radius: var(--pill-radius);
  color: var(--paper);
  background: var(--ink);
  font-family: var(--font-campaign);
  font-size: var(--text-action);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-color),
    color var(--motion-color);
}

.header-actions .action-pill {
  width: var(--action-width);
  min-height: var(--action-height);
  box-shadow: inset 0 0 0 2px var(--paper);
}

.header-actions .menu-button { width: 82.2813px; }

.deadline {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border: 1px solid var(--ink);
  border-radius: var(--pill-radius);
  color: var(--ink);
  background: var(--color-yellow);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.menu-bars::before,
.menu-bars::after {
  content: '';
  display: block;
  width: 30px;
  height: 4px;
  margin-block: 4px;
  background: currentColor;
}

.view-all {
  width: var(--view-all-width);
  min-height: var(--view-all-height);
  letter-spacing: 0.04em;
}

.section-action { margin-block: 40px 0; text-align: center; }

/* Supply authored artwork; this container does not draw the hero. */
.hero {
  width: min(100%, 1400px);
  height: 100svh;
  margin: 0 auto;
}

.hero picture { display: block; width: 100%; height: 100%; }
.hero img { display: block; width: 100%; height: 100%; object-fit: contain; }

.message-copy {
  margin-inline: auto;
  padding-inline: clamp(24px, 4.424vw, 64px);
  font-family: var(--font-campaign);
  font-size: var(--text-message);
  font-weight: 400;
  line-height: var(--leading-message);
  letter-spacing: 0.06em;
}

/* Choose a verified, readable backing for the message component. */
.jobs-section { padding-block: 100px 80px; background: var(--color-red); }

.section-intro {
  padding-inline: 20px;
  text-align: center;
  font-size: var(--text-intro);
  font-weight: 700;
  line-height: 1.89;
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20.57px;
  width: min(calc(100% - 42.62px), 1238px);
  margin: 50px auto 105px;
}

.job-tile { display: block; color: inherit; text-decoration: none; }
.job-tile img { display: block; width: 100%; height: auto; }
.job-tile:nth-child(even) { transform: translateY(62px); }

.survey-section { padding: 0 15.43px 82px; background: var(--color-red); }

.survey-board {
  padding: clamp(40px, 6vw, 88px) 24px;
  border: var(--frame-width) solid var(--color-lightblue);
  border-radius: var(--board-radius);
  outline: 1px solid var(--ink);
  background-color: var(--color-yellow);
  background-image:
    linear-gradient(rgb(0 0 0 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 8%) 1px, transparent 1px);
  background-size: 37px 37px;
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Accessible static arrangement; original collage positions differ. */
.survey-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
}

.survey-question {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 280px;
  padding: 36px 24px;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: var(--color-pink);
  text-align: center;
  text-decoration: none;
}

.survey-question--circle {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-green);
}

.survey-question h3 {
  margin: 0;
  font: 400 var(--text-question)/1.2 var(--font-campaign);
}

.survey-question p { font-size: 16px; font-weight: 700; }

.company-section { padding: 90px 17px 140px; background: var(--color-yellow); }
.company-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14.4px; }

.company-link {
  display: flex;
  flex-direction: column;
  min-height: 341px;
  padding: 45px 35px 35px;
  color: inherit;
  text-decoration: none;
}

.company-link h3 { margin: 0; font: 400 var(--text-card-title)/1.2 var(--font-campaign); }
.company-link p { margin-block: auto 0; padding-top: 80px; font-size: 14.4px; line-height: 1.86; }

.related-section {
  position: relative;
  margin-top: -51.43px;
  padding: 100px 20px 220px;
  border: 1px solid var(--ink);
  border-radius: var(--resource-radius) var(--resource-radius) 0 0;
  background: var(--color-purple);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 310.625px));
  justify-content: center;
  gap: var(--resource-gap);
  margin-top: 50px;
}

.resource-link { color: inherit; text-align: center; text-decoration: none; }

.resource-frame {
  display: block;
  aspect-ratio: 310.625 / 135.76;
  padding: 5px;
  border: 1px solid var(--ink);
  border-radius: 20px;
  background: #cccccc; /* Visual approximation of the gray rim. */
}

.resource-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--ink);
  border-radius: 14px;
  object-fit: cover;
  background: var(--paper);
}

.resource-caption { margin: 14.4px 0 0; font-size: var(--text-caption); font-weight: 700; line-height: 1.2; }

.site-footer {
  position: relative;
  margin-top: -72px;
  padding: 132px clamp(26px, 7.14vw, 103px) 48px;
  border: 1px solid var(--ink);
  border-radius: 72px 72px 0 0;
  background: var(--color-yellow);
}

.boundary-mascot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 300px;
  transform: translate(-50%, -80%);
  pointer-events: none;
}

.footer-grid { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 32px; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.footer-nav a { color: inherit; font-size: 14.4px; font-weight: 700; text-decoration: none; }

/* Recommended hover endpoint; source endpoint colors were not supplied. */
@media (hover: hover) {
  .action-pill:hover,
  .view-all:hover { color: var(--ink); background: var(--color-yellow); }
}

.recruit-page :focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ink);
}

@media (max-width: 48rem) {
  :root {
    --header-offset: 62.4px;
    --text-message: 17.68px;
    --leading-message: 31.2px;
    --text-intro: 13.52px;
    --text-question: 15.6px;
    --text-card-title: 16.64px;
    --text-action: 10.4px;
    --text-caption: 10.4px;
    --view-all-width: 156px;
    --view-all-height: 52px;
    --resource-radius: 26px;
    --resource-gap: 10.4px;
    --frame-width: 13px;
    --board-radius: 36px;
  }

  .site-header {
    height: var(--header-offset);
    padding: 0;
    border-bottom: 2px solid var(--paper);
    background: var(--ink);
  }

  .header-brand { display: block; width: 76.96px; margin-left: 9.36px; margin-right: auto; }
  .header-actions { gap: 0; }

  .header-actions .action-pill {
    width: 95.68px;
    min-height: 44px; /* Recommended larger target than the sampled 26px box. */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 11.44px;
  }

  .header-actions .account-action { width: 83.2px; }
  .header-actions .menu-button { width: 72.8px; }
  .header-actions .deadline { top: -1px; padding: 0 4px; font-size: 8px; }
  .header-actions .entry-action { padding-top: 8px; }

  .hero { height: auto; padding-top: var(--header-offset); }
  .hero picture { height: auto; aspect-ratio: 390 / 509.6094; }
  .message-copy { padding-inline: 33.19px; letter-spacing: 0.04em; }
  .jobs-section { padding-block: 76px 60px; }

  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 21.86px; margin-block: 26px 40px; }
  .job-tile:nth-child(even) { transform: none; }

  .survey-section { padding-inline: 12px; }
  .survey-board { padding-inline: 16px; }
  .survey-items { grid-template-columns: 1fr; }
  .survey-question { min-height: 240px; }
  .survey-question p { font-size: 14px; }

  .company-section { padding: 80px 17.6px 100px; }
  .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9.2px; }
  .company-link { min-height: 230px; padding: 22px 19px 26px; }
  .company-link p { padding-top: 32px; font-size: 14px; }

  .related-section { margin-top: -26px; padding: 52px 20px 142px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 158.08px)); gap: 20.8px 10.4px; margin-top: 24px; }
  .resource-link:first-child { grid-column: 1 / -1; }
  .resource-link:first-child .resource-frame { width: 158.08px; margin-inline: auto; }
  .resource-frame { padding: 3px; border-radius: 10px; }
  .resource-frame img { border-radius: 7px; }
  .resource-caption { margin-top: 8px; letter-spacing: -0.04em; }

  .site-footer { margin-top: -36.4px; padding: 48px 26px 32px; border-radius: 36px 36px 0 0; }
  .boundary-mascot { width: 160px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-nav { gap: 0 10px; }
  .footer-nav a { font-size: 12.48px; line-height: 31.2px; }
}

@media (prefers-reduced-motion: reduce) {
  .recruit-page *,
  .recruit-page *::before,
  .recruit-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

Use a `picture` element inside the hero heading to select an authored mobile composition. Keep the heading's accessible label in either meaningful image alternative text or a single visually hidden text node. Do not duplicate both unnecessarily.

The survey scaffold intentionally uses a fully reachable static mobile list, and company descriptions use a larger recommended mobile size. Their resulting heights differ from the recorded page. The irregular survey silhouettes, exact hero contours, footer artwork, menu behavior and consent implementation require additional assets or application logic.

### Tailwind v4 Token Mapping

Optional aliases for projects already using Tailwind v4. This is not evidence that the original website uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-campaign-yellow: var(--color-yellow);
  --color-campaign-red: var(--color-red);
  --color-campaign-cyan: var(--color-lightblue);
  --color-campaign-purple: var(--color-purple);
  --color-campaign-green: var(--color-green);
  --color-campaign-pink: var(--color-pink);
  --color-campaign-ink: var(--ink);
  --color-campaign-paper: var(--paper);

  --font-display: var(--font-campaign);
  --font-sans: var(--font-body);

  --text-campaign-message: var(--text-message);
  --text-campaign-question: var(--text-question);
  --text-campaign-action: var(--text-action);
  --text-campaign-caption: var(--text-caption);

  --radius-campaign-pill: 999px;
  --radius-campaign-board: var(--board-radius);
  --radius-campaign-resource: var(--resource-radius);
}
```

## Sources & Evidence

- **Original and final website:** [https://graduate26.saiyo.sme.co.jp/](https://graduate26.saiyo.sme.co.jp/). The supplied browser record reports HTTP `200`, the same final URL, and the title `ソニーミュージックグループ新卒採用2026｜種も仕掛けも、キミ次第。`.
- **Capture time:** evidence retrieved at `2026-09-12T19:18:04.217Z`, corresponding to September 13, 2026, 04:18 JST.
- **Desktop evidence:** three original-page captures at `1440 × 1000`, plus rendered text, links, selected element rectangles, computed styles and custom properties. Recorded document height is approximately `6485px`.
- **Mobile evidence:** two original-page captures at `390 × 844`, with the same classes of DOM evidence. Recorded document height is approximately `4552px`.
- **Demonstrated inspection scope:** initial and scrolled settled page views. Link destinations were recorded, but menu, hover, consent, login and destination-page interactions were not exercised in the supplied evidence.
- **Readiness limits:** the browser preparation included document loading, visible image decoding and sampled layout/text stability. Perpetual animations were temporarily paused and then resumed. These checks do not establish semantic completeness, delayed content or the behavior of unexercised controls. Service workers and SharedWorkers were disabled during inspection.
- **Analysis limits:** this reference uses the supplied original-page observations only. No additional browsing or file inspection was performed. Full stylesheets, asset URLs, animation timelines and intermediate responsive widths were not supplied.

The measured tokens document the currently served page. Approximate visual geometry and the reusable CSS are labeled separately so they can guide implementation without being mistaken for recovered source rules.