面色は 紺 #080822(可視 47 要素)ひとつ。彩度のある色は CTA の #8a001a だけで、トップ・下層とも 1 要素しか無い。トップは紺地、下層は白地。body.home にだけ背景色が当たる設計で、/about/ 以下は #ffffff になる。
自社トークンは 8 個だけ(残り 60 個は WordPress / Gutenberg の preset)。うち色の 4 個はトップ・ブログ記事の両方で可視 0 要素。宣言はあるが描画されていないので、ブランドカラーとして実装しない。
letter-spacing はトップ 205/208 要素、下層 170/173 要素が normal。font-feature-settings: "palt" も 1 要素も使っていない。代わりに YakuHanJP / YakuHanMP(約物だけを収録したサブセットフォント)をスタックの先頭に置き、句読点・括弧だけを半角幅に詰めている。仮名漢字の字送りは一切変わらない。
html { font-size: 62.5%; line-height: 1 }。無単位の 1 が全要素に降りるため、行間を宣言し忘れた要素は行が潰れる(実測 比率 1.00 が 107 要素)。本文ブロックは必ず line-height を書き、無単位で指定すること。1.0em のような絶対値にすると子要素まで巻き込む。
明朝に 700 は存在しない。Noto Serif JP の宣言は 300 500、YakuHanMP 700 は unloaded。明朝へ font-weight: 700 を当てるとブラウザの合成太字になる。ウェイトは 300 / 400 / 500 まで。
実サイトで writing-mode: vertical-rl が当たっているのは 6 要素(うち 2 件はアイコンの <svg> / <use>)。右端の固定タブと、サブメニューの「私たちの想い」だけだ。ヒーローの大きな縦組みコピーは実装ではない。
line-height: 40px の絶対値・letter-spacing: normal。主ラベルが 14px、副ラベルが 10px。flex-direction: row-reverse にする。素の display: flex だと DOM 順に左→右へ置かれ、日本語の縦組みとして読む向き(右→左)と逆になる。ヒーローのコピーは SVG スプライト。.TopSlideCopy__inner > svg > use[xlink:href="#icon-top-copy"](154×490px)で、<text> 要素は 0 個、<path> も 0 個のアウトライン。document.images にも verticalWriting にも出てこないので、スクショだけ見て「縦組みを実装している」と判断しないこと。下は同じ見え方を SVG で再現したもので、実サイトの構造に合わせてある。
角丸は 3px(カード)/ 9px(タグ)/ 12px(ボタン)/ 14px(バナー) の 4 値から選ぶ。影は実測 1 種類 1 要素しかない。カード・ボタン・ナビはすべてフラットで、階層は紺地と白地の切り替えで作る。
サイト唯一の影。rgba(0,0,0,.42) 0 14px 36px + 1px solid rgba(255,255,255,.16) + radius 14px のガラス調。ここ以外に影を足さない。
実測した 2 ページに入力欄が無い。Tag の radius: 9px と Primary の radius: 12px に合わせ、フォーカスリングは CTA の #8a001a を使う。
ブレークポイントは実質 2 段階。CSS 全文の @media は max-width: 800px が 299 宣言と圧倒的で、次が 960px の 39 宣言。ルートサイズは 6 幅(1440 / 1200 / 834 / 768 / 767 / 375px)すべてで 10px、body 14px のまま動かない。流体スケールは使っていない。