/* =============================================
   CrossSports Common Styles
   全ページ共通：変数、フォント、共通コンポーネント
   ============================================= */

:root {
  --cs-navy: #0B2B45;
  --cs-navy-mid: #163D5C;
  --cs-navy-light: #1E4D72;
  --cs-teal: #4EC9B0;
  --cs-teal-light: #6FD9C4;
  --cs-teal-dark: #2A9D8F;
  --cs-cream: #F0F7F4;
  --cs-white: #fff;
  --cs-gray: #6B8A80;
  --cs-dark: #0A1F30;
  --cs-font-jp: 'Zen Kaku Gothic New', sans-serif;
  --cs-font-en: 'Outfit', sans-serif;
}

/* ===== HEADER NAV OVERRIDE ===== */
.site-header {
  background: var(--cs-navy) !important;
}
.site-header-logo {
  display: none !important;
}
.global-nav-list > li > a {
  color: #fff !important;
}
.global-nav-list > li > a:hover {
  color: var(--cs-teal) !important;
}
.global-nav-list > li .global-nav-name {
  color: #fff;
}
.global-nav-list > li .global-nav-description {
  color: rgba(255, 255, 255, 0.6);
}
.global-nav-list > li:hover .global-nav-name,
.global-nav-list > li:hover .global-nav-description {
  color: var(--cs-teal);
}
/* サブメニュー */
.global-nav .sub-menu {
  background: var(--cs-navy-mid);
}
.global-nav .sub-menu li a {
  color: #fff !important;
}
.global-nav .sub-menu li a:hover {
  color: var(--cs-teal) !important;
  background: var(--cs-navy-light);
}

/* Lightning overrides */
.cs-front {
  font-family: var(--cs-font-jp);
  color: var(--cs-dark);
  overflow-x: hidden;
}
/* Lightning h2 デフォルトボーダー無効化 */
.cs-front h2.cs-section__title {
  border: none;
  padding: 0;
  margin-bottom: 16px;
}
.cs-front h2.cs-section__title::before,
.cs-front h2.cs-section__title::after {
  display: none;
}
.cs-front *,
.cs-front *::before,
.cs-front *::after {
  box-sizing: border-box;
}

/* ===== SECTION COMMON ===== */
.cs-section {
  padding: 100px 60px;
}
.cs-section__inner {
  max-width: 1400px;
  margin: 0 auto;
}
.cs-section-dark {
  background: var(--cs-navy);
  padding: 100px 60px;
}
.cs-section-cream {
  background: var(--cs-cream);
  padding: 100px 60px;
}
.cs-eyebrow {
  font-family: var(--cs-font-en);
  font-size: 12px;
  font-weight: 700;
  color: var(--cs-teal-dark);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cs-eyebrow--teal {
  color: var(--cs-teal);
}
.cs-section__title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 16px;
}
.cs-section__title--white {
  color: #fff;
}
.cs-section__sub {
  font-size: 14px;
  color: var(--cs-gray);
  line-height: 1.8;
  max-width: 500px;
}
.cs-accent {
  color: var(--cs-teal);
}

/* ===== COMMON BUTTONS ===== */
.cs-btn-teal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cs-teal);
  color: var(--cs-navy);
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: all .3s;
}
.cs-btn-teal:hover {
  background: var(--cs-teal-light);
  transform: translateY(-2px);
  color: var(--cs-navy);
}
.cs-btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #06C755;
  color: #fff;
  padding: 16px 40px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: all .3s;
}
.cs-btn-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(6,199,85,.3);
  color: #fff;
}

/* ===== CTA COMMON ===== */
.cs-cta {
  padding: 100px 60px;
  text-align: center;
  background: var(--cs-cream);
  position: relative;
  overflow: hidden;
}
.cs-cta__inner {
  max-width: 650px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.cs-cta h2 {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--cs-dark);
}
.cs-cta p {
  font-size: 15px;
  color: var(--cs-gray);
  line-height: 1.8;
  margin-bottom: 36px;
}

/* ===== ANIMATIONS ===== */
@keyframes csFadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.cs-anim {
  opacity: 0;
  transform: translateY(40px);
}
.cs-anim.cs-visible {
  animation: csFadeInUp .8s ease-out both;
}
.cs-anim--d1.cs-visible { animation-delay: .15s; }
.cs-anim--d2.cs-visible { animation-delay: .3s; }
.cs-anim--d3.cs-visible { animation-delay: .45s; }

/* ===== RESPONSIVE COMMON ===== */
@media (max-width: 900px) {
  .cs-section,
  .cs-section-dark,
  .cs-section-cream,
  .cs-cta {
    padding: 60px 20px;
  }
  .cs-section__title {
    font-size: 28px;
  }
  .cs-cta h2 {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .cs-section__title {
    font-size: 22px;
  }
}

/* モバイルでヒーロー説明文の<br>を無効化（自然折り返し） */
@media (max-width: 768px) {
  [class*="hero__desc"] br,
  [class*="hero__tagline"] br {
    display: none;
  }
}