MANERU

日本のWebデザインを、AIの制作リファレンスに。

株式会社アイテックムラモト｜電気設備工事設計施工のWebサイトプレビュー

DESIGN REFERENCE

株式会社アイテックムラモト｜電気設備工事設計施工

コーポレートサイト電気設備工事施工事例採用情報ティールネイビー太字タイポグラフィ余白写真レスポンシブ

ティールと濃紺、力強い和文見出しが印象的な電気設備工事会社の公式サイト。広い余白、横並びの施工写真、丸い操作ボタンを組み合わせ、事業と採用情報を紹介しています。

オリジナルサイトを見る
ジャンル
建築・建設
元の業種
建設・電気設備工事
デザイン分析日
2026/10/2

design.md

ダウンロード

I-TECH MURAMOTO — Style Reference

Monumental Japanese type, open architectural galleries, and a saturated teal company signature.

Website: i-tech-muramoto.co.jp Original URL: https://i-tech-muramoto.co.jp/ Final URL: https://i-tech-muramoto.co.jp/ Theme: white content sections, a dark captured opening region, navy controls, and a saturated teal footer. No user-selectable theme was evidenced. Inspected: October 2, 2026, at 01:51:13 JST; supplied retrieval timestamp 2026-10-01T16:51:13.086Z. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current corporate homepage, including its header, opening statement, anniversary link, company introduction, services, project rail, news, recruitment/contact links, sponsorship and office footer. Visual captures cover the opening region, the desktop projects/news boundary, and desktop/mobile footer positions. Other sections are documented through supplied rendered DOM and computed styles. Linked pages and the opened menu were not inspected.

I-TECH MURAMOTO presents an electrical installation design and construction business through a long, spacious corporate homepage. Its strongest visual relationships are between heavy Japanese display lettering and small navigation labels, square image fields and rounded controls, and quiet white content areas and an expansive teal closing section. Navy provides a consistent destination color for list links; teal identifies recruitment and the anniversary announcement.

The desktop composition uses several alignment systems. The logo sits close to the viewport edge, the hero copy starts farther inward, ordinary content follows a centered 1180px span, and the footer information shifts noticeably to the right. These offsets create the page's character. On mobile, the design simplifies to mostly 30px content gutters while retaining a large opening field, a horizontal project rail and substantial footer breathing room.

全文を表示閉じる

I-TECH MURAMOTO — Style Reference

Monumental Japanese type, open architectural galleries, and a saturated teal company signature.

Website: i-tech-muramoto.co.jp Original URL: https://i-tech-muramoto.co.jp/ Final URL: https://i-tech-muramoto.co.jp/ Theme: white content sections, a dark captured opening region, navy controls, and a saturated teal footer. No user-selectable theme was evidenced. Inspected: October 2, 2026, at 01:51:13 JST; supplied retrieval timestamp 2026-10-01T16:51:13.086Z. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current corporate homepage, including its header, opening statement, anniversary link, company introduction, services, project rail, news, recruitment/contact links, sponsorship and office footer. Visual captures cover the opening region, the desktop projects/news boundary, and desktop/mobile footer positions. Other sections are documented through supplied rendered DOM and computed styles. Linked pages and the opened menu were not inspected.

I-TECH MURAMOTO presents an electrical installation design and construction business through a long, spacious corporate homepage. Its strongest visual relationships are between heavy Japanese display lettering and small navigation labels, square image fields and rounded controls, and quiet white content areas and an expansive teal closing section. Navy provides a consistent destination color for list links; teal identifies recruitment and the anniversary announcement.

The desktop composition uses several alignment systems. The logo sits close to the viewport edge, the hero copy starts farther inward, ordinary content follows a centered 1180px span, and the footer information shifts noticeably to the right. These offsets create the page's character. On mobile, the design simplifies to mostly 30px content gutters while retaining a large opening field, a horizontal project rail and substantial footer breathing room.

Capture limitation: both opening screenshots show a security-restriction message in the background/media region. The company header, headline, supporting copy and anniversary link remain visible. The restricted media's subject, playback and normal appearance are unverified. Treat the message as a capture/runtime limitation, not as branded content or a design element to reproduce.

How to Read This Reference

  • Measured values come from the supplied rendered element bounds, computed styles or named source custom properties. They describe the recorded state at the stated viewport.
  • Derived values are simple calculations from those measurements, such as a gap between adjacent image frames.
  • Estimated values come from visual inspection of the attached captures. These are not pixel-sampled colors or stylesheet declarations.
  • Recommended values and behaviors support a new implementation. They are explicitly distinguished from the original page.
  • Token names such as --brand and --font-display are reusable aliases. Source variable names are identified separately.
  • A computed font family confirms the declared family on an element; the supplied evidence does not independently verify every downloaded font file or rendered glyph.
  • Rectangles can include padding, blank lines and transformed content. Do not treat every element's total height as its visible text height.
  • Desktop and mobile project records differ. Their ordering does not establish autoplay, a filtering rule or a user interaction.

Tokens — Colors

Default Palette
Name Value Evidence Role and implementation alias
Brand Teal #06b294 Measured source --s-color-3cbdef82; computed recruitment pill fill Brand accent, --brand. The footer visibly belongs to this teal family, but its own background declaration was not supplied.
Anniversary Teal #05b193 Measured anniversary link background on both viewports Large anniversary capsule, --anniversary. Preserve this slight source variation when matching that component.
Deep Navy #002d72 Measured source --s-color-b1a85ee5; desktop list links and job-details pill Main destination buttons and secondary links, --navy.
Mobile List Navy #003077 Measured mobile list-link background Mobile services, projects and news list buttons, --navy-mobile.
Strong Ink #141414 Measured headings, service-card bases and recruitment-link bases Main display text and dark fallback surfaces, --ink. The opening screenshot is visually close to this color; its exact background was not measured.
White #ffffff Measured body, project/news surfaces and reversed text Main content canvas and strong reversed labels, --paper.
Soft White #f5f5f5 Measured hero supporting copy Long copy over the opening field, --on-dark-muted.
Body Gray #5f5f5f Measured introduction and section descriptions Supporting prose, --body-muted.
Metadata Gray #777777 Measured project metadata and news dates Secondary information, --meta.
Base Gray #333333 Measured source --s-color-01b6ea8f; many link wrappers and mobile project titles General inherited text, --text. Child elements frequently override this value.
Subdued White rgba(255,255,255,0.7) Measured recruitment subtitles and footer utility text Secondary text on colored/dark fields.
Decorative White rgba(255,255,255,0.05) Measured repeated footer wordmark Very large background lettering; not an interactive state.

The palette is primarily solid. A source variable also declares linear-gradient(90deg, #2bdecc, #2d82de), but its application is not established by the supplied captures or measured components. Do not turn that unused declaration into a general background treatment.

Fine pale rules and translucent circular outlines are visible. Their exact border colors were not supplied; #e8e8e8 on white and a low-opacity white on dark/teal are reasonable implementation estimates.

Color Relationships

Navy pills carry white labels and small teal arrows. The anniversary link reverses white text directly out of teal. The footer uses white office information, lighter utility text and an oversized, faint brand symbol near its lower-right edge. The symbol's opacity is visually estimated; the measured 5% white value above belongs specifically to the repeated text wordmark.

The marathon poster introduces tan, yellow and black within its artwork. The Facebook mark introduces its own blue. These are asset-local colors, not additional general-purpose UI accents.

Tokens — Typography

Japanese Display Typeface
  • Measured family: 見出ゴMB1, also declared through source --s-font-839951ee.
  • Observed roles: hero statement, company introduction heading, section headings, service labels, project titles, office headings and main button labels.
  • Measured weights: many large headings use 400; project titles use 900; button labels use 700.
  • Character: substantial, compact Japanese Gothic lettering with strong visual weight even where the CSS weight is 400.
  • Implementation alias: --font-display.

Do not normalize every display element to CSS 700. The face itself contributes much of the visual density. If the original face is unavailable, choosing a bold fallback is a separate implementation decision.

Japanese Body Typeface
  • Measured family: '中ゴシックBBB JIS2004', declared through source --s-font-599c7842.
  • Observed roles: navigation, descriptive paragraphs, project metadata, news titles, addresses and Japanese recruitment subtitles.
  • Typical weight: 400; news titles use 900.
  • Typical tracking: 0.05em, expressed as values such as 0.75px at 15px and 0.8px at 16px.
  • Implementation alias: --font-body.

This family provides a lighter, more open reading texture below the heavy display headings. Body line height commonly ranges from 1.7 to 2.

Latin Utility and Display Typeface
  • Measured family: Jost, declared through source --s-font-fb9348fb.
  • Observed roles: MENU, MORE, news dates, recruitment/contact English labels, copyright, FOLLOW US and oversized brand lettering.
  • Weights: 200 for MORE; 300 for large recruitment/contact labels; 400 for dates, MENU, footer utilities and decorative wordmarks.
  • Implementation alias: --font-latin.

Large, light English labels provide a different voice from the dense Japanese headings. Keep this contrast instead of using one heavy sans-serif treatment throughout.

Type Scale

All sizes and line heights in this table are measured. A slash separates font size from line height.

Role Desktop Mobile Family / weight Tracking
Hero statement 64 / 83.2px 34 / 44.2px Display / 400 Normal
Introduction heading 48 / 62.4px 28 / 36.4px Display / 400 Normal
Main section heading 52 / 72.8px 28 / 39.2px Display / 400 Normal
Service tile label 28 / 39.2px 20 / 28px Display / 400 Normal
Project title 26 / 33.8px 20 / 26px Display / 900 0.05em desktop; normal mobile
Hero supporting copy 20 / 40px 15 / 25.5px Body / 400 0.05em
Introduction paragraph 18 / 36px 15 / 25.5px Body / 400 0.05em
Section description 16 / 27.2px 15 / 25.5px Body / 400 0.05em
Project metadata 16 / 24px 10 / 10.1px Body / 400 0.05em desktop; normal mobile
News date 18 / 18px 15 / 15px Jost / 400 Normal
News title 18 / 23.4px 15 / 22.5px Body / 900 0.05em
List-link label 16 / 22.4px 15 / 21px Display / 700 0.05em desktop; normal mobile
Anniversary label 14 / 19.6px 12 / 18px Display / 700 0.05em
MENU / MORE 10 / 14px 10 / 14px Jost / 400 and 200 respectively Normal
RECRUIT 64 / 89.6px 28 / 39.2px Jost / 300 Normal
JOB DETAILS / CONTACT 48 / 67.2px 28 / 39.2px Jost / 300 Normal
Main office heading 18 / 25.2px 18 / 25.2px Display / 400 0.05em
Other office heading 16 / 22.4px 16 / 22.4px Display / 400 0.05em
Main office address 14 / 23.8px 13 / 22.1px Body / 400 0.05em
Other office address 12 / 20.4px 13 / 22.1px Body / 400 0.05em
Copyright 10 / 20px 10 / 15px Jost / 400 0.05em

Desktop navigation is 13 / 18.2px, weight 400, with 0.65px tracking. The ordinary navigation labels have 15px padding.

The introduction's decorative I-TECH MURAMOTO text measures 400px with 560px line height and 20px tracking on desktop, changing to 200 / 280px with 10px tracking on mobile. Its bounds extend far beyond the viewport. The footer's repeated wordmark remains 200 / 280px on both samples. These are decorative text fields, not reading sizes.

Other families appear in source variables, including Noto Sans JP, Oswald and two serif families. They were not applied to the sampled text roles above. The root's computed Times value is also not representative of the visible interface.

Tokens — Spacing & Shapes

Density: expansive sections with compact utility controls. Geometry: square content and image fields, fully rounded destination links, and circular secondary controls. Scaling: role-specific desktop/mobile values; no single fluid unit was established.

Spacing Scale
Use Desktop Mobile Evidence
Header edge inset 30px 20px for MENU; logo link at 20px left, 25px top Measured
Hero horizontal inset 60px 30px Measured text padding
Hero bottom clearance 60px Approximately 60px Desktop measured; mobile derived from button and visible section boundary
Main content left edge 130px 30px Measured
Ordinary content span 1180px 330px Measured representative rows/tiles
Hero heading-to-copy space 20px 10px Measured heading bottom padding
Mobile hero copy-to-CTA space — 30px Measured copy bottom padding
Desktop recruitment-pill gap 8px Pills absent from closed header Derived
Project image-to-title gap 30px Not directly measured Derived desktop
Project title-to-metadata gap 20px 15px Derived
Project content-to-content horizontal gap 40px 20px Derived from item bounds and mobile padding
News row separation 40px 25px Derived
Projects section top padding 120px 60px Measured
News section bottom padding 120px 80px Measured

A practical implementation scale is 8, 10, 15, 20, 25, 30, 40, 60, 80, 120px. This is an extracted set of recurring values, not a verified source spacing-token system.

Border Radius
Element Value Evidence
Service links and project image frames 0 Measured
News and recruitment links 0 Measured
Small header recruitment/job pills 40px Measured
Anniversary and list links 50px Measured
MENU button 50% Measured
Project arrow controls Visually circular, in 60 × 60px button boxes Visual circle; host button radius is reported as 0, so the visible ring belongs to another layer
MORE ring Approximately 56px desktop, 50px mobile Visual estimate
Layout Measurements
Element Desktop Mobile Interpretation
Document height 6925.8px 6388.7px Measured full rendered document
Logo link box 330 × 55px 330 × 35.75px Measured link bounds; mobile artwork is visibly narrower than the link box
MENU 70 × 70px at (1340,30) 60 × 60px at (310,20) Measured
Anniversary link 380 × 90px at (1000,850) 220 × 70px at (30,671.8) Measured
List link 180 × 70px 180 × 70px Measured; mobile examples centered at x=105
Service tile 295 × 382px 330 × 175px Measured
Desktop project image frame 432 × 300px — Measured ratio 1.44:1
Mobile project link — 245px outer width, 10px padding on each side Measured; 225px usable content width
News row 1180 × 191px 330 × 126px Measured
Recruitment feature link 1440 × 583px 394 × 231px Measured; mobile link slightly overscans the viewport
Job/contact link Approximately half-width, 290px high 394 × 150px each Measured; mobile stack
Social link boxes 35 × 35px 35 × 35px Measured

The main desktop span implies (1440 - 1180) / 2 = 130px margins. A centered max-width:1180px container is a useful recommended implementation, although the original width formula was not supplied.

Components

Persistent Header

Role: keep company identity and major destinations available across a long page.

The desktop header contains a large logo at the left, six ordinary text links, two small filled pills and a circular MENU button. The links are 施工事例, サービス案内, 私たちについて, 会社概要, お知らせ and お問い合わせ. The teal 採用情報 pill leads to /recruit; the navy 募集要項 pill leads to /recruit#recruitments-1.

The logo link starts at (30,30) and measures 330 × 55px. The navigation occupies the upper-right region, with the MENU circle at the far right. Each small filled pill measures approximately 85.6 × 28.2px, with 5px vertical and roughly 15–16px horizontal padding.

On mobile, the closed header shows only the logo and MENU. The menu remains a textual circle rather than changing to a hamburger glyph. The measured logo link box overlaps the menu's horizontal range, but its visible artwork is smaller, approximately 250–255px wide. Do not stretch the image to the full recorded link width.

The header remains at the top in the supplied scrolled screenshots. This supports a persistent overlay treatment; the exact CSS positioning rule was not included. The logo lettering appears white over the opening region and dark over white/teal regions. The switching or compositing mechanism is unverified.

Observed weakness: white navigation becomes very faint over the white projects capture, and the overlay can overlap underlying headings or office text. A new implementation should preserve the persistent identity while explicitly managing contrast and content clearance. Menu contents, opening motion, focus behavior and close controls were not captured.

Opening Statement

Role: introduce the company's long-term identity and continuity.

The foreground statement reads つちかう、たかめる、 followed by 未来へつむぐ。. It is left aligned and placed low in the opening field. The desktop heading's measured box begins at y=673.6px; its visible text begins after 60px left padding. Supporting text sits below at 20px with a generous 40px line height.

The anniversary capsule sits independently at the lower right on desktop. Both the text group and the capsule finish roughly 60px above the viewport bottom. The large unoccupied upper area makes the foreground feel deliberate and substantial even though its background media was unavailable in this capture.

On mobile, the heading uses 34 / 44.2px and begins around y=466.9px. Supporting copy uses 15 / 25.5px in a narrow text area of approximately 248px, followed by the capsule in the same left-aligned flow. The opening region ends around 802px in the 844px capture. This is consistent with approximately 95vh, but the actual source height formula was not provided.

Keep the two-line headline break. Do not substitute an unverified background scene, infer a normal playback state, or reproduce the visible restriction message as site copy.

Anniversary Capsule

Role: provide a prominent editorial destination without overwhelming the opening statement.

The desktop link is a 380 × 90px teal capsule with a 50px radius. Its measured padding is 15px 20px 15px 25px. A white display-font label sits on the left; a fine outlined circle containing MORE sits on the right. The entire capsule links to /news/220717.

On mobile, it becomes 220 × 70px, with 20px left and 10px right padding. The Japanese label wraps into two lines at 12 / 18px; MORE remains 10 / 14px. The nested ring is part of the link's visual anatomy, not evidence of a separate action.

Company Introduction and Oversized Wordmark

Role: connect the opening statement to the company's electrical-engineering expertise.

The introduction includes a two-line display heading, a short paragraph about its history since 1921, and 詳しくみる linking to /about. On desktop, the heading begins at approximately x=883px, with the paragraph and link at x=888px. This is a strongly right-weighted text composition.

The paragraph measures 363px wide at 18 / 36px. The secondary link uses navy body text and has a leading visual area: its label begins 60px after the link's left edge. The precise leading graphic was not shown in the supplied captures.

Mobile moves the paragraph to x=30px, with a 290px width and 15 / 25.5px text. The heading is 28 / 36.4px. A very large Jost brand word extends beyond the viewport in both measured layouts. Its presence is verified in the DOM, but the exact visible layering and any movement were not visually captured.

The unused left-side region on desktop must not be filled with an invented photograph based solely on the text's offset.

Role: establish a recurring way to introduce services, projects and news.

Desktop section headings use 52 / 72.8px display type. Services and projects pair the heading with a descriptive paragraph, while the navy 一覧を見る link sits toward the right edge of the 1180px content span. For projects, the heading begins at x=130px, the paragraph at x=378px, and the list link at x=1130px.

The destination link is 180 × 70px with a 50px radius, a white label and a small teal forward arrow. The label is inset 20px from the left.

On mobile, headings become 28 / 39.2px. Descriptions sit below with a 10px derived gap and a 290px width. The list links move beneath their associated content and remain 180 × 70px, centered. This change in placement is a significant responsive behavior, not just a smaller button.

Service Tiles

Role: present four practical service categories with direct section links.

The desktop row consists of four adjacent square-cornered tiles, each 295 × 382px, filling the 1180px content span with no measured gap. Their centered white labels are:

  • 照明・コンセント設備 → /service#service01
  • 受変電設備 → /service#service02
  • 弱電設備 → /service#service03
  • 幹線敷設工事 → /service#service04

The first label uses two lines. Labels are 28 / 39.2px on desktop and 20 / 28px on mobile. Each whole tile is a link.

Mobile turns the row into four touching horizontal panels, each 330 × 175px, beginning at x=30px. The category order is preserved. A centered list link follows the stack with a derived 60px gap.

The tile bases compute to #141414, and mobile DOM fragments confirm background-image references. The service section's own background is transparent in the supplied record; its backing surface and the actual image subjects were not visually captured. White section text is measured, but a particular parent fill or photographic overlay must not be asserted as observed.

Project Rail

Role: demonstrate the range and scale of completed work.

The desktop rail begins on the content alignment at x=130px and continues beyond the right viewport edge. Image-frame starts are 130, 602, 1074, 1546 and 2018px: a derived 472px pitch consisting of a 432px frame and a 40px gap.

Each item has a landscape image frame, a 30px gap, a heavy 26 / 33.8px project title, and metadata after another 20px. Metadata uses gray 16 / 24px text with slash-separated year, location, contractor and facility category. Long titles wrap naturally; shorter titles leave their metadata higher. There is no visible enclosing card panel, shadow or rounded image corner.

The supplied desktop screenshot visibly shows a shopping-center exterior and a logistics/food facility exterior. The first project's image area is blank despite having a measured frame and linked title. Its missing image should be treated as an incomplete asset state, not as an intentional empty design slot.

Two outlined circular arrow controls occupy 60 × 60px boxes near the section's right side, before the list link. The controls are present, but their click results and the rail's animation were not exercised.

Mobile uses horizontally arranged 245px link boxes with 10px padding on each side. The content width is 225px, and consecutive content starts are 245px apart. Titles use 20 / 26px; metadata becomes unusually small at 10 / 10.1px. The list link appears below the rail. No mobile arrow buttons appear in the supplied visible text/control record. Swipe, drag, scroll snapping and looping remain unverified.

News Row

Role: make company updates browsable within the homepage.

Three dated entries are present. Desktop rows measure 1180 × 191px, separated by 40px. Their text begins at x=310px, which is 180px inside the row's left edge. The date is Jost 18px; the Japanese title is body-family 18px, weight 900, placed below the date with a derived 15px gap.

Mobile rows measure 330 × 126px, separated by 25px. Their text starts at x=160px, or 130px inside the row. Dates become 15px; titles use 15 / 22.5px, and the date-to-title gap becomes 10px. Longer titles use two lines.

Background-image references appear in the mobile row markup, supporting a media-and-text structure. Exact thumbnail dimensions and image subjects were not included in the visual captures. Preserve the measured text offset when adapting the component, but label any chosen thumbnail geometry as an approximation.

The section's list link sits beside its heading on desktop and below the three rows on mobile. The white surface, restrained dates and substantial row spacing continue the page's open visual rhythm.

Role: provide large, clear routes for prospective employees and enquiries.

The first link spans the desktop viewport and measures 583px high. Its centered title is RECRUIT in Jost 64 / 89.6px, weight 300, with a smaller Japanese subtitle at 20 / 28px and 70% white. An 8px white separation follows the feature region.

Below it, JOB DETAILS and CONTACT occupy approximately half-width links, each 290px high. English labels use Jost 48 / 67.2px; Japanese subtitles use 16 / 22.4px. Their destinations are /recruit#recruitments-1 and /contact.

On mobile, the recruitment feature is 231px high, followed by two full-width links stacked at 150px high each. All three English labels use 28 / 39.2px; Japanese subtitles use 13 / 18.2px.

The computed link bases are dark, and the mobile markup contains background-image references. Those images' subjects and final overlays were not visually supplied. Retain the measured typography and panel hierarchy without inventing an image treatment.

Role: close with local involvement, operational details and social destinations.

A saturated teal field contains the marathon-support message, a rectangular 2026 event poster, five office records, a thin rule and a small utility row. In the desktop capture, the poster is approximately 321 × 240px; this is a visual estimate. It retains its own tan, yellow and black artwork.

The information block is deliberately offset. Desktop office columns start around x=393.8px and x=827.2px, rather than the normal 130px content edge. The first column contains headquarters, Yokohama and Osaka; the second contains Tokyo and Adachi. Each record has a display-font office heading followed by white address and telephone information. Headquarters and Tokyo use slightly larger desktop address text than the other offices.

Mobile collapses the records to one column at x=30px, preserving the sequence headquarters, Yokohama, Osaka, Tokyo, Adachi. All address text becomes 13 / 22.1px, so the smaller desktop office text actually increases in size. Some paragraphs include 40px bottom padding. Large paragraph bounds also include blank lines; do not translate all of that height into a universal spacing token.

The bottom row pairs copyright with FOLLOW US and Instagram/Facebook links. Social link boxes remain 35 × 35px on both viewports. Copyright wraps to two lines on mobile while the social group stays alongside it. A large, faint company symbol is cropped at the lower right. Its precise asset path, size and opacity are unavailable.

Tokens — Motion & Interaction

The supplied data establishes transition declarations and visible affordances. It does not establish the full interaction choreography.

Element or treatment Measured declaration What can be concluded
Most links and text elements 0.3s cubic-bezier(0.4, 0.4, 0, 1) A common smooth transition timing exists; specific hover endpoints were not supplied.
Body background background 0.5s cubic-bezier(0.4, 0.4, 0, 1) Background changes can transition; the trigger and color sequence are unverified.
MENU button 0.3s Transition timing is declared; the opened state was not captured.
Desktop service tiles 0.8s cubic-bezier(0.4, 0.4, 0, 1) Longer transitions are declared.
Desktop service tile delays 0.5s, 0.7s, 0.9s, 1.1s A staggered sequence is supported by CSS values; its trigger and animated properties are unknown.
Mobile service links 0.3s cubic-bezier(0.4, 0.4, 0, 1) The desktop stagger is absent from the sampled mobile link declarations.
Desktop project image links 0.8s with 0.3s delay, same common easing Timing is measured; no image zoom or reveal direction was verified.
Previous-project button 0.4s cubic-bezier(0.4, 0.4, 0.05, 1) Measured control transition, not a verified slide duration.
Next-project button 1s cubic-bezier(0.4, 0.4, 0, 1) Different measured timing; do not silently normalize the source description.
Sampled element animations none No active CSS animation was reported on these elements at sampling time. This does not exclude parent, pseudo-element or script-driven motion.

The large repeated brand text and horizontal project arrangement do not by themselves prove a marquee or autoplay. The hero's media behavior is unavailable. No evidence establishes hover zoom, parallax, scroll speed, menu easing, sound, automatic carousel advancement or reduced-motion support.

Recommended adaptation: retain the common 300ms easing for color and opacity feedback, make all essential content visible without an entrance animation, and add reduced-motion behavior. If a rail is implemented, provide explicit controls and keyboard access before adding optional animation.

Surfaces

Layer Observed appearance Structural purpose
Opening region Near-black captured field with reversed foreground copy; background media restricted Large introductory stage with low-set content
Persistent header Transparent overlay with logo, labels, filled pills and a fine circular MENU outline Identity and navigation across changing surfaces
Introduction Dark heading and gray prose; full surrounding composition not visually captured Company positioning and background
Services White text, dark measured tile bases and background-image references Four direct service destinations; parent surface unverified
Projects and news White canvas, dark titles, gray secondary text and a fine section divider Readable evidence and updates
Destination links Navy or teal pills, without visible elevation Compact action hierarchy
Recruitment/contact Dark measured bases and reversed labels; final imagery unverified Large navigational panels
Footer Full teal field, white information and faint decorative branding Strong closing identity and company details

The visible page has no general shadow-based elevation system. Separation comes from background changes, whitespace, image boundaries, typography and thin rules. Roundness is concentrated in controls.

Imagery

The directly visible project photography is documentary architectural imagery. Buildings are shown clearly in daylight, with blue sky, façades, glass, landscaping and surrounding circulation space. The images provide real-world scale and evidence of completed work. Their rectangular crops and natural colors sit comfortably within the white project section.

The logo is a supplied graphic combining a navy/teal symbol with Japanese lettering. Preserve its proportions and use appropriate light/dark lettering variants when authorized assets are available. A font recreation of the company wordmark would not reproduce the observed identity.

The footer combines three image roles: a sponsorship poster with its own graphic palette, recognizable social marks, and a very large low-contrast company symbol. Keep the poster as artwork, including its embedded lettering. Do not promote its yellow into a general CTA color.

The hero media is unavailable in the current captures. Service, news and recruitment image references exist in the DOM, but their subjects cannot be described reliably from the supplied visual evidence.

Observed Asset References
Asset Original-page evidence Reuse limitation
Company logo Visible in desktop/mobile captures; linked to the homepage No complete image URL supplied
Shopping-center project photograph Visible frame associated with /works/J7cJ8cM8 This is a project-page link, not an image-file URL
Peace Deli project photograph Visible frame associated with /works/0pXk2hpi Image-file references in the record are incomplete
First desktop project image Reserved frame associated with /works/TfY1pDX6 Blank in the supplied screenshot
Service imagery Four mobile background-image references with filenames indicating 590x786 sources Full URLs truncated; crop and subject unverified
News and recruitment imagery Background-image references in mobile DOM fragments Complete reusable URLs and visual subjects unavailable
Marathon poster Visible in the desktop footer No asset URL supplied
Footer symbol and social marks Visible in footer captures No complete artwork URLs supplied

Do not turn empty SVG placeholders into replacement photography or construct missing asset URLs from truncated strings. Use authorized assets supplied separately, or clearly distinguish an adaptation's replacement imagery from this reference.

Layout & Responsive Behavior

Page Sequence

The measured homepage follows this order: opening statement and anniversary link; company introduction with oversized brand lettering; services; project rail; news; recruitment; job details and contact; sponsorship and office footer.

It is a full corporate homepage with multiple audiences and destinations. The layout should retain service discovery, project credibility, company information and recruitment as distinct content responsibilities.

Desktop Composition

At 1440px, standard sections align to a 1180px span from x=130px to x=1310px. The header starts at 30px; hero copy starts at 60px. The project rail begins at the section edge and extends beyond the viewport, leaving the third visible item partially cut off. The footer information begins around 394px, establishing another deliberate offset.

Service tiles form one continuous four-column row. Section descriptions sit beside large headings. List buttons occupy the right side of section headers. News remains a vertical sequence of wide rows. The recruitment feature is full width, followed by two side-by-side destinations. Footer offices form two columns.

Mobile Composition

At 390px, ordinary content and footer records use 30px side gutters. Important changes are structural:

  • The desktop navigation and its two pills disappear from the closed header; the circular MENU control remains.
  • The hero anniversary link moves below the copy and shrinks from 380 × 90px to 220 × 70px.
  • Section descriptions move below headings, and list links move below content.
  • Service panels change from four tall columns to four full-width horizontal panels.
  • Projects remain arranged horizontally with partial next-item exposure in the measured geometry.
  • News keeps media space to the left and text to the right, using smaller dimensions.
  • Job details and contact change from two columns to two stacked full-width links.
  • Office records collapse to one column, while the bottom copyright/social row remains shared.

The visible mobile opening boundary is approximately 802px, leaving white content below it in the first 844px capture. Desktop opening content fills the 1000px viewport.

Breakpoint and Overflow Limits

A max-width:1140px media query appears in source fragments for responsive line-break handling. This does not establish that navigation visibility, tile stacking or every other change occurs at that exact width. Intermediate tablet layouts were not supplied.

Oversized wordmarks and project items have bounds beyond the viewport. These should be clipped or scrolled within their intended components. The evidence does not prove that the entire document should scroll horizontally.

The CSS below uses recommended breakpoints and modern layout primitives to approximate the two recorded endpoints. It does not claim to recover the original responsive formulas.

Do’s and Don’ts

Do
  • Preserve the solid teal/navy brand pair and use white expanses to give it impact.
  • Retain the difference between dense Japanese display lettering and light Jost English labels.
  • Keep the main hero statement low and left aligned with its observed two-line break.
  • Use square project imagery and unboxed text beneath it.
  • Keep metadata subordinate through size, gray color and slash-separated structure.
  • Maintain different alignment systems for header, hero, ordinary sections and desktop footer.
  • Concentrate rounded shapes in list links, header pills, MENU and MORE.
  • Stack service panels and relocate list buttons beneath content on mobile.
  • Preserve the practical office directory and local sponsorship in the footer.
  • Document image failures and untested behaviors separately from the intended reusable appearance.
Don’t
  • Don't treat the hero restriction message as branded copy or reproduce it in a new page.
  • Don't invent the missing hero scene or describe unobserved footage as current content.
  • Don't round every photograph or add shadowed containers around the project items.
  • Don't turn the mobile project rail into a two-column grid without identifying that as a redesign.
  • Don't replace the circular MENU label with an unrelated icon system when matching this reference.
  • Don't assume the global Times value or every declared font variable describes visible typography.
  • Don't equate the existence of a transition with a verified hover, scroll or autoplay behavior.
  • Don't use the marathon poster's colors as general interface accents.
  • Don't copy blank paragraph lines or absent imagery as intentional whitespace requirements.
  • Don't preserve the captured white-on-white navigation collision in an accessible adaptation.

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

  • Use a resilient media fallback. Keep the opening statement and anniversary link independent of the background media. If media cannot load, show a stable dark surface or an authorized poster instead of exposing a third-party restriction screen.
  • Give the header explicit surface states. Use readable navigation and appropriate logo artwork over dark, white and teal sections. Maintain clearance for anchor targets and keyboard focus.
  • Improve small-text contrast on teal. White against #06b294 has an approximately 2.7:1 calculated contrast ratio. For small essential labels and office text, consider navy text or a darker teal surface. The source's white treatment is documented, not an accessibility endorsement.
  • Increase mobile project metadata readability. The measured 10px size and 1.01 line height are tight. A recommended adaptation is 12–13px with a 1.5 line height and natural wrapping.
  • Use semantic headings. The source samples contain many visually prominent P elements. Implement the same visual hierarchy using an appropriate h1, section headings and project headings.
  • Make the menu operable. Provide an accessible name, expanded state, controlled region, keyboard access and focus return. If implemented as a modal, also provide appropriate focus containment and Escape handling.
  • Make the project rail reachable. Offer labeled previous/next controls where useful, keyboard access and a visible focus indicator. Do not depend exclusively on drag or swipe.
  • Respect reduced motion. Remove optional staggers and background movement when reduced motion is requested. Essential content should remain visible if enhancement scripts fail.
  • Handle assets and long content deliberately. Reserve image space, provide meaningful alternatives, and allow titles, addresses and phone numbers to wrap without breaking the layout.
  • Keep decorative branding out of reading order. Mark repeated giant wordmarks and the footer watermark as decorative. Give social links descriptive accessible names and larger hit areas than their artwork if needed.

Agent Prompt Guide

Quick Color Reference
  • Main white surface: #ffffff.
  • Strong headings and dark fallback panels: #141414.
  • Main supporting prose: #5f5f5f.
  • Dates and project metadata: #777777.
  • Brand teal: #06b294; measured anniversary fill: #05b193.
  • Main destination navy: #002d72; measured mobile list navy: #003077.
  • Source reversed labels: white; secondary reversed text: 70% white.
  • Shapes: square content fields, pill links, fine circular controls.
Overall Prompt

“Create a Japanese electrical-construction corporate homepage using the documented I-TECH MURAMOTO visual relationships. Combine white content sections, solid teal #06b294, deep navy #002d72, dark ink #141414, heavy Japanese Gothic headings and light Jost English labels. At a 1440px desktop width, use a 1180px ordinary content span, a 30px header inset and 60px hero inset. Place a two-line Japanese statement low at the left of a large opening field and a teal anniversary capsule at the lower right. Follow with company information, four square-cornered service panels, an architectural project rail, dated news rows, recruitment/contact destinations and a teal office footer. Keep project images rectangular and unboxed. At 390px, use 30px content gutters, stack services and office records, move list links below their content and retain a horizontal project rail. Use a dark fallback for unavailable hero media; do not invent the original scene.”

Example Component Prompts
  1. Header: “Build a persistent corporate header with a supplied company logo at the left, small 13px Japanese navigation at the right, teal and navy recruitment pills, and a fine outlined MENU circle. Use 70px for the desktop circle and 60px on mobile. Hide the desktop link row on narrow screens. Add explicit surface-aware colors so navigation stays readable.”
  2. Anniversary capsule: “Create a teal #05b193 editorial link measuring 380 × 90px on desktop and 220 × 70px on mobile. Place a white Japanese announcement at the left and a thin circular MORE treatment at the right. Use a 50px capsule radius, no shadow, and two-line mobile label wrapping.”
  3. Project rail: “Create a white horizontal rail of square-cornered architectural photographs. Desktop image frames are 432 × 300px with 40px gaps. Put a heavy 26px Japanese project title 30px below each image, then a gray 16px metadata line. Mobile content panels are 225px wide with 20px gaps. Keep long titles natural and make metadata readable. Add accessible rail navigation as an implementation enhancement.”
  4. Services: “Create four touching service links with centered white Japanese labels and square corners. Use 295 × 382px desktop tiles within an 1180px span, changing to 330 × 175px stacked panels at 390px. Use authorized imagery when supplied; retain a dark fallback and do not invent the original image subjects.”
  5. Footer: “Create a full-width teal company footer with a sponsorship poster, five office records, a pale horizontal rule and small copyright/social information. Offset the desktop information block to the right and divide offices into two columns; use one column with 30px gutters on mobile. Add a very faint oversized authorized brand symbol at the lower right.”

Quick Start

CSS Custom Properties

This is a recommended adaptation, not copied production CSS. It preserves measured sizes where practical and uses conventional layout primitives. The 1280px navigation and 768px content breakpoints are recommendations; only the supplied endpoint layouts are verified.

The original font family names are retained as references. Load appropriately licensed font files separately. If the display face is unavailable, choose a suitable bold fallback and change --heading-weight to 700. No asset or font URLs are invented here.

The hero starts with a solid fallback. The services backing surface, mobile project image height and news-thumbnail geometry are explicit implementation approximations. Menu behavior, header-state updates and arrow-button handlers require separate accessible implementation.

:root {
  /* Measured palette, with descriptive aliases. */
  --brand: #06b294;
  --anniversary: #05b193;
  --navy: #002d72;
  --navy-mobile: #003077;
  --ink: #141414;
  --paper: #ffffff;
  --text: #333333;
  --body-muted: #5f5f5f;
  --meta: #777777;
  --on-dark-muted: #f5f5f5;
  --on-teal: #ffffff;

  /* Estimated rule colors. */
  --rule: #e8e8e8;
  --rule-reversed: rgb(255 255 255 / 0.24);

  /* Source-declared families; provide licensed fonts separately. */
  --font-display: '見出ゴMB1', sans-serif;
  --font-body: '中ゴシックBBB JIS2004', sans-serif;
  --font-latin: 'Jost', sans-serif;
  --heading-weight: 400;

  --content-width: 1180px;
  --page-gutter: max(30px, calc((100% - 1180px) / 2));
  --section-space: 120px;
  --radius-pill: 50px;
  --ease: cubic-bezier(0.4, 0.4, 0, 1);
  --feedback: 300ms;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: var(--font-body);
  line-height: 1.7;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.container {
  width: min(var(--content-width), calc(100% - 60px));
  margin-inline: auto;
}
section[id] { scroll-margin-top: 120px; }

/* Surface state is an enhancement; update it in application code. */
.site-header {
  position: fixed;
  inset: 30px 30px auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  color: white;
}
.site-header[data-surface='light'] { color: var(--navy); }
.site-logo {
  flex: 0 1 330px;
  width: 330px;
  margin-right: auto;
}
.site-logo img { width: 100%; height: auto; }
.primary-nav {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.primary-nav a {
  padding: 15px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.primary-nav .nav-pill {
  padding: 5px 16px 5px 15px;
  border-radius: 40px;
  color: white;
  background: var(--navy);
}
.primary-nav .nav-pill + .nav-pill { margin-left: 8px; }
.primary-nav .nav-pill--teal {
  color: var(--on-teal);
  background: var(--brand);
}
.menu-button {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font: 400 10px/1.4 var(--font-latin);
}

/* Solid fallback; no unavailable media subject is reconstructed. */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 160px 60px 60px;
  color: white;
  background: var(--ink);
}
.hero__layout {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.hero__title {
  margin: 0 0 20px;
  font: var(--heading-weight) 64px/1.3 var(--font-display);
}
.hero__copy {
  max-width: 414px;
  margin: 0;
  color: var(--on-dark-muted);
  font-size: 20px;
  line-height: 2;
  letter-spacing: 0.05em;
}
.anniversary-link {
  flex: 0 0 auto;
  width: 380px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 20px 15px 25px;
  border-radius: var(--radius-pill);
  color: var(--on-teal);
  background: var(--anniversary);
  text-decoration: none;
}
.anniversary-link__label {
  font: 700 14px/1.4 var(--font-display);
  letter-spacing: 0.05em;
}
.anniversary-link__more {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-reversed);
  border-radius: 50%;
  font: 200 10px/1.4 var(--font-latin);
}

.section { padding-block: var(--section-space); }
.section-heading {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
}
.section-title {
  margin: 0;
  color: var(--ink);
  font: var(--heading-weight) 52px/1.4 var(--font-display);
}
.section-description {
  max-width: 425px;
  margin: 0;
  color: var(--body-muted);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.section-heading .list-link { margin-left: auto; }
.list-link {
  width: 180px;
  min-height: 70px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-radius: var(--radius-pill);
  color: white;
  background: var(--navy);
  font: 700 16px/1.4 var(--font-display);
  letter-spacing: 0.05em;
  text-decoration: none;
}
.list-link__arrow { color: var(--brand); }
.section-action--below { display: none; }

/* Recommended backing: the original parent fill is unverified. */
.services { background: var(--ink); }
.services .section-title,
.services .section-description { color: white; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-card {
  min-height: 382px;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 0;
  color: white;
  background: var(--ink);
  text-align: center;
  text-decoration: none;
  font: var(--heading-weight) 28px/1.4 var(--font-display);
}

/* Native scrolling is an adaptation, not verified source behavior. */
.project-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 432px;
  gap: 40px;
  overflow-x: auto;
  padding: 4px var(--page-gutter) 20px;
  scroll-padding-inline: var(--page-gutter);
  scroll-snap-type: x proximity;
}
.project-card {
  min-width: 0;
  scroll-snap-align: start;
  text-decoration: none;
}
.project-card__image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 0;
}
.project-card__title {
  margin: 30px 0 20px;
  color: var(--ink);
  font: 900 26px/1.3 var(--font-display);
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}
.project-card__meta {
  margin: 0;
  color: var(--meta);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.rail-control {
  width: 60px;
  height: 60px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--navy);
  background: white;
}

.news-list { display: grid; gap: 40px; }
.news-item {
  min-height: 191px;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  text-decoration: none;
}
/* Thumbnail geometry is an approximation of the reserved offset. */
.news-item__image { width: 140px; aspect-ratio: 1; object-fit: cover; }
.news-item__date {
  display: block;
  margin-bottom: 15px;
  color: var(--meta);
  font: 400 18px/1 var(--font-latin);
}
.news-item__title {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.destination {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  background: var(--ink);
  text-align: center;
  text-decoration: none;
}
.destination--recruit { min-height: 583px; margin-bottom: 8px; }
.destination__english { font: 300 48px/1.4 var(--font-latin); }
.destination--recruit .destination__english { font-size: 64px; }
.destination__japanese { color: rgb(255 255 255 / 0.7); font-size: 16px; }
.destination-grid { display: grid; grid-template-columns: repeat(2, 1fr); }

.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: 120px 60px;
  color: var(--on-teal);
  background: var(--brand);
}
.footer-inner {
  position: relative;
  z-index: 1;
  width: min(772.5px, calc(100% - 60px));
  margin-inline: auto;
}
.office-columns {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 55px;
}
.office + .office { margin-top: 30px; }
.office h3 {
  margin: 0 0 15px;
  font: var(--heading-weight) 18px/1.4 var(--font-display);
  letter-spacing: 0.05em;
}
.office address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 100px;
  padding-top: 40px;
  border-top: 1px solid var(--rule-reversed);
  font: 400 10px/2 var(--font-latin);
  letter-spacing: 0.05em;
}
.social-links { display: flex; align-items: center; gap: 8px; }
.social-links a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.social-links img { width: 35px; height: 35px; }

/* Recommended desktop approximation of the footer's offset. */
@media (min-width: 1280px) {
  .footer-inner { inset-inline-start: 60px; }
}
@media (max-width: 1279px) {
  .primary-nav { display: none; }
}
@media (max-width: 767px) {
  :root { --section-space: 60px; }
  .site-header { inset: 20px 20px auto; gap: 20px; }
  .site-logo { flex-basis: 255px; width: 255px; }
  .menu-button { flex-basis: 60px; width: 60px; height: 60px; }
  .hero { min-height: 95svh; padding: 120px 30px 60px; }
  .hero__layout { flex-direction: column; align-items: flex-start; gap: 30px; }
  .hero__title { margin-bottom: 10px; font-size: 34px; }
  .hero__copy { max-width: 250px; font-size: 15px; line-height: 1.7; }
  .anniversary-link { width: 220px; min-height: 70px; padding: 0 10px 0 20px; }
  .anniversary-link__label { max-width: 118px; font-size: 12px; line-height: 1.5; }
  .anniversary-link__more { flex-basis: 50px; width: 50px; height: 50px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 30px; }
  .section-title { font-size: 28px; }
  .section-description { max-width: 290px; font-size: 15px; }
  .section-heading .list-link { display: none; }
  .section-action--below { display: flex; justify-content: center; margin-top: 60px; }
  .list-link { background: var(--navy-mobile); font-size: 15px; letter-spacing: normal; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 175px; font-size: 20px; }
  .project-rail { grid-auto-columns: 225px; gap: 20px; }
  .project-card__image { height: 200px; } /* Recommended approximation. */
  .project-card__title { margin: 20px 0 15px; font-size: 20px; letter-spacing: normal; }
  .project-card__meta { font-size: 12px; line-height: 1.5; letter-spacing: normal; } /* Readability improvement. */
  .news-list { gap: 25px; }
  .news-item { min-height: 126px; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; }
  .news-item__image { width: 110px; }
  .news-item__date { margin-bottom: 10px; font-size: 15px; }
  .news-item__title { font-size: 15px; line-height: 1.5; }
  .destination--recruit { min-height: 231px; }
  .destination-grid { grid-template-columns: 1fr; }
  .destination-grid .destination { min-height: 150px; }
  .destination__english,
  .destination--recruit .destination__english { font-size: 28px; }
  .destination__japanese { font-size: 13px; }
  .site-footer { padding-block: 80px 30px; }
  .office-columns { grid-template-columns: 1fr; gap: 40px; }
  .office address { font-size: 13px; }
  .footer-bottom { margin-top: 120px; line-height: 1.5; }
}

/* Recommended contrast variant for essential text on teal. */
.readable-teal { --on-teal: #002d72; }

/* Recommended feedback and accessibility enhancements. */
a, button {
  transition: color var(--feedback) var(--ease),
              background-color var(--feedback) var(--ease),
              opacity var(--feedback) var(--ease);
}
:where(a, button):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .project-rail { scroll-snap-type: none; }
}

Use real links for destination components and real buttons for menu/rail controls. Keep MORE inside its parent link. In the example structure, .office-columns contains two office groups that become consecutive groups on mobile. Desktop and mobile list-link placements may use separate presentation instances, with only the applicable instance displayed and exposed to keyboard navigation.

The stylesheet's wider social hit areas, readable mobile metadata, contrast variant and light-surface header state are intentional recommendations. They differ from the exact captured appearance.

Tailwind v4 Token Mapping

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

@theme inline {
  --color-brand: var(--brand);
  --color-anniversary: var(--anniversary);
  --color-navy: var(--navy);
  --color-ink: var(--ink);
  --color-paper: var(--paper);
  --color-body-muted: var(--body-muted);
  --color-meta: var(--meta);

  --font-heading: var(--font-display);
  --font-copy: var(--font-body);
  --font-utility: var(--font-latin);

  --text-hero: 64px;
  --text-hero-mobile: 34px;
  --text-section: 52px;
  --text-section-mobile: 28px;
  --text-project: 26px;
  --text-project-mobile: 20px;

  --spacing-content: 1180px;
  --spacing-gutter: 30px;
  --spacing-section: 120px;
  --radius-pill: 50px;
  --ease-brand: cubic-bezier(0.4, 0.4, 0, 1);
}

Sources & Evidence

  • Inspected original/final page: I-TECH MURAMOTO. Both supplied URLs are identical; the recorded response status is 200.
  • Capture timestamp: 2026-10-01T16:51:13.086Z, equivalent to October 2, 2026, at 01:51:13 JST. This document analyzes those supplied observations; it does not claim a separate live visit.
  • Desktop evidence: three supplied 1440 × 1000 captures showing the opening region, projects/news boundary and footer, plus rendered text, links, custom properties and computed element records. Document height was approximately 6925.8px.
  • Mobile evidence: two supplied 390 × 844 captures showing the opening region and lower footer, plus corresponding rendered DOM and computed styles. Document height was approximately 6388.7px.
  • Identity evidence: the original page title and logo identify 株式会社アイテックムラモト; its footer contains the matching English company copyright and office information.
  • Linked destinations: homepage-rendered links establish the roles of /about, /service, /works, /news, /recruit and /contact. Their destination pages were not separately inspected.
  • Readiness procedure: the supplied collection notes describe an initial observation of at least five seconds, bounded waits for document load, finite motion, layout/text stability and visible image decoding, and traversal of intermediate scroll positions. Perpetual animations were temporarily paused during readiness checks and resumed afterward. SharedWorkers and service workers were disabled.
  • Interaction limits: scrolling and resulting page positions are evidenced. Menu opening, hover states, rail-button results, touch gestures, form behavior, media playback, keyboard operation and reduced-motion behavior were not demonstrated.
  • Visual limits: the hero media region displayed a security restriction, the first desktop project image appeared blank, and several middle-page sections had DOM/style evidence without corresponding screenshots. Truncated asset references and offscreen measurements do not establish final image appearance or motion.

All implementation aliases, chosen breakpoints, accessibility changes and fallback treatments are recommendations where identified. Font names, element dimensions, source color variables and transition timings are grounded in the supplied original-page evidence.

スタイルやページの種類、ジャンルが近いデザインを集めました。

← デザイン一覧に戻る