/* ============================================ pococo.ai — shared sub-page shell Extracted 2026-07-18 from consulting.html / company.html, which had each grown their own copy of these rules. Sub-pages (consulting, games, labs, company) are static, self-contained documents: site tokens + this shell, no scroll-engine JS. The landing page keeps its own engine. Load order: tokens.css → base.css → v4-refined.css → page.css ============================================ */ /* ---- shell ---- */ .pg { max-width: var(--container, 900px); margin: 0 auto; /* Top padding clears the fixed site header (now shared on every page). */ padding: 78px var(--sp-6, 1.5rem) 0; } .pg--narrow { max-width: var(--container-narrow, 760px); } /* ---- nav ---- */ .pg-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4, 1rem); padding: var(--sp-4, 1rem) 0; border-bottom: 1px solid var(--hairline, #e5e5e5); flex-wrap: wrap; } .pg-nav a.brand { font-family: var(--font-logo, var(--font-display, sans-serif)); font-size: 1.2rem; color: var(--text-main, #111); text-decoration: none; } /* --primary is remapped per section by [data-section] in tokens.css, so a sub-page picks up its accent from . */ .pg-nav a.brand .dot { color: var(--primary, #3a6); } .pg-nav .lnk { color: var(--text-muted, #555); text-decoration: none; margin-left: var(--sp-4, 1rem); font-size: .92rem; } .pg-nav .lnk:hover { color: var(--text-main, #111); } .pg-nav .lnk[aria-current="page"] { color: var(--text-main, #111); } @media (max-width: 560px) { .pg-nav .lnk { margin-left: 0; margin-right: var(--sp-3, .75rem); } } /* ---- hero ---- */ .hero { padding: var(--sp-16, 4rem) 0 var(--sp-12, 3rem); } .kicker { font-family: var(--font-mono, monospace); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary, #888); /* accent, matches the landing page (#16) */ margin: 0 0 var(--sp-3, .75rem); } .pg h1 { font-family: var(--font-display, Georgia, serif); font-weight: 300; /* match the landing page's display weight (#16) */ font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 var(--sp-3, .75rem); color: var(--text-main, #111); text-wrap: balance; } /* Accent-coloured emphasis in headings — the landing page's signature move, now carried onto every sub-page so they aren't plain black-on-white (#16). */ .pg h1 em, .pg h2 em { font-style: italic; font-weight: 400; color: var(--primary, #111); } .hero .jp { display: block; font-family: var(--font-jp-sans, sans-serif); font-size: 1.1rem; color: var(--text-muted, #666); margin-top: var(--sp-3, .75rem); font-weight: 400; } .lede { font-size: 1.15rem; color: var(--text-muted, #555); max-width: 46ch; } /* ---- blocks ---- */ .pg section.block { padding: var(--sp-12, 3rem) 0; border-top: 1px solid var(--hairline, #e5e5e5); } .pg h2 { font-family: var(--font-display, Georgia, serif); font-weight: 300; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.01em; margin: 0 0 var(--sp-2, .5rem); color: var(--text-main, #111); } /* h3 had NO rule at all. Not a lighter treatment than h1 and h2 - no rule: no family, no size, no weight, no margin. So it rendered at the browser defaults, which is Sora at 1.17em and BOLD, dropped into a hierarchy whose h1 and h2 are Literata at 300. Nine subheads across /consulting/, /training/, /labs/ and /games/ shipped that way. The Japanese side had the sharper version of the same bug: html[lang="ja"] .pg h3 takes the Mincho, so the browser default of bold asked Shippori for 700 and pulled in a 600 weight - 122 files and 5.01 MB - that no rule requested and nobody had chosen. That is fixed in v4-refined.css; this is the English half of the same omission. Sized just under h2's floor so the three levels read as three levels, and set at 400 rather than 300: below about 1.4rem Literata's 300 goes thin enough to look like body copy that lost its way. */ .pg h3 { font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.3rem); letter-spacing: -0.005em; margin: 0 0 var(--sp-2, .5rem); color: var(--text-main, #111); } .pg h2 + h3 { margin-top: var(--sp-4, 1rem); } /* Prose links: accent colour + tidy underline (never browser blue, #18). */ .pg p a, .pg li a, .co-intro a, .co-note a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .pg p a:hover, .pg li a:hover, .co-intro a:hover, .co-note a:hover { text-decoration: none; } .pg h2 .jp { display: block; font-family: var(--font-jp-sans, sans-serif); font-size: 1rem; color: var(--text-subtle, #999); font-weight: 400; margin-top: 4px; } /* base.css resets all margins to 0, so stacked

ran together with no separation (shipped that way on consulting.html since 2026-06-13). Space them here rather than reintroducing a global margin. */ .pg p { line-height: 1.7; color: var(--text-main, #222); } .pg p + p, .pg h2 + p, .pg h3 + p, .pg p + ul, .pg ul + p { margin-top: var(--sp-4, 1rem); } .pg .pcard p + p, .pg .pillar p + p { margin-top: var(--sp-2, .5rem); } .muted { color: var(--text-muted, #666); } /* ---- pillar grid ---- */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-6, 1.5rem); margin-top: var(--sp-8, 2rem); } .pillar { border: 1px solid var(--hairline, #e5e5e5); border-radius: var(--radius, 12px); padding: var(--sp-6, 1.5rem); background: var(--bg-card, transparent); } .pillar h3 { margin: 0 0 var(--sp-1, .25rem); font-size: 1.05rem; color: var(--text-main, #111); } .pillar .jp { color: var(--text-subtle, #999); font-size: .85rem; } .pillar p { font-size: .95rem; color: var(--text-muted, #555); margin: var(--sp-2, .5rem) 0 0; } .foot-note { margin-top: var(--sp-6, 1.5rem); font-family: var(--font-mono, monospace); font-size: .82rem; color: var(--text-subtle, #888); } /* ---- bilingual data table (会社概要 + 特商法に基づく表記) ---- Shared 2026-07-18; was an inline copy in company.html. Each cell is a Japanese primary line + an English sub-line in . */ .co-table { width: 100%; border-collapse: collapse; font-family: var(--font-jp-sans, inherit); } .co-table th, .co-table td { text-align: left; vertical-align: top; padding: var(--sp-4, 1rem) var(--sp-2, .5rem); border-bottom: 1px solid var(--hairline, #e5e5e5); } .co-table th { width: 34%; color: var(--text-main, #111); font-weight: 600; } .co-table th .en, .co-table td .en { display: block; color: var(--text-subtle, #999); font-size: .8rem; font-weight: 400; margin-top: 2px; } .co-table td { color: var(--text-main, #222); line-height: 1.7; } .co-table td .en { color: var(--text-muted, #666); } .co-table a { color: var(--primary, #3a6); } .co-note { margin-top: var(--sp-8, 2rem); font-size: .83rem; color: var(--text-subtle, #888); line-height: 1.7; } @media (max-width: 560px) { .co-table th, .co-table td { display: block; width: 100%; } .co-table th { border-bottom: none; padding-bottom: 0; } .co-table td { padding-top: .35rem; } } /* ---- calls to action ---- */ .cta { display: inline-block; margin-top: var(--sp-4, 1rem); padding: .75rem 1.4rem; border-radius: var(--radius-sm, 8px); background: var(--primary, #3a6); color: #fff; text-decoration: none; font-weight: 600; } .cta.ghost { background: var(--bg-card, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--hairline, #ccc)); color: var(--text-main, #111); margin-left: var(--sp-2, .5rem); } .cta.ghost:hover { border-color: var(--primary); color: var(--primary-text); } @media (max-width: 560px) { .cta.ghost { margin-left: 0; } } /* ---- credibility block ---- */ .why p { max-width: 60ch; } .why .founder { border-left: 3px solid var(--primary, #3a6); padding-left: var(--sp-4, 1rem); color: var(--text-muted, #555); font-size: .98rem; margin-top: var(--sp-6, 1.5rem); } /* ---- footer ---- */ footer.pg-foot { border-top: 1px solid var(--hairline, #e5e5e5); margin-top: var(--sp-12, 3rem); padding: var(--sp-8, 2rem) 0; color: var(--text-subtle, #888); font-size: .85rem; display: flex; flex-wrap: wrap; gap: var(--sp-4, 1rem); justify-content: space-between; } footer.pg-foot a { color: var(--text-muted, #666); text-decoration: none; margin-right: var(--sp-4, 1rem); } footer.pg-foot a:hover { color: var(--text-main, #111); } /* ---- legal-links row (privacy / terms / 特商法 / 資金決済法 / 外部送信 / account deletion / support) — sits under the main footer, smaller. ---- */ .pg-foot__legal { width: 100%; order: 3; margin-top: var(--sp-3, .75rem); padding-top: var(--sp-3, .75rem); border-top: 1px solid var(--hairline, #eee); display: flex; flex-wrap: wrap; gap: .35rem 0; font-size: .78rem; } .pg-foot__legal a { color: var(--text-subtle, #888); text-decoration: none; margin-right: var(--sp-3, .75rem); } .pg-foot__legal a:hover { color: var(--text-main, #111); } /* Same row for the landing page's footer4. */ /* Legal strip lives in the footer base row (#5, #6): compact, right-aligned, same muted style as the copyright it sits beside. */ .footer4__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; } .footer4__legal a { color: var(--text-subtle, #888); text-decoration: none; } .footer4__legal a:hover { color: var(--text-main, #111); } /* ---- in-page cards (games / labs sub-pages) ---- */ .pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-6, 1.5rem); margin-top: var(--sp-8, 2rem); /* The art shapes differ per game (2026-08-28: Hachi Hachi is portrait, Chako landscape), so stretching every card to the tallest left the short one with a long empty tail inside its border. Natural heights read as intentional; the stretch read as broken. */ align-items: start; } .pcards .pcard { margin-top: 0; } /* Anchored cards (linked from the landing page) clear the fixed header. */ .pcard { scroll-margin-top: 96px; } .pcard { border: 1px solid var(--hairline, #e5e5e5); border-radius: var(--radius, 12px); background: var(--bg-card, transparent); overflow: hidden; margin-top: var(--sp-8, 2rem); } .pcard__media { position: relative; display: block; width: 100%; border-bottom: 1px solid var(--hairline, #e5e5e5); background: var(--base-elev, #eee); } .pcard__media img { display: block; width: 100%; height: auto; } .pcard__body { padding: var(--sp-6, 1.5rem); } .pcard__body h3 { margin: 0 0 var(--sp-1, .25rem); font-size: 1.15rem; color: var(--text-main, #111); } .pcard__meta { font-family: var(--font-mono, monospace); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle, #888); margin: 0 0 var(--sp-3, .75rem); } .pcard__body p { font-size: .95rem; color: var(--text-muted, #555); margin: 0; } /* Split card — portrait art beside the copy instead of above it (added 2026-08-28 for Matchomino's portrait gameplay shot, which at full column width would stack ~1000px of image on top of the text). The media keeps the screenshot's own proportions and drives the card height; below 720px it stacks like every other pcard. */ @media (min-width: 720px) { .pcard--split { display: flex; align-items: stretch; } .pcard--split .pcard__media { flex: 0 0 42%; aspect-ratio: 1008 / 1220; border-bottom: none; border-right: 1px solid var(--hairline, #e5e5e5); } .pcard--split .pcard__media img { height: 100%; object-fit: cover; } .pcard--split .pcard__body { align-self: center; } } /* Status chip — mirrors the landing page's game/lab status pills. */ .chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono, monospace); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-main, #111); background: var(--bg-card, transparent); border: 1px solid var(--hairline, #ccc); border-radius: 999px; padding: 5px 10px; } .chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary, #888); } .chip--muted { color: var(--text-muted, #666); } .chip--muted::before { background: var(--text-subtle, #999); } /* ============================================ PENDING NOTES The bright-red editorial classes that used to live here were removed on 2026-08-22: they rendered internal editing notes on public pages, two of them on legal documents. Notes to ourselves belong in the brain, never in a stylesheet. What remains is one reader-facing style, for the two game cards whose art has not landed yet. ============================================ */ .note-soon { color: var(--text-muted, #666); font-style: italic; } /* Table captions. Added 2026-08-26 with scope="row" on the label/value tables. WCAG 1.3.1 (Info and Relationships, Level A) wants the pairing exposed, and a caption names what the table covers. Visually hidden, because on all three pages the caption repeats the h1 the reader can already see; a screen reader meets the table on its own and does not have that context. */ .co-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }