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


#mainWrap {
	height: 60vw;
	overflow: hidden;
	position: relative;
	container-type: inline-size;
	background-color: #000;
	
}
#mainWrap #mainBox {
	position: relative;
}
#mainBox .txtBox {
	position: absolute;
		width: 46%;
		height: 34vw;
		left: 27%;
		top: 10%;
	div {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
	}
	.txt01 {
		width: 44%;
		left: 28%;
	}
	.txt02 {
		top: 26.5%;
	}
	.txt03 {
		top: 61%;
	}
	.txt04 {
		top: 96%;
	}
}
#mainBox .txt0 {
	opacity: 0;
	transform: scale(1.1);
}
.start #mainBox .txt0 {
	transition-duration: 1s;
	transition-timing-function: ease-in;
	opacity: 1;
	transform: scale(1);
}
.start #mainBox .txt01 {
	transition-delay: 0.5s;
}
.start #mainBox .txt02 {
	transition-delay: 1s;
	
}
.start #mainBox .txt03 {
	transition-delay: 1.5s;
	
}
.start #mainBox .txt04 {
	transition-delay: 2s;
}
#mainBox .imgBox {
	opacity: 0;
}
.start #mainBox .imgBox {
	opacity: 1;
	transition: opacity 3s 2s;
}
.start #mainBox {
	transform: translateY(-52%);
	transition:6s ease-out 3.5s;
}
	
#mainWrap #btmBox {
	/*opacity: 0;*/
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	/*background-color: rgba(0,0,0,0.6);*/
	color: #fff;
	h2 {
		position: absolute;
		writing-mode: vertical-rl;
		bottom: 3%;
		left: 3%;
		font-size: 4cqw;
		letter-spacing: 0.2em;
		font-weight: 400;
	}
	.h3Box {
		position: absolute;
		left: 12%;
		bottom: 6%;
		h3 {
			font-size: 2cqw;
			letter-spacing: 0.1em;
			font-weight: 300;
		}
		.lead {
			font-size: 1.0cqw;
			text-align: left;
			padding-top: 1em;
			line-height: 2.2;
		}
	}
	.name {
		position: absolute;
		width: 18%;
		background-color: aqua;
		right: 14%;
		bottom: 28%;
		background: #FFF8A6;
background: linear-gradient(330deg, rgba(255, 248, 166, 1) 0%, rgba(237, 121, 84, 1) 67%);
		background: linear-gradient(135deg, rgba(255, 248, 166, 1), rgba(237, 121, 84, 1), #86a8e7, rgba(255, 248, 166, 1));
  background-size: 400% 400%;
  /* アニメーションの指定 */
  animation: gradientShift 10s ease infinite;

	}
/*	.genchi {
		position: absolute;
		width: 62%;
		right: 0%;
		bottom: 0%;
		opacity: 1;
	}*/
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#mainWrap .sin {
	position: absolute;
	font-size: 2.4cqw;
	right: 2%;
	top: 2%;
	color: #c6bf8a;
}
#btmBox h2 {
	opacity: 0;
	transform: scale(1.2);
}
#btmBox .h3Box {
	opacity: 0;
}
#btmBox .name {
	opacity: 0;
	transform: scale(1.5) translateY(-20%);
}
.start #btmBox h2 {
	opacity: 1;
	transform: scale(1);
	transition: 2s 8s;
}
.start #btmBox .h3Box {
	opacity: 1;
	transition: 3s 9s;
}
.start #btmBox .name {
	opacity: 1;
	transform: scale(1) translateY(0%);
	transition: 1s ease-out 9s;
}


@media screen and (max-width: 599px){
	#mainWrap {
		height: 120vw;
	}
	#mainBox .txtBox {
	position: absolute;
		width: 66%;
		height: 48vw;
		left: 17%;
		top: 10%;
	}
	.start #mainBox {
		transform: translateY(-40%);
	}
	#mainWrap #btmBox {
	h2 {
		font-size: 6cqw;
		left: 2%;
		bottom: 1%;
	}
	.h3Box {
		position: absolute;
		left: 17%;
		bottom: 3%;
		h3 {
			font-size: 4.2cqw;
			text-align: left;
		}
		.lead {
			font-size: 3.2cqw;
			line-height: 1.8;
		}
	}
	.name {
		width: 28%;
		right: 10%;
		bottom: 48%;

	}
	
}