COLORS
Base — 黒いクロムと白い面
Black
#000000
body の地色。ヘッダー・左レール・フッター
White
#ffffff
コンテンツ面。黒の上に載る矩形
Near Black
#1e1e1e
濃色セクション。純黒とわずかに差をつける
Charcoal
#333333
白地の本文
Dark Slate
#40494f
予約フォームの面
Slate Blue
#27384d
運航状況フォームの面
Accent — 唯一の有彩色
Dark Red
#990000
サイト唯一の彩度を持つ色。CTA・運賃の金額・日曜列。明るい赤に振らない
Link Blue
#003399
テーブルの土曜見出し。サイト唯一の青
Neutral — 面・罫
Panel Gray
#f2f2f2
薄面セクション
Badge Gray
#e6e6e6
バッジ・タグの面
Border
#d1d1d1
白ボタンの枠
Input Border
#cccccc
入力欄・セレクトの枠。黒地では補助テキストにも使う
Ghost Border
#666666
黒地の上のゴーストボタンの枠
Sunday Tint
#faf2f2
カレンダー・運賃表の日曜列
Saturday Tint
#f1f4fa
カレンダー・運賃表の土曜列
TYPOGRAPHY — 実務サイト
運賃
航空券＋ホテル
東京へ行くならチェック！東京特集
本文は 14px / weight 400 / line-height 1.5 / letter-spacing normal。運賃表・時刻表・空席カレンダーを縦に積む実務サイトなので、字間を一切開かず情報密度を優先します。
font-feature-settings も normal のままで、palt は掛けません。航空券の
ご予約
ご予約
運航情報
TYPOGRAPHY — ブランドサイト（/brand/）
BRAND TOP PRODUCT MOVIE
BRAND MOVIE
お客様へ最上級のホスピタリティを提供
ブランドコンセプト「Mother Comet」のもと、黒い機体・黒い革シート・黒い機内で統一されたスマート ラグジュアリーという価値を提供しています。
運賃
羽田（東京）⇔ 北九州
「そら旅」11,660円〜
羽田（東京）⇔ 福岡
「そら旅」9,900円〜
羽田（東京）⇔ 関西（大阪）
「そら旅」8,580円〜
中部（名古屋）⇔ 福岡
「そら旅」11,440円〜
空席照会カレンダー
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 ◎ | 2 ◎ | 3 ◯ |
4 ◎ | 5 △ | 6 ◯ | 7 △ |
| 8 ✕ | 9 ◎ | 10 ◎ |
11 ◯ | 12 ◎ | 13 △ | 14 ◯ |
日曜列は #faf2f2、土曜列は #f1f4fa で塗り、見出しの文字色を日曜 #990000 / 土曜 #003399 にする。
キャンペーン情報
2026年 夏休み 空席状況のご案内
対象搭乗日 2026年7月17日〜8月21日。人気路線の空席状況をまとめてご案内します。
臨時便運航 羽田(東京) ⇄ 福岡線
8月21日(金)〜8月31日(月) 計30便を増設。詳しくはこちら。
BUTTONS
マイレージ会員に入会する
Primary — #990000 塗り / radius 2px / 12px
ログイン
Secondary — 白面 / radius 2px（黒地の上）
運賃一覧へ ▸
Tertiary — 1px solid #d1d1d1 / radius 3px / padding 10px 25px
詳しく見る
Black — #000 塗り / radius 3px
キャンペーン一覧へ
Ghost — 1px solid #666 / 文字 #cccccc（黒地）
マイレージ
Badge — #e6e6e6 / radius 0 / padding 3px 10px 4px
運航情報
Label — #990000 / 10px / 700 / radius 0
radius は 3px が既定。ヘッダーの 2 つの CTA だけ 2px、ブランドサイトのボタンだけ 0。ピル（1000px）はごく一部のタグにしか出ない。
航空券＋ホテル
東京特集
東京へ行くならチェック！早朝深夜便を使ってとことん東京を満喫しよう！
おすすめホテル特集
観光やビジネス、イベントなどの各シーンにあわせた東京・福岡のおすすめホテルで快適な滞在を。
福岡特集
福岡には美味しいものがいっぱい！地元民イチオシの福岡市内のグルメを中心にご紹介いたします。
FORMS
航空券の予約
デフォルト — 高さ 42px / 1px solid #cccccc / radius 3px / 13px
フォーカス — border #333333
エラー — border #990000
濃色パネル #40494f の上でも入力欄の面は白のまま。反転させない
運航状況を確認する
運航状況フォームだけ面色が
#27384d（青みの濃色）に変わる。ELEVATION
Level 0
none
カード・ボタン・テーブルすべて
カード・ボタン・テーブルすべて
Header
0 0 2px #777777
黒ヘッダーの下端を締める
黒ヘッダーの下端を締める
Rail
2px 0 6px -1px rgba(0,0,0,.2)
追従レールの右エッジ
追従レールの右エッジ
面で作る
#000000 → #1e1e1e → #f2f2f2 → #ffffff
影は「浮かせる」ためではなく黒いクロムの境界を締めるために使う。コンテンツ側には一切落とさない。
LAYOUT
XS 5
S 10
M 25
L 40
XL 80