ハートをひらくことで、仲間たちとつながり、社会とつながっていく。その先に、ひとりではつくれない、ロートだけではつくれない、そんなワクワクする未来が待っていると信じて。
5 段の差はごくわずか。並べても違いが分からない程度に近く、状態差を色で強く語らないのがロートの流儀。
#4d4d4d。font-feature-settings は normal のままで、palt も和文の字間調整も行いません。ロゴカードは白面 + border-radius: 8px の淡い罫。影は一切落とさない。
私たちロート製薬は、創業127年の歴史を礎に、新たな価値の創造に挑み続けています。目薬やスキンケアにとどまらず、再生医療、食・農業といった領域へ事業を広げてきました。
変化の速い時代にあっても、変わらないのは「人の健康と笑顔に貢献する」という思いです。一人ひとりがハートをひらき、社会とつながることで、まだ見ぬ未来をつくっていきます。
ページ見出しの面は border-radius: 16px 16px 0 0 で上だけ丸める。サイドナビは非選択 #f7f7f7、現在地だけ白面 + weight 600 + #1a1a1a。
ピルの radius は 9990px。9999px でも 50% でもない独特の値で、実サイトに 14 箇所出てくる。
radius 8px 0 0 8px / 高さ 57px / 16px、ボタン radius 0 8px 8px 0 / #005bac角丸が「浮き」の代わり。影を使わなくても、radius の違いで要素の性格が読み分けられる。
コンテナは 1200px（メインビジュアルのメッセージだけ 1160px）。スペーシングは 8 の倍数が基本で、5.6px 19.6px のような端数は rem 換算（0.35rem / 1.225rem）に由来する。
| 指定 | px 換算 | 説明 |
|---|---|---|
max-width: 30em | 480px | 1 カラム。カードは縦積み |
max-width: 36em | 576px | ナビカードの補足を省略 |
max-width: 48em | 768px | グローバルナビをドロワー（#005bac）に格納 |
max-width: 60em | 960px | 2 カラム |
max-width: 75em | 1200px | コンテナ幅を 100% に |
max-width: 90em | 1440px | 左右パディングの調整 |
em で書くとユーザーのブラウザ既定文字サイズに追随する。px 決め打ちの実装に置き換えないこと。
"Noto Sans JP", sans-serif のみで、和文のフォールバックを書いていない。このプレビューでは
"Noto Sans JP", "ヒラギノ角ゴ ProN", メイリオ, sans-serif と補って読み込んでいる。