body {
  font-family: 'Yomogi', sans-serif;
}
.yomogi-regular {
  font-family: "Yomogi", cursive;
  font-weight: 400;
  font-style: normal;
}

h1 {
  color: white; /* 文字の色 */
  text-shadow: 1px 1px 0 #ffffff, /* 右下 */
               -1px 1px 0 #ffffff, /* 左下 */
               1px -1px 0 #ffffff, /* 右上 */
               -1px -1px 0 #ffffff; /* 左上 */
}

h2 {
  color: white; /* 文字の色 */
  text-shadow: 1px 1px 0 #ffffff, /* 右下 */
               -1px 1px 0 #ffffff, /* 左下 */
               1px -1px 0 #ffffff, /* 右上 */
               -1px -1px 0 #ffffff; /* 左上 */
}


.img-button img {
  width: 150px;          /* 好きな大きさに調整 */
  display: block;
  margin: 10px auto;     /* 中央に配置 */
  transition: 0.3s;
}

.img-button img:hover {
  transform: scale(1.05);  /* ホバーでちょっと大きく */
  filter: brightness(1.1); /* 明るくして可愛さUP */
}



/* 内容（最初は非表示） */

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}


/* 中身の画像 */
.accordion-content img {
  width: 100%;
  max-width: 700px;
  display: block;
  margin: 15px auto;
  border-radius: 10px;
}
.img-button {
  background: none;
  border: none;
  padding: 0;
}
.img-button:focus {
  outline: none;
}


/* アコーディオン全体の余白 */
.accordion {
  margin: 15px 0;
}

/* ボタン部分 */
.accordion-btn {
  width: 100%;
  padding: 12px 16px;
  background: #ffe8f4;  /* ちょっとピンクで可愛い */
  color: #942968;
  border: none;
  border-radius: 10px;
  text-align: left;
  font-size: 18px;
  font-family: 'Yomogi', sans-serif;
font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}


.accordion-btn:hover {
  background: #ffd4eb;
}

.img-button {
  display: block;
  margin: 8px auto; /* 上下の隙間をそろえる */
  background: none;
  border: none;
  padding: 0;
}
/* ★開いてるとき */
.accordion-btn.active {
  background: #ffccee;  /* ぴんく */
}


/* 星屑惑船ページ限定 */
.hoshikuzu .accordion-btn {
  background: #e6f3ff;
  color: #2f5f8f;
  border: none;
  border-radius: 14px;
  padding: 14px 20px;
  font-family: "Yomogi", sans-serif;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* ★開いてるとき */
.hoshikuzu .accordion-btn.active {
  background: #bcdcff;  /* 少し濃い青 */
}



/* 背景 */
body {
  margin: 0;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* タイトル */
.title-image img {
  display: block;
  margin: 0 auto;
  max-width: 400px; /* ←ここで表示サイズを調整できる！ */
  height: auto;
}

/* ① タイトル：拡大→縮小フェードイン */
@keyframes popFade {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-title {
  opacity: 0;
  animation: popFade 0.7s ease forwards;
}

/* ② タイトル下の文章：下→上フェードイン */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-desc {
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
  animation-delay: 0.6s; /* ①の後に動く */
}

/* ③ キャラ紹介：左→右スライドしながらフェードイン */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-25px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide {
  opacity: 0;
  animation: slideIn 0.7s ease forwards;
}

/* 文字背景 */
.text-bg {
  background: rgba(255, 255, 255, 0.6); /* 白を60%の透明度で */
  padding: 10px 15px;                 /* 周りに少し余白 */
  border-radius: 10px;                /* 角を丸く */
  display: inline-block;              /* 行幅ぴったりに */
}