/*タイトルロゴ*/
.titleposition {
  position: absolute;   /* 画面基準 */
  margin-top: 20%;            /* 上端 */
  left: 0;          /* 右端 */

  width: 50%;      /* 好きなサイズ */


  z-index: 1000;     /* 前面に出す */
}

.subpagetitleposition {
  position: absolute;   /* 画面基準 */
  margin-top: 2%;               /* 上端 */
  left: 0;          /* 右端 */

  width: 25%;      /* 好きなサイズ */


  z-index: 1000;     /* 前面に出す */
}
.fade-in-title {
  opacity: 0;
  transform: translateY(200px);          /* 下にずらす */
  animation: fadeUp 2s ease-out forwards;
}


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

.wrap {
  position: relative;
}
/*ミリアトップ画像*/

.top-right {
   position: absolute;   /* 画面基準 */
  margin-top: -5%;            /* 上端 */
  right: 0;          /* 右端 */

  width: 102%;      /* 好きなサイズ */


  z-index: 50;     /* 前面に出す */
}

.top-left {
      display: block;
   position: absolute;   /* 画面基準 */
  margin-top: -20%;            /* 上端 */
  left: 5;          /* 右端 */

  width: 50%;      /* 好きなサイズ */


  z-index: 20;     /* 前面に出す */
}

/*バナー*/
.center-line {
    position: absolute;
    margin-top: 52%;
    width: 100%;
    height: 110vw;              /* ← ウィンドウ幅に応じて変化 */
    min-height: 60px;         /* 小さくなりすぎ防止 */
        /* 太くなりすぎ防止 */
    background-color: #e09cad;
    z-index: 2000;
}


.under-line {
    position: absolute;
    margin-top: 20%;
    width: 100%;
    height: 145vw;              /* ← ウィンドウ幅に応じて変化 */
    min-height: 60px;         /* 小さくなりすぎ防止 */
        /* 太くなりすぎ防止 */
    background-color: #e09cad;
    z-index: 000;
}
.back-line {
    position: absolute;
    margin-top: 160%;
    width: 100%;
    height: 8vw;              /* ← ウィンドウ幅に応じて変化 */
    min-height: 60px;         /* 小さくなりすぎ防止 */

    background-color: #ffffff;
    z-index: 2000;
}


.fade-in {
  opacity: 0;
  animation: fadeIn 6.0s ease-out forwards;
}

/* ノート　*/
.story{
      display: block;
  position: absolute;
  top: 0;
  left: 50%;                 /* 中央基準 */
  transform: translateX(-50%);
  width: 20%;
  margin-top: 80%;
  z-index: 1;
}
.sub-img {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(30px); /* 最初は少し下 */
  width: 50%;
  margin-top: 90%;
  z-index: 1;

  opacity: 0;
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.sub-img.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* 表示時に上へ */
}


.character{
          display: block;
  position: absolute;
  top: 0;
  left: 50%;                 /* 中央基準 */
  transform: translateX(-50%);
  width: 20%;
  margin-top: 6%;
  z-index: 1;
}

.characterpanel{
  
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
    padding: 20px;  
               display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  font-size: 1.5vw;
  margin-top: 60%;
     width: 35%;  
  background-color: #ffffff;
  z-index: 1;
}
.max{
  position: absolute;
  margin-top: -42%;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-size: 3vw;
  font-style: normal;
    padding: 00%;  
               display: block;
               color: #ffffff;
}

.characterpanel2{
  
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
    padding: 20px; 
              display: block;
  position: absolute;
  top: 0;
  left: 10%;
  font-size: 1.5vw;
  margin-top: 130%;
   width: 35vw;  
  background-color: #ffffff;
  z-index: 1;
}


/* 左からフェードイン */
.miria {
  display: block;
  position: absolute;
  top: 0;
  left: 30%;
  width: 30%;
  margin-top: 45%;
  z-index: 1;

  opacity: 0;
  transform: translateX(calc(-50% - 40px)); /* 左にずらす */
  transition: opacity 1s ease, transform 1s ease;
}

.miria.is-visible {
  opacity: 1;
  transform: translateX(-50%); /* 元の位置 */
}

/* 右からフェードイン */
.tsukigase {
  display: block;
  position: absolute;
  top: 0;
  left: 75%;
  width: 32%;
  margin-top: 105%;
  z-index: 1;

  opacity: 0;
  transform: translateX(calc(-50% + 40px)); /* 右にずらす */
  transition: opacity 1s ease, transform 1s ease;
}

.tsukigase.is-visible {
  opacity: 1;
  transform: translateX(-50%); /* 元の位置 */
}

.G_buttom{
    display: block;
  position: absolute;
  top: 0;
  left: 30%;                 /* 中央基準 */
  transform: translateX(-50%);
  width: 15%;
  margin-top: 40%;
  z-index: 1;

}
.S_buttom{
    display: block;
  position: absolute;
  top: 0;
  left: 70%;                 /* 中央基準 */
  transform: translateX(-50%);
  width: 15%;
  margin-top: 40%;
  z-index: 1;

}
.C_buttom{
    display: block;
  position: absolute;
  top: 0;
  left: 50%;                 /* 中央基準 */
  transform: translateX(-50%);
  width: 15%;
  margin-top: 40%;
  z-index: 1;

}
.taikenban_buttom{
    display: block;
  position: absolute;
  top: 0;
  left: 50%;                 /* 中央基準 */
  transform: translateX(-50%);
  width: 65%;
  margin-top: 65%;
  z-index: 1;

}

.tyuui{
  position: absolute;
  top: 0;
  left: 50%;                 /* 中央基準 */
  transform: translateX(-50%);
  margin-top: 88%;
  z-index: 1; 
  font-size: 1vw;

}

.Twitter_buttom{
    display: block;
  position: absolute;
  top: 0;
  left: 30%;                 /* 中央基準 */
  transform: translateX(-50%);
  width: 26%;
  margin-top: 4.5%;
  z-index: 1;

}

.line_buttom{
    display: block;
  position: absolute;
  top: 0;
  width: 100%;
  margin-top: 0%;
  z-index: 1;

}


.miriwave {
     display: block;
     position: absolute;
     top: 0%;
     width: 10%;
     z-index: 500;
     left: 5%;
}







/*サブページ用*/
.titleword{
    font-size:150px;
    z-index: 2000; 
}

.storynote {
  position: absolute;
    margin-left: 27%;
    z-index: 2000; 
    width: 50%;
    margin-top: 50%;
}

.storytitle {
  position: absolute;
  font-size: 13vw;
  color: #ffffff;
  left: 36%;
}


/*ギャラリー用*/

.gallery {
  position: absolute;
  font-size: 13vw;
  color: #ffffff;
  left: 30%;
}


.gallery1{
  position: absolute;
    margin-left: 15%;
    z-index: 2000; 
    width: 20%;
    margin-top: 30%;

}

.gallery2{
    position: absolute;
    z-index: 2000; 
    margin-left: 42%;
    width: 20%;
    margin-top: 30%;

}

.gallery3{
    position: absolute;
   margin-left: 70%;
    z-index: 2000; 
    width: 20%;
    margin-top: 30%;

}

.gallery4{
    position: absolute;
    margin-left: 15%;
    z-index: 2000; 
    width: 20%;
    margin-top: 45%;

}

.gallery5{
    position: absolute;
margin-left: 42%;
    z-index: 2000; 
    width: 20%;
    margin-top: 45%;

}
.gallery6{
    position: absolute;
margin-left: 70%;
    z-index: 2000; 
    width: 20%;
    margin-top: 45%;

}

.sub-title{
  display: block;
  position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000; 
    width: 20%;
    margin-top: 10%;

}














/* 桜の花びらが散る演出　*/
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
html, body {
  margin: 0;
}

body {
  margin-top: 0;
  min-height: 100vw;
  background: linear-gradient(to bottom, #ffffff 0%, #e48888 100%);
}









#petal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
#petal-layer {
  position: absolute;
  inset: 0;             /* 画像と同じ範囲 */
  z-index: 1;
  pointer-events: none;
}
.petal {
  position: absolute;
  top: -50px;
  width: 20px;
  height: 20px;
  background: rgb(255, 243, 245);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  opacity: 0.8;
  animation: fall linear forwards;
}
@keyframes fall {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(100px) translateY(110vh) rotate(360deg);
  }
}