body {
  margin: 0;
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden; /* 横スクロールを防止 */
}
/* CSS */
h2 {
  display:flex;
	tab-size: 18px;
  align-items:center; /* 線を上下中央揃えに */
  justify-content:center; /* テキスト等を左右中央揃えに */
	font-size: 17px;
}

h2 span {
  padding:0 20px; /* 文字と線の間にスペースを設けるために指定 */
}

h2::before,
h2::after {
  content:""; /* contentは必ず指定 */
  height:1px;
  width:10%;
  background:#fff;
}
/* 絵本紹介カラムのスタイル */
/* 絵本紹介カラムのスタイル */
.book-intro {
  display: flex;
  flex-wrap: wrap; /* レスポンシブ対応 */
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.book-image {
  flex: 1 1 300px; /* 最小幅300px */
  max-width: 300px;
}

.book-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.book-text {
  flex: 2; /* 文章部分を広めにする */
  max-width: 600px;
}

.book-text h2 {
  margin-bottom: 10px;
}

.book-text p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.book-text .book-link {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #a4aae5;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.book-text .book-link:hover {
  background-color: #b8bdec;
}

/* スマホ時（768px以下）のレイアウト調整 */
@media (max-width: 768px) {
  .book-intro {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキスト中央揃え */
  }

  .book-image {
    flex: 0 0 auto; /* フレックスをリセット */
    max-width: 80%; /* 幅を80%に制限 */
  }
	.book-image img{
		width: 120px;
	}
  .book-text {
    max-width: 90%; /* テキスト幅を90%に制限 */
  }
}


/* コンテナのスタイル */
.cow-container {
  position: relative;
  width: 100%;
  height: 300px; /* 必要に応じて高さを調整 */

  overflow: hidden;
}

/* プロフィール全体のスタイル */
.profile {
  display: flex;
  flex-direction: column; /* 縦並びに配置 */
  align-items: center; /* 中央寄せ */
  text-align: center; /* テキストも中央寄せ */
  padding: 20px;

}

/* プロフィール画像 */
.profile-image {
  margin-bottom: 20px; /* 画像とテキストの間に余白 */
}

.profile-image img {
  width: 150px; /* 画像の直径 */
  height: 150px;
  object-fit: cover; /* 正方形の画像を丸くする */
  border-radius: 50%; /* 丸くする */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* プロフィールテキスト */
.profile-text h2 {
  font-size: 1.8rem;

  margin-bottom: 10px;
}

.profile-text p {
  font-size: 1rem;

  line-height: 1.6;
  margin-bottom: 10px;
}


@media (max-width: 768px) {
  .profile {
    padding: 15px;
  }

  .profile-image img {
    width: 120px;
    height: 120px;
  }

  .profile-text h2 {
    font-size: 1.5rem;
  }

  .profile-text p {
    font-size: 0.9rem;
  }
}


/* 星空セクション */
#section-1 {
  background: linear-gradient(to bottom, #bbbbbb, #bbbbbb); /* 青空のグラデーション */
  background-size: cover;
  color: white;
}

/* 空のセクション */
#section-2 {
  background: linear-gradient(to bottom, #2ea2ea, #2ea2ea); /* 青空のグラデーション */
  color: white;
		padding-bottom: 10px;
	padding-top:10px;
}
.sky-section {
  position: relative;
  width: 100%;

  overflow: hidden;
}
/* 固定画像のスタイル */
.fixed-image {
  display: none;
}
@media (max-width: 768px) {

.fixed-image {
  position: fixed;
	display: inline;
  top: 10px;
  right: 10px;
  width: 250px; /* 画像の幅 */
  height: auto; /* アスペクト比を維持 */
  z-index: 10; /* 他の要素の上に表示 */
}
}
/* 草原のセクション */
#section-3 {
  background: linear-gradient(to bottom, #00afa1, #00afa1); /* 草の緑 */
  color: white;
		padding-bottom: 50px;
	padding-top:50px;
}

/* 地中のセクション */
#section-4 {
  background: linear-gradient(to bottom, #db9911, #db9911); /* 地中の茶色 */
  color: white;
		padding-bottom: 50px;
	padding-top:50px;
}
#section-5 {
  background: linear-gradient(to bottom, #8f5a43, #8f5a43); /* 地中の茶色 */
  color: white;

	padding-top:50px;
}
.section {
  color: white;
	text-align: center;
}

/* 草原のセクション */
#section-3 {
  background: linear-gradient(to bottom, #00afa1, #00afa1); /* 草の緑 */
  color: white;
  overflow: hidden; /* 画像が飛び出さないように */
}

/* 牛アニメーションのコンテナ */
.cow-container {
  position: relative;
  width: 100%;
  height: 160px; /* 必要に応じて高さを調整 */
  overflow: hidden; /* 画像がコンテナ外に出ないように設定 */
}

/* 牛の基本スタイル */
.cow {
  position: absolute;
  top: 50%; /* 縦位置を中央揃え */
  width: 130px; /* 牛の画像サイズ */
  height: auto;
  transform: translateY(-50%);
}

/* 左から出る牛 */
.cow-left {
  left: -200px; /* 初期位置（画面外左） */
  animation: moveCowLeft 4s ease-in-out infinite;
	  transform: translateY(-50%) scaleX(-1); /* 左右反転 */
}

/* 右から出る牛 */
.cow-right {
  right: -200px; /* 初期位置（画面外右） */
  animation: moveCowRight 4s ease-in-out infinite;

}

/* 左から出る牛のアニメーション */
@keyframes moveCowLeft {
  0% {
    left: -200px; /* 初期位置（画面外左） */
  }
  50% {
    left: calc(50% - 75px); /* 中央に到達 */
  }
  100% {
    left: 110%; /* 画面外右に移動 */
  }
}

/* 右から出る牛のアニメーション */
@keyframes moveCowRight {
  0% {
    right: -200px; /* 初期位置（画面外右） */
  }
  50% {
    right: calc(50% - 75px); /* 中央に到達 */
  }
  100% {
    right: 110%; /* 画面外左に移動 */
  }
}

/* 画像ギャラリー */
.image-gallery {
  bottom: 10%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  padding: 0; /* 内側の余白を削除 */
}

.image-slot {
  flex: 1; /* 各スロットの幅を均等に設定 */
  aspect-ratio: 1; /* 正方形を維持 */
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0; /* 外側の余白を削除 */
  position: relative; /* スロット内で画像を重ねるために相対位置 */
}

.image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; /* スロット内で画像を重ねる */
  top: 0;
  left: 0;
  opacity: 0; /* 初期状態で非表示 */
  transition: opacity 0.5s ease-in-out; /* フェードイン/アウトアニメーション */
}

.image-slot img.active {
  opacity: 1; /* 表示状態 */
  z-index: 2; /* アクティブ画像を前面に */
}

.image-slot img.next {
  opacity: 0; /* 次の画像は非表示 */
  z-index: 1; /* 次の画像を後ろに */
}
/* Adjust grid for two columns */




/* ボタンスタイル */
.btn {
  display: inline-block;
  padding: 10px 20px;
	margin: 1%;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: #a4aae5;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.btn:hover {
  background-color: #b8bdec;
  transform: scale(1.1);
}
/* Social buttons container */
.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; /* Spacing between buttons */
  margin: 20px 0;
}

/* Individual button styles */
.social-button {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.social-button img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  display: inline-block;
}

.social-button:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}

/* Instagram button specific styles */
.social-button.instagram {
  background-color: #f58529; /* Instagram gradient */
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
  color: white;
  border: none;
}

.social-button.instagram:hover {
  background: linear-gradient(45deg, #ff7e5f, #e42a6a, #9d3dbf, #6356d8);
}

/* X button specific styles */
.social-button.twitter {
  background-color: #1da1f2; /* X (Twitter) blue */
  color: white;
  border: none;
}
/* TikTokボタンのスタイル */
.social-button.tiktok {
  background: linear-gradient(45deg, #25F4EE, #FE2C55, #000000);
  color: white;
  border: none;
}

.social-button.tiktok:hover {
  background: linear-gradient(45deg, #1da1f2, #FF6347, #222222);
}

.social-button.twitter:hover {
  background-color: #0d8aec;
}
/* スターウォーズ風イントロ */
/* スターウォーズイントロ全体 */
/* 全体のスタイル */
body, html {
  height: 100%;
  margin: 0;
}
.content{
	text-align: center;
}
#star{
	background: url("sbg.jpg")  no-repeat center top;
	background-size: 100% 100%; /* 横幅を100%、高さを自動調整 */
}
.star-wars-intro {
  background: url("titama.png")  no-repeat center bottom;
  background-size: 100% auto; /* 横幅を100%、高さを自動調整 */
	text-size: 10vw;
  width: 100%;
  height: 800px;
  font-family: "Droid Sans", Arial, sans-serif;
  font-weight: 700;
  color: #EBD71C;
  overflow: hidden;
  position: relative;
}
@media (max-width: 768px) {
.star-wars-intro {
height: 100%;
	width: 100%;
}
}
/* 最初のテキスト */
.star-wars-intro .intro-text {
  position: relative;
  width: 100%;
	text-align: center;
  font-weight: 700;
   top: 160px; /* 親要素の高さの50% */
	margin-left: 26%;
  color: #fff;
  opacity: 0;
  z-index: 1;
  text-align: center;
  animation: intro 5s ease-out;
	animation-delay: 6s; /* アニメーション発火を2秒遅延 */
}

/* アニメーションキー: introテキスト */
@keyframes intro {
  0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* メインのスクロールコンテンツ */
.star-wars-intro .main-content {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 3;
  width: 110%;
  height: 50em;
  bottom: 0;
	margin-left: -5%;
  font-size: 80px;
  font-weight: bold;
  text-align: justify;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(350px) rotateX(25deg);
}
/* 画面幅が768px以下の場合 */
@media (max-width: 768px) {
 .star-wars-intro .main-content {
    font-size: 10vw;
  }
}


.star-wars-intro .main-content:after {
  position: absolute;
  content: ' ';
  top: 0;
  bottom: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 100%);
  pointer-events: none;
}

/* コンテンツのスクロールアニメーション */
.star-wars-intro .title-content {
  position: absolute;
  top: 100%;
  animation: scroll 170s linear 5s forwards;
	animation-delay: 6.2s; /* アニメーション発火を7秒遅延 */
}

@keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}

/* ロゴのスタイル */
.star-wars-intro .content-header {
  text-align: center;
}
/* SVG背景 */
.svg-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.animated-line {
  stroke: #EBD71C;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 800; /* 線の長さ */
  stroke-dashoffset: 800; /* 初期状態で非表示 */
  animation: drawLine 10s linear forwards;
  animation-delay: 7s; /* アニメーション発火を2秒遅延 */
}



/* SVG線のアニメーション */
@keyframes drawLine {
  to {
    stroke-dashoffset: 0; /* 線を描画 */
  }
}

/* スライドショー */
.slideshow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
background-color: #FFFFFF;
}
.last-slide {
  background-color: #bedddb; /* 最後のスライドの背景色 */
  background-image: none; /* 背景画像を削除 */
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}
.slide {
  background-size: contain; /* 画像を縦横比を維持して完全表示 */
  background-repeat: no-repeat; /* 繰り返しを防止 */
  background-position: center; /* 中央に配置 */
}
.slideshow img {
  width: 100%; /* 幅を100% */
  height: 100%; /* 高さを画面全体に設定 */
}
.slide.visible {
  opacity: 1;
}
.nft{
	width: 90%;
	margin: 5%;
}
.nft img{
	width: 100%;
}

/* 見出しのスタイル */
.star-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* アイコンとテキストの間隔 */
  font-family: Arial, sans-serif;
  font-size: 2rem;
  color: #FFD700; /* ゴールド */
}

/* アイコンのスタイル */
.star-heading i {
  font-size: 1.5rem;
  color: #FFD700; /* ゴールド */
}

/* 見出しのテキスト */
.star-heading h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
  color: white;
}


/* コンテナのスタイル */
.cloud-container {
  position: relative;
  width: 40%;
  height: 300px; /* 必要に応じて高さを調整 */
  overflow: hidden;
	margin-left:  30%;
}
@media (max-width: 768px) {
.cloud-container {
  position: relative;
  width: 100%;
  height: 150px; /* 必要に応じて高さを調整 */
  overflow: hidden;
	margin-left:  0%;
}
}
/* 雲画像のスタイル */
.floating-cloud {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 100%; /* 画像の幅を調整 */
  animation: floatUpDown 6s ease-in-out infinite;
}

/* 雲が上下するアニメーション */
@keyframes floatUpDown {
  0%, 100% {
    transform: translate(-50%, -60%); /* 少し上に移動 */
  }
  50% {
    transform: translate(-50%, -40%); /* 少し下に移動 */
  }
}

/* コンテナのスタイル */
.tanpopo-container {
  position: relative;
  width: 50%;
  height: 300px; /* 必要に応じて高さを調整 */
  overflow: hidden;
	margin-left:  24%;
}
@media (max-width: 768px) {
.tanpopo-container {
  position: relative;
  width: 100%;
  height: 120px; /* 必要に応じて高さを調整 */
  overflow: hidden;
	margin-left:  0%;
}
}

/* 動かない画像のスタイル */
.static-tanpopo {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 100%; /* 画像の幅を調整 */
  z-index: 10; /* 最前面に配置 */
}
.static-mol {
  position: absolute;
  top: 70%; /* 初期位置を中央に設定 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 100%; /* 画像の幅を調整 */
  z-index: 10; /* 最前面に配置 */
}
/* たんぽぽ画像のスタイル */
.floating-tanpopo {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  left: 28%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 15%; /* 画像の幅を調整 */
  animation: floatUpDown2 6s ease-in-out infinite;
}
.floating-tanpopo2 {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  left: 10%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 18%; /* 画像の幅を調整 */
  animation: floatUpDown2 6s ease-in-out infinite;
}
/* んぽぽが上下するアニメーション */
@keyframes floatUpDown2 {
  0%, 100% {
    transform: translate(-50%, -55%); /* 少し上に移動 */
  }
  50% {
    transform: translate(-50%, -45%); /* 少し下に移動 */
  }
}
/* 動かない画像のスタイル */
.static-tanpopo {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 100%; /* 画像の幅を調整 */
  z-index: 10; /* 最前面に配置 */
}


/* コンテナのスタイル */
.onsen-container {
  position: relative;
  width: 50%;
  height: 420px; /* 必要に応じて高さを調整 */
  overflow: hidden;
	margin-left:  25%;
}

@media (max-width: 768px) {
.onsen-container {
  position: relative;
  width: 100%;
  height: 220px; /* 必要に応じて高さを調整 */
  overflow: hidden;
	margin-left:  0%;
}
}
/* 動かない画像のスタイル */
.static-onsen {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 100%; /* 画像の幅を調整 */
  z-index: 10; /* 最前面に配置 */
}
/* たんぽぽ画像のスタイル */
.floating-onsen {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 100%; /* 画像の幅を調整 */
  animation: floatUpDown2 6s ease-in-out infinite;
	z-index: 1;
}
.floating-onsen2 {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 100%; /* 画像の幅を調整 */
  animation: floatUpDown4 6s ease-in-out infinite;
	z-index: 1;
}
/* んぽぽが上下するアニメーション */
@keyframes floatUpDown4 {
  0%, 100% {
    transform: translate(-50%, -65%); /* 少し上に移動 */
  }
  50% {
    transform: translate(-50%, -35%); /* 少し下に移動 */
  }
}
/* 動かない画像のスタイル */
.static-onsen {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 100%; /* 画像の幅を調整 */
  z-index: 0; /* 最前面に配置 */
}


/* 初期状態（非表示） */
/* 初期状態（非表示） */
.fixed-image {
  display: none; /* 初期は非表示 */
  position: fixed;
  top: 10px;
  right: 10px;
  width: 250px;
  height: auto;
  z-index: 10;
  opacity: 0; /* 透明に設定 */
  transition: opacity 0.5s ease; /* フェードイン・アウト用トランジション */
}

/* 表示時のスタイル */
.fixed-image.visible {
  opacity: 1; /* 不透明に設定 */
}


#star .fixed-image {
  display: none; /* 他のセクションでは非表示 */
}
.star-wars-intro .fixed-image {
  display: none; /* 他のセクションでは非表示 */
}
.section-1 .fixed-image {
  display: none; /* 他のセクションでは非表示 */
}
.section-3 .fixed-image {
  display: none; /* 他のセクションでは非表示 */

}
.section-2 .fixed-image {
  display: none; /* 他のセクションでは非表示 */
}

/* 草原のセクション */
.grassland {
  position: relative;
  width: 100%;


  overflow: hidden;
}

/* 綿毛の初期スタイル */
.dandelion-seed {
  position: absolute;
  bottom: 10px; /* 左下に配置 */
  left: 10px;
  width: 600px; /* 綿毛の画像サイズ */
  height: 301px;
  background-image: url('./dandelion.png'); /* 正しいパスに修正 */
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0; /* 最初は透明 */
  animation: none; /* 初期はアニメーションなし */
}

/* 綿毛の飛ぶアニメーション */
@keyframes flyAway {
  0% {
    transform: translate(0, 0) scale(0.8); /* 初期位置と少し小さいサイズ */
    opacity: 1; /* 表示 */
  }
  50% {
    opacity: 1; /* 中間地点でも表示 */
  }
  100% {
    transform: translate(100vw, -100vh) scale(1.2); /* 右上に移動し少し大きく */
    opacity: 0; /* 消える */
  }
}

/* コンテナのスタイル */
.mole-container {
  position: relative;
  width: 50%;
  height: 300px; /* 必要に応じて高さを調整 */
  overflow: hidden;
		margin-left:  24%;
}

@media (max-width: 768px) {
.mole-container {
  position: relative;
  width: 100%;
  height: 160px; /* 必要に応じて高さを調整 */
  overflow: hidden;
		margin-left:  0%;
}
}


/* たんぽぽ画像のスタイル */
.floating-mole {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  right: 90%;
  transform: translate(0%, 100%); /* 中央揃え */
  width: 14%; /* 画像の幅を調整 */
  animation: floatUpDown3 1.4s ease-in-out infinite;
}

.floating-mole2 {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  right: 76%;
  transform: translate(0%, 100%); /* 中央揃え */
  width: 16%; /* 画像の幅を調整 */
  animation: floatUpDown3 1s ease-in-out infinite;
}

.floating-mole3 {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  right: 27%;
  transform: translate(0%, 100%); /* 中央揃え */
  width: 14%; /* 画像の幅を調整 */
  animation: floatUpDown3 1.5s ease-in-out infinite;
}

.floating-mole4 {
  position: absolute;
  top: 50%; /* 初期位置を中央に設定 */
  right: 14%;
  transform: translate(0%, 100%); /* 中央揃え */
  width: 16%; /* 画像の幅を調整 */
  animation: floatUpDown3 1s ease-in-out infinite;
}



/* んぽぽが上下するアニメーション */
@keyframes floatUpDown3 {
  0%, 100% {
    transform: translate(100%, -40%); /* 少し上に移動 */
  }
  50% {
    transform: translate(100%, -60%); /* 少し下に移動 */
  }
}


/* セクションのスタイル */
.cloud-section {
  position: relative;
  width: 100%;
  background-color: #87CEEB; /* 空の背景色 */
  overflow: hidden;
}

/* 静止画像（最前面） */
.foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* 最前面 */
}

.foreground img {
  width: 100%; /* 画像の幅を100%に設定 */
  height: 100%; /* 高さも100%に調整（必要に応じて調整） */
  object-fit: cover; /* アスペクト比を保ちながら親要素にフィット */
}

/* 背面で動く画像 */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5; /* 静止画像より背面 */
  overflow: hidden;
}

/* 背面の画像スタイル */
.moving-image {
  position: absolute;
  width: 150px; /* 動く画像のサイズ */
  height: auto;
  animation: moveUpDown 4s ease-in-out infinite;
}

/* 1つ目の画像（初期位置） */
.moving-image:first-child {
  top: -50%; /* 画面外から開始 */
  left: 30%; /* 任意の位置 */
}

/* 2つ目の画像（初期位置） */
.moving-image:last-child {
  top: 150%; /* 画面外から開始 */
  left: 70%; /* 任意の位置 */
}

/* 上下に動くアニメーション */
@keyframes moveUpDown {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-100%);
  }
}
.fade-out {
  animation: fadeOut 4.1s ease-in-out 4.3s forwards; /* 3秒遅れてフェードアウト */

}

@keyframes fadeOut {
  0% {
    opacity: 1; /* 完全に表示 */
  }
  100% {
    opacity: 0; /* 完全に透明 */
  }
}
.highlighted-text {
  display: inline-block;
  position: relative;
  font-size: 1.2rem; /* テキストサイズ */
  color: #fff; /* テキストを白に設定 */
	background:linear-gradient(transparent 80%, #ff6 80%);
}
/* 蝶々の初期スタイル */
.butterfly {
  position: absolute;
  bottom: -50px; /* 初期位置: 画面外 */
  left: 50%; /* 水平中央 */
  transform: translateX(-50%);
  width: 1168px; /* 蝶々のサイズ */
  height: 529px;
  background-image: url('./butterfly.png'); /* 背景画像パス */
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0; /* 初期状態で非表示 */
	z-index: 11;
}
/* 草原のセクション */
.butter {
  position: relative;
  width: 100%;


  overflow: hidden;
}
/* アニメーション */
@keyframes butterflyFly {
  0% {
    transform: translate(-50%, 100%); /* 画面下からスタート */
    opacity: 0; /* 非表示 */
  }
  20% {
    opacity: 1; /* 徐々に表示 */
  }
  50% {
    transform: translate(-50%, -20%); /* 中段に到達 */
    opacity: 1; /* 表示 */
  }
  75% {
    transform: translate(-50%, -50%); /* 中段で減速 */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -150%); /* 画面外に消える */
    opacity: 0; /* 再び非表示 */
  }
}
.onsenm{
	width: 100%;
}