楽しくつくる、
だから愛される。
Made with joy.
Loved with heart.
面色を持つ CTA は 紺 #123480 / オレンジ #e29d4e / 緑 #529a77 の3色。危険・成功といった状態ではなく、行き先の種類で色を分ける。色トークンは 37 個あるが、トップページで実際に描画されるのは 11 色だけ。
宣言 ≠ 実装。--color-green01(#639e81) / --color-green02(#478566) / --color-brown01〜03 / --color-pink01 / --color-blue02〜04 はいずれも可視 0 要素。逆にタグの面 #efefef はトークンに無い直書き。変数一覧をそのままパレットとして採用しないこと。
和文は イワタ細ゴシック体オールド_04（72/104 要素）と イワタ中ゴシック体オールド_04（28 要素）の2本。Noto Sans JP も游ゴシックもヒラギノもチェーンに並べない。太さは font-weight ではなく書体名で切り替える。
letter-spacing は normal が 103/104 要素。字間トークン（--tracking-tight: 0.02em / --tracking-normal: 0.04em）はあるが、実装に出るのは CTA の 0.56px（= 14px × 0.04em）1 要素だけ。書体の字面に任せるのが、書体屋の構え。
font-feature-settings は 2 ページとも 0 要素。書体側の字面設計をそのまま見せるのが狙いなので、palt を足さないこと。書体メーカーのサイトで詰め組みをすると、書体の素の姿が分からなくなる。
@font-face は 108 本宣言されているが loaded は 8 本だけ。残り 100 本（みんなの文字ゴ… I-OTF-UDゴ表示Pr6N… 等）はフォント見本を表示するための在庫宣言。@font-face の本数を「使える書体の数」と読まないこと。
太さは合成で作られている。@font-face はどちらの書体も font-weight: normal でしか宣言されていないのに、CSS は 700 を 34 要素・500 を 35 要素に当てている（＝ブラウザの合成太字）。再現するときは、書体名で太さを切り替えられる書体を用意するか、実ウェイトを持つ書体に差し替える。
主 CTA は border-radius: 48px のピル。小さいピルは 24px、タグは 100px。--rounded-full: calc(infinity * 1px) という変数は宣言だけで実装 0 要素で、実際は 48px / 100px の直書き。
面色 CTA が 3 種類ある。紺（お問い合わせ・もっと見る）、オレンジ（フォント一覧・カタログ）、緑（ライセンス情報）。行き先の種類で色を分けているので、状態色として流用しない。
box-shadow は実測 0 種。カードの区別は #f4f5f6 の面と border-radius: 16px だけで行う。
Mac や Windows PC にフォントをインストールしてお使いいただくライセンスです。
年間定額制のサブスクリプションサービスです。必要な書体を必要なときに。
電子機器・アプリケーションに書体を組み込んでご利用いただけます。
フォントやサービスについて相談したい方へ
フォントのライセンスについて知りたい方へ
フォントの詳細資料が見たい方へ
お知らせは日付 14px（#949494）＋ タグ（#efefef / radius 100px）＋ 本文 16px。/font-list の書体見本は 12px の表が 4,639 要素で、同じ書体を「読み物」と「一覧」の両方で見せる。
| ファミリー名 | 書体名 | ウェイト | 文字セット |
|---|---|---|---|
| イワタ明朝体オールド | イワタ明朝体オールド R | R | JIS2004 |
| イワタ細ゴシック体オールド | イワタ細ゴシック体オールド L | L | JIS2004 |
| イワタUD新聞明朝 | イワタUD新聞明朝 M | M | Pr6N |
| イワタ隷書体 | イワタ隷書体 R | R | StdN |
実サイトのトップに入力欄は無い。フォームを作る場合は 小さいピルの 24px に合わせ、影を付けない。フォーカスは紺 #123480 のアウトライン。
2 ページとも box-shadow の実測は 0 種。階層は角丸の大きさ（4 → 16 → 24 → 48 → 100px）と面色（#ffffff / #f4f5f6 / #efefef / #123480）で作る。
トークンにあって実装 0 要素の角丸：--rounded-min(2px) / --rounded-md(8px) / --rounded-lg(12px) / --rounded-full(calc(infinity * 1px))。逆に 9px / 15px / 48px / 100px はトークンに無いが実装にある。
--innerWidth: 1228px という宣言はあるが、実測のコンテナ幅は 1284px（5 要素）と 1440px（3 要素）が多く、1228px は 1 要素だけ。カード 1 枚は 384px、列の gap は 38px。
変数名の綴りが --innerPadingInline（d が 1 つ足りない）。実サイトのままなので、このサイトの CSS に追記するときはこの綴りに合わせる。新規に書き起こすなら --inner-padding-inline に直す。
ブレークポイントは (min-width: 992px) が 357 回で圧倒的に最多。768 / 992 / 1200 は Bootstrap 系の列で、モバイルファースト（min-width 優先）で分岐の実質的な軸は 992px 1 本。ホバーは (any-hover: hover) で出し分け、--hover-opacity: 0.8。