@charset "utf-8";
/* 黄金の一矢　CSS */

body {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  color: #eee;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      to bottom,
      rgba(10,15,30,0.10),  /* 上部：少し明るく */
      rgba(2,4,9,0.70)     /* 下部：深さは残す */
    ),
    url("../top-image.png") center / cover no-repeat;
}

.hero-inner {
  text-align: center;
  max-width: 600px;
  margin-top: -5vh;
  position: relative;
  z-index: 2;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  margin-bottom: 0.1em;
}

.subtitle {
  color: rgba(255, 235, 200, 0.75);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  margin-top: -0.1em;
}

.enter-btn {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.8em 2.5em;
  border: 1px solid #d4af37;
  color: #d4af37;
  text-decoration: none;
  transition: 0.3s;
}

.enter-btn:hover {
  background: #d4af37;
  color: #000;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fade 1s ease forwards;
}

@keyframes fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}