全国に展開する温泉旅館ブランド
30の温泉宿
30の温泉文化
上の 5 つの見出しが実サイトの中核。Shippori Mincho 50px / line-height 1.5(75px)/ letter-spacing 0.1em(5px)/ writing-mode: vertical-rl で 27 要素。画像ではなく CSS で組んでいるので文字は選択・検索できる。さらに linear-gradient(94.07deg, #334b5c 2.85%, #638fb6 70%) を background-clip: text で文字そのものに流している。
縦組みはデスクトップだけ。 実サイトは 767px 以下で horizontal-tb に戻し、font-size を 50px → 35px にする。letter-spacing は 0.1em のままなので 5px → 3.5px に比例する。このプレビューもブラウザ幅を 767px 以下にすると切り替わる。
負の letter-spacing は 1 要素も無い。 16px→1.6px / 18px→1.8px / 50px→5px がすべて 0.1em で揃う=em で各要素が宣言している(body からの px 継承ではない)。palt も 0 件。詰めるのではなく空ける設計なので、palt を足すと約物だけ詰まってちぐはぐになる。
ブランドトップと施設ページで明朝が違う。 トップは Shippori Mincho(59 要素)、施設ページは Klee One(29 要素)。CSS 変数 --theme-secondary-font-ja は "Klee One", serif を指しており、トップの Shippori Mincho は変数を経由せずハードコードされている。
weight は 400 が既定、強調が 500。 --font-weight-* は 300 / 400 / 500 の 3 つしか宣言が無く、600 も 700 も設計に存在しない(何につかる? の 700 は 1 要素だけの例外)。
地域からみつける | 北海道 | 東北 | 北陸・甲信越 | 関東 — rgba(255,255,255,0.5)(82 要素)
予約 CTA は #00a0cb / border-radius: 2px / box-shadow: 0 1px 1px 0 rgba(0,0,0,0.3)。alpha 0.3 と濃いのに blur が 1px なので、見た目は影というより縁取り。0 2px 8px rgba(0,0,0,0.1) のような値に置き換えない。地域チップだけ border-radius: 20px のピル(21 要素)。
カード幅 432px(トップ 12 要素で最多)、gap: 40px。施設名の line-height は 1.10 で、実測の最多(118 要素)だがトークン(1 / 1.25 / 1.5 / 1.71 / 1.8)には無い値。カード側が独自に宣言している。
施設ページの地色は --theme-facility-foundation-background: #f5efe9(ベージュ)。ブランドトップは白地。明朝も Klee One に切り替わる。
「可視0」と付いた 5 色は 124 個の自社変数に宣言はあるが、2 ページとも 1 要素も描画されていない。own の数は設計の厚みであって実装ではない。