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

#captionBox {
	background-color: #000;
	color: #fff;
	padding-top: 0;
}
#btnswrap {
	background-color: #000;
}
#mainWrap  {
	position: relative;
	container-type: inline-size;
	background-color: rgba(0,0,0,1.00);
	padding-top: 50vW;
}
#mainWrap .imgBox {
	position: relative;
/*	opacity: 0;*/
}
/*._load #mainWrap .imgBox {
	transition: 2s;
	opacity: 1;
}*/

#mainWrap #names {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0%;

	
}
/*#mainWrap #names.active {
	opacity: 1;
	transform: scale(1);
	transition: 2s 1s;
}*/
#mainWrap .min {
	position: absolute;
	width: 10%;
	left: 0;
	top: 0%;
	opacity: 0;
	transition-duration: 0.6s;
	transform: scale(1.5);
}
#mainWrap .min01 {
	width: 12%;
	left: 4%;
	top: 42%;
	transition-delay: 1s;
	transform: scale(1);
}
#mainWrap .min01.active {
	opacity: 1;
}
#mainWrap .min02 {
	width: 12%;
	left: 27.5%;
	top: 48%;
	transition-delay: 1.5s;
	transform: scale(1);
}
#mainWrap .min02.active {
	opacity: 1;
}
#mainWrap .min03 {
	width: 11.5%;
	left: 81.5%;
	top: 58%;
	transition-delay: 2s;
	transform: scale(1);
}
#mainWrap .min03.active {
	opacity: 1;
}
#mainWrap .points {
	position: absolute;
	width: 82%;
	left: 9%;
	bottom: 2%;
}

#mainWrap .hatubai {
	position: absolute;
	width: 13%;
  left: 2.4%;
  top: 4.6%;
	opacity: 0;
}
#mainWrap .hatubai.active {
	opacity: 1;
}
#mainWrap .central {
	position: absolute;
/*	width: 64%;
	height: 7.1%;*/
	width: 64vw;
	height: 4.48vw;
  left: 18vw;
  top: 12.5%;

	/*transform: scale(1.1);*/
	overflow: visible;
	color: #fff;
	
}
._load #mainWrap .central {
/*transform: scale(1);*/
	transition: 1.5s;
}
#mainWrap .central .txt_central {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	
	opacity: 0;
}
._load #mainWrap .central .txt_central {
	transition: 2.5s 0.5s;
	opacity: 1;
}
#mainWrap .central .txt_central span {
display: block;
	height: 100%;
	width: auto;
	opacity: 0;
	/*transform: scale(2);*/
	
}
#mainWrap .central.active .txt_central span {
	transition-duration: 2.5s;
	transition-delay:0.5s;
	/*transition-delay: calc(1.2s + (0.1s * var(--idx)));*/
	/*transform: scale(1);*/
	opacity: 1;
}
#mainWrap .central .txt_central span img {
height: 100%;
	width: auto;
}
#mainWrap .central .flea {
	position: absolute;
	width: 40%;
	left: 55%;
 bottom: -190%;
	transform: scale(3);
	opacity: 0;
	
}
._load #mainWrap .central .flea {
	transition: 1s ease-out 1.0s;
transform: scale(1);
	opacity: 1;
}

#mainWrap .central h3 {
	text-align: center;
	width:66%;
	margin-left: 17%;
	margin-top: 15%;
	opacity: 0;
}
._load #mainWrap .central h3 {
	opacity: 1;
	transition: 2.5s 0.5s;
}
/*#mainWrap  .central dl {
	text-align: center;
	padding-top: 16%;
	
}*/
/*#mainWrap  .central dt {
	font-size: 1.94vw;
	letter-spacing: 0.2em;
	padding: 0.5em 0 1em 0;
	transition: 1.5s 5s;
	opacity: 0;

}*/


#mainWrap  .central p.lead {
	padding-top: 17%;
	text-align: center;
	font-size: 1.2vw;
	line-height: 2.8;
	letter-spacing: 0.3em;
	
	opacity: 0;
	
}
._load #mainWrap .central p.lead {
	transition: 1.5s 1.5s;
	opacity: 1;
}

#mainWrap .points {
 position: absolute;
 width: 92%;
 left: 4%;
 bottom: 2%;
}



@media screen and (max-width : 959px ){
	#mainWrap #names {
		width: 100%;
		left: 0%;
		bottom: 0%;

	}
	#mainWrap .hatubai {
    position: absolute;
    width: 20%;
    left: 3%;
    top: 3%;

	}
	#mainWrap  .central p.lead {
		font-size: 1.1vw;
		font-size: clamp(13px, 1.1cqw, 16px);
	}
}

@media screen and (max-width: 599px) {
	#mainWrap  {
		padding-top: 100vW;
	}
	#mainWrap .central {
    position: absolute;
    width: 80vw;
    left: 10vw;
height: 5.6vw;
    top: 15vw;
	}
	#mainWrap .central .flea {
    bottom: -190%;
}
		#mainWrap .central h3 {
			width: 100%;
			margin-left: 2%;
/*		top: 24%;
		width: 80%;
		left: 10%;*/
	}
/*	#mainWrap  .central dt {
		font-size: 1.8vw;
		font-size: clamp(13px, 3.6cqw, 24px);
	}*/

	#mainWrap  .central p.lead {
		font-size: 1.1vw;
		font-size: clamp(12px, 2.7cqw, 16px);
		line-height: 3;
		padding-top: 5em;
		letter-spacing: 0.1em;
	}
		#mainWrap .min01 {
		width: 15%;
		left: 2%;
		top: 45%;
	}

	#mainWrap .min02 {
		width: 16%;
		left: 26%;
		top: 48%;
	}

	#mainWrap .min03 {
		width: 16%;
		left: 81%;
		top: 57%;
	}

  
}