/* オープニング画面 */
#opening{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg,#0a0b21,#187081,#60e0d4);   /* 好きな色に */
  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{
  
  text-align: center;

}

/* 画像 */
.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, #9befdb, #266280, #110f2b, #bb4891);
  background-size: 400% 400%;
  animation: gradient 7s ease infinite;
  height: 100vh;
}

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





.full-width{
  width: 100%;
  height: auto;
  display: block;
}



.marquee-right {
	overflow: hidden;
}
.marquee-right ul {
	animation: marquee-right 50s linear infinite; /* 20s スクロール1回にかかる秒数 */
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-right ul li {
	list-style: none;
	padding: 0 5px; /* 余白 */
	width: calc(100vw / 3 - 10px); /* 3 写真の枚数にあわせる */
}
.marquee-right img {
	display: block;
	width: 100%;
}
@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}


a {

  color: #ff96d8;  /* オレンジ色のリンク */

}







/* モーダル背景 */
.modal{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* 拡大画像 */
.modal img{
  max-width: 90%;
  max-height: 90%;
}



.container {
  text-align: center;
}