技術と信頼で顧客と共に未来をひらく
トクシュな技術で素材を作る、課題に応じたソリューションを届ける。body { color: #253957 }。このサイトは黒を使わない。本文も見出しもボタンの面もすべてこの紺で、補助テキストの #516179 も紺を薄めたトーン。装飾色は #0071c1（製紙事業）と #06ad51（環境関連事業）の 2 つだけで、これは「製紙×環境」という 2 事業の対を表すための色。並べて初めて意味が立つ。
特殊紙・産業素材。技術で素材をつくる側を #0071c1 で指す。
リサイクル・環境ソリューション。#06ad51 で指す。
和文は BIZ UDPGothic（モリサワの UD 書体・プロポーショナル版）のみ。可視 155 / 79 要素のうち 155 / 79 要素がこれで、残り 1 要素だけが欧文の Poppins。Google Fonts から wght@400;700 の 2 ウェイトを配信している（フォント要求 60 件）。UD 書体は字面が大きく、濁点・半濁点が離れていて、1 7 l の判別が付きやすい。
実サイトは font-family: "Local BIZ UDPGothic", "BIZ UDPGothic", sans-serif と書いているが、CSS 全文の @font-face は webicon の 1 件だけで、Local BIZ UDPGothic を定義するものはどこにも無い。document.fonts にも載らない。先頭名は必ず外れ、2 番目の Google Fonts 配信に落ちている。OS 同梱の BIZ UDPGothic を優先してダウンロードを省く意図だったと思われるが、効いていない（フォント要求は 60 件発生する）。
| 書き方 | 結果 |
|---|---|
| font-family: "Local BIZ UDPGothic", "BIZ UDPGothic", sans-serif; | 実サイト。先頭は外れ、Google Fonts の BIZ UDPGothic が当たる |
| @font-face { font-family: "Local BIZ UDPGothic"; src: local("BIZ UDPGothic") } | 本来必要だった宣言（実サイトには無い） |
| font-family: "BIZ UDPGothic", sans-serif; | ★新規実装はこれだけでよい |
欧文の Poppins はフッターのコピーライト 1 要素だけに使われている。実サイトの宣言は Poppins, serif で、サンセリフなのにフォールバックが serif（正しくは sans-serif）。さらにその要素の font-weight は 400 だが、Google Fonts からは Poppins:wght@600 しか配信していないので、ファミリーに 1 本しか無い 600 が出る。
body { letter-spacing: .06em } と font-feature-settings: "palt" を 1 回書いて継承させる。em 宣言は 絶対値 px に解決されて子へ降りるので、サイズの違う要素でも同じ 0.96px が付く（可視 118 / 74 要素）。見出しだけ .15em 前後に上書きする。
技術と信頼で顧客と共に未来をひらく。トクシュな技術で素材を作る。
技術と信頼で顧客と共に未来をひらく。トクシュな技術で素材を作る。
技術と信頼で顧客と共に未来をひらく。
| Weight | Google Fonts の配信 | 実測（トップ / 下層） | 用途 |
|---|---|---|---|
| 400 | あり | 68 / 53 要素 | 本文・UI |
| 700 | あり | 88 / 27 要素 | 見出し・ナビ・タグ・ボタン |
| 500 / 600 | 無い | 0 要素 | 当てると 400 か 700 に丸められる |
トップでは 700 の方が多い（88 対 68）。UD 書体は Regular でも十分に強いが、このサイトは見出し・ナビ・タグをすべて Bold で立てている。
body に overflow-wrap: anywhere / word-break: normal / line-break: strict の 3 行が書かれている。line-break: strict は小書き仮名（ゃゅょっ）や長音符も行頭に来ないようにする厳格な禁則。word-break: auto-phrase は使っていない。
6px がボタン、10px がリンクカード、26px がタグ。padding は rem で、左右が非対称（右に矢印アイコンが入る）。ラベルはすべて weight 700。
input はフォント継承が効かないので、font-family と letter-spacing: .06em を明示的に当て直す。枠は 1px solid #dee1e6。
実測された box-shadow は rgba(37,57,87,.3) 0 0 0 8px の 1 件だけ。オフセット 0・ぼかし 0・広がり 8px なので、これは影ではなくブランド紺の輪。下層ページは box-shadow が 0 種。
浮きは 1px solid #dee1e6 の枠と #eeeff2 の地色で作る。新規実装で落ち影を足すと、このサイトの平らさが失われる。
設計幅は 1080 / 860 / 390px の 3 つで、各レンジの中は レイアウト全体が viewport 幅に比例して伸縮する。どのレンジでも、その設計幅ちょうどで html が 10px に着地する。
| レンジ | html の宣言 | 意味 |
|---|---|---|
| ≥ 1080px（pc） | font-size: 62.5% | 10px 固定 |
| 860–1079px（tab） | font-size: 1.1627906977vw | = 100vw / 86 → 860px で 10px |
| ≤ 859px（sp） | font-size: 2.5641025641vw | = 100vw / 39 → 390px で 10px |
| 画面幅 | html | body | line-height | letter-spacing |
|---|---|---|---|---|
| 1440px | 10px | 16px | 24px | 0.96px |
| 1080px | 10px | 16px | 24px | 0.96px |
| 1079px | 12.547px | 18.82px | 28.23px | 1.129px |
| 1000px | 11.628px | 17.44px | 26.16px | 1.047px |
| 860px | 10px | 15px | 22.5px | 0.9px |
| 859px | 22.026px | 30.84px | 46.25px | 1.850px |
| 834px | 21.385px | 29.94px | 44.91px | 1.796px |
| 390px | 10px | 14px | 21px | 0.84px |
| 375px | 9.615px | 13.46px | 20.19px | 0.808px |
| 320px | 8.205px | 11.49px | 17.23px | 0.689px |
9.615px / 21.385px / 12.547px のような半端な値が出たら、html が vw で動いている合図。1 幅だけ測って「このサイトの本文は 16px」と書かない。rem 指定は維持し、px へ読み替えない（読み替えると 390px 以外の全幅で崩れる）。
なお ≤859px の規則が 859px まで効くため、タブレット縦（768〜859px）で本文が 27〜31px まで巨大化する。390px 設計のモバイルレイアウトをそのまま引き伸ばしているため。新規実装では clamp() で上限を切るか、タブレット用の規格幅をもう 1 段挟む。
:root にある CSS 変数は --breakpoint と --breakpoint-width の 2 個だけで、どちらも JS に現在のブレークポイントを伝えるための文字列（"pc" / "tab" / "sp"）。デザイントークンの層は存在しない。ほかに interpolate-size: allow-keywords を宣言している（height: auto へのアニメーションを有効にする新しい CSS）。