INTLOOP 20th Anniversary — Style Reference

Twenty years of connection, drawn as blue loops across an open white field.

Website: INTLOOP 20th Anniversary Original URL: https://www.intloop.com/company/history/20th/ Final URL: https://www.intloop.com/company/history/20th/ Theme: light in the supplied captures, with white, pale blue, and saturated blue sections. Inspected: September 13, 2026, 03:25 JST. The supplied retrieval timestamp is September 12, 2026, 18:25:57.351 UTC. Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels. Scope: the current anniversary page: opening composition; measured introductory copy, comment tracks, and submission area; a desktop timeline excerpt; desktop and mobile partner/investment logos and footer. The rendered text also establishes the broader 2005–2025 chronology and related links. Many intermediate sections are documented through DOM evidence rather than screenshots.

INTLOOP’s anniversary page makes the idea of connection visible through concentric circles, interrupted blue bands, and a faint looping trajectory behind its history. The opening is spacious: a compact anniversary identity sits at the center of a much larger geometric field. Small cyan, periwinkle, and fluorescent yellow shapes add celebration without competing with the blue wordmark.

The page then becomes a long company story, combining gratitude, stakeholder messages, milestones, office photographs, service launches, and business relationships. A slim year navigator gives the chronology a persistent reference point. Its desktop arrangement is vertical at the left; on mobile it becomes a horizontal capsule near the bottom. The circular applause control adds a second, more expressive utility. A broad blue arch closes the page and echoes the circular opening.

How to Read This Reference

Measured means a value appears in the supplied rendered DOM or computed-style evidence. Measurements are CSS pixels unless stated otherwise.
Calculated means simple arithmetic from those measurements, such as spacing between successive paragraph rectangles.
Estimated means a visual approximation from the original-page screenshots. Estimated hex colors are reconstruction targets, not sampled or verified stylesheet values.
Recommended means guidance for a new implementation. This includes the CSS adaptation, unverified intermediate breakpoints, and accessibility improvements.
Named tokens are descriptive aliases created for this reference. The supplied custom properties only expose two general font-size presets, 16px and 42px; they do not establish the page’s actual design-token system.
Computed styles are available primarily for the opening, introductory copy, comments, and first form. The timeline and footer have less precise visual evidence.
Screenshots establish appearance at particular moments. They do not establish animation speed, direction, hover outcomes, or successful button actions.

Tokens — Colors

Measured Palette

Name	Value	Suggested token	Confirmed role
White	`#FFFFFF`	`--il-white`	Body background; computed comment text and submit-button text
Identity Blue	`#1764AA`	`--il-blue`	Opening H1, gratitude heading, submit-button fill
Reading Gray	`#434343`	`--il-ink`	Gratitude paragraphs and introductory visitor/comment text
Form Heading Gray	`#444444`	`--il-form-ink`	Form invitation and moderation explanation
Legal Gray	`#5E5E5E`	`--il-muted`	Small reCAPTCHA notice and its links
Utility Gray	`#757575`	`--il-utility`	Computed text color of the underlying Like button

The Like button’s computed text color does not describe the yellow hand artwork. Similarly, transparent backgrounds on sampled paragraphs do not reveal their parent surfaces. Keep those distinctions when translating computed styles into semantic tokens.

Estimated Supporting Palette

These colors are visually important but were not supplied as computed values.

Name	Approximate value	Suggested token	Visual role
History Sky	`#D9EDFC`	`--il-sky`	Broad timeline background
Navigation Navy	`#1D4F70`	`--il-navy`	Year-navigation capsule
Chapter Blue	`#0074DC`	`--il-chapter`	Large listing-era summary panel
Footer Blue	`#2064A6`	`--il-footer`	Curved closing field
Orbit Deep Blue	`#2A50A3`	`--il-orbit-deep`	Dark portions of circular bands
Orbit Cyan	`#55B7DD`	`--il-orbit-cyan`	Lighter band sections
Orbit Ice	`#A2D9EE`	`--il-orbit-ice`	Thin circular segments
Confetti Periwinkle	`#557FF4`	`--il-periwinkle`	Small rotated squares
Confetti Teal	`#04C7C7`	`--il-teal`	Small squares and dots
Confetti Lemon	`#E9FF00`	`--il-lemon`	Sparse bright celebratory accents
Expansion Green	`#58C900`	`--il-expansion`	Visible office-expansion category tab
Closing Canvas	`#FAFAFE`	`--il-soft`	Near-white field around the closing logo panel

Use white and blue for most of the page. Keep the brighter accents small and localized. The green milestone label has a content-classification role; the yellow and teal particles are decorative. Neither establishes a general primary-action color.

The circular artwork contains transitions between blue shades. A CSS gradient is one possible reconstruction method; its use in the original implementation is not established.

Tokens — Typography

Primary Japanese Typeface

Measured family: Yu Gothic Pr6N B.
Measured weight: 700 on the opening H1, gratitude copy, comment paragraphs, form invitation, and submit label.
Character: firm Japanese sans-serif lettering with generous tracking. Much of the editorial copy remains bold even at paragraph sizes.
Role: creates a consistent, clear voice across the commemorative message and participation areas.
Recommended fallback: 'Yu Gothic', system-ui, sans-serif after the measured family name.

The evidence establishes the computed family declaration. It does not independently identify the delivered font file or verify which font rendered every glyph. Supply the named face only when an appropriate font asset and license are available.

Supporting Typeface

Measured family: Yu Gothic Pr6N D.
Measured weight: 600.
Observed uses: email-notification helper text and the reCAPTCHA notice.
Role: a quieter supporting voice at 12px and 10px.

Base and Utility Typography

The body computes to system-ui, sans-serif, 16px, weight 400, with 24px line height. Some form-row wrappers inherit this base. The underlying Like button computes to 14px, weight 600, and 28px line height.

The root HTML element’s Times declaration does not establish visible serif branding: the sampled page content overrides it. The anniversary number, corporate wordmark, and tagline should be treated as supplied artwork, not reconstructed with ordinary text.

Type Scale

All values in this table are measured. Mobile numbers are rounded to three decimal places for readability.

Role	Desktop size / line height	Mobile size / line height	Weight	Desktop / mobile tracking
Opening H1	`14 / 22px`	`13.014 / 21.014px`	700	`1.4 / 1.3px`
Gratitude heading	`44 / 52px`	`23.296 / 31.296px`	700	`8.8 / 4.6px`
Gratitude paragraphs	`19 / 45.6px`	`16.042 / 40.106px`	700	`1.9 / 1.6px`
Visitor/comment introduction	`27px / normal`	`18.127px / normal`	700	`2.7 / 1.8px`
Comment paragraph	`14 / 25.2px`	`14 / 25.2px`	700	`1.4px` at both widths
Form invitation	`27 / 43.2px`	`18.127 / 29.003px`	700	`2.7 / 1.8px`
Moderation explanation	`14 / 25.2px`	`13.014 / 23.425px`	700	`1.4 / 1.3px`
Submit label	`16 / 20.8px`	`14.028 / 18.237px`	700	`0.8 / 0.7px`
Email helper	`12 / 15.6px`	`12 / 15.6px`	600	Normal
Legal notice	`10 / 13px`	`10 / 13px`	600	`0.5px` at both widths

The gratitude paragraphs use unusually open leading: 2.4 on desktop and approximately 2.5 on mobile. This spacing gives the message a deliberate, ceremonial pace. Comment text is denser at 1.8 and keeps the same 14px size on both viewports.

The visible timeline summary heading is approximately 36px, with an approximately 18px paragraph beneath it. The office-event title is approximately 20px, year links approximately 14px, and the footer utility caption approximately 15px. These are screenshot estimates, not extensions of the measured type table.

Tokens — Spacing & Shapes

Density: broad section spacing with compact navigation and smaller information cards. Geometry: concentric circles, interrupted arcs, modestly rounded panels, capsule navigation, and circular utilities.

Measured and Calculated Spacing

Relationship	Desktop	Mobile	Evidence
Opening section height	`1000px`	`844px`	Measured; equals each captured viewport height
Opening H1 top padding	`12px`	`7px`	Computed style
Gratitude text width	`589.609px`	`350px`	Measured paragraph rectangles
Gratitude heading to first paragraph	`32px`	`14px`	Calculated between rectangles
Successive gratitude paragraphs	`50px`	`50px`	Calculated between rectangles
Final gratitude paragraph to visitor introduction	`180px`	`177px`	Calculated between rectangles
Form heading/content region	`664px` wide	`390px` wide	Measured
Form-row region	`530px` wide	`310px` wide	Measured; individual input widths were not supplied
Comment text region	`314px` wide	`225px` wide	Measured paragraph boxes
Comment horizontal pitch	`394px`	`265px`	Calculated between successive paragraph origins
Submit button	`224 × 62px`	`224 × 62px`	Measured

A 394px comment pitch minus a 314px text width leaves 80px distributed among padding and separation. On mobile, that difference is 40px. The data does not establish how the original splits either amount between card padding and track gap.

Border Radius

Element	Value	Status
Submit button	`45px`	Measured CSS radius; visually a capsule at 62px height
Office milestone panel	Approximately `10px`	Estimated
Era summary panel	Approximately `10px`	Estimated
Desktop year navigator	Approximately `32–33px`	Estimated from its 65px width
Mobile year navigator	Approximately `27–28px`	Estimated from its 55px height
Applause and top-arrow artwork	Circular	Observed silhouette
Small confetti squares	Small rounded corners	Observed; exact radius unavailable

The Like button itself computes to a 3.5px border radius. Its circular appearance belongs to the composite control and artwork, so copying only that button radius would not reproduce the visible result.

Layout Measurements

Element	Desktop	Mobile	Status
Header box	`239 × 69px`	`184 × 54.359px`	Measured; includes space around the logo
Opening H1 box	Approximately `236 × 34px`	Approximately `191.094 × 28.019px`	Measured
Opening logo artwork width	Approximately `236px`	Approximately `140px`	Estimated visible artwork bounds
Inner circular guide diameter	Approximately `720px`	Approximately `360px`	Estimated
Outer circular field diameter	Approximately `1340px`	Approximately `670px`	Estimated; portions are clipped
Year-navigation capsule	Approximately `65 × 653px`	Approximately `350 × 55px`	Estimated
Era summary panel	Approximately `577 × 432px`	Not visually supplied	Estimated desktop only
Office milestone panel	Approximately `455 × 142px`	Not visually supplied	Estimated desktop only
Office photograph	Approximately `191 × 112px`	Not visually supplied	Estimated displayed crop
Applause button box	Approximately `108 × 108px`	Approximately `85 × 85px`	Measured
Closing logo panel width	Approximately `1034px`	Approximately `350px`	Estimated
Top-arrow circle	Approximately `60px` diameter	Approximately `60px` diameter	Estimated

These are separate component scales. The phone does not simply display a uniformly reduced desktop page: the circles are roughly halved, the logo shrinks less, and the opening caption changes only slightly.

Components

Opening Anniversary Composition

Role: introduce the anniversary identity before the long narrative.

The first section fills the captured viewport. Its visual center is approximately (720, 500) on desktop and (195, 422) on mobile. A layered 20th-anniversary mark sits above the INTLOOP wordmark and the artwork tagline pay it forward. Beneath the artwork, a fine pale-blue rule separates the small live-text H1, INTLOOP 20周年特設サイト.

Surround this core with several concentric guide circles. Their fine dashed outlines are interrupted visually by thicker blue arc segments with square ends. Different ring diameters and unevenly distributed arc lengths prevent the composition from becoming a uniform target pattern.

Small rotated squares, diamonds, and occasional dots occupy the outer field. Some are crisp; others are blurred and larger, suggesting depth. Keep the immediate area around the logo relatively clear. On phones, allow the circles to extend outside both side edges while preserving the complete central identity.

This is an opening section within the document. The evidence does not establish a temporary loading splash or a required dismiss action.

Compact Brand Header

Role: retain identity while the visitor reads lower sections.

The lower-page screenshots show a small anniversary logo at the upper left, with an unobtrusive white backing area. It is approximately 148px wide on desktop and 116px on mobile, within the larger measured header boxes.

The header is not visibly present in the supplied opening screenshots. Its appearance in lower sections supports state-dependent visibility, but the trigger and exact threshold are unverified. The computed header transition is 300ms ease-in-out.

For an adaptation, place the approved compact logo inside a fixed header and manage its visibility from the opening section’s position. This controller is a recommendation; do not infer a specific original scroll offset.

Gratitude Statement

Role: connect the anniversary to the people who supported the business.

The heading 一緒だから､超えられた｡ leads a sequence of four paragraph groups. Both heading and paragraphs share a centered container but retain a common left alignment within it.

On desktop, that container is approximately 590px wide. The 44px blue heading has substantial 8.8px tracking; the 19px gray paragraphs have 45.6px leading. Each paragraph group is separated by 50px. On mobile, the column becomes 350px wide with 20px side margins. The heading drops to approximately 23.3px, but the paragraph leading remains about 40.1px.

The mobile rendered text contains shorter line groupings, especially in the second and third paragraphs. Preserve meaningful Japanese phrase breaks where appropriate instead of shrinking the entire passage to fit desktop line lengths.

Visitor Introduction and Comment Tracks

Role: make participation visible before the history begins.

The rendered content includes a visitor total and an invitation to read congratulatory messages. The captured text reports 34,694 visitors and a separate applause count of 34,570. These are different metrics and momentary values; neither is a fixed design token.

The element rectangles establish two horizontal comment tracks. On desktop their paragraph origins are around document Y positions 2407.72 and 2656.92; on mobile around 2204.67 and 2468.19. Each track extends well outside the viewport horizontally, and message sequences repeat in the rendered content.

A message item contains congratulatory copy followed by organization and contributor information in the rendered text. The measured message copy is white, bold, 14px, with 25.2px leading and 1.4px tracking. Its text region narrows from 314px to 225px on mobile.

Longer mobile messages grow to approximately 176.4px in paragraph height. Avoid a fixed text height that clips the longest entries. The repeated sequences and offscreen placement are compatible with a looping presentation, but autoplay, direction, dragging, pause behavior, and card-container styling are not established by the supplied evidence.

Message Submission Area

Role: invite visitors to contribute to the anniversary.

The invitation 感謝のループをつなげてみませんか？ is followed by a moderation explanation. The page states that messages appear within 24 hours after approval. This is interface copy, not a tested delivery guarantee.

The rendered form content includes:

Required name, labeled *お名前.
Email address, labeled メールアドレス.
Required message, labeled *メッセージ, with a 90-character limit stated in the copy.
Company name, labeled 会社名.
An email-notification explanation.
The 投稿する submit button and a small reCAPTCHA notice.

The sampled form-row wrappers use flex layout on desktop and block layout on mobile. Their measured widths change from 530px to 310px, supporting a change from horizontal row anatomy to vertically stacked fields. The company field is present in the rendered text but lacks an individual measured rectangle in the sample; its exact visual position should not be inferred from text order alone.

The submit control preserves its 224 × 62px dimensions on mobile. Its fill is exactly #1764AA, with white text and a 45px radius. The form’s parent fill, individual input borders, validation states, and success feedback are not visually established. Its white email helper text should not be copied onto an unspecified white surface.

Story Introduction and Year Structure

Role: explain the chronological reading model.

The rendered story begins with STORY of INTLOOP and an introduction to the company’s twenty-year history. Five named eras organize the narrative:

Source heading	Date range in the page	Narrative role
`創業期`	2005–2008	Founding
`成長期`	2008–2011	Growth
`成長鈍化期`	2011–2014	Slower growth and diversification challenges
`第二創業期`	2014–2019	Renewed concentration and expansion
`上場期`	2020 onward	Listing, service expansion, and rebranding

Fourteen year links point to anchors from #sec_01 through #sec_14: 2005, 2006, 2008, 2011, 2012, 2014, 2017, 2018, 2020, 2021, 2022, 2023, 2024, and 2025. These are selected milestones, not a link for every intervening year.

Year Navigator

Role: provide shortcuts through a very long document.

In the desktop history screenshot, the navigator is a dark blue vertical capsule approximately 38px from the left edge and 80px from the top. Its width is about 65px. Year labels follow an approximately 41px vertical pitch, with a speech-bubble comment shortcut at the bottom.

Most years appear muted blue-gray; one visible year, 2017, appears white. This establishes a visual emphasis state, but the screenshot does not establish how that state is calculated relative to the visible chapter.

On mobile, the navigator becomes a 350 × 55px horizontal capsule, approximately 20px from the left, right, and bottom edges. Only the first few years fit, with the next label partially clipped near the separate comment shortcut. All fourteen anchors remain in the DOM. A horizontally scrollable inner region is a practical implementation, but a swipe was not recorded.

The mobile navigator is visible in both opening and footer captures. The desktop navigator is visible in the history excerpt and absent from the supplied opening and footer frames. Preserve those visibility differences only with an explicitly implemented controller, rather than assuming that one fixed visibility rule matches every state.

Timeline Spine and Background Loops

Role: tie individual business events to a continuous history.

The desktop excerpt uses a pale-blue full-width canvas. A fine vertical dashed spine sits at the viewport center, approximately X = 720px. Behind the content, several extremely faint elliptical loops narrow toward the bottom, forming a loose helix or funnel silhouette.

Visible office cards sit to the left of the central spine. The large era summary spans the center. Other timeline placements are not fully shown, so a complete alternating left/right sequence cannot be verified.

For reconstruction, a 1060px container with two 455px lanes and a 150px central gap reproduces the visible left-card relationship at 1440px. This is a recommended grid model derived from the screenshot, not an observed CSS declaration.

Keep the background loops subordinate to text. They act as continuity artwork, not as chart axes or interactive controls.

Office Milestone Card

Role: present a concrete event within the chronology.

The visible Fukuoka office card is approximately 455 × 142px. Its white panel has modest rounded corners and no conspicuous drop shadow. A dark title sits on the left; an office photograph approximately 191 × 112px sits on the right, with about 15px vertical and 25px right clearance.

A green category tab labeled 拠点拡大 overlaps the upper edge. It is approximately 167 × 41px, extends slightly beyond the card’s left boundary, and uses small centered white text. The title 福岡オフィス設立 remains the event’s main label.

Separate the category tab from the information layout so it can overlap without changing photograph alignment. The photo itself retains rectangular corners. Mobile card anatomy is not visible in the supplied screenshots; any stacking or column reduction is a recommendation.

Era Summary Panel

Role: introduce a major phase of the company story.

The visible 上場期 panel is centered at approximately X = 432px, Y = 450px in the desktop history capture, with a width of 577px and height of 432px. Its saturated blue fill is brighter than the opening heading blue.

The anatomy is simple: a large centered white heading; a smaller centered date line, ( 2020 - ); then a left-aligned white paragraph. Approximately 75px side insets leave a text region around 426px wide. The heading begins roughly 80–90px below the panel’s top edge.

Keep the heading/date group distinct from the body with generous separation. Use a modest radius near 10px. This is a chapter marker, so it should have more space and stronger color than an individual office card.

Retrospectives, Statistics, and Service Links

Role: broaden the timeline beyond dates and office moves.

The rendered chronology includes staff recollections introduced by 当時を振り返って..., contextual explanations, historical headcounts, office-area figures, registration totals, and links labeled サービスリリース. Several recollections link to #comment_form through コメントフォームへ.

This supports a component model with an event heading, narrative copy, optional quantitative fact, optional image, and optional recollection/link. It does not establish the visual treatment of every statistic, testimonial container, or service logo. Avoid inventing charts, accordions, modal stories, or hover cards for these sections.

Business Relationship Logo Panel

Role: close the narrative with the company’s wider network.

A large white panel presents business logos with generous optical spacing. The visible investment subsection uses the heading 主な投資先 between two fine blue dotted rules. Its four logos occupy one row on desktop and two rows of two on mobile.

The visible marks include CUZEN MATCHA, AoyamaLab, STARTUP DEBT FUND, and QXLV. Other business logos appear above. Their original colors and proportions remain intact; they are content assets, not additions to the site’s interface palette.

A small note at the lower right reads 2025年2月時点. Preserve the date’s association with that relationship list. It is separate from the rendered anniversary statistics note referring to the fiscal period ending July 2025, and both are separate from the September 2026 inspection date.

On mobile, the panel has approximately 20px side margins. Use contained images and optical alignment instead of forcing every logo to the same visible width or crop.

Curved Footer

Role: provide a calm closing identity and a route back to the corporate site.

The footer begins with a broad convex blue arch. In the desktop screenshot, the center of the curve rises approximately 140px above its edges; on mobile, the rise is approximately 38px. The shape repeats the opening’s circular vocabulary at a much larger scale.

Center a cyan circle containing a white upward arrow above the caption Go To TOP. The link target is #top. Beneath it sits a white corporate wordmark, followed by the コーポレートサイト link to https://www.intloop.com/, with small vertical separators and an external-link symbol.

The mobile screenshot shows the bottom year navigator overlapping the corporate-site link. Record this as an observed layout issue. A new implementation should reserve enough bottom space that the link can scroll fully above the fixed controls.

Applause Control

Role: offer a persistent celebratory response.

The visible control combines a yellow clapping-hand illustration, a delicate circular outline, and the curved caption Clap Hands. Its measured button box is approximately 108px square on desktop and 85px square on mobile.

The desktop box sits approximately 18px from the right edge and 12px from the bottom. The mobile box sits approximately 20px from the right and 80px from the bottom, just above the year navigator. Artwork can occupy less than the full measured hit area.

The DOM identifies a button with Like text and includes an applause total. No activation was recorded. Do not infer a counter increment, repeat-click allowance, sound, confetti burst, or persistence behavior.

Tokens — Motion & Interaction

Treatment	Evidence	What can be stated	Limitation
Gratitude heading and paragraph transitions	`filter 0.54s, opacity 0.54s, transform 0.54s`	These three properties have 540ms transitions	Start/end values, trigger, and replay behavior are not supplied
Compact header transition	`0.3s ease-in-out`	A 300ms eased transition is declared	The changing property and visibility threshold are unverified
Submit-button transition	`0.3s ease-in-out`	A 300ms transition is declared	Hover and pressed appearance were not captured
Sampled legal links	`0.3s ease-in-out`	A 300ms transition is declared	Destination pages and hover results were not inspected
Opening circular artwork	Static captures	Circular bands and particles are visible	Rotation, parallax, timing, and rendering technology are unverified
Comment presentation	Repeated sequences and horizontal offscreen rectangles	Two horizontal tracks exist	Autoplay, direction, speed, dragging, and pause are unverified
Year navigation	Fourteen explicit fragment links	Anchors target history sections	Scroll animation and active-year algorithm were not tested
Comment shortcuts	Explicit `#comment_form` links	Links target the form	Focus transfer and scroll timing were not tested
Back to top	Explicit `#top` link	A top-of-page destination exists	Smooth scrolling was not tested
Applause	Button and count in rendered content	A response control exists	Activation and persistence were not tested
Message submission	Form text and submit control	Participation and moderation are presented	Validation, submission, email, and approval workflow were not exercised

The sampled elements report no CSS keyframe animation on those individual nodes. That does not establish a static page: motion may belong to ancestors, pseudo-elements, artwork, or scripts outside the sample. A computed transition shown merely as all also does not establish a nonzero animation duration.

Recommended motion approach: retain the measured 540ms reveal-transition duration and 300ms utility-transition duration where useful. Keep decorative motion optional and independent of reading or navigation. Default content to visible so a missing script cannot leave the anniversary message hidden.

Surfaces

Layer	Appearance	Structural purpose	Evidence quality
Opening canvas	White	Gives the logo and rings room	Measured body color and screenshot
Circular guides	Very light dashed outlines	Defines the geometric field	Visual
History canvas	Pale blue	Groups the long chronology	Visual estimate
Background helix	Very faint blue-gray loops	Maintains continuity behind milestones	Visual
Office card	White, modest radius	Separates an individual event	Visual
Era panel	Bright blue, white text	Marks a major narrative phase	Visual
Year navigator	Dark blue capsule	Persistent chronology utility	Visual
Closing relationship panel	White on a near-white field	Presents independent logo artwork	Visual
Footer	Solid blue with a curved upper boundary	Closing identity	Visual
Form and comment containers	Parent fills not established	Participation content	Child styles only

No general elevation system is evident in the supplied screenshots. Panel separation comes from color, spacing, and clear geometry. The soft blur on a few opening particles belongs to the artwork rather than a frosted interface surface.

Imagery

The opening relies on precise geometric artwork and a bespoke anniversary identity. Circles and arc segments visually relate to the company’s loop concept, while small particles make the composition celebratory. Preserve crisp edges on most shapes and use blur sparingly on selected foreground or background particles.

The history excerpt introduces straightforward documentary photography: building exteriors and office interiors. These images provide concrete evidence of business growth. Keep their natural colors and place them in restrained rectangular windows.

Business logos remain in their own visual systems. Use object-fit: contain, adequate clear space, and carefully adjusted maximum dimensions. The footer needs a white corporate logo variant, while the compact header uses the blue anniversary lockup. The applause artwork includes its own illustration and curved lettering; a generic emoji alone will not reproduce it reliably.

Observed Asset References

No image URLs, src values, native image dimensions, or asset filenames were included in the evidence. The following is an inventory of observed artwork, not a downloadable asset manifest.

Artwork	Observed use	Implementation guidance
Main anniversary identity	Opening center	Use approved original artwork with preserved internal proportions
Compact anniversary identity	Upper-left header	Use the compact lockup rather than squeezing the opening stack
Circular bands and confetti	Opening field	SVG or layered CSS is a recommended reconstruction method
Faint elliptical loop artwork	Timeline background	Keep low contrast and outside the text hierarchy
Building and office photographs	Office milestones	Use the corresponding documentary images; preserve the intended crops
Partner and investment marks	Closing logo panel	Contain each mark without recoloring or stretching
White corporate wordmark	Footer	Use an appropriate approved reversed asset
Clapping-hand badge	Floating response control	Preserve illustration, circular line, and curved caption as a coherent asset

Do not assume that an observed graphic is SVG, canvas, video, or an animated image without an asset reference. Those formats are implementation options, not findings.

Layout & Responsive Behavior

Opening and Reading Width

The opening section equals the viewport height in both measured states. Its central alignment persists across desktop and mobile, but the decorative field remains wider than the phone. This creates deliberate side clipping without cutting the logo or H1.

The gratitude column changes from approximately 590px to 350px. Typography adapts by role: the heading nearly halves, body text decreases moderately, and comment text stays at 14px. A single scale transform would fail to reproduce these relationships.

Navigation and Persistent Controls

Desktop chronology navigation uses a narrow left rail. Mobile chronology navigation becomes a bottom capsule containing a partially visible sequence of years and a distinct comment shortcut. The applause button moves above this bottom control.

For an adaptation, use separate layout rules for the two orientations, a scrollable year list, and safe-area-aware bottom offsets. The actual media-query breakpoint and safe-area declarations are not included in the evidence.

Forms and Logos

Form-row wrappers change from flex to block. The heading region becomes full-width on mobile while the field region retains 40px side insets. The submit button maintains its dimensions.

The visible investment-logo group changes from four columns to two. The footer arrow circle stays approximately the same size, while the corporate logo becomes smaller and the blue arch becomes shallower.

Long-Page Structure

Measured document heights are approximately 36,944.31px on desktop and 35,038.86px on mobile. The phone document is slightly shorter despite additional text wrapping. This demonstrates substantial responsive layout changes, but it does not identify every source of the difference.

Treat these heights as capture facts, not layout targets. Let content determine section height. The supplied screenshots do not show the mobile middle chronology, every statistics block, or every later promotional section. Their exact reflow remains unverified.

The capture process traversed scroll positions, but its ability to wait for snap positions does not establish that this website uses CSS scroll snapping.

Do’s and Don’ts

Do

Center a compact anniversary identity inside a much larger circular field.
Preserve white space immediately around the logo and introductory message.
Keep the measured identity blue #1764AA for the confirmed heading and submit roles.
Distinguish pale history backgrounds, vivid chapter panels, and dark navigation surfaces.
Use bold Japanese sans-serif typography with the observed generous leading and tracking.
Preserve 50px spacing between gratitude paragraph groups at both inspected widths.
Keep the chronology’s selected years and explicit anchor destinations.
Use modest white milestone cards with documentary photographs and overlapping category tabs.
Change navigation orientation on mobile and keep the applause control above it.
Preserve independent logo proportions and the footer’s broad convex curve.
Let longer comments grow vertically.
Label reconstructed colors, layouts, and interactions according to their evidence status.

Don’t

Don’t replace the opening’s compact identity with an oversized generic headline.
Don’t scale the entire desktop composition uniformly to fit a phone.
Don’t extend decorative yellow, teal, or category green into unrelated primary actions.
Don’t assign every panel a heavy shadow or glass effect.
Don’t recreate the anniversary wordmark with ordinary typography.
Don’t describe the page as a temporary loader based on its sparse opening.
Don’t infer autoplay or rotational motion from a still image.
Don’t treat visitor and applause totals as the same number or hardcode the captured values.
Don’t invent carousel controls, timeline modals, charts, or form-success screens.
Don’t clip long message text to force identical card heights.
Don’t let mobile fixed controls permanently cover the corporate-site link.
Don’t treat named message contributors or business logos as production credits.

Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the original page.

Use a labeled navigation landmark for the year list and real links for the fourteen section targets. Update aria-current when the active section changes.
Keep all years reachable by keyboard and touch when the mobile list overflows. Reveal the focused or active year within the list without unexpectedly moving the document.
Give the applause button, comment shortcut, and logo links explicit accessible names. Hide purely decorative rings and particles from assistive technology.
Reserve footer space for the bottom navigator and safe-area inset. Check the corporate link at the final scroll position and with text enlargement.
Keep touch targets at least 44px where possible. Small year labels can sit inside larger interactive boxes.
Use a visible focus treatment that remains readable on both white and blue backgrounds.
Provide reduced-motion behavior. If comment autoplay is added, provide a persistent pause mechanism and a way to read every message at rest.
Associate form labels with inputs, indicate required fields semantically, and explain the message limit beside the textarea. Handle Japanese input composition correctly when enforcing a character limit.
Present submission progress, errors, and moderation status as text. Preserve entered content after a recoverable failure.
Verify text contrast against the actual category-green fill and any parent surface behind white helper text.
Provide meaningful alternatives for office photographs and business-logo links. Decorative opening shapes need empty alternatives.
Reserve image dimensions before loading. Keep critical text and anchor navigation usable without decorative animation scripts.

Agent Prompt Guide

Quick Color Reference

Confirmed opening canvas: #FFFFFF.
Confirmed heading and submit blue: #1764AA.
Confirmed gratitude text: #434343.
Estimated timeline background: #D9EDFC.
Estimated year-navigation fill: #1D4F70.
Estimated chapter panel: #0074DC.
Estimated footer field: #2064A6.
Decorative accents: periwinkle, teal, ice blue, and a little fluorescent yellow.
Surface separation: flat fills, white space, fine dotted lines, and restrained corner rounding.

Overall Prompt

“Create a Japanese corporate anniversary and history page using the supplied INTLOOP reference. Begin with a full-viewport white opening, a compact approved anniversary logo at the center, and oversized concentric dashed circles interrupted by blue arc segments. Add sparse rotated periwinkle, teal, and yellow particles, with a few softly blurred shapes. Follow with a narrow gratitude statement in bold Japanese sans-serif type, generous tracking, and unusually open paragraph leading. Build a long history with a pale-blue canvas, a fine central spine, documentary office cards, overlapping category tabs, and larger saturated-blue era summaries. Use a vertical year capsule on desktop and a horizontal bottom capsule on mobile. Finish with contained business logos and a broad blue arched footer. Separate verified measurements from reconstruction choices, and keep unverified motion optional.”

Example Component Prompts

Opening: “Center a compact anniversary identity in a 1440 × 1000 white viewport. Keep its visible artwork around 236px wide, with a 14px blue caption beneath it. Surround it with approximately 720–1340px circular geometry. On a 390 × 844 phone, reduce the artwork to about 140px, keep the caption around 13px, and crop the larger circles at the sides. Circle measurements are estimates.”
Gratitude passage: “Use a centered 589.6px reading column with a left-aligned blue Japanese heading at 44/52px and 8.8px tracking. Set bold gray paragraphs at 19/45.6px with 1.9px tracking and 50px between groups. At 390px, use a 350px column, a 23.3px heading, and approximately 16/40px paragraphs.”
Office event: “Build an approximately 455 × 142px white milestone panel with a 10px radius. Place a Japanese event title at left and a 191 × 112px documentary office photograph at right. Overlap the upper-left edge with a small green category tab labeled 拠点拡大. Use these screenshot dimensions as estimates.”
Era summary: “Create a centered bright-blue panel approximately 576px wide, with a modest radius and about 75px horizontal padding. Stack a large white era heading, a smaller centered date range, and a spacious left-aligned paragraph. Keep the background timeline loops faint.”
Year navigator: “Make a dark-blue capsule with fourteen actual year anchors and a speech-bubble shortcut to the comment form. Use a narrow vertical layout on desktop and a 350 × 55px bottom layout at a 390px viewport. Keep overflowed years accessible, reserve a separate shortcut slot, and expose the current section semantically.”
Closing area: “Place four investment logos in a generous white panel, changing from one four-column row to two columns on mobile. Separate the subsection heading with blue dotted rules. Finish with a blue convex arch, a 60px cyan top-arrow circle, and a white corporate logo. Reserve enough mobile bottom clearance for fixed controls.”
Comments: “Create two horizontal message tracks with bold white 14/25.2px copy. Preserve a 314px desktop text region and 225px phone text region, with variable height for longer messages. Parent fill and padding are reconstruction choices. Do not add autoplay without a pause mechanism.”

Quick Start

CSS Custom Properties

This is a standalone adaptation using a conventional root font size. It combines measured values with explicitly identified visual estimates and recommendations. It has not been executed against the original site.

Use semantic HTML with the following class relationships: .hero contains .orbits and .hero__identity; the identity contains the approved .hero__art image and live .hero__title; .orbits contains the four ring elements. A .timeline__grid contains .milestone and .era-panel components. The year navigator contains .year-nav__years and a separate .year-nav__comment link.

The ring gradients approximate the motif; they do not reproduce the original artwork exactly. Supply approved logos, photographs, hand artwork, and any detailed helix artwork separately. Header visibility, active-year tracking, applause behavior, and form submission require additional implementation.

:root {
  /* Measured colors */
  --il-white: #ffffff;
  --il-blue: #1764aa;
  --il-ink: #434343;
  --il-form-ink: #444444;
  --il-muted: #5e5e5e;

  /* Visual estimates */
  --il-sky: #d9edfc;
  --il-navy: #1d4f70;
  --il-chapter: #0074dc;
  --il-footer: #2064a6;
  --il-soft: #fafafe;
  --il-orbit-deep: #2a50a3;
  --il-orbit-cyan: #55b7dd;
  --il-orbit-ice: #a2d9ee;
  --il-periwinkle: #557ff4;
  --il-teal: #04c7c7;
  --il-lemon: #e9ff00;
  --il-expansion: #58c900;

  /* Measured family names; fallback stack is recommended */
  --il-font: 'Yu Gothic Pr6N B', 'Yu Gothic', system-ui, sans-serif;
  --il-font-support: 'Yu Gothic Pr6N D', 'Yu Gothic', system-ui, sans-serif;

  /* Measured component values */
  --il-reading-width: 589.609px;
  --il-form-width: 664px;
  --il-paragraph-gap: 50px;
  --il-submit-width: 224px;
  --il-submit-height: 62px;
  --il-submit-radius: 45px;
  --il-reveal-time: 540ms;
  --il-control-motion: 300ms ease-in-out;

  /* Recommended geometry based on screenshots */
  --il-panel-radius: 10px;
  --il-orbit-size: 1340px;
  --il-orbit-unit: 1px;
  --il-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.anniversary-page,
.anniversary-page * {
  box-sizing: border-box;
}

.anniversary-page {
  margin: 0;
  color: var(--il-ink);
  background: var(--il-white);
  font-family: var(--il-font);
  font-weight: 700;
}

.anniversary-page img {
  display: block;
  max-width: 100%;
}

.anniversary-page button,
.anniversary-page input,
.anniversary-page textarea {
  font: inherit;
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero__identity {
  position: relative;
  z-index: 1;
  width: 236px;
  text-align: center;
}

.hero__art {
  width: 236px;
  height: auto;
  margin-inline: auto;
}

.hero__title {
  margin: 28px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--il-orbit-ice);
  color: var(--il-blue);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 1.4px;
}

/* Static geometric approximation; mark the container aria-hidden. */
.orbits {
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--il-orbit-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--diameter);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--turn));
}

.orbit-ring::before,
.orbit-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.orbit-ring::before {
  border: 1px dashed #dddddd;
}

.orbit-ring::after {
  background: conic-gradient(
    var(--il-orbit-ice) 0deg,
    var(--il-orbit-deep) 98deg,
    transparent 98deg 215deg,
    var(--il-orbit-cyan) 215deg,
    var(--il-orbit-deep) 274deg,
    transparent 274deg 360deg
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--band)),
    #000 calc(100% - var(--band) + 1px)
  );
}

.orbit-ring--inner {
  --diameter: 54%;
  --band: calc(8 * var(--il-orbit-unit));
  --turn: 30deg;
}

.orbit-ring--middle {
  --diameter: 72%;
  --band: calc(34 * var(--il-orbit-unit));
  --turn: 135deg;
}

.orbit-ring--far {
  --diameter: 89.5%;
  --band: calc(22 * var(--il-orbit-unit));
  --turn: 250deg;
}

.orbit-ring--outer {
  --diameter: 100%;
  --band: calc(22 * var(--il-orbit-unit));
  --turn: 65deg;
}

/* Assign particle positions and colors individually. */
.confetti {
  position: absolute;
  left: var(--x, 15%);
  top: var(--y, 20%);
  width: var(--size, 24px);
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--fill, var(--il-periwinkle));
  transform: rotate(var(--angle, 15deg));
  pointer-events: none;
}

.confetti--soft {
  filter: blur(5px);
}

.brand-header {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 239px;
  height: 69px;
  background: var(--il-white);
  transition: opacity var(--il-control-motion);
}

.brand-header[hidden] {
  display: none;
}

.brand-header img {
  width: 148px;
  height: auto;
}

.intro {
  width: min(calc(100% - 40px), var(--il-reading-width));
  margin: 209px auto 180px;
}

.intro h2 {
  margin: 0 0 32px;
  color: var(--il-blue);
  font-size: 44px;
  line-height: 52px;
  letter-spacing: 8.8px;
}

.intro p {
  margin: 0;
  font-size: 19px;
  line-height: 2.4;
  letter-spacing: 1.9px;
}

.intro p + p {
  margin-top: var(--il-paragraph-gap);
}

/* Content remains visible unless a separate controller changes it. */
.reveal {
  transition:
    filter var(--il-reveal-time),
    opacity var(--il-reveal-time),
    transform var(--il-reveal-time);
}

/* Recommended container fill and spacing split; text width is measured. */
.comment-track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  padding: 8px 20px;
}

.comment-card {
  flex: 0 0 354px;
  padding: 20px;
  border-radius: var(--il-panel-radius);
  color: var(--il-white);
  background: var(--il-blue);
}

.comment-card p {
  min-height: 100px;
  margin: 0;
  font-size: 14px;
  line-height: 25.2px;
  letter-spacing: 1.4px;
  overflow-wrap: anywhere;
}

/* Input appearance is recommended; original input styles were not sampled. */
.comment-form {
  width: min(100%, var(--il-form-width));
  margin: 100px auto;
}

.comment-form h2 {
  margin: 0;
  text-align: center;
  font-size: 27px;
  line-height: 1.6;
  letter-spacing: 2.7px;
}

.comment-form__fields {
  width: min(calc(100% - 80px), 530px);
  margin: 48px auto 0;
}

.form-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-block: 16px;
}

.form-row input,
.form-row textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--il-blue);
  border-radius: 4px;
  color: var(--il-ink);
  background: var(--il-white);
  font-size: 16px;
}

.form-row textarea {
  min-height: 120px;
  resize: vertical;
}

.form-help {
  color: var(--il-muted);
  font-family: var(--il-font-support);
  font-size: 12px;
  line-height: 1.6;
}

.submit-button {
  display: grid;
  place-items: center;
  width: min(100%, var(--il-submit-width));
  height: var(--il-submit-height);
  margin: 40px auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--il-submit-radius);
  color: var(--il-white);
  background: var(--il-blue);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background-color var(--il-control-motion);
}

/* Recommended grid based on the visible desktop milestone. */
.timeline {
  position: relative;
  padding: 120px 20px;
  background: var(--il-sky);
}

.timeline::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 50%;
  border-left: 1px dashed #b8ccd8;
  pointer-events: none;
}

.timeline__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 128px 150px;
  max-width: 1060px;
  margin-inline: auto;
}

.milestone {
  position: relative;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 191px;
  align-items: center;
  gap: 24px;
  min-height: 142px;
  padding: 15px 25px;
  border-radius: var(--il-panel-radius);
  background: var(--il-white);
}

.milestone h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.milestone img {
  width: 100%;
  aspect-ratio: 191 / 112;
  object-fit: cover;
}

.milestone__category {
  position: absolute;
  left: -6px;
  top: -23px;
  display: grid;
  place-items: center;
  width: 167px;
  min-height: 41px;
  border-radius: 3px;
  color: var(--il-navy);
  background: var(--il-expansion);
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* Dark category text is a recommended contrast adjustment. */
.era-panel {
  grid-column: 1 / -1;
  width: min(100%, 576px);
  min-height: 432px;
  margin-inline: auto;
  padding: 80px 75px;
  border-radius: var(--il-panel-radius);
  color: var(--il-white);
  background: var(--il-chapter);
}

.era-panel h2 {
  margin: 0;
  text-align: center;
  font-size: 36px;
  line-height: 1.35;
  letter-spacing: 0.2em;
}

.era-panel__range {
  margin: 8px 0 28px;
  text-align: center;
  font-size: 16px;
}

.era-panel__body {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.year-nav {
  position: fixed;
  left: 38px;
  top: 80px;
  z-index: 30;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 65px;
  max-height: calc(100svh - 100px);
  padding: 20px 8px;
  border-radius: 999px;
  background: var(--il-navy);
}

.year-nav__years {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.year-nav__years a {
  display: grid;
  place-items: center;
  min-height: 40.6px;
  color: #b2cede;
  font: 400 14px/1.3 system-ui, sans-serif;
  text-decoration: none;
}

.year-nav__years a[aria-current='location'] {
  color: var(--il-white);
  font-weight: 700;
}

.year-nav__comment {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  margin-inline: auto;
}

.year-nav__comment img {
  width: 30px;
}

.clap {
  position: fixed;
  right: 18px;
  bottom: 12px;
  z-index: 40;
  width: 108px;
  height: 108px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--il-white);
  cursor: pointer;
}

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

.relationship-panel {
  width: min(calc(100% - 40px), 1034px);
  margin-inline: auto;
  padding: 48px 32px 30px;
  border-radius: var(--il-panel-radius);
  background: var(--il-white);
}

.relationship-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  letter-spacing: 0.1em;
}

.relationship-heading::before,
.relationship-heading::after {
  content: '';
  flex: 1;
  border-top: 1px dotted var(--il-blue);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 48px;
  max-width: 700px;
  margin: 48px auto;
}

.logo-grid img {
  width: 100%;
  height: 60px;
  object-fit: contain;
}

/* Elliptical cap approximates the observed closing curve. */
.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: 328px;
  padding: 8px 20px 44px;
  text-align: center;
  color: var(--il-white);
  background: var(--il-footer);
}

.site-footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -140px;
  left: 0;
  width: 100%;
  height: 280px;
  border-radius: 50%;
  background: var(--il-footer);
}

.to-top {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: max-content;
  margin-inline: auto;
  color: inherit;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.to-top__circle {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #008dbb;
}

.footer-brand {
  width: 168px;
  margin: 34px auto 0;
}

.corporate-link {
  display: inline-block;
  margin-top: 32px;
  padding-inline: 20px;
  border-inline: 1px solid #8dbde0;
  color: inherit;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.1em;
}

/* Recommended focus treatment on light and dark surfaces. */
.anniversary-page :focus-visible {
  outline: 3px solid var(--il-blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--il-white);
}

.anniversary-page [id] {
  scroll-margin-top: 90px;
}

/* Recommended breakpoint; only 390px and 1440px were inspected. */
@media (max-width: 767px) {
  :root {
    --il-orbit-size: 670px;
    --il-orbit-unit: 0.5px;
  }

  .hero__identity { width: 191px; }
  .hero__art { width: 140px; }
  .hero__title {
    margin-top: 18px;
    padding-top: 7px;
    font-size: 13.014px;
    line-height: 21.014px;
    letter-spacing: 1.3px;
  }

  .brand-header { width: 184px; height: 54.36px; }
  .brand-header img { width: 116px; }

  .intro { margin-block: 136.5px 177px; }
  .intro h2 {
    margin-bottom: 14px;
    font-size: 23.296px;
    line-height: 31.296px;
    letter-spacing: 4.6px;
  }
  .intro p {
    font-size: 16.042px;
    line-height: 2.5;
    letter-spacing: 1.6px;
  }

  .comment-track { gap: 20px; }
  .comment-card { flex-basis: 245px; padding: 10px; }
  .comment-card p { min-height: 120px; }

  .comment-form h2 {
    font-size: 18.127px;
    line-height: 1.6;
    letter-spacing: 1.8px;
  }
  .form-row { grid-template-columns: 1fr; gap: 8px; }
  .submit-button { font-size: 14.028px; letter-spacing: 0.7px; }

  /* Mobile middle-history layout is a recommendation. */
  .timeline__grid { display: block; }
  .milestone, .era-panel { margin-bottom: 72px; }
  .milestone {
    grid-template-columns: minmax(0, 1fr) 44%;
    gap: 16px;
    padding: 16px;
  }
  .milestone h3 { font-size: 16px; }
  .era-panel { min-height: 0; padding: 40px 24px; }
  .era-panel h2 { font-size: 28px; }
  .era-panel__body { font-size: 16px; }

  .year-nav {
    inset: auto 20px calc(20px + var(--il-safe-bottom));
    display: flex;
    align-items: center;
    gap: 4px;
    width: auto;
    height: 55px;
    padding: 0 16px;
  }
  .year-nav__years {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow: auto hidden;
  }
  .year-nav__years li { flex: 0 0 65px; }
  .year-nav__years a { min-height: 44px; }
  .year-nav__comment { flex: 0 0 44px; }

  .clap {
    right: 20px;
    bottom: calc(80px + var(--il-safe-bottom));
    width: 85px;
    height: 85px;
  }

  .relationship-panel { padding-inline: 12px; }
  .relationship-heading { gap: 10px; }
  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
  }

  .site-footer {
    margin-top: 96px;
    padding-top: 4px;
    padding-bottom: calc(110px + var(--il-safe-bottom));
  }
  .site-footer::before { top: -38px; height: 76px; }
  .footer-brand { width: 134px; margin-top: 44px; }

  .anniversary-page [id] { scroll-margin-top: 70px; }
}

@media (hover: hover) {
  /* Recommended feedback; original hover colors were not captured. */
  .submit-button:hover { background: var(--il-navy); }
  .year-nav__years a:hover { color: var(--il-white); }
}

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

The sample deliberately leaves decorative rings static and comment tracks manually scrollable. Any additional animation should be specified and tested separately. The mobile footer includes extra bottom clearance, and category text uses dark blue, as recommended adjustments to the captured presentation.

Tailwind v4 Token Mapping

Optional aliases for an implementation that already uses Tailwind v4. Define the custom properties above first. This mapping does not imply that the original page uses Tailwind.

@theme inline {
  --color-anniversary-blue: var(--il-blue);
  --color-anniversary-ink: var(--il-ink);
  --color-history-sky: var(--il-sky);
  --color-history-navy: var(--il-navy);
  --color-history-chapter: var(--il-chapter);
  --color-anniversary-footer: var(--il-footer);
  --color-orbit-cyan: var(--il-orbit-cyan);
  --color-confetti-lemon: var(--il-lemon);

  --font-anniversary: var(--il-font);
  --font-anniversary-support: var(--il-font-support);

  --spacing-reading: var(--il-reading-width);
  --spacing-paragraph: var(--il-paragraph-gap);
  --spacing-submit: var(--il-submit-width);

  --radius-history-panel: var(--il-panel-radius);
  --radius-anniversary-submit: var(--il-submit-radius);
}

Sources & Evidence

Inspected original and final page: INTLOOP 20th Anniversary. Both supplied URLs are identical; the supplied HTTP status is 200.
Capture session: September 12, 2026, 18:25:57.351 UTC, equivalent to September 13, 2026, 03:25:57.351 JST. The anniversary content refers to 2025; the inspected presentation is the one supplied from the 2026 session.
Desktop evidence: 1440 × 1000 viewport; screenshots of the opening, a history excerpt around office expansion and the listing-era summary, and the closing business-logo/footer area. Computed document height: 36,944.3125px.
Mobile evidence: 390 × 844 viewport; screenshots of the opening and closing logo/footer area. Computed document height: 35,038.859375px.
Rendered DOM and computed styles: title, page text, explicit link destinations, element rectangles, colors, family declarations, sizes, weights, leading, tracking, selected spacing, radii, and transition strings. Individual input styles and most later-section computed styles were not included.
Interaction evidence: fragment destinations for year sections, the comment form, and page top; a Like button; a submit button; business, corporate, recruitment, contact, and sharing links. Button outcomes and external destinations were not exercised in the supplied evidence.
Readiness limitations: the capture process waited for document loading, image decoding, and sampled layout stability, with finite-motion checks. Perpetual animations were paused during readiness checks and resumed. These procedures do not establish motion timing, complete delayed content, or untested interaction states. SharedWorkers and service workers were disabled during inspection.
Analysis boundary: this reference uses the supplied original-page captures and rendered evidence. No additional browsing, commands, file inspection, or runtime CSS testing was performed. All visual estimates and recommended adaptations are identified above.