[重要]商品価格改定と仕様変更のお知らせ
Q A 0
01 / COLORS

黒を使わない。鉄のグレーでまとめる

本文・見出し・CTA の面・アイコンまで、すべて #4b4b4b(--accent / --text-primary / --button-background-primary が同じ値)。 実測で 文字 208 要素・面 101 要素。純黒 #000000 が出るのは「売り切れ」バッジの文字だけで、 #1a1a1a はフッターと告知バーの面に限られる。

Iron Gray / accent
#4b4b4b
★ 本文・見出し・CTA の面。文字 208 / 面 101 要素
Footer Black
#1a1a1a
--footer-background。告知バーとフッター
Sale Red
#aa2826
--on-sale / --error-text。セール価格とオフ表示
Badge Amber
#ffb74a
--primary-badge / --star-color
Sold Out
#bebdb9
売り切れバッジの面(文字は #000000)
Warning
#f3efea / #9f7b4c
--warning-background / --warning-text
Surface Gray
#f2f2f2
WEB 会員セクションの面。--footer-text と同値
Border
rgba(75,75,75,.12)
--border-color。枠はすべてこの 12% グレー
Surface 5%
rgba(75,75,75,.05)
「新商品」バッジ・記事カードの面
Newsletter Gradient
#7b684f → #1a1a1a
★サイト唯一のグラデーション。メルマガ帯のみ

CSS 変数 124 個は Shopify テーマ(Impact 系)の語彙で、値が及源の選択。 --spacing-* / --text-h0..h6 / --rounded-* という命名はテーマ由来なので「自社設計のトークン」とは書かない。 一方で色・書体・radius・shadow の値は管理画面で設定されたものなので、そのまま仕様として使える。

見出しは明朝、本文はゴシック、本文は 13px

見出し=Zen Old Mincho 600(実測 120 要素)、本文・UI=Zen Kaku Gothic New 400・700(実測 275 要素)。 letter-spacing は body に 0.02em を 1 回だけ書き、子は 0.26px を継承する(実測 262 要素)。 見出しだけ 0.015em を別に持つ。本文の font-size は 0.8125rem = 13px。

--text-h0
2.6rem = 41.6px / 600 / LH 1.0
使うあなたが育てる
--text-h1
2.3rem = 36.8px / 600 / LH 1.1
及源品質
--text-h2
1.9rem = 30.4px / 600 / LH 1.1
鉄と砂、代々培われてきた職人の技
--text-h4
1.3rem = 20.8px / 600 / LH 1.3
自分たちが使う道具をただ作ってきた
--text-h5(商品名)
1.1rem = 17.6px / 600 / LH 1.4
南部ごはん釜 2合炊
--text-lg(価格)
1.0625rem = 17px / 700 / LH 1.6
セール価格 ¥25,300
--text-base(本文)
0.8125rem = 13px / 400 / LH 1.6
熱を遮断する層がないからこそ、繊細かつ大胆に、素材の持ち味を引き出せます。
--text-sm
0.75rem = 12px / 400 / LH 1.6
© 2026, OIGEN ONLINE SHOP
--text-xs(バッジ)
0.6875rem = 11px / 700 / LH 1.6
新商品
400 — 実体あり(n4)
火を味方にする仕上げ
700 — 実体あり(n7)
火を味方にする仕上げ
900 — ★実体なし=合成太字
火を味方にする仕上げ

配信されているのは 3 ファイルだけ(zenoldmincho_n6 / zenkakugothicnew_n4 / zenkakugothicnew_n7)。 実サイトには font-weight: 900 を当てている要素が 3 つあるが、900 の実体は来ていないのでブラウザの合成太字で出ている。 再現実装では 700 に寄せるか、そもそも 900 を使わない。500・800 も同様に実体が無い。

03 / ARTICLE

読み物は 650px。見出しの行間を詰める

美しい鋳肌をそのままに
砂、鉄が走る道、そして鉄。
見出しの line-height は 1.1。13px 本文の 1.6 とは別系統で組む

革新的な技法「無塗装はだか仕上げ」

機能性やデザインだけでは品質を語ることはできません。鉄が鉄であるために必要な手順を、 ひとつずつ確かめながら残してきました。南部鉄器の一般的な仕上げ塗装をあえて行わず、 鋳肌をそのまま使う。熱を遮断する層がないからこそ、繊細かつ大胆に、素材の持ち味を引き出せます。

使い捨てが溢れる今だからこそ、そう私たち及源鋳造は考えています。 本文は 13px / line-height: 1.6 / letter-spacing: .02em。 字間は body に 1 回だけ書いてあり、この段落は 0.26px を継承しています。

面は直角、押せるものだけ 60px のピル

--rounded 系はすべて 0.0rem なのに、--rounded-button だけ 3.75rem(60px)。 アウトラインボタンは border ではなく box-shadow: 0 0 0 2px inset で枠を描く。

10%オフ 新商品 おすすめ 売り切れ
05 / PRODUCT CARDS

商品カードは枠も影も持たない

商品名だけ明朝(--text-h5 = 17.6px / 600 / LH 1.4)、価格はゴシックの --text-lg(17px / 700)。 カードの border-radius は 0、box-shadow は none。行間隔は --product-list-row-gap: 3rem、列間隔は 1.5rem。

南部ごはん釜 2合炊
¥25,300
naked pan 両手24cm 深形
¥36,300¥32,670
陸兆 蓋付ミニパン 14cm
¥9,350
MALUTTO 20cm
¥14,300

入力欄だけ radius 10px

--input-height 50px / --input-padding-inline 20px / --rounded-input 10px
ハイフンを含む 8 文字でご入力ください
07 / DEPTH & ELEVATION

影は宣言されているが alpha が 0

--shadow-sm / --shadow / --shadow-md / --shadow-block の 4 つが宣言されているが、 すべて rgb(75 75 75 / 0.0)。このサイトに影は存在しない。 実測で box-shadow として現れるのは、影ではなく枠線の代わりのリングだけ。

Level 0 — 既定
box-shadow: none(--shadow-* はすべて alpha 0.0)
Ring 1px — 円形ボタン・カード枠
rgba(75,75,75,.12) 0 0 0 1px(実測 7 要素)
Ring 2px inset — アウトラインボタン
rgb(75,75,75) 0 0 0 2px inset(実測 1 要素)
Ring 2px inset / 暗い面の上
rgb(255,255,255) 0 0 0 2px inset(実測 3 要素)

1300px と 40 段のスペーシング

viewport
--container-max-width: 1300px(gutter 3rem)
読み物カラム 650px / 780px
1 / 4px
2 / 8px
4 / 16px
6 / 24px
8 / 32px
12 / 48px
16 / 64px
20 / 80px
28 / 112px
Query出現用途
screen and (min-width: 700px)123タブレット。主要な切り替え点
screen and (min-width: 1150px)47小型デスクトップ
screen and (min-width: 1000px)37ナビの展開
screen and (min-width: 1400px)33ワイド
screen and (pointer: fine)21★ホバー演出はマウス環境だけ
(prefers-reduced-motion: no-preference)4アニメーションの出し分け

モバイルファースト(min-width 主体)で、700 / 1000 / 1150 / 1400 / 1600 / 1800px の 6 段。 @media (pointer: fine) で 21 件も分岐しており、下線アニメーションやカスタムカーソルはタッチ環境では出さない。 スティッキー領域は --sticky-area-height: calc(1 * 49px + 1 * 73px) = 122px(告知バー 49px + ヘッダー 73px)。