/* オープニング画面 */
#opening{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg,#000,#2e1a21);   /* 好きな色に */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 5.5s ease;
}

.opening-text{
  color: white;
  font-size: 2rem;
  opacity: 0;
  animation: fadein 2s forwards;
}

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

.scroll-text{
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2rem;
  animation: blink 2s infinite;
}

/* 点滅アニメーション */
@keyframes blink{
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}


/* 消える状態 */
#opening.fadeout{
  opacity: 0;
  pointer-events: none;
}







.scroll-space{

  display: flex;
  justify-content: center;
  align-items: center;
}

.content{
  display: flex;
  align-items: center;   /* 縦位置そろえる */
  gap: 40px;             /* 画像と文字の間隔 */
}

/* 画像 */
.blur{
  width: 500px;
  height: auto;
  filter: blur(10px);
  opacity: 0;
  transition: 1.5s;
}

.blur.scrollin{
  filter: blur(0);
  opacity: 1;
}

/* 文字 */
.text{
  max-width: 400px;
  color: #ffffff;
}

.fade-side{
  width: 500px; /* 好きなサイズ */
  height: auto;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
}


body {
  background: linear-gradient(-45deg, #efd09b, #e6bda9, #e092c2, #c7bb7b);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}