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 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:

A black-and-white checkerboard at the outer edges.
A substantial black wavy contour.
A cyan contour band.
A broad orange-red field.
A white separator with black linework.
A large yellow inner field carrying the Sony Music Group wordmark.
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.

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

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.”
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.”
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.”
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.”
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.

: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.

@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/. 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.