/* ============================================
   All Page Headers - White Text on Dark Background
   Excludes About page which has its own styling
   ============================================ */
section.l-header:not(.p-about-header) .l-header__en {
  color: #fff !important;
}
section.l-header:not(.p-about-header) .l-header__ja {
  color: #fff !important;
}
section.l-header:not(.p-about-header) .l-header__ja-sup {
  color: rgba(255, 255, 255, 0.7) !important;
}
section.l-header:not(.p-about-header) .l-header__desc {
  color: rgba(255, 255, 255, 0.8) !important;
}
section.l-header:not(.p-about-header) h1,
section.l-header:not(.p-about-header) h2,
section.l-header:not(.p-about-header) h3,
section.l-header:not(.p-about-header) span,
section.l-header:not(.p-about-header) p {
  color: #fff !important;
}

/* ============================================
   News Page Tab Fix - Active tab white text
   ============================================ */
.p-news-tab--active {
  color: #fff !important;
}

/* ============================================
   Mobile: Language button above bottom banners
   ============================================ */
@media (max-width: 767px) {
  .hitokiwa-lang {
    bottom: 76px !important;
    left: 12px !important;
  }
}

/* ============================================
   Phone number position fix (MOBILE ONLY)
   ============================================ */
@media (max-width: 767px) {
  .c-header__main-logo {
    order: -2 !important;
  }
  .c-header__main > a[href^="tel:"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin-left: 8px !important;
    margin-right: auto !important;
    flex-shrink: 0 !important;
    order: -1 !important;
  }
  .c-header__main-tel-number {
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .c-header__main-tel {
    display: none !important;
  }
}

/* ============================================
   Achievements cards: reduce blank space
   margin-top:90px on text + min-height:345px creates gap
   ============================================ */
.p-front-achievements__col-text {
  margin-top: 20px !important;
}
.p-front-achievements__col {
  min-height: auto !important;
  height: auto !important;
}
.p-front-achievements__col-heading-icon {
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 767px) {
  .p-front-achievements__col {
    padding: 16px !important;
  }
  .p-front-achievements__col-text {
    margin-top: 16px !important;
  }
}

/* ============================================
   CTA Banner: white text on dark background
   Theme h2{color:#000} overrides inherited color
   ============================================ */
.p-cta-banner h2,
.p-cta-banner__title {
  color: #fff !important;
}
.p-cta-banner__subtitle {
  color: #ccc !important;
}
.p-cta-banner__btn--primary {
  color: #000 !important;
  background: #fff !important;
}
.p-cta-banner__btn--secondary {
  color: #fff !important;
}
.p-cta-banner__btn--line {
  color: #fff !important;
}

/* ============================================
   GRADIENT BACKGROUNDS - All Pages
   Replace flat #000 with stylish gradients
   ============================================ */

/* Page Headers (FAQ, News, Service, Contact, Cases, Privacy etc.) */
section.l-header:not(.p-about-header) {
  background: linear-gradient(160deg, #0a0a0a 0%, #1a1a2e 40%, #16213e 100%) !important;
}

/* Service Recruit/School header - has bg image, add overlay */
.p-service-header {
  background: linear-gradient(160deg, #0a0a0a 0%, #1a1a2e 40%, #16213e 100%) !important;
}

/* Front page service section */
.p-front-service {
  background: linear-gradient(160deg, #0a0a0a 0%, #12122a 50%, #1a1a2e 100%) !important;
}

/* CTA Banner sections */
.p-cta-banner {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0d2137 100%) !important;
}

/* Footer */
.l-footer {
  background: linear-gradient(180deg, #0a0a0a 0%, #111 40%, #1a1a2e 100%) !important;
}

/* Header (top nav - desktop has semi-transparent gradient, skip) */

/* ============================================
   Bottom floating banners - complete override
   ============================================ */
nav.c-header__bottom-banners {
  width: auto !important;
  right: 16px !important;
  bottom: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
a.c-header__bottom-banner {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%) !important;
  width: auto !important;
  min-width: 180px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
  text-decoration: none !important;
  transition: transform 0.2s !important;
}
a.c-header__bottom-banner:hover {
  transform: translateY(-2px) !important;
}
.c-header__bottom-banner .c-header__bottom-banner-text {
  display: none !important;
}
.c-header__bottom-banner .c-header__bottom-banner-heading {
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  color: #fff !important;
  flex: 1 !important;
}
.c-header__bottom-banner .c-header__bottom-banner-icon {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 767px) {
  nav.c-header__bottom-banners {
    flex-direction: row !important;
    right: 8px !important;
    bottom: 16px !important;
    left: 8px !important;
    gap: 6px !important;
  }
  a.c-header__bottom-banner {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    justify-content: center !important;
  }
  .c-header__bottom-banner .c-header__bottom-banner-heading {
    font-size: 13px !important;
  }
  .c-header__bottom-banner .c-header__bottom-banner-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Cases page specific */
.p-cases-header {
  background: linear-gradient(160deg, #0a0a0a 0%, #1a1a2e 40%, #16213e 100%) !important;
}
.p-cases-cta {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0d2137 100%) !important;
}
.p-cases-note {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important;
}

/* Contact CTA section */
.p-contact-cta {
  background: linear-gradient(160deg, #0a0a0a 0%, #1a1a2e 40%, #16213e 100%) !important;
}

/* News active tab */
.p-news-tab--active {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%) !important;
}

/* Column page tabs */
.p-news-tabs {
  gap: 12px !important;
  padding: 8px 0 !important;
}
.p-news-tab {
  padding: 12px 16px !important;
  border-radius: 6px !important;
}

/* ============================================
   Flow Section: Fix broken arrows + mobile layout
   ============================================ */
.p-service-flow__col-arrow {
  max-width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 767px) {
  .p-service-flow__row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .p-service-flow__col {
    flex: 1 1 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding: 16px 20px !important;
    background: #f5f5f5 !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .p-service-flow__col-arrow {
    display: none !important;
  }
  .p-service-flow__col-number {
    font-size: 12px !important;
    color: #6c8954 !important;
    white-space: nowrap !important;
  }
  .p-service-flow__col-heading {
    font-size: 18px !important;
  }
  .p-service-flow__col:nth-child(2),
  .p-service-flow__col:nth-child(3),
  .p-service-flow__col:nth-child(4) {
    margin-top: 0 !important;
  }
}

/* ============================================
   CTA Stats Bar - Numbers that sell
   ============================================ */
.p-cta-banner__stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 32px 0 8px;
  flex-wrap: wrap;
}
.p-cta-banner__stat {
  text-align: center;
}
.p-cta-banner__stat-num {
  display: block;
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}
.p-cta-banner__stat-unit {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}
@media (max-width: 767px) {
  .p-cta-banner__stats {
    gap: 20px;
  }
  .p-cta-banner__stat-num {
    font-size: 32px;
  }
  .p-cta-banner__stat-unit {
    font-size: 11px;
  }
}

/* ============================================
   Service About Cards - remove forced aspect ratio
   ============================================ */
.p-service-about__col {
  aspect-ratio: unset !important;
  padding: 28px 24px !important;
}