大雨の影響により、運転見合わせが発生していますので、以下の区間のご利用は見合わせていただきますようお願いいたします。
私たちは、2005年4月25日に発生させた福知山線列車事故を決して忘れません。安全第一を積み重ね、安心、信頼していただける鉄道を築き上げます。
→ 福知山線列車事故について → 安全の取り組み塗りは #0065b1（面 10 / 文字 10 要素）、それ以外は白地に #111111。装飾色を持たず、色が増えるのは状態を示すときだけ。ただし実装には見分けのつかない青が 4 つあり、これは 2 世代の CSS が同居した結果。新規実装では #0065b1 に統一すること。
運行状況の記号は <img> の SVG（Ic_StatusStop.svg / Ic_StatusDelay.svg / Ic_StatusNotice.svg）。テキストは区間名（15px / letter-spacing: 0.75px / #111111）だけで、文字色は状態によって変わらない。色覚に依存しない設計。この構えをそのまま守ること。
letter-spacing: 0.05em（= 0.8px）、line-height: 1.7、font-feature-settings: "palt" 1 の 3 つを body, html に 1 回だけ書く。結果、0.8px が可視 205 要素中 155 要素、palt が 749 要素に効く。子要素で字間を再宣言しないのが実装の構え。
| Family | 調達 | 宣言 | document.fonts | 可視要素 |
|---|---|---|---|---|
| Noto Sans JP | Google Fonts css2（可変） | wght@100..900 | loaded | 186 / 90 |
| Inter | Google Fonts css2（可変） | wght@100..900 | loaded | 19 / 1 |
可変フォントなので任意のウェイトが出せるが、実際に使っているのは 400 / 500 / 700 の 3 つだけ（可視 700:115 / 400:77 / 500:13）。600 や 300 を使わないこと。
| CSS の宣言（assets/css/common.css） | 実測 | 判定 |
|---|---|---|
| body, html { font-size: 62.5% } | html 10px / body 16px | 後続のルールが body を上書き |
| body, html { line-height: 1.6 } | 1.7（27.2px ÷ 16px） | 同上 |
| font-family: … "ヒラギノ角ゴ ProN" … "メイリオ" … | 文字化け（Shift_JIS のまま配信） | ASCII の別名が直後にあるので実害なし |
| font-feature-settings: "palt" 1 | 749 要素に適用 | 宣言どおり |
数値は宣言ではなく実測に従うこと。フォント名は "Hiragino Kaku Gothic ProN" / Meiryo のようにASCII 名だけで書くのが安全。
個別に字間を書いている例外は 3 つだけ（0.75px @15px / 0.9px @18px / 0.6px @12px）。どれも「そのサイズでの 0.05em」で、px 継承だと揃わない箇所を書き直しているにすぎない。比率は常に 0.05em と覚えればよい。グローバルナビの第 1 階層だけ normal で字間を切っている（38 要素）。
14px / 18px / 20px / 34px / 62px / 13px / 12px / 9999px はすべて pill（要素の高さの半分）で、値が違うのは高さが違うからにすぎない。本物の角丸は 24px のカードだけ。値をコピーせず「ボタンは calc(高さ / 2)、カードは 24px」と覚える。
「塗りか反転か」の 2 択しかない。文字だけのリンクボタンは無い。反転の大サイズは文字が #111111 で、青にしない（本文と同じ扱いにする）。
「鉄道・交通」「技術開発」「運輸関連サービス」など
「物販・飲食」「ホテル」「ショッピング」「住まい」など
「技術ソリューション」「JCLaaS（公共インフラ）」など
フォーカスリングだけオレンジ #ff7600 の 2px。リンクもボタンも面も #0065b1 で埋まっているサイトなので、フォーカスを青にすると見つからない。青を主色にするサイトを作るときに真似る価値がある。
/company/info/ 配下は common.css?date=20180820 を読み、body { font-size: 81.25% }（= 13px）を基準にした .text10〜.text19 という % スケールで組まれている。ところが新デザインの CSS が body を 16px に差し替えたため、p, li, dt, dd, th, td { font-size: 107.692% } が 16 × 1.07692 = 17.2308px で出る。意図は 14px、実装は 17.23px。
| 社名 | 西日本旅客鉄道株式会社 West Japan Railway Company |
|---|---|
| 所在地 | 大阪市北区芝田二丁目4番24号 |
| 代表取締役社長 | （氏名） |
この 17.2308px を「本文サイズ」として真似ないこと。4 幅（1440 / 1200 / 834 / 375px）すべてで同値なので流体ではない。パンくずの 14.7692px（= 16 × 12/13）、見出しの 39.3846px（= 16 × 32/13）も同じ連鎖。13 を分母にした端数が並んだら、この型を疑う。
下層のパンくずだけ文字色が #333333（4 要素）なのも 2018 年版の名残。
影は 1 種類の値（10px 10px / 0.16）を、向きだけ反転して使っている。役割は「浮かせる」ではなく「重なりの向きを示す」。上に重なる要素は上向き、上から降りる帯は下向き。ぼかしと濃さは同じ。filter: drop-shadow() / text-shadow は 0 件。
html 10px / body 16px / line-height 27.2px / letter-spacing 0.8px は 4 幅すべてで同じ。流体も SP 縮小も無い。モバイルで変わるのは見出しだけ（例: 列車運行状況 が 16px → 375px で 17px）。下層の p, li, th, td は 4 幅すべて 17.2308px のまま。
主分岐は 768px。トップ（新デザイン）は min-width: 1280px でデスクトップを足し、下層（2018 年版）は max-width: 767px（154 件）でモバイルを削る、という逆向きの書き方が同居している。
下層の CSS は print, screen and (min-width: 768px)（62 件）のようにほぼすべてのメディアクエリに print を併記しており、印刷時にデスクトップ幅のレイアウトを使う。公共インフラらしい配慮。c-button-small は高さ 28px で WCAG の 44px を下回るので、新規実装では 44px 以上を確保すること。