1泊1名17,000円〜

全国に展開する温泉旅館ブランド

30の温泉宿
30の温泉文化

界がもてなす 温泉文化体験
味わう
感じる
学ぶ
触れる
浸かる
VERTICAL & GRADIENT TEXT

上の 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

normal(既定・229 要素)

その土地を、味わい尽くす。

0.1em(基準)

その土地を、味わい尽くす。

0.2em(カテゴリラベル)

その土地を、味わい尽くす。

負の letter-spacing は 1 要素も無い。 16px→1.6px / 18px→1.8px / 50px→5px がすべて 0.1em で揃う=em で各要素が宣言している(body からの px 継承ではない)。palt も 0 件。詰めるのではなく空ける設計なので、palt を足すと約物だけ詰まってちぐはぐになる。

TYPE SCALE
Lead 明朝 / Shippori Mincho 18px / 400 / 2.00 / 0.1em
温泉が湧く。そこに人が集い、宿が建ち、食が育つ。日本に根づいてきた、温泉を中心としたひとつの文化。
Sub Headline / 16px / 700 / 1.14 / 0.1em(サイト唯一の 700)
何につかる?
Card Title / 16px / 400 / 1.14 / 0.1em(22 要素)
彩りの渓流で
伊達なひととき
Category Label / Zen Kaku Gothic New 12px / 400 / 1.4 / 0.2em
その土地を、味わい尽くす。
Body / 14px / 400 / 1.5(body 既定)
鬼怒川の渓流に面した小高い丘の上に佇む温泉旅館。関東を代表する名湯鬼怒川温泉を、ご当地部屋で愉しむ。
Price / HNumber 18px / 400 / 1.0(数字専用スタック)
17,000円〜
UI Small / 10px / 400–500 / 1.5(最多サイズ・88 要素)
1泊1名 当サイトが最もお得
施設ページの明朝 / Klee One 30px / 400 / 1.4 / 0.18em
モダンなとちぎ民藝と
木漏れ日の中庭

ブランドトップと施設ページで明朝が違う。 トップは 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 要素だけの例外)。

COMPONENTS
宮城神奈川長野 群馬広島 全 10 施設全 24 施設

地域からみつける | 北海道 | 東北 | 北陸・甲信越 | 関東 — 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 要素)。

FACILITY CARDS
界 鬼怒川
栃木 鬼怒川温泉
界 箱根
神奈川 箱根湯本温泉

カード幅 432px(トップ 12 要素で最多)、gap: 40px。施設名の line-height は 1.10 で、実測の最多(118 要素)だがトークン(1 / 1.25 / 1.5 / 1.71 / 1.8)には無い値。カード側が独自に宣言している。

FACILITY PAGE
【期間限定】いちごで潤う温泉滞在

施設ページの地色は --theme-facility-foundation-background: #f5efe9(ベージュ)。ブランドトップは白地。明朝も Klee One に切り替わる。

COLORS
Reservation Cyan#00a0cb / --color-primary
Kai Gradient文字に流す(6 要素)
Kai Navy#334b5c / 始端・単色 5 要素
Kai Blue#638fb6 / 終端のみ
Kai Tint#d4e4f2
Facility Beige#f5efe9 / 施設ページ
Text Base#3c4043 / 76 要素
Text Sub#555555
Bg Invert#1a1a1a / ナビ地
Button Plain#e6e6e6
Disabled#cccccc / 12 要素
Plain#f8f8f8
Text Muted#999999
Text Link#006a86
Success#00b391
Warn#ffa000
Strong#d50000

「可視0」と付いた 5 色は 124 個の自社変数に宣言はあるが、2 ページとも 1 要素も描画されていない。own の数は設計の厚みであって実装ではない。