html, body { 
  margin: 0; 
  min-height: 100%; 
  font-family: sans-serif; 
  overflow-x: hidden; 
} 


body {
  position: relative;
  z-index: 1;
}

.top-nav {
  position: fixed;
  z-index: 99999;
}

/* ===================== HERO ===================== */

.stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* ← 触れなくする */
}

.panel { 
  position: absolute; 
  top: 0; 
  width: 50%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: transform 1.8s cubic-bezier(.2,.8,.2,1); 
} 

.left { left: 0; background: #FFF4C2; } 
.right { right: 0; background: #E8F4FF; } 

.logo { 
  max-width: 50%; 
  opacity: .9; 
} 

.stage.split .left { transform: translateX(-100%); } 
.stage.split .right { transform: translateX(100%); } 


.hero-next {
  position: relative;
  display: flex;
  height: 100vh;
}

.hero-ec, .hero-movie { 
  width: 50%; 
  padding: 80px; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
} 

.hero-ec { background: #FFF4C2; } 
.hero-movie { background: #E8F4FF; } 

.hero-ec h2 { font-size: 42px; margin-bottom: 20px; } 
.hero-movie h3 { font-size: 28px; margin-bottom: 20px; } 

.hero-ec p, .hero-movie p { 
  font-size: 18px; 
  line-height: 1.8; 
} 

.hero-next a { 
  color: inherit; 
  text-decoration: none; 
} 

/* ===== ボタン ===== */
.btn {
  display: inline-block;
  padding: 12px 22px;
  background: #000;
  color: #fff;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  font-weight: 600;
}

/* パネル連動 */
.hero-ec:hover .btn,
.hero-movie:hover .btn {
  background: #fff;
  color: #000;
}

/* 単体ホバー */
.btn:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}

/* ===================== HERO ホバー演出 ===================== */

.hero-next:hover .hero-ec {
  width: 45%;
}
.hero-next:hover .hero-movie {
  width: 45%;
}

.hero-ec:hover {
  width: 55%;
}
.hero-movie:hover {
  width: 55%;
}

.hero-next div:not(:hover) {
  filter: brightness(0.9);
}

/* ===================== MAIN ===================== */
main { 
  position: relative; 
  z-index: 1; 
} 

.section { padding: 140px 80px; } 
.section-inner { max-width: 1000px; margin: 0 auto; } 

.section h2 { 
  font-size: 42px; 
  margin-bottom: 24px; 
  text-align: center; 
} 

/* ===================== カード ===================== */
.demo-card { 
  background: #fff; 
  padding: 36px 24px; 
  border-radius: 20px; 
  box-shadow: 0 20px 40px rgba(0,0,0,0.15); 
  transition: .5s; 
  text-align: center; 
} 

.demo-card:hover { 
  transform: translateY(-12px); 
} 

.demo-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
  gap: 32px; 
}

/* ===================== フッター ===================== */
footer { 
  background: #111; 
  color: #fff; 
  padding: 80px; 
}