/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* overflow-x: hidden を削除 - stickyが効かなくなるため */
}

body {
  width: 100%;
  max-width: 100vw; /* 横スクロール防止の代替策 */
  overflow-x: clip; /* stickyに影響しないoverflow制御 */
}

/* Header - Fixed on SP */
#header {
  position: sticky;
  top: 0;
  z-index: 50;
}

@media (max-width: 991px) {
  #header {
    position: fixed;
    left: 0;
    right: 0;
  }

  /* Add padding to body to prevent content from being hidden behind fixed header */
  body {
    padding-top: 64px;
  }
}

/* Hero Section - Full viewport minus header */
.hero-section {
  height: 100vh;
}

@media (max-width: 991px) {
  /* SP: ヘッダー固定(64px) + bodyのpadding-top(64px)を考慮 */
  .hero-section {
    height: calc(100vh - 64px);
  }
}

@media (min-width: 992px) {
  /* PC: トップバー(約45px) + ヘッダー(約65px)を考慮 */
  .hero-section {
    height: calc(100vh - 110px);
  }
}

/* Animation Elements */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Products Logo Animation */
.products-logo-animation {
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.anim-slide-left,
.anim-fade-right,
.anim-fade-up {
  will-change: transform, opacity;
}

/* Quality Scroll Section */
.quality-scroll-container {
  position: relative;
  width: 100%;
}

.quality-panel {
  position: relative;
  width: 100%;
  height: 100vh;
  will-change: transform;
}