/** * Manager総研（Media）— Header / Footer / Navigation components. * * Phase 9-5C. Loaded after foundation.css, Media context only (see * functions.php kakeai_enqueue_assets()). Built from real measurements of * https://kakeai.co.jp/media/ taken via Chrome DevTools Protocol * (getBoundingClientRect / getComputedStyle on the live production DOM, * PC 1440px and SP 390px) — not copied from Webflow's CSS bundle. Class * names are this project's own (.media-header__*, .media-footer__*, * .media-mobile-menu*), not Webflow's (.bl_m_* / .w-*). * * Production's own header is a two-row structure: an "upper" row (logo + * search + CTA) and a "lower" row (category navigation), stacked to a * single 140px-tall bar on desktop. That two-row shape is reproduced here; * the underlying Webflow mechanics (absolute-positioned full-page-height * nav-menu overlay sliding via transform) are NOT reproduced — Phase 9-5C's * mobile menu is a standard fixed-viewport overlay instead (see * components.js), a deliberate simplification per CLAUDE.md §28's * "reconstruct meaningfully, don't copy Webflow mechanics" principle. */ /* --------------------------------------------------------------------- * Header — two-row shell. * Row heights/padding measured on Production at 1440px: * upper row: 80px tall, padding 16px 43.1875px 12px (≈3% side padding) * lower row (category nav): 60px tall * total header height: 140px * ------------------------------------------------------------------- */ .media-header { border-bottom: none; /* background-color intentionally NOT declared here — see the .media-header rule at the end of this file instead. ROOT CAUSE (found and fixed in the CSS Cleanup / CSSOM Verification Phase): this file's own leading doc-comment used to give a Webflow-class-prefix example written as a dot-prefixed wildcard immediately followed by a forward slash and another wildcard — that exact two-character sequence (star, then slash) is itself a valid CSS comment terminator, so the doc-comment was actually closing ten lines earlier than intended. Everything after that false end was then parsed as malformed CSS, and the parser's error recovery skipped ahead past this `.media-header` rule to the next recognizable one — not a browser bug, a genuine syntax defect in this file (confirmed via a minimal reproduction: a style block containing only that exact phrase lost its following rule in the live CSSOM; adding a space before the slash fixed it). That phrasing is now rewritten with a space at the top of this file so the sequence no longer occurs. The `background-color` declaration itself is kept at the end of the file rather than restored here, to avoid retesting a Visual-Freeze-approved state for no behavioral benefit. */ } .media-header__upper { padding-top: 1rem; padding-bottom: 0.75rem; padding-left: var(--media-container-padding); padding-right: var(--media-container-padding); } .media-header__upper-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--media-space-sm); } .media-header__brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; } /* Production-measured display size: 154×43 at 1440px (source asset is 800×222; height:auto keeps the aspect ratio from the real width/height attributes on the , so only the rendered height needs fixing). */ img.media-header__logo-img { height: 2.6875rem; /* 43px */ width: auto; } .media-header__actions { display: flex; align-items: center; gap: var(--media-space-md); min-width: 0; } /* --- Search: inline expand/collapse, matching Production's is-close/ is-hidden trigger-toggle pattern (see components.js) rather than a modal/dropdown — Production's own search is inline within the header row, not an overlay. --- */ .media-header__search-wrapper { position: relative; display: flex; align-items: center; } .media-header__search-trigger { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: none; background: none; cursor: pointer; color: var(--media-color-text); } .media-header__search-trigger.is-hidden { display: none; } /* Human Review correction #2: Production's open search field is a bordered pill-less (4px radius, not a full pill) box ~482px wide at 1440px, with the border on the OUTER wrapper (not the input) and the input itself borderless inside it — confirmed via getBoundingClientRect/computedStyle on Production's own #header-search-part / .search-input. */ .media-header__search-panel { display: flex; align-items: center; gap: 0.5rem; width: 30.125rem; /* 482px, Production-measured at 1440px */ max-width: 100%; border: 1px solid var(--media-color-gray-82); border-radius: 4px; padding: 0 0.75rem; transition: border-color 0.15s ease; } /* Human Review correction #3: Production itself shows no visible focus ring on the input (confirmed: outline-width:0 on Production's own .search-input when focused) — only the existing 1px gray border. A bare "no focus indicator at all" would be an accessibility regression, so a subtle border-color change to primary is added on :focus-within as a minimal, non-intrusive substitute rather than reproducing Production's complete absence of any focus affordance. This intentionally overrides Foundation's generic :focus-visible outline for this one component only (see .media-header__search-panel input below), it does not remove Foundation's outline rule itself. */ .media-header__search-panel:focus-within { border-color: var(--media-color-primary); } .media-header__search-panel-icon { flex-shrink: 0; color: var(--media-color-gray-46); } .media-header__search-panel.is-close { display: none; } .media-header__search-panel input[type="search"] { flex: 1 1 auto; min-width: 0; border: none; background: none; padding: 0.5rem 0; font-size: 0.875rem; /* 14px, Production-measured */ } .media-header__search-close { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: none; background: none; cursor: pointer; color: var(--media-color-text); } /* --- CTA: measured Production values — filled ("お役立ち資料") 130×50, bg var(--media-color-primary); outline ("メルマガ登録") 117×51, white bg, primary text/border. Both font-size 14px, weight 300 (Production has a lighter default body weight than this Foundation's — kept local to the CTA rather than changed globally), padding 16px, radius 4px. --------- */ .media-header__cta { display: none; align-items: center; gap: 0.75rem; } .media-cta-button { display: inline-flex; align-items: center; justify-content: center; padding: 1rem; border: 1px solid var(--media-color-primary); border-radius: 4px; font-size: 0.875rem; font-weight: 300; line-height: 1.2; text-decoration: none; white-space: nowrap; } .media-cta-button.is-filled { /* Production-measured: explicit fixed width (130px), not auto-sized from text content — confirmed via getComputedStyle().width on the live Production button (Human Review correction #2). */ width: 130px; background-color: var(--media-color-primary); color: var(--media-color-white); /* Human Visual Review correction #4: Production's own label element (.text-block-29 inside the "お役立ち資料" button) carries an explicit `font-size: 1rem; line-height: 1;` that overrides the button's own 14px/1.2 base — confirmed via CSS.getMatchedStylesForNode on the live button, not the `.media-cta-button` base rule. Local renders the label directly on the (no separate inner element), so the override is applied here instead of introducing a wrapper span purely to mirror Webflow's own structure (CLAUDE.md §28: rebuild meaningfully, don't copy Webflow's DOM mechanics 1:1). This does NOT apply to .is-outline ("メルマガ登録") below — its own label element carries no font-size override on Production and stays 14px. */ font-size: 1rem; line-height: 1; } /* Human Review correction #2: hover was backwards — Production's default is filled-navy/white-text, and HOVER inverts to white-bg/navy-text (border stays navy throughout), confirmed via CDP-driven :hover on the live Production button. */ .media-cta-button.is-filled:hover { background-color: var(--media-color-white); color: var(--media-color-primary); } .media-cta-button.is-outline { width: 117px; /* Production-measured (117.3125px) */ background-color: var(--media-color-white); /* Human Visual Review correction #4: the itself resolves to rgb(83,99,180)/#5363b4 on Production (its own CSS class color), but the text is rendered inside a child label element (.text-block-30) that explicitly overrides to `color: var(--_media---primary)` (#383874) — confirmed via CSS.getMatchedStylesForNode, this child rule is what a human actually sees, not the parent 's color. Previous corrections measured only the element and missed this override. Local has no separate label element, so the visually-correct color is applied directly here. */ color: var(--media-color-primary); border-color: var(--media-color-primary); } /* Human Review correction #2: Production's outline-button hover inverts to filled-navy/white-text (the mirror of is-filled's hover). */ .media-cta-button.is-outline:hover { background-color: var(--media-color-primary); color: var(--media-color-white); } /* --- Category nav (lower row). Measured: font-size 16px, weight 600, color #686868 (== --media-color-gray-41), padding 16px per link. ----- */ .media-header__lower { display: none; padding-left: var(--media-container-padding); padding-right: var(--media-container-padding); } .media-header__categories { display: flex; align-items: center; justify-content: center; } .media-header__categories a { display: inline-block; padding: 1rem; color: var(--media-color-gray-41); font-weight: 600; font-size: 1rem; text-decoration: none; transition: color 0.2s, background-color 0.2s; } /* --- Mobile menu toggle (hamburger). Production: 40×45 hit area, 3 bars, role=button, aria-expanded toggled, animates to a close (×) shape. --- */ .media-header__menu-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; /* Production-measured (SP 390px): 3 bars at top 13.69/21.69/29.69px, 2px tall each — a 6px gap between them, not 5px. */ gap: 6px; width: 2.5rem; height: 2.8125rem; border: none; background: none; cursor: pointer; flex-shrink: 0; } .media-header__menu-toggle-bar { display: block; /* Production-measured (SP 390px, Human Review Correction — SP Final): 24×2px bars, 8px apart, background rgb(56,56,116) = --media-color-primary (navy), not black. Local previously used --media-color-text (#333), which is what Human Review flagged as "hamburger looks black". */ width: 24px; height: 2px; background-color: var(--media-color-primary); transition: transform 0.25s ease, opacity 0.25s ease; } /* Open state: Production's drawer background is navy, so its hamburger- turned-close icon switches to white — confirmed via Production getComputedStyle on the open (w--open) button. */ .media-header__menu-toggle[aria-expanded="true"] .media-header__menu-toggle-bar { background-color: var(--media-color-white); } .media-header__menu-toggle[aria-expanded="true"] .media-header__menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .media-header__menu-toggle[aria-expanded="true"] .media-header__menu-toggle-bar:nth-child(2) { opacity: 0; } .media-header__menu-toggle[aria-expanded="true"] .media-header__menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --------------------------------------------------------------------- * Mobile menu — SP Final Production Parity (Human Review Correction). * Re-researched directly on Production at 390px via CDP (not re-using the * earlier Phase's "full viewport overlay is visually equivalent" guess, * which Human Review explicitly rejected). Production's real structure is * two independent layers, both children of one fixed-position container: * 1. a backdrop (Webflow's .w-nav-overlay): rgba(0,0,0,0.5), covers the * full viewport. * 2. a drawer panel (.ly_m_nav_menu_inner): navy background, positioned * `left: 24px` from the viewport's own left edge with no explicit * right value (Human Decision, SP Human Review Correction #1: overrides * Production's own measured 12px — Human Review judged Local's drawer * sat too close to the left edge at 12px and asked for more visible * Backdrop margin). That naturally scales at 375px too (351px wide) * without a width magic number. It opens via `transform: translateX()` * (closed → off-screen right, open → 0), `transition: transform 0.5s * ease` (Human Decision, Correction #1: Production's own 0.4s was kept * in the first SP pass, but a structural bug made it invisible — see * the Root Cause note below — and Human Review asked for a slightly * slower, clearly visible ≈0.5s feel once the bug was fixed). * Reproduced here as its own two-element structure * (.media-mobile-menu__backdrop / .media-mobile-menu__panel) rather than * Production's absolute-positioned, full-document-height Webflow nav * mechanism — a position:fixed viewport-relative panel is simpler and * behaves identically from the user's point of view (CLAUDE.md §28: * reconstruct meaningfully, don't copy Webflow's DOM mechanics 1:1). * * SP Human Review Correction #1 — Animation Root Cause: the previous * `display:none` → `.is-open{display:block}` toggle happened in the SAME * class/style change as the transform going from translateX(100%) to * translateX(0). A `display:none` element is removed from the render tree * entirely, so the browser never paints its "before" state (100%) — the * very first frame it renders already shows the "after" transform, and a * CSS transition needs two distinct painted frames to animate between. * Confirmed by sampling the panel's getBoundingClientRect() at ~50ms * intervals after a click: its `left` value was already at its final * position on the very first sample (~7ms in), never passing through any * intermediate position. Fixed by splitting visibility and motion into two * separate classes — `.is-visible` (display only, added first so the * 100%-offscreen state actually paints) and `.is-open` (transform only, * added one animation frame later via requestAnimationFrame so the browser * has already committed the first paint before the transform changes) — * see components.js initMobileMenu(). * ------------------------------------------------------------------- */ .media-mobile-menu { display: none; position: fixed; inset: 0; z-index: 100; } .media-mobile-menu.is-visible { display: block; } .media-mobile-menu__backdrop { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); } .media-mobile-menu__panel { position: absolute; top: 0; bottom: 0; left: 24px; right: 0; display: flex; flex-direction: column; gap: var(--media-space-lg); background-color: var(--media-color-primary); color: var(--media-color-white); font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; overflow-y: auto; padding: 4.5rem 1.75rem 2rem; transform: translateX(100%); transition: transform 0.5s ease; } .media-mobile-menu.is-open .media-mobile-menu__panel { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .media-mobile-menu__panel { transition-duration: 0.001ms; } } .media-mobile-menu__close { position: absolute; top: 1rem; right: 1.25rem; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--media-color-white); } .media-mobile-menu__categories { display: flex; flex-direction: column; } .media-mobile-menu__categories a { /* Production-measured (SP drawer category row): 16px/600/line-height 28px, padding 16px, border-bottom 1px solid rgb(97,97,157) — a muted navy-tinted divider, not a generic 20%-alpha white. No arrow (unlike the PC Footer's category arrow — confirmed not to exist on this SP Drawer row via direct Production re-measurement, not assumed from the PC pattern). No distinct hover/current background was observed in any row's normal state either. */ padding: 1rem; border-bottom: 1px solid #61619d; color: var(--media-color-white); font-weight: 600; font-size: 1rem; line-height: 1.75rem; text-decoration: none; } .media-mobile-menu__search { margin-top: 0.5rem; } .media-mobile-menu__search input[type="search"] { /* Production-measured (SP drawer search field): white box, 4px radius, no visible border/outline (the white background itself reads as the field against the navy drawer), padding 8px 12px, font-size 14px — the same rounded-rectangle shape as PC's search field, not a pill. No icon inside this field on Production (confirmed: all .search_icon elements inside the drawer stayed display:none). */ width: 100%; border: none; border-radius: 4px; padding: 0.5rem 0.75rem; background: var(--media-color-white); color: var(--media-color-text); font-size: 0.875rem; } .media-mobile-menu__cta { display: flex; flex-direction: column; gap: 0.75rem; } /* Production-measured (SP drawer CTA): full-width white boxes with navy border/text — a different design from the PC header's filled/outline pair, not reused 1:1 from .media-cta-button. SP Human Review Correction #1 (Human Decision): both buttons' text color is now unified to #383874 (var(--media-color-primary)). Production's own "メルマガ登録" measured at #5363b4 (a distinct accent used nowhere else in this Drawer), but Human Review judged the brand-color navy a better, more consistent match here and asked for both links to share it — an intentional Production override, not a measurement correction. */ .media-mobile-menu__cta-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 1rem; border: 1px solid var(--media-color-primary); border-radius: 4px; background-color: var(--media-color-white); color: var(--media-color-primary); font-size: 0.875rem; font-weight: 300; text-decoration: none; } .media-mobile-menu__brand { margin-top: auto; padding-top: 1rem; } /* Brand Exception (Human Decision, this Phase's brief §26): Production's own Drawer footer still shows its legacy "1on1総研" logo asset — not reproduced here on purpose. This uses the current Manager総研 white logo (the same asset as the PC Footer's brand logo) instead, per explicit instruction, not the Production-matching asset. */ .media-mobile-menu__brand img { height: 2.5rem; width: auto; } /* Search field background is white (Production-measured, see .media-mobile-menu__search input[type="search"] above), so its placeholder needs a dark-on-white color, not the old navy-drawer-era light/translucent white this replaces. */ .media-mobile-menu__search input[type="search"]::placeholder { color: var(--media-color-gray-62); } /* When the mobile menu is open, prevent background scroll — Production itself does not lock scroll (its overlay is a very tall absolutely positioned panel embedded in flow), but a position:fixed full-viewport overlay without a scroll lock produces a confusing double-scroll UX, so this Phase adds one as a deliberate, documented improvement. SP Final Production Parity bugfix (found via direct CDP testing, not assumed): this was previously targeting `.media-site` (overflow:hidden), which is the DIRECT ANCESTOR of the sticky `.media-header` — making `.media-site` the header's nearest scrolling container instead of the viewport, and breaking sticky positioning while scrolled. Switching the target to `html`/`body` was the first fix attempted, but setting overflow:hidden on BOTH simultaneously turned out to have the exact same breaking effect (confirmed by toggling each individually — either one alone leaves sticky working correctly, only the combination breaks it, apparently because the browser can no longer resolve a single scrolling element once neither qualifies). `html` alone is the standard scroll-lock target and was confirmed NOT to break sticky positioning at any scroll position with the drawer open. */ html.has-mobile-menu-open { overflow: hidden; } /* Human Visual Review Correction (SP Final): re-investigated on Production at 390px per the brief's explicit instruction not to carry over the previous "SP stays static" decision as an assumption. Production's SP header is ALSO `position: sticky; top: 0; z-index: 999;` (confirmed via getComputedStyle at scrollY 0/100/300/500/1000 — identical top:0 rect at every position), not just a PC behavior. This rule therefore now applies at every width, not only `min-width:768px` — the PC-only scoping from the previous correction is removed since Production itself does not scope this to PC. */ .media-header { position: sticky; top: 0; /* Kept deliberately small (not Production's 999): Production's value exists to stay above its own HubSpot widget anchors (z-index 9989–9999), which Local does not have. The only sibling Local needs to stay under the header is `.media-mobile-menu` (z-index: 100), so 10 is already the minimum that establishes a stacking context without competing with anything real. */ z-index: 10; } /* WordPress admin bar is fixed at the very top and is not part of Production's own UI — offsetting the sticky header by its height here only ever changes the logged-in preview, never Production-comparable anonymous rendering. WP core itself is 46px tall up to 782px (covers SP 390/375px and the 768–782px gap) and 32px from 783px up. */ .admin-bar .media-header { top: 46px; } @media (min-width: 783px) { .admin-bar .media-header { top: 32px; } } /* --------------------------------------------------------------------- * Responsive: Production collapses to the SP header (45px tall, logo * only + hamburger, search/CTA/category-row hidden) at the Tablet/SP * range. Foundation's existing 768px category-nav breakpoint is reused; * the two-row desktop header collapses to a single row below it. * ------------------------------------------------------------------- */ @media (min-width: 768px) { .media-header__lower { display: block; border-top: 1px solid var(--media-color-gray-93); } .media-header__cta { display: flex; } .media-header__menu-toggle { display: none; } } /* 768px Search Responsive Correction. Root cause: at 992px+ the container is wide enough (measured: upperInner content box ≥ ~932px) for Logo + CTA (259px) + the search panel's full 30.125rem/482px side by side with room to spare — the PC search design this project's own Human Review already approved. Below 992px that stops being true; by 768px the container only has 721.9px available, 210px short of what Logo+CTA+482px needs, so opening the search panel pushed the CTA 199px past the viewport's right edge (measured: docWidth 967px at a 768px viewport). Fix: let `.media-header__search-wrapper` claim the actions row's remaining free space instead of sizing to its own content, so the search panel's existing `max-width: 100%` (already in its base rule, but previously never binding because the wrapper always grew to match the panel) can actually cap it to whatever room Logo+CTA leave. Logo width, CTA width/visibility, Header height and the 482px panel size at 992px+ are all untouched — this only changes how much of the remaining row the search wrapper is allowed to claim, strictly between the two breakpoints already in use elsewhere in this file (768px / 992px), not a new one. */ @media (min-width: 768px) and (max-width: 991px) { .media-header__search-wrapper { flex: 1 1 auto; min-width: 0; } } @media (max-width: 767px) { .media-header__upper { /* Production-measured: total SP header height is 45px, matching the hamburger button's own 45px hit area — i.e. effectively no extra vertical padding here (Human Review correction: 0.625rem top+bottom was adding 20px, making Local's header 65px vs Production's 45px). */ padding-top: 0; padding-bottom: 0; } img.media-header__logo-img { height: 1.625rem; /* Production-measured: 26px at 390px */ } /* Production hides the header search control entirely on SP (it only reappears inside the mobile menu) — see components.js. */ .media-header__search-wrapper { display: none; } } /* --------------------------------------------------------------------- * Footer — measured Production structure: a primary section (logo + * description + two 3-item category columns) on a divider, then a * secondary section (corporate logo + privacy link + copyright). * ------------------------------------------------------------------- */ .media-footer { background-color: var(--media-color-primary); color: var(--media-color-white); font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; } .media-footer a { color: var(--media-color-white); } .media-footer__main { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: var(--media-space-md) 2%; padding-top: 2.5rem; padding-bottom: 2.5rem; padding-left: var(--media-container-padding); padding-right: var(--media-container-padding); } .media-footer__brand { display: flex; flex: 0 1 34rem; flex-direction: column; align-items: flex-start; gap: var(--media-space-md); min-width: 0; } img.media-footer__logo-img { height: 2.9rem; /* Production-measured proportion of the 168px-wide logo at 1440px */ width: auto; } .media-footer__desc { font-size: 0.75rem; /* 12px, Production-measured */ font-weight: 300; /* Production-measured (Human Review correction — was 400) */ line-height: 2; /* 24px at 12px, Production-measured (was 1.8/21.6px) */ color: var(--media-color-white); /* Production-measured: opaque white, not translucent */ margin: 0; } .media-footer__categories { display: flex; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; gap: 0 4%; } .media-footer__categories-col { list-style: none; margin: 0; padding: 0; min-width: 12rem; } .media-footer__categories-col li { margin: 0; } .media-footer__categories-col a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0.5rem; line-height: 1.5; /* 24px at 16px, Production-measured */ text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } /* Production's own chevron path (confirmed via DOM inspection — reused verbatim rather than approximated with a text character, per this Phase's brief §20). */ .media-footer__categories-arrow { flex-shrink: 0; width: 0.75rem; height: 0.75rem; } .media-footer__divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 0; } .media-footer__sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--media-space-sm); padding-top: 1.5rem; padding-bottom: 1.5rem; padding-left: var(--media-container-padding); padding-right: var(--media-container-padding); } /* Human Review correction #2: Production groups the KAKEAI logo and the two secondary links closely together on the left, not spread across the full row (confirmed via Production DOM measurement — logo and link group sit ~32px apart, both starting at the container's left edge). */ .media-footer__sub-left { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; } .media-footer__sub-logo { display: inline-flex; align-items: center; } .media-footer__sub-logo img { height: 1.75rem; width: auto; } .media-footer__sub-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--media-space-md); font-size: 0.75rem; /* 12px, Production-measured (Human Review correction — was 14px) */ font-weight: 300; /* Production-measured (was 400) */ line-height: 2; /* 24px at 12px, Production-measured */ color: var(--media-color-white); /* Production-measured: opaque white */ } .media-footer__sub-links a { display: inline-flex; align-items: center; gap: 0.375rem; color: inherit; text-decoration: none; } .media-footer__external-icon { width: 0.875rem; height: 0.875rem; } /* Human Review correction #2: confirmed via real mouseMoved dispatch on Production's own secondary links — no color/decoration change on hover, so none is added here either (this project's own earlier underline-on- hover guess was not based on observed Production behavior). */ .media-footer__copy { font-size: 0.75rem; /* 12px */ line-height: 2; /* 24px at 12px, Production-measured */ color: var(--media-color-white); /* Production-measured: opaque white (was 0.7 alpha) */ margin: 0; } @media (max-width: 767px) { /* SP Final Production Parity (Human Review Correction): Production's SP footer order is Category Nav → Manager総研 Logo/Description → KAKEAI Logo+links → Copyright — the reverse of PC's brand-then-categories order. Reordered here with `order` only; the PC DOM in footer.php is untouched. */ .media-footer__main { flex-direction: column; } .media-footer__brand { order: 2; /* Root cause of the "huge empty space" Human Review flagged: PC's `flex: 0 1 34rem` sets a 34rem (544px) flex-basis, which in a row layout is a max-width cap, but once `flex-direction` switches to column here that same basis becomes a *height* request — forcing this block to claim 544px of vertical space for content that only needs ~150px. Resetting the basis (and dropping the fixed-width cap, now meaningless in a column) fixes it structurally rather than hiding it with a negative margin. */ flex: 1 1 auto; } .media-footer__categories { order: 1; /* Production's SP footer is a single, continuous 6-row column, not two 3-item columns side by side — confirmed via Production DOM (all 6 category rows share one unbroken sequence of top offsets with no column break). The two