:root {
  --bg: #f4f7f7;
  --surface: #ffffff;
  --text: #1f2937;
  --line: #e5e7eb;
  --brand: #0f766e;
  --brand-strong: #115e59;
  /* elecs-corporate-vision-preview's real :root custom properties
     (2026-09-17), copied verbatim from the single, unambiguous
     `:root{...}` block in index-CKvv6Qbm.css — confirmed via
     `grep -oE ":root\{[^}]*\}"` to be the only definition site-wide (no
     multi-declaration ambiguity, unlike .container/body). --muted below
     replaces the scaffold's own placeholder value of the same name;
     nothing in the scaffold-default rules further down this file
     currently depends on the old value being exactly #6b7280 rather
     than #6f7679. */
  --font-brand: "Inter", "Noto Sans JP", sans-serif;
  --kinari: #f7f5f0;
  --paper: #fcfbf8;
  --navy: #124d8f;
  --navy-soft: #1774af;
  --ink: #172b3f;
  --muted: #6f7679;
  --mint: #c8a46a;
  --sky: #1774af;
  --sand: #dccfb8;
  --warm-gray: #a9a9a4;
  --line-light: #172b3f29;
  --line-dark: #f7f5f038;
}

/* Tailwind v4's standard Preflight reset, copied verbatim from
   index-CKvv6Qbm.css's `@layer base{...}` block (2026-09-17) — the
   generic, unmodified Tailwind default, not site-specific customization.
   Wrapped in @layer base here too so it keeps losing to every unlayered
   rule below (and every scaffold-default rule elsewhere in this file),
   exactly matching production's real cascade behavior — CSS cascade
   layers guarantee any unlayered rule always beats a layered one for the
   same property, regardless of source order or specificity. This only
   changes elements this workspace doesn't already give an explicit
   margin/padding/border to (e.g. resets browser default UA margins on
   headings/paragraphs/lists that the site's own component CSS assumes
   are already zeroed). */
@layer base {
  *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
  ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
  html, :host {
    -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr { height: 0; color: inherit; border-top-width: 1px; }
  abbr:where([title]) { text-decoration: underline dotted; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small { font-size: 80%; }
  sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }
  sub { bottom: -0.25em; }
  sup { top: -0.5em; }
  table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
  :-moz-focusring { outline: auto; }
  progress { vertical-align: baseline; }
  summary { display: list-item; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, optgroup, textarea {
    font: inherit; font-feature-settings: inherit; font-variation-settings: inherit;
    letter-spacing: inherit; color: inherit; opacity: 1; background-color: transparent; border-radius: 0;
  }
  ::file-selector-button {
    font: inherit; font-feature-settings: inherit; font-variation-settings: inherit;
    letter-spacing: inherit; color: inherit; opacity: 1; background-color: transparent; border-radius: 0;
    margin-inline-end: 4px;
  }
  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }
  ::placeholder { opacity: 1; color: currentColor; }
  textarea { resize: vertical; }
  ::-webkit-search-decoration { -webkit-appearance: none; }
  ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
  ::-webkit-datetime-edit { display: inline-flex; padding-block: 0; }
  ::-webkit-datetime-edit-fields-wrapper,
  ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }
  ::-webkit-calendar-picker-indicator { line-height: 1; }
  :-moz-ui-invalid { box-shadow: none; }
  button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
  ::file-selector-button { appearance: button; }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* body — elecs-corporate-vision-preview's real, cascade-resolved rule
   (2026-09-17). The source stylesheet actually has THREE unlayered,
   unconditional (depth-0, verified via a byte-offset/@media/@layer
   brace-tracking scan) top-level `body{...}` selectors, not one — a
   naive grep for "body{" also matched unrelated classes ending in
   "-body" (.news-index-body, .privacy-section-body,
   .message-letter-body), which were ruled out by checking each match's
   actual selector text. Combining the three real `body` rules in file
   order (last declaration wins per property, standard CSS cascade,
   since all three share the same specificity and layer):
   1) body{background:var(--kinari);color:var(--ink);
      font-family:var(--font-brand);font-feature-settings:"palt" 1;
      -webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}
   2) body{overflow-x:clip}  -- overrides rule 1's overflow-x
   3) body{font-family:var(--font-brand);font-optical-sizing:auto}
      -- font-family unchanged (same value), adds font-optical-sizing
   Picking only rule 1 (which happens to match a single-property
   comparison against production) would have silently kept the wrong,
   overridden overflow-x:hidden instead of the real overflow-x:clip. */
body {
  background: var(--kinari);
  color: var(--ink);
  font-family: var(--font-brand);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  overflow-x: clip;
  font-optical-sizing: auto;
}
/* a:hover{} (generic scaffold default, text-decoration:underline — not
   part of elecs' real design) and .site-header/.header-inner/.brand/
   .brand-logo (the generic scaffold's OWN demo header, sharing class
   names with the real, crawled Header.astro built for this workspace)
   removed here — found via a user-reported DevTools diff (2026-09-17):
   since Astro's component-scoped CSS only isolates a component's own
   <style> block from leaking OUT, it does NOT stop THIS file's unscoped,
   unlayered global CSS from leaking IN wherever the same class name
   appears in real markup. `.brand`/`.brand-logo` here were bleeding
   font-weight/letter-spacing/max-height onto Header.astro's real,
   differently-styled brand logo link (lower specificity than Header's
   own [data-astro-cid] scoped rules, so it never fully overrode them,
   but still added unwanted extra declarations that a real DevTools
   Styles-panel diff would show as a difference from production). See
   .site-footer below for the matching Footer.astro collision.

   The bare `a{}` rule itself was initially deleted entirely alongside
   that scaffold cruft (over-correction — its VALUE, color:var(--brand),
   was wrong/scaffold-only, but production genuinely has its own real,
   unlayered `a{color:inherit;text-decoration:none}` rule at this exact
   position, confirmed via a later user DevTools diff on .apv-flow-icon
   2026-09-18 that happened to also show this same-page a{} rule).
   Restored below with the correct value. Being unlayered, it always
   beats the Preflight's layered `a{color:inherit;text-decoration:
   inherit}` above for text-decoration specifically (color agrees either
   way) -- this is the genuine reason plain links render non-underlined,
   not incidental inheritance through the DOM tree. */
a { color: inherit; text-decoration: none; }
/* button,a,summary{-webkit-tap-highlight-color:transparent} — same
   discovery (2026-09-18): a real, unlayered, unconditional production
   rule that was never implemented anywhere (Preflight's own
   -webkit-tap-highlight-color reset only covers html/:host, not these
   three interactive-element tags specifically). */
button, a, summary { -webkit-tap-highlight-color: transparent; }
.nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.nav a { font-size: 14px; color: #374151; padding: 6px 10px; border-radius: 999px; }
.nav a:hover { background: #ecfeff; color: var(--brand-strong); text-decoration: none; }
.nav-item { position: relative; }
.nav-submenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; min-width: 200px; box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}
.nav-item:hover .nav-submenu { display: flex; flex-direction: column; }
.nav-submenu a { padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.menu-button { display: none; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
main.site-main { min-height: calc(100vh - 180px); }
/* .container — replaced with elecs-corporate-vision-preview's actual
   production behavior (2026-09-17), verified byte-for-byte against
   index-CKvv6Qbm.css rather than the generic scaffold default this
   replaced. Two coexisting, independent properties, not a single
   "winning" value: `width` (unconditional, unlayered — always wins over
   Tailwind's own layered `width:100%` default for the same property) sets
   a padded/capped width; `max-width` (Tailwind v4's default rem-stepped
   breakpoints, inside @layer utilities) separately caps it further at
   wide viewports. Verified by computing both across real viewport
   widths: at ~700px, `width` alone governs (636px, under the only-active
   40rem/640px max-width tier); at ~1200px, `max-width` clamps `width` down
   (1136px capped to the 64rem/1024px tier) — so implementing only one of
   the two would be wrong for some real viewport range. A narrower
   <=760px-specific `width` override also exists in the source (with a
   tighter 36px/680px pairing) and is reproduced below. */
.container {
  width: min(100% - 64px, 1360px);
  margin-inline: auto;
}
@media (max-width: 760px) {
  .container { width: min(100% - 36px, 680px); }
}
@media (min-width: 40rem) { .container { max-width: 40rem; } }
@media (min-width: 48rem) { .container { max-width: 48rem; } }
@media (min-width: 64rem) { .container { max-width: 64rem; } }
@media (min-width: 80rem) { .container { max-width: 80rem; } }
@media (min-width: 96rem) { .container { max-width: 96rem; } }
/* docs/design/phase1/31_pagelayout_file_wiring_design.md §続き — a
   slot-based PageLayout renders its slots directly (no page-level
   .container wrapper, since full-bleed Components like a Hero need to
   span the viewport) — this gives free-form Markdown content the same
   readable-width container every registered Component is expected to
   give itself, instead of bleeding edge-to-edge with no width limit. */
.content-markdown-block { max-width: 1160px; margin: 0 auto; padding: 40px 18px; }
.container--with-sidebar { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.container--with-sidebar > .page { flex: 1 1 480px; min-width: 0; }
.page-sidebar { flex: 0 0 280px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.page-sidebar__placeholder { color: var(--muted); font-size: 13px; margin: 0; }
.page-featured-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; margin: 0 0 24px; }
.hero {
  background: radial-gradient(1200px 360px at 10% -5%, #e0f2fe 0%, #ffffff 45%, #ffffff 100%);
  border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px;
}
.hero h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 42px); line-height: 1.2; }
.hero p { margin: 0; color: var(--muted); line-height: 1.8; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; margin-top: 22px; }
.card {
  grid-column: span 12;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; box-shadow: 0 8px 24px rgb(15 23 42 / 4%);
}
.section-title { margin: 34px 0 8px; font-size: 24px; }
.section-caption { margin: 0; color: var(--muted); }
.card h3 { margin: 0 0 10px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); line-height: 1.75; }
.badge { display: inline-flex; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: #ecfeff; color: #0f766e; border: 1px solid #bae6fd; }
.page { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.breadcrumbs { margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.page-header h1 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 36px); }
.page-header p { margin: 0; color: var(--muted); }
.page-body { margin-top: 16px; line-height: 1.9; }
.page-body h2, .page-body h3 { margin-top: 1.8em; margin-bottom: .55em; }
.page-body ul, .page-body ol { padding-left: 1.3em; }
.page-body img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
/* html — production's real, unlayered, unconditional rule (verified via
   the same byte-offset/@media/@layer scan as body: exactly one such rule,
   at depth 0). scroll-behavior was already correct here; background was
   missing. A separate prefers-reduced-motion override also exists in the
   source and is reproduced below it. overflow-x:clip (2026-09-18, found
   via a user DevTools diff on .apv-flow-icon that also surfaced this
   global-selector sweep): production sets it via a combined
   `html,body{overflow-x:clip}` rule -- body's own copy was already
   correctly implemented, html's was not. */
html { scroll-behavior: smooth; background: var(--kinari); overflow-x: clip; }
/* a:focus-visible,summary:focus-visible{outline:...} — same sweep: a
   real, unlayered, unconditional global rule (keyboard-navigation focus
   ring) that was never implemented anywhere, since it belongs to no
   single Component's own class set (§9.25 pattern). */
a:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.page-body h2, .page-body h3, .page-body h4 { scroll-margin-top: 90px; }
/* section{scroll-margin-top} — production's real, unlayered, bare tag-
   selector rule (2026-09-18, found via a user DevTools diff on
   .final-cta): with html{scroll-behavior:smooth} above, this offsets any
   in-page anchor scroll (e.g. a nav link to #contact) so the target
   <section> (BrandHero's #about, TrackSection's #business, FinalCta's
   #contact, etc) isn't hidden under the fixed .site-header. 74px roughly
   matches the desktop header's real height (72px) plus a small buffer;
   64px at <=760px matches the mobile header height exactly. This is a
   bare tag selector (applies to every <section> site-wide) and a cross-
   component sibling selector below (.news-section + .final-cta) that
   references two different Components' classes at once -- neither can be
   correctly scoped from inside either Component's own <style> block
   (Astro's per-component [data-astro-cid-*] scoping would only match one
   side's real markup), so both belong here in the global stylesheet
   instead, matching how production's own (non-Astro, unscoped) CSS
   already works. */
section { scroll-margin-top: 74px; }
@media (max-width: 760px) {
  section { scroll-margin-top: 64px; }
}
.news-section + .final-cta { border-top: 1px solid #f7f5f02e; }
/* .apv-icon-accent (2026-09-18, user-caught via a DevTools diff on
   <circle class="apv-icon-accent">): moved here from TrackSection.astro's
   own scoped <style> block because it only ever appears inside SVG
   markup injected via Astro's `set:html={item.icon_svg}`, which does NOT
   receive the component's [data-astro-cid-*] scoping attribute (Astro's
   scoping is applied by statically analyzing the template; it can't see
   inside a raw HTML string). A scoped rule for this class can never match
   the real, unscoped elements -- same root cause as §9.25 (selectors
   Astro's per-component scoping structurally cannot reach), just
   discovered via a different mechanism (set:html) rather than a bare tag
   or cross-component selector. Global, unscoped CSS is the only place
   this can actually work. */
.home-ai-compact .apv-icon-accent { fill: #08c; stroke: #08c; }
.apv-icon-accent { fill: var(--mint); stroke: var(--mint); }
.highlight-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.highlight-item { background: #f0fdfa; border: 1px solid #ccfbf1; border-radius: 10px; padding: 10px; font-size: 14px; }
.cta { margin-top: 24px; padding: 16px; border-radius: 12px; background: #f0fdfa; border: 1px solid #99f6e4; }
.cta a { display: inline-block; background: var(--brand); color: #fff; padding: 10px 14px; border-radius: 9px; text-decoration: none; font-size: 14px; }
.cta a:hover { background: var(--brand-strong); }
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.form-status { margin-top: 10px; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.news-list { margin: 0; padding-left: 1.15em; }
.news-list li { margin: 0 0 8px; }
/* .site-footer/.footer-inner (generic scaffold demo footer, same class
   names as the real, crawled Footer.astro) removed for the same reason as
   .site-header above -- .site-footer's border-top here was leaking onto
   the real footer (Footer.astro's own scoped rule never declares
   border-top, so nothing overrode it). */
@media (min-width: 820px) {
  .card.span-4 { grid-column: span 4; }
  .card.span-6 { grid-column: span 6; }
}
@media (max-width: 819px) {
  .menu-button { display: inline-flex; }
  .nav { display: none; width: 100%; padding-top: 8px; }
  .nav.is-open { display: flex; }
  .header-inner { flex-wrap: wrap; }
  .highlight-list { grid-template-columns: 1fr; }
}

/* Shared across CompanyOverview/CompanyLocations/CompanyHistory/
   CompanyMessage/CompanyPhilosophy/CompanyPrinciples -- each is a
   separate Astro component (own scoped <style>), so a class used
   identically by 3+ of them has to live here, global/unscoped, or it
   would need to be duplicated per-component (same reasoning as
   .apv-icon-accent above). crawled from elecs-corporate-vision-preview's
   /company, /company/message, /company/philosophy, 2026-09-23. */
.company-shell { width: min(100% - 64px, 1360px); margin-inline: auto; }
@media (max-width: 840px) {
  .company-shell { width: min(100% - 40px, 1360px); }
}

.company-index {
  color: #172b3f9e;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: max-content;
  display: flex;
}
.company-index span:first-child {
  border: 1px solid;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  font-size: 10px;
  display: flex;
}
.company-index span:last-child {
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: 700;
}
/* .message-simple-index is added alongside .company-index on the same
   element on all three company pages; both are bare classes at equal
   (1,0) specificity, so the later-declared one below wins per property
   (color, align-self) -- matches production's own offset order. */
.message-simple-index { color: var(--muted); align-self: start; }

.company-section-heading > p:first-child {
  color: var(--navy);
  letter-spacing: 0.18em;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
}
.company-section-heading > p:first-child span {
  letter-spacing: 0;
  border: 1px solid;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}
.company-section-heading h2 {
  letter-spacing: -0.055em;
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 620;
}
.company-section-lead {
  color: #607080;
  max-width: 320px;
  margin-top: 36px;
  font-size: 13px;
  line-height: 2;
}
/* .company-page-scoped override -- was dropped entirely when the original
   4-way production comma rule (.company-page .company-profile-list dd,
   .company-page .company-section-lead, .company-page .company-history-list p,
   .company-page .company-principles article>p { font-size:16px;
   line-height:1.9 }) was split one-portion-per-owning-component; this is
   the .company-section-lead portion, which has no local duplicate anywhere
   so is safe to add here directly (found via a broad Playwright re-check
   across all pages, 2026-09-23). */
.company-section-lead { font-size: 16px; line-height: 1.9; }

/* .company-tab-summary wraps .company-section-heading (h1 variant, used by
   CompanyOverview and CompanyPhilosophy only -- CompanyLocations/
   CompanyHistory use .company-section-heading directly, with an h2, no
   .company-tab-summary wrapper). */
.company-tab-summary {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 36px;
  min-width: 0;
  display: grid;
}
@media (max-width: 1050px) {
  .company-tab-summary { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* .company-page (root class on <main>) is resolved via PageLayout
   registration data (the "company" key's main_class/main_class_by_path)
   rather than a dedicated PageLayout file -- GenericPage.astro is shared
   by 7 different pages, so (like .apv-page/.business-page/.privacy-page/
   etc. above) it can't have its own sibling CSS file. Moved back here from
   src/layouts/Company.css when Company.astro was consolidated into
   GenericPage.astro; its own nav (.company-tabs) moved to the new
   CompanyTabsNav.astro Component's own sibling CSS instead. */
.company-page {
  background: var(--kinari);
  min-height: 100vh;
}
.company-page {
  --mint: #08c;
  --navy: #071a2b;
  --paper: #fff;
  color: #071a2b;
  background: #fff;
}
.company-page .company-tab-summary .company-section-heading > p:first-child,
.company-page .message-simple-kicker {
  color: #08c;
  letter-spacing: 0.15em;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}
.company-page .company-tab-summary .company-section-heading h1,
.company-page .message-simple-article h1 {
  color: #071a2b;
  letter-spacing: 0.04em;
  margin: 22px 0 0;
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 620;
  line-height: 1.3;
}
.company-page .company-section-heading h2,
.philosophy-page .company-section-heading h1 {
  letter-spacing: -0.04em;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
}
.company-page .company-section-heading > p:first-child { color: #08c; font-size: 13px; }
.company-page .company-profile-layout,
.company-page .message-simple-layout {
  grid-template-columns: 120px minmax(0, 920px);
  justify-content: center;
  align-items: start;
  gap: clamp(42px, 7vw, 100px);
  display: grid;
}
@media (max-width: 700px) {
  .company-page .company-profile-layout,
  .company-page .message-simple-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .ai-container-feature .ai-domain-symbol .apv-flow-icon {
    flex-shrink: 0;
    margin: 0;
  }
}

/* /business (elecs-corporate-vision-preview crawl, 2026-09-23). Same
   reasoning as the /company additions above: .business-page/
   .business-story-page live on <main> (BaseLayout.astro, via
   Business.astro's mainClass), outside any component's own template, so
   single-segment root rules are safe here (global/unscoped) but a 2+
   segment ".business-story-page .xxx" ancestor override would hit the
   exact same Astro-scoping dead-rule trap documented above (§9.33) --
   final values folded directly into the shared classes below instead.
   .business-story-label/.business-service-external are each used by 2+
   components (BusinessStoryHero/BusinessStoryChapter/BusinessStoryAi), so
   they live here rather than being duplicated per-component. */
.business-page, .service-detail-page { background: var(--kinari); min-height: 100vh; }
.business-story-page { color: #071a2b; background: #fff; }
.business-story-label { color: #08c; letter-spacing: 0.14em; font-size: 13px; font-weight: 800; line-height: 1.6; }
.business-service-external {
  color: #fff;
  background: #08c;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 24px;
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
  display: inline-flex;
}
.business-service-external:hover { background: #006fae; }
.business-service-external:focus-visible { outline-offset: 4px; outline: 2px solid #08c; }

/* /ai-vision (elecs-corporate-vision-preview crawl, 2026-09-23). Root
   custom-property redefinitions are always safe as simple global rules --
   CSS variables cascade through the real DOM tree at runtime, so
   .ai-revised-page's --mint redefinition correctly reaches descendants
   regardless of Astro's build-time per-component scoping (unlike a
   plain-color override, which would need the same treatment as
   .company-page/.business-story-page above). */
.apv-page { background: var(--kinari); color: var(--ink); min-height: 100vh; }
.ai-revised-page { --mint: #08c; --navy: #071a2b; color: #071a2b; background: #fff; }

/* /privacy (elecs-corporate-vision-preview crawl, 2026-09-24) -- rendered
   on <main> by BaseLayout.astro via Privacy.astro's mainClass prop, so
   this can't live in Privacy.astro's own scoped <style> (same reasoning
   as .company-page above). */
.privacy-page { color: #071a2b; background: #fff; min-height: 100vh; }
/* /news/{date}, /privacy, /security-policy: the reference keeps the site header, its spacer and the breadcrumbs INSIDE <main>, so its
   min-height: 100vh covers them. Here they sit above <main>; without this, a short article put the footer
   a full header+breadcrumbs (133px) too low. Heights: spacer 72px (64px up to 760px) + breadcrumbs 61px
   (46px up to 700px) -- see Header.astro. */
.privacy-page { min-height: calc(100vh - 133px); }
@media (max-width: 760px) { .privacy-page { min-height: calc(100vh - 125px); } }
@media (max-width: 700px) { .privacy-page { min-height: calc(100vh - 110px); } }

/* 404 (elecs-corporate-vision-preview crawl, 2026-09-25) -- rendered on
   <main> by BaseLayout.astro via src/pages/404.astro's mainClass prop,
   same reasoning as .privacy-page above. */
.not-found-page { color: #071a2b; font-family: var(--font-brand); background: #fff; }

/* .apv-flow-icon/.apv-icon-accent here target SVG markup injected via
   set:html in ApvEcosystem.astro (icon_svg prop) -- Astro's scoping never
   reaches set:html content (§9.27), so this has to be global even
   though .ai-domain-symbol itself IS rendered by that component's own
   template. The base .apv-flow-icon rule (margin:auto auto 18px, found
   2026-09-23 via a real-browser getComputedStyle diff against production
   after PR #67 -- .ai-domain-symbol was consistently 18px shorter than
   production despite every measured sub-element matching) must stay
   separate from the .ai-domain-symbol-scoped override below: production's
   .ai-domain-symbol .apv-flow-icon rule overrides width/height/color/
   background/border/padding/display/position/transform but never touches
   margin, so the base rule's margin-bottom survives untouched -- folding
   it into the scoped rule instead would still work here, but keeping the
   base rule lets it apply anywhere .apv-flow-icon appears without an
   .ai-domain-symbol ancestor too, matching production's actual rule. */
.apv-flow-icon {
  margin: auto auto 18px;
}
.ai-domain-symbol .apv-flow-icon {
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  color: inherit;
  background: #f8fafb;
  border: 1px solid;
  border-radius: 50%;
  padding: 12px;
  display: block;
  position: static;
  transform: none;
}
.ai-domain-buttons button:hover .apv-flow-icon,
.ai-domain-buttons button.is-active .apv-flow-icon {
  color: #fff;
  background: #08c;
}

/* /news (elecs-corporate-vision-preview crawl, 2026-09-23). .news-index-page lives on <main> (BaseLayout.astro via News.astro's mainClass) -- a single-class root rule targeting it directly is safe (same pattern as .apv-page/.business-page above); it's the .news-index-page .news-index-title / .news-index-page .news-index-body ancestor-prefixed variants that would hit the §9.33 Astro-scoping trap, so those are folded directly into NewsIndexHero.astro/NewsIndexList.astro's own local base selectors instead. */
.news-index-page { color: #071a2b; background: #fff; }

/* .news-pagination button (elecs-corporate-vision-preview crawl, 2026-09-23): these buttons are created via document.createElement() in NewsIndexList.astro's own <script>, so they never get Astro's [data-astro-cid-*] attribute -- a scoped rule in that component's <style> block can never match them (found via getComputedStyle: they fell back to raw browser defaults, 15x24px instead of the intended 40x40px). Must live here, unscoped, same reasoning as the set:html case in §9.27. */
.news-pagination button {
  color: #071a2b;
  cursor: pointer;
  font: inherit;
  background: 0 0;
  border: 1px solid #e2e7ea;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: background-color 0.2s, color 0.2s;
  display: inline-flex;
}
.news-pagination button.is-active { color: #fff; background: #08c; border-color: #08c; }
.news-pagination button:disabled { cursor: default; opacity: 0.28; }
.news-pagination button:not(:disabled):hover { color: #fff; background: #006fae; border-color: #006fae; }

/* /contact (elecs-corporate-vision-preview crawl, 2026-09-23). .contact-page/.contact-revised-page live on <main> (BaseLayout.astro via Contact.astro's mainClass) -- the single compound-class root rule below is safe (same pattern as .apv-page/.business-page/.news-index-page above); every ".contact-revised-page .xxx" ancestor-prefixed override found in production is folded directly into ContactTypes.astro/ContactGuide.astro's own local base selectors instead (§9.33). */
.contact-page { background: var(--kinari); min-height: 100vh; }
.contact-page.contact-revised-page { color: #071a2b; background: #fff; }

/* /contact/business-partner (and eventually /contact/service,
   /contact/privacy -- same shared InquiryPage.astro/InquiryForm.astro,
   elecs-corporate-vision-preview crawl, 2026-09-23). .inquiry-page has
   no separate "-revised" override layer (unlike .contact-page etc) --
   dump_selector confirmed only ONE unconditional rule exists, so this
   is a plain single-class root rule, no §9.33 folding needed. */
.inquiry-page { color: #071a2b; background: #fff; }
.inquiry-section { padding: clamp(110px, 10vw, 140px) 0 80px; }
.inquiry-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); align-items: start; gap: clamp(40px, 6vw, 88px); display: grid; }
@media (max-width: 900px) {
  .inquiry-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .inquiry-section { padding: 110px 0 56px; }
}


/* .news-detail-body: targets markup injected via set:html in
   NewsDetail.astro — Astro's [data-astro-cid-*] scope attribute is never
   applied to set:html-injected content, so these descendant rules would
   silently match nothing if placed in that Component's own scoped
   <style> (see src/components/NewsDetail.astro's own docstring). crawled
   verbatim from production's index-*.css, 2026-10-01. */
.news-detail-body { color: #46515a; overflow-wrap: anywhere; min-width: 0; font-size: 16px; line-height: 2; }
.news-detail-body > :first-child { margin-top: 0; }
.news-detail-body p { margin-bottom: 1.5em; }
.news-detail-body p:empty, .news-detail-body a:empty { display: none; }
.news-detail-body a { color: #006fae; text-underline-offset: 4px; text-decoration: underline; }
.news-detail-body h2 { color: #071a2b; margin: 32px 0 16px; font-size: 28px; }
.news-detail-body h3, .news-detail-body h4 { color: #071a2b; margin: 28px 0 16px; font-size: 24px; }
.news-detail-body ul, .news-detail-body ol { padding-left: 1.5em; }
.news-detail-body table { border-collapse: collapse; max-width: 100%; display: block; overflow: auto; }
.news-detail-body td, .news-detail-body th { border: 1px solid #e2e7ea; padding: 12px; }
/* an embedded map (e.g. the office-move notices): the reference gives it a fixed 300px box */
.news-detail-body iframe { border: 0; width: 100%; height: 300px; margin-block: 24px; display: block; }