@charset "utf-8"; /* ===================================================================== lp-figures-2.css — LP図版の型 第2弾（v1.88.0） --------------------------------------------------------------------- lp-figures.css と同じDOMで動く追加の型。SVGは使わずHTML+CSSで描く。

…

キー 見出し 1行キャッチ ← 任意
  • …
← 任意

…

← 任意
…
.pfg-i を
にすると、その場で開閉できる（.pfg--fold を併記）。 色は lp-figures.css で定義済みのトークン（--f-*）だけを使う。 使用ルールは第1弾と同じ：同じ型は全LP合計で3本まで／同一LPで重複させない。 ===================================================================== */ /* ---- 共通の追加パーツ ------------------------------------------------ */ .pm-mock .pfg .pfg-c{ display:block; margin:3px 0 0 !important; padding:0 !important; font-size:14.5px !important; font-weight:400 !important; line-height:1.6 !important; color:var(--f-sub) !important; background:none !important; } .pm-mock .pfg-2 .pfg-items{ align-items:stretch; } /* ===================================================================== A. フロー・ステップ（順序があるもの） ===================================================================== */ /* A1 stage：濃紺ベタのカードを横に並べる。番号は大きく、英字ラベルを添える */ .pm-mock .pfg--stage .pfg-items{ gap:14px; } .pm-mock .pfg--stage .pfg-i{ background:var(--f-navy); border:1px solid var(--f-navy); border-radius:12px; padding:22px 18px 20px; gap:0; } .pm-mock .pfg--stage .pfg-k{ order:2; margin:10px 0 0 !important; font-size:10.5px !important; letter-spacing:.16em !important; color:var(--f-onfill-sub) !important; } .pm-mock .pfg--stage .pfg-i::before{ content:counter(pfg,decimal-leading-zero); order:1; font-family:'Poppins',sans-serif; font-size:24px; font-weight:800; line-height:1; color:var(--f-onfill-key); } .pm-mock .pfg--stage .pfg-t{ order:3; margin:4px 0 0 !important; font-size:17px !important; color:#fff !important; } .pm-mock .pfg--stage .pfg-c{ order:4; color:var(--f-onfill-sub) !important; } .pm-mock .pfg--stage .pfg-l{ order:5; margin:14px 0 0 !important; padding-top:11px !important; border-top:1px solid rgba(255,255,255,.18); } .pm-mock .pfg--stage .pfg-l li{ color:var(--f-onfill-sub) !important; font-size:15px !important; } .pm-mock .pfg--stage .pfg-l li::before{ background:var(--f-onfill-key) !important; } .pm-mock .lpr-sec--dark .pfg--stage .pfg-i{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); } /* --------------------------------------------------------------------- A1b stage5：/method/ の「5つのステージ」と同じ帯。 左から右へ面が濃くなり、境目を斜めに切る。番号は大きく、 本文の下に細い罫線を挟んで補足を置く。 figure の data-label で番号の上のラベルを変えられる（既定は STEP）。 --------------------------------------------------------------------- */ .pm-mock .pfg--stage5 .pfg-items{ --slant:22px; gap:0 !important; margin-top:6px; grid-template-columns:repeat(5,minmax(0,1fr)) !important; } .pm-mock .pfg--stage5[data-n="3"] .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } .pm-mock .pfg--stage5[data-n="4"] .pfg-items{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } .pm-mock .pfg--stage5[data-n="6"] .pfg-items{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; --slant:18px; } .pm-mock .pfg--stage5 .pfg-i{ position:relative; gap:0; color:var(--f-ink); margin-left:calc(var(--slant) * -1); padding:26px 20px 28px calc(20px + var(--slant)); clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%); background:#F4F8FE; } .pm-mock .pfg--stage5 .pfg-i:nth-child(1){ background:#FBFCFE; } .pm-mock .pfg--stage5 .pfg-i:nth-child(2){ background:#F1F6FD; } .pm-mock .pfg--stage5 .pfg-i:nth-child(3){ background:#EAF1FC; } .pm-mock .pfg--stage5 .pfg-i:nth-child(4){ background:#E3EDFB; } .pm-mock .pfg--stage5 .pfg-i:nth-child(5){ background:#DCE8FA; } ".pm-mock .pfg--stage5 .pfg-i:nth-child(6){ background:#D5E3F8; } .pm-mock .pfg--stage5[data-n="6"] .pfg-i{ padding:24px 15px 26px calc(15px + var(--slant)); } .pm-mock .pfg--stage5[data-n="6"] .pfg-i:first-child{ padding-left:15px; } .pm-mock .pfg--stage5[data-n="6"] .pfg-i::after{ font-size:38px; margin-bottom:11px; } .pm-mock .pfg--stage5[data-n="6"] .pfg-t{ font-size:17px !important; } .pm-mock .pfg--stage5[data-n="6"] .pfg-c{ font-size:13.5px !important; } .pm-mock .pfg--stage5[data-n="6"] .pfg-l li{ font-size:12.5px !important; } /* 段の先頭は斜めを落とす */ .pm-mock .pfg--stage5 .pfg-i:first-child{ margin-left:0; padding-left:20px; clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%); } /* 段の末尾は右の斜めを落とす */ .pm-mock .pfg--stage5 .pfg-i:last-child{ clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%); } /* ラベル＋大きな番号 */ .pm-mock .pfg--stage5[data-label="STAGE"] .pfg-i::before{ content:"STAGE"; } .pm-mock .pfg--stage5 .pfg-i::before{ content:"STEP"; order:1; display:block; margin-bottom:5px; font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:.18em; line-height:1.4; color:var(--f-sky); } .pm-mock .pfg--stage5 .pfg-i::after{ content:counter(pfg,decimal-leading-zero); order:2; display:block; margin-bottom:13px; font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(34px,3vw,50px); line-height:1; letter-spacing:.01em; color:var(--f-sky); } .pm-mock .pfg--stage5 .pfg-t{ order:3; margin:0 0 3px !important; font-size:19.5px !important; font-weight:900 !important; line-height:1.5 !important; color:var(--f-navy) !important; } .pm-mock .pfg--stage5 .pfg-k{ order:4; margin:0 0 13px !important; align-self:flex-start; font-family:'Poppins',sans-serif; font-size:12.5px !important; font-weight:600 !important; letter-spacing:.14em !important; color:var(--f-sub) !important; } .pm-mock .pfg--stage5 .pfg-c{ order:5; margin:0 0 12px !important; font-size:15px !important; color:var(--f-ink) !important; } .pm-mock .pfg--stage5 .pfg-l{ order:6; margin-top:auto !important; padding-top:12px !important; gap:4px; border-top:1px solid rgba(27,34,76,.13); } .pm-mock .pfg--stage5 .pfg-l li{ padding-left:0 !important; font-size:13px !important; line-height:1.8 !important; color:var(--f-sub) !important; } .pm-mock .pfg--stage5 .pfg-l li::before{ display:none !important; } @media (max-width:1024px){ .pm-mock .pfg--stage5 .pfg-items, .pm-mock .pfg--stage5[data-n="6"] .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .pm-mock .pfg--stage5 .pfg-i:nth-child(odd){ margin-left:0; padding-left:20px; clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%); } .pm-mock .pfg--stage5 .pfg-i:nth-child(even){ clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%); } .pm-mock .pfg--stage5 .pfg-i:nth-child(n+3){ margin-top:8px; } } @media (max-width:640px){ .pm-mock .pfg--stage5 .pfg-items, .pm-mock .pfg--stage5[data-n="6"] .pfg-items{ grid-template-columns:minmax(0,1fr) !important; --slant:0px; } .pm-mock .pfg--stage5 .pfg-i, .pm-mock .pfg--stage5 .pfg-i:nth-child(odd), .pm-mock .pfg--stage5 .pfg-i:nth-child(even){ clip-path:none; margin-left:0; padding:20px; margin-top:0; } .pm-mock .pfg--stage5 .pfg-i + .pfg-i{ margin-top:6px; } .pm-mock .pfg--stage5 .pfg-i::after{ font-size:32px; margin-bottom:10px; } } /* A2 flowchev：山形の帯でつなぐ。工程が右へ流れて見える */ .pm-mock .pfg--flowchev .pfg-items{ display:flex !important; flex-wrap:wrap; gap:6px; } .pm-mock .pfg--flowchev .pfg-i{ flex:1 1 160px; min-width:0; background:var(--f-tint); border:1px solid var(--f-line); padding:16px 26px 16px 30px; gap:2px; clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); } .pm-mock .pfg--flowchev .pfg-i:first-child{ clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-left:20px; } .pm-mock .pfg--flowchev .pfg-i:last-child{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); } .pm-mock .pfg--flowchev .pfg-i:nth-child(n+2){ background:color-mix(in srgb, var(--f-pale) 70%, var(--f-tint)); } .pm-mock .pfg--flowchev .pfg-i:last-child{ background:var(--f-navy); border-color:var(--f-navy); } .pm-mock .pfg--flowchev .pfg-i:last-child :is(.pfg-t,.pfg-k,.pfg-c){ color:#fff !important; } .pm-mock .pfg--flowchev .pfg-i:last-child .pfg-k{ color:var(--f-onfill-key) !important; } .pm-mock .pfg--flowchev .pfg-t{ font-size:16px !important; } .pm-mock .pfg--flowchev .pfg-c{ font-size:14.5px !important; } /* A3 flowline：1本の軸に丸ノード。ノードの下に見出しと1行 */ .pm-mock .pfg--flowline .pfg-items{ position:relative; gap:0 10px; padding-top:34px; } .pm-mock .pfg--flowline .pfg-items::before{ content:""; position:absolute; left:6%; right:6%; top:13px; height:2px; background:linear-gradient(90deg,var(--f-line2),var(--f-sky)); } .pm-mock .pfg--flowline .pfg-i{ align-items:center; text-align:center; gap:3px; } .pm-mock .pfg--flowline .pfg-i::before{ content:""; position:absolute; top:-28px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background:var(--f-white); border:3px solid var(--f-sky); } .pm-mock .pfg--flowline .pfg-i:last-child::before{ background:var(--f-sky); } .pm-mock .pfg--flowline .pfg-k{ align-self:center; } .pm-mock .pfg--flowline .pfg-t{ font-size:16px !important; } .pm-mock .pfg--flowline .pfg-l{ align-items:center; } .pm-mock .pfg--flowline .pfg-l li{ padding-left:0 !important; text-align:center; } .pm-mock .pfg--flowline .pfg-l li::before{ display:none; } /* A4 flowrail：左に縦のレール。番号を丸バッジで置く（項目が多いとき向け） */ .pm-mock .pfg--flowrail .pfg-items{ display:block !important; position:relative; padding-left:44px; } .pm-mock .pfg--flowrail .pfg-items::before{ content:""; position:absolute; left:13px; top:8px; bottom:8px; width:2px; background:var(--f-line2); } .pm-mock .pfg--flowrail .pfg-i{ position:relative; padding:0 0 20px; gap:2px; } .pm-mock .pfg--flowrail .pfg-i:last-child{ padding-bottom:0; } .pm-mock .pfg--flowrail .pfg-i::before{ content:counter(pfg); position:absolute; left:-44px; top:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--f-navy); color:#fff; font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; line-height:1; } .pm-mock .pfg--flowrail .pfg-t{ font-size:17px !important; } /* A5 flowstep：右肩上がりの段。進むほど濃くなる */ .pm-mock .pfg--flowstep .pfg-items{ display:block !important; } .pm-mock .pfg--flowstep .pfg-i{ margin:0 0 8px; padding:15px 20px; gap:2px; background:var(--f-tint); border-left:3px solid var(--f-sky); margin-left:calc((var(--i) - 1) * 26px); opacity:1; } .pm-mock .pfg--flowstep .pfg-i:nth-child(n+3){ background:color-mix(in srgb, var(--f-pale) 60%, var(--f-tint)); } .pm-mock .pfg--flowstep .pfg-i:last-child{ background:var(--f-navy); border-left-color:var(--f-sky2); } .pm-mock .pfg--flowstep .pfg-i:last-child :is(.pfg-t,.pfg-c){ color:#fff !important; } .pm-mock .pfg--flowstep .pfg-i:last-child .pfg-l li{ color:var(--f-onfill-sub) !important; } .pm-mock .pfg--flowstep .pfg-t{ font-size:16.5px !important; } /* A6 flowsnake：3列×2段で蛇行する（6ステップ向け） */ .pm-mock .pfg--flowsnake .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0; } .pm-mock .pfg--flowsnake .pfg-i{ position:relative; padding:18px 20px; gap:2px; border:1px solid var(--f-line); margin:-0.5px; background:var(--f-white); } .pm-mock .pfg--flowsnake .pfg-i:nth-child(-n+3){ background:var(--f-tint); } .pm-mock .pfg--flowsnake .pfg-i::after{ content:"→"; position:absolute; right:-11px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; z-index:2; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1; color:#fff; background:var(--f-sky); } .pm-mock .pfg--flowsnake .pfg-i:nth-child(3n)::after{ display:none; } .pm-mock .pfg--flowsnake .pfg-t{ font-size:16px !important; } /* ===================================================================== B. 4要素の配置（対になる／並列する4つ） ===================================================================== */ /* B1 quad：2×2。中央で十字に区切る */ .pm-mock .pfg--quad .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:0; border:1px solid var(--f-line); } .pm-mock .pfg--quad .pfg-i{ padding:24px 26px; gap:3px; border:0; } .pm-mock .pfg--quad .pfg-i:nth-child(odd){ border-right:1px solid var(--f-line); } .pm-mock .pfg--quad .pfg-i:nth-child(-n+2){ border-bottom:1px solid var(--f-line); } .pm-mock .pfg--quad .pfg-t{ font-size:18px !important; } /* B2 quadpin：2×2の風車。対角で地色を入れ替える */ .pm-mock .pfg--quadpin .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; } .pm-mock .pfg--quadpin .pfg-i{ padding:22px 24px; gap:3px; background:var(--f-tint); } .pm-mock .pfg--quadpin .pfg-i:nth-child(1), .pm-mock .pfg--quadpin .pfg-i:nth-child(4){ background:var(--f-navy); } .pm-mock .pfg--quadpin .pfg-i:nth-child(1) :is(.pfg-t), .pm-mock .pfg--quadpin .pfg-i:nth-child(4) :is(.pfg-t){ color:#fff !important; } .pm-mock .pfg--quadpin .pfg-i:nth-child(1) :is(.pfg-c,.pfg-l li), .pm-mock .pfg--quadpin .pfg-i:nth-child(4) :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } .pm-mock .pfg--quadpin .pfg-i:nth-child(1) .pfg-k, .pm-mock .pfg--quadpin .pfg-i:nth-child(4) .pfg-k{ color:var(--f-onfill-key) !important; } .pm-mock .pfg--quadpin .pfg-t{ font-size:18px !important; } /* B3 quadbar：横並び。上辺に色帯、背面に薄い連番 */ .pm-mock .pfg--quadbar .pfg-items{ gap:14px; } .pm-mock .pfg--quadbar .pfg-i{ position:relative; overflow:hidden; padding:22px 20px 20px; gap:3px; background:var(--f-white); border:1px solid var(--f-line); border-top:3px solid var(--f-sky); } .pm-mock .pfg--quadbar .pfg-i:nth-child(2){ border-top-color:var(--f-sky2); } .pm-mock .pfg--quadbar .pfg-i:nth-child(3){ border-top-color:var(--f-navy); } .pm-mock .pfg--quadbar .pfg-i:nth-child(4){ border-top-color:var(--f-line2); } .pm-mock .pfg--quadbar .pfg-i::before{ content:counter(pfg,decimal-leading-zero); position:absolute; right:8px; top:2px; font-family:'Poppins',sans-serif; font-size:48px; font-weight:800; line-height:1; color:var(--f-tint); z-index:0; } .pm-mock .pfg--quadbar .pfg-i > *{ position:relative; z-index:1; } .pm-mock .pfg--quadbar .pfg-t{ font-size:17px !important; } /* B4 quadaxis：4象限。縦横の軸ラベルつき */ .pm-mock .pfg--quadaxis .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; position:relative; padding:0 0 0 34px; margin-top:28px !important; } .pm-mock .pfg--quadaxis .pfg-items::before, .pm-mock .pfg--quadaxis .pfg-items::after{ position:absolute; font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--f-sub); font-family:'Poppins',sans-serif; } .pm-mock .pfg--quadaxis .pfg-items::before{ content:attr(data-y); left:0; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; } .pm-mock .pfg--quadaxis .pfg-items::after{ content:attr(data-x); left:34px; top:-22px; } .pm-mock .pfg--quadaxis .pfg-i{ padding:20px 22px; gap:3px; background:var(--f-tint); border:1px solid var(--f-line); } .pm-mock .pfg--quadaxis .pfg-i:nth-child(1){ background:var(--f-pale); } .pm-mock .pfg--quadaxis .pfg-t{ font-size:16.5px !important; } /* B5 quadlap：少しずつ重なって並ぶカード */ .pm-mock .pfg--quadlap .pfg-items{ display:flex !important; gap:0; flex-wrap:wrap; } .pm-mock .pfg--quadlap .pfg-i{ flex:1 1 170px; min-width:0; position:relative; padding:22px 22px 20px 34px; gap:3px; background:var(--f-white); border:1px solid var(--f-line); box-shadow:-12px 0 18px -12px rgba(15,18,41,.28); z-index:calc(10 - var(--i)); margin-top:calc((var(--i) - 1) * 9px); } .pm-mock .pfg--quadlap .pfg-i:first-child{ box-shadow:none; padding-left:22px; } .pm-mock .pfg--quadlap .pfg-i + .pfg-i{ margin-left:-18px; } .pm-mock .pfg--quadlap .pfg-t{ font-size:16.5px !important; } /* ===================================================================== C. 2項の対比 ===================================================================== */ /* C1 vsmid：中央に区切り。左右で地色を反転 */ .pm-mock .pfg--vsmid .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:0; position:relative; } .pm-mock .pfg--vsmid .pfg-items::before{ content:"VS"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; z-index:2; display:flex; align-items:center; justify-content:center; background:var(--f-white); border:1px solid var(--f-line2); font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:800; color:var(--f-sub); } .pm-mock .pfg--vsmid .pfg-i{ padding:26px 30px; gap:4px; } .pm-mock .pfg--vsmid .pfg-i:nth-child(1){ background:var(--f-tint); padding-right:44px; } .pm-mock .pfg--vsmid .pfg-i:nth-child(2){ background:var(--f-navy); padding-left:44px; } .pm-mock .pfg--vsmid .pfg-i:nth-child(2) .pfg-t{ color:#fff !important; } .pm-mock .pfg--vsmid .pfg-i:nth-child(2) :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } .pm-mock .pfg--vsmid .pfg-i:nth-child(2) .pfg-k{ color:var(--f-onfill-key) !important; } .pm-mock .pfg--vsmid .pfg-t{ font-size:19px !important; } /* C2 beaf：左＝いまの状態／右＝変わったあと。間に矢印 */ .pm-mock .pfg--beaf .pfg-items{ grid-template-columns:1fr 44px 1fr !important; gap:0; align-items:stretch; } .pm-mock .pfg--beaf .pfg-i{ padding:24px 26px; gap:4px; border:1px solid var(--f-line); } .pm-mock .pfg--beaf .pfg-i:nth-child(1){ background:var(--f-tint); } .pm-mock .pfg--beaf .pfg-i:nth-child(2){ grid-column:3; background:var(--f-pale); border-color:var(--f-sky); } .pm-mock .pfg--beaf .pfg-items::before{ content:"→"; grid-column:2; align-self:center; justify-self:center; font-size:22px; color:var(--f-sky); line-height:1; } .pm-mock .pfg--beaf .pfg-i:nth-child(1) .pfg-k{ color:var(--f-sub) !important; } .pm-mock .pfg--beaf .pfg-t{ font-size:18px !important; } /* C3 updown：上段を濃紺、下段を白にした2段 */ .pm-mock .pfg--updown .pfg-items{ display:block !important; } .pm-mock .pfg--updown .pfg-i{ padding:24px 28px; gap:4px; } .pm-mock .pfg--updown .pfg-i:nth-child(1){ background:var(--f-navy); } .pm-mock .pfg--updown .pfg-i:nth-child(1) .pfg-t{ color:#fff !important; } .pm-mock .pfg--updown .pfg-i:nth-child(1) :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } .pm-mock .pfg--updown .pfg-i:nth-child(1) .pfg-k{ color:var(--f-onfill-key) !important; } .pm-mock .pfg--updown .pfg-i:nth-child(2){ background:var(--f-white); border:1px solid var(--f-line); border-top:0; } .pm-mock .pfg--updown .pfg-t{ font-size:19px !important; } /* C4 ratio：横棒の長さで2項を比べる */ .pm-mock .pfg--ratio .pfg-items{ display:block !important; } .pm-mock .pfg--ratio .pfg-i{ display:block; padding:0 0 16px; } .pm-mock .pfg--ratio .pfg-i:last-child{ padding-bottom:0; } .pm-mock .pfg--ratio .pfg-t{ font-size:16px !important; } .pm-mock .pfg--ratio .pfg-c{ margin-top:6px !important; } .pm-mock .pfg--ratio .pfg-i::after{ content:""; display:block; height:10px; margin-top:8px; width:var(--w,60%); background:var(--f-sky); } .pm-mock .pfg--ratio .pfg-i:nth-child(even)::after{ background:var(--f-line2); } /* ===================================================================== D. 3要素・分類 ===================================================================== */ /* D1 triad：上に1つ、下に2つ。頂点を主役にする */ .pm-mock .pfg--triad .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px; } .pm-mock .pfg--triad .pfg-i{ padding:22px 24px; gap:3px; background:var(--f-tint); } .pm-mock .pfg--triad .pfg-i:first-child{ grid-column:1 / -1; background:var(--f-navy); text-align:center; align-items:center; } .pm-mock .pfg--triad .pfg-i:first-child .pfg-t{ color:#fff !important; font-size:20px !important; } .pm-mock .pfg--triad .pfg-i:first-child :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } .pm-mock .pfg--triad .pfg-i:first-child .pfg-k{ color:var(--f-onfill-key) !important; align-self:center; } .pm-mock .pfg--triad .pfg-i:first-child .pfg-l li{ padding-left:0 !important; } .pm-mock .pfg--triad .pfg-i:first-child .pfg-l li::before{ display:none; } .pm-mock .pfg--triad .pfg-t{ font-size:17px !important; } /* D2 venn：3つの円が重なる。円の中は短い語だけにする */ .pm-mock .pfg--venn .pfg-items{ display:block !important; position:relative; height:300px; max-width:520px; margin:0 auto !important; } .pm-mock .pfg--venn .pfg-i{ position:absolute; width:210px; height:210px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 34px; gap:2px; border:1px solid var(--f-sky); background:color-mix(in srgb, var(--f-pale) 72%, transparent); } .pm-mock .pfg--venn .pfg-i:nth-child(1){ left:50%; top:0; transform:translateX(-50%); padding-bottom:78px; } .pm-mock .pfg--venn .pfg-i:nth-child(2){ left:3%; bottom:0; padding:62px 64px 0 22px; } .pm-mock .pfg--venn .pfg-i:nth-child(3){ right:3%; bottom:0; padding:62px 22px 0 64px; } .pm-mock .pfg--venn .pfg-i:nth-child(2){ align-items:flex-start; text-align:left; } .pm-mock .pfg--venn .pfg-i:nth-child(3){ align-items:flex-end; text-align:right; } .pm-mock .pfg--venn .pfg-i:nth-child(2) .pfg-k{ align-self:flex-start; } .pm-mock .pfg--venn .pfg-i:nth-child(3) .pfg-k{ align-self:flex-end; } .pm-mock .pfg--venn .pfg-k{ align-self:center; } .pm-mock .pfg--venn .pfg-t{ font-size:15.5px !important; } .pm-mock .pfg--venn .pfg-c{ font-size:12.5px !important; } .pm-mock .pfg--venn .pfg-l{ display:none; } /* D3 col3：見出しを縦の帯で持つ3カラム */ .pm-mock .pfg--col3 .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px; } .pm-mock .pfg--col3 .pfg-i{ display:grid !important; grid-template-columns:34px minmax(0,1fr); gap:0 14px; border:1px solid var(--f-line); padding:0; } .pm-mock .pfg--col3 .pfg-k{ grid-column:1; grid-row:1 / span 4; align-self:stretch; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; letter-spacing:.14em !important; background:var(--f-navy) !important; color:#fff !important; margin:0 !important; padding:14px 0 !important; } .pm-mock .pfg--col3 :is(.pfg-t,.pfg-c,.pfg-l){ grid-column:2; } .pm-mock .pfg--col3 .pfg-t{ margin-top:20px !important; padding-right:18px !important; font-size:17px !important; } .pm-mock .pfg--col3 .pfg-c{ padding-right:18px !important; } .pm-mock .pfg--col3 .pfg-l{ margin:9px 18px 20px 0 !important; } /* D4 lift：中央の1枚だけ持ち上げて推しを示す */ .pm-mock .pfg--lift .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px; align-items:center; } .pm-mock .pfg--lift .pfg-i{ padding:22px 22px 20px; gap:3px; background:var(--f-white); border:1px solid var(--f-line); } .pm-mock .pfg--lift .pfg-i:nth-child(2){ background:var(--f-navy); border-color:var(--f-navy); padding:30px 24px 28px; box-shadow:0 10px 30px rgba(15,18,41,.14); } .pm-mock .pfg--lift .pfg-i:nth-child(2) .pfg-t{ color:#fff !important; font-size:19px !important; } .pm-mock .pfg--lift .pfg-i:nth-child(2) :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } .pm-mock .pfg--lift .pfg-i:nth-child(2) .pfg-k{ color:var(--f-onfill-key) !important; } .pm-mock .pfg--lift .pfg-t{ font-size:17px !important; } /* ===================================================================== E. 階層・積み上げ・絞り込み ===================================================================== */ /* E1 pyramid：上にいくほど狭くなる段 */ .pm-mock .pfg--pyramid .pfg-items{ display:block !important; max-width:640px; margin:0 auto !important; } .pm-mock .pfg--pyramid .pfg-i{ margin:0 auto 6px; padding:16px 30px; gap:2px; text-align:center; align-items:center; width:calc(40% + (var(--i) - 1) * 18%); background:var(--f-navy); color:#fff; clip-path:polygon(7% 0, 93% 0, 100% 100%, 0 100%); } .pm-mock .pfg--pyramid .pfg-i:nth-child(2){ background:color-mix(in srgb, var(--f-navy) 74%, var(--f-sky)); } .pm-mock .pfg--pyramid .pfg-i:nth-child(3){ background:color-mix(in srgb, var(--f-navy) 46%, var(--f-sky)); } .pm-mock .pfg--pyramid .pfg-i:nth-child(4){ background:var(--f-sky); } .pm-mock .pfg--pyramid .pfg-i:nth-child(5){ background:color-mix(in srgb, var(--f-sky) 62%, #fff); } .pm-mock .pfg--pyramid .pfg-i:nth-child(5) :is(.pfg-t,.pfg-c,.pfg-k){ color:var(--f-navy) !important; } .pm-mock .pfg--pyramid .pfg-t{ color:#fff !important; font-size:16.5px !important; } .pm-mock .pfg--pyramid .pfg-k{ color:rgba(255,255,255,.72) !important; align-self:center; } .pm-mock .pfg--pyramid .pfg-c{ color:rgba(255,255,255,.88) !important; font-size:14.5px !important; } .pm-mock .pfg--pyramid .pfg-l{ display:none; } /* E2 layers：土台の上に積み上がる層 */ .pm-mock .pfg--layers .pfg-items{ display:flex !important; flex-direction:column-reverse; gap:6px; } /* 上から順に読ませたいとき（土台→基盤→効果）。最後の層を濃紺にする */ .pm-mock .pfg--layers.pfg--down .pfg-items{ flex-direction:column; } .pm-mock .pfg--layers.pfg--down .pfg-i:first-child{ background:var(--f-tint); border-color:var(--f-line); } .pm-mock .pfg--layers.pfg--down .pfg-i:first-child :is(.pfg-t){ color:var(--f-ink) !important; } .pm-mock .pfg--layers.pfg--down .pfg-i:first-child :is(.pfg-c,.pfg-l li){ color:var(--f-sub) !important; } .pm-mock .pfg--layers.pfg--down .pfg-i:first-child .pfg-k{ color:var(--f-sky) !important; } .pm-mock .pfg--layers.pfg--down .pfg-i:last-child{ background:var(--f-navy); border-color:var(--f-navy); } .pm-mock .pfg--layers.pfg--down .pfg-i:last-child .pfg-t{ color:#fff !important; } .pm-mock .pfg--layers.pfg--down .pfg-i:last-child :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } .pm-mock .pfg--layers.pfg--down .pfg-i:last-child .pfg-k{ color:var(--f-onfill-key) !important; } .pm-mock .pfg--layers.pfg--down .pfg-i + .pfg-i{ position:relative; } .pm-mock .pfg--layers.pfg--down .pfg-i + .pfg-i::before{ content:""; position:absolute; left:50%; top:-6px; width:1px; height:6px; background:var(--f-line2); } .pm-mock .pfg--layers .pfg-i{ padding:16px 24px; gap:2px; background:var(--f-tint); border:1px solid var(--f-line); border-left:3px solid var(--f-line2); } .pm-mock .pfg--layers .pfg-i:first-child{ background:var(--f-navy); border-color:var(--f-navy); } .pm-mock .pfg--layers .pfg-i:first-child .pfg-t{ color:#fff !important; } .pm-mock .pfg--layers .pfg-i:first-child :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } .pm-mock .pfg--layers .pfg-i:first-child .pfg-k{ color:var(--f-onfill-key) !important; } .pm-mock .pfg--layers .pfg-i:last-child{ border-left-color:var(--f-sky); } .pm-mock .pfg--layers .pfg-t{ font-size:16.5px !important; } /* E3 funnel：段階ごとに幅が狭くなる（絞り込み） */ .pm-mock .pfg--funnel .pfg-items{ display:block !important; max-width:680px; margin:0 auto !important; } .pm-mock .pfg--funnel .pfg-i{ position:relative; margin:0 auto 4px; padding:15px 28px; gap:2px; width:calc(100% - (var(--i) - 1) * 13%); align-items:center; text-align:center; background:color-mix(in srgb, var(--f-sky) calc(22% + var(--i) * 16%), var(--f-white)); clip-path:polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%); } .pm-mock .pfg--funnel .pfg-t{ font-size:16px !important; } .pm-mock .pfg--funnel .pfg-k{ align-self:center !important; } .pm-mock .pfg--funnel .pfg-i:nth-child(n+3) :is(.pfg-t,.pfg-c){ color:#fff !important; } .pm-mock .pfg--funnel .pfg-i:nth-child(n+3) .pfg-k{ color:rgba(255,255,255,.8) !important; } .pm-mock .pfg--funnel .pfg-l{ display:none; } /* E4 branch2：1つの起点から枝分かれする */ .pm-mock .pfg--branch2 .pfg-items{ display:block !important; position:relative; } .pm-mock .pfg--branch2 .pfg-i{ padding:18px 22px; gap:2px; background:var(--f-tint); border:1px solid var(--f-line); } .pm-mock .pfg--branch2 .pfg-i:first-child{ background:var(--f-navy); border-color:var(--f-navy); margin-bottom:26px; position:relative; } .pm-mock .pfg--branch2 .pfg-i:first-child .pfg-t{ color:#fff !important; font-size:18px !important; } .pm-mock .pfg--branch2 .pfg-i:first-child :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } .pm-mock .pfg--branch2 .pfg-i:first-child .pfg-k{ color:var(--f-onfill-key) !important; } .pm-mock .pfg--branch2 .pfg-i:first-child::after{ content:""; position:absolute; left:50%; bottom:-26px; width:1px; height:26px; background:var(--f-line2); } .pm-mock .pfg--branch2 .pfg-i:nth-child(n+2){ display:inline-flex; width:calc((100% - 12px) / 2); vertical-align:top; margin:0 0 12px; position:relative; } .pm-mock .pfg--branch2 .pfg-i:nth-child(even):not(:first-child){ margin-right:12px; } .pm-mock .pfg--branch2 .pfg-t{ font-size:16.5px !important; } /* ===================================================================== F. 数値・指標 ===================================================================== */ /* F1 kpi：数値タイル。--v に数字、--u に単位を入れる 300 を数字として大きく出す */ .pm-mock .pfg--kpi .pfg-items{ gap:0; border-top:1px solid var(--f-line); border-bottom:1px solid var(--f-line); } .pm-mock .pfg--kpi .pfg-i{ padding:22px 24px; gap:4px; } .pm-mock .pfg--kpi .pfg-i + .pfg-i{ border-left:1px solid var(--f-line); } .pm-mock .pfg--kpi .pfg-k{ font-family:'Poppins',sans-serif; font-size:38px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.01em !important; color:var(--f-navy) !important; } .pm-mock .pfg--kpi .pfg-k em{ font-style:normal; font-size:16px; font-weight:700; margin-left:3px; color:var(--f-sky); } .pm-mock .pfg--kpi .pfg-t{ font-size:15px !important; font-weight:700 !important; } .pm-mock .pfg--kpi .pfg-c{ font-size:14.5px !important; } /* F2 bars：横バーで大きさを比べる（--w に幅％） */ .pm-mock .pfg--bars .pfg-items{ display:block !important; } .pm-mock .pfg--bars .pfg-i{ display:grid !important; grid-template-columns:minmax(120px,26%) minmax(0,1fr); gap:0 16px; align-items:center; padding:9px 0; border-bottom:1px solid var(--f-line); } .pm-mock .pfg--bars .pfg-i:last-child{ border-bottom:0; } .pm-mock .pfg--bars .pfg-k{ grid-column:1; grid-row:1; } .pm-mock .pfg--bars .pfg-t{ grid-column:1; grid-row:2; font-size:15.5px !important; } .pm-mock .pfg--bars .pfg-c{ grid-column:2; grid-row:2; margin:6px 0 0 !important; font-size:13px !important; } .pm-mock .pfg--bars .pfg-i::after{ content:""; grid-column:2; grid-row:1; height:12px; width:var(--w,60%); background:linear-gradient(90deg,var(--f-sky),var(--f-sky2)); } .pm-mock .pfg--bars .pfg-l{ display:none; } /* F3 ring：比率をドーナツで（--p に％の数値だけ） */ .pm-mock .pfg--ring .pfg-items{ gap:18px; } .pm-mock .pfg--ring .pfg-i{ align-items:center; text-align:center; gap:8px; } .pm-mock .pfg--ring .pfg-i::before{ content:""; width:112px; height:112px; border-radius:50%; background: radial-gradient(var(--f-white) 60%, transparent 61%), conic-gradient(var(--f-sky) calc(var(--p,60) * 1%), var(--f-line) 0); } .pm-mock .pfg--ring .pfg-k{ align-self:center; margin-top:-70px !important; margin-bottom:38px !important; font-family:'Poppins',sans-serif; font-size:24px !important; color:var(--f-navy) !important; letter-spacing:0 !important; } .pm-mock .pfg--ring .pfg-t{ font-size:15.5px !important; } .pm-mock .pfg--ring .pfg-l{ display:none; } /* ===================================================================== G. 対応関係・確認 ===================================================================== */ /* G1 grid2：行×列のマトリクス。.pfg-l の各項目が1セル */ .pm-mock .pfg--grid2 .pfg-items{ display:block !important; border-top:1px solid var(--f-line); } .pm-mock .pfg--grid2 .pfg-i{ display:grid !important; grid-template-columns:minmax(150px,30%) minmax(0,1fr); gap:0 18px; align-items:start; padding:14px 0; border-bottom:1px solid var(--f-line); } .pm-mock .pfg--grid2 .pfg-k{ grid-column:1; grid-row:1; } .pm-mock .pfg--grid2 .pfg-t{ grid-column:1; grid-row:2; font-size:16px !important; } .pm-mock .pfg--grid2 .pfg-c{ grid-column:1; grid-row:3; } .pm-mock .pfg--grid2 .pfg-l{ grid-column:2; grid-row:1 / span 3; display:grid !important; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:6px 10px; } .pm-mock .pfg--grid2 .pfg-l li{ padding:8px 10px !important; background:var(--f-tint); border:1px solid var(--f-line); text-align:center; color:var(--f-ink) !important; font-size:13.5px !important; line-height:1.5 !important; } .pm-mock .pfg--grid2 .pfg-l li::before{ display:none; } .pm-mock .pfg--grid2 .pfg-l li:first-child{ background:var(--f-pale); color:var(--f-navy) !important; font-weight:700; } /* G2 pairs：左に課題、右に対策。行で対応させる */ .pm-mock .pfg--pairs .pfg-items{ display:block !important; border:1px solid var(--f-line); } .pm-mock .pfg--pairs .pfg-i{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0; align-items:stretch; padding:0; } .pm-mock .pfg--pairs .pfg-i + .pfg-i{ border-top:1px solid var(--f-line); } .pm-mock .pfg--pairs .pfg-k{ grid-column:1; grid-row:1; margin:16px 0 0 18px !important; } .pm-mock .pfg--pairs .pfg-t{ grid-column:1; grid-row:2; margin:3px 18px 16px !important; font-size:16px !important; } .pm-mock .pfg--pairs .pfg-l{ grid-column:2; grid-row:1 / span 3; margin:0 !important; padding:16px 18px !important; background:var(--f-pale); gap:5px; } .pm-mock .pfg--pairs .pfg-l li{ color:var(--f-ink) !important; } .pm-mock .pfg--pairs .pfg-c{ grid-column:1; grid-row:3; margin:0 18px 16px !important; } /* G3 checks：チェック記号つきの確認項目 */ .pm-mock .pfg--checks .pfg-items{ gap:10px 26px; } .pm-mock .pfg--checks .pfg-i{ display:grid !important; grid-template-columns:26px minmax(0,1fr); gap:0 12px; padding:13px 0; border-bottom:1px solid var(--f-line); } .pm-mock .pfg--checks .pfg-i{ position:relative; } .pm-mock .pfg--checks .pfg-i::before{ content:""; grid-column:1; grid-row:1 / span 3; align-self:start; margin-top:3px; width:20px; height:20px; border-radius:3px; background:var(--f-sky); } .pm-mock .pfg--checks .pfg-i::after{ content:""; position:absolute; left:5px; top:23px; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); } .pm-mock .pfg--checks :is(.pfg-k,.pfg-t,.pfg-c,.pfg-l){ grid-column:2; } .pm-mock .pfg--checks .pfg-t{ font-size:16px !important; } /* 子要素を自分で配置している型は、開閉にしても入れ子にならないようにする。 の箱を消して、中の要素をそのまま格子へ並べる。 */ .pm-mock .pfg--fold:is(.pfg--col3,.pfg--bars,.pfg--grid2,.pfg--pairs,.pfg--checks,.pfg--stage) .pfg-i > summary{ display:contents; cursor:pointer; } .pm-mock .pfg--fold:is(.pfg--col3,.pfg--bars,.pfg--grid2,.pfg--pairs,.pfg--checks,.pfg--stage) .pfg-i > summary::after{ display:none !important; } .pm-mock .pfg--fold:is(.pfg--col3,.pfg--bars,.pfg--grid2,.pfg--pairs,.pfg--checks,.pfg--stage) .pfg-i{ position:relative; cursor:pointer; } .pm-mock .pfg--fold:is(.pfg--col3,.pfg--bars,.pfg--grid2,.pfg--pairs,.pfg--checks,.pfg--stage) .pfg-i::after{ content:"＋"; position:absolute; right:10px; top:8px; z-index:2; font-size:16px; font-weight:400; line-height:1; color:var(--f-sky); } .pm-mock .pfg--fold:is(.pfg--col3,.pfg--bars,.pfg--grid2,.pfg--pairs,.pfg--checks,.pfg--stage) .pfg-i[open]::after{ content:"−"; } .pm-mock .pfg--fold.pfg--stage .pfg-i::after{ color:var(--f-onfill-key); } /* 開閉する図版では、閉じているカードを無理に伸ばさない（格子の型のみ） */ .pm-mock .pfg--fold:is(.pfg--quadpin,.pfg--quadbar,.pfg--quadlap,.pfg--triad,.pfg--lift,.pfg--col3) .pfg-i{ align-self:start; } /* 箇条書きの中の は、名前＋説明の形で使う。名前を行頭に立てる */ .pm-mock .pfg .pfg-l li > b:first-child{ display:block; margin-bottom:1px; color:var(--f-ink) !important; font-size:15px !important; font-weight:700 !important; background:none !important; } .pm-mock .pfg--stage .pfg-l li > b:first-child, .pm-mock .lpr-sec--dark .pfg .pfg-l li > b:first-child{ color:#fff !important; } .pm-mock .pfg--layers .pfg-i:first-child .pfg-l li > b:first-child, .pm-mock .pfg--layers.pfg--down .pfg-i:last-child .pfg-l li > b:first-child{ color:#fff !important; } .pm-mock .pfg--layers.pfg--down .pfg-i:first-child .pfg-l li > b:first-child{ color:var(--f-ink) !important; } .pm-mock .pfg .pfg-l li{ text-align:left !important; } .pm-mock .pfg--flowline .pfg-l li{ text-align:center !important; } /* ===================================================================== T. 箱で囲まない、紙面的な型 --------------------------------------------------------------------- カードを並べると同じ格子が続いて単調になる。罫線と余白だけで組み、 横幅を最後まで使い切るための型。 ===================================================================== */ /* T1 deflist：左に番号とラベル、右に本文。行は細い罫線で区切るだけ */ .pm-mock .pfg--deflist .pfg-items{ display:block !important; border-top:1px solid var(--f-line2); } .pm-mock .pfg--deflist .pfg-i{ display:grid !important; grid-template-columns:52px minmax(0,0.78fr) minmax(0,1.22fr); column-gap:30px; row-gap:0; align-items:start; padding:24px 0 26px; border-bottom:1px solid var(--f-line); } .pm-mock .pfg--deflist .pfg-i::before{ content:counter(pfg,decimal-leading-zero); grid-column:1; grid-row:1 / span 3; align-self:start; font-family:'Poppins',sans-serif; font-size:25px; font-weight:700; line-height:1.05; letter-spacing:-.01em; color:var(--f-line2); } .pm-mock .pfg--deflist .pfg-k{ grid-column:2; grid-row:1; margin-bottom:3px !important; } .pm-mock .pfg--deflist .pfg-t{ grid-column:2; grid-row:2; font-size:19.5px !important; line-height:1.5 !important; } .pm-mock .pfg--deflist .pfg-c{ grid-column:2; grid-row:3; margin-top:5px !important; } .pm-mock .pfg--deflist .pfg-l{ grid-column:3; grid-row:1 / span 3; gap:7px; padding-top:2px !important; } .pm-mock .pfg--deflist .pfg-l li{ padding-left:0 !important; font-size:15.5px !important; line-height:1.85 !important; } .pm-mock .pfg--deflist .pfg-l li::before{ display:none !important; } .pm-mock .pfg--deflist .pfg-i:hover::before{ color:var(--f-sky); } /* T2 cols：縦の細い罫線で区切っただけの多カラム。箱にしない */ .pm-mock .pfg--cols .pfg-items{ gap:0; border-top:2px solid var(--f-navy); } .pm-mock .pfg--cols .pfg-i{ padding:22px 24px 24px; gap:4px; border-left:1px solid var(--f-line); } .pm-mock .pfg--cols .pfg-i:first-child{ border-left:0; padding-left:0; } .pm-mock .pfg--cols[data-n="6"] .pfg-i:nth-child(3n+1), .pm-mock .pfg--cols[data-n="9"] .pfg-i:nth-child(3n+1){ border-left:0; padding-left:0; } .pm-mock .pfg--cols[data-n="6"] .pfg-i:nth-child(n+4){ border-top:1px solid var(--f-line); padding-top:22px; } .pm-mock .pfg--cols .pfg-t{ font-size:17.5px !important; line-height:1.55 !important; } .pm-mock .pfg--cols .pfg-l{ margin-top:11px !important; gap:9px; } .pm-mock .pfg--cols .pfg-l li{ padding-left:0 !important; font-size:14.5px !important; line-height:1.8 !important; } .pm-mock .pfg--cols .pfg-l li::before{ display:none !important; } .pm-mock .pfg--cols .pfg-l li b{ display:block; color:var(--f-ink) !important; font-size:15px; margin-bottom:1px; } @media (max-width:860px){ .pm-mock .pfg--deflist .pfg-i{ grid-template-columns:44px minmax(0,1fr); column-gap:18px; } .pm-mock .pfg--deflist .pfg-i::before{ grid-row:1 / span 1; font-size:21px; } .pm-mock .pfg--deflist .pfg-k{ grid-column:2; } .pm-mock .pfg--deflist .pfg-t{ grid-column:2; grid-row:auto; } .pm-mock .pfg--deflist .pfg-c{ grid-column:2; grid-row:auto; } .pm-mock .pfg--deflist .pfg-l{ grid-column:2; grid-row:auto; margin-top:10px !important; } .pm-mock .pfg--cols .pfg-items{ grid-template-columns:minmax(0,1fr) !important; } .pm-mock .pfg--cols .pfg-i, .pm-mock .pfg--cols[data-n="6"] .pfg-i:nth-child(n+4){ border-left:0 !important; padding:18px 0 20px !important; border-top:1px solid var(--f-line); } .pm-mock .pfg--cols .pfg-i:first-child{ border-top:0; padding-top:14px !important; } } /* --------------------------------------------------------------------- T3 diag：斜めに切った帯を段違いに重ねる。 面をわずかに傾け、中の文字は水平に戻す。背面に大きな番号を敷く。 項目が2〜4つで、1つずつ主張させたいときに。 --------------------------------------------------------------------- */ .pm-mock .pfg--diag{ overflow:hidden; } .pm-mock .pfg--diag .pfg-items{ display:block !important; padding:14px 0 18px; } .pm-mock .pfg--diag .pfg-i{ position:relative; display:block !important; margin:0 0 -14px; padding:34px 46px 38px; transform:skewY(-1.6deg); transform-origin:left center; background:var(--f-white); border:1px solid var(--f-line); z-index:1; } .pm-mock .pfg--diag .pfg-i:nth-child(2n){ background:#EFF5FD; border-color:#DDE8F7; margin-left:7%; width:93%; z-index:2; } .pm-mock .pfg--diag .pfg-i:nth-child(3n){ background:var(--f-navy); border-color:var(--f-navy); margin-left:14%; width:86%; z-index:3; } .pm-mock .pfg--diag .pfg-i:last-child{ margin-bottom:0; } .pm-mock .pfg--diag .pfg-i > *{ transform:skewY(1.6deg); position:relative; z-index:1; } /* 背面の大きな番号 */ .pm-mock .pfg--diag .pfg-i::before{ content:counter(pfg,decimal-leading-zero); position:absolute; right:34px; top:50%; transform:translateY(-50%) skewY(1.6deg); font-family:'Poppins',sans-serif; font-size:82px; font-weight:800; line-height:1; color:rgba(27,34,76,.07); z-index:0; pointer-events:none; } .pm-mock .pfg--diag .pfg-i:nth-child(3n)::before{ color:rgba(255,255,255,.10); } .pm-mock .pfg--diag .pfg-k{ display:inline-block; margin:0 0 8px !important; padding:4px 11px !important; background:var(--f-navy) !important; color:#fff !important; font-size:11.5px !important; letter-spacing:.14em !important; } .pm-mock .pfg--diag .pfg-t{ display:block; margin:0 0 6px !important; max-width:62%; font-size:23px !important; font-weight:900 !important; line-height:1.45 !important; } .pm-mock .pfg--diag .pfg-c{ margin:0 0 12px !important; max-width:62%; font-size:15.5px !important; } .pm-mock .pfg--diag .pfg-l{ max-width:62%; gap:5px; } .pm-mock .pfg--diag .pfg-l li{ padding-left:0 !important; font-size:15px !important; line-height:1.85 !important; } .pm-mock .pfg--diag .pfg-l li::before{ display:none !important; } /* 濃紺の帯の中 */ .pm-mock .pfg--diag .pfg-i:nth-child(3n) .pfg-k{ background:#fff !important; color:var(--f-navy) !important; } .pm-mock .pfg--diag .pfg-i:nth-child(3n) .pfg-t{ color:#fff !important; } .pm-mock .pfg--diag .pfg-i:nth-child(3n) :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } @media (max-width:860px){ .pm-mock .pfg--diag .pfg-i{ padding:26px 24px 30px; margin-bottom:-10px; transform:skewY(-1.2deg); } .pm-mock .pfg--diag .pfg-i > *{ transform:skewY(1.2deg); } .pm-mock .pfg--diag .pfg-i:nth-child(2n){ margin-left:4%; width:96%; } .pm-mock .pfg--diag .pfg-i:nth-child(3n){ margin-left:8%; width:92%; } .pm-mock .pfg--diag .pfg-i::before{ right:16px; font-size:56px; transform:translateY(-50%) skewY(1.2deg); } .pm-mock .pfg--diag :is(.pfg-t,.pfg-c,.pfg-l){ max-width:none; } .pm-mock .pfg--diag .pfg-t{ font-size:19px !important; } } /* --------------------------------------------------------------------- T4 wedge：斜めに切った面そのものを噛み合わせる。 箱を傾けるのではなく、背面に大きな三角・多角形を敷き、 その上に文字を置く。面の境目がそのまま項目の区切りになる。 --------------------------------------------------------------------- */ .pm-mock .pfg--wedge .pfg-items{ position:relative; isolation:isolate; gap:0 !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; background:#EAF1FB; /* 中央の面 */ } .pm-mock .pfg--wedge[data-n="2"] .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .pm-mock .pfg--wedge[data-n="4"] .pfg-items{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } .pm-mock .pfg--wedge .pfg-items::before{ /* 左の面：白い三角 */ content:""; position:absolute; inset:0; z-index:-2; background:var(--f-white); clip-path:polygon(0 0, 36% 0, 30% 100%, 0 100%); } .pm-mock .pfg--wedge .pfg-items::after{ /* 右の面：濃紺の三角 */ content:""; position:absolute; inset:0; z-index:-1; background:var(--f-navy); clip-path:polygon(70% 0, 100% 0, 100% 100%, 64% 100%); } .pm-mock .pfg--wedge[data-n="2"] .pfg-items::before{ clip-path:polygon(0 0, 53% 0, 47% 100%, 0 100%); } .pm-mock .pfg--wedge[data-n="2"] .pfg-items::after{ clip-path:polygon(53% 0, 100% 0, 100% 100%, 47% 100%); } .pm-mock .pfg--wedge .pfg-i{ position:relative; padding:46px 26px 52px; gap:5px; min-height:270px; } .pm-mock .pfg--wedge .pfg-i:nth-child(1){ padding-left:10px; padding-right:44px; } .pm-mock .pfg--wedge .pfg-i:nth-child(2){ padding-left:22px; padding-right:30px; } .pm-mock .pfg--wedge .pfg-i:nth-child(3){ padding-left:56px; padding-right:10px; } /* 背面の大きな番号 */ .pm-mock .pfg--wedge .pfg-i::before{ content:counter(pfg,decimal-leading-zero); position:absolute; left:0; bottom:4px; z-index:0; font-family:'Poppins',sans-serif; font-size:76px; font-weight:800; line-height:1; color:rgba(27,34,76,.10); } .pm-mock .pfg--wedge .pfg-i:nth-child(1)::before{ left:10px; } .pm-mock .pfg--wedge .pfg-i:nth-child(3)::before{ left:56px; color:rgba(255,255,255,.14); } .pm-mock .pfg--wedge .pfg-i > *{ position:relative; z-index:1; } .pm-mock .pfg--wedge .pfg-k{ display:inline-block; align-self:flex-start; margin:0 0 9px !important; padding:4px 11px !important; background:var(--f-navy) !important; color:#fff !important; font-size:11.5px !important; letter-spacing:.14em !important; } .pm-mock .pfg--wedge .pfg-t{ font-size:20px !important; font-weight:900 !important; line-height:1.5 !important; } .pm-mock .pfg--wedge .pfg-c{ margin:2px 0 10px !important; font-size:15.5px !important; } .pm-mock .pfg--wedge .pfg-l{ gap:5px; } .pm-mock .pfg--wedge .pfg-l li{ padding-left:0 !important; font-size:15.5px !important; line-height:1.8 !important; } .pm-mock .pfg--wedge .pfg-l li::before{ display:none !important; } /* 濃紺の面に載る列 */ .pm-mock .pfg--wedge .pfg-i:last-child .pfg-k{ background:#fff !important; color:var(--f-navy) !important; } .pm-mock .pfg--wedge .pfg-i:last-child .pfg-t{ color:#fff !important; } .pm-mock .pfg--wedge .pfg-i:last-child :is(.pfg-c,.pfg-l li){ color:var(--f-onfill-sub) !important; } @media (max-width:900px){ .pm-mock .pfg--wedge .pfg-items, .pm-mock .pfg--wedge[data-n="2"] .pfg-items, .pm-mock .pfg--wedge[data-n="4"] .pfg-items{ grid-template-columns:minmax(0,1fr) !important; background:transparent; } .pm-mock .pfg--wedge .pfg-items::before, .pm-mock .pfg--wedge .pfg-items::after{ display:none; } .pm-mock .pfg--wedge .pfg-i{ min-height:0; padding:24px 22px 26px !important; margin-bottom:6px; } .pm-mock .pfg--wedge .pfg-i:nth-child(1){ background:var(--f-white); border:1px solid var(--f-line); } .pm-mock .pfg--wedge .pfg-i:nth-child(2){ background:#EAF1FB; } .pm-mock .pfg--wedge .pfg-i:nth-child(3){ background:var(--f-navy); } .pm-mock .pfg--wedge .pfg-i::before{ left:auto !important; right:14px; top:14px; font-size:44px; } } /* --------------------------------------------------------------------- T5 diamond：ひし形（45度に回した正方形）を段違いに並べる。 中は短い語だけ。説明はひし形の外、隣に置く。 --------------------------------------------------------------------- */ .pm-mock .pfg--diamond .pfg-items{ display:block !important; padding:10px 0 6px; } .pm-mock .pfg--diamond .pfg-i{ display:grid !important; grid-template-columns:200px minmax(0,1fr); align-items:center; gap:0 34px; padding:0 0 22px; } .pm-mock .pfg--diamond .pfg-i:nth-child(2n){ grid-template-columns:minmax(0,1fr) 200px; } .pm-mock .pfg--diamond .pfg-i:nth-child(2n) > .pfg-k{ grid-column:2; grid-row:1; } .pm-mock .pfg--diamond .pfg-i:nth-child(2n) > :is(.pfg-t,.pfg-c,.pfg-l){ grid-column:1; text-align:right; } .pm-mock .pfg--diamond .pfg-i:nth-child(2n) .pfg-l li{ text-align:right !important; } /* ひし形そのもの＝.pfg-k を回転した正方形にする */ .pm-mock .pfg--diamond .pfg-k{ grid-column:1; grid-row:1 / span 4; align-self:center; justify-self:center; width:150px; height:150px; margin:0 !important; padding:0 !important; display:flex; align-items:center; justify-content:center; text-align:center; transform:rotate(45deg); background:var(--f-navy) !important; color:#fff !important; font-family:'Poppins',sans-serif; font-size:13px !important; letter-spacing:.12em !important; } .pm-mock .pfg--diamond .pfg-k > span{ display:block; transform:rotate(-45deg); } .pm-mock .pfg--diamond .pfg-i:nth-child(2) .pfg-k{ background:var(--f-sky) !important; } .pm-mock .pfg--diamond .pfg-i:nth-child(3) .pfg-k{ background:#3E5B86 !important; } .pm-mock .pfg--diamond .pfg-t{ font-size:21px !important; font-weight:900 !important; line-height:1.5 !important; } .pm-mock .pfg--diamond .pfg-c{ margin-top:4px !important; } .pm-mock .pfg--diamond .pfg-l{ margin-top:9px !important; gap:5px; } .pm-mock .pfg--diamond .pfg-l li{ padding-left:0 !important; font-size:15.5px !important; line-height:1.8 !important; } .pm-mock .pfg--diamond .pfg-l li::before{ display:none !important; } @media (max-width:760px){ .pm-mock .pfg--diamond .pfg-i, .pm-mock .pfg--diamond .pfg-i:nth-child(2n){ grid-template-columns:110px minmax(0,1fr); gap:0 18px; } .pm-mock .pfg--diamond .pfg-i:nth-child(2n) > .pfg-k{ grid-column:1; } .pm-mock .pfg--diamond .pfg-i:nth-child(2n) > :is(.pfg-t,.pfg-c,.pfg-l){ grid-column:2; text-align:left; } .pm-mock .pfg--diamond .pfg-i:nth-child(2n) .pfg-l li{ text-align:left !important; } .pm-mock .pfg--diamond .pfg-k{ width:88px; height:88px; font-size:11px !important; } .pm-mock .pfg--diamond .pfg-t{ font-size:17px !important; } } /* ===================================================================== P. 実写つきの型 ---------------------------------------------------------------------

…

…
…
…
写真は自社で撮影したものだけを使う。内容と関係のない素材は置かない。 ===================================================================== */ .pm-mock .pfg .pfg-photo{ overflow:hidden; background:var(--f-tint); } .pm-mock .pfg .pfg-photo img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); } .pm-mock .pfg .pfg-cap{ display:block; margin:8px 0 0 !important; padding:0 !important; font-size:12.5px !important; line-height:1.6 !important; color:var(--f-sub) !important; } /* P1 photoside：左に写真、右に項目（開閉できる） */ .pm-mock .pfg--photoside .pfg-row{ display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); gap:0; align-items:stretch; border:1px solid var(--f-line); } .pm-mock .pfg--photoside .pfg-photo{ grid-column:1; min-height:300px; } .pm-mock .pfg--photoside .pfg-items{ grid-column:2; display:block !important; padding:6px 26px 8px; } .pm-mock .pfg--photoside .pfg-i{ padding:15px 0; gap:2px; border-bottom:1px solid var(--f-line); } .pm-mock .pfg--photoside .pfg-i:last-child{ border-bottom:0; } .pm-mock .pfg--photoside .pfg-t{ font-size:16.5px !important; } /* P2 photoband：横長の写真を1枚敷き、その下に項目 */ .pm-mock .pfg--photoband .pfg-photo{ height:230px; margin-bottom:16px; } .pm-mock .pfg--photoband .pfg-i{ padding:18px 20px; gap:3px; background:var(--f-tint); border-top:2px solid var(--f-sky); } .pm-mock .pfg--photoband .pfg-t{ font-size:16.5px !important; } /* P3 photolead：写真の上に見出しを重ねた帯（セクションの導入に） */ .pm-mock .pfg--photolead .pfg-photo{ position:relative; height:260px; margin-bottom:14px; } .pm-mock .pfg--photolead .pfg-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,18,41,.82) 0%, rgba(15,18,41,.45) 55%, rgba(15,18,41,.12) 100%); } .pm-mock .pfg--photolead .pfg-photo .pfg-over{ position:absolute; z-index:1; left:30px; right:30px; bottom:26px; font-size:21px; font-weight:800; line-height:1.55; color:#fff; } .pm-mock .pfg--photolead .pfg-i{ padding:16px 18px; gap:3px; border:1px solid var(--f-line); } .pm-mock .pfg--photolead .pfg-t{ font-size:16px !important; } @media (max-width:640px){ .pm-mock .pfg--photoside .pfg-row{ grid-template-columns:minmax(0,1fr); } .pm-mock .pfg--photoside .pfg-photo{ grid-column:1; min-height:0; height:190px; } .pm-mock .pfg--photoside .pfg-items{ grid-column:1; padding:2px 18px 6px; } .pm-mock .pfg--photoband .pfg-photo{ height:170px; } .pm-mock .pfg--photolead .pfg-photo{ height:200px; } .pm-mock .pfg--photolead .pfg-photo::after{ background:linear-gradient(0deg, rgba(15,18,41,.88) 0%, rgba(15,18,41,.35) 70%); } .pm-mock .pfg--photolead .pfg-photo .pfg-over{ left:18px; right:18px; bottom:16px; font-size:17px; } } /* --------------------------------------------------------------------- 写真の扱い（共通） モノクロ化したうえで濃紺を重ね、色数を増やさずに面として使う。 .pfg-photo--duo を付けると、どの写真も同じトーンに揃う。 --------------------------------------------------------------------- */ /* --soft を暗くしたもの。白抜きの文字を写真の上に置くときだけ使う。 写真そのものを見せたいときは --soft のほうが良い。 */ .pm-mock .pfg .pfg-photo--duo{ position:relative; overflow:hidden; background:var(--f-navy); } .pm-mock .pfg .pfg-photo--duo img{ filter:grayscale(1) contrast(1.12) brightness(.82); } .pm-mock .pfg .pfg-photo--duo::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg, rgba(27,34,76,.62) 0%, rgba(27,34,76,.34) 55%, rgba(28,147,210,.30) 100%); mix-blend-mode:multiply; } /* 写真の上に置く見出し */ .pm-mock .pfg .pfg-over{ position:absolute; z-index:2; left:32px; right:32px; bottom:26px; color:#fff; font-size:20px; font-weight:800; line-height:1.55; } .pm-mock .pfg .pfg-over small{ display:block; margin-bottom:6px; font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.16em; color:rgba(255,255,255,.78); } /* --------------------------------------------------------------------- T6 photowedge：写真そのものを斜めに切った面として使い、 右の面に文字を置く。写真は背景、主役は文字。 --------------------------------------------------------------------- */ .pm-mock .pfg--photowedge .pfg-row{ position:relative; display:grid; align-items:stretch; grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr); background:#EAF1FB; } .pm-mock .pfg--photowedge .pfg-photo{ grid-column:1; grid-row:1; min-height:360px; clip-path:polygon(0 0, 100% 0, 78% 100%, 0 100%); } .pm-mock .pfg--photowedge .pfg-items{ grid-column:2; grid-row:1; display:block !important; padding:34px 8px 36px 30px; } .pm-mock .pfg--photowedge .pfg-i{ padding:14px 0; gap:3px; border-bottom:1px solid rgba(27,34,76,.14); } .pm-mock .pfg--photowedge .pfg-i:last-child{ border-bottom:0; } .pm-mock .pfg--photowedge .pfg-k{ margin-bottom:2px !important; font-size:11.5px !important; letter-spacing:.14em !important; } .pm-mock .pfg--photowedge .pfg-t{ font-size:17.5px !important; font-weight:900 !important; } .pm-mock .pfg--photowedge .pfg-l{ margin-top:6px !important; gap:4px; } .pm-mock .pfg--photowedge .pfg-l li{ padding-left:0 !important; font-size:15.5px !important; line-height:1.8 !important; } .pm-mock .pfg--photowedge .pfg-l li::before{ display:none !important; } /* 斜めに切った写真の上の見出しは、切り口の内側に収める（右下がはみ出して 文末が切れていた）。v2.26.0 */ .pm-mock .pfg--photowedge .pfg-over{ right:27% !important; bottom:30px !important; font-size:18.5px !important; } @media (max-width:860px){ .pm-mock .pfg--photowedge .pfg-row{ grid-template-columns:minmax(0,1fr); } .pm-mock .pfg--photowedge .pfg-photo{ grid-column:1; grid-row:1; min-height:0; height:210px; clip-path:polygon(0 0, 100% 0, 100% 86%, 0 100%); } .pm-mock .pfg--photowedge .pfg-items{ grid-column:1; grid-row:2; padding:16px 18px 20px; } .pm-mock .pfg .pfg-over{ left:18px; right:18px; bottom:32px; font-size:16.5px; } .pm-mock .pfg--photowedge .pfg-over{ right:18px !important; bottom:26px !important; font-size:16.5px !important; } } /* ===================================================================== 画面が狭いとき（〜640px） ===================================================================== */ @media (max-width:640px){ .pm-mock .pfg--stage .pfg-items, .pm-mock .pfg--quadbar .pfg-items, .pm-mock .pfg--lift .pfg-items, .pm-mock .pfg--col3 .pfg-items, .pm-mock .pfg--quad .pfg-items, .pm-mock .pfg--quadpin .pfg-items, .pm-mock .pfg--quadaxis .pfg-items, .pm-mock .pfg--triad .pfg-items, .pm-mock .pfg--ring .pfg-items, .pm-mock .pfg--kpi .pfg-items{ grid-template-columns:minmax(0,1fr) !important; } .pm-mock .pfg--quad .pfg-i:nth-child(odd){ border-right:0; } .pm-mock .pfg--quad .pfg-i:not(:last-child){ border-bottom:1px solid var(--f-line); } .pm-mock .pfg--kpi .pfg-i + .pfg-i{ border-left:0; border-top:1px solid var(--f-line); } .pm-mock .pfg--lift .pfg-i:nth-child(2){ padding:24px 22px; } /* 山形・蛇行・タイムラインは、狭いと読めないので縦に積み替える */ .pm-mock .pfg--flowchev .pfg-i, .pm-mock .pfg--flowchev .pfg-i:first-child, .pm-mock .pfg--flowchev .pfg-i:last-child{ flex:1 1 100%; clip-path:none; padding:14px 18px; border-left:3px solid var(--f-sky); } .pm-mock .pfg--flowsnake .pfg-items{ grid-template-columns:minmax(0,1fr) !important; } .pm-mock .pfg--flowsnake .pfg-i::after{ content:"↓" !important; display:flex !important; right:auto; left:50%; top:auto; bottom:-11px; transform:translateX(-50%); } .pm-mock .pfg--flowsnake .pfg-i:last-child::after{ display:none !important; } .pm-mock .pfg--flowline .pfg-items{ padding-top:0; } .pm-mock .pfg--flowline .pfg-items::before{ left:7px; right:auto; top:10px; bottom:10px; width:2px; height:auto; } .pm-mock .pfg--flowline .pfg-i{ align-items:flex-start; text-align:left; padding:0 0 16px 30px; } .pm-mock .pfg--flowline .pfg-i::before{ top:2px; left:0; transform:none; } .pm-mock .pfg--flowline .pfg-k{ align-self:flex-start; } .pm-mock .pfg--flowline .pfg-l{ align-items:flex-start; } .pm-mock .pfg--flowline .pfg-l li{ text-align:left; } .pm-mock .pfg--flowstep .pfg-i{ margin-left:0 !important; } .pm-mock .pfg--vsmid .pfg-items{ grid-template-columns:minmax(0,1fr) !important; } .pm-mock .pfg--vsmid .pfg-i:nth-child(1){ padding:22px 22px 34px; } .pm-mock .pfg--vsmid .pfg-i:nth-child(2){ padding:34px 22px 22px; } .pm-mock .pfg--beaf .pfg-items{ grid-template-columns:minmax(0,1fr) !important; } .pm-mock .pfg--beaf .pfg-i:nth-child(2){ grid-column:1; } .pm-mock .pfg--beaf .pfg-items::before{ content:"↓"; grid-column:1; padding:6px 0; } .pm-mock .pfg--quadlap .pfg-i{ flex:1 1 100%; margin-left:0 !important; margin-top:0 !important; padding-left:22px; box-shadow:none; } .pm-mock .pfg--quadlap .pfg-i + .pfg-i{ margin-top:-1px; } .pm-mock .pfg--branch2 .pfg-i:nth-child(n+2){ display:flex; width:100%; margin-right:0 !important; } .pm-mock .pfg--pyramid .pfg-i{ width:calc(54% + (var(--i) - 1) * 14%); padding:13px 18px; } .pm-mock .pfg--funnel .pfg-i{ width:calc(100% - (var(--i) - 1) * 9%); padding:13px 20px; } .pm-mock .pfg--venn .pfg-items{ height:260px; } .pm-mock .pfg--venn .pfg-i{ width:168px; height:168px; padding:0 24px; } .pm-mock .pfg--pairs .pfg-i{ grid-template-columns:minmax(0,1fr); } .pm-mock .pfg--pairs .pfg-l{ grid-column:1; grid-row:auto; } .pm-mock .pfg--pairs .pfg-t{ margin-bottom:10px !important; } .pm-mock .pfg--grid2 .pfg-i{ grid-template-columns:minmax(0,1fr); } .pm-mock .pfg--grid2 .pfg-l{ grid-column:1; grid-row:auto; margin-top:9px !important; } .pm-mock .pfg--bars .pfg-i{ grid-template-columns:minmax(0,1fr); } .pm-mock .pfg--bars .pfg-i::after{ grid-column:1; grid-row:3; margin-top:7px; } .pm-mock .pfg--bars .pfg-c{ grid-column:1; grid-row:4; } } /* ===================================================================== 写真③：顔のある写真を「切り抜いて」使う 顔つきの無料素材が安く見えるのは、無料だからではなく 「全員が正面を向いた決めポーズ」が構図ごとそのまま載っているから。 寄って切れば、そのポーズごと画面の外に出る。 切り方は2通り。 (a) トリミング … 画枠を寄せて顔を外す／小さくする（pfg-photo--tight ほか） (b) 背景の切り抜き … 人物だけを抜いて面に立たせる（pfg--photocut） ===================================================================== */ /* --- (a) トリミング -------------------------------------------------- --fx / --fy … 残したい場所（写真ごとに指定） --z … 寄りの強さ（1 = 等倍、1.6 くらいで顔が枠外に出る） 例:
-------------------------------------------------------------------- */ .pm-mock .pfg .pfg-photo img{ object-position:var(--fx,50%) var(--fy,50%); transform:scale(var(--z,1)); transform-origin:var(--fx,50%) var(--fy,50%); } /* よく使う切り位置の名前付き（数値指定で上書きできる） */ .pm-mock .pfg .pfg-photo--hands{ --fy:78%; --z:1.60; } /* 手元・書類・キーボード */ .pm-mock .pfg .pfg-photo--desk{ --fy:92%; --z:1.40; } /* 机の上だけ */ .pm-mock .pfg .pfg-photo--over{ --fy:22%; --z:1.30; } /* 肩ごしの画面 */ .pm-mock .pfg .pfg-photo--wide{ --fy:50%; --z:1.00; } /* 寄らずに全体 */ /* 自社で撮った写真は、濃紺で塗りつぶさず軽く整えるだけにする。 （--duo は出自のばらつく無料素材を一つの面に揃えるための処理） */ .pm-mock .pfg .pfg-photo--soft{ position:relative; overflow:hidden; background:var(--f-tint); } .pm-mock .pfg .pfg-photo--soft img{ filter:grayscale(1) contrast(1.06) brightness(1.02); } .pm-mock .pfg .pfg-photo--soft::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg, rgba(27,34,76,.22) 0%, rgba(27,34,76,.06) 60%, rgba(28,147,210,.14) 100%); mix-blend-mode:multiply; } /* 文字を置く側だけ暗くして、顔は暗くしない */ .pm-mock .pfg .pfg-photo--soft.has-over::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:56%; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(27,34,76,.86) 0%, rgba(27,34,76,.40) 52%, rgba(27,34,76,0) 100%); } /* --- (b) 背景を抜いた人物を面に立たせる -------------------------------

…

…
人物は面の下辺で切る。浮かせると途端に貼り付けた絵に見える。 -------------------------------------------------------------------- */ .pm-mock .pfg--photocut .pfg-row{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); align-items:stretch; margin-top:6px; } .pm-mock .pfg--photocut .pfg-cut{ position:relative; grid-column:1; min-height:340px; overflow:hidden; background:var(--f-navy); clip-path:polygon(0 0, 100% 0, 86% 100%, 0 100%); } /* 背後の大きな文字。人物と重ねることで、抜いた輪郭が面に噛み合う */ .pm-mock .pfg--photocut .pfg-cut::before{ content:attr(data-num); position:absolute; z-index:0; left:14px; top:10px; font-family:'Poppins',sans-serif; font-size:clamp(88px,10vw,150px); font-weight:800; line-height:1; color:rgba(255,255,255,.10); } /* 足元を面の下辺で切る */ .pm-mock .pfg--photocut .pfg-cut::after{ content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:34%; pointer-events:none; background:linear-gradient(to top, var(--f-navy) 6%, rgba(27,34,76,0) 100%); } .pm-mock .pfg--photocut .pfg-cut img{ position:absolute; z-index:1; left:var(--px,58%); bottom:0; transform:translateX(-50%); width:auto; height:100%; max-width:none; object-fit:contain; object-position:bottom center; filter:grayscale(1) contrast(1.08) brightness(1.04); } .pm-mock .pfg--photocut .pfg-items{ grid-column:2; display:block !important; padding:6px 0 6px 30px; } .pm-mock .pfg--photocut .pfg-i{ display:block; padding:15px 0 16px; border-bottom:1px solid var(--f-line); background:none; } .pm-mock .pfg--photocut .pfg-i:last-child{ border-bottom:0; } .pm-mock .pfg--photocut .pfg-k{ display:block; font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--f-sky); margin-bottom:5px; } .pm-mock .pfg--photocut .pfg-t{ font-size:17.5px !important; font-weight:900 !important; } .pm-mock .pfg--photocut .pfg-c{ margin-top:4px !important; } .pm-mock .pfg--photocut .pfg-l{ margin-top:6px !important; gap:4px; } .pm-mock .pfg--photocut .pfg-l li{ padding-left:0 !important; font-size:15.5px !important; line-height:1.8 !important; } .pm-mock .pfg--photocut .pfg-l li::before{ display:none !important; } /* --- (c) photoband を「顔を外した帯」として使えるように -------------- */ .pm-mock .pfg--photoband .pfg-photo{ position:relative; } @media (max-width:820px){ .pm-mock .pfg--photocut .pfg-row{ grid-template-columns:minmax(0,1fr); } .pm-mock .pfg--photocut .pfg-cut{ grid-column:1; grid-row:1; min-height:250px; clip-path:polygon(0 0, 100% 0, 100% 92%, 0 100%); } .pm-mock .pfg--photocut .pfg-cut::before{ font-size:76px; } .pm-mock .pfg--photocut .pfg-items{ grid-column:1; grid-row:2; padding:6px 0 4px; } .pm-mock .pfg .pfg-photo--hands{ --z:1.45; } .pm-mock .pfg .pfg-photo--desk{ --z:1.25; } } /* --- photoside を左右入れ替える（.pfg--rev） ------------------------- 同じページで写真を2回以上使うとき、composition を変えるために使う。 */ .pm-mock .pfg--photoside.pfg--rev .pfg-row{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); } .pm-mock .pfg--photoside.pfg--rev .pfg-photo{ grid-column:2; grid-row:1; align-self:stretch; height:290px; min-height:0; } .pm-mock .pfg--photoside.pfg--rev .pfg-items{ grid-column:1; grid-row:1; align-self:center; padding:2px 26px 6px 0; } @media (max-width:820px){ .pm-mock .pfg--photoside.pfg--rev .pfg-row{ grid-template-columns:minmax(0,1fr); } .pm-mock .pfg--photoside.pfg--rev .pfg-photo{ grid-column:1; grid-row:1; } .pm-mock .pfg--photoside.pfg--rev .pfg-items{ grid-column:1; grid-row:2; padding:2px 18px 6px; } } /* ===================================================================== W. wave：S字のプロセス線に沿って、上下交互に置く
… .pfg-i ×4 …
svg
奇数番め＝線の下、偶数番め＝線の上。 線は太さを一定にするため svg の1本のパスで描く（vector-effect で固定）。 節は ① と同じ考え方で、番号を入れた丸にする。 ===================================================================== */ .pm-mock .pfg--wave .pfg-items{ position:relative; margin-top:14px; --axis:150px; /* 線の帯の高さ */ --node:58px; /* 節の直径 */ --ngap:6px; /* 節とカードのすき間 */ gap:0 !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; grid-template-rows:auto var(--axis) auto; } .pm-mock .pfg--wave[data-n="3"] .pfg-items{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } .pm-mock .pfg--wave[data-n="5"] .pfg-items{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; } /* 線。帯の行いっぱいに敷く */ .pm-mock .pfg--wave .pfg-axis{ grid-row:2; grid-column:1 / -1; position:relative; width:100%; height:100%; } .pm-mock .pfg--wave .pfg-axis svg{ display:block; width:100%; height:100%; overflow:visible; } /* カードは2列ぶんの幅を取り、半列ずつずらして並べる（余白を埋めるため） */ .pm-mock .pfg--wave .pfg-i{ position:relative; background:none; border:0; gap:4px; padding:0 26px 0 0; } .pm-mock .pfg--wave .pfg-i:nth-child(odd){ grid-row:3; align-self:start; padding-top:16px; } .pm-mock .pfg--wave .pfg-i:nth-child(even){ grid-row:1; align-self:end; padding-bottom:16px; } .pm-mock .pfg--wave .pfg-i:nth-child(1){ grid-column:1 / 3; } .pm-mock .pfg--wave .pfg-i:nth-child(2){ grid-column:2 / 4; } .pm-mock .pfg--wave .pfg-i:nth-child(3){ grid-column:3 / 5; } .pm-mock .pfg--wave .pfg-i:nth-child(4){ grid-column:4 / 6; } .pm-mock .pfg--wave .pfg-i:nth-child(5){ grid-column:5 / 7; } /* 節：番号を入れた丸。線の頂点に重ねる */ .pm-mock .pfg--wave .pfg-i::before{ content:counter(pfg,decimal-leading-zero); position:absolute; left:50%; z-index:2; transform:translateX(-50%); width:var(--node); height:var(--node); border-radius:50%; display:grid; place-items:center; line-height:1; background:var(--f-white); border:2px solid var(--f-sky); font-family:'Poppins',sans-serif; font-size:19px; font-weight:800; color:var(--f-navy); } .pm-mock .pfg--wave .pfg-i:nth-child(odd)::before{ bottom:calc(100% + var(--ngap)); } .pm-mock .pfg--wave .pfg-i:nth-child(even)::before{ top:calc(100% + var(--ngap)); } .pm-mock .pfg--wave .pfg-i::after{ display:none; } .pm-mock .pfg--wave .pfg-k{ display:block; font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--f-sky); margin-bottom:4px; } .pm-mock .pfg--wave .pfg-t{ font-size:17.5px !important; font-weight:900 !important; line-height:1.5 !important; } .pm-mock .pfg--wave .pfg-c{ margin:2px 0 9px !important; font-size:15px !important; color:var(--f-sub) !important; } .pm-mock .pfg--wave .pfg-l{ gap:7px; margin-top:0 !important; } .pm-mock .pfg--wave .pfg-l li{ padding-left:0 !important; font-size:13.5px !important; line-height:1.8 !important; } .pm-mock .pfg--wave .pfg-l li::before{ display:none !important; } @media (max-width:820px){ .pm-mock .pfg--wave .pfg-items, .pm-mock .pfg--wave[data-n="3"] .pfg-items, .pm-mock .pfg--wave[data-n="5"] .pfg-items{ grid-template-columns:minmax(0,1fr) !important; grid-template-rows:none; gap:0 !important; } .pm-mock .pfg--wave .pfg-axis{ display:none; } .pm-mock .pfg--wave .pfg-i:nth-child(odd), .pm-mock .pfg--wave .pfg-i:nth-child(even){ grid-row:auto; grid-column:1 !important; align-self:auto; padding:6px 0 20px 46px; border-left:2px solid var(--f-sky); } .pm-mock .pfg--wave .pfg-i:nth-child(odd)::before, .pm-mock .pfg--wave .pfg-i:nth-child(even)::before{ top:0; bottom:auto; left:0; transform:translate(-50%,0); width:42px; height:42px; font-size:15px; } } /* pairs の右側で、最後の1項目（当社の対応）だけ罫線で切り離す */ .pm-mock .pfg--pairs .pfg-l li .uc-sep{ display:block; margin:6px 0 9px; border-top:1px solid var(--f-line); } /* ===================================================================== P5 photoalt：項目ごとに実写を持ち、左右を交互に入れ替える
…
…
写真の外側の辺だけを斜めに切り、サイトの図版と同じ角度に合わせる。 ===================================================================== */ .pm-mock .pfg--photoalt .pfg-items{ display:block !important; } .pm-mock .pfg--photoalt .pfg-i{ display:grid !important; grid-template-columns:minmax(0,.80fr) minmax(0,1.20fr); gap:0 34px; align-items:center; padding:26px 0; background:none; border:0; } .pm-mock .pfg--photoalt .pfg-i + .pfg-i{ border-top:1px solid var(--f-line); } .pm-mock .pfg--photoalt .pfg-i:nth-child(even){ grid-template-columns:minmax(0,1.20fr) minmax(0,.80fr); } .pm-mock .pfg--photoalt .pfg-photo{ grid-column:1; grid-row:1; height:236px; clip-path:polygon(0 0, 100% 0, 94% 100%, 0 100%); } .pm-mock .pfg--photoalt .pfg-i:nth-child(even) .pfg-photo{ grid-column:2; clip-path:polygon(6% 0, 100% 0, 100% 100%, 0 100%); } .pm-mock .pfg--photoalt .pfg-tx{ grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:3px; } .pm-mock .pfg--photoalt .pfg-i:nth-child(even) .pfg-tx{ grid-column:1; } .pm-mock .pfg--photoalt .pfg-k{ display:block; font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--f-sky); margin-bottom:3px; } .pm-mock .pfg--photoalt .pfg-t{ font-size:19px !important; font-weight:900 !important; line-height:1.5 !important; } .pm-mock .pfg--photoalt .pfg-c{ margin:3px 0 9px !important; font-size:15.5px !important; } .pm-mock .pfg--photoalt .pfg-l{ gap:4px; margin:0 !important; } .pm-mock .pfg--photoalt .pfg-l li{ padding-left:14px !important; position:relative; font-size:14px !important; line-height:1.8 !important; } .pm-mock .pfg--photoalt .pfg-l li::before{ content:""; position:absolute; left:0; top:.82em; width:6px; height:1px; background:var(--f-sky); } .pm-mock .pfg--photoalt .pfg-ans{ margin:11px 0 0 !important; padding:10px 14px !important; background:var(--f-pale); font-size:14px !important; line-height:1.8 !important; } .pm-mock .pfg--photoalt .pfg-ans b{ color:var(--f-navy); } @media (max-width:820px){ .pm-mock .pfg--photoalt .pfg-i, .pm-mock .pfg--photoalt .pfg-i:nth-child(even){ grid-template-columns:minmax(0,1fr); gap:0; padding:20px 0; } .pm-mock .pfg--photoalt .pfg-photo, .pm-mock .pfg--photoalt .pfg-i:nth-child(even) .pfg-photo{ grid-column:1; grid-row:1; height:168px; margin-bottom:14px; clip-path:polygon(0 0, 100% 0, 100% 94%, 0 100%); } .pm-mock .pfg--photoalt .pfg-tx, .pm-mock .pfg--photoalt .pfg-i:nth-child(even) .pfg-tx{ grid-column:1; grid-row:2; } } /* ===================================================================== V. 3C：説明を「その円のとなり」に置く 線でつながず、位置と色で対応を示す。 円の中に番号を入れ、説明の見出しにも同じ番号を出す。 ===================================================================== */ .pm-mock .hub-body .c3--ring{ display:grid !important; grid-template-columns:minmax(0,390px) minmax(280px,400px) minmax(0,390px) !important; grid-template-rows:auto minmax(190px,auto) minmax(190px,auto) auto; justify-content:center; gap:20px 22px !important; align-items:start; margin-top:26px !important; } .pm-mock .hub-body .c3--ring > .c3-venn{ grid-column:2; grid-row:2 / span 2; align-self:center; max-width:none !important; margin:0 !important; } /* 円のなかに番号を出す */ .pm-mock .hub-body .c3--ring .c3-c::after{ font-family:'Poppins',sans-serif; font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--sky,#1C93D2); margin-top:4px; } .pm-mock .hub-body .c3--ring .c3-c--cus::after{ content:"01"; } .pm-mock .hub-body .c3--ring .c3-c--cmp::after{ content:"02"; } .pm-mock .hub-body .c3--ring .c3-c--cpy::after{ content:"03"; } /* figure を透かして、3つの説明を直接グリッドに置く */ .pm-mock .hub-body .c3--ring > .c3-body, .pm-mock .hub-body .c3--ring .pfg--vennrow, .pm-mock .hub-body .c3--ring .pfg--vennrow > .pfg-items{ display:contents !important; } .pm-mock .hub-body .c3--ring .pfg--vennrow > .pfg-lead{ grid-column:1 / -1; grid-row:1; margin:0 !important; } .pm-mock .hub-body .c3--ring .pfg--vennrow > figcaption{ display:none !important; } .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i{ display:block; border:0; background:none; padding:0; } .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i:nth-child(1){ grid-column:3; grid-row:2; align-self:start; } /* 市場・顧客（上の円のとなり） */ .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i:nth-child(2){ grid-column:3; grid-row:3; align-self:end; } /* 競合（右下の円のとなり） */ .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i:nth-child(3){ grid-column:1; grid-row:2 / span 2; align-self:center; } /* 自社（左下の円のとなり） */ .pm-mock .pfg--vennrow .pfg-k{ display:block; font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--f-sky); margin-bottom:2px; } .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i{ padding-left:16px; border-left:4px solid var(--dot,#D6E7F6); } .pm-mock .pfg--vennrow .pfg-t{ display:block; font-size:18.5px !important; font-weight:900 !important; line-height:1.5 !important; } .pm-mock .pfg--vennrow .pfg-c{ margin:6px 0 8px !important; font-size:15.5px !important; } .pm-mock .pfg--vennrow .pfg-l{ gap:6px; margin:0 !important; } .pm-mock .pfg--vennrow .pfg-l li{ padding-left:0 !important; font-size:14.5px !important; line-height:1.85 !important; } .pm-mock .pfg--vennrow .pfg-l li::before{ display:none !important; } /* 当社の3C分析が違う2点：図の下に、2列で敷く */ .pm-mock .hub-body .c3--ring > .c3-side{ grid-column:1 / -1; grid-row:4; margin-top:10px; } .pm-mock .hub-body .c3--ring > .c3-side > h3{ margin:0 0 10px !important; } .pm-mock .pfg--notes .pfg-items{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .pm-mock .pfg--notes .pfg-i{ display:block; border:0; background:var(--f-pale); padding:18px 22px 20px; } .pm-mock .pfg--notes .pfg-i + .pfg-i{ margin-top:0; } .pm-mock .pfg--notes .pfg-k{ display:inline-block; margin-bottom:7px; padding:3px 9px; background:#1B224C !important; color:#fff !important; font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; line-height:1.6; } .pm-mock .pfg--notes .pfg-t{ display:block; font-size:17px !important; font-weight:900 !important; } .pm-mock .pfg--notes .pfg-c{ margin:5px 0 7px !important; font-size:15.5px !important; } .pm-mock .pfg--notes .pfg-l{ gap:5px; margin:0 !important; } .pm-mock .pfg--notes .pfg-l li{ padding-left:0 !important; font-size:14.5px !important; line-height:1.85 !important; } .pm-mock .pfg--notes .pfg-l li::before{ display:none !important; } @media (max-width:1100px){ .pm-mock .hub-body .c3--ring{ grid-template-columns:minmax(0,1fr) !important; grid-template-rows:none; gap:20px !important; } .pm-mock .hub-body .c3--ring > .c3-venn{ grid-column:1; grid-row:auto; max-width:340px !important; margin:0 auto !important; } .pm-mock .hub-body .c3--ring .pfg--vennrow > .pfg-lead{ grid-column:1; grid-row:auto; } .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i:nth-child(1), .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i:nth-child(2), .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i:nth-child(3){ grid-column:1; grid-row:auto; } .pm-mock .hub-body .c3--ring > .c3-side{ grid-column:1; grid-row:auto; } .pm-mock .pfg--notes .pfg-items{ grid-template-columns:minmax(0,1fr); } } /* ===================================================================== SOLUTION STORY：細い線と余白をやめ、左右を1本の帯にする ===================================================================== */ .pm-mock .hub-body .ss-row{ grid-template-columns:minmax(220px,.46fr) minmax(0,1.54fr) !important; gap:0 !important; align-items:stretch !important; } .pm-mock .hub-body .ss-row + .ss-row{ margin-top:3px; } .pm-mock .hub-body .ss-l{ position:relative; overflow:hidden; padding:20px 22px 22px !important; background:#EAF1FA !important; } .pm-mock .hub-body .ss-l::before, .pm-mock .hub-body .ss-l::after{ display:none !important; } .pm-mock .hub-body .ss-l > .ss-n{ margin-bottom:4px !important; font-size:11.5px !important; letter-spacing:.16em !important; } .pm-mock .hub-body .ss-l > b{ font-size:18px !important; } .pm-mock .hub-body .ss-l > .ss-s{ font-size:14.5px !important; } .pm-mock .hub-body .ss-r{ padding:20px 24px 22px !important; background:#fff !important; border-left:4px solid #1C93D2 !important; } .pm-mock .hub-body .ss-r::before{ display:none !important; } .pm-mock .hub-body .ss-r b{ font-size:17px !important; margin-bottom:6px !important; } .pm-mock .hub-body .ss-r p{ font-size:15px !important; line-height:1.85 !important; } @media (max-width:820px){ .pm-mock .hub-body .ss-row{ grid-template-columns:minmax(0,1fr) !important; } .pm-mock .hub-body .ss-r{ border-left:0 !important; border-top:4px solid #1C93D2 !important; } } /* =========================================================================== 英語ラベル（.pfg-k）を外した項目の行送り（v2.12.0） hair / zebra / sidebar / ribbon は「1行目＝キー、2行目＝見出し」の設計なので、 キーが無い項目をそのままにすると1行目が空いたまま残り、見出しの上に 無駄な余白ができる。キーが無いときは見出しを1行目へ繰り上げる。 =========================================================================== */ .pm-mock :is(.pfg--hair,.pfg--zebra,.pfg--sidebar,.pfg--ribbon) .pfg-i:not(:has(.pfg-k)) .pfg-t{ grid-row:1 !important; } .pm-mock :is(.pfg--hair,.pfg--zebra,.pfg--sidebar,.pfg--ribbon) .pfg-i:not(:has(.pfg-k)) .pfg-l{ grid-row:1 !important; } /* sidebar は上の余白をキー側が持っていたので、見出しに付け替える */ .pm-mock .pfg--sidebar .pfg-i:not(:has(.pfg-k)) .pfg-t{ padding-top:14px !important; } /* ========================================================================= M2 3C：図解と「当社の3C分析が違う2点」を左右に並べて、縦幅を抑える（v2.35.0） 図解まわりは .c3-main でくくってある（conv/content.py） ========================================================================= */ @media (min-width:1101px){ .pm-mock .hub-body .c3--ring{ display:grid !important; grid-template-columns:minmax(0,1144px) minmax(0,1fr) !important; grid-template-rows:auto !important; justify-content:stretch !important; align-items:start !important; gap:0 140px !important; } /* 図解のかたまりは左端から始めて、右端が紙面の中央にくるまでに収める */ .pm-mock .hub-body .c3--ring > .c3-main{ display:grid; grid-template-columns:315px 400px 405px; grid-template-rows:auto minmax(130px,auto) minmax(130px,auto); gap:93px 12px; justify-content:start; align-items:start; } .pm-mock .hub-body .c3--ring .c3-main > .c3-venn{ grid-column:2; grid-row:2 / span 2; align-self:center; max-width:none !important; margin:0 !important; } .pm-mock .hub-body .c3--ring .c3-main > .c3-body{ display:contents !important; } .pm-mock .hub-body .c3--ring .pfg--vennrow > .pfg-lead{ grid-column:1 / -1 !important; grid-row:1 !important; } /* 図解のかたまりと上下の辺をそろえ、余った分は面の中の余白にする */ .pm-mock .hub-body .c3--ring > .c3-side{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; margin-top:0 !important; padding-left:0; border-left:0; } .pm-mock .hub-body .c3--ring > .c3-side > figure{ margin-bottom:0 !important; } /* 右の2点は横に2枚。図解のかたまりと下辺がそろうよう、面を縦に伸ばす */ .pm-mock .hub-body .c3--ring > .c3-side .pfg--lstab .pfg-items{ grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto auto; gap:16px !important; align-items:start; } /* 面の中の余白は詰めて、図解のかたまりと背丈をそろえる */ .pm-mock .hub-body .c3--ring > .c3-side > figure{ margin-top:14px !important; } .pm-mock .hub-body .c3--ring > .c3-side .pfg--lstab .pfg-i{ padding:14px 18px 16px !important; } .pm-mock .hub-body .c3--ring > .c3-side .pfg--lstab .pfg-t{ margin-bottom:6px !important; } .pm-mock .hub-body .c3--ring > .c3-side .pfg--lstab .pfg-l{ gap:4px !important; } .pm-mock .hub-body .c3--ring > .c3-side .pfg--lstab > figcaption{ display:none !important; } } /* ============================================================= * v1.85.0 図版（.pfg-*）の文字サイズ統一 * ------------------------------------------------------------- * 図版はタイプごとに font-size を !important で個別指定していて、 * タイトルだけで 15〜21px の13種類あった。同じ「図の中の見出し」 * なのに図によって大きさが違うため、ページを通して見たときに * ちぐはぐに見える。 * * ベース（lp-figures.css 冒頭）はもともと * .pfg-t 18px / .pfg-l li 16px * と、サイト全体の基準（本文18px・ボックス内16px）に合っている。 * タイプ別の上書きだけがズレていたので、そこを基準に戻す。 * * 図版タイトル .pfg-t → 18px * 図版のリスト .pfg-l li → 16px * 図版の説明 .pfg-c → 14px * 図版のラベル .pfg-k → 14px * * 数値の強調（22px以上）は装飾なので触っていない。 * 戻すときはこのブロックごと消せばよい。 * ============================================================= */ /* --- tag --- */ .pm-mock .pfg--stage .pfg-k{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--stage .pfg-t{font-size:18px !important} /* --- list --- */ .pm-mock .pfg--stage .pfg-l li{font-size:16px !important} /* --- title --- */ .pm-mock .pfg--stage5[data-n="6"] .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--stage5[data-n="6"] .pfg-c{font-size:14px !important} /* --- list --- */ .pm-mock .pfg--stage5[data-n="6"] .pfg-l li{font-size:16px !important} /* --- other --- */ .pm-mock .pfg--stage5 .pfg-i::before{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--stage5 .pfg-t{font-size:18px !important} /* --- tag --- */ .pm-mock .pfg--stage5 .pfg-k{font-size:14px !important} /* --- caption --- */ .pm-mock .pfg--stage5 .pfg-c{font-size:14px !important} /* --- list --- */ .pm-mock .pfg--stage5 .pfg-l li{font-size:16px !important} /* --- title --- */ .pm-mock .pfg--flowchev .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--flowchev .pfg-c{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--flowline .pfg-t{font-size:18px !important} /* --- other --- */ .pm-mock .pfg--flowrail .pfg-i::before{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--flowrail .pfg-t{font-size:18px !important} .pm-mock .pfg--flowstep .pfg-t{font-size:18px !important} /* --- other --- */ .pm-mock .pfg--flowsnake .pfg-i::after{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--flowsnake .pfg-t{font-size:18px !important} .pm-mock .pfg--quadbar .pfg-t{font-size:18px !important} /* --- other --- */ .pm-mock .pfg--quadaxis .pfg-items::before, .pm-mock .pfg--quadaxis .pfg-items::after{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--quadaxis .pfg-t{font-size:18px !important} .pm-mock .pfg--quadlap .pfg-t{font-size:18px !important} /* --- other --- */ .pm-mock .pfg--vsmid .pfg-items::before{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--vsmid .pfg-t{font-size:18px !important} .pm-mock .pfg--updown .pfg-t{font-size:18px !important} .pm-mock .pfg--ratio .pfg-t{font-size:18px !important} .pm-mock .pfg--triad .pfg-i:first-child .pfg-t{font-size:18px !important} .pm-mock .pfg--triad .pfg-t{font-size:18px !important} .pm-mock .pfg--venn .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--venn .pfg-c{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--col3 .pfg-t{font-size:18px !important} .pm-mock .pfg--lift .pfg-i:nth-child(2) .pfg-t{font-size:18px !important} .pm-mock .pfg--lift .pfg-t{font-size:18px !important} .pm-mock .pfg--pyramid .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--pyramid .pfg-c{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--layers .pfg-t{font-size:18px !important} .pm-mock .pfg--funnel .pfg-t{font-size:18px !important} .pm-mock .pfg--branch2 .pfg-t{font-size:18px !important} /* --- tag --- */ .pm-mock .pfg--kpi .pfg-k em{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--kpi .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--kpi .pfg-c{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--bars .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--bars .pfg-c{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--ring .pfg-t{font-size:18px !important} .pm-mock .pfg--grid2 .pfg-t{font-size:18px !important} /* --- list --- */ .pm-mock .pfg--grid2 .pfg-l li{font-size:16px !important} /* --- title --- */ .pm-mock .pfg--pairs .pfg-t{font-size:18px !important} .pm-mock .pfg--checks .pfg-t{font-size:18px !important} /* --- list --- */ .pm-mock .pfg .pfg-l li > b:first-child{font-size:16px !important} /* --- title --- */ .pm-mock .pfg--deflist .pfg-t{font-size:18px !important} /* --- list --- */ .pm-mock .pfg--deflist .pfg-l li{font-size:16px !important} /* --- title --- */ .pm-mock .pfg--cols .pfg-t{font-size:18px !important} /* --- list --- */ .pm-mock .pfg--cols .pfg-l li{font-size:16px !important} .pm-mock .pfg--cols .pfg-l li b{font-size:16px !important} /* --- tag --- */ .pm-mock .pfg--diag .pfg-k{font-size:14px !important} /* --- caption --- */ .pm-mock .pfg--diag .pfg-c{font-size:14px !important} /* --- list --- */ .pm-mock .pfg--diag .pfg-l li{font-size:16px !important} /* --- tag --- */ .pm-mock .pfg--wedge .pfg-k{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--wedge .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--wedge .pfg-c{font-size:14px !important} /* --- list --- */ .pm-mock .pfg--wedge .pfg-l li{font-size:16px !important} /* --- tag --- */ .pm-mock .pfg--diamond .pfg-k{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--diamond .pfg-t{font-size:18px !important} /* --- list --- */ .pm-mock .pfg--diamond .pfg-l li{font-size:16px !important} /* --- caption --- */ .pm-mock .pfg .pfg-cap{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--photoside .pfg-t{font-size:18px !important} .pm-mock .pfg--photoband .pfg-t{font-size:18px !important} .pm-mock .pfg--photolead .pfg-t{font-size:18px !important} /* --- other --- */ .pm-mock .pfg .pfg-over small{font-size:14px !important} /* --- tag --- */ .pm-mock .pfg--photowedge .pfg-k{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--photowedge .pfg-t{font-size:18px !important} /* --- list --- */ .pm-mock .pfg--photowedge .pfg-l li{font-size:16px !important} /* --- tag --- */ .pm-mock .pfg--photocut .pfg-k{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--photocut .pfg-t{font-size:18px !important} /* --- list --- */ .pm-mock .pfg--photocut .pfg-l li{font-size:16px !important} /* --- tag --- */ .pm-mock .pfg--wave .pfg-k{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--wave .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--wave .pfg-c{font-size:14px !important} /* --- list --- */ .pm-mock .pfg--wave .pfg-l li{font-size:16px !important} /* --- tag --- */ .pm-mock .pfg--photoalt .pfg-k{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--photoalt .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--photoalt .pfg-c{font-size:14px !important} /* --- list --- */ .pm-mock .pfg--photoalt .pfg-l li{font-size:16px !important} /* --- body --- */ .pm-mock .hub-body .c3--ring .c3-c::after{font-size:16px !important} /* --- tag --- */ .pm-mock .pfg--vennrow .pfg-k{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--vennrow .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--vennrow .pfg-c{font-size:14px !important} /* --- list --- */ .pm-mock .pfg--vennrow .pfg-l li{font-size:16px !important} /* --- tag --- */ .pm-mock .pfg--notes .pfg-k{font-size:14px !important} /* --- title --- */ .pm-mock .pfg--notes .pfg-t{font-size:18px !important} /* --- caption --- */ .pm-mock .pfg--notes .pfg-c{font-size:14px !important} /* --- list --- */ .pm-mock .pfg--notes .pfg-l li{font-size:16px !important} /* --- body --- */ .pm-mock .hub-body .ss-l > .ss-n{font-size:16px !important} .pm-mock .hub-body .ss-l > b{font-size:16px !important} .pm-mock .hub-body .ss-l > .ss-s{font-size:16px !important} .pm-mock .hub-body .ss-r b{font-size:16px !important} .pm-mock .hub-body .ss-r p{font-size:16px !important} /* ------------------------------------------------------------- * ベン図（.pfg--venn）：文字を大きくしたぶん、円を広げる * 円 210px → 260px、器 520×300 → 640×370（同じ比率）。 * 3つの円の重なり方は比率で決まるので、見た目の関係は変わらない。 * 本文側の文章は記事ごとに違うため、器を広げて対応している。 * ------------------------------------------------------------- */ .pm-mock .pfg--venn .pfg-items{ height:370px; max-width:640px; } .pm-mock .pfg--venn .pfg-i{ width:260px; height:260px; padding:0 42px; } .pm-mock .pfg--venn .pfg-i:nth-child(1){ padding-bottom:96px; } .pm-mock .pfg--venn .pfg-i:nth-child(2){ padding:76px 76px 0 34px; } .pm-mock .pfg--venn .pfg-i:nth-child(3){ padding:76px 34px 0 76px; } @media (max-width:640px){ .pm-mock .pfg--venn .pfg-items{ height:300px; max-width:100%; } .pm-mock .pfg--venn .pfg-i{ width:210px; height:210px; padding:0 30px; } .pm-mock .pfg--venn .pfg-i:nth-child(1){ padding-bottom:78px; } .pm-mock .pfg--venn .pfg-i:nth-child(2){ padding:62px 62px 0 20px; } .pm-mock .pfg--venn .pfg-i:nth-child(3){ padding:62px 20px 0 62px; } .pm-mock .pfg--venn .pfg-t{ font-size:16px !important; } .pm-mock .pfg--venn .pfg-c{ font-size:13px !important; } } /* ============================================================= * v1.87.2 3C：左は据え置き、右を紙面の端まで伸ばす * ------------------------------------------------------------- * v2.35.0 の横並びは * 左（図解）= minmax(0,1144px) ／ 右（違う2点）= 1fr * で、文章の列が 315px に固定されていた。 * * 左（図解のかたまり）を 1400px まで使えるようにして * 文章の列を 472px に広げ、右はそこから紙面の端まで。 * 全体に max-width は掛けない（左右に余白を作らない）。 * 狭いときのために、右は 340px を下限にしてある。 * * 横並びにする条件（1101px 以上）は v2.35.0 のまま変えない。 * ============================================================= */ @media (min-width:1101px){ .pm-mock .hub-body .c3--ring{ grid-template-columns:minmax(0,1400px) minmax(340px,1fr) !important; gap:0 72px !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; justify-content:stretch !important; } .pm-mock .hub-body .c3--ring > .c3-main{ grid-template-columns:minmax(0,1fr) 400px minmax(0,1fr) !important; gap:93px 28px !important; justify-content:stretch !important; } } /* 右が広くなりすぎると1行が長くなるので、2枚を横に並べる */ @media (min-width:2200px){ .pm-mock .hub-body .c3--ring > .c3-side .pfg--lstab .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }