/* ========================================================================== POTOMAK 2026 — デザイントークン 出典: Figma「POTOSITE_FINAL」(node 4075:1386)の Variables をそのまま反映 このファイルには「値の定義」だけを置く。見た目のルールは base.css 以降に書く。 値を変えたい時は必ずここを直す(各ファイルに直書きしない)。 ========================================================================== 画面幅の切り替え(ブレークポイント) -------------------------------------------------------------------------- CSSの仕様上、切り替え幅は変数(--*)には置けないため、 各ファイルに数値で書く。使ってよい数値はここに挙げた3つだけ。 L 1101px 〜 … 既定。何も書かなければこれ M 〜1100px … 左右2カラムを1カラムにする(タブレット横・小さいPC) S 〜768px … 列数・文字サイズ・左右余白をまとめてスマートフォンへ なぜ3つか: 「列が変わる線」が2つあると、その間に 「レイアウトはスマホ、文字はPC」といった中間状態が生まれ、 どちらの指定が効いているのか追えなくなる。 レイアウトが変わる線は M と S の2本だけ、と決めておく。 なぜ S が768pxか: 実機はスマートフォンが最大430px、タブレットが744px以上で、 その間には何も無い。768pxで切れば、タブレットの縦(810px前後)は Mのタブレット向けレイアウトになり、スマホ用の組みが PC画面の半分ほどの幅で出てしまうことがない。 例外(レイアウトの段ではないもの): 600px … 改行ユーティリティ(u-br-sp / u-br-pc)の境目。base.css 520px … 部品ひとつぶんの調整 500px … u-br-wide の解除 これらは「その部品だけが狭くて破綻する」ための個別対応で、 ページ全体の組みは変えない。増やすときも同じ扱いにすること。 ========================================================================== */ :root { /* ---------- 色 ---------- */ /* 文字色 */ --color-ink: #1F1B18; /* 本文・見出しの基本色 */ --color-muted: #6E6A64; /* 補足テキスト */ --color-faint: #A8A29A; /* さらに弱い注釈・日付など */ /* ブランドカラー */ --color-ruri: #104789; /* 瑠璃色。ロゴ・主要アクセント(Deep Blue と同値) */ --color-blue-light: #006EB4; /* リンクや副次的なアクセント */ /* 面と線 */ --color-paper: #FAFAF6; /* ページの地色。純白ではなく温かみのある白 */ --color-grayge: #F6F4EE; /* Paperより一段沈んだ面。セクションの塗り分けに使う */ --color-line: #E6E2D9; /* 区切り線・枠線 */ --color-white: #FFFFFF; /* * RECRUITページのアクセント。 * 4つの価値に1色ずつ割り当てているので、色を「名前」で呼べる。 * * 使い方の決めごと: * 瑠璃色 = 構造(見出し・リンク・青ベタ) * 黄・橙 = 点。面ではなく点で使い、1画面に1〜2個まで * 広い面積に使うと瑠璃色と competing して画面が濁る。 */ --color-enjoy: #FFD233; /* 黄。明るさ63%→60%(色あい47° / 彩度100%は据え置き) */ --color-creative: #104789; /* 青(瑠璃色と同値) */ --color-variety: #F35D1F; /* 橙。彩度80%→90%(色あい17.7° / 明るさ54%は据え置き) */ --color-smile: #D8C8A0; /* ベージュ */ /* 用途別のエイリアス(役割で呼べるようにする) */ --color-bg: var(--color-paper); --color-bg-alt: var(--color-grayge); --color-text: var(--color-ink); --color-text-sub: var(--color-muted); --color-text-weak: var(--color-faint); --color-accent: var(--color-ruri); --color-link: var(--color-blue-light); --color-border: var(--color-line); /* ---------- 書体 ---------- */ /* * Noto は Google Fonts から読み込んでいる。 * 日本語のWebフォントは100個以上の小さなファイルに分割して配信されるので、 * そのうち1つの読み込みに失敗すると、そのファイルに入っていた文字だけが * 「」(下駄)になって出る(たまに1文字だけ化けるのはこれ)。 * * そのときに端末の日本語フォントへ落ちるよう、Notoの後ろに * macOS / iOS / Windows の標準書体を並べておく。 */ --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; /* 見出し用 */ --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; /* 本文・UI用 */ /* ---------- 文字サイズ ---------- */ /* Figmaのpx値をそのまま採用。レスポンシブ調整は後段で行う */ --fs-display: 38px; /* Display-Serif(H1の約1.2倍。Figma原寸は48px) */ --fs-h1: 32px; /* H1-Serif */ --fs-special: 28px; /* Special-Serif(明朝。BUSINESSの領域説明文) */ --fs-h2: 26px; /* H2-Serif(セクション見出し) */ /* * Name-San。ゴシックの中では一番大きい。 * ただしH2-Serif(26px)より明確に小さくして、 * 「H2という見出しの下に、これらが並んでいる」という関係が * 見ただけで伝わるようにしている。 */ --fs-name: 20px; /* Name-San(ブランド名・店名・施設名) */ --fs-h3: 20px; /* H3-Serif */ --fs-lead: 18px; /* Lead-Serif */ /* * Body Lead。 * 本文(15px)との差が1px(6.7%)しかなく、大きさの違いとして読めなかったため * 18pxに上げた。本文との比は1.2倍。 * ※ 元は16px。戻す場合はこの1行を 16px にすれば全ページ元に戻る。 */ /* * Body Lead。ページ先頭のリード文。 * 本文(15px)との比は1.13倍で、大きさの段階としてはいちばん狭いが、 * リードは本文と隣り合って出ないので見分けはつく。 * 18pxだと、狭い画面で4〜5行になり本編の前に画面を使いすぎる。 * ※ 元は18px。例外はインタビュー記事の本文だけで、 * あちらは page-interview.css で18pxに戻している。 */ --fs-body-lg: 17px; /* Body Lead */ --fs-body: 15px; /* Body */ /* * 小見出し・名前(ゴシック)の大きさ。 * もともと Body Lead と同じ16pxだったが、 * Body Lead を18pxに上げても見出し側が一緒に動かないよう、別に持たせている。 */ --fs-h3-san: 16px; /* * ゴシックの大きい見出し2つ。RECRUITページ用に足した。 * あちらは明朝を使わずゴシックだけでまとめる方針なので、 * 明朝の H1 / H2 に対応するものが必要になった。 * 追加はこの2つまでと決めている。 */ --fs-h1-san: 32px; /* H1-San */ --fs-h2-san: 24px; /* H2-San */ --fs-list: 14px; /* List */ --fs-nav: 13px; /* Nav */ --fs-caption: 12px; /* Caption */ --fs-eyebrow: 12px; /* Eyebrow(セクション上の小見出し) */ /* ---------- 行間 ---------- */ --lh-tight: 1.0; /* Nav */ --lh-heading: 1.45; /* Name-San */ --lh-snug: 1.5; /* Display / H1 / H2 */ --lh-normal: 1.6; /* H3 / Caption / Eyebrow / Label-San */ --lh-special: 1.61; /* Special-Serif(Figmaは28pxに対し行送り45px) */ --lh-relaxed: 1.9; /* Body / Lead / Lead-San */ --lh-loose: 2.0; /* Body Lead / List */ --lh-read: 2.2; /* 読ませる本文(インタビュー記事の本文)。RECRUITのMESSAGEは特殊扱いで2.4 */ /* ---------- 字間 ---------- */ /* Figmaの letterSpacing は % 指定。em に換算(18% → 0.18em) */ /* * 本文の字間。 * Figmaの指定は0.02emだったが、日本語の本文としては詰まっていて、 * 行送りを広く取っている場所ほど「縦は空いて横は詰まる」ちぐはぐさが出る。 * ※ 元は 0.02em。戻す場合はこの数値だけ変えれば全ページ戻る(75か所)。 */ --ls-body: 0.04em; /* 本文・リスト */ --ls-heading: 0.03em; /* H2 / H3 / Lead */ --ls-caption: 0.04em; /* Caption */ /* * 大きい文字(Display 38px / H1 32px)の字間。 * * 本文と同じ値を使うと、字が大きいぶん字面のすき間の割合が小さくなり、 * 同じ数値でも詰まって見える。大きい文字ほど広げるのが定石なので、 * 本文とは別に持たせている。 * 使う場所は front-page の見出し、下層ページの大見出し、 * 店舗名・ブランド名など(11か所)。 * ※ 元は --ls-body と同値の 0.04em。 */ --ls-display: 0.08em; /* * 英字を少し広げるとき。 * 欧文の大文字は日本語より字面が詰まって見えるので、 * 同じ字間だと窮屈になる。少しだけ開けて読みやすくする。 * フッターの見出し、募集職種カードの英字などで使う。 */ --ls-en: 0.06em; --ls-nav: 0.08em; /* グローバルナビ */ --ls-eyebrow: 0.18em; /* セクション上の英字ラベル。かなり広い */ --ls-page-label: 0.35em; /* 下層ページ先頭の英字ページ名。さらに広い */ /* ---------- タイポグラフィのまとまり ---------- */ /* font ショートハンドで使えるよう用意。例: font: var(--type-body); */ /* * Display。ページ先頭の大見出し。ウェイトは400(Regular)。 * * サブヘッドと同じ考え方で、太さで押さずに大きさで見せる。 * 38pxまで大きいと、明朝は500だと画数の多い漢字が黒く潰れて * 「重い」印象が先に立つ。400にすると線の抑揚が見えてくる。 * ※ 元は500。戻す場合はこの数字だけ。 * (Noto Serif JP は400と500しか読み込んでいないので、 * これ以上細くするなら functions.php の読み込みを増やすこと) */ --type-display: 400 var(--fs-display)/var(--lh-snug) var(--font-serif); /* H1。Displayと同じ理由で400(Regular)。※ 元は500。戻す場合はこの数字だけ */ --type-h1: 400 var(--fs-h1)/var(--lh-snug) var(--font-serif); --type-special: 400 var(--fs-special)/var(--lh-special) var(--font-serif); --type-h2: 500 var(--fs-h2)/var(--lh-snug) var(--font-serif); /* * H3だけ Figma では 400 だったが、明朝の20pxは線が細く、 * すぐ下の本文(ゴシック15px)より弱く見えてしまう。 * 他の明朝の見出し(Display/H1/H2)はすべて500なので、そちらに合わせた。 */ --type-h3: 500 var(--fs-h3)/var(--lh-normal) var(--font-serif); --type-lead: 400 var(--fs-lead)/var(--lh-relaxed) var(--font-serif); /* * Name-San。太さ350はRegular(400)とLight(300)の中間。 * Noto Sans JP は可変フォントなので、この中間の太さを指定できる。 */ /* * ゴシックの見出し。ウェイトは400(Regular)。 * * Figmaの指定は500(Medium)だったが、日本語は漢字の画数が多く、 * 同じ500でも欧文よりずっと重く見える。32pxではとくに目立つ。 * 実際、4つの価値の英字や組織と文化の名前は、 * ページ側で400に落とす上書きが入っていた。 * 指定が2か所に分かれるのを避けるため、こちらを400にして上書きを外した。 * ※ 元は500。戻す場合はこの2行の数字を500にすれば全ページ戻る。 */ --type-h1-san: 400 var(--fs-h1-san)/var(--lh-snug) var(--font-sans); --type-h2-san: 400 var(--fs-h2-san)/var(--lh-snug) var(--font-sans); --type-name: 350 var(--fs-name)/var(--lh-heading) var(--font-sans); /* * サブヘッド。本文のすぐ上に置く小見出し。 * * 値は Name-San と同じだが、役割が違うので別の名前で持たせている * (Name-Sanは「ブランド名・店名・施設名」＝固有名詞のための書式)。 * 片方だけ調整したくなったとき、ここを分けておかないと動かせない。 * * なぜこの組み合わせなのか: * 本文(15px / 400 / 行送り1.9)に対して、 * 大きさ … 20px (1.33倍) * 太さ … 350 ← 本文の400より「細い」 * 行送り … 1.45 (本文より詰まっている) * ふつう見出しは本文より太くするが、ここは太さで押さずに * 大きさと行送りの詰まり具合だけで主従をつけている。 * 静かなまま上下関係がはっきりするので、この組みをサイト共通にした。 * * 使う場所: ロゴ解説 / 中途採用の働くメリット / * BUSINESSのプロジェクト事例の各ステップ / ポリシーの中見出し */ /* * 文章の上に置く小見出し。 * * 大きさと行送りは --type-name(固有名・店名)と同じだが、太さだけ違う。 * --type-name … 350。本文より細い * --type-subhead … 450。本文(400)より少し太い * * もとは --type-subhead も350だった。 * 「見出しを太さで押さず、大きさと行送りだけで主従をつける」という * 考えだったが、6箇所すべてで細く見えたので上げた。 * 400(本文と同じ)では差が出なかったので450にしている。 * * 使う場所: BUSINESSのプロジェクト事例の各ステップ / * 中途採用の働くメリット / COMPANYのロゴ解説 / * ポリシーの中見出し / RECRUITトップのMESSAGE / * インタビュー記事の章見出し * * ※ 読み込んでいるNoto Sans JPは 300〜500 の可変フォント(functions.php)。 * 450はその途中の太さで、可変フォントなのでそのまま出る。 * 上限は500。 * ただしフォントが読めなかったときの控え(ヒラギノ角ゴなど)は * 可変ではないので、450は400か500のどちらかに丸められる。 */ --type-subhead: 450 var(--fs-name)/var(--lh-heading) var(--font-sans); /* * 小さな見出し・名前(ゴシック)。 * * --type-h3-san … 文章の中の小見出し(16px)。ポリシー各ページの中見出し * --type-h4-san … そのさらに下の小見出し(15px) * --type-name-sm … 写真の下に置く名前(16px)。Name-San(20px)の小さい版 * * 名前は行送り1.45(--lh-heading)。Name-San(20px)と同じ。 * 以前は2.0にしていたが、それは読ませる文章のための値で、 * 「TOOTH TOOTH MART FOOD HALL＆NIGHT FES」のように * 2行に折り返す名前だと、行と行が離れて別々の名前に見えていた。 * * 役割が違うので本文とは別に持たせている。 * 本文の大きさを動かしても、見出しや名前が一緒に動かないようにするため。 */ --type-h3-san: 500 var(--fs-h3-san)/var(--lh-loose) var(--font-sans); --type-h4-san: 500 var(--fs-body)/var(--lh-relaxed) var(--font-sans); --type-name-sm: 400 var(--fs-h3-san)/var(--lh-heading) var(--font-sans); /* * Lead Body(18px)と Body(15px)の使い分け。 * * Lead Body … ページの先頭に一度だけ置く導入文。 * 下層ページのヒーロー、COMPANYのヒーロー、 * RECRUIT下層ページのイントロの3つ。 * 例外として、インタビュー記事の本文もこちら * (最初から最後まで文章だけを読ませるページのため)。 * Body … それ以外の文章すべて。 * セクションの導入文も、記事の本文も、カードの説明もこちら。 * * 「ページに入って最初に読む一段落」だけを大きくする、という決め方。 * セクションごとの導入文まで18pxにすると、ページの中で大きな文章が * 何度も出てきて、どれが最初の説明なのか分からなくなる。 */ --type-body-lg: 400 var(--fs-body-lg)/var(--lh-loose) var(--font-sans); --type-body: 400 var(--fs-body)/var(--lh-relaxed) var(--font-sans); /* * List は一覧や項目名に使う。折り返したときに間延びしないよう、 * 行送りは詰めた側(1.6)にしている。 * 項目と項目の空きは、行送りではなく余白で作ること。 */ --type-list: 400 var(--fs-list)/var(--lh-normal) var(--font-sans); --type-nav: 400 var(--fs-nav)/var(--lh-tight) var(--font-sans); --type-caption: 400 var(--fs-caption)/var(--lh-normal) var(--font-sans); --type-eyebrow: 500 var(--fs-eyebrow)/var(--lh-normal) var(--font-sans); /* ---------- レイアウト ---------- */ /* * 最大幅は設けない方針。 * 画面が広がっても左右の余白は一定のままで、中身が伸びる。 * 値はFigma(アートボード1440px)での実測に合わせている。 */ /* * ヘッダーの実測高さ。main.js が実際の値で上書きする(下は初期値)。 * 内訳: 上の余白46 + ナビ29 + 下の余白34 + 下端の線1 = 110px */ --header-height: 110px; /* * 罫線を文字より左右に少しだけはみ出させる量(視覚調整)。 * 文字は縁に余白を持っているため、線と端を数値上ぴったり揃えると * 文字の方が飛び出して見える。それを打ち消すための値。 */ --rule-overhang: 3px; /* * 区切り線まわりの空き。 * * 線の性格ごとに3段階。ページごとに数字を決めず、必ずここから選ぶこと。 * (以前はページごとにバラバラで、同じ見た目の線なのに * 100px だったり 48px だったりしていた) * * --rule-section … セクションどうしの区切り。区切りの前後に取る * (前24px + 後24px = セクション間48px) * --rule-row … セクションの中で項目を分ける線。線の前後に取る * (ブランド1組・沿革1行・カルチャーの各ブロックなど) * --rule-title … 見出しのすぐ下に線が来るときの、見出しと線のあいだ * 見出しが線の上に乗っているように見せるので、かなり狭い * --rule-head … 見出し(またはリード文)と、その中身のあいだ * * 画面幅では変えない。狭い画面でも同じ空きにする。 */ --rule-section: 24px; --rule-row: 32px; --rule-title: 16px; --rule-head: 24px; /* * 大きなまとまりどうしの区切り。 * * 「見出し + 文章 + 写真」で1つになっているような、 * それ自体が高さを持つブロックを並べるときに使う。 * (BUSINESSのプロジェクト事例の 01 / 02 / 03 など) * * 行の区切り(--rule-row)では詰まって続き物に見え、 * その倍(64px)では離れすぎて順番のつながりが切れる。 * その中間として、この1つだけを持つ。 */ --rule-block: 48px; /* * 写真とその説明のあいだ(カードの中)。 * * 写真 * ↕ --rule-caption … 写真と、その下の1行目 * エリア名 * ↕ --space-2xs(4px) … 説明どうしの行 * 店名 * * 説明は写真の一部として読ませたいので、かなり狭く取る。 * 24pxも空けると、写真と文字が別々のものに見えて、 * 一覧を上から流し見する動きが止まってしまう。 * * これまでカードごとに 12px / 16px / 24px とバラバラだったため、 * ここに1つ決めた。新しく写真つきのカードを作るときは必ずこれを使う。 */ --rule-caption: 12px; /* * ベタ面のブロック(お問い合わせ帯・SIGNATURE PROJECTなど)の境目の空き。 * * 空きの取り方の考え方は --rule-section と同じで、 * 「境目をはさんで、内側と外側を必ず同じ数値にする」。 * 地色が続くところは 内24px + 外24px = 48px。 * ベタ面は色の面が手前に出て見えるぶん、その倍で 内48px + 外48px = 96px。 * * 外側(margin) … 色の縁から、上のセクションの中身まで * 内側(padding) … 色の縁から、ブロックの中身まで * * 上下とも同じ。ベタ面を足すときは必ずこれを使い、数字を直接書かないこと。 * * 外側は隣のセクションの padding(--rule-section) が先に入っているので、 * margin にはそのぶんを引いた値を書く(下の .contact / .signature を参照)。 * * ※ RECRUITページはセクションの空きを --rec-gap という別の名前で * 持っているが、中身は --rule-section と同じ値。ベタ面は使っていない。 */ --rule-fill: calc(var(--rule-section) * 2); --pad-page: 46px; /* ヘッダー / フッターの左右余白 */ --pad-content: 120px; /* 本文セクションの左右余白 */ --gutter: 24px; /* スマートフォン時の左右余白 */ /* ---------- 余白のスケール ---------- */ /* 4pxを基準にした段階。セクション間の間隔は --space-3xl 前後を想定 */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px; }