/* ==========================================================
   Nippon Wealth PB Pte. Ltd. — 01 Premium Tonemana Override
   ========================================================== */

/* 色定義 (トンマナ参考より) */
:root {
  --navy-900: #0a1f3d;
  --navy-800: #0f2a52;
  --navy-700: #122a5c;
  --navy-600: #1e4185;
  --gold-500: #b39155;
  --gold-300: #d4af37;
  --ink: #1c2733;
  --ink-soft: #4a5866;
  --line: #dde4ec;
  --bg: #ffffff;
  --bg-alt: #f4f7fa;
  --serif: "Noto Serif JP", "EB Garamond", "Songti TC", serif;
  --sans: "Noto Sans JP", "Helvetica Neue", Arial, "PingFang TC", sans-serif;
  --header-h: 76px;
}

/* ==========================================================
   Animation Un-hiding (Ensures all pages' text is visible immediately)
   ========================================================== */
.fadein_text, .fadein_x, .fadein_x_we, .fadein_x_l, .fadein_x_l_b, .scrollin {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================
   Global Header & Navigation
   ========================================================== */
#gHeader {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line) !important;
  height: var(--header-h) !important;
  width: 100% !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

#gHeader .logo {
  width: auto !important;
  height: auto !important;
}

#gHeader .logo a {
  display: flex !important;
  align-items: center !important;
}

/* Align header contents to maximum 1240px width while background runs 100% */
@media (min-width: 1240px) {
  #gHeader {
    padding: 0 calc((100% - 1240px) / 2) !important;
  }
}

#gNavi ul li a span {
  color: var(--navy-800) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

#gNavi ul li a:hover span {
  color: var(--gold-500) !important;
}

/* PC layout (min-width: 1200px) */
@media (min-width: 1200px) {
  #gHeader .lBox {
    margin: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
  }
  
  /* Accessible hide of company name text which is redundant with horizontal logo */
  #gHeader h1.en {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  }

  #gNavi {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    font-size: 1rem !important;
  }

  #gNavi ul {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #gNavi li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #gNavi li a {
    padding: 8px 12px !important;
    width: auto !important;
    display: block !important;
    text-align: center !important;
  }

  #gNavi li a::before,
  #gNavi li a::after {
    display: none !important;
  }

  #gNavi li a span.en {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
  }

  #gNavi li a small {
    display: block !important;
    font-size: 10px !important;
    color: var(--ink-soft) !important;
  }

  /* Contact Us link button style */
  #gNavi a[href*="/contact/"] {
    background-color: var(--navy-800) !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 6px rgba(15, 42, 82, 0.15) !important;
  }

  #gNavi a[href*="/contact/"] span.en {
    color: #ffffff !important;
    font-size: 13px !important;
    margin-bottom: 0 !important;
  }

  #gNavi a[href*="/contact/"] small {
    display: none !important;
  }

  #gNavi a[href*="/contact/"]:hover {
    background-color: var(--gold-500) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(179, 145, 85, 0.25) !important;
    opacity: 1 !important;
  }

  /* Language switcher inside header */
  .language {
    position: static !important;
    margin: 0 !important;
    display: flex !important;
    gap: 6px !important;
    list-style: none !important;
    z-index: auto !important;
    order: 3 !important;
    margin-left: 20px !important;
  }

  .language li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .language a {
    padding: 6px 10px !important;
    margin: 0 !important;
    display: inline-block !important;
    border-bottom: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    color: var(--ink-soft) !important;
    transition: all 0.2s ease !important;
  }

  .language a:hover {
    background-color: var(--bg-alt) !important;
    color: var(--navy-800) !important;
  }
}

/* Language switch in header (general list) */
ul.language li a {
  color: var(--ink-soft) !important;
  font-size: 12px !important;
}
ul.language li:first-child a {
  color: var(--navy-800) !important;
  font-weight: bold !important;
}

/* SP menu override */
.sp.menu a::before,
.sp.menu a::after,
.sp.menu a span {
  background: var(--navy-800) !important;
}
@media screen and (max-width: 768px) {
  #gNavi {
    background: var(--navy-900) !important;
  }
}

/* ==========================================================
   Global Footer
   ========================================================== */
#gFooter {
  background-color: #07152b !important; /* 深いネイビー */
  border-top: 1px solid var(--line) !important;
  padding: 60px 24px 40px !important;
  color: #ffffff !important;
  margin-top: 0 !important;
}

#gFooter .btmBox {
  max-width: 1240px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 30px !important;
}

#gFooter .fUl {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#gFooter .fUl.main-links li a {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: var(--sans) !important;
}

#gFooter .fUl.legal-links li a {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
}

#gFooter .fUl li a:hover {
  color: var(--gold-500) !important;
}

#gFooter .copyright {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 12px !important;
  margin-top: 10px !important;
  text-align: center !important;
}


/* ==========================================================
   Top Page Specific Styles (Scoped to #main.premium-top-main)
   ========================================================== */
#main.premium-top-main {
  background-color: #ffffff !important;
  color: #1c2733 !important;
  font-family: var(--sans) !important;
}

#main.premium-top-main .inner {
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}

#main.premium-top-main .content {
  background-color: #ffffff !important;
  color: #1c2733 !important;
  padding: 80px 0 !important;
}

/* Scoped headings */
#main.premium-top-main h3,
#main.premium-top-main h4,
#main.premium-top-main .title,
#main.premium-top-main .headLine01 {
  color: var(--navy-800) !important;
  font-family: var(--serif) !important;
  letter-spacing: 0.05em !important;
}

#main.premium-top-main .comttl {
  color: var(--gold-500) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 16px !important;
}

#main.premium-top-main .hero-copy-lines {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  margin-bottom: 60px !important;
}

#main.premium-top-main .hero-copy-lines span {
  color: var(--navy-900) !important;
  font-size: 1.6rem !important;
  line-height: 1.8 !important;
  font-family: var(--serif) !important;
  font-weight: 500 !important;
}

/* Main Visual Area */
#main.premium-top-main .mainVisual.bgBox {
  background-color: var(--navy-900) !important;
  border: none !important;
  position: relative;
  margin-bottom: 40px !important;
}

/* Add a gradient overlay to the video */
#main.premium-top-main .container-video::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(10,31,61,0.6) 0%, rgba(18,42,92,0.6) 55%, rgba(20,80,138,0.4) 100%);
  pointer-events: none;
}

#main.premium-top-main .container-video video {
  filter: none !important;
}

#main.premium-top-main .mainVisual h2 {
  color: #ffffff !important;
  z-index: 10;
  position: relative;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  font-family: var(--serif) !important;
}

/* Image & Text Box Spacing */
#main.premium-top-main .imgBox.clearfix {
  margin-bottom: 100px !important;
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;
}
@media (max-width: 768px) {
  #main.premium-top-main .imgBox.clearfix {
    flex-direction: column !important;
    gap: 30px !important;
  }
}

#main.premium-top-main .textBox.comTextBox {
  padding: 40px !important;
  background-color: transparent !important;
  border: none !important;
  flex: 1 !important;
}

#main.premium-top-main .photoBox {
  flex: 1 !important;
  position: relative !important;
}

#main.premium-top-main .photoBox img {
  filter: none !important;
  border-radius: 4px !important;
  border: none !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.06) !important;
  width: 100% !important;
  height: auto !important;
}

#main.premium-top-main .photoBox .comBgBlue {
  display: none !important;
}

/* Value intro box */
#main.premium-top-main .geryBox {
  background-color: var(--bg-alt) !important;
  border: none !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 80px 40px !important;
  text-align: center !important;
  margin-bottom: 80px !important;
}

#main.premium-top-main .geryBox h4 {
  color: var(--gold-500) !important;
  font-family: var(--sans) !important;
  margin-bottom: 16px !important;
}

#main.premium-top-main .geryBox p {
  color: var(--ink) !important;
  font-size: 15px !important;
}

#main.premium-top-main .geryBox p.title {
  color: var(--navy-800) !important;
  font-size: 1.8rem !important;
  margin-bottom: 24px !important;
  font-family: var(--serif) !important;
}

/* Scoped Buttons */
#main.premium-top-main .btn a,
#main.premium-top-main .comBtn a {
  background-color: var(--navy-800) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 12px 36px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  display: inline-block !important;
  box-shadow: 0 4px 12px rgba(15, 42, 82, 0.15) !important;
  transition: all 0.3s ease !important;
}

#main.premium-top-main .btn a:hover,
#main.premium-top-main .comBtn a:hover {
  background-color: var(--gold-500) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(179, 145, 85, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Contact Area */
#main.premium-top-main .comContact {
  background-color: var(--navy-900) !important;
  border: none !important;
  color: #ffffff !important;
  position: relative !important;
  padding: 100px 24px !important;
}

#main.premium-top-main .comContact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 70% 60% at 85% 20%, rgba(49,182,212,.12), transparent 60%),
    radial-gradient(ellipse 50% 45% at 10% 90%, rgba(30,65,133,.35), transparent 65%);
}

#main.premium-top-main .comContact .whiteBox {
  background-color: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  padding: 60px 40px !important;
  border-radius: 6px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

#main.premium-top-main .comContact .whiteBox .ttl {
  color: var(--gold-500) !important;
  font-size: 1.8rem !important;
  font-family: var(--serif) !important;
}

#main.premium-top-main .comContact .whiteBox p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px !important;
}

#main.premium-top-main .comContact .whiteBox .btn a {
  background-color: var(--gold-500) !important;
  color: #ffffff !important;
}

#main.premium-top-main .comContact .whiteBox .btn a:hover {
  background-color: #c9a560 !important;
  box-shadow: 0 6px 18px rgba(201, 165, 96, 0.3) !important;
}

/* Watermark */
#main.premium-top-main .watermark {
  opacity: 0.05 !important;
  mix-blend-mode: multiply;
}

/* Disabled Links (Recruit, Privacy, Legal) styling */
#gFooter .disabled-link {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 13px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: not-allowed !important;
}

#gFooter .coming-soon {
  color: var(--gold-500) !important;
  font-size: 9px !important;
  border: 1px solid var(--gold-500) !important;
  border-radius: 2px !important;
  padding: 1px 4px !important;
  font-family: var(--sans) !important;
  font-weight: bold !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* SP specific footer styling overrides */
@media (max-width: 768px) {
  #gFooter {
    padding: 40px 16px 30px !important;
  }
  
  #gFooter .btmBox {
    gap: 24px !important;
  }

  #gFooter .fUl.main-links {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 8px !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  #gFooter .fUl.main-links li {
    text-align: center !important;
  }

  #gFooter .fUl.main-links li a {
    padding: 8px !important;
    display: block !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Thin line divider between main-links and legal-links */
  #gFooter .fUl.main-links::after {
    content: "" !important;
    display: block !important;
    grid-column: span 2 !important;
    height: 1px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    margin: 8px 0 !important;
  }

  #gFooter .fUl.legal-links {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  #gFooter .fUl.legal-links li {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  #gFooter .disabled-link {
    font-size: 13px !important;
    line-height: 1.5 !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  #gFooter .copyright {
    font-size: 11px !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
  }
}