京都市宿泊税に関するご案内
HOTEL THE MITSUIKYOTO

HOTEL THE MITSUI

KYOTO
WATCH THE MOVIE
ホーム > ホテルについて

ホテルについて

01 / Colors

焦茶と白の 2 色

彩度のあるものは写真だけ。UI は #190e0a と白で組む。トップの body 背景だけ #1c0b06 という別値だが、肉眼では区別できない。下層ページの地色は白。

Brand Dark Brown
#190e0a
★ボタンの面(145×96px)・見出し・枠線。可視 18 要素
Hero Brown
#1c0b06
トップの body 背景(根拠 body)
Text Primary
#000000
★本文。可視 63 / 89 要素。純黒を使う
Muted
#666666
ニュースの日付(可視 4 要素)
Select Surface
#363636
予約パネルの select。可視 11 要素
Card Surface
#f1f1f1
トップのカード面。可視 4 要素
Header Band
#4f4f4f
ヘッダー最上部の細い帯
Rule
#cccccc
予約カレンダーの罫
Olive(未使用)
#536b2b
CSS にはあるが可視 0 要素。採用しない
Gold(未使用)
#a4904c
CSS にはあるが可視 0 要素。採用しない

CSS Custom Properties は 0 個。設計トークンは存在しない。トップは heroCover: true(span.TopKeyVisual__bg が #190e0a で 1440×900 を覆う)だが、下層ページの地色は白。トップの背景色をサイト全体の背景として写さないこと。

本文から表組みまで明朝 1 本

和文は Morisawa Fonts Web 配信の 本明朝 Pro Medium(MFW-RoHMinchoPro-Md)。可視 75 要素(トップ)/ 91 要素(下層)。ゴシックが出るのはボタンのラベルだけ(15 / 7 要素)。

101213 141619 2226 3234
Page Title本明朝 Pro Md / 34px / 400
lh 1.50 (51px) / ls 0.48px(継承)
ホテルについて
Section Heading ★本明朝 Pro Md / 26px / 400
lh 1.50 (39px) / 可視 9 / 7 要素
日本の美しさと
English LeadVanDijckRoman / 22px / 400
lh 1.40(代替: EB Garamond)
-EMBRACING JAPAN’S BEAUTY-
Lead本明朝 Pro Md / 19px / 400
lh 1.60
古来より、日本に暮らす人々は四季とともに移ろう自然に心を寄せてきました。
Body ★本明朝 Pro Md / 16px / 400
lh 1.80 (28.8px) / ls .03em
日本の伝統的な美意識にも通じるその想いを、私たちは「おもてなし」として受け継いでまいります。梶井宮門をくぐり、庭園を抜けた先に、京都の時間が流れています。
Table Cell本明朝 Pro Md / 16px / 400
lh 1.60 (25.6px)
HOTEL THE MITSUI KYOTO(ホテル ザ 三井 京都)
Nav本明朝 Pro Md / 16px / 400
lh 1.00
客室 レストラン&バー 温泉&スパ エクスペリエンス
Button ★游ゴシック体 / 16px / 500
lh 1.00 / ls 0.48px
詳しくはこちら
Caption本明朝 Pro Md / 13px / 400
lh 1.23 (16px)
※表示料金は予約できる 1室1名1泊目 の最安値です
Label ★本明朝 Pro Md / 12px / 400
lh 1.80 (21.6px) / ls .02em
2026.10.01 ホテル名称 ホーム > ホテルについて
Price本明朝 Pro Md / 10px / 400
lh 1.80 (18px)
158,125 円〜

font-feature-settings は 1 要素も使っていない(実測 0 件)。明朝で palt を効かせると括弧や句読点が詰まりすぎて間が消える。字間 .03em の浅さと「詰めない」がセットになっている。palt を足さないこと。

letter-spacing: .03em は body に 1 回だけ。computed は 0.48px で、サイズの違う要素すべてが 0.48px(可視 63 / 69 要素)=絶対値の継承。12px 以下の要素だけ .02em(0.24px)を自分で宣言している。

@font-face が font-weight: 1 1000 を宣言している。400 でも 700 でも同じファイルが返り、合成太字も起きない。太さを変えたいなら MFW-RoHMinchoStd-Bd を読み込んでファミリーを切り替える(実サイトは宣言のみで unloaded)。

実サイトの font-family には 3 つの引っかかりがある。① Roboto, Yu Gotich, sans-serif というタイプミス(正しくは "Yu Gothic")。② 游ゴシックの Medium を Regular より後ろに置いており、Windows で細く出る。③ "Noto Sans JP" をスタック先頭に書いているが @font-face もフォント要求も無い。いずれも真似しないこと。

03 / Components

ボタンだけゴシックになる

本文が全部明朝なので、ボタンのラベルが明朝だと押せるように見えないという判断。border-radius: 3px はサイト唯一の角丸で、ボタン 13 要素だけに付く。

詳しくはこちら ニュース一覧 Information Rooms and Suites
未スタイルの button(実サイトのバグ)#efefef / 2px outset / padding 1px 6px

実サイトの Menu 開閉 閉じる はブラウザ既定のまま(background: #efefef / border: 2px outset)。CSS を当て忘れている。実装時は必ずリセットすること。

面の明暗だけで奥行きを作る

box-shadow はサイト全体で 0 種。カードは #f1f1f1 の面と写真だけ。角丸も付けない。

客室

京都の街と庭を望む 161 室。数寄屋の設えと現代の快適さを重ねた空間。

レストラン&バー

長い歴史と美しい自然の中で豊かな食文化が育まれた京都。

温泉&スパ

山紫水明の都、京都。当ホテルの敷地に湧く天然温泉。

05 / Table

罫線なし、サイズ差で分ける

th は 12px、td は 16px。背景色も縦罫も使わず、サイズ差だけで見出しと値を分ける。

ホテル名称
HOTEL THE MITSUI KYOTO(ホテル ザ 三井 京都)
開業
2020年11月3日
所在地
京都市中京区油小路通二条下る二条油小路町284

384px + 792px の 2 カラム

ホテル名称について

三井家が 1703 年より 250 年以上にわたり伝えてきた地に建つホテル。梶井宮門をくぐり、庭園を抜けた先に客室がある。見出しは左 384px に固定し、本文は 792px を取る。

コンテナは 1240px、本文だけのページでは 996px に絞る。gap は 24px(カード)と 0 26px(2 カラム)の 2 値だけ。

1240px — 標準コンテナ
996px — 本文コンテナ
792px — 2 カラムの本文側
384px — 2 カラムの見出し側
07 / Forms

select は濃いグレーの面

予約パネルの select は #363636 の面に白文字で、角丸なし。テキスト入力は実測できなかったので、ボタンに合わせて radius 3px / 1px solid #190e0a を推奨する。

#363636 / 白文字 / radius 0
radius 3px / 1px solid #190e0a
枠を 2px の outline で強調する

影ゼロ、角丸は 3px だけ

Level 0
none
★全要素。boxShadow は 0 種
面で分ける
#ffffff / #f1f1f1 / #190e0a
オーバーレイ rgba(25,14,10,.9)
3px / ボタン(13 要素)
50% / ドット(5 要素)
0 / それ以外すべて

主ブレークポイントは max-width: 768px(実測 522 回)。1440 / 1200 / 834 / 375px のいずれでも body は 16px / 28.8px / 0.48px で変わらない。縮むのは見出しとレイアウトだけ。

(min-width: 1025px) and (max-width: 768px) のように常に false になる組み合わせが 2 件ある(ビルド時のネスト崩れ)。写さないこと。