/* Shared TOP chrome for category and lower pages. */

body:not(.home) {
  --paper: #f3f6f5;
  --paper-deep: #e1e9e7;
  --wash: #e8efed;
  --ink: #0b1f2a;
  --ink-soft: #526a73;
  --teal: #14c9ad;
  --teal-dark: #0d7468;
  --signal: #ff7357;
  --line: rgba(21, 49, 59, 0.2);
  --line-soft: rgba(21, 49, 59, 0.12);
  --white: #ffffff;
  --display: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --body: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --mono: "Inter Tight", Inter, Arial, sans-serif;
  --wrap: 1280px;
  color: var(--ink) !important;
  background: #f3f6f5 !important;
  font-family: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif !important;
}

body:not(.home)::before {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 200;
  padding: 10px 14px;
  color: #0b1f2a;
  background: #14c9ad;
}

.skip-link:focus {
  left: 16px;
}

/* Header matches TOP dark sticky bar. */
body:not(.home) .header.pdcg-new-header {
  position: sticky !important;
  z-index: 80 !important;
  top: 0 !important;
  isolation: isolate !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(11, 31, 42, 0.97) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

body:not(.home) .header.pdcg-new-header::before,
body:not(.home) .header.pdcg-new-header::after {
  display: none !important;
  content: none !important;
}

body:not(.home) .header.pdcg-new-header .header-inner {
  display: grid !important;
  grid-template-columns: minmax(250px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 28px !important;
  min-height: 72px !important;
  height: auto !important;
}

body:not(.home) .header.pdcg-new-header .brand {
  gap: 12px !important;
  min-width: 0 !important;
  color: #ffffff !important;
}

body:not(.home) .header.pdcg-new-header .brand-mark,
body:not(.home) .header.pdcg-new-header .brand-mark::after {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.home) .header.pdcg-new-header .brand-mark {
  overflow: hidden !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

body:not(.home) .header.pdcg-new-header .brand-mark::after {
  display: none !important;
  content: none !important;
}

body:not(.home) .header.pdcg-new-header .brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body:not(.home) .header.pdcg-new-header .brand-title {
  color: #ffffff !important;
  font-family: var(--display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

body:not(.home) .header.pdcg-new-header .brand-subtitle {
  color: #dce7e5 !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

body:not(.home) .header.pdcg-new-header .nav {
  display: flex !important;
  align-items: center !important;
  gap: clamp(14px, 1.7vw, 26px) !important;
  color: #dce7e5 !important;
  font-family: var(--display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.home) .header.pdcg-new-header .nav a {
  min-height: 44px !important;
  padding: 12px 0 !important;
  color: inherit !important;
  border: 0 !important;
}

body:not(.home) .header.pdcg-new-header .nav a::after {
  bottom: 6px !important;
  height: 2px !important;
  background: var(--teal) !important;
}

body:not(.home) .header.pdcg-new-header .header-cta {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 46px !important;
  padding: 12px 18px !important;
  color: var(--ink) !important;
  border: 1px solid var(--teal) !important;
  border-radius: 0 !important;
  background: var(--teal) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body:not(.home) .header.pdcg-new-header .header-cta svg {
  display: none !important;
}

body:not(.home) .header.pdcg-new-header .header-cta:hover,
body:not(.home) .header.pdcg-new-header .header-cta:focus-visible {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background: transparent !important;
}

body:not(.home) .header.pdcg-new-header .menu-toggle {
  display: none;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body:not(.home) .header.pdcg-new-header .menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px auto;
  background: #ffffff !important;
}

body:not(.home) .header.pdcg-new-header .menu-toggle svg {
  display: none !important;
}

/* Page hero: TOP section-head language, not the old grid wash. */
body:not(.home) .page-hero,
body:not(.home) [class*="page-hero-"] {
  isolation: isolate;
  padding: 48px 0 42px !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--paper) !important;
  background-image: none !important;
}

body:not(.home) .page-hero::before,
body:not(.home) [class*="page-hero-"]::before,
body:not(.home) .page-hero::after,
body:not(.home) [class*="page-hero-"]::after {
  display: none !important;
  content: none !important;
}

body:not(.home) .page-hero .breadcrumb,
body:not(.home) .page-hero .breadcrumb a,
body:not(.home) .page-hero .breadcrumb span {
  color: var(--ink-soft) !important;
}

body:not(.home) .page-hero .breadcrumb a:hover,
body:not(.home) .page-hero .breadcrumb a:focus-visible {
  color: var(--teal-dark) !important;
}

body:not(.home) .page-type-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: var(--teal-dark) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

body:not(.home) .page-type-badge::before {
  width: 34px !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: var(--teal) !important;
}

body:not(.home) .page-hero h1,
body:not(.home) .page-hero-company_detail h1,
body:not(.home) .page-hero-company_index h1,
body:not(.home) .page-hero-column h1,
body:not(.home) .page-hero-column_index h1 {
  max-width: none !important;
  margin: 0 0 14px !important;
  padding-left: 0 !important;
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: clamp(34px, 3.45vw, 50px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
  overflow-wrap: anywhere;
  word-break: normal !important;
}

body:not(.home) .page-hero h1::before,
body:not(.home) .page-hero h1::after {
  display: none !important;
  content: none !important;
}

body:not(.home) .page-hero .lead,
body:not(.home) .page-hero-subtitle {
  max-width: 68ch !important;
  margin: 0 !important;
  color: var(--ink-soft) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.82 !important;
}

body:not(.home) .company-index-hero-panel,
body:not(.home) .purpose-hero-panel {
  margin-top: 28px !important;
  padding: 22px 24px !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-top: 4px solid var(--ink) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body:not(.home) .page-main {
  padding: 46px 0 64px !important;
  background: var(--paper) !important;
  background-image: none !important;
}

body:not(.home) .page-content,
body:not(.home) .sidebar-block {
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body:not(.home) .sidebar-block strong {
  color: var(--teal-dark) !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.08em !important;
}

body:not(.home) .sidebar-block strong::before {
  background: var(--teal) !important;
}

body:not(.home) .sidebar-block a:hover,
body:not(.home) .sidebar-block a:focus-visible {
  color: var(--teal-dark) !important;
}

body:not(.home) .cta-band {
  border-radius: 0 !important;
  border-color: var(--line) !important;
  background: var(--wash) !important;
}

body:not(.home) .footer {
  color: #dce7e5 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: #0b1f2a !important;
}

body:not(.home) .footer strong,
body:not(.home) .footer p,
body:not(.home) .footer a,
body:not(.home) .footer span {
  color: inherit !important;
}

body:not(.home) .footer strong {
  color: #ffffff !important;
}

body:not(.home) .footer a:hover,
body:not(.home) .footer a:focus-visible {
  color: var(--teal) !important;
}

body:not(.home) .back-to-top {
  width: 48px !important;
  height: 48px !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  background: var(--teal) !important;
}

@media (max-width: 1180px) {
  body:not(.home) .header.pdcg-new-header .header-inner {
    grid-template-columns: minmax(220px, 1fr) auto auto !important;
    gap: 16px !important;
  }

  body:not(.home) .header.pdcg-new-header .nav {
    gap: 13px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 960px) {
  body:not(.home) .header.pdcg-new-header .header-inner {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  body:not(.home) .header.pdcg-new-header .nav {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    right: 21px !important;
    left: 21px !important;
    display: none !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: #132f39 !important;
    box-shadow: 0 18px 40px rgba(5, 19, 27, 0.22) !important;
  }

  body:not(.home) .header.pdcg-new-header .nav.open {
    display: grid !important;
  }

  body:not(.home) .header.pdcg-new-header .nav a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  }

  body:not(.home) .header.pdcg-new-header .menu-toggle {
    display: block !important;
  }

  body:not(.home) .page-hero h1 {
    font-size: clamp(28px, 7.8vw, 36px) !important;
    max-width: none;
    padding-left: 0 !important;
  }
}

@media (max-width: 760px) {
  body:not(.home) .header.pdcg-new-header .header-inner {
    min-height: 64px !important;
    height: 64px !important;
  }

  body:not(.home) .header.pdcg-new-header .brand-mark {
    width: 34px !important;
    height: 34px !important;
  }

  body:not(.home) .header.pdcg-new-header .brand-title {
    font-size: 14px !important;
  }

  body:not(.home) .header.pdcg-new-header .brand-subtitle,
  body:not(.home) .header.pdcg-new-header .header-cta {
    display: none !important;
  }
}
