良きが上にも良きものを
SCROLL
CSS 変数は 1 個も無い。#24315a を CSS 全文に 30 回、#af8c55 を 4 回ベタ書きしている。
和文見出しが紺、その下の欧文サブタイトルが金 —— この 2 段が全セクション共通の型で、上の「紺と金の2色だけ／01 / Colors」がそれ。
ニュースラベルは幅 7.6154em の固定幅。文字数が違っても同じ幅で揃う。
既定は紺、店舗（本社店・帝国ホテル店・軽井沢店）は金、雑誌掲載は #656e8b。
書体は Noto Serif JP のみ（実測 136/142 要素）。font-weight は 400 が 142 要素、500 と 700 は 0 要素。
letter-spacing は本文 normal が 124 要素で、字空けはヒーローの 1 行（0.1em）と欧文サブタイトル（0.05em）だけ。
行間は 1.73 をラッパー要素に 1 回書いて継承させる。
Google Fonts の URL は family=Noto+Serif+JP:wght@400;500 だが、500 を当てている要素は 1 つも無く、document.fonts でも unloaded。
500 を書いても 400 のまま描画される。700 は宣言すら無いので合成太字になる。このサイトに太字は存在しないと読むのが正しい。
創立以来「良きが上にも良きものを」の志を理念とし、原料・成形・焼成のすべてに手を抜かずにきました。 製品は “セーブルのブルー、オークラのホワイト” と並び称され、独自の白さで知られています。
本文は 16px / line-height: 1.73、字間は normal。
「間」は行間と余白が作るので、letter-spacing を足す必要がありません。
見出しの背後には ::after で 1px の罫を全幅に引き、文字の後ろだけ白で抜いています。
白地に 1px solid #24315a の枠、高さ 3em（48px）、幅 16.75em（268px）、border-radius: 0。
右下に 4px ずらした L 字の罫（border-width: 0 1px 1px 0）が影の代わり。
ホバーでは ::before の幅が 0 → 100% に伸び、紺が左から満ちて文字が白へ反転する。
実測 2 ページの box-shadow は 0 種類。奥行きはボタンの ::after（右下 4px の L 字罫）で作る。
ただしヒーローの白いコピーだけは filter: drop-shadow(5px 5px 5px rgba(0,0,0,.6)) で浮かせている —— 別プロパティなので分布には現れない。
filter: drop-shadow(5px 5px 5px rgba(0,0,0,.6)) あり（実サイト） ／ 下 = なし。| Query | 用途 |
|---|---|
| screen and (max-width: 768px) | モバイル |
| screen and (min-width: 769px) | タブレット以上 |
| screen and (min-width: 769px) and (max-width: 1236px) | ★コンテナ幅未満のデスクトップ（左右に余白を足す） |
| screen and (min-width: 1600px) | ワイド |
メディアクエリは 4 つだけ。余白はすべて em で持っているため、分岐を増やさなくても崩れない。
モバイルではディレクトリ見出しが 1.25em → 1.5em と大きくなる（見出しを強める）。