/* ============================================================
 * Content width: override container max to 1280px for sub-pages only
 * (TOP page loads top-page.css only and is NOT affected)
 * ============================================================ */
:root {
  --cc-container-max: 1280px;
}

/* ============================================================
 * Customer Cloud — Sub-page header override
 *
 * Loaded via cc-v2.css (sub-pages only).
 * TOP page (index.html) loads top-page.css and is NOT affected.
 *
 * Goal: always-visible white header matching the TOP page's
 * scroll-triggered header design (h-16, white/97, border-gray).
 * ============================================================ */

/* ----------------------------------------------------------
 * Desktop: always visible, white, 64px
 * (gemini.css hid it with translateY(-100%) — we undo that here)
 * ---------------------------------------------------------- */
.ccv2 .cc-header {
  height: 64px;
  transform: none !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid #f3f4f6 !important;
  box-shadow: none !important;
  color: #0a0a0f !important;
}

/* Scrolled state: keep white (not black) */
.ccv2 .cc-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #0a0a0f !important;
  border-bottom-color: #f3f4f6 !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Inner padding: match TOP page px-10 */
.ccv2 .cc-header__inner {
  padding: 0 40px;
  gap: 48px;
}

/* ----------------------------------------------------------
 * Logo — always show color version, hide white version
 * ---------------------------------------------------------- */
.ccv2 .cc-header__logo,
.ccv2 .cc-header__logo-img {
  height: 28px; /* h-7 */
}

.ccv2 .cc-header.is-scrolled .cc-header__logo-img--basic { opacity: 1 !important; }
.ccv2 .cc-header.is-scrolled .cc-header__logo-img--white { opacity: 0 !important; }

/* ----------------------------------------------------------
 * Nav links — always dark
 * ---------------------------------------------------------- */
.ccv2 .cc-header.is-scrolled .cc-header__nav-link {
  color: #0a0a0f !important;
}

.ccv2 .cc-header.is-scrolled .cc-header__nav-link--cta {
  border-color: rgba(0, 0, 0, 0.35) !important;
}

.ccv2 .cc-header.is-scrolled .cc-header__nav-link--cta:hover {
  background: #0a0a0f !important;
  color: #ffffff !important;
  border-color: #0a0a0f !important;
}

/* ----------------------------------------------------------
 * Hamburger bars — always dark
 * ---------------------------------------------------------- */
.ccv2 .cc-header.is-scrolled .cc-header__hamburger span {
  background: #0a0a0f !important;
}

/* Focus rings — always dark */
.ccv2 .cc-header.is-scrolled .cc-header__nav-link:focus-visible,
.ccv2 .cc-header.is-scrolled .cc-header__hamburger:focus-visible {
  outline-color: #0a0a0f !important;
}

/* ----------------------------------------------------------
 * Mobile header (≤1024px)
 * ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .ccv2 .cc-header__inner {
    padding: 0 24px;
  }
}

/* ----------------------------------------------------------
 * Mobile menu drawer — white full-screen overlay
 * Note: backdrop-filter on .cc-header creates a fixed containing block,
 * so position:fixed children are clipped. Use position:absolute + explicit
 * height instead.
 * ---------------------------------------------------------- */
.ccv2 .cc-header__mobile {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: calc(100vh - 64px) !important;
  background: #ffffff !important;
  border-top: 1px solid #f3f4f6 !important;
  overflow-y: auto !important;
  z-index: 99 !important;
}

.ccv2 .cc-header__mobile-nav {
  padding: 8px 24px 48px;
}

.ccv2 .cc-header__mobile-nav a {
  color: #0a0a0f !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 20px 0;
  border-bottom-color: #f3f4f6 !important;
}

.ccv2 .cc-header__mobile-nav a:hover {
  opacity: 0.5;
}

/* Logo on mobile */
@media (max-width: 768px) {
  .ccv2 .cc-header__logo,
  .ccv2 .cc-header__logo-img {
    height: 24px; /* h-6 */
  }

  /* Fixed header offset — push all sub-page content below the 64px header */
  .ccv2 main,
  .ccv2 article {
    margin-top: 64px;
  }
}

/* Consent banner モバイル: consent.css (一元管理) に従う — 重複 override は撤廃 */