/* ============================================================ 「ポピンズ流」色と面のシステム — 白地×パステル4色オーラ×ピル徹底 ------------------------------------------------------------ 出典: recruit.poppins.co.jp の全量解剖（2026-08-31・三工程方式初適用）。 テーマCSS14本+JS3本を全数スイープした実測値のみで構成（発明値なし）。 作業台帳: css-harvest-raw\poppins-20260831\（追跡外） 採否記録: poppins-harvest-20260831.md ■ レシピ（この5つで「あの感じ」になる） 1. 白地に4色パステルの巨大ぼかし玉（オーラ）を敷く — blur(107px)が本家最頻値 2. 英字ラベルは4色レインボーのclip-text — 止まり位置 0/41/70/100% が署名 3. ボタン・バッジは全部ピル（border-radius:100vh）— 本家85箇所の徹底運用 4. 写真は大角丸タイル(20px)のコラージュ散布 + Ken Burns 5. フォント= Noto Sans JP × Poppins（両方Google Fonts=そのまま使う。 palt必須・字間0.08em規則） ■ 使い方 - 単体で完結（css-templatesのbase不要）。poppins-motion.css と対で読む - Google Fonts 読込（本家と同一・自由ライセンス）: - 色トークンを差し替えれば別ブランドに着せ替え可能（構造は不変） ============================================================ */ :root{ /* --- 本家パステル4色（レインボーの構成色。出現順に P/O/G/B） --- */ --pp-pink: #F1A0B8; --pp-orange: #FFBD7B; --pp-green: #97DDB8; --pp-blue: #82B5E8; /* --- ピル・CTAのグラデ端点（本家実測ペア） --- */ --pp-pill-warm-a: #FF92B3; /* ピンク→黄ピル 90deg（本家24箇所） */ --pp-pill-warm-b: #FFC862; --pp-cta-a: #7AF3AC; /* CTA緑 270deg（本家17箇所） */ --pp-cta-b: #47ACDE; /* --- 地色・文字色 --- */ --pp-ink: #454545; /* 本文（本家の影グラデ rgba(69,69,69) と同系） */ --pp-wine: #7C3147; /* 効かせ色マルーン（ハンバーガー円・アクセント） */ --pp-cream: #F6F5EF; /* クリームパネル */ --pp-white: #fff; /* --- 面の規則 --- */ --pp-r-pill: 100vh; /* ピル徹底。角丸の第一選択 */ --pp-r-tile: 20px; /* 写真タイル大角丸 */ --pp-r-card: 10px; /* カード小角丸（6-12px帯の代表値） */ --pp-blur-aura: 107px; /* オーラ玉の標準ぼかし径（最頻60箇所） */ --pp-blur-aura-lg: 137px; /* 大玉用（23箇所） */ --pp-blur-glass: 3.9px; /* ガラスパネルの標準（backdrop-filter） */ /* --- オーラ玉の実色（台帳発見: レインボー4色と別系統の専用色） --- */ --pp-aura-pink: #FFA3B1; --pp-aura-yellow: rgba(255,224,70,.8); --pp-aura-mint: #66F0D7; --pp-aura-blue: #90ACDC; } /* ---------- 1. オーラの野（白地に4色の巨大ぼかし玉） ---------- 構造:
…
をセクション先頭に置き、中身より下層(z-index:0)に敷く。 玉は3〜5個・コンテナ幅比25〜45%・はみ出し前提（overflow:clipは親で）。 ⚠ blurの常時アニメは禁止（規約）。漂わせたい場合は poppins-motion.css の .pp-aura--drift（transformのみ）を使う */ .pp-aura{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:0} .pp-aura__orb{ position:absolute;display:block;border-radius:50%; width:36%;aspect-ratio:1; filter:blur(var(--pp-blur-aura)); opacity:.26; } .pp-aura__orb[data-c="pink"] {background:var(--pp-aura-pink)} .pp-aura__orb[data-c="orange"]{background:var(--pp-orange)} .pp-aura__orb[data-c="yellow"]{background:var(--pp-aura-yellow)} .pp-aura__orb[data-c="mint"] {background:var(--pp-aura-mint)} .pp-aura__orb[data-c="green"] {background:var(--pp-green)} .pp-aura__orb[data-c="blue"] {background:var(--pp-aura-blue)} .pp-aura__orb--lg{width:48%;filter:blur(var(--pp-blur-aura-lg))} /* 本家則: SPではblur径を1/2〜1/3へ縮小（35〜60px帯）＝描画負荷と滲み過多の回避 */ @media (max-width:900px){ .pp-aura__orb{filter:blur(52px)} .pp-aura__orb--lg{filter:blur(60px)} } /* ---------- 2. レインボーclip-text（英字eyebrowの署名） ---------- 止まり位置 0/41/70/100% が本家の指紋。90deg=横流し・179deg=縦流し */ .pp-rainbow-text{ background:linear-gradient(90deg,var(--pp-pink) 0%,var(--pp-orange) 41%,var(--pp-green) 70%,var(--pp-blue) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .pp-rainbow-text--v{ background:linear-gradient(179deg,var(--pp-pink) 0%,var(--pp-orange) 41%,var(--pp-green) 70%,var(--pp-blue) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ---------- 3. ピル（ボタン・バッジの第一形態） ---------- */ .pp-pill{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; border-radius:var(--pp-r-pill);padding:.9em 2em; font-weight:700;text-decoration:none;line-height:1; color:var(--pp-white); } .pp-pill--warm{background:linear-gradient(90deg,var(--pp-pill-warm-a) 0%,var(--pp-pill-warm-b) 100%)} .pp-pill--cta {background:linear-gradient(270deg,var(--pp-cta-a) 0%,var(--pp-cta-b) 100%)} /* ⚠ 本家の白文字×グラデピルはコントラストAA未達（実測済み）。 出荷物では文字を濃色にするか下地を締めること */ .pp-pill--line{background:var(--pp-white);color:var(--pp-ink);box-shadow:inset 0 0 0 1px rgba(69,69,69,.18)} /* 白ピル+右端グラデ矢印円（本家「お知らせ一覧」型） 構造: ラベル */ .pp-pill__arrow{ display:inline-grid;place-items:center; width:1.7em;aspect-ratio:1;border-radius:50%; background:linear-gradient(270deg,var(--pp-cta-a) 0%,var(--pp-cta-b) 100%); } .pp-pill__arrow::before{ content:"";width:.55em;aspect-ratio:1; border-top:2px solid #fff;border-right:2px solid #fff; transform:rotate(45deg) translate(-8%,8%); } /* ---------- 4. ガラスパネル ---------- */ .pp-glass{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(var(--pp-blur-glass)); backdrop-filter:blur(var(--pp-blur-glass)); border-radius:var(--pp-r-card); } .pp-glass--deep{--pp-blur-glass:32px} /* ---------- 5. 写真タイル（コラージュ散布） ---------- 本家FV=サイズ違いのタイルを左右に散らし中央にコピー。 タイル幅はコンテナ幅比19〜30%（1280実測240〜390px）で3段階 */ .pp-tile{border-radius:var(--pp-r-tile);overflow:hidden;display:block} .pp-tile--s{width:19%} .pp-tile--m{width:24%} .pp-tile--l{width:30%} /* ---------- 6. 巨大英字ウォーターマーク ---------- セクション下層に低不透明のレインボー超大英字。Poppins 500・幅比40%超 */ .pp-watermark{ position:absolute;z-index:0;pointer-events:none;user-select:none; font-family:Poppins,sans-serif;font-weight:500;line-height:1; font-size:clamp(120px,18vw,260px);opacity:.14;white-space:nowrap; background:linear-gradient(90deg,var(--pp-pink) 0%,var(--pp-orange) 41%,var(--pp-green) 70%,var(--pp-blue) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ---------- 7. タイポ規則 ---------- 英字ロックアップ: Poppins・字間0.1em・レインボー →直下に和文大見出し。 和文はNoto Sans JP・palt・字間0.08em（本家はpx直書きだが全部0.08em換算）。 サイズ比の署名: 英字22px→和文40px（セクション）／ヒーロー和文58px(4.5vw) */ .pp-eyebrow{ font-family:Poppins,sans-serif;font-weight:500; font-size:clamp(14px,1.7vw,22px);letter-spacing:.1em; } .pp-heading{ font-family:"Noto Sans JP",sans-serif;font-weight:700; font-feature-settings:"palt"; font-size:clamp(24px,3.1vw,40px);letter-spacing:.08em;line-height:1.6; color:var(--pp-ink); } .pp-heading--hero{font-size:clamp(32px,4.5vw,58px);font-weight:900;line-height:1.7} .pp-body{ font-family:"Noto Sans JP",sans-serif;font-weight:400; font-size:15px;letter-spacing:.08em;line-height:2;color:var(--pp-ink); } /* ---------- 8. 吹き出し尾（角丸三角） ---------- 本家header-tri.svgの形の文法=二次ベジェで全頂点を丸めた三角(16:11)。 インラインSVGで自作する場合のパス（実測から引き直した自作値）: */ /* ---------- 9. クリームパネル（Occupation型の受け面） ---------- */ .pp-panel{ background:var(--pp-cream);border-radius:var(--pp-r-tile); padding:6% 5%;position:relative;overflow:clip; } /* ---------- 10. 暗色スクリム（写真上の文字保護） ---------- 本家mainvisual::before: rgba(69,69,69,.7)→透明の縦グラデ帯を写真下部に敷く */ .pp-scrim{position:relative} .pp-scrim::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1; background:linear-gradient(0deg,rgba(69,69,69,.7) 0%,rgba(69,69,69,0) 100%); pointer-events:none; } /* ---------- 11. レインボー帯ストライプ（見出しのアクセント） ---------- 本家実測: 幅比10%(1280で133px)×高さ5px・右下だけ角丸3px */ .pp-stripe{ display:block;width:10%;min-width:80px;height:5px;border-radius:0 0 3px 0; background:linear-gradient(90deg,var(--pp-pink) 0%,var(--pp-orange) 41%,var(--pp-green) 70%,var(--pp-blue) 100%); } /* ---------- 12. 特大数字・欧文（110px級の塊見せ） ---------- 本家規則: 80〜110pxの特大英数字は字間をほぼゼロ(0.01em)に締める （本文0.08em/ラベル0.1emの逆張り。ここが素人と分かれる） */ .pp-mega{ font-family:Poppins,sans-serif;font-weight:500;line-height:1.1; font-size:clamp(58px,8.6vw,110px);letter-spacing:.01em; } /* ---------- 13. グラスピルナビ（FV上の浮遊ナビ） ---------- 本家: rgba(255,255,255,.3)+blur(9.25px)・角丸59px */ .pp-glass-nav{ background:rgba(255,255,255,.3); -webkit-backdrop-filter:blur(9.25px);backdrop-filter:blur(9.25px); border-radius:var(--pp-r-pill);padding:.7em 1.2em; } /* ---------- 14. 白グローの文字浮かせ（オーラ上の可読性担保） ---------- 本家topAbout::before: 白rgba(255,255,255,.7)の大円(幅比47%)をblur(46.5px)で 見出し背後に敷く。オーラの上に文字を置くときの本家の答え（スクリムの白版） */ /* ⚠使い方: 幅fit-contentの見出しに当てる。ブロック全幅の親に当てると 130%楕円が巨大化してセクション全体が白く洗われる（種の会LPで実証） */ .pp-text-glow{position:relative} .pp-text-glow::before{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:130%;aspect-ratio:1.2;border-radius:50%;z-index:-1; background:rgba(255,255,255,.7);filter:blur(46.5px); }