01 / Colors

青ひとつと、生成りの面

自社トークンは --ist-* の 20 個(プラットフォーム由来は 0 個)。うち実装を支えているのは --ist-main(var() 参照 240 回)と --ist-base(42 回)の2つで、残りの色はカテゴリ用・グラフ用に待機している。--ist-lgray は var() 参照 0 回・可視 0 要素で、宣言だけが残った死に変数。

--ist-main
#0b41cd
ブランド青。var() 240 回/可視 93 要素・塗り面 14 要素
--ist-base
#f5f5f0
生成りの面。塗り面 52 要素。カードとタグの地色
--ist-submin
#f3f5fc
IR の数値ボックス。var() は 0 回で hex 直書き
--ist-black
#222222
見出し・本文。可視 103 要素
--ist-defaultText
#1f1f1f
body の color。可視 56 要素。#222 とほぼ同じ黒が併存
--ist-dgray
#767676
日付・注記。可視 29 要素
--ist-linegrey
#dfdfdf
罫線。var() 15 回
--ist-green
#00be8c
塗り面 3 要素(グラフの凡例)
--ist-red
#e62300
注意・必須表記。var() 10 回
--ist-purple
#910faf
var() 9 回・可視 0 要素(カテゴリ色)
--ist-lgray(未使用)
#c8c8c8
var() 0 回・可視 0 要素。使わない
数字のグラデ
135deg, #197dfa → #0b41cd
IR の数値の文字グラデ。可視 8 要素

グラデーションの宣言だけ linear-gradient(90deg, #f5f5f0, #0b41cc 62%) と #0b41cc(1 低い値)を直書きしている箇所がある。実装のゆらぎなので、新規実装では #0b41cd に統一してよい。

02 / Typography

Noto Sans JP 1 本で、palt と 0.05em だけ

可視テキスト 296 / 253 要素すべてが "Noto Sans JP", sans-serif。CSS 全文の font-family 宣言もこの 1 種類だけで、明朝も欧文専用書体も存在しない。font-feature-settings: "palt" が 1073 要素、letter-spacing: .05em が CSS 全文で 454 回。

字間は body 継承ではなく、要素ごとに 0.05em を書く

サイズに比例して px が変わる(12px→0.6px / 16px→0.8px / 42px→2.1px)= 各要素が em を持っている証拠。例外は 68px・82px の大きな数字だけで、そこは 0.03em に落としている。

letter-spacing: normal / palt なし

創造で、想像を超える。革新的な医薬品とサービスの提供を通じて新しい価値を創造する。

letter-spacing: normal / palt あり

創造で、想像を超える。革新的な医薬品とサービスの提供を通じて新しい価値を創造する。

★実装:letter-spacing: .05em / palt あり

創造で、想像を超える。革新的な医薬品とサービスの提供を通じて新しい価値を創造する。

大見出しほど細い(42px / 50px / 64px は weight 400)

Page Title64px / 400 / lh 1.20
letter-spacing .05em = 3.2px
中外製薬について
Statement50px / 400 / lh 1.40
.05em = 2.5px / 可視 5 要素
革新的な医薬品とサービスの提供を通じて新しい価値を創造する
Section Heading42px / 400 / lh 1.40
.05em = 2.1px / 可視 5 要素
私たちは病気より先に未来へ行く
Heading S24px / 600 / lh 1.40
.05em = 1.2px / ★太くするのはここから
中外製薬の強み
Lead20px / 600 / lh 1.40
.05em = 1px / 可視 53 要素
独自の技術とサイエンスを強みとする研究開発型製薬企業
Body16px / 400 / lh 1.80
.05em = 0.8px / 可視 48 要素
中外製薬は、抗体エンジニアリング技術をはじめとする独自の創薬技術で、他社にはつくれない医薬品を生み出してきました。患者さんの生き方や価値観、求める治療法や優先度はそれぞれ異なります。
UI14px / 400 / lh 1.60
.05em = 0.7px / 可視 46 要素
医療関係者の皆さま / 株主・投資家の皆さま
Caption12px / 400 / lh 1.40
.05em = 0.6px / 可視 60 要素(最多)
2026/09/09 *1 Copyright © 2026 IQVIA. 医療用医薬品市場統計
Weight 30016px / 300 / lh 1.40
★メガメニュー第2階層のみ
CEOメッセージ / 企業理念 / 行動規準 / スローガン

ウェイトは 300 / 400 / 600 の 3 段しかない

WeightGoogle Fonts の配信実測(トップ / 下層)用途
300あり少数メガメニューの第2階層リンク
400あり85 / 94 要素本文、および 42px 以上の大見出し
600あり210 / 158 要素(最多)24px 以下の見出し・ナビ・カード見出し
700無い1 要素(Cookie バナー)当てると合成太字になる。使わない

Web フォントは Google Fonts から wght@300;400;600 を unicode-range で分割配信(フォント要求 46 件)。document.fonts に unloaded が多いのは異常ではなく、そのページに出てこない文字のサブセットを読んでいないだけ。

行間は 3 段(1.8 / 1.6 / 1.4)

line-height実測(トップ / 下層)用途
1.8047 / 35 要素本文(body の既定。28.8px ÷ 16px)
1.6071 / 65 要素読み物の段落
1.40103 / 85 要素(最多)見出し・ナビ・カード
1.0026 / 20 要素大きな数字・1 行で収めるラベル
03 / Components

角丸は 3px と 16px の 2 つだけ

border-radius: 3px はボタンとタグ、16px はカードと用途が完全に分かれている。ボタンの文字は 太らせない(weight 400)。右パディングが 52px と大きいのは矢印のぶん。

中外製薬ってどんな会社? 企業広告・TVCM フォーカス状態 ニュースリリース IR

#患者中心#技術・サイエンス#人財ハッシュタグは面を持たず、13px / 600 / #0b41cd の文字だけ(可視 51 要素)。

カードは上下で角丸を分けて書く

border-radius: 16px 16px 0 0
2026/09/09
「中分子医薬品」が広げる治療の可能性

まだ治療法がない病に、抗体でも低分子でも届かなかった標的へ。中分子というアプローチを解説します。

border-radius: 0 0 16px 16px
2026/09/07
がん治療は「個別化」の時代へ

一人ひとりの病態に合わせて治療を選ぶ。ゲノム医療がもたらした変化を研究者が語ります。

box-shadow は使わない
2026/07/29
独創的な研究は、どのように生まれたのか

浮きは影ではなく、角丸 16px と地色 #f5f5f0 だけで作る。実サイトに自前の box-shadow は 1 つも無い。

数字だけ 0.03em に詰める

抗体医薬品売上
No.1
国内
Breakthrough Therapy
9
指定 回
自社創製品のグローバル承認国数
110
カ国以上

68px / 82px の数字は letter-spacing: .03em、それ以外はすべて .05em。地色は --ist-submin(#f3f5fc)。

04 / Forms

入力は下線だけ

サイト内検索のみ。枠線も角丸も持たず、下線とアイコンで構成する。input はフォント継承が効かないので font-family を明示的に当て直す。

05 / Elevation

影が 1 つも無い

実測された box-shadow は rgba(0,0,0,.2) 0 0 18px 0 の 1 件だけで、それも OneTrust の Cookie 同意バナーのもの。サイト本体に自前の影は存在しない。

LevelShadow用途
0noneこのサイトのすべての要素

浮きは 角丸 16px + 地色 #f5f5f0 で作る。新規実装で影を足すと、サイトのフラットさが失われる。

06 / Layout

コンテナ 1366px、gap は 16px

1366pxコンテナ最大幅(実測 15 / 12 要素)
872px読み物の段落幅
351pxカード幅(実測 44 件)
16pxgap の既定(実測 45 件・最多)
960px主ブレークポイント(宣言 466 回)
767pxその下の微調整(144 回)

html も body も 4 幅(1440 / 1200 / 834 / 375px)すべてで 16px / 28.8px のまま。流体ルートではないので、rem → px の換算は素直に 16 倍でよい。(prefers-reduced-motion: reduce) を 133 回宣言しており、アニメーションは必ず止められる。