.back-button {
    position: fixed;
    top: 50px;
    left: 50px;
    background-color: #e9b1e2;
    color: #ffffff;
    border: none;
    width: 50px;
    height: 50px;
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .back-button:hover {
    background-color: #ffffff;
    color: #f4a5ff;
    border: 2px solid #e996ec;
  }
  
  .back-button.scrolled {
    opacity: 0.5;
  }

  /* ホバー時は opacity を元に戻す */
.back-button:hover {
    opacity: 1; /* 不透明に戻す */
  }

body {
    font-family: 'Sawarabi Gothic', sans-serif;
}

.logo {
    width: 50%;        /* 好きな幅 */
    height: 50vh;      /* 好きな高さ */
    background: url("img/MyIconLogo.svg") no-repeat right center;
    background-size: contain;  /* 画像を要素内に収める */
    opacity: 0;
    animation: fadeInSlideUp 1.5s ease-out 0.5s forwards;
    margin-left: 10%;
    margin-top: 100px;
  }
  
  @keyframes fadeInSlideUp {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }

}

.LogoMIDASHI {
    text-align: center;
    margin-top: 100px;
    font-size: 30px;
    color: #2d2d2d;
    opacity: 0;
    animation: fadeInSlideUp 1.5s ease-out 0.5s forwards;
}

.LogoEX {
    text-align: center;
    margin-top: 200px;
    opacity: 0;
    animation: fadeInSlideUp 1.5s ease-out 0.5s forwards;
}

.LogoEX h3 {
    font-size: 30px;
    margin-top: 100px;
    
}

.LogoEX p {
    line-height: 2.5em;
    margin: 50px;
}