文字色は #000000 と #ffffff の2色だけ(可視 31 / 92 要素)。グレーの補助テキストすら使わない。色は「分類」に割り当てられていて、バーントオレンジがブランド面、青・橙・緑が事業セグメントのタグ。
interactive の color を鵜呑みにしない。分譲住宅(bg #9c4300)の color は rgb(0,0,0) と出るが、ラベルを子の <span> に置いている構造で、実際に描画される文字は白。スクリーンショットで確認済み。
font-feature-settings: "palt" をトップページの 562 要素に適用している。letter-spacing: .04em は body に1回書くだけで、computed 0.64px が可視 119/123 要素へ px のまま継承される。em を再宣言しているのはヒーローのリードだけ(.1em = 1.6px)。
可変フォントで 100〜900 が使えるのに、実際の設計は 400 / 500 / 700 の3段だけ。400 が 102/123 要素、500 が 16、700 は 5(選択中のナビ)。36px の h1 も 28px のセクション見出しも 500。700 にしないこと。
line-height: 1.75 と palt はセット。palt で横が詰まる分、縦を 1.75 空けてバランスを取っている。片方だけ真似ない。
font-family は "Noto Sans JP", sans-serif の2段だけ(可視 123/123 要素が同一)。游ゴシック・ヒラギノを挟むとメトリクスが変わり、palt の詰め方が変わる。
セクション全体を #b85911 の面で囲み、border-radius: 50px 50px 0 0 で上 2 隅だけ大きく落とす。中のカードは #9c4300 + 10px。
「人々の“幸せ”と社会の“豊かさ”の最大化」を目指し、
価値創造の変革を推進してまいります。
padding: 16px 44px 16px 20px。右の 44px は矢印の丸のための場所。外部リンクだけ塗りをオレンジに替えて白文字にする。
カードの角丸は 10px(実測 66 要素でこのサイトの既定)。タグだけ border-radius: 0。padding: 32px 32px 70px の下 70px は日付とタグの場所。
既定は rgba(0, 0, 0, 0.04) 3px 3px 5px 0(実測 28 要素)。0 2px 4px のような真下の影ではなく、X と Y に同じ量ずらすのがこのサイトの型。不透明度 0.04 は見えるか見えないかの境目で、濃くしない。
実測 8 要素すべてが 1120px。全幅パネルだけコンテナの外まで広がる。列間は 6.639%(可変)か 32px(固定)。
ブレークポイントは 576px(実測 7 回・主要)/767px/768px/1000px/1152px/1440px/1760px/1920px。上限側を持っているのが特徴で、コンテナは 1120px 固定のまま、ヒーローと全幅パネルだけ超ワイドで伸びすぎないよう抑えている。(any-hover: hover) / (hover: none) でタッチ端末のホバー演出も切っている。