COLOR

赤は面ではなくグラデーションで出る

単色の鹿島レッド #e6002d は可視 1 要素だけ。ブランドの赤が面積を取るのは採用セクションのグラデーション(可視 71 要素)。本文は純黒ではなく暖かい墨色 #363434。

Recruit Gradient
#a4001d → #ff626c
★可視 71 要素。採用カード面・ラベル。このサイトで最も面積を取るブランド表現
鹿島レッド
#e6002d
可視 1 要素(現在地マーカー)。ベタ塗りで多用しない
Text Primary
#363434
★本文・見出し。可視 78 要素(トップ)/ 83 要素(企業情報)
Text Secondary
#595757
日付・カテゴリ・補助(可視 23 要素)。暗面の枠にも使う
Surface Dark
#1e1e1e
採用カードの下地(可視 71 要素)
Border
#9ea3a6
★枠。box-shadow: 0 0 0 1px で引く(21 要素)
Surface Cool
#d8dce0
「お探しの情報はありましたか?」の帯(可視 72 要素)
Background
#f5f6f7
★トップの地色。下層ページは #ffffff

#4b81e8 は採用しないこと。クッキー同意バナー(外部 CMP)の「同意する」ボタン専用で、書体も Helvetica, Calibri, Arial とサイト本体(Noto Sans JP)と別系統になっている。

TYPOGRAPHY

字間は em の三段階しかない

実測はすべて px で返るが、font-size で割ると 0.05em / 0.08em / 0.1em に綺麗に揃う。文字が大きいほど字間を広げる。palt は 1 要素も使わず、字送りは letter-spacing だけで作る。

0.05em(既定)
16px→0.8px / 14px→0.7px
18px→0.9px / 12px→0.6px
鹿島の技術
body に 1 回書いて継承させる。本文・ナビ・ラベル・フッターすべて
0.08em(カード見出し)
18px→1.44px
鹿島の技術
ニュース記事のタイトル。本文より少し開く
0.1em(大見出し・ナビ)
42px→4.2px / 28px→2.8px
24px→2.4px / 16px→1.6px
鹿島の技術
セクション見出しとグローバルナビ。サイズが違っても比率は同じ
0.02em(記事タイトル)
31px→0.62px
鹿島の技術
★唯一詰める場所。大きい見出しの中でここだけ例外
121416 182022 242831 42
Section Display ★Noto Sans JP / 42px / 700
lh 58.8px (1.40) / ls 0.1em
鹿島の事業
Page HeadingNoto Sans JP / 28px / 700
lh 39.2px (1.40) / ls 0.1em
鹿島について
Hero CopyNoto Sans JP / 32px / 700
lh normal / ls 0.05em
KAJIMAはつくる。
Article Title ★Noto Sans JP / 31px / 700
lh 31px (1.00) / ls 0.02em
社長ごあいさつ
Heading 3Noto Sans JP / 24px / 700
lh 33.6px (1.40) / ls 0.1em
サステナビリティ
Card Heading ★Noto Sans JP / 18px / 500
lh 25.2px (1.40) / ls 0.08em
鹿島建設がわかる、未来が見えるはやわかりKAJIMA
Body / Nav ★Noto Sans JP / 16px / 400
lh normal / ls 0.05em
鹿島の最新トピックスをご紹介します。
Body (block)Noto Sans JP / 16px / 500
lh 24px (1.50) / ls 0.05em
このたびの令和8年熊本地震により亡くなられた方々に謹んで哀悼の意を表しますとともに、被災された皆さまに心よりお見舞い申し上げます。
Global NavNoto Sans JP / 16px / 500
lh 16px (1.00) / ls 0.1em
企業情報 IR情報 事業
English HeadingRoboto Condensed / 42px / 700
lh 1.40 / ls 0.1em
NEWS   PROJECTS
UtilityNoto Sans JP / 14px / 500
lh 14px (1.00) / ls 0.05em
FAQ お問い合わせ English
SmallNoto Sans JP / 12px / 400
ls 0.05em
このサイトについて ウェブアクセシビリティ 個人情報保護方針

body { line-height: normal }。日本語サイトとしては珍しく body で行間を決めない。見出しは一律 1.40(42 / 28 / 24 / 22 / 18px すべて)、本文ブロックは 1.50、ナビ・ラベル・日付は 1.00(実測 92 要素で最多)。長い本文を置くときだけ 1.5 を明示する。

font-feature-settings は実測 0 件。palt も kern も tnum も当てていない。約物を詰めたいときは letter-spacing を 0.02em 側へ動かすのがこのサイトの流儀(記事タイトル 31px の例)。

欧文は Roboto Condensed。英字のセクション見出し(NEWS PROJECTS TECHNOLOGY)だけコンデンス体に切り替え、和欧が混ざる見出しは "Roboto Condensed", "Noto Sans JP" の順で英字はコンデンス・和文は Noto の二層にする。Oswald は宣言のみで unloaded。使わない。

COMPONENTS

角丸 4px、枠は box-shadow で引く

角丸は 4px が既定(実測 76 要素)で、塗りボタンだけ 0px。枠線は border ではなく box-shadow: 0 0 0 1px #9ea3a6 で描いている(ぼかし 0 =実質 1px の枠で、影ではない)。

採用 Recruting
経営理念
ビジョン
基本方針と安全衛生・環境・品質方針
2026年9月18日
月報KAJIMA 8月号特集 福島第一原子力発電所の廃炉に向けて
2026年9月12日
鹿島の光ファイバで描く近未来のインフラ
2026年9月4日
橋ってなんで折れないの?ー「つくる」の教室 ー
Recruiting & Internship
採用情報TOP

暗面 #1e1e1e に 1px solid #595757 の枠、padding 32px、border-radius 4px。

ぼかしのある影はほぼ使わない。階層は枠線と地色(#f5f6f7 / #ffffff)で作る。現在地マーカーの rgba(0,0,0,0.2) 8px 4px 0 0 もぼかし 0 のズレ影で、浮かせるためのものではない。

LAYOUT

1440px、gap 12px、min-width 768px

項目値実測
Container1440px12 要素(最多)
Wide1680px / 1730px / 1880pxヒーロー・全幅セクション
Gap(カード)12px35 件(最多)
Gap(大カード)24px 32px7 件
Gap(セクション)40px10 件
Breakpoint(主)min-width: 768px377 件(圧倒的最多)。モバイルファースト
Breakpoint(SP)max-width: 767px50 件
Breakpoint(Wide)min-width: 1440px18 件

モバイルファースト。既定をモバイルで書き、min-width: 768px で PC を上書きする(min-width 系が max-width 系の 7 倍)。
letter-spacing を em で書いてあるので、ブレークポイントでサイズが変われば字間も自動で追従する。