/* 基本設定 */
:root {
  --primary-color: #2563EB;
  --accent-color: #F7DF1E; /* JSらしさをアクセントに */
  --bg-color: #FFFFFF;
  --card-bg: #FAFBFC;
  --text-color: #1F2937;
  --subtext-color: #4B5563;
  --border-radius: 12px;
  --transition-speed: 0.3s;
  font-family: 'Inter', sans-serif;
}
body {
  margin: 0;
  background: #eee;
  color: var(--text-color);
  line-height: 1.6;
}
/* body {
  background: #eee;
  display: flex;
  justify-content: center;
  padding-top: 30px;
  font-family: sans-serif;
} */

/* ヘッダー */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--bg-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.site-header .logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
}
.site-header nav a {
  margin: 0 12px;
  text-decoration: none;
  color: var(--subtext-color);
  font-weight: 500;
  padding: 4px 8px;
  transition: color var(--transition-speed);
}
.site-header nav a:hover,
.site-header nav a.active {
  color: var(--primary-color);
}


body {
  margin: 0;
  font-family: sans-serif;
  overflow: hidden;
  text-align: center;

  /* 画像とグラデーションを同時に指定 */
  background-image:url("images/kusa2.png"),
      linear-gradient(#c7eaff, #ffffff);

  /* 画像は横方向だけリピート */
  background-repeat: repeat-x, no-repeat;

  /* 画像は下に配置、グラデーションは上から */
  background-position: bottom center, top;

  /* 必要なら画像サイズ調整 */
  background-size: auto, cover;
}

h1 {
  margin: 16px 0;
  color: #ff6b9d;
}

#field {
  position: relative;
  width: 100vw;
  height: calc(100vh - 80px);
  overflow: hidden;
  
}

/* 花びら */
.petal {
  position: absolute;
  width: 24px;
  pointer-events: none;
  animation: fall linear forwards;
}

@keyframes fall {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(40px) rotate(180deg);
  }
}

/* ちょうちょ */
#butterfly {
  position: absolute;
  top: 40px;
  width: 64px;
}

/* 種 */
.seed {
  position: absolute;
  width: 20px;
}