ALGO ARTIS — Style Reference

Industrial reality arranged inside an electric-blue ellipse, with fine horizontal lines extending into open space.

Website: ALGO ARTIS Original URL: https://www.algo-artis.com/ Final URL: https://www.algo-artis.com/ Theme: light main canvas with a saturated blue contact area and footer; no selectable theme was demonstrated. Inspected: September 12, 2026, through the supplied browser evidence retrieved at 07:28:08.786 UTC / 16:28:08.786 JST. Viewports: 1440 × 1000 desktop and 390 × 844 mobile. Measured document widths were 1425px and 375px respectively, excluding the 15px scrollbar gutter. Scope: the current Japanese corporate homepage. Visual captures cover the desktop hero, service diagram and footer, plus the mobile hero and footer. Rendered DOM and computed-style evidence cover the intervening homepage sections. Linked pages, open navigation states, filter results and form flows were not inspected.

ALGO ARTIS combines a restrained corporate information structure with a distinctive industrial composition. Rail transport, factories, storage tanks, container shipping and people working on site appear inside a tilted elliptical collage. Blue horizontal traces pass through and around the imagery, sometimes becoming triangular, circular or rectangular fragments. The relationship between photographs and linework makes the abstract subject of planning optimization tangible.

The interface surrounding this artwork is orderly: dark Japanese sans-serif text, small blue section labels, larger English section names, modestly rounded rectangular buttons and substantial vertical space. The homepage introduces the business, explains its impact, routes visitors to services and company information, publishes news, and provides recruitment and contact entry points. Its structure is a corporate navigation hub with several visitor journeys.

How to Read This Reference

Measured values come from the supplied rendered DOM, element rectangles and computed styles. Values are rounded where additional precision would not be useful.
Declared values are source custom properties. Their presence does not prove that every visible component uses them.
Estimated values describe screenshot geometry or appearance where a corresponding computed value was not supplied.
Recommended values and behaviors belong to a reusable implementation. They are not claims about the original site.
Source rem values use a measured 10px root at both inspected viewports. The Quick Start converts relevant values to pixels and leaves the application root size unchanged.
Some navigation descendants have measurable rectangles even though the captures show the menu closed. These records establish available structure, not an observed open state.
The hero statement is visible in the screenshots, but its sampled paragraph wrappers have empty extracted text. Their computed typography is documented as wrapper styling; the exact rendered text mechanism and accessible representation remain unverified.

Tokens — Colors

Default Palette

Name	Value	Evidence / suggested alias	Role
Action Blue	`#0031D3`	Measured button, link and footer colors; `--color-action`	Primary buttons, menu control, section labels, active indicators and footer base
Identity Navy	`#002F71`	Source `--mh--color--ci`; measured logo container color; `--color-brand`	Header identity and darker brand details
Main Ink	`#2C2C2C`	Source `--mh--color--grayscale-900`; measured body text; `--color-ink`	Headlines, navigation and article titles
Secondary Ink	`rgba(71, 71, 71, .9)`	Source `--mh--color--grayscale-800`; measured prose; `--color-muted`	Explanatory text and hero supporting copy
Cool Surface	`#F6F9FB`	Source `--mh--color--surface-500`; `--color-canvas`	Available pale surface token; recommended base for reproducing the light field
White	`#FFFFFF`	Source grayscale token and measured contact-button fill	Reversed footer text, white contact button and the visually white news surface
Selected Mist	`rgba(201, 225, 242, .3)`	Source `--mh--color--surface-600`; measured selected news filter	Quiet selection fill without a strong border
Fine Gray	`#D9D9D9`	Source `--mh--color--grayscale-400`; `--color-rule`	Available separator color; fine rules are visible in the captures
Footer Supporting White	`rgba(255, 255, 255, .8)`	Measured contact prose	Secondary explanation against blue
Footer Quiet White	`rgba(255, 255, 255, .5)`	Measured location note and copyright wrapper	Low-emphasis footer metadata
Contact Label Gray	`#CCCCCC`	Measured contact section label	Small section label inside the blue contact region

The light canvas has a fine grain in the captures. The sampled body background is transparent, so #F6F9FB should not be described as a measured body fill. It is a declared surface token and a useful implementation starting point. The texture asset, overlay method and opacity were not supplied.

Likewise, the footer looks subtly varied rather than optically flat, while its measured base background is exactly #0031D3. Preserve that distinction between the underlying color and the final textured appearance.

Supporting Blue Tokens

Source token	Value	Interpretation
`--mh--color--primary-100`	`#E5EEFF`	Pale supporting blue
`--mh--color--primary-200`	`#B5CAF3`	Light supporting blue
`--mh--color--primary-300`	`#5384E4`	Mid-blue supporting tone
`--mh--color--primary-400`	`#0A50D8`	Strong secondary blue
`--mh--color--hover-300`	`#1D81DD`	Declared hover-related color; application to a particular hovered component was not demonstrated

The service diagram visibly uses pale blue fields and several blue icon tones. Exact assignments of these tokens to its artwork were not recorded. The primary-400 token is also distinct from the measured Action Blue used by buttons and the footer.

Other declared category and error colors are omitted from the visual palette because the supplied captures do not establish them as prominent homepage treatments.

Tokens — Typography

Japanese Interface and Prose

Declared and computed stack: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", meiryo, sans-serif.
Typical weights: 400 for navigation and prose, 700 for Japanese section labels and prominent statements.
Default tracking: 0.02em.
Default leading: 1.9; the About prose expands to 2.1.
Character: direct, legible and substantial without using decorative display lettering for the ordinary interface.

The browser reports the family stack, not a per-glyph font-resolution audit. Preserve the stack and fallbacks rather than assuming every Japanese glyph was rendered by its first family.

Latin Utilities

Inter, sans-serif is explicitly computed for the English language link, dates, ticker label and Page Top link. These use weight 600 and generally 0.01em tracking. A Japanese ticker label also has this computed stack; its Japanese glyphs may use a fallback.

The logo is supplied brand artwork. Its lettering should not be recreated by typing the company name in either interface font. The HTML element’s inherited font size does not define the artwork’s letterforms.

Type Scale

Values below are measured unless explicitly marked as estimates. Size and line height are shown in pixels.

Role	Desktop size / line height	Mobile size / line height	Weight / tracking
Base interface	`15.44 / 29.336`	`15 / 28.5`	`400`, `0.02em`
Hero statement wrapper	`79.5 / 103.35`	`30 / 39`	`700`, `0.02em`
Hero summary wrapper	`21.167 / 31.75`	`10 / 15`	`700`, `0.02em`
Japanese section label	`15.44 / 23.16`	`15 / 22.5`	`700`, `0.02em`
English section display title	Not isolated in the supplied computed records	Approximately `36–38px` in the visible About heading	Screenshot estimate; exact family and weight not isolated
About lead statement	`33.6 / 50.4`	`24 / 36`	`700`, `0.02em`
About prose	`17.88 / 37.548`	`14 / 29.4`	`400`, `0.02em`
Service / Company lead	`28.4 / 42.6`	`21 / 31.5`	`700`, `0.02em`
Service / Company prose	`17.88 / 33.972`	`16 / 30.4`	`400`, `0.02em`
Impact prose	`17.88 / 33.972`	`15 / 28.5`	`400`, `0.02em`
Career statement	`33.6 / 50.4`	`21 / 31.5`	`700`, `0.02em`
Company destination title	`22.64 / 33.96`	`17 / 25.5`	`700`, `0.02em`
Ticker label	`19.32 / 23.184`	`14 / 16.8`	`600`, `0.01em`
Ticker date	`14 / 16.8`	`12 / 14.4`	`600`, `0.01em`
Ticker article title	`15.44 / 23.16`	`13 / 19.5`	`400`, `0.02em`
Main news-list date	`10 / 12`	`12 / 14.4`	`600`, `0.01em`
Main news-list title	`14 / 21`	`14 / 21`	`400`, `0.02em`
Main footer links	`17.88 / 26.82`	`16 / 24`	`400`, `0.02em`
Nested footer links	`11 / 20.9`	`13 / 24.7`	`400`, `0.02em`
Page Top	`15.44 / 18.528`	`15 / 18`	`600`, `0.01em`

Some utility text becomes larger on mobile: main news dates increase from 10px to 12px, and nested footer links from 11px to 13px. Responsive behavior is component-specific rather than a uniform shrinking of the desktop scale.

Source Fluid Sizes

Representative source formulas, converted using the measured 10px root:

Source token	Desktop formula in pixels	At 1440px viewport	Mobile override
`--mh--font-size--md`	`clamp(15px, .1vw + 14px, 16px)`	`15.44px`	`15px`
`--mh--font-size--lg`	`clamp(16px, .2vw + 15px, 18px)`	`17.88px`	`16px`
`--mh--font-size--xl`	`clamp(17px, .3vw + 15px, 20px)`	`19.32px`	`17px`
`--mh--font-size--x3l`	`clamp(19px, .6vw + 14px, 26px)`	`22.64px`	`19px`
`--mh--font-size--x5l`	`clamp(21px, 1vw + 14px, 32px)`	`28.4px`	`21px`
`--mh--font-size--x7l`	`clamp(24px, 1.5vw + 12px, 41px)`	`33.6px`	`24px`

Component overrides still apply. For example, the mobile company destination title measures 17px despite its desktop value matching the x3l formula. The hero’s measured wrapper size should also be retained separately instead of assigning it to a similarly named global token without evidence.

Tokens — Spacing & Shapes

Density: compact navigation and article metadata within a spacious page. Geometry: small rectangular corner radii for controls; large ellipse and line-based geometry reserved for imagery.

Responsive Spacing

Many desktop spacing properties interpolate between 768px and 1920px:

/* Source interpolation pattern; a and b represent numeric endpoints. */
max(a * 1px, min(
  calc((b - a) / (1920 - 768) * (100vw - 768px) + a * 1px),
  b * 1px
))

This block illustrates the formula rather than providing a directly executable variable implementation. Mobile evidence contains explicit fixed overrides. The interpolation endpoints do not independently prove the site’s media-query breakpoint.

Source spacing token	Desktop range	Calculated at 1440px	Observed mobile value
`--mh--space--x4s`	`5–10px`	`7.92px`	`5px`
`--mh--space--x3s`	`10–20px`	`15.83px`	`10px`
`--mh--space--x2s`	`15–30px`	`23.75px`	`15px`
`--mh--space--xs`	`20–40px`	`31.67px`	`20px`
`--mh--space--sm`	`30–60px`	`47.5px`	`30px`
`--mh--space--md`	`40–80px`	`63.33px`	`40px`
`--mh--space--lg`	`50–100px`	`79.17px`	`50px`
`--mh--space--xl`	`60–120px`	`95px`	`60px`
`--mh--space--x3l`	`80–160px`	`126.67px`	`80px`
`--mh--space--60-160`	`60–160px`	`118.33px`	`60px`

These values describe the available rhythm. Individual section offsets can combine multiple spaces and should be checked against component measurements.

Content Widths and Insets

Property	Source value	Inspected result
Standard content width	`1100px`	Declared cap; not the homepage’s universal width
Middle width	`1360px`	Declared cap
Wide width	`1620px`	Declared cap
Wider width	`1720px`	Declared cap
Standard side padding	`clamp(20px, 12.718px + 1.942vw, 50px)`	Approximately `40.68px` desktop and `20.29px` mobile
Narrow side padding	`clamp(15px, 8px + 1.942vw, 50px)`	Approximately `35.96px` desktop and `15.57px` mobile
Typical main content span	Element measurements	`1343.66px` desktop and `334.44px` mobile

Use the broader homepage span for diagrams and section layouts. Constraining everything to the declared 1100px content token would materially change the observed composition.

Layout Measurements

Element	Desktop	Mobile	Evidence
Initial header	`100px` high	`63px` high	Measured
Header logo artwork box	`195 × 29.81px`	`160 × 24.45px`	Measured
Menu button	`80 × 50px`, `4px` radius	`60 × 32px`, `2px` radius	Measured
Header contact button	`149.16 × 50px`, `4px` radius	Absent from the closed-header capture	Measured / visual
Standard section action	`323.33 × 70px`, `4px` radius	`320 × 60px`, `2px` radius	Measured
Footer contact action	`323.33 × 70px`	`314.56 × 60px`	Measured; narrower mobile parent
Hero news container	Approximately `1353 × 73px`	Approximately `345 × 104px`	Screenshot estimate
About destination card	`400 × 377.14px`	`334.44 × 153.89px`	Measured
Impact linked region	`1343.66 × 755.59px`	`334.44 × 188.06px`	Measured; approximately `16:9`
Company section radius	`10px`	`5px`	Measured
General large-radius token	`16px` at this viewport	`8px`	Declared; distinct from company radius

No prominent card-shadow system is visible. Separation comes mainly from whitespace, pale fills, fine rules and blue-to-white contrast.

Components

Persistent Header

Role: identity, primary navigation and access to contact and the full menu.

The desktop header is a horizontal band with the navy logo at the left and navigation concentrated toward the right. Its measured initial height is 100px, with approximately 36px side insets. Navigation text is 15.44px with generous line height.

The visible sequence includes an About disclosure, service link, Company disclosure, recruitment, news, language choices, a blue contact button and a blue hamburger button. About and Company use small blue downward chevrons. The service link carries a small external-destination symbol.

The contact and menu controls share a 50px height and 4px radius, separated by about 12px. Language choices sit on a much quieter pale surface. This creates three levels of emphasis: ordinary text navigation, subdued language selection, and solid blue actions.

On mobile, the closed header shows the 160px-wide logo and a 60 × 32px blue menu control. The desktop navigation, language choices and contact button are not visible in that captured state.

The desktop header remains visible in scrolled captures and appears approximately 80px high there; this compact height is a visual estimate. In the mobile footer capture, the menu control remains at the upper right while the logo and light header band are absent. Exact positioning rules, scroll thresholds and state triggers were not supplied.

Navigation Disclosures and Full Menu — DOM Evidence Only

The DOM includes the About and Company sublinks, plus another navigation structure with English and Japanese labels, social links and legal links. Desktop rectangles arrange this additional structure across several columns; mobile rectangles arrange destinations vertically.

The menu’s Japanese destination headings measure 36.92px on desktop and 25px on mobile. These are menu-content measurements, not measurements of the main page’s English section titles.

The captures do not show the menu open. Opening direction, backdrop, focus handling, body scroll locking and dismissal behavior remain unverified. A new implementation should define those behaviors explicitly rather than deriving them from hidden descendant coordinates.

Hero Composition

Role: connect a high-level company statement to recognizable industrial work.

The desktop hero contains three main layers:

A pale, finely textured field with a thin rule beneath the header.
A large blue photographic collage, approximately spanning x=595–1330 and y=125–860 in the screenshot, inside a tilted elliptical boundary.
A large dark statement at the lower left, supported by a smaller gray line and a white news strip near the bottom.

The visible statement is:

複雑さを、社会を支える力へ。

Its wrapper begins at x=87.20, y=613.52 on desktop. The supporting line begins around y=825.25. Text overlaps the broader artwork region, but the collage composition leaves enough light space to preserve the statement’s visual weight.

Horizontal blue traces extend far beyond the photographs. Some are isolated long strokes; others form dense striped fields. A striped triangle appears toward the upper middle, while circular and rectangular striped fragments balance the lower right. The traces are part of a composed visual system, not a uniform full-page stripe pattern.

On mobile, the collage moves into the upper portion of the page and the statement begins at x=20, y=391.94. The photographic portion sits approximately between x=83–360 and y=83–355, with linework extending beyond it. The two-line statement uses a measured 30px wrapper size. Supporting copy follows at y=483.33.

The mobile hero is therefore recomposed around artwork first and text below. Simply shrinking the desktop overlap would not reproduce it.

Hero News Strip

Role: surface a small selection of current announcements without competing with the hero statement.

The desktop treatment is a low white rounded strip inset approximately 36px from the document edges. Its anatomy is:

A bold news label, with a short vertical separator.
A date in Inter.
A compact blue outlined category badge such as PRESS.
A single article title and a thin right arrow.
A fractional item count at the far right, with the current number in blue.

The article link uses a measured 15px horizontal gap between its main metadata pieces. The white container has an estimated 10px radius and no obvious shadow.

The mobile version becomes a compact two-level card with approximately 15px outside margins. The label and counter occupy the top row, followed by a thin horizontal rule. The date and badge sit above a single-line truncated title; the arrow has its own trailing slot. The measured article grid is 293px 18px, with a 4px gap.

Three announcement links occupy the same ticker coordinates in the DOM. The desktop capture displays item 2 / 3, and the mobile capture displays 3 / 3. This establishes multiple item states, but does not establish autoplay timing, manual controls or swipe support.

Section Heading Pair

Role: keep the page easy to scan across Japanese and English labels.

A small blue Japanese label is preceded by a slanted blue oval or lozenge. A much larger English section name follows underneath. The mobile About capture makes this relationship particularly clear: the Japanese label sits around y=747, followed by the dark About us title around y=780.

The Japanese label starts 30px beyond the section’s content edge on desktop and 20px beyond it on mobile, leaving room for the marker. The marker’s exact dimensions were not measured; a roughly 10–12px decorative lozenge is a reasonable starting estimate.

The recurring section names are About us, Our Impact, Service, Company, News, Career and Contact. Keep the small Japanese identifier and the larger English display title as distinct typographic roles.

About Narrative and Destination Cards

Role: explain the company’s approach before routing visitors deeper into the site.

On desktop, the main statement occupies a left column beginning at x=40.67, while four prose paragraphs occupy a 605px-wide right column beginning at x=779.33. The measured gap between columns is approximately 47.5px. The lead uses 33.6px bold text; prose uses 17.88px text with 2.1 leading.

The lead paragraph has a tall layout box. That box should not be mistaken for hundreds of pixels of rendered headline text. Its visible content is a short statement, while the adjacent prose supplies the vertical reading density.

On mobile, the statement and prose share a 334.44px-wide column. A 40px gap separates the lead’s bottom from the first prose paragraph. Prose uses 14px type with 29.4px line height, and paragraph gaps measure about 15px.

Two destination cards follow: 私たちの理念 and 事業から見る ALGO ARTIS. They sit side by side on desktop, each 400px wide, with about 15.83px between them. Mobile stacks them with a 10px gap and considerably reduces their height. Internal padding changes from approximately 17.92px to 15px, and their recorded row gap changes from 63.33px to 12px.

The card interiors are not visible in the supplied captures. Their exact imagery and surface layers should not be inferred from the link names.

Impact Feature

Role: introduce the company’s report on social and economic value.

The section combines the recurring heading pair, explanatory prose and one large linked region. That region measures approximately 16:9 at both inspected sizes: 1343.66 × 755.59px on desktop and 334.44 × 188.06px on mobile.

Its destination is present in the DOM, but its artwork is not shown in the supplied visual captures and no media asset path was provided. Preserve the large landscape format without assuming a video player, report-cover design or playback controls.

Service Explanation and Actions

Role: explain planning optimization across supply chains and social infrastructure.

The desktop introductory region places a 972.83px-wide text column beside two stacked 323.33px-wide blue actions. The text uses a bold 28.4px lead and 17.88px supporting prose. Actions are 70px high, with an approximately 7.91px gap.

Each action is a grid with 20px horizontal padding, a flexible label, about 17.92px of spacing and a 41px trailing icon region. A short vertical divider separates the icon region. The case-study button’s external-destination symbol is visible in the service capture.

On mobile, both actions measure 320 × 60px, are centered within the 375px document, and are separated by 10px. DOM positions put them farther down the section after the introductory copy. The precise mobile diagram composition was not captured.

Service Diagram

Role: present the company as the central planning layer across two groups of industries.

The desktop diagram is a broad fan or semicircle, visually about 1340px wide. Pale blue sectors flank a central white circular hub containing the logo and the label 計画業務の最適化. Horizontal blue traces fill the upper central sector and continue through the narrow lower center.

The left sector groups four blue pictograms in a loose two-by-two arrangement: procurement, production, logistics and sales. A blue bar below labels this group サプライチェーン領域.

The right sector groups five pictograms: transportation, energy, telecommunications, public services and construction. A matching blue bar labels it 社会インフラ領域.

The organization of sectors, central hub and bottom category bars is more important than any individual icon style. Preserve the diagram’s explanatory hierarchy and pale-to-strong blue contrast. A generic network of connected nodes would communicate a different structure.

Company Destination List

Role: route visitors to company information, awards, members and columns.

The desktop section is inset approximately 30.45px from the document edges and has a measured 10px radius. Its lead and destination list occupy a left region approximately 620.55px wide. Other visual content in the section cannot be characterized from the supplied captures.

Each destination row has three measured columns: a 110px leading slot, a flexible 424.22px label region and a 23px trailing slot, with approximately 23.75px gaps. Japanese destination names are bold at 22.64px, accompanied by English labels in the extracted content. The leading slot’s asset was not recorded.

On mobile, the corresponding columns become 80px 199.44px 20px, with 15px gaps. Japanese labels become 17px. The first row measures about 69.08px high, while subsequent rows measure about 84.08px, reflecting their additional top padding.

News Index

Role: provide a more complete editorial entry point than the hero ticker.

Desktop uses a 285px-wide filter column on the left and a 979.5px article column on the right, separated by approximately 79.17px. Filters include すべて, PRESS, CASE, INFO and MEDIA. The selected All button has a pale blue translucent fill; the others are transparent in the supplied state.

Filter buttons measure 50.81px high on desktop. Article rows measure 97px high and use date/category metadata above a title, plus a 21px trailing arrow slot. A separate blue news-index action sits below the list toward the right.

Mobile turns the filter controls into one horizontal sequence. Each button measures 81.75 × 44px with a 5px gap. The fifth button extends beyond the document’s visible width, establishing overflow geometry. Whether the original allows dragging or horizontal scrolling was not exercised.

Article titles wrap on mobile instead of adopting the hero ticker’s single-line truncation. The three measured rows are 123px, 144px and 102px high according to content length. Preserve this distinction between a compact announcement preview and a readable article list.

Career Entry

Role: give recruitment a dedicated place in the corporate narrative.

The section uses the same heading system, a bold recruitment statement and a blue action. On desktop, the statement and 323.33 × 70px action share the broad horizontal layout. Mobile places the 320 × 60px action below a 21px statement with a measured 30px gap.

The supplied records establish space beyond this content, but do not establish the exact imagery occupying that space. No recruitment photograph or animation should be invented as an observed feature.

Contact Panel

Role: provide the main consultation invitation before the site directory.

The contact region begins inside the blue footer. Its small Japanese label is gray, supporting prose is 80% white, and the contact button reverses to a white fill with dark text. The desktop content starts farther inward than the ordinary page container, around x=123px; the mobile text inset is about 30px.

The white contact action includes a 20px leading icon slot, a flexible text region and a 41px trailing region. It measures 323.33 × 70px on desktop and 314.56 × 60px on mobile.

The desktop footer capture shows the bottom of a subtly darker blue inset panel with rounded lower corners. Its exact fill and complete bounds were not supplied.

Corporate Footer

Role: combine identity, site navigation, certification artwork and legal information in a strong closing color field.

Desktop places the white logo, company name and address in a broad left region, while two navigation columns occupy the right. Certification artwork appears lower on the left. A right-aligned Page Top link sits above a long thin rule.

Below that rule, four white social marks—X, LinkedIn, YouTube and note—sit at the left. Legal links, a photography-location note and copyright sit toward the right. The social artwork boxes are 26px high; widths vary by brand.

Mobile stacks the identity area above a two-column navigation directory. It retains those two columns rather than converting every link into one long list. The measured columns begin at x=20.28 and x=217.5, with a 30px gap between their allocated regions.

Page Top remains right aligned with substantial space above it. Below another rule, social marks form a centered horizontal row. Legal links become individually centered lines with 10px gaps between their 32.5px-high link boxes. The location note and copyright are centered below.

The footer identifies the operator as 株式会社 ALGO ARTIS. Its photography-location note names WeWork 半蔵門 PREX North. That note identifies a location, not a photographer or production studio.

Tokens — Motion & Interaction

Recorded Transition Definitions

Target	Recorded value	What the evidence establishes
Shared duration token	`.3s`	A common duration is declared
Header	`0.3s`	A header transition exists; complete state rules were not supplied
Mobile logo container	`opacity 0.3s, visibility 0.3s`	Defined visibility transitions; exact scroll trigger unverified
Navigation links	`color 0.3s`	Color changes can transition
Solid action buttons	`background-color 0.3s`	Fill changes can transition; hovered endpoint not demonstrated
Logo and social links	`opacity 0.3s`	Opacity feedback is defined
Hero statement wrapper	`clip-path 0.6s linear`	A 600ms linear clipping transition is defined
Hero summary wrapper	`translate 0.54s cubic-bezier(.25, 1, .5, 1), opacity 0.54s cubic-bezier(.25, 1, .5, 1)`	A short translation-and-opacity transition is defined

These values are stylesheet evidence, not a frame-by-frame reconstruction of an observed entrance sequence. Initial states, delays, direction and replay conditions were not included.

Observed States and Limits

The ticker has three items and different current-item states in the desktop and mobile captures. Its progression mechanism and timing are unverified.
Header content remains available in scrolled captures, with a different visual presentation on mobile. The implementation may involve independently positioned controls or header states; position properties were not supplied.
About and Company are buttons with associated destination content. Their actual opening interaction was not tested.
News categories are buttons, with All selected in the measured state. Filter results and loading behavior were not tested.
Page Top links to https://www.algo-artis.com/#top. Smooth scrolling is not established by the destination alone.
The linework communicates movement visually. Static captures do not establish animated distortion, parallax, video, canvas rendering or scroll-synchronized graphics.

The inspection process waited for layout stability and finite animation readiness, temporarily paused perpetual animations during readiness checks, and then resumed them. This does not prove that all delayed content or interaction states were observed. An animation: none value on sampled elements also does not rule out animation on descendants or other rendering layers.

Surfaces

Layer	Appearance	Structural purpose
Main canvas	Very pale cool field with fine visible grain	Unifies the long corporate page
Hero artwork	Blue photographic ellipse with fine linear geometry	Primary identity and visual emphasis
Header	Light or visually transparent initial band; light desktop band when scrolled	Persistent navigation without a heavy enclosing box
Ticker	White rounded strip or compact mobile card	Separates announcements from the artwork
Selected category	Translucent pale blue	Quiet state feedback
Standard action	Solid Action Blue with white label and separated trailing icon	Consistent destination emphasis
Service diagram	Pale blue sectors, white central hub, stronger blue icons and category bars	Explains industry groupings
Contact region	Blue with an inset darker-looking panel and white action	A clear consultation entry point
Footer	Full-width textured blue field with white content and translucent rules	Strong visual closure and comprehensive navigation

Large geometry belongs primarily to the artwork. Interface controls remain rectangular and relatively restrained.

Imagery

The hero uses recognizable operational environments: rail vehicles, industrial facilities, road infrastructure, storage tanks, container ships and workers using tools or devices. Photographs are arranged as adjacent rectangular fragments within one tilted elliptical silhouette. A blue monochrome treatment binds otherwise different subjects together.

Fine horizontal strokes bridge the collage and the surrounding light space. Their lengths, spacing and density vary. Some pass through photographic areas, while others form self-contained geometric fragments. This variation is essential: an evenly spaced repeating gradient across the whole page would lose the composition’s irregular rhythm.

The service artwork shifts from photography to pictograms while retaining the blue palette and horizontal traces. It uses a central hub and broad sectors to make the business explanation easy to scan.

The main canvas and footer show fine grain. Its implementation is unverified. For a new build, use an optional, very low-contrast texture and check that it does not reduce text clarity or create visible tiling.

Observed Asset References

No image URLs, asset filenames or native image dimensions were supplied. The following inventory describes visible roles only.

Asset role	Evidence	Reuse guidance
Navy header logo	Desktop and mobile hero captures	Use approved brand artwork with its native proportions
White footer logo	Desktop footer capture; mobile DOM dimensions	Use a reversed logo asset rather than applying a text font
Industrial hero collage and line field	Desktop and mobile hero captures	Prepare responsive compositions; retain recognizable subjects and open text space
Service industry diagram	Desktop service capture	Preserve the central hub, two sectors, labels and icon groupings
Certification artwork	Desktop and mobile footer captures	Keep the organization’s actual badge artwork and aspect ratio
Social marks	Footer captures and measured link boxes	Respect each mark’s proportions; align through a common 26px artwork height
Impact feature media	DOM rectangle and link only	Preserve the observed landscape region; visual content remains unverified
About and company media	Layout slots only	Do not infer image content from destination labels

The collage and diagram carry much of the site’s identity. CSS can reproduce the surrounding layout, but a generic stock photo or a plain CSS oval is not an equivalent replacement for these composed assets.

Layout & Responsive Behavior

Page Sequence

Measured document coordinates provide a useful map of the current page. They are inspection landmarks, not recommended fixed positioning values.

Landmark	Desktop document y	Mobile document y
Main / About begins	`1000px`	`667px`
Impact begins	`2528px`	`2028px`
Service begins	`3741px`	`2568px`
Company begins	`5123px`	`3503px`
News begins	`6089px`	`4675px`
Career begins	`6836px`	`5430px`
Footer begins	`7717px`	`6053px`
Document bottom	Approximately `8922px`	Approximately `7446px`

Some sections have decorative space, offsets or overlapping bounds. Their heights should not be summed into a rigid fixed-height template.

Desktop Composition

The hero fills the first 1000px of the recorded document. Large artwork occupies the upper and right portions; the statement is anchored low and left; the news strip closes the opening composition.

Main content uses almost the full available document width with approximately 41px insets. About distributes a short lead and long prose across two columns. Service and Career pair text with right-side actions. News uses a vertical category rail. The footer gives identity a broad left area and concentrates navigation on the right.

Mobile Composition

The closed header reduces to logo and menu.
The hero image moves above the statement, with some linework continuing behind and beside the copy.
The hero ends around y=667, allowing the About heading to enter the initial 844px viewport.
The ticker becomes a two-level card with a horizontal divider and a truncated headline.
About prose becomes one column; its two destination cards stack and shorten.
The Impact region retains its approximate 16:9 proportion.
Standard section actions become centered 320px-wide controls.
News filters become a horizontally overflowing row, while article titles wrap naturally.
The footer keeps two navigation columns, then centers its social and legal areas.

There is no supplied tablet capture. Intermediate layout transitions and exact media-query conditions remain unverified. The source’s 375 reference value and the 375px mobile document width should not be turned into a hardcoded device width: the actual inspected mobile viewport was 390px wide.

Do’s and Don’ts

Do

Keep Action Blue #0031D3 separate from the navy identity color #002F71.
Preserve the relationship between industrial photography, the tilted ellipse and irregular horizontal linework.
Give the hero statement clear light space even where its region overlaps the collage.
Recompose the hero for mobile with artwork above the copy.
Pair small blue Japanese section labels with larger English display titles.
Use the recorded Japanese sans-serif stack and Inter for verified utility roles.
Retain modest button radii: 4px desktop and 2px mobile for the measured standard controls.
Preserve the trailing icon compartment in the main blue actions.
Distinguish the one-line mobile ticker preview from the wrapping main news list.
Keep the service diagram’s central hub and two industry sectors.
Preserve the spacious blue footer and its two-column mobile directory.
Use measured component overrides instead of shrinking all text by one ratio.

Don’t

Don’t replace the hero with a generic blue gradient and a single rectangular stock image.
Don’t turn the line field into an evenly spaced stripe pattern over every surface.
Don’t add large pill buttons, floating glass cards or prominent elevation shadows to ordinary navigation.
Don’t render the logo as typed interface text.
Don’t apply the declared 1100px content cap to every homepage section.
Don’t keep the desktop collage/text overlap unchanged on a narrow screen.
Don’t put all three ticker articles into a visible stack because the DOM lists all three.
Don’t truncate the mobile news index as aggressively as the hero ticker.
Don’t treat measurable hidden menu content as an observed open overlay.
Don’t invent autoplay intervals, parallax effects, hover endpoints or unseen section imagery.
Don’t hardcode the 15px scrollbar gutter as page padding or fix the mobile document to 375px.

Recommended Implementation Additions

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

Give the hero statement a meaningful text representation and heading hierarchy. The supplied extraction identifies the logo as the H1 while the visible statement’s wrappers contain no extracted text.
Provide accessible names, expanded states and controlled-region relationships for navigation buttons. Define Escape dismissal and focus restoration for any full menu.
Increase the mobile menu’s interactive target to at least 44px high while retaining a 32px-high blue visual face if matching the original proportions.
Consider raising the mobile hero summary from the observed 10px to at least 12px. Recheck line breaks and hero height after doing so.
Make inactive ticker items unavailable to keyboard focus and assistive technology. If automatically advancing, provide a pause mechanism and avoid disruptive repeated announcements.
Make every news category reachable by keyboard and touch within a contained horizontal scroller on mobile. Preserve a visible selected state beyond color alone.
Provide a text equivalent for the service diagram that explains its two industry groups and central planning role.
Keep decorative linework out of the accessibility tree and prevent it from intercepting pointer input.
Provide visible focus indicators on pale and blue backgrounds. Review the contrast of the quiet footer text over the final texture.
Honor reduced motion, keep essential content visible without entrance animation, and provide static alternatives if animated artwork is introduced.
Reserve artwork dimensions before loading so the hero and long page do not shift as images decode.

Agent Prompt Guide

Quick Color Reference

Primary action and footer base: #0031D3.
Header identity: #002F71.
Main text: #2C2C2C.
Supporting text: rgba(71, 71, 71, .9).
Recommended light base from the source palette: #F6F9FB.
Selected filter: rgba(201, 225, 242, .3).
Reversed content: white, with softer white reserved for secondary footer text.
Imagery: blue monochrome photography, pale blue diagram sectors and varied horizontal line density.

Overall Prompt

“Create a Japanese corporate homepage for an industrial planning-optimization company using the current ALGO ARTIS visual reference. Use a very pale cool canvas, dark Japanese sans-serif text, electric blue #0031D3 actions and navy #002F71 identity artwork. Compose the hero around a tilted elliptical collage of industrial facilities, transport, storage and people working on site. Extend irregular fine horizontal blue lines through and beyond the collage, with a few striped geometric fragments. Place a large two-line Japanese statement low on the desktop hero and a compact white announcement strip below it. Build spacious sections for the company approach, impact, services, company information, news and careers. Pair small blue Japanese section labels with larger English names. Finish with a large blue contact region and footer. On mobile, move the hero artwork above the statement, stack narrative content, turn the announcement strip into a two-level card, and retain two footer navigation columns. Use small rectangular radii and minimal shadow.”

Example Component Prompts

Hero: “Compose an industrial photograph collage inside a tilted ellipse on a pale cool background. Use a consistent blue monochrome treatment. Extend thin horizontal blue traces with varying lengths and densities around the shape. Leave open space for the statement 複雑さを、社会を支える力へ。 at the lower left. Supply a separate mobile composition with artwork above a 30px two-line statement.”
Announcement strip: “Create a low white strip with a bold news label, fine divider, Inter date, outlined blue PRESS badge, article title, thin arrow and fractional counter. On mobile, place label and counter above a horizontal rule, then date and badge above a one-line ellipsis title. Use no prominent shadow.”
Service action: “Create a 323px-wide, 70px-high electric-blue rectangular link with 4px corners, white Japanese text, 20px side padding and a separated 41px trailing icon region. Adapt it to 320 × 60px with 2px corners on mobile.”
Service diagram: “Create a wide semicircular explanatory diagram with two pale blue sectors and a white circular company hub at the center. Group procurement, production, logistics and sales on the left; transportation, energy, telecommunications, public services and construction on the right. Use blue pictograms, bottom category bars and fine horizontal blue traces in the central sector.”
News index: “Use a desktop category rail beside a broad article list. Mark the selected category with a very pale translucent blue fill. Give each article date/category metadata above a 14px title and a narrow arrow column. On mobile, move categories to a horizontal scroller and allow full article titles to wrap.”
Footer: “Build a full-width electric-blue footer with white identity artwork, address, certification artwork, grouped navigation and a right-aligned Page Top link. Separate the social/legal area with a thin translucent rule. On mobile, retain two navigation columns, then center four social marks and stack legal links.”

Quick Start

CSS Custom Properties

This is an implementation adaptation, not extracted source CSS. It uses measured colors and component dimensions, converted typography formulas, and representative source spacing. Hero artwork positioning, English display sizing and intermediate breakpoints are recommendations.

The CSS expects approved artwork supplied separately. It provides layout and visual states; menu operation, ticker progression, news filtering and header state changes require application logic. Content is visible by default. The mobile summary uses a recommended 12px size, and the menu uses a 44px hit area around a 32px visual face.

:root {
  /* Measured colors and declared supporting surface tokens. */
  --color-action: #0031d3;
  --color-brand: #002f71;
  --color-ink: #2c2c2c;
  --color-muted: rgba(71, 71, 71, .9);
  --color-canvas: #f6f9fb;
  --color-white: #fff;
  --color-selected: rgba(201, 225, 242, .3);
  --color-rule: #d9d9d9;

  --font-base: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", meiryo, sans-serif;
  --font-latin: Inter, sans-serif;
  --type-body: clamp(15px, calc(.1vw + 14px), 16px);
  --type-prose: clamp(16px, calc(.2vw + 15px), 18px);
  --type-lead: clamp(21px, calc(1vw + 14px), 32px);
  --type-about-lead: clamp(24px, calc(1.5vw + 12px), 41px);

  /* Recommended fluid approximations, not source hero formulas. */
  --type-hero: clamp(42px, 5.520833vw, 94px);
  --type-hero-summary: clamp(16px, 1.469907vw, 24px);
  --type-section: clamp(36px, calc(3.1vw + 6px), 66px);

  --gutter: clamp(20px, calc(12.718px + 1.942vw), 50px);
  --gutter-narrow: clamp(15px, calc(8px + 1.942vw), 50px);
  --content-wide: 1620px;
  --space-column: clamp(30px, calc(2.604167vw + 10px), 60px);
  --space-section: clamp(60px, calc(8.680556vw - 6.666667px), 160px);
  --header-height: 100px;
  --radius-control: 4px;
  --radius-panel: 10px;
  --motion-ui: 300ms;
  --motion-summary: 540ms cubic-bezier(.25, 1, .5, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-base);
  font-size: var(--type-body);
  line-height: 1.9;
  letter-spacing: .02em;
}

button, input, select, textarea { font: inherit; }
img, svg { max-width: 100%; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: calc(var(--content-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-height);
  padding-inline: var(--gutter-narrow);
  background: var(--color-canvas);
  transition: height var(--motion-ui), background-color var(--motion-ui);
}

.brand { display: block; flex: none; margin-right: auto; }
.brand img { display: block; width: 195px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 25px; }
.site-nav a { text-decoration: none; transition: color var(--motion-ui); }
.site-nav button { border: 0; padding: 0; background: none; color: inherit; }

.header-contact {
  display: grid;
  place-items: center;
  min-width: 149px;
  height: 50px;
  padding-inline: 20px;
  border-radius: var(--radius-control);
  color: var(--color-white);
  background: var(--color-action);
  font-weight: 700;
  text-decoration: none;
}

.menu-button {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 80px;
  height: 50px;
  border: 0;
  border-radius: var(--radius-control);
  color: white;
  background: var(--color-action);
  cursor: pointer;
}

.menu-lines {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
  transform: translateY(-7px);
}

/* Application logic may set this state; the threshold is not prescribed. */
.site-header[data-compact="true"] { height: 80px; }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(860px, 100svh);
  padding: var(--header-height) var(--gutter-narrow) 24px;
}

/* Supply a complete responsive collage and line-field composition. */
.hero__art {
  position: absolute;
  z-index: -1;
  inset: var(--header-height) 0 0;
  pointer-events: none;
}
.hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

.hero__copy {
  margin-bottom: 50px;
  padding-inline-start: clamp(20px, 3.558333vw, 68px);
}
.hero__title {
  margin: 0;
  font-size: var(--type-hero);
  font-weight: 700;
  line-height: 1.3;
  transition: clip-path 600ms linear;
}
.hero__title > span { display: block; }
.hero__summary {
  max-width: 70ch;
  margin: 24px 0 0;
  color: var(--color-muted);
  font-size: var(--type-hero-summary);
  font-weight: 700;
  line-height: 1.5;
  transition: translate var(--motion-summary), opacity var(--motion-summary);
}

.ticker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "label entry count";
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: 10px;
  background: white;
}
.ticker__label {
  grid-area: label;
  margin: 0;
  padding-right: 16px;
  border-right: 1px solid var(--color-rule);
  font-family: var(--font-latin);
  font-size: 19.32px;
  font-weight: 600;
  line-height: 1.2;
}
.ticker__entry { grid-area: entry; min-width: 0; }
.ticker__entry[hidden] { display: none; }
.ticker__link {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) 20px;
  align-items: center;
  gap: 15px;
  color: inherit;
  text-decoration: none;
}
.ticker__date, .ticker__count {
  font-family: var(--font-latin);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
}
.ticker__count { grid-area: count; }
.ticker__count strong { color: var(--color-action); }
.ticker__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.5;
}
.badge {
  width: max-content;
  padding: 1px 10px;
  border: 1px solid var(--color-action);
  border-radius: 3px;
  color: var(--color-action);
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
}

.section { padding-block: var(--space-section); }
.section-heading { margin-bottom: 40px; }
.eyebrow {
  position: relative;
  margin: 0 0 6px;
  padding-left: 30px;
  color: var(--color-action);
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.5;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 12px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: rotate(-40deg);
}
.section-title {
  margin: 0;
  font-size: var(--type-section);
  font-weight: 700;
  line-height: 1.2;
}
.lead { margin: 0; font-size: var(--type-lead); font-weight: 700; line-height: 1.5; }
.prose { color: var(--color-muted); font-size: var(--type-prose); line-height: 1.9; }
.prose p { margin: 0 0 24px; }

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1424fr) minmax(0, 1fr);
  gap: var(--space-column);
}
.about-layout .lead { font-size: var(--type-about-lead); }
.about-layout .prose { line-height: 2.1; }
.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 323.33px;
  align-items: end;
  gap: var(--space-column);
}
.section-actions { display: grid; gap: 8px; }
.service-diagram { display: block; width: 100%; height: auto; margin-top: 40px; }
.impact-media { display: block; width: 100%; aspect-ratio: 16 / 9; }
.impact-media img { display: block; width: 100%; height: 100%; object-fit: contain; }

.action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 41px;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 70px;
  padding: 12px 20px;
  border-radius: var(--radius-control);
  color: white;
  background: var(--color-action);
  line-height: 1.5;
  text-decoration: none;
  transition: background-color var(--motion-ui);
}
.action__end {
  display: grid;
  place-items: center;
  min-height: 30px;
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.action__end svg { width: 18px; height: 18px; }
.action--light { color: var(--color-ink); background: white; }

.news-layout {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: clamp(50px, calc(4.340278vw + 16.666667px), 100px);
}
.news-tabs { display: flex; flex-direction: column; gap: 8px; }
.news-tab {
  border: 0;
  border-radius: var(--radius-control);
  padding: 12px 20px;
  color: inherit;
  background: transparent;
  font-size: var(--type-prose);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
.news-tab[aria-pressed="true"] { background: var(--color-selected); }
.news-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21px;
  align-items: center;
  gap: 4px;
  padding: 26px 20px 26px 0;
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
}
.news-row__date {
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
}
.news-row__title { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }

.site-footer { padding-bottom: 50px; color: white; background: var(--color-action); }
.contact-panel {
  padding: 80px;
  border-radius: var(--radius-panel);
  background: rgba(0, 0, 0, .08); /* Recommended darker-panel approximation. */
}
.contact-panel .eyebrow { color: #ccc; }
.contact-panel .prose { color: rgba(255, 255, 255, .8); }
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 422px;
  gap: 40px;
  padding-top: 50px;
}
.footer-nav { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; }
.footer-nav a { display: block; color: white; text-decoration: none; }
.footer-nav__primary { margin-bottom: 12px; font-size: var(--type-prose); line-height: 1.5; }
.footer-nav__sub { font-size: 11px; line-height: 1.9; }
.page-top { display: flex; justify-content: flex-end; margin-block: 80px 40px; }
.page-top a { font-family: var(--font-latin); font-weight: 600; text-decoration: none; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.footer-socials { display: flex; align-items: center; gap: 30px; }
.footer-socials img { display: block; width: auto; height: 26px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 32px; }
.footer-legal a { padding-block: 5px; line-height: 1.5; text-decoration: none; }

/* Recommended intermediate collapse; original breakpoint unverified. */
@media (max-width: 1199px) {
  .site-nav { display: none; }
}

/* Recommended mobile breakpoint matching the supplied endpoint layout. */
@media (max-width: 767px) {
  :root {
    --header-height: 63px;
    --type-body: 15px;
    --type-prose: 16px;
    --type-lead: 21px;
    --type-about-lead: 24px;
    --type-hero: 30px;
    --type-hero-summary: 12px;
    --type-section: 36px;
    --space-section: 60px;
    --radius-control: 2px;
    --radius-panel: 5px;
  }

  .brand img { width: 160px; }
  .header-contact { display: none; }
  .site-header[data-compact="true"] { height: 63px; background: transparent; }
  .site-header[data-compact="true"] .brand { visibility: hidden; }
  .menu-button { width: 60px; height: 44px; background: transparent; }
  .menu-button::before {
    content: "";
    position: absolute;
    inset: 6px 0;
    border-radius: 2px;
    background: var(--color-action);
  }
  .menu-lines {
    width: 30px;
    box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
    transform: translateY(-5px);
  }

  .hero { min-height: 0; padding: 392px 15px 20px; }
  .hero__art { inset: 0 0 auto; height: 430px; }
  .hero__art img { object-position: center top; }
  .hero__copy { margin-bottom: 30px; padding-inline: 5px; }
  .hero__summary { margin-top: 12px; }

  .ticker {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label count" "entry entry";
    gap: 10px;
    padding: 10px 15px 15px;
    border-radius: 4px;
  }
  .ticker__label { padding: 2px 0 0; border: 0; font-size: 14px; }
  .ticker__entry { padding-top: 10px; border-top: 1px solid var(--color-rule); }
  .ticker__link { grid-template-columns: auto auto minmax(0, 1fr) 18px; gap: 4px 10px; }
  .ticker__date, .ticker__count { font-size: 12px; }
  .ticker__title { grid-column: 1 / 4; grid-row: 2; font-size: 13px; }
  .ticker__arrow { grid-column: 4; grid-row: 1 / 3; }
  .badge { font-size: 12px; }

  .eyebrow { padding-left: 20px; }
  .section-heading { margin-bottom: 30px; }
  .about-layout, .service-layout, .news-layout { grid-template-columns: minmax(0, 1fr); }
  .about-layout { gap: 40px; }
  .about-layout .prose { font-size: 14px; }
  .prose p { margin-bottom: 15px; }
  .section-actions { width: min(100%, 320px); margin-inline: auto; gap: 10px; }
  .action { min-height: 60px; gap: 15px; }
  .service-diagram { margin-top: 30px; }

  .news-layout { gap: 30px; }
  .news-tabs { flex-direction: row; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
  .news-tab { flex: 0 0 81.75px; min-height: 44px; padding: 10px 15px; font-size: 16px; }
  .news-row { padding: 20px 5px 20px 0; }
  .news-row__date { font-size: 12px; }

  .contact-panel { padding: 50px 10px; }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footer-nav { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 30px; }
  .footer-nav__primary { font-size: 16px; }
  .footer-nav__sub { font-size: 13px; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 40px; }
  .footer-legal { flex-direction: column; align-items: center; gap: 10px; }
}

/* Recommended interaction feedback; hovered endpoints were not captured. */
@media (hover: hover) {
  .site-nav a:hover { color: var(--color-action); }
  .action:hover, .header-contact:hover { background: #1d81dd; }
  .action--light:hover { background: #e5eeff; }
}

:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

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

The recommended hero heights and positioning target the supplied portrait and desktop compositions. Test intermediate widths with the actual assets and copy. The CSS does not reproduce the grain or the photographic mask; those should come from approved artwork or a separately validated composition layer.

A minimal section-heading and action pattern matching the selectors above:

<div class="section-heading">
  <h2 class="eyebrow">サービス</h2>
  <p class="section-title" lang="en">Service</p>
</div>

<div class="section-actions">
  <a class="action" href="https://service.algo-artis.com/stories/">
    <span>導入事例</span>
    <span class="action__end" aria-hidden="true">
      <!-- Recommended simple external-destination icon approximation. -->
      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor">
        <rect x="4" y="4" width="9" height="7"></rect>
        <path d="M7 14h9V7"></path>
      </svg>
    </span>
  </a>
</div>

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not imply that the original website uses Tailwind. Define the custom properties above first.

@theme inline {
  --color-brand-blue: var(--color-action);
  --color-brand-navy: var(--color-brand);
  --color-page-ink: var(--color-ink);
  --color-page-muted: var(--color-muted);
  --color-page-canvas: var(--color-canvas);
  --color-filter-selected: var(--color-selected);
  --color-page-rule: var(--color-rule);

  --font-japanese: var(--font-base);
  --font-utility: var(--font-latin);

  --text-body: var(--type-body);
  --text-prose: var(--type-prose);
  --text-lead: var(--type-lead);
  --text-hero: var(--type-hero);
  --text-section: var(--type-section);

  --spacing-page: var(--gutter);
  --spacing-page-narrow: var(--gutter-narrow);
  --spacing-section: var(--space-section);
  --radius-button: var(--radius-control);
  --radius-section: var(--radius-panel);
}

Sources & Evidence

Original and final website: https://www.algo-artis.com/. The supplied browser record reports HTTP 200 and an unchanged final URL.
Capture record: September 12, 2026, 07:28:08.786 UTC / 16:28:08.786 JST. Desktop viewport 1440 × 1000; mobile viewport 390 × 844. Rendered document widths were 1425px and 375px, with document heights approximately 8922px and 7446px.
Visual evidence: three desktop captures showing the hero, service diagram and footer; two mobile captures showing the hero and lower footer.
Rendered evidence: homepage text, destination links, source custom properties, computed typography and colors, element rectangles, grid columns and transition definitions at both viewports.
Interaction evidence: captured ticker states and scrolled header/footer presentations. No menu opening, category selection, link navigation, form submission or keyboard interaction was demonstrated.
Original-page identity evidence: the homepage footer names 株式会社 ALGO ARTIS and provides its address. No named design or development production credit appears in the supplied original-page evidence.
Limitations: this reference analyzes the supplied evidence only. No additional pages or files were accessed. Asset URLs, full stylesheets, exact breakpoint rules and complete animation sequences were not supplied. Readiness checks improve capture stability but do not establish every delayed or interactive state. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current homepage represented by those captures. Measured values, screenshot estimates and implementation recommendations are identified separately throughout.