/* ============================================================= tokens.css — DESIGN-apple.md のデザイントークンを CSS 変数化 ------------------------------------------------------------- 出典: ../DESIGN-apple.md（Apple.com を解析した Claude Design 仕様）フォント代替: SF Pro → Inter（Latin/UI） + Noto Sans JP（日本語）出典: KnowledgeBase/Decisions/font-selection-google-fonts-apple-like.md 使い方: 各ページのでこの 1 枚を読み込み、ハードコードした hex/px は使わず必ず var(--token) を参照する。 ============================================================= */ /* --- Webフォント（Google Fonts） --------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+JP:wght@300;400;600;700&display=swap'); :root { /* ---- Colors : Brand & Accent ---- */ --color-primary: #0066cc; /* Action Blue : 唯一のインタラクティブ色 */ --color-primary-focus: #0071e3; /* フォーカスリング */ --color-primary-on-dark: #2997ff; /* 暗面のリンク（Sky Link Blue） */ --color-primary-hover: #0076DF; /* 青ピルの hover（apple.com --sk-button-background-hover 実測）*/ --color-on-primary: #ffffff; /* ---- Colors : Text ---- */ --color-ink: #1d1d1f; /* 見出し・本文（純黒ではない） */ --color-body: #1d1d1f; --color-body-on-dark: #ffffff; --color-body-muted: #cccccc; /* 暗面の補助テキスト */ --color-ink-muted-80: #333333; --color-ink-muted-48: #7a7a7a; /* disabled / 法的細字 */ /* ---- Colors : Surface ---- */ --color-canvas: #ffffff; /* 主役の白 */ --color-canvas-parchment: #f5f5f7; /* Apple のオフホワイト */ --color-surface-pearl: #fafafc; /* ゴーストボタンの地 */ --color-surface-tile-1: #272729; /* 暗タイル 1（主） */ --color-surface-tile-2: #2a2a2c; /* 暗タイル 2（微妙に明） */ --color-surface-tile-3: #252527; /* 暗タイル 3（微妙に暗） */ --color-surface-black: #000000; /* 動画の地（ナビにも暗タイルにも使わない）*/ /* 暗タイルの地（2026-09-11 決定・本プロジェクト独自値）。 apple.com のトップの暗タイルは実測 #000 だが、パーチメント(#f5f5f7)の区画と 12px の隙間で隣り合うと落差が強すぎて硬い。Apple の内側の面 #272729 よりわずかに明るく、色味を持たないニュートラルな #2C2C2C に置く。 */ --color-surface-dark: #2C2C2C; /* 暗い面に置くカードの地。apple.com 実測は #242426 だが、それは地が #000 だから「地より明るい板」として成立していた値。地を #2C2C2C にすると**地より暗くなって明暗が逆転し**、板と地の境目が消える。地の 1 段上（#3A3A3C）に置き直す（2026-09-11 変更）。暗い面では影がほとんど読めないので、板の輪郭を作るのは**明度差だけ**。 */ --color-card-on-dark: #3A3A3C; /* グローバルナビ（apple.com 実測: 既定は「明」。暗は .globalnav-dark 相当のバリアント）*/ --color-nav-scrim: rgba(250, 250, 252, .8); /* 背景・ほぼ白の半透明 */ --color-nav-link: rgba(0, 0, 0, .8); /* リンク色・黒 80% */ --color-nav-scrim-dark: rgba(22, 22, 23, .8); /* 暗バリアント（暗タイル上に置くページ用）*/ --color-nav-link-dark: rgba(255, 255, 255, .8); /* ハンバーガーで開くトレイ。帯と同じ地の続きで、文字色も帯と共通（--color-nav-link）。 .8 より不透明にするのは、トレイが本文の上に重なって 17px の行を 4 つ載せるため。 */ --color-nav-tray: rgba(250, 250, 252, .94); --color-nav-tray-dark: rgba(22, 22, 23, .94); --color-surface-chip-translucent: rgba(210, 210, 215, 0.64); /* 写真・動画の上に重ねる操作系の地。中身の明暗が変わっても記号が消えない濃さ */ --color-scrim-control: rgba(0, 0, 0, 0.55); /* ---- Colors : Hairline ---- */ --color-divider-soft: #f0f0f0; /* セカンダリボタンのリング相当 */ --color-hairline: #e0e0e0; /* カード・チップの 1px 罫 */ --color-input-border: rgba(0, 0, 0, 0.08); /* ---- Typography : font family ---- */ --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Noto Sans JP', sans-serif; --font-text: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Noto Sans JP', sans-serif; /* Inter は SF Pro よりトラッキングが広いため、表示サイズで -0.01em 詰める */ /* ---- Typography : ramp（size / weight / line-height / letter-spacing）---- 行間とトラッキングは DESIGN-apple.md「日本語の組み（:lang(ja)）」の日本語ランプ。 apple.com/jp 実測の原則「日本語は負トラッキングを 0 に戻し、行間をフォントに合わせて置き直す」。ラテンの元値は同 md の typography（hero 1.07 / body 1.47 など）を参照。 */ --type-hero-display: 600 56px/1.125 var(--font-display); /* ls: -0.28px */ --type-display-lg: 600 40px/1.125 var(--font-display); /* ls: 0 */ --type-hero-display-md: 600 40px/1.125 var(--font-display); /* hero @ 641-1068px（display-lg と同値）*/ --type-hero-display-sp: 600 clamp(28px, 8.1vw, 34px)/1.125 var(--font-display); /* hero @ <=640px。420px で 34px、419px 以下は 28px へ収束（DESIGN-apple の 34/28 を連続化）*/ --type-display-md: 600 34px/1.47 var(--font-text); /* ls: -0.374px */ --type-lead: 400 28px/1.2 var(--font-display); /* ja: 表示サイズの並び順（40→1.125 / 28→1.2 / 21→1.25）。ラテンは 1.14 */ --type-lead-airy: 300 24px/1.50 var(--font-text); /* ls: 0（稀な weight 300）*/ --type-tagline: 600 21px/1.25 var(--font-display); /* ls: 0.231px */ --type-tile-subhead: 400 21px/1.25 var(--font-display); /* ls: 0.011em（apple.com .tile-subhead）*/ --type-tile-headline-sp: 600 32px/1.125 var(--font-display); /* ls: 0.002em（狭幅の .tile-headline）*/ --type-body-strong: 600 17px/1.4 var(--font-text); /* ja: ls 0（ラテン 1.24）*/ --type-body: 400 17px/1.7 var(--font-text); /* ja: ls 0（ラテン 1.47）。16px ではなく 17px */ --type-caption: 400 14px/1.6 var(--font-text); /* ja: ls 0（ラテン 1.43）*/ --type-caption-strong: 600 14px/1.29 var(--font-text); /* ls: -0.224px（フッタ列見出し）*/ --type-button-utility: 400 14px/1.29 var(--font-text); /* ls: -0.224px（暗ボタン・細リンク）*/ --type-button-large: 300 18px/1.00 var(--font-text); /* ls: 0（稀な weight 300）*/ --type-fine-print: 400 12px/1.4 var(--font-text); /* ja: ls 0（ラテン 1.0）。狭幅で折り返す */ --type-nav-link: 400 14px/1.29 var(--font-text); /* ls: -0.14px。apple.com 実測は 12px/1.0 だが、項目が 4 つしかない本サイトでは小さく見えるため 14px へ。出典: DESIGN-apple.md {component.global-nav} の 2026-09-10 注記 */ --type-dense-link: 400 17px/2.41 var(--font-text); /* store のリンク列。グローバルフッタには使わない */ --type-footer-link: 400 12px/1.4167 var(--font-text); /* apple.com 日本語フッタ .ac-gf-directory:lang(ja) 実測 */ /* 表示サイズに付ける負のトラッキング（Apple tight）。本文・注記・フッタ・細字は 0（apple.com の :lang(ja) に一致）*/ --tracking-hero: -0.28px; --tracking-display-md: -0.374px; --tracking-body: 0; --tracking-nav: -0.14px; /* 14px で -0.01em 相当（12px 時の -0.12px を比例させた）*/ --tracking-lead: 0.196px; --tracking-tagline: 0.231px; --tracking-tile-subhead: 0.011em; --tracking-tile-headline-sp: 0.002em; --tracking-caption: 0; --tracking-fine-print: 0; --tracking-footer-link: 0; /* ---- Touch target（DESIGN-apple: 最小 44x44）---- */ --tap-target-min: 44px; /* ---- Stroke ---- */ --stroke-hairline: 1px; --stroke-focus: 2px; --stroke-pearl: 3px; /* ---- Radius ---- */ --radius-none: 0px; --radius-xs: 5px; --radius-sm: 8px; /* 暗ユーティリティボタン */ --radius-md: 11px; /* Pearl ボタン */ --radius-lg: 18px; /* ユーティリティカード */ --radius-pill: 9999px; --radius-full: 9999px; /* ---- Spacing（base 8px）---- */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 17px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 80px; /* 写真の無いユーティリティセクションの上下パディング */ /* ---- プロダクトタイル（apple.com 実測 2026-09-09 / DESIGN-apple.md §Layout）---- */ --space-tile-top: 48px; /* コピー上の余白 */ --space-tile-bottom: 56px; /* コピー下の余白 */ --space-tile-gap: 12px; /* タイル間の隙間。ページ背景の白が見える */ --size-tile-full: 692px; /* 全幅タイルの最小高さ（pc）*/ --size-tile-full-tbl: 650px; --size-tile-full-tb: 570px; --size-tile-full-sp: 500px; --size-tile-half: 580px; /* 2 列タイルの最小高さ（pc）*/ --size-tile-half-tbl: 490px; --size-tile-half-tb: 490px; --size-tile-half-sp: 500px; /* ---- Component inset ---- */ --inset-dark-utility: 8px 15px; --inset-pearl: 8px 14px; --inset-hero-cta: 14px 28px; --inset-primary: 11px 22px; --inset-chip: 12px 16px; --inset-chip-selected: 11px 15px; --inset-search: 12px 20px; --inset-floating-bar: 12px 32px; --inset-sub-nav-cta: 7px 16px; /* ---- Component size / layout ---- */ --size-logo-nav: 22px; --size-logo-footer: 20px; /* ヒーローのコピーの下に置くブランドマーク。hero の見出し（56 / 40 / 34-28）と同じ 3 段のはしごで縮める（バンドは components.css の「メディアスクリーン別バンド」節）*/ --size-logo-hero: 56px; --size-logo-hero-md: 44px; /* 641-1068px（hero が 40px になるバンド）*/ --size-logo-hero-sp: 36px; /* <=640px */ --size-icon-sm: 14px; --size-sub-nav: 52px; --size-video-toggle: 32px; /* 動画パネルの停止ボタンの見た目。タップ領域は 44px（当たり判定を広げる）*/ --inset-video-toggle: 12px; /* 写真の右上からの距離 */ --size-floating-bar: 64px; /* 写真つきカード（apple.com/jp/store の .rf-cards-scroller-itemview 実測。ルート 17px 換算）*/ --size-card-media-max: 400px; /* 幅の上限 */ --size-card-media-h: 500px; /* 器の高さ。Apple は固定、こちらは min-height で使う */ --space-card-gap: 20px; /* カード間。タイルの目地 12px とは別物 */ --content-max-wide: 1040px; --content-max-nav: 1024px; /* グローバルナビの中身（apple.com 実測）*/ /* フッタの中身。apple.com 実測は 980px だが、本サイトは **800px** に詰めた（2026-09-11）。列を内容幅＋ space-between で散らすため、**器の幅がそのまま列の間隔になる** （間隔 = (器 − 列の合計幅 287px) ÷ 3）。980px だと 231px 空いて間延びする。 800px で 171px。Apple は列ごとの項目数が多く箱が太いので 980px で成立する。 */ --content-max-footer: 800px; --inset-chrome-inline: 22px; /* ナビ・フッタの左右余白（apple.com 実測）*/ --content-max-showcase: 820px; --content-max-media: 760px; --content-max-reading: 720px; --content-max-steps: 680px; --content-max-business: 640px; --content-min-search: 200px; --column-business-label: 160px; --column-faq-label: 200px; /* FAQ のカテゴリ見出しレール（DESIGN-apple.md faqLabelColumnWidth）*/ --indent-faq-answer: 24px; /* FAQ の答えの字下げ（DESIGN-apple.md faqAnswerIndent）*/ --column-footer-min: 160px; /* ---- Motion（DESIGN-apple.md §Motion / apple.com/jp/ipad 実測）---- .animationDefaults_buildIn{opacity:0;transform:translateY(30px)} が出典。動かすのは opacity と transform だけ。幅・高さ・色は動かさない。 */ --motion-shift: 30px; /* 立ち上がりの持ち上げ量 */ --motion-duration: 800ms; --motion-ease-out: cubic-bezier(0, 0, .5, 1); /* 同ページで最頻のイージング */ --motion-stagger: 120ms; /* 区画の中で 1 要素ずつ遅らせる量 */ /* hover（apple.com の .BaseCard 実測: transition transform .3s cubic-bezier(0,0,.5,1)）。 Apple は箱を +6px 育てるが、全幅タイルでは目地が壊れるので中の写真を拡大する */ --motion-hover-scale: 1.02; /* 枠の中の写真を拡大する量（apple.com/jp/ipad の BaseCard）*/ --motion-hover-scale-card: 1.01; /* カードごと持ち上げる量（apple.com/jp/store の .rf-ccard:hover 実測）*/ --motion-hover-duration: 300ms; /* ヒーロー写真のゆっくりした寄り（DESIGN-apple.md {motion.hero-zoom} / 2026-09-12）。ページ先頭の 1 枚だけが 1 回寄って止まる。往復もループもしない。 1.06 は「動いたと分かるが、絵の中身が変わったとは思わない」上限。これ以上寄せると人や机の大きさが変わって見え、写真を差し替えたように読める。 */ --motion-hero-zoom-scale: 1.06; --motion-hero-zoom-duration: 12000ms; /* 2026-09-12: 3000 → 6000 → 12000ms。寄りの速さを 2 度半分にした */ /* ヒーローを複数枚で回すとき（DESIGN-apple.md {motion.hero-slideshow}）。切り替えは「寄り終わり＋ --motion-hero-hold」。溶暗はその頭に重なる。値は JS からも読む（design/motion.js）。時間の出どころをここ 1 か所に保つため、 motion.js 側に同じ数を書かない。 */ --motion-hero-hold: 1000ms; /* 寄り切ってから次へ移るまでの間 */ --motion-hero-dissolve: 1200ms; /* 溶暗（ディゾルブ）の長さ */ /* ---- Elevation（システム内で唯一の影は製品画像にのみ）---- */ --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0; /* 面に置かれた製品写真だけ */ /* カードの影（apple.com/jp/store 実測 .rf-pcard-content ほか）。隙間を挟んで並ぶ独立した面にだけ付ける。ボタン・文字には付けない */ --shadow-card: 2px 4px 12px rgba(0, 0, 0, 0.08); --shadow-card-hover: 2px 4px 16px rgba(0, 0, 0, 0.16); --border-hairline: 1px solid var(--color-hairline); --backdrop-frosted: saturate(180%) blur(20px); } /* --- ベース ----------------------------------------------------- */ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font: var(--type-body); letter-spacing: var(--tracking-body); color: var(--color-ink); background: var(--color-canvas); /* 日本語の行末禁則。apple.com/jp の実測（/jp/global/styles/a/global.css の body{line-break:strict}）*/ line-break: strict; } /* 見出しは表示フォント 600 + 負トラッキング（境界は不変） */ h1 { font: var(--type-hero-display); letter-spacing: var(--tracking-hero); margin: 0; } h2 { font: var(--type-display-lg); margin: 0; } h3 { font: var(--type-display-md); letter-spacing: var(--tracking-display-md); margin: 0; } /* 日本語は単語の切れ目が無く、どこでも折り返せてしまう。放っておくと語の途中で切れ、次の行が極端に短くなる。Apple は日本語ページで
と .nowrap を手で入れているが、その手当てをブラウザに任せる。見出しにも段落にも 2 つをセットで当てる。出典: DESIGN-apple.md「日本語の組み（:lang(ja)）」の「折り返しの制御」 */ :is(h1, h2, h3), p { text-wrap: balance; /* 行の長さを揃える。最終行だけ極端に短くしない */ word-break: auto-phrase; /* 文節の切れ目でだけ折り返す。「構築」「一緒」を割らない */ } a { color: var(--color-primary); text-decoration: none; } /* --- 代表コンポーネント（最小実装。詳細は SKILL.md / DESIGN-apple.md）--- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-on-primary); font: var(--type-body); border: 0; border-radius: var(--radius-pill); padding: var(--inset-primary); cursor: pointer; transition: transform .1s ease, background var(--motion-hover-duration) var(--motion-ease-out); } .btn-primary:hover { background: var(--color-primary-hover); } /* apple.com --sk-button-background-hover 実測 */ .btn-primary:active { transform: scale(0.95); } /* システム共通のプレス挙動 */ .btn-primary:focus-visible { outline: var(--stroke-focus) solid var(--color-primary-focus); } .btn-secondary-pill { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--color-primary); font: var(--type-body); border: var(--stroke-hairline) solid var(--color-primary); border-radius: var(--radius-pill); padding: var(--inset-primary); cursor: pointer; transition: transform .1s ease; } .btn-secondary-pill:active { transform: scale(0.95); } /* フルブリードのタイル：12px の隙間（ページ背景の白）＋色の切替が区切り（角丸・影・罫なし） apple.com 実測: .section{gap:12px} / .tile-wrapper{padding:48px 0 56px} / .theme-dark{background:#000} */ .tile-light { background: var(--color-canvas); color: var(--color-ink); } .tile-parchment { background: var(--color-canvas-parchment); color: var(--color-ink); } /* 暗タイルの地は #000 ではなく --color-surface-dark(#2C2C2C)（2026-09-11 変更・上の定義に理由） */ .tile-dark { background: var(--color-surface-dark); color: var(--color-body-on-dark); } .tile-light, .tile-parchment, .tile-dark { padding: var(--space-tile-top) 0 var(--space-tile-bottom); margin-bottom: var(--space-tile-gap); } .tile-dark a { color: var(--color-primary-on-dark); } /* 暗面のリンクは Sky Link Blue */ /* 写真の無いユーティリティセクション（FAQ・事業者情報・手順）は従来の 80px を使う */ .tile-utility { padding: var(--space-section) 0; } .product-shadow { box-shadow: var(--shadow-product); } /* 製品画像にのみ */ .card-utility { background: var(--color-canvas); border: var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-lg); }