モバイルバッテリーの機内持ち込みについて(2026年4月24日以降) T1 1F送迎レーン(一般車レーン)運用再開と利用時の新ルールについて
KIX

こんにちは!

ホーム / アクセス

アクセス方法を調べる

01 / Colors

紺とシアン。マゼンタは画像の中にしかない

UI は #07185c と #00bff2 の 2 色で組む。トップのヒーローに見える鮮やかなマゼンタは hero-kix-2-bg.png という画像に焼き込まれた色で、--color-red-500: #eb008b という変数はあるのに可視 0 要素。UI の色として実装しない。

KIX Navy
#07185c / --color-blue-500
文字・面・影の基準色。可視 30 / 31 要素
KIX Cyan
#00bff2 / --color-sky-blue-500
アクセント・影の色。可視 71 要素
Text Primary
#101114 / --color-grey-600
本文。可視 23 / 44 要素
Text Muted
#6e7281 / --color-grey-400
更新時刻・注記。可視 10 / 20 要素
Background
#f7f7f8 / --color-grey-100
セクションの地。ページの地色は白
Magenta(採用しない)
#eb008b / --color-red-500
宣言あり・可視 0 要素。画像の中の色

Semantic は「濃い文字+淡い面」の対で使う

空いていますtext #006936 / bg #e2efda
やや混雑text #6e4005 / bg #fff1d6
大変混雑text #cc1000 / bg #ffe3e0
お知らせtext #084285 / bg #d9eaff

Noto Sans を 4 言語ぶん自前で持つ

notosansjp / notosanstc / notosanssc / notosanskr をセルフホストし、html[lang] でスタックごと切り替える。日本語ページで loaded なのは JP の 3 本だけで、TC / SC / KR は 1 バイトも落ちない。ウェイトは 400 / 500 / 700 の 3 段で、すべて実ファイルがある。

14161820324050
Display50px / 700 / lh 1.2
ls normal
こんにちは!
Heading 232px / 700 / lh 1.2
可視 4〜7 要素
空港のご利用目的は?
Heading 320px / 700 / lh 1.2
可視 15 要素
保安検査 / 交通機関 / 駐車場
Lead18px / 500 / lh 1.4
保安検査・出国・税関申告などをご案内します。
Body16px / 400 / lh 1.4
最多 31〜55 要素
関西国際空港は、24 時間運用の国際拠点空港です。第 1 ターミナルと第 2 ターミナルのあいだは無料のシャトルバスで移動できます。所要時間は約 7 分です。
Caption14px / 400 / lh 1.4
可視 28〜37 要素
10/09 09:10 現在 / ※待ち時間は目安です。

letter-spacing は可視 134 要素すべて normal。日本語を完全なベタ組みで流す。palt も使っていない。本文の line-height: 1.4 は「短い行を速く読む」空港の案内に合わせた値で、長文の記事には流用しない。

03 / Components

主ボタンは面ではなく「文字」を塗る

linear-gradient(to right, #00bff2 0 50%, #07185c 50% 100%) を background-size: 200% 100% で持ち、-webkit-text-fill-color: transparent で文字に抜く。既定は右半分(紺)が見えていて、ホバーで位置が動くと文字色がシアンへ拭き変わる(実測 27 要素)。

早朝営業の飲食店一覧へ 免税品の予約サイトへ(ホバー状態)
空いています やや混雑

面で塗るボタンの角丸は全丸。実サイトは Tailwind v4 の rounded-full で calc(infinity * 1px)(実測 3.35544e+07px)になるが、手で書くときは 9999px でよい。

影に黒を使わない

影は rgba(0,191,242,.12)(シアン)と rgba(7,24,92,.12)(紺)の 2 種だけ。近い影と遠い影を必ず 2 本重ねる。角丸は 16px が既定(可視 21〜37 要素)。

電車でお越しの方

JR・南海電鉄が関西空港駅に乗り入れています。

10/09 09:10 現在
リムジンバス

大阪・京都・神戸の主要駅から直通便があります。

10/09 09:10 現在
車・駐車場

P1〜P4 の駐車場をご利用いただけます。

10/09 09:10 現在
Level 0
none
枠線だけ
Level 1 — cyan
rgba(0,191,242,.12) 0 1px 3px 0,
rgba(0,191,242,.12) 0 4px 8px 3px
Level 1 — navy
rgba(7,24,92,.12) 0 1px 4px 0,
rgba(7,24,92,.12) 0 4px 8px 3px
8px
12px
16px(既定)
9999px(ボタン・入力欄)
0 0 16px 16px
05 / Table

横罫だけ。th は 14px のグレー

罫は #dddddf の 1px。縦罫を引かず、th の色(#6e7281)とサイズ差で見出しを分ける。

交通機関所要時間運賃
JR 関空快速(大阪駅)約 70 分1,210 円
南海ラピート(難波駅)約 38 分1,490 円
リムジンバス(京都駅)約 95 分2,800 円

入力欄は全丸か 8px

フォーカスは #00bff2 の outline: 2px。ラベルは 14px / 500。

出発地から検索することもできます
ターミナル・エリアで絞り込めます
viewport
container 1280px(実測 17 / 21 要素)
card / gap 16px・24px

余白は 8 の倍数(8 / 16 / 24 / 32 / 56 / 64)。ブレークポイントは Tailwind 既定(768 / 1024 / 1280px)。834px まで値が動かず、375px で見出しだけ 50px → 32px に縮む。本文 14px は全幅で変わらない。