@charset "UTF-8";
/* CSS Document */

#pageWrap {
	background-image: url("../img/bg.jpg");
	background-size: cover;
	position: relative;
}
.rankBox {
	display: none;

}
.contactBox {
	background-color: #d9dfe0;
	width: 100%;
	max-width: 100%;
}
#joka {
	position: absolute;
	width: 25.75%;
	top: 0;
	left: 0;
	transition-delay:2s;
}
#leagcyWrap {
	width: 46.8%;
	margin: 7% auto 0;
}
#leagcyWrap .legacyBox {
}
#leagcyWrap .legacyBox .lg01 {
	width: 43%;
	margin: 0 auto;
}
#leagcyWrap .legacyBox .lg02 {
	margin-top: 6.0%;
}
#leagcyWrap .legacyBox p {
	transform: rotateY(90deg) scale(2);
	transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(0.1s * var(--char-index));
	opacity: 0;
}
._load #leagcyWrap .legacyBox p {
	transform: rotateY(0deg) scale(1);
	opacity: 1;
}
#leagcyWrap .name {
	width: 70%;
	margin: 0 auto;
	margin-top: 7%;
	transition-delay:1s;
}
#leagcyWrap #hikari01 {
	position: absolute;
	width: 40%;
	left: 7.6%;
	top: 0;
	animation-name: flicker;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transform: scale(0);
	transition:　0.3s 1.0s;
	
}
._load #leagcyWrap #hikari01 {
	transform: scale(1);
}

@keyframes flicker {
  from {
      opacity: 0.7;
    }
    4% {
      opacity: 0.9;
    }
    8% {
      opacity: 0.65;
    }
    12% {
      opacity: 0.85;
    }
    16% {
      opacity: 0.50;
    }
    20% {
      opacity: 0.7;
    }
    24% {
      opacity: 0.8;
    }
    28% {
      opacity: 0.45;
    }
    32% {
      opacity: 0.50;
    }
    36% {
      opacity: 0.75;
    }
    40% {
      opacity: 0.6;
    }
    44% {
      opacity: 0.8;
    }
    48% {
      opacity: 0.55;
    }
    52% {
      opacity: 0.40;
    }
    56% {
      opacity: 0.90;
    }
    60% {
      opacity: 0.7;
    }
    64% {
      opacity: 0.85;
    }
    68% {
      opacity: .55;
    }
    72% {
      opacity: 0.7;
    }
    76% {
      opacity: 0.6;
    }
    80% {
      opacity: .85;
    }
    84% {
      opacity: 0.60;
    }
    88% {
      opacity: 0.55;
    }
    92% {
      opacity: 0.8;
    }
    96% {
      opacity: 0.5;
    }
    to {
      opacity: 0.7;
    }
}

#h3Box {
	color: #fff;
	padding-top: 7.7%;
	
}
#h3Box h3 {
	text-align: center;
	font-size: 2.8vw;
	letter-spacing: 0.1em;
	line-height: 2;
	transition-delay:2.4s;
}
#h3Box .lead {
	text-align: center;
	font-size: 0.92vw;
	padding-top: 4.0%;
	line-height: 2.8;
	
}
#gaikanBox {
	padding-top: 5%;
	position: relative;
	transform: translateY(5%) scale(0.9);
	transition: 2s ease-out;
}
#gaikanBox.active {
transform: translateY(0%) scale(1);
}
#gaikanBox #hikari02 {
	position: absolute;
	width: 40%;
    left: -1%;
    top: 19%;
	animation-name: flicker;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

}


.mask {
  width: 100%;
  opacity: 1;
  mask-image: linear-gradient(to bottom, #000, #000 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
  mask-size: 100% 400%;
  mask-position: 0 80%;
  transition: all 10s ;
  will-change: opacity, transform, mask-position;
}
.active .mask {
	 mask-position: 0 0%;
}

#siroBox {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
/*	opacity: 0;
	transform: translateY(1%);
	transition: 1s ease-in;*/
}
/*#siroBox.active {
	opacity: 1;
	transform: translateY(0%);
}*/

@media screen and (max-width: 959px) {
	#leagcyWrap {
    width: 60%;
    margin: 7% auto 0;
	}
	#leagcyWrap #hikari01 {
    position: absolute;
    width: 40%;
    left: 1.3%;
    top: 1.5%;
	}
	#h3Box h3 {
		font-size: clamp(26px, 3.5vw, 28px);
	}
	#h3Box .lead {
		font-size: clamp(13px, 1.9vw, 15px);
		transition-delay: 2.8s;

	}
}

@media screen and (max-width: 599px) {
	#pageWrap {
		background-color: #000;
		background-image: url("../img/bg_sp.jpg");
		background-size: 100%;

	}
	#leagcyWrap {
    width: 80%;
    margin: 7% auto 0;
	}
	#leagcyWrap .name {
   margin-top: 4%;
	}
	#leagcyWrap #hikari01 {
    position: absolute;
    width: 40%;
    left: -7.6%;
    top: 2.3%;
	}
	#h3Box h3 {
		font-size: clamp(16px, 4.6vw, 18px);
	}
	#h3Box .lead {
		font-size: clamp(12px, 3.5vw, 14px);
		line-height: 2.4;

	}
	#joka {
    position: absolute;
    width: 25.75%;
    top: 30%;
    left: 0;
    transition-delay: 2s;
	}
}