body {
    background-color: rgb(231, 213, 238);
    height: 1vw;
    width: 100%;
    margin: 0;
  overflow-x: hidden;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);           /* 元の位置へ */
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.re-su {
  width: 100%;
  position: absolute;
  z-index: 10;
  margin-top: 55%;           /* margin-top の代わりにこれを使う */
  left: 0;

  opacity: 0;
  transform: translateX(-100%);  /* 最初は左にずらす */
  transition: all 1s ease;
}

.re-su.active {
  opacity: 1;
  transform: translateX(0);
}
.re-su2 {
  width: 100%;
  position: absolute;
  z-index: 10;

  margin-top: 6%;      /* margin-top の代わり */
  left: 0;

  opacity: 0;
  transform: translateX(0%);  /* 右にずらして待機 */
  transition: all 1s ease;
}

.re-su2.active {
  opacity: 1;
  transform: translateX(0%);
}

.menu{
  position: relative;
   display: flex;
   flex-direction: row-reverse;
   margin-right: 10%;
   margin-top: -62%;

}
.tyuui{
   position: absolute;
  top: 0;
margin-left: 8%;
  margin-top: 153%;
  z-index: 1000; 
  font-size: 1.5vw;
}

.boxtext{
  position: absolute;
  top: 0;
margin-left: 35%;
  margin-top: 95%;
  z-index: 1000; 
  font-size: 2vw;
    text-decoration: underline;
}


.kaihatu{
    position: relative;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  position: absolute;
  top: 0;
margin-left: 6%;
  margin-top: 98%;
  z-index: 1000; 
  font-size: 5vw;
  color: #fff;

}

.sara {
      display: flex;
  flex-wrap: wrap; /* 画面が狭いと折り返す */
    width: 80%;
    position: relative;
    left: 5%;
    margin-top: -10%;
    z-index: 20;
  opacity: 0;
  animation: fadeIn 3s ease forwards;
    
}

.sercleposition {
      display: flex;
  flex-wrap: wrap; /* 画面が狭いと折り返す */
    width: 20%;
    position: relative;
    margin-left: 1%;
    margin-top: 1%;
    top: 0;
    z-index: 50;
    background-color: rgb(255, 255, 255);
    
}

.logoposition {
      display: flex;
  flex-wrap: wrap; /* 画面が狭いと折り返す */
    width: 56%;
    position: relative;
    left: 43%;
    margin-top: -48%;
    z-index: 20;
    opacity: 0;
    transform: translateY(100px);          /* 下にずらす */
    animation: fadeUp 3s ease-out forwards;
    animation-delay: 1s; /* ← 5秒遅らせる */
}

.haikei {
  width: 100%;
  aspect-ratio: 5 / 3;   /* 縦横比を固定 */

  background-color: #fff;
  margin: 0 auto;
  position: relative;
      margin-top: -50%;
}

.mojiretu {
        display: flex;
  flex-wrap: wrap; /* 画面が狭いと折り返す */
    position: relative;
    left: 48%;
    width: 45%;
    margin-top: -50%;
    z-index: 20;
      opacity: 0;
    animation: fadeIn 5s ease forwards;
        animation-delay: 2s; /* ← 5秒遅らせる */

}

.textbottom{
  position: relative;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-size: 3vw;
  font-style: normal;
  color: rgb(255, 255, 255);
  margin: 2vw;
  z-index: 20;
   background: #a17373;
   background-size: 20%;

}



.info {
  width: 95%;
  aspect-ratio: 4/ 1;   /* 縦横比を固定 */

  background-color: #b670a1;
  margin: 0 auto;
  position: relative;
      margin-top: 80%;
      z-index: 10;
}


.choco-wrapper {
  position: absolute;
  margin-top: -45%;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 180;
}

.choco-svg {
  width: 100%;
  height: 40vw;
}

.choco-svg path {
  fill: linear-gradient(#69305b);
}

.taikenban{
  position: relative;
  width: 100%;
  z-index: 20;
  margin-top: 5%;
}



.bottom{
 position: relative;
}

.a{
  position: relative;
  width: 25%;
  left: 0%;
  margin-left: 6%;
  z-index: 20;
  margin-top: 5%;
}

.sita {
  width: 100%;
  aspect-ratio: 6/ 1;   /* 縦横比を固定 */

  background-color: #69305b;
  margin: 0 auto;
  position: relative;
      margin-top: 8%;
      z-index: 10;
}

.under{
  position: absolute;
  width: 25%;
  margin-top: -10%;
  margin-left: 37%;
  z-index: 50;
  background-color: rgb(255, 255, 255);
}

/* ボタン */
#menuBtn {
    position: fixed; 
  font-size: 2vw;
  padding: 2vw 3vw;
  cursor: pointer;
  margin-left: 90%;
  margin-top: -8%;
  z-index: 10000;
  background-color: #a17373; /* 背景色 */
  border: none;              /* 枠線なし */
  border-radius: 50px;        /* 角丸 */
}

/* サイドメニュー */
.side-menu {
    display: none;
  position: absolute;
  top: 0;
  right: -450%; /* 最初は画面外 */
  width: 250px;
  height: 100%;
  background-color: #a17373;
  transition: right 0.3s ease;
  padding-top: 60px;
    z-index: 10000;
}



.side-menu a {
  display: block;
  color: white;
  padding: 15px;
  text-decoration: none;
    z-index: 10000;
}

.side-menu a:hover {
  background-color: #6d4848;
    z-index: 10000;
}

/* 開いた状態 */
.side-menu.active {
    display: block;
  right: 0;
    z-index: 10000;
}

.close-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 24px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}




.junbibottom {
  position: relative;
  width: 100%;
}







/*これより下は紙吹雪を管理するコードです*/

#confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.confetti {
  position: absolute;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation: fall linear forwards;
}

/* 落下＋回転 */
@keyframes fall {
  0% {
    transform: translateY(-10vh) rotate(0deg);
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
  }
}