/* ══════════════════════════════════════════════════════════ 約物だけ YakuHanJP に差し替える YakuHanJP は約物だけを収録したフォント。日本語フォントより前に置くと 約物だけが差し替わり、それ以外は後ろの Gen に落ちる。 ゴシックのベースが Noto Sans JP ＝ Gen の和文と同じなので字形が衝突しない。 woff2 は軽い（Medium 3.6KB / ExtraBold 3.8KB）ので fonts/ に自前で置いてある。 CDN への依存が無く、版も固定される。出典は yakuhanjp v4.1.1（OFL 1.1 AND MIT）。 2点、そのまま重ねると合わないので補正している。 1. 大きさ … Gen は CJK を 92.5% に縮めて Inter の cap height に合わせている。 YakuHanJP は Noto を 100% のまま使うので約物だけ一段大きくなる。 size-adjust:92.5% で揃える（「のインクの高さ 100px 指定で 65 → 60、Gen と一致）。 2. 線の太さ … Gen の和文は Noto を一段太いウェイトから取っている（公表値 wght 465）。 同じ番号を当てると約物だけ細くなるので、ウェイトを1段上げて割り当てる。 実測（300px・「の縦線）： 700 … Gen 37 / Yaku 700 = 34 / Yaku 800 = 37（一致）→ ExtraBold を使う 400 … Gen 24 / Yaku 400 = 21 / Yaku 500 = 26 → Medium を使う unicode-range は yakuhanjp v4.1.1 の CSS と同じ25個（突き合わせ済み）。 版を上げるときは、この25個・size-adjust の値・太さの割り当てを再確認する。 ══════════════════════════════════════════════════════════ */ @font-face{ font-family:'YakuHanJP-Gen';font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/YakuHanJP-Medium.woff2) format('woff2'); size-adjust:92.5%; unicode-range:U+3001,U+3002,U+3008,U+3009,U+300A,U+300B,U+300C,U+300D,U+300E,U+300F,U+3010,U+3011,U+3014,U+3015,U+30FB,U+FF01,U+FF08,U+FF09,U+FF1A,U+FF1B,U+FF1F,U+FF3B,U+FF3D,U+FF5B,U+FF5D; } @font-face{ font-family:'YakuHanJP-Gen';font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/YakuHanJP-ExtraBold.woff2) format('woff2'); size-adjust:92.5%; unicode-range:U+3001,U+3002,U+3008,U+3009,U+300A,U+300B,U+300C,U+300D,U+300E,U+300F,U+3010,U+3011,U+3014,U+3015,U+30FB,U+FF01,U+FF08,U+FF09,U+FF1A,U+FF1B,U+FF1F,U+FF3B,U+FF3D,U+FF5B,U+FF5D; } @font-face{font-family:'BIZ UDPGothic';src:local('BIZ-UDPGothic');font-weight:400;font-display:swap} @font-face{font-family:'BIZ UDPGothic';src:local('BIZ-UDPGothic-Bold');font-weight:700;font-display:swap} :root{ /* 指定パレット（リングと色玉で共有） */ --orb-c1:#e8254c; --orb-c2:#ff6100; --orb-c3:#4ca813; --orb-c4:#3f72f3; --orb-c5:#37a0bc; /* インサイトの4種を示す色。 値はパレット（--orb-c1〜c4）と同じだが、--orb-ai と同じ理由で別の変数に置く ── パレットの変数はメッシュの色玉でパネルから変えられてしまうため。 【申し送り】これらの色はいま背景のメッシュで装飾として使っているものと同じ。 ここで「異常／リスク／機会／トレンド」という意味を与えると、 同じ色が1ページの中で装飾と分類の2つの役目を持つことになる。要確認 */ --orb-insAnomaly:#E8254C; /* 異常 zap */ --orb-insRisk:#FF6100; /* リスク triangle-alert */ --orb-insChance:#4CA813; /* 機会 gem */ --orb-insTrend:#3F72F3; /* トレンド trending-up */ /* AI 関連の機能を示す色（Turquoise）。 既存サービスの中で AI 関連の機能を示すときに使う色で、この機能でも適用されている。 このページでも随所で使うので、パレットの --orb-c5 とは別に意味を持つ変数として置く （--orb-c5 はメッシュの色玉で、パネルから色を変えられてしまうため） */ --orb-ai:#37A0BC; /* AI の色を「地の上の文字」に使うときの色。既定は --orb-ai と同じ。 ただし小さな文字では明度差が足りない（ページ地 #F1F4F8 に対して 2.75:1、 WCAG AA の 4.5:1 に届かない）。読みやすさを優先するなら、 色相・彩度はそのままで #2A798F にすれば 4.50:1 になる。 ここだけ差し替えれば、面として使っている箇所（帯・現在地のマーク）は変わらない */ --orb-aiInk:var(--orb-ai); /* 「Journey NN」の帯。地は既定で AI の色だが、別に変数を置いてある。 白文字との明度差が 3.0:1 で、13px の文字としては WCAG AA（4.5:1）に届かない。 読みやすさを優先するなら、この変数だけを少し暗い Turquoise にすれば ページの他の箇所（07 の番号・現在地のマーク）はそのままにできる */ --orb-tagBg:var(--orb-ai); --orb-tagInk:#ffffff; --orb-tagPadY:5px; /* 帯の上下。KV のリード文と同じく詰めぎみ */ --orb-tagPadX:9px; --orb-eyePadYSm:3px; /* 柱の中の肩（Approach / Insight）の帯の上下。 セクションの肩より細身に見せる */ --orb-tagGap:4px; /* Journey とナンバーの間（字間のぶんが別に入る） */ --orb-tagAfter:16px; /* 帯と段の名前の間 */ /* 肩の文字をロゴの O より右へ入れる量（ロゴの高さ比）。 O は丸いので、縁を少し外へ出したほうが揃って見える。 パネルから触るので :root 側に置く（#orbLp に書くと上書きされる） */ --orb-logoLead:0.06; /* 09（もと 08＋09）。パネルから触るので :root 側に置く （#orbLp に書くと上書きされて効かない） */ --orb-closeJa:0.66; /* 和文の見出しの大きさ（セクション見出しに対する比） */ --orb-ovH2:0.66; /* 02 Overview の見出しの大きさ（同上）。 動画がすぐ上にあるので、大きいままだと密度が高く見える。 いまは 09 の和文見出し（--orb-closeJa）と同じ値だが、 つまみは別なので片方を動かしてももう片方は追随しない */ --orb-closeEnGap:0.65em; /* 和文のかたまりと英文の間。英文の文字サイズが単位なので、 1440 で約 47px（1.1em だと 80px で空きすぎた） */ --orb-closeLeadW:40em; /* 09 の本文の折り返し幅（本文の既定は 34em） */ /* 07 の流れ（本文の中のピル） */ --orb-flowPadY:4px; /* ピルの上下。04 のピルより抑えている（あちらは 9px） */ --orb-flowPadX:14px; /* ピルの左右。04 のピルと同じ */ --orb-flowGapX:6px; /* 横に並ぶピルの間 */ --orb-flowGapY:6px; /* 回り込んだ行の間。罫（1px）が上下で2本ぶんになるので、 4px より詰めると罫2本が1本の線に見えはじめる */ --orb-revealStep:70ms; /* 1つずつの遅れ */ --orb-revealDur:520ms; /* フェードの長さ */ --orb-revealShift:8px; /* 下から持ち上げる量 */ /* ピルの「きらり」。ピルが現れる前に、背景と同じ5色の帯がひと撫でする。 ピルは帯が通り過ぎてから出てくるので、文字の側の遅れに glintLead を足してある */ --orb-glintDur:620ms; /* 帯が通り過ぎる長さ */ --orb-glintLead:300ms; /* 帯が出てからピルが現れるまで */ --orb-glintA:0.95; /* 帯のいちばん濃いところ */ --orb-glintWhite:70%; /* 帯の色を白へ寄せる量。背景の色玉（--orb-meshWhite 61）と同じ値 */ --orb-glintWhiteEn:34%; /* 09 の英文だけ別に持つ。文字の形で抜くので、ピルと同じ淡さだと 細い線が下地に溶けて読めない */ --orb-glintDurEn:1400ms; /* 英文は幅があるので、帯はゆっくり渡す */ --orb-revealDurEn:1300ms;/* 英文が現れる長さ。ピル（520ms）より遅らせて、ゆっくり浮かせる */ --orb-glintLeadEn:520ms; /* 帯が出てから英文が現れるまで。ピル（300ms）より長い */ --orb-glintBand:linear-gradient(100deg, transparent 0%, transparent 34%, #000 45%, #000 55%, transparent 66%, transparent 100%); --orb-glintW:46%; /* 帯の幅（ピルの幅に対する比） */ --orb-glintBlur:7px; /* 帯のぼかし。強めにかけて「板が通る」ではなく「光が走る」に寄せる */ --orb-glintSkew:-14deg; /* 帯の傾き */ --orb-pillBg:#fff; /* ピルの地。地を透かさない白 */ --orb-page:#F1F4F8; /* 全体背景：極めて薄いブルーグレー */ /* 太いリングの内側。透明にしてあるので、ページの地（四隅の白いグラデーションを含む） がそのまま見える ＝ 本当に抜けて見える。 以前は #ffffff の円板を置いていたが、地より明るい白い面として見えていた。 白い面に戻す場合はここを #ffffff にすれば元どおり（要素も仕組みも残してある）。 */ --orb-hole:transparent; /* メッシュグラデーション 色玉の作りは「背景アニメ検討_A案」の手法に倣う。 blur は使わず減衰でふちを作り、色を白へ寄せる。 hard-light は 0.5 未満のチャンネルを暗くする方向に働くので、 白へ寄せてチャンネルを 0.5 より上へ持ち上げると縁や重なりが沈まない。 濃さは A案 の 0.28（文字の背後の地）ではなく、KV なので上げている。 動きは mesh-gradient-controller.html のもの ＋ A案 の回り舞台。 */ --orb-meshBg:#ffffff; --orb-meshBlur:0px; /* filter:blur は使わない（A案 と同じ処置） */ --orb-meshFade:58%; /* ふちのやわらかさは radial-gradient の減衰で作る */ --orb-meshWhite:61; /* 色を白へ寄せる %（ラフの淡さに寄せて 45 → 52 → 61） 61 は「52 ＋ 白い幕 0.22」と同じ見え方になる値。 実測で平均差 0.62/255・最大差 5/255（＝見分けがつかない）。 幕を1枚やめられるので、全画面の合成が1層減る */ --orb-meshSize:75vmax; --orb-meshOpacity:1; /* 濃さ */ --orb-veil:0; /* 白い幕（地の色をかぶせる量）。 いまは 0＝使わない。色を白へ寄せる量（61）に畳み込んだため。 仕組みは残してあるので、パネルから上げれば戻せる */ --orb-meshBlend:hard-light; --orb-meshDur:6s; --orb-amp:1.6; --orb-rotorSpin:64s; /* 回り舞台の周期（A案 の spin） */ /* ドーナツの質感 */ --orb-glowBlend:soft-light; --orb-sheenA:0.22; /* 光の掃きの強さ */ --orb-sheenDur:14s; /* 光の掃きの周期 */ --orb-sheenD:0px; /* 光の掃きの円板の直径（JS が入れる） */ /* 質感テクスチャ（モノクロのマーブル／波紋を重ねて色面をゆがませる） */ --orb-texA:0.32; /* 強さ */ --orb-texBlend:soft-light; --orb-texSize:120vmax; /* きめの大きさ（タイル1枚の辺） */ --orb-texDur:90s; /* 1枚目の回転周期 */ --orb-texBreath:1.18; /* 呼吸（拡縮）の倍率 */ --orb-texImg1:none; /* 画像は JS が起動時に一度だけ作る */ --orb-texImg2:none; --orb-texImg3:none; --orb-cam:1; /* カメラの寄り。1 が最終位置 */ --orb-donutA:1; /* ドーナツの濃さ。0 でドーナツ専用の質感（縁のグロー・ 光の掃き・質感テクスチャ）を消す。板として見せている ときはこれらが帯の形のまま残ってしまうため */ /* 板（メッシュを見せる矩形）の白抜き文字を読ませるための処置。 面の影は #orbPlateShade（メッシュの層の中）で、既定の合成は multiply。 multiply で灰色を掛けるのは明度を下げるのと同じ演算なので、 色相と彩度の比が保たれる＝面が濁らない。 以前は content 層に半透明の暗い層を normal で重ねていたが、 これは暗い色を混ぜる操作なので面が灰色に寄って濁っていた。 mix-blend-mode は同じ重なり文脈の中でしか混ざらない。#orbMain は z-index:1 で重なり文脈を作るので、content 層に置いた影はメッシュまで 届かない。だから影はメッシュの層の中（#orbPlateShade）に置いている。 */ /* 既定はどちらも 0。板は見出しではなく装飾として見せる方向で進めるため、 重ねるグラデーションは置かず、メッシュの面を KV と同じ状態で見せる。 読ませる必要が出たときにパネルから上げる。 */ --orb-plateShade:0; /* 面の影の濃さ（0 で無し） */ --orb-plateBlend:color-burn; /* 濃さを上げたときの合成 */ --orb-plateTextShadow:0; /* 文字自身の影の濃さ */ /* 動画が 02 の板に乗る量（動画自身の高さに対する比）。 動画は 02 の導入なので、板を動画の背後まで引き上げて一体に見せる。 0 にすると板は動画の下端から始まる（従来の並び）。 ラフの実測：動画 820〜1427.5、板 1200.6〜1551.8 ＝ 重なり 227 ÷ 607.5 */ --orb-movieOnPlate:0.373; /* 02 の板の形。ラフでは全幅ではなく「左へ抜ける矩形」 （左端 −54.6 ／ 右端 708.7 ／ 高さ 351.2） */ /* 体験のセクションの2カラム。右は画像（いまはダミー）の場所。 パネルから触るので :root 側に置く（#orbLp に書くと上書きされる） */ --orb-expShotCol:1fr; /* 右カラムの幅（左は 1fr） */ --orb-shotRatio:3 / 2; /* 画像の縦横比 */ --orb-pillarShotW:100%; /* 03 の2本柱の画像の幅（カラム幅に対する比） */ --orb-pillarColMax:500px; /* 03 の2本柱のカラム幅の上限。 体験のセクションの画像（1440 で 576px）より小さくする */ --orb-pillarCol:min(var(--orb-pillarColMax), 38vw); --orb-featPadX:clamp(20px,2vw,28px); /* 10 の各ブロックの左右の余白（本文 15px に対して 1.9em） */ --orb-featPadY:clamp(18px,1.6vw,24px); /* 同・上の余白 */ --orb-noteTop:clamp(20px,2.6vh,32px); /* 11 の注釈と3枚の間 */ --orb-securePadX:clamp(24px,2.4vw,34px); /* 11 の各カードの左右の余白（本文 14px に対して 2.4em） */ --orb-featH3:clamp(16px,1.4vw,20px); /* 10 の各ブロックの見出し。ほかの h3 は clamp(18px,1.6vw,23px) */ --orb-featIco:1.1em; /* 10 の見出しの頭の絵。見出しの文字に対する比。 1440 で 25.3px（見出しは 23px）。これ以上大きくすると 「根拠に基づくインサイト分析」が2行になり、6コマの並びで1行だけ背が伸びる */ --orb-featIcoGap:0.47em; /* 絵と文字の間。0.3em ＝ 6.9px に 4px 足した値（1440 で 10.8px） */ --orb-featIcoV:-0.18em; /* 文字に対する上下の位置。 和文の字面（インク）の中心はベースラインの 8.5px 上（1440・23px で実測）。 絵の高さ 25.3px の半分 12.65 からこれを引いた 4.15px ＝ 0.18em ぶん、 絵の下端をベースラインより下げると、字面の中心と絵の中心が揃う */ --orb-featIcoW:2; /* 線の太さ（24 の箱での値。Lucide の既定は 2） */ --orb-featIcoColor:var(--orb-ai); /* 10 の見出しの絵の色。AI 機能の印と同じターコイズ */ --orb-findsIco:20px; /* 4つのインサイトの絵の大きさ */ --orb-findsTop:1.6em; /* 本文との間 */ --orb-findsHeadGap:10px; /* 小見出しと並びの間 */ --orb-findsGap:6px; /* 行の間 */ --orb-findsColGap:8px; /* 絵・名前・説明の間 */ --orb-findsPadY:5px; /* ピルの上下 */ --orb-pinFit:92px; /* 狭い画面：固定区間の1枚に使える高さ＝1画面 − この値（肩と上下の余白ぶん） */ --orb-pinShotMin:80px; /* 狭い画面：画像をこれ以上は詰めない */ --orb-findsPadX:14px; /* ピルの左右（04・07 のピルと同じ） */ --orb-secLeadGap:1.6em; /* 見出しとその下のリードの間（リードの文字の大きさに対する比） */ --orb-eyeGap:clamp(18px,2.7vh,33px); /* セクションの肩と見出しの間。 16.2 → 24.3px（1440×900）に広げた。 帯にしたぶん見出しに近く見えるため */ --orb-pillarEyeGap:12px; /* 柱の中の肩と見出しの間（同じ比で 8 → 12px） */ /* 影は Figma のローカル effect スタイルをそのまま写したもの （いずれも3枚重ね。色は rgb(6,12,17) ＝ #060C11。 Figma の「広がり（spread）」は box-shadow の4つめの値にそのまま対応する） dropShadow/high … 動画に当てる 1枚目 y16 / ぼかし20 / 広がり −10 / 16% 2枚目 y3 / ぼかし12 / 広がり −5 / 8% 3枚目 y0 / ぼかし5 / 広がり 0 / 15% */ --orb-shadowHigh: 0 16px 20px -10px rgba(6,12,17,0.16), 0 3px 12px -5px rgba(6,12,17,0.08), 0 0 5px 0 rgba(6,12,17,0.15); /* dropShadow/mid … 画像に当てる（high では強すぎたため） 1枚目 y6 / ぼかし10 / 広がり −6 / 12% 2枚目 y1 / ぼかし6 / 広がり −2 / 6% 3枚目 y0 / ぼかし3 / 広がり 0 / 12% */ --orb-shadowMid: 0 6px 10px -6px rgba(6,12,17,0.12), 0 1px 6px -2px rgba(6,12,17,0.06), 0 0 3px 0 rgba(6,12,17,0.12); /* dropShadow/low … 独立したカードに当てる 1枚目 y4 / ぼかし8 / 広がり −4 / 10% 2枚目 y1 / ぼかし4 / 広がり −1 / 4% 3枚目 y0 / ぼかし3 / 広がり 0 / 8% */ --orb-shadowLow: 0 4px 8px -4px rgba(6,12,17,0.10), 0 1px 4px -1px rgba(6,12,17,0.04), 0 0 3px 0 rgba(6,12,17,0.08); /* dropShadow/minimal … low でも強いときの控え 1枚目 y2 / ぼかし5 / 広がり −2 / 8% 2枚目 y1 / ぼかし2 / 広がり 0 / 3% 3枚目 y0 / ぼかし2 / 広がり 0 / 6% */ /* 仮：カードの中にメッシュの矩形を作り、アイコンの形に抜く検討用 （形は星・六角・菱形の仮置き。白への寄せはこの用途だけ別に持つ） */ --orb-icoSize:96px; /* 抜く形の大きさ */ --orb-icoWhite:40; /* 色を白へ寄せる量。面と同じ色味は 61 だが、 Lucide の線（24 の箱で線幅2＝96px 表示で 8px）は面積が小さく、 61 では白いカードの上で沈む。40 まで下げて色を出している */ --orb-icoSpeed:1.6; /* 形の中のメッシュの速さ（面の何倍か）。 小さく切り取ると動きが判りづらいので、面より速くする */ --orb-icoZoom:1.7; /* メッシュを形より大きく取る倍率。 1 だと形の中にグラデーションが1つ収まりきって窮屈に見える。 上げると「大きな面の一部を切り取った」見え方になる */ --orb-icoBg:#ffffff; /* 形の中の地。暗い色にすると、淡い色が明るく乗る */ /* 10 の各ブロックの左上に敷く白いグラデーション（KV の四隅と同じ作り）。 届く距離はブロック自身の高さに対する倍率で持つ（px にすると背の低いブロックで切れる） */ --orb-featWashK:1; /* 届く距離（ブロックの高さの何倍か） */ --orb-featWashA:0.6; /* 濃さ */ --orb-shadowMinimal: 0 2px 5px -2px rgba(6,12,17,0.08), 0 1px 2px 0 rgba(6,12,17,0.03), 0 0 2px 0 rgba(6,12,17,0.06); /* 現在地とスライド枚数のマーク */ --orb-dotBox:13px; /* 3つとも同じ箱の大きさ */ --orb-dotInner:0.43; /* ドーナツの内径比（Orbilly のシンボルに合わせる） */ --orb-dotSpace:16px; /* 縦の間隔 */ --orb-dotGap:52px; /* 内容幅の左端からさらに外へ寄せる量 */ --orb-dotEdge:14px; /* 画面の端からの最小の余白 */ --orb-plateBleed:56px; /* 画面の左へはみ出す量（ラフ 54.6px） */ --orb-plateUnderR:0.49; /* 右端＝内容幅 1200 に対する比（ラフ 588.7/1200） */ --orb-plateTitleFs:clamp(40px,7vw,96px); /* Overview の文字サイズ */ --orb-plateUnderTail:1.29; /* 板が動画の下へ出る高さ（文字サイズ比。ラフ 124.3/96） */ --orb-plateTitleDrop:0.1; /* 文字の箱を板の下辺から出す量（同上）。 行送り1の箱はベースラインの下に余りがあるので、 この量だけ出すと文字が下辺に接して見える */ /* KV の「上へ逃げて奥へ引く」退場は無くした（2026-09-14）。 背景がそのまま次の形へ変わっていくので、KV が去る必要が無くなったため。 いまは濃さだけが落ちる（--orb-kvA / --orb-donutA）。 */ --orb-kvA:1; /* KV の退場：リングの濃さ */ --orb-R:0px; /* 環の外半径 px（HERO のコピーがこれを単位に置かれる） */ --orb-cx:50%; /* KV の中心（ビューポート座標）。ここを動かすと全部が追従する */ --orb-cy:50%; --orb-peekFix:0px; /* 動画の食い込みぶんの補正（JS が layout() で入れる） */ --orb-ink:#26303c; --orb-muted:#6b7683; --orb-border:#dfe5ec; } /* ══════════════════════════════════════════════ 既存サイト（system.affilicode.jp）への埋め込み前提 ・ページ全体を #orbLp で包み、position:relative + z-index:0 + isolation:isolate で1つの重なり文脈に閉じる。 こうすると中の重なり順が外に漏れず、既存の .l-header（sticky/z-index 1002）や .gnav__open（fixed/1003）と 喧嘩しない（バナー z-index 1 がこちらの上に出るのも自然な結果）。 ・クラス名・CSS変数はすべて orb- / --orb- を付ける。 既存サイトは jQuery と splide を読み込んでいるが、splide は .splide クラスを見て初期化するので、その名前を避ければ触られない。 ・既存サイトのリセットは穏やかだが、次の6点はこちらで明示する必要がある： font-family（Noto Sans JP になる）／line-height（normal になる）／ 見出しサイズ（h1 28px・h2 21px・h3 16.38px）／a の色（青）／ img の max-width（none）／html の scroll-behavior:smooth ・素の要素（h2 / p など）を直接狙うルールも !important も 既存サイトには無いので、id 選択子で包めば確実に勝てる。 ══════════════════════════════════════════════ */ html,body{margin:0} #orbLp{ /* 1画面の高さ。--orb-headerH は埋め込み時に JS が実測して入れる */ --orb-headerH:0px; --orb-vh:100svh; --orb-screen:calc(var(--orb-vh) - var(--orb-headerH)); /* 内容の幅（Figma のガイド 1200 / 1280 / 1080 に対応） */ --orb-w:1200px; --orb-wL:1280px; --orb-wInset:1080px; --orb-pad:clamp(20px,5vw,80px); /* フォント。和文はページ内すべて Gen Interface JP Display、 約物だけ YakuHanJP（上の @font-face で大きさと太さを Gen に合わせたもの）。 Outfit はロゴと英語見出しなど限定的な箇所だけ。 --orb-en は混植用で、Outfit に和文が無いので日本語は後ろへ落ちる */ --orb-jp:'YakuHanJP-Gen','Gen Interface JP Display','Noto Sans JP',system-ui,sans-serif; --orb-en:'Outfit','YakuHanJP-Gen','Gen Interface JP Display','Noto Sans JP',system-ui,sans-serif; /* キャッチの文字サイズ（環の外半径に対する比）。 Figma の指定は 50.309px ＝ 環の外半径 490.46px に対して 0.1026。 ただしこれは FOT-UDKakugo での値。Gen Interface JP Display は字送りが 詰まっているので、同じ比だとラフより一段小さく見える。 ラフのキャッチの枠幅 634px に二行目を合わせると 0.113 あたり（実測） */ --orb-catchR:0.1026; /* キャッチの字間。 Figma の指定は 0.1em だが、これは FOT-UDKakugo＝詰めの無い書体での値。 Gen Interface JP Display は詰めが本体に焼き込まれているので、 同じ 0.1em を足すと詰めをほぼ打ち消してしまう（実測：見出し44px で 476.4px → 533.6px。Noto の素のまま 572px に近づく）。 二重の操作にならない範囲に下げる */ --orb-catchLS:0.03em; /* 本文（.orb-lead）の最大幅。1行の長さを決める。 34em ＝ 和文で約34字。02 Overview だけは本文をまん中に寄せているぶん広くする （狭いままだと最後の文が「…深める新／しい体験です。」と割れて、 中央寄せでは余った数文字が目立つ）。46em なら 1440 で 762px */ --orb-leadW:34em; --orb-ovLeadW:46em; /* 12 CTA：ボタンの上に添える小さな文字（誰向けのボタンかの断り） */ --orb-btnFs:clamp(16px,1.25vw,18px); /* ボタンの中の文字 */ --orb-ctaNoteFs:14px; --orb-ctaNoteGap:10px; --orb-ctaBlob:64vmax; /* 12 の下地の色玉の大きさ */ --orb-ctaZoom:1.25; /* 色玉を回す面を、セクションより大きく取る比 */ --orb-ctaSpeed:1.6; /* 回り舞台の速さ（KV の周期に対する倍率） */ /* ブランドの2行（肩の文字とロゴ）を見た目で左に揃えるための引き量。 箱では左が揃っていても、1文字目の字形が持つ左の余白の量が 文字サイズによって px で変わるので、見た目は揃わない。 1000px で測った実測値（原点からインクが始まるまでの距離）： ア（Gen Interface JP Display 700）… 0.0625em → 肩の文字 19.2px のとき 1.20px O（Outfit 600） … 0.0313em → ロゴ 141.1px のとき 4.42px ロゴのほうが 3.2px も右から始まっていた。 それぞれ自分のぶんだけ負のマージンで引いて、インクを箱の左端に合わせる。 em なので文字サイズが変わっても揃ったまま。 ※ 原稿が変わって1文字目が別の字になったら測り直す。 さらに、丸い字は縁を少し外へ出したほうが揃って見える（光学的な調整）。 ロゴの O はインクの実測 0.0313em に対して 0.038em で引いてある。 差の 0.0067em は 141.1px のときおよそ 0.95px。 肩の文字の「ア」は斜めの起筆なので、この上乗せは要らない。 ここの文言が変わることは少ない見込みなので、値は決め打ちにしている。 */ --orb-brandBearSmall:0.0625em; /* 肩の文字の1文字目「ア」＝インクの実測どおり */ --orb-brandBearLogo:0.038em; /* （文字で組んでいたときの値。ロゴの絵にしたので使っていない） */ /* 動画を KV（ファーストビュー）へ食い込ませる量。1画面ぶんに対する比。 Figma ラフでは KV の下端 895px に対して動画の上端が 820px なので 75px ぶん、 KV の高さ 800px に対して 0.094 にあたる */ --orb-moviePeek:0.094; /* 固定セクション：1枚あたり何画面ぶんスクロールさせるか */ --orb-pinPer:0.95; /* 固定セクションの前後に置く「余白のスクロール」。1画面ぶんを1とした比。 この区間は1枚目（入口）／最後の1枚（出口）を出したまま、コマを進めない。 固定が始まった直後にいきなり切り替わり、最後のコマを読み終わる前に 固定が解けるのが急に見えるので、両端にひと呼吸ぶんの遊びを持たせる。 区間の長さは伸びるが、中の3枚の配分（--orb-pinPer）は変わらない。 */ --orb-pinPadIn:0.5; --orb-pinPadOut:0.5; /* 09（コンセプトの回収）を留める長さ。1画面ぶんを1とした比。 読ませたいので、ここだけスクロールが止まったように見える時間を作る。 0.6 → 1 → 1.4 と伸ばした。 目安にした Journey の1枚は 763px（＝固定区間 2289px ÷ 3枚）で、 1.4 は 1124px ＝ Journey 約1.5枚ぶん。 留まっている間は何も変わらないので、同じ距離でも Journey より短く感じる */ --orb-closeHold:1.4; position:relative;z-index:0;isolation:isolate; background:var(--orb-page); color:var(--orb-ink); font-family:var(--orb-jp); font-size:16px;line-height:1.8; /* 本文系の行送りはページ全体で 1.8 */ overflow:clip; /* 横のはみ出しだけ止める（縦の sticky は生きる） */ -webkit-font-smoothing:antialiased; /* ══ 文字組みの基本方針 ══ 1. 約物の詰めは書体に任せ、CSS で足さない。 Gen Interface JP Display は palt を hmtx に焼き込んでいるので、 `font-feature-settings:"palt" 0` も `font-variant-east-asian:full-width` も 効かない（実測で幅が変わらない）。＝詰めは常に有効で、切れない。 なので「詰めるかどうか」を CSS で悩む必要がない。 2. letter-spacing は原則 0。 字間を足すと 1. の詰めを打ち消す。足すのは限定的に、かつ小さく。 3. 行頭の約物は text-spacing-trim に任せる。 行頭の「 が 33.8px → 20.4px になり、左端が揃う（44px 時の実測）。 trim-both / space-first は今のところ効かなかったので trim-start を使う。 非対応のブラウザでは何も起きないだけなので安全。 4. 和文と欧文・数字の間のアキは text-autospace に任せる。 既定は詰まった状態で、normal を明示すると四分アキが入る （「会話が3件の」「AIが分析します」のような箇所）。 5. 禁則は strict。 */ letter-spacing:0; text-spacing-trim:trim-start; text-autospace:normal; line-break:strict; } /* 行頭の約物を負のインデントで引く処置は撤去した（2026-09-11）。 YakuHanJP を入れたことで残りは 0.19em（44px で約 8px）まで縮んだため。 揃えたくなったら、約物で始まる見出しに text-indent:-0.19em を当てる （ブラウザの対応に関係なく一定の値で足りる）。 /* 約物半角（書体の ss09）。既定では使わない。 見出し44px で 476.4px → 436.1px（8.5%）とよく詰まるが、 全面に当てると括弧が詰まりすぎる。括弧が意味を持つ短い見出しなど、 限定的に付ける用（パネルの「約物半角（ss09）を試す」で全体に試せる）。 */ .orb-yakuHalf, #orbLp.orb-yakuHalf{font-feature-settings:'ss09' 1} /* ══════════════════════════════════════════════════════════ Gen だけに戻す切り替え 【将来の申し送り】ブラウザが text-spacing-trim の trim-both（行末の約物の 処理）を実装したら、Gen 単体に戻したほうが有利になる可能性がある。 理由：text-spacing-trim は全角の約物にしか効かない。YakuHanJP の約物は すでに詰まった字形なので、ブラウザは詰める対象と見なさない（実測で trim-start を当てても箱の幅が変わらなかった）。つまり YakuHanJP を挟むと 将来の trim-both の恩恵を受けられない。Gen の約物は全角ではないが trim-start が効いたので（33.8px → 20.4px）、trim-both も効く見込みがある。 戻し方：#orbLp に orb-genOnly のクラスを付けるだけ。 調整パネルの「ページ」タブの「Gen だけに戻す（約物の差し替えをやめる）」 でも切り替えられる。恒久的に戻すなら、下の2行を :root 側の既定にして 上の @font-face とこの規則を消す。 ══════════════════════════════════════════════════════════ */ #orbLp.orb-genOnly{ --orb-jp:'Gen Interface JP Display','Noto Sans JP',system-ui,sans-serif; --orb-en:'Outfit','Gen Interface JP Display','Noto Sans JP',system-ui,sans-serif; } #orbLp *{box-sizing:border-box} /* ここは「素の要素をこちらの既定に戻す」だけの層。 :where() で包んで詳細度を 0 にしてあるので、あとから書くクラスが必ず勝つ。 （#orbLp h1 と書くと詳細度 1-0-1 になり、.orb-hero__catch のような クラス指定に勝ってしまう。実際それで見出しが 16px になった） */ :where(#orbLp) :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,dl,dd,dt,blockquote){ margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit; } :where(#orbLp) :where(ul,ol){list-style:none} :where(#orbLp) :where(img,svg){max-width:100%;display:block} /* リンクの色だけは :where() で書けない。既存サイトの style.css に `a:link{…}` があり、 詳細度が (0,1,1)。:where() は 0 なので負けて、**ページ内のリンクが全部ブラウザ既定の青**になる。 #orbLp a なら (1,0,1) で勝つ。個別に色を持つリンク（ボタン・料金ページへ）も 同じ理由で #orbLp を頭に付けてある */ #orbLp a{color:inherit;text-decoration:none} :where(#orbLp) :where(b,strong){font-weight:700} :where(#orbLp) :where(small){font-size:inherit} :where(#orbLp) :where(i,em){font-style:normal} /* ── 固定される背景（メッシュの面はページ全体でこの1枚だけ） ── position:fixed ではなく sticky にしてある。 ・fixed は先祖に transform があると壊れる（今回の埋め込み先は 大丈夫だが、将来 .l-container の内側が変わると壊れうる） ・sticky なら #orbLp の範囲が終わったところで自動的に止まるので、 フッターの上にメッシュがはみ出さない 高さぶんの場所を取ってから同じ量の負の余白で引き戻すことで、 後続のセクションがこの背景に重なる */ /* ── 背景の形の層 ── #orbBg と同じ貼りつき方・同じ大きさ。中の canvas を clip-path で切る。 濃さは JS が KV の退場に合わせて上げる（KV が消えるぶんだけ出てくるので、 合わせるとドーナツの濃さは変わらない＝受け渡しが見えない）。 */ /* 導入の間だけスクロールを止める。 scrollbar-gutter:stable を html に置いてあるので、 overflow を切り替えても中身が横に跳ねない */ html{scrollbar-gutter:stable} html.orb-lock, html.orb-lock body{overflow:hidden;overscroll-behavior:none} #orbShape{ position:sticky;top:var(--orb-headerH); height:var(--orb-screen); margin-bottom:calc(var(--orb-screen) * -1); z-index:0;pointer-events:none;overflow:hidden; opacity:0; } #orbShape canvas{position:absolute;inset:0;width:100%;height:100%;display:block} #orbBg{ position:sticky;top:var(--orb-headerH); height:var(--orb-screen); margin-bottom:calc(var(--orb-screen) * -1); z-index:0;pointer-events:none; overflow:hidden; } /* ══════════════════════════════════════════════ KV ステージ #kv が1画面ぶんの箱（＝メッシュの composition 範囲）。 リングは短辺×既定122% の正方形 #stage に置き、#orbBg 側でトリミングする。 重なり順：#hole（白） → #meshWrap（帯） → #stage（リング） ══════════════════════════════════════════════ */ #kv{ position:absolute;inset:0; isolation:isolate; } /* 中央の白（最後に見える面） */ #hole{ position:absolute;left:var(--orb-cx);top:var(--orb-cy); width:var(--orb-holeD);height:var(--orb-holeD); margin:calc(var(--orb-holeD) / -2) 0 0 calc(var(--orb-holeD) / -2); border-radius:50%; background:var(--orb-hole); opacity:0; transform:scale(var(--orb-cam)); will-change:opacity,transform; } /* ── メッシュグラデーション層（マスクで帯だけが見える） ── */ /* カメラの寄りは #meshWrap 自体にかける。こうするとマスクも一緒に 拡大されるので、帯の半径がリングとずれない */ #meshWrap{ position:absolute;inset:0; overflow:hidden;opacity:0; background:var(--orb-meshBg); /* #mesh をずらしても地が欠けないよう二重に持つ */ /* 退場の平行移動と縮小も帯にかける。 これを #hole と #stage にだけ掛けていたら、中の白とリングは上へ逃げるのに 帯だけがその場に残り、それが「ドーナツの残像」に見えていた。 マスクは transform より先に適用されるので、マスクした結果ごと動く。 */ transform:scale(var(--orb-cam)); transform-origin:var(--orb-cx) var(--orb-cy); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%); mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%); } #mesh{ position:absolute;inset:0; background:var(--orb-meshBg); } /* 回り舞台（A案 の rotor）。玉の動きとは別の周期でゆっくり全体を回すので、 軌道が同じ形をなぞらない。玉は中心からの距離を保ったまま回るだけなので、 帯の中の被覆は崩れない（＝面と同じ大きさで足りる）。 */ #rotor{ position:absolute;inset:0; transform-origin:50% 50%; animation:rotorSpin var(--orb-rotorSpin) linear infinite; will-change:transform; } @keyframes rotorSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .blob{ position:absolute; width:var(--orb-meshSize);height:var(--orb-meshSize); border-radius:50%; filter:blur(var(--orb-meshBlur)); mix-blend-mode:var(--orb-meshBlend); opacity:var(--orb-meshOpacity); will-change:transform; animation-duration:var(--orb-meshDur); animation-timing-function:ease-in-out; animation-iteration-count:infinite; } /* background は JS で組み立てる（減衰の形を smoothstep にするため） */ .b1{top:-10%;left:-10%; animation-name:move1} .b2{top:10%;right:-15%; animation-name:move2;animation-duration:calc(var(--orb-meshDur) * 1.15)} .b3{bottom:-15%;left:20%; animation-name:move3;animation-duration:calc(var(--orb-meshDur) * 1.3)} .b4{bottom:-10%;right:10%;animation-name:move4;animation-duration:calc(var(--orb-meshDur) * 1.05)} .b5{top:30%;left:35%; animation-name:move5;animation-duration:calc(var(--orb-meshDur) * 1.2)} @keyframes move1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(15vw,10vh) scale(var(--orb-amp))}} @keyframes move2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-18vw,15vh) scale(calc(2 - var(--orb-amp)))}} @keyframes move3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10vw,-20vh) scale(var(--orb-amp))}} @keyframes move4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12vw,-12vh) scale(calc((var(--orb-amp) + 1) / 2))}} @keyframes move5{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,18vh) scale(calc(2 - var(--orb-amp)))}} /* ※ ID はパネルのスライダーと衝突させない（衝突すると CSS がスライダーにも当たる） */ #meshVeil{ position:absolute;inset:0; background:var(--orb-meshBg); opacity:var(--orb-veil); pointer-events:none; } /* 板の面を暗くする層。板の矩形のぶんだけ背景を持つので、ドーナツは暗くならない。 #meshWrap の中にあるので mix-blend-mode がメッシュと正しく混ざる。 背景は JS が板の矩形から組む（マスクと同じ座標の直し方） */ #orbPlateShade{ position:absolute;inset:0; pointer-events:none; background-repeat:no-repeat; mix-blend-mode:var(--orb-plateBlend); } /* 帯の縁から内側へ落ちるグロー。#meshWrap の中にあるので帯の形に切られる。 背景の radial-gradient は JS が bandRi / bandRo から組む */ #bandGlow{ position:absolute;inset:0; pointer-events:none; mix-blend-mode:var(--orb-glowBlend); /* 帯の内外の半径を基準にした効果なので、板として見せているときは出さない */ opacity:var(--orb-donutA); } /* 光の掃き。KV の中心に置いた円板に conic-gradient を張り、ゆっくり回す。 帯の形に切られるので、帯の上を光が巡って見える。 一時非表示。別の表現に差し替わる見込みのため。 戻すときは下の #sheen{display:none} の1行を消すだけ。 仕組み（円板・conic-gradient・回転・パネルのつまみ）はすべて残してある。 display:none にしてあるので、合成の対象からも外れる （opacity:0 では層として残り、毎フレームの合成に乗り続ける）。 */ #sheen{display:none} #sheen{ position:absolute;left:var(--orb-cx);top:var(--orb-cy); width:var(--orb-sheenD);height:var(--orb-sheenD); margin:calc(var(--orb-sheenD) / -2) 0 0 calc(var(--orb-sheenD) / -2); border-radius:50%; pointer-events:none; /* KV の中心に置いた円板なので、板として見せているときは出さない */ opacity:calc(var(--orb-sheenA) * var(--orb-donutA)); mix-blend-mode:screen; animation:sheenSpin var(--orb-sheenDur) linear infinite; will-change:transform; } @keyframes sheenSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* 質感テクスチャ。 モノクロのタイル画像（起動時に canvas で一度だけ生成）をレイヤー効果で重ね、 ゆっくり回転＋呼吸（拡縮）させる。画像は毎フレーム作り直さないので 動きは transform だけ＝コンポジタ任せで、色玉を増やすより軽い。 回転の中心を少しずらしてあるので、回転が「公転＝平行移動」も兼ねる。 複数枚を別々の速さ・逆回転で重ねると、干渉して同じ形を繰り返さなくなる。 */ .tex{ position:absolute;left:var(--orb-cx);top:var(--orb-cy); /* 帯は KV 中心から半径 53vmax ほどに収まるので、そこを必ず覆える大きさで足りる。 回転中心を ±6% ずらすと箱の中心は最大 2×0.06×170 = 20.4vmax ぶれるので、 保証される被覆は 85 − 20.4 ≒ 64vmax。無駄に大きくすると合成コストだけ増える */ width:170vmax;height:170vmax; margin:-85vmax 0 0 -85vmax; pointer-events:none; background-image:var(--orb-texImg1); background-repeat:repeat; background-size:var(--orb-texSize) var(--orb-texSize); mix-blend-mode:var(--orb-texBlend); /* ドーナツの質感なので、板として見せているときは出さない */ opacity:calc(var(--orb-texA) * var(--orb-donutA)); transform-origin:45.5% 52.5%; will-change:transform; animation:texSpin var(--orb-texDur) linear infinite, texBreath calc(var(--orb-texDur) * 0.41) ease-in-out infinite; } .tex.t2{ background-image:var(--orb-texImg2); transform-origin:54.5% 47.5%; animation-duration:calc(var(--orb-texDur) * 1.7), calc(var(--orb-texDur) * 0.57); animation-direction:reverse, normal; /* 逆回転 */ } .tex.t3{ background-image:var(--orb-texImg3); transform-origin:49% 55.5%; animation-duration:calc(var(--orb-texDur) * 2.4), calc(var(--orb-texDur) * 0.73); } @keyframes texSpin{from{rotate:0deg}to{rotate:360deg}} @keyframes texBreath{0%,100%{scale:1}50%{scale:var(--orb-texBreath)}} @media (prefers-reduced-motion: reduce){ .blob,#rotor,.tex,.cblob,.orb-ctaBg__rotor{animation-play-state:paused} } /* ── リング群（3方式を同じ場所に重ねて置き、使う1つだけ描く） ── */ #stage{ position:absolute;left:var(--orb-cx);top:var(--orb-cy); transform:translate(-50%,-50%); width:var(--orb-S);height:var(--orb-S); opacity:var(--orb-kvA); } /* 方式1 Canvas：彗星グラデーション。 最外周リングの線は Rout から外へ 線幅/2 はみ出すので、 キャンバスはステージより少し大きく取る（JS で位置と大きさを入れる） */ #rcv{position:absolute;display:block} #rsvg{ /* 方式2 SVG：単色 */ position:absolute;inset:0;display:block;overflow:visible; shape-rendering:geometricPrecision; } #scene{ /* 方式3 CSS 3D：比較用 */ position:absolute;inset:0; perspective:var(--orb-persp); transform-style:preserve-3d; } .ring{ position:absolute;left:50%;top:50%; border-radius:50%; border-style:solid; box-sizing:border-box; backface-visibility:visible; will-change:transform,opacity; } /* 中央コピー（配置確認用） */ #copy{ position:absolute;left:var(--orb-cx);top:var(--orb-cy); transform:translate(-50%,-50%) scale(var(--orb-cam)); text-align:center;opacity:0;pointer-events:none; width:calc(var(--orb-holeD) * .78); } #copy .en{ font-size:calc(var(--orb-holeD) * .085);letter-spacing:.06em; font-weight:700;line-height:1.2;margin:0 0 .5em; } #copy .ja{font-size:calc(var(--orb-holeD) * .042);color:var(--orb-muted);margin:0} /* ══════════════════════════════════════════════ ページ本体（#orbBg の上を流れる層） ══════════════════════════════════════════════ */ #orbMain{position:relative;z-index:1} .orb-inner{ /* 内容の幅。Figma のガイド 1200px に対応 */ width:min(var(--orb-w), 100% - var(--orb-pad) * 2); margin-inline:auto; } .orb-inner--inset{width:min(var(--orb-wInset), 100% - var(--orb-pad) * 2)} /* 文の塊をまん中に寄せる（02 Overview）。 .orb-lead は max-width（34em）で幅が決まっているので、text-align だけでは 1行ずつは中央でも塊そのものが左に付いたまま残る。margin-inline:auto を併せて当てる */ #orbSec02 .orb-inner{--orb-leadW:var(--orb-ovLeadW)} /* 02 だけ本文を広く取る */ /* 02 の見出しはひと回り小さく。大きさ以外（太さ・行送り・字間）は .orb-h2 のまま */ #orbSec02 .orb-h2{font-size:calc(clamp(26px, 3.2vw, 44px) * var(--orb-ovH2))} .orb-center{text-align:center} /* 見出しのすぐ下に置くリード。間は文字の大きさに連れて動くよう em で持つ */ .orb-sec__lead{margin-top:var(--orb-secLeadGap)} .orb-center .orb-lead{margin-inline:auto} /* ── 01 HERO ── 位置は Figma のラフどおり。左右の端は 1200px ガイドに合わせ、 縦方向は環の半径 --orb-R を単位にして、環と一緒に拡縮する。 フォントは Gen Interface JP Display（将来 SVG 化の可能性あり）。 Figma の指定は FOT-UDKakugo Large Pr6N B / 50.309px / 字間 0.1em。 */ .orb-hero{position:relative;height:var(--orb-screen)} .orb-hero .orb-inner{position:relative;height:100%} .orb-hero__catch{ position:absolute;left:0; top:calc(var(--orb-cy) - 0.3038 * var(--orb-R)); font-weight:700; font-size:min(calc(var(--orb-catchR) * var(--orb-R)), 7.2vw); line-height:1.5;letter-spacing:var(--orb-catchLS); color:#0c0d0e; text-wrap:balance; } .orb-hero__catch .orb-tight{letter-spacing:-0.064em} /* 「、」の詰め（Figma の -3.2px） */ /* 行ごとに白地を敷く（Figma ラフの3行と同じ扱い）。 背後にリングが来るので、行の形に白を敷いて読ませる。 字間はラフの 0.24em ではなく 0 にしてある。原稿 v3 でここが短い語句から 文章に変わったため。文章に 0.24em を当てると読みにくく、 書体に焼き込まれた約物の詰めも打ち消してしまう。 */ /* 最後の項がキャッチとの間。環の半径を単位にしているので、環と一緒に伸び縮みする。 0.0612 → 0.0815（1440×900・R 492px で 30px → 40px ＝ +10px ぶん） */ .orb-hero__lead{ position:absolute;left:0; top:calc(var(--orb-cy) - 0.3038 * var(--orb-R) + var(--orb-catchR) * var(--orb-R) * 3 + 0.0815 * var(--orb-R)); display:flex;flex-direction:column;align-items:flex-start; gap:calc(0.0240 * var(--orb-R)); } .orb-hero__lead span{ /* 白い帯の上下は詰める（3px → 1px）。帯が薄いほうが硬い印象になる。 行送り 1.55 のぶんの余りが帯の中に残るので、0 にはしていない */ background:#fff;padding:1px 6px; /* 影は当てない（一度 dropShadow/minimal を試したが、くどくなるため取り消し。 戻すなら box-shadow:var(--orb-shadowMinimal);。 3行が 12px 間隔で縦に並ぶので、low 以上だと影が次の帯に落ちて行の間が濁る） */ font-size:min(calc(0.0367 * var(--orb-R)), 3.4vw); line-height:1.55;letter-spacing:0;color:#0c0d0e; white-space:nowrap; } /* 位置は右側のまま。2行は互いに左で揃える（肩の文字のほうが ロゴより長いので、箱は肩の文字の幅で右端に着き、ロゴがその左端に揃う） */ .orb-hero__brand{ /* ロゴの高さ。肩の文字の左右位置もこれを単位にするので、親に置いて両方から読む。 6vw の下限は、JS が --orb-R を入れる前の1回目の描画で高さが 0 にならないように （1440×900 では 0.2716 × R のほうが大きいので、見た目の大きさには効かない） */ --orb-logoH:min(max(calc(0.2737 * var(--orb-R)), 6vw), 18.1vw); position:absolute;right:0; top:calc(var(--orb-cy) - 0.2371 * var(--orb-R)); text-align:left;color:#0c0d0e; } /* 肩の文字は、ロゴの O より --orb-logoLead ぶん右へ入れる。 O は丸いので、縁を少し外へ出したほうが揃って見える（光学的な出し）。 ロゴの高さを単位にしているので、ロゴと一緒に伸び縮みする。 1文字目「ア」自身の左の余白はこれとは別に打ち消している。 */ .orb-hero__brand small{ display:block; margin-left:calc(var(--orb-logoLead) * var(--orb-logoH) - var(--orb-brandBearSmall)); font-weight:700; font-size:min(calc(0.0391 * var(--orb-R)), 2.6vw); line-height:1.5;letter-spacing:0.05em; white-space:nowrap; } /* AI Report Studio は Outfit。 Figma の 0.2em は「AI」の2文字だけに付いていた値で、 語句全体に当てると広すぎるので詰めた */ .orb-hero__brand small i{ font-family:var(--orb-en);font-style:normal;font-weight:500; font-size:1.08em;letter-spacing:0.04em; } /* ── ロゴ（Orbilly） ── 大きさは「文字で組んでいたときの O の高さ」に合わせてある。 Outfit の O は文字サイズの 0.7585、このロゴの O は絵の高さの 0.7943 なので、 ロゴの高さ ＝ もとの文字サイズ × 0.9549。 縦の位置：文字だったときは行送り 1（＝文字サイズぶんの箱）の中に 半分の行間が入っていたので、そのぶんを margin-top に足してある。 0.216 ＝ もとの margin-top 0.126 ＋ 半分の行間 0.090（どちらもロゴの高さ比）。 */ .orb-logo{ display:block;width:auto;fill:currentColor; height:var(--orb-logoH); /* Chrome でだけ縁がガタついて見えるという指摘があったので、 速さより精度を優先するよう明示しておく（Firefox では出ていない）。 これで直らない場合は「ロゴのエッジ比較_2026-09-14.html」で置き方を切り分ける */ shape-rendering:geometricPrecision; } .orb-hero__brand .orb-logo{ margin-top:calc(0.216 * var(--orb-logoH)); } .orb-hero__down{ position:absolute;left:50%;bottom:35px;translate:-50% 0; width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.86); border:1px solid rgba(12,13,14,.10); display:grid;place-items:center; pointer-events:auto;cursor:pointer; transition:background .2s, translate .2s; } .orb-hero__down:hover{background:#fff;translate:-50% 3px} .orb-hero__down svg{width:20px;height:20px;stroke:#0c0d0e;stroke-width:1.6;fill:none} /* 矢印ボタンは一時非表示。あとでスタイルを変えて再利用するので markup は残してある。 戻すときはこの1行を消すだけ（規則の中に display:none を書くと、 同じ規則の後ろにある display:grid に負ける） */ .orb-hero__down{display:none} /* ── 通常セクション ── */ .orb-sec{position:relative;padding-block:clamp(80px,12vh,180px)} .orb-h2{ font-weight:700; font-size:clamp(26px,3.2vw,44px);line-height:1.3;letter-spacing:0.06em; color:#0c0d0e; text-wrap:pretty; /* 最終行が1文字だけ残るのを避ける保険 */ } .orb-h3{ font-weight:700; font-size:clamp(18px,1.6vw,23px);line-height:1.6;letter-spacing:0.02em; color:#0c0d0e; } .orb-lead{ font-size:clamp(15px,1.15vw,17px);line-height:1.8;letter-spacing:0.04em; color:var(--orb-ink);max-width:var(--orb-leadW); text-wrap:pretty; /* 最終行が1文字だけ残るのを避ける */ } .orb-lead + .orb-lead{margin-top:1.2em} /* ── メッシュの面を見せる板 ── 板そのものは透明。JS が板の画面上の矩形をマスクに足すので、 その範囲だけ背後のメッシュが見える。文字は板の上（z-index が上）に出る。 Figma ラフの「Overview」の見出し板がこれ。 */ /* 文字色。白抜きが既定。淡い面の上では濃色のほうが面を一切触らずに読める （下の「文字色」で切り替え）。影の色も文字色に合わせて反転させる */ .orb-plate{ color:#fff; --orb-plateShadowCol:12,21,24; } #orbLp.orb-plateDark .orb-plate{ color:#0c0d0e; --orb-plateShadowCol:255,255,255; } /* 板ごとに文字色を濃色にする指定。本文を持つ板に使う （面の影を足すと淡いメッシュは必ず濁るので、面を触らずに読ませる手段）。 ページ全体の切り替え（下の「文字色」）よりこちらが後なので、 付けた板だけは切り替えの影響を受けない。 ※ 07 の板を無くしたので、いまは使っている箇所は無い（規則は残しておく） */ #orbLp .orb-plate--dark{ color:#0c0d0e; --orb-plateShadowCol:255,255,255; } .orb-plate .orb-h2, .orb-plate .orb-lead, .orb-plate .orb-plate__title{color:inherit} .orb-plate{ position:relative; display:flex;align-items:flex-end; min-height:clamp(180px,26vh,352px); padding:clamp(24px,4vh,40px) clamp(24px,4vw,40px); } .orb-plate--full{ /* 画面幅いっぱいの板 */ /* 100vw は縦スクロールバーぶん幅が余るので使わない（横に溢れる）。 .orb-sec は幅の指定を持たないので 100% でそのまま全幅になる */ width:100%; padding-inline:max(var(--orb-pad), calc((100% - var(--orb-w)) / 2)); } /* 面の影は #orbPlateShade（メッシュの層の中）が受け持つので、ここには置かない。 文字自身の影だけ、面を触らずに読ませる分として持たせる（既定は 0） */ .orb-plate{ text-shadow:0 1px 3px rgba(var(--orb-plateShadowCol),var(--orb-plateTextShadow)), 0 2px 16px rgba(var(--orb-plateShadowCol),calc(var(--orb-plateTextShadow) * 0.7)); } .orb-plate > *{position:relative} .orb-plate__title{ font-family:var(--orb-en);font-weight:600; font-size:var(--orb-plateTitleFs);line-height:1;letter-spacing:0.01em; } /* ── 04〜06：固定して3枚が入れ替わる ── 高さぶんスクロールすると、中の sticky が画面に留まる。 入れ替えは JS がスクロール進捗から opacity / translate を書く。 */ .orb-pin{position:relative;height:calc(var(--orb-screen) * ( 1 + var(--orb-pinPer) * 3 + var(--orb-pinPadIn) + var(--orb-pinPadOut)))} .orb-pin__sticky{ position:sticky;top:var(--orb-headerH); height:var(--orb-screen); display:grid;align-items:center; overflow:hidden; } /* 3枚は「同じ1マスに重ねる」。以前は1枚目だけを流し、2・3枚目を絶対配置で 上下中央に置いていたので、1枚目は箱の上端から始まるのに 2・3枚目は 中央に寄る＝切り替わるたびに文字が上下へ跳んでいた（ガタつきの主因）。 grid で同じマスに置き、いずれも上端合わせにすると、マスの高さは いちばん高い1枚で決まり、ラベル・段の名前・見出しの位置が3枚で完全に揃う。 マスごと sticky の中央に置かれるので、見た目の中央は保たれる */ .orb-pin__stack{display:grid;width:100%} .orb-pin__item{ /* 長さと遅れは JS が入れる（スクロールではなく時間で走らせるため） */ transition-property:opacity,transform;transition-timing-function:ease; grid-area:1 / 1;align-self:start; opacity:0; will-change:opacity,transform; } /* 2カラムは上下センター（.orb-exp の既定のまま）。 画像の高さは3枚とも同じなので、マスの高さも動かない。 「見出し＋本文」は文の長さに応じてその中で上下中央に置かれる */ /* 肩は「Journey ＋ ナンバー」と「段の名前」を別の要素に分けてある。 それぞれ大きさ・色・位置を独立して決められるようにするため。 間のスラッシュは廃止した */ /* ── 肩：Journey ＋ ナンバー ＋ 段の名前 ── 3枚の外（sticky の中）に置く。「Journey」は文字列として置いたまま動かさず、 ナンバーと段の名前だけを同じ位置で入れ替える。 入れ替わる側は3枚を同じマスに重ね、濃さだけを本体と連動させる（移動はしない）。 2カラムの上・内容幅の左端。画像の上に重ねると角に乗るので、カラムの外に出している。 07（体験④）にはこの肩を付けない方針 */ /* 帯（Journey NN）と段の名前の間。帯の中の Journey↔ナンバーの間（--orb-tagGap）とは別 */ .orb-pin__head{ display:flex;align-items:baseline;gap:var(--orb-tagAfter); margin-bottom:clamp(16px,2.4vh,30px); } /* 「Journey NN」は Turquoise の地に白文字の帯。KV のリード文と同じ考え方 （地に帯を敷いて文字を抜く）。小さな肩なので大文字で組み、字間を開ける。 帯は1枚しか置かない。入れ替わる側に帯を持たせると、2枚が重なっている間だけ 地が薄くなってしまう（濃さ 0.5 の矩形を2枚重ねても 0.75 にしかならない）。 だから帯は動かない側に置き、中のナンバーだけを入れ替える。 字間は最後の文字の右にも空きを作るので、そのぶんを負のマージンで引いている （引かないと帯が右に重く見える）。 */ .orb-pin__tag{ display:inline-flex;align-items:baseline;gap:var(--orb-tagGap); margin:0;padding:var(--orb-tagPadY) var(--orb-tagPadX); background:var(--orb-tagBg);color:var(--orb-tagInk); font-family:var(--orb-en);font-weight:600; font-size:13px;letter-spacing:0.22em;line-height:1; white-space:nowrap; } /* 「Journey」側の字間は残す ── ここを詰めるとナンバーとくっついて1語に見える。 負のマージンで引くのは帯の右端に接する側（ナンバー）だけでよい */ .orb-pin__tag i{font-style:normal;text-transform:uppercase} .orb-pin__nums{display:grid} .orb-pin__num{ transition-property:opacity;transition-timing-function:ease; grid-area:1 / 1; font-weight:500;letter-spacing:0.18em;margin-right:-0.18em; opacity:0;will-change:opacity; } /* ── セクションの肩（英文の小さなラベル） ── 02 の「Overview」、03 の「Approach」「Insight」がこれ。 Journey の肩（.orb-pin__tag）と同じ「Turquoise の地＋白文字」の帯にした。 地の色・文字の色・帯の上下左右は --orb-tag* を共有しているので、 片方を変えればもう片方も変わる。 字間は最後の文字の右にも空きを作るので、そのぶん右のパディングから引いている （引かないと帯が右に重く見える）。Journey 側は負のマージンで引いているが、 こちらは帯そのものが文字を包んでいるので、パディングの引き算で行う */ .orb-eyebrow{ --orb-eyeLS:0.22em; /* 字間。下の右パディングの引き算と揃える */ --orb-eyePadY:var(--orb-tagPadY); /* 帯の上下。既定は Journey と同じ */ display:inline-flex;align-items:center; margin:0 0 var(--orb-eyeGap); /* 帯・色は Journey の肩（--orb-tag*）と同じものを使う。 片方を変えればもう片方も変わる。上下だけは変数を1つ挟んであるので、 場所ごとに詰められる（柱の中の Approach / Insight）。 */ padding:var(--orb-eyePadY) calc(var(--orb-tagPadX) - var(--orb-eyeLS)) /* 右だけ字間のぶん引く */ var(--orb-eyePadY) var(--orb-tagPadX); background:var(--orb-tagBg);color:var(--orb-tagInk); font-family:var(--orb-en);font-weight:600; font-size:13px;text-transform:uppercase; letter-spacing:var(--orb-eyeLS);line-height:1; white-space:nowrap; } /* ── 反転（白地＋Turquoise 文字） ── 03 の「Ask to Report」だけこちら。このセクションは**子の2つ（Approach / Insight）が主役**で、 親はその括りを示しているだけなので、同じ塗りの帯が3つ並ぶと親が強く出すぎる。 地と文字を入れ替えると、同じ部品のまま一段うしろに下がる。 地は背景のメッシュの上に乗るので、透かさない白にしてある。 */ .orb-eyebrow--invert{ background:var(--orb-tagInk); color:var(--orb-tagBg); } .orb-pin__swap{display:grid} .orb-pin__var{ transition-property:opacity;transition-timing-function:ease; grid-area:1 / 1; display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px); margin:0;white-space:nowrap;opacity:0; will-change:opacity; } /* ナンバーは帯（.orb-pin__tag）の中へ移したので、入れ替わる側は段の名前だけ */ .orb-pin__var span{ /* 段の名前も Turquoise で揃える */ font-family:var(--orb-en);font-weight:500; font-size:15px;letter-spacing:0.06em;line-height:1.4;color:var(--orb-aiInk); } /* ── 現在地とスライド枚数のマーク ── 画面の左、上下中央に縦に並べる。内容幅（1200 ガイド）の外側の余白に置く。 色は本文と同じブルーグレー。現在地は Orbilly のシンボルに合わせたドーナツ型。 箱の大きさは3つとも同じ（--orb-dotBox）にして、 「塗りつぶした点」と「ドーナツ」の切り替えを色だけで行う。 border を透明にして background-clip:content-box にすると、 枠のぶん内側に縮んだ点になる。現在地はその逆（枠に色・中は抜き）。 大きさを変えないので、切り替わるときに列が動かない。 */ .orb-pin__dots{ position:absolute;top:50%;translate:0 -50%; left:max(var(--orb-dotEdge), calc((100% - var(--orb-w)) / 2 - var(--orb-dotGap))); display:flex;flex-direction:column;gap:var(--orb-dotSpace); } .orb-pin__dots i{ display:block;width:var(--orb-dotBox);height:var(--orb-dotBox);border-radius:50%; border:calc(var(--orb-dotBox) * (1 - var(--orb-dotInner)) / 2) solid transparent; background:var(--orb-muted);background-clip:content-box; transition:background-color .32s, border-color .32s; } /* 現在地は AI 関連の機能を示す色。枚数を示すだけの点は本文と同じブルーグレーのまま （3つとも色を付けると現在地が読み取りにくくなる） */ .orb-pin__dots i.on{ background-color:transparent; border-color:var(--orb-ai); } /* 1カラムに落ちても縦のまま。スクロールの進みと向きを合わせたいので、 横並びには変えない。内容は左右 --orb-pad（狭い画面では 20px）だけ内側に入るので、 点を小さくして左の余白（0〜20px）に収める ── 9px の点を左 6px に置けば右端は 15px。 */ @media (max-width:900px){ .orb-pin__dots{ --orb-dotBox:9px;--orb-dotSpace:11px; left:6px;top:50%;bottom:auto; translate:0 -50%;flex-direction:column; } } /* ── 09 コンセプトの回収 ── */ /* ── 09 コンセプトの回収 ── 少しの間スクロールが止まったように見せて、文を読ませる。 セクションの高さを「1画面 ＋ 留める長さ」にして、中の sticky が画面に留まる （固定セクション 04〜06 と同じ作り）。 */ .orb-close{ position:relative; height:calc(var(--orb-screen) * (1 + var(--orb-closeHold))); } .orb-close__sticky{ position:sticky;top:var(--orb-headerH); height:var(--orb-screen); display:grid;place-items:center;text-align:center; } /* 09 には動画の食い込みが無いので、KV のために上げたぶんを戻して環の中心に合わせる */ .orb-close .orb-inner{transform:translateY(calc(var(--orb-peekFix) * -1))} /* 09 の和文の見出し。もと 08 の見出しで、独立していたときは .orb-h2 だった。 ここでは英文への前振りなので、ひと回り小さく扱う（--orb-closeJa で比を持つ）。 字間と行送りはセクション見出しの決め（0.06em / 1.3）に合わせる */ .orb-close__ja{ font-weight:700; font-size:calc(clamp(26px, 3.2vw, 44px) * var(--orb-closeJa)); line-height:1.3;letter-spacing:0.06em;color:#0c0d0e; margin:0;text-wrap:pretty; } .orb-close__ja span{display:inline-block} /* 中央揃えなので、折り返し幅を持つ本文は左右の余りを均等に分ける。 折り返し幅は本文の既定（34em）より少し広く取る ── 中央揃えだと 1文字だけあふれて折り返したときの座りが悪いため */ .orb-close .orb-lead{max-width:var(--orb-closeLeadW);margin-inline:auto} .orb-close .orb-lead:first-of-type{margin-top:1.5em} /* 09 のコンセプトの回収。原稿 v3 で英文に決まったので Outfit で組む */ .orb-close__en{ font-family:var(--orb-en);font-weight:600; font-size:min(calc(0.148 * var(--orb-R)), 9vw); line-height:1.15;letter-spacing:0.01em;color:#0c0d0e; margin-top:var(--orb-closeEnGap); } .orb-close__brand{ --orb-logoH:min(max(calc(0.1146 * var(--orb-R)), 2.5vw), 7.7vw); margin-top:clamp(28px,5vh,56px);color:#0c0d0e; } .orb-close__brand small{ display:block;font-weight:700; font-size:min(calc(0.0391 * var(--orb-R)), 2.6vw); line-height:1.5;letter-spacing:0.05em; } .orb-close__brand small i{ /* HERO と同じ理由で詰める */ font-family:var(--orb-en);font-style:normal;font-weight:500; font-size:1.06em;letter-spacing:0.04em; } .orb-close__brand .orb-logo{ margin-top:calc(0.216 * var(--orb-logoH)); margin-inline:auto; /* 09 は中央揃えなので */ } /* 09 のブランドの2行は一時非表示。英文だけで足り、やや過剰で場所も取るため （HERO に同じ2行があり、ここでは英文がコンセプトの回収になっている）。 戻すときはこの1行を消すだけ。markup はそのまま残してある。 規則の中に display:none を書くと、同じ規則の後ろにある display:block に負ける */ .orb-close__brand{display:none} /* ── ヘッダー・フッターの場所（単体で開いたときの目安） ── 本番では既存サイトの .l-header / .l-footer が入る */ .orb-stub{ display:grid;place-items:center; height:96px;background:#fff; border-bottom:1px solid var(--orb-border); font-size:11px;letter-spacing:.1em;color:var(--orb-muted); position:sticky;top:0;z-index:5; } .orb-stub--foot{height:220px;border-bottom:0;border-top:1px solid var(--orb-border);position:static} /* ── KV の四隅の色かぶり（Figma の bg_column_grad_top / bottom） ── */ .orb-wash{position:absolute;width:320px;height:320px;pointer-events:none} .orb-wash--tl{ left:0;top:0;opacity:.5; background:radial-gradient(circle 320px at 0 0,rgba(255,255,255,1),rgba(255,255,255,0)); } .orb-wash--br{ right:0;bottom:0;opacity:.05; background:radial-gradient(circle 320px at 100% 100%,rgba(90,93,101,1),rgba(90,93,101,0)); } /* ── movie ＋ 02 ── 動画は 02（背景・文脈）の導入なので、セクションを分けずに 02 の先頭に置く。 上は KV の下端に食い込ませて、ファーストビューの時点で上部が見えている状態に。 後ろの KV より前に出す必要があるので z-index を1つ上げる */ .orb-movieSec{ position:relative;z-index:2; margin-top:calc(var(--orb-screen) * var(--orb-moviePeek) * -1); padding-top:0; /* 動画の高さ。幅は .orb-inner--inset と同じ式で、**動画の比（2:1）**から出している。 ラフは 16:9（1080×607.5）だったが、出来上がった動画が 1440×720 ＝ 2:1 で、 16:9 の枠に入れると左右が 5.6% ずつ切れる（グラフの項目名と右パネルの端）。 絵の情報を削るより枠を合わせるほうを採った。16:9 に戻すなら 1/2 を 9/16 に、 .orb-movie の aspect-ratio を 16/9 に戻す（2か所）。 margin / padding の % は内寸の幅に対して解決されるので、 この長さをそのまま板の引き上げ量として使える */ --orb-movieH:calc(min(var(--orb-wInset), 100% - var(--orb-pad) * 2) * 1 / 2); --orb-movieOver:calc(var(--orb-movieH) * var(--orb-movieOnPlate)); } .orb-movieHolder{position:relative;z-index:1} /* 板より前に出す（板は DOM で後ろ） */ /* 02 の板。ラフでは全幅ではなく「左へ抜ける矩形」で、動画の背後から 左へ出てくる。動画は不透明な白なので板の上端と右側は隠れ、 メッシュの帯が動画の下から現れるように見える。 横：左は画面の外へ --orb-plateBleed ぶんはみ出し、右端は内容幅（1200）の --orb-plateUnderR のところで切る。文字は 1200 ガイドの左端に置くので、 padding-left は「外側の余白＋はみ出しぶん」。 縦：高さは「動画との重なり ＋ 動画の下へ出る分（tail）」。 % は padding では内寸の幅に対して解決されるが height では親の高さに 対してになってしまうので、高さは padding-top と中の1行で作る。 height = padding-top + 文字サイズ × (1 − drop) と釣り合うよう逆算している。 */ .orb-plate--under{ --orb-innerW:min(var(--orb-w), 100% - var(--orb-pad) * 2); --orb-gutter:calc((100% - var(--orb-innerW)) / 2); width:calc(var(--orb-gutter) + var(--orb-innerW) * var(--orb-plateUnderR) + var(--orb-plateBleed)); margin-left:calc(var(--orb-plateBleed) * -1); margin-top:calc(var(--orb-movieOver) * -1); min-height:0; padding:calc(var(--orb-movieOver) + var(--orb-plateTitleFs) * (var(--orb-plateUnderTail) - 1 + var(--orb-plateTitleDrop))) 0 0 calc(var(--orb-gutter) + var(--orb-plateBleed)); } .orb-plate--under .orb-plate__title{ margin-bottom:calc(var(--orb-plateTitleFs) * var(--orb-plateTitleDrop) * -1); } /* ── movie の枠 ── ラフは 16:9（1080×607.5）だったが、動画が 1440×720 ＝ 2:1 なので枠を合わせた （上の --orb-movieH のコメントに経緯） */ .orb-movie{ position:relative;aspect-ratio:2 / 1; /* 罫は持たせず、影（Figma の dropShadow/high）で面を浮かせる */ background:#fff;border-radius:4px;box-shadow:var(--orb-shadowHigh); /*