@charset "utf-8";
.bgextend {
		position: relative;
		overflow: hidden;
		opacity: 0;
}
.start .bgextend {
		animation: bgextendAnimeBase 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes bgextendAnimeBase {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}
/*中の要素*/
.bgappearTrigger {
		opacity: 0;
}
.bgappear {
		animation-delay: 0.6s;
		opacity: 0;
}
.start .bgappearTrigger {
		animation: bgextendAnimeSecond 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.5s
}
@keyframes bgextendAnimeSecond {
		0% {
				opacity: 0;
		}
		100% {
				opacity: 1;
		}
}
/*--------- 左から --------*/
/* .bgLRextend::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% + 10px);
  background-color: #333;
}
.start .bgLRextend::before {
  animation: bgLRextendAnime 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
*/
@keyframes bgLRextendAnime {
		0% {
				transform-origin: left;
				transform: scaleX(0);
		}
		50% {
				transform-origin: left;
				transform: scaleX(1);
		}
		50.001% {
				transform-origin: right;
		}
		100% {
				transform-origin: right;
				transform: scaleX(0);
		}
}
.start .bgextend {
		animation: bgextendAnimeBase 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.start .bgLRextend::before {
		animation: bgLRextendAnime 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.start .bgappearTrigger {
		animation: bgextendAnimeSecond 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.5s
}
/* */
.start h1 .bgextend {
		animation: bgextendAnimeBase 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.15s
}
.start h1 .bgLRextend::before {
		animation: bgLRextendAnime 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.15s
}
.start h1 .bgappearTrigger {
		animation: bgextendAnimeSecond 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.65s
}
.start h2 .bgextend {
		animation: bgextendAnimeBase 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.25s
}
.start h2 .bgLRextend::before {
		animation: bgLRextendAnime 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.25s
}
.start h2 .bgappearTrigger {
		animation: bgextendAnimeSecond 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.8s
}
/*--------- 右から --------*/
.bgRLextend::before {
		animation-name: bgRLextendAnime;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #ccc;
}
@keyframes bgRLextendAnime {
		0% {
				transform-origin: right;
				transform: scaleX(0);
		}
		50% {
				transform-origin: right;
				transform: scaleX(1);
		}
		50.001% {
				transform-origin: left;
		}
		100% {
				transform-origin: left;
				transform: scaleX(0);
		}
}
/*--------- 下から --------*/
.bgDUextend::before {
		animation-name: bgDUextendAnime;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #ccc;
}
@keyframes bgDUextendAnime {
		0% {
				transform-origin: bottom;
				transform: scaleY(0);
		}
		50% {
				transform-origin: bottom;
				transform: scaleY(1);
		}
		50.001% {
				transform-origin: top;
		}
		100% {
				transform-origin: top;
				transform: scaleY(0);
		}
}
/*--------- 上から --------*/
.bgUDextend::before {
		animation-name: bgUDextendAnime;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #ccc;
}
@keyframes bgUDextendAnime {
		0% {
				transform-origin: top;
				transform: scaleY(0);
		}
		50% {
				transform-origin: top;
				transform: scaleY(1);
		}
		50.001% {
				transform-origin: bottom;
		}
		100% {
				transform-origin: bottom;
				transform: scaleY(0);
		}
}
.motionItem {
		position: relative;
		display: inline-block;
		opacity: 0;
		transform: scale(8) translateX(20vw);
		transition: opacity 0.8s, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero_catch2 span:nth-child(1), .hero_catch3 span:nth-child(1) {
		transition-delay: 0.02s;
}
.hero_catch2 span:nth-child(2), .hero_catch3 span:nth-child(2) {
		transition-delay: 0.04s;
}
.hero_catch2 span:nth-child(3), .hero_catch3 span:nth-child(3) {
		transition-delay: 0.06s;
}
.hero_catch2 span:nth-child(4), .hero_catch3 span:nth-child(4) {
		transition-delay: 0.08s;
}
.hero_catch2 span:nth-child(5), .hero_catch3 span:nth-child(5) {
		transition-delay: 0.1s;
}
.hero_catch2 span:nth-child(6), .hero_catch3 span:nth-child(6) {
		transition-delay: 0.12s;
}
.hero_catch2 span:nth-child(7), .hero_catch3 span:nth-child(7) {
		transition-delay: 0.14s;
}
.hero_catch2 span:nth-child(8), .hero_catch3 span:nth-child(8) {
		transition-delay: 0.16s;
}
.hero_catch2 span:nth-child(9), .hero_catch3 span:nth-child(9) {
		transition-delay: 0.18s;
}
.hero_catch2 span:nth-child(10), .hero_catch3 span:nth-child(10) {
		transition-delay: 0.20s;
}
.hero_catch2 span:nth-child(11), .hero_catch3 span:nth-child(11) {
		transition-delay: 0.22s;
}
h1 span:nth-child(1) {
		transition-delay: 0.20s;
}
h1 span:nth-child(2) {
		transition-delay: 0.28s;
}
h1 span:nth-child(3) {
		transition-delay: 0.36s;
}
h1 span:nth-child(4) {
		transition-delay: 0.44s;
}
h1 span:nth-child(5) {
		transition-delay: 0.52s;
}
h1 span:nth-child(6) {
		transition-delay: 0.6s;
}
h1 span:nth-child(7) {
		transition-delay: 0.68s;
}
h1 span:nth-child(8) {
		transition-delay: 0.76s;
}
h1 span:nth-child(9) {
		transition-delay: 0.84s;
}
h1 span:nth-child(10) {
		transition-delay: 0.92s;
}
h1 span:nth-child(11) {
		transition-delay: 1s;
}
h1 span:nth-child(12) {
		transition-delay: 1.08s;
}
h1 span:nth-child(13) {
		transition-delay: 1.16s;
}
h1 span:nth-child(14) {
		transition-delay: 1.24s;
}
h2 span:nth-child(1) {
		transition-delay: 0.28s;
}
h2 span:nth-child(2) {
		transition-delay: 0.40s;
}
h2 span:nth-child(3) {
		transition-delay: 0.52s;
}
h2 span:nth-child(4) {
		transition-delay: 0.64s;
}
h2 span:nth-child(5) {
		transition-delay: 0.76s;
}
h2 span:nth-child(6) {
		transition-delay: 0.88s;
}
h2 span:nth-child(7) {
		transition-delay: 1s;
}
h2 span:nth-child(8) {
		transition-delay: 1.12s;
}
h2 span:nth-child(9) {
		transition-delay: 1.24s;
}
h2 span:nth-child(10) {
		transition-delay: 1.36s;
}
.start .motionItem {
		opacity: 1;
		transform: translateX(0);
		transform: scale(1);
}