/* ===================================================================== HireRoo — 新設ダークページ共通プリミティブ (案A / Claude Design 準拠) /pricing/ /interview/ /assessment/ /press/ で読み込む。 共通 Header/Footer (ダーク) と組み合わせて使う自己完結スタイル。 ===================================================================== */ /* fonts は BaseLayout の で並列読込 (render-blocking チェーン回避) */ /* このCSSを読み込むページ (=新設ダークページ) だけ body をダークに */ body { background: #0A0A0C; } .pg { --pg-pink: #FF2E63; --pg-glow: rgba(255, 46, 99, 0.35); --pg-indigo: #4B51C1; --pg-indigo2: #838DFF; --pg-red: #FF6666; --pg-green: #2DBEA0; font-family: 'Inter', 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; color: #FFFFFF; background: #0A0A0C; min-height: 100vh; position: relative; } .pg h1, .pg h2, .pg h3 { letter-spacing: -0.02em; } .pg a { color: #A9AEFF; text-decoration: none; } .pg-mono { font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; } /* eyebrow / headings */ .pg-eyebrow { font-size: 13px; font-weight:400; letter-spacing: 0.12em; color: var(--pg-pink); } /* buttons */ .pgb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; white-space: nowrap; text-decoration: none; cursor: pointer; border: 0; font-family: inherit; transition: filter .15s ease, background .15s ease, color .15s ease; } /* 詳細度を .pgb.pgb-X (0,2,0) にして .pg a (0,1,1) の色指定に勝たせる */ .pgb.pgb-pink { color: #FFFFFF; font-weight:600; background: var(--pg-pink); box-shadow: 0 2px 10px var(--pg-glow); } .pgb.pgb-pink:hover { filter: brightness(1.12); color: #FFFFFF; } .pgb.pgb-ghost { color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.23); } .pgb.pgb-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; } .pgb.pgb-indigo { color: #FFFFFF; font-weight:600; background: var(--pg-indigo); box-shadow: 0 2px 10px rgba(75, 81, 193, 0.4); } .pgb.pgb-indigo:hover { filter: brightness(1.15); color: #FFFFFF; } /* interactive helpers */ .pg-hoverwhite { transition: color .15s ease; } .pg-hoverwhite:hover { color: #FFFFFF !important; } .pg-rowhover { transition: background .15s ease; } .pg-rowhover:hover { background: rgba(255, 255, 255, 0.03); } .pg-cardhover { transition: border-color .15s ease, transform .15s ease; } .pg-cardhover:hover { border-color: #4e4d4d; } /* layout helpers */ .pg-wrap { max-width: 1040px; margin: 0 auto; } .pg-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; } .pg-usage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pg-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .pg-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .pg-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pg-table { min-width: 760px; } .pg-register { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .pg-how { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; } .pg-how.rev { grid-template-columns: 1.05fr 1fr; } @media (max-width: 900px) { .pg-plans { grid-template-columns: repeat(2, 1fr); } .pg-2col, .pg-3col, .pg-4col, .pg-register, .pg-how, .pg-how.rev { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pg-plans, .pg-usage { grid-template-columns: 1fr; } } /* logo marquee */ @keyframes pg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .pg-logoband { position: relative; width: 100%; background: #FFFFFF; border-radius: 10px; padding: 16px 0; overflow: hidden; } .pg-logotrack { display: flex; align-items: center; width: max-content; animation: pg-marquee 40s linear infinite; } .pg-logotrack .it { width: 144px; height: 38px; margin: 0 13px; flex: none; display: flex; align-items: center; justify-content: center; } .pg-logotrack img { max-width: 120px; max-height: 32px; object-fit: contain; display: block; } .pg-logoband::before, .pg-logoband::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 1; } .pg-logoband::before { left: 0; background: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255, 0)); } .pg-logoband::after { right: 0; background: linear-gradient(270deg, #FFFFFF, rgba(255, 255, 255, 0)); }