@charset "utf-8";

:root {
	--glitch-width: 100%;
	--glitch-height: 100%;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
}

/* PC
-------------------------------------------------- */
@media screen and (min-width:1200px){
	.teaser {
		background: url("../img/bg-dot.png") center top / 100% auto repeat-y;
		padding: 6vh 4vh;
		position: relative;
		overflow-y: hidden;
		z-index: 1;
	}

	/* 背景アニメ */
	.particles {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.only-pc{display: block;}
	.only-sp{display: none;}

	.particle {
		--particle-duration: 0;
		--particle-delay: 0;
		position: fixed;
		clip-path: inset(0 0 0 0);
		transition: .8s cubic-bezier(0.87, 0, 0.13, 1);
		animation: particleAnime var(--particle-duration) cubic-bezier(0.87, 0, 0.13, 1) infinite both;
		animation-delay: var(--particle-delay);
	}

	.particle.--small {
		--radius: calc(100vw * 12 / 1920);
		width: calc(100vw * 24 / 1920);
		height: calc(100vw * 120 / 1920);
	}

	.particle.--thick {
		--radius: calc(100vw * 16 / 1920);
		width: calc(100vw * 56 / 1920);
		height: calc(100vw * 200 / 1920);
	}

	.particle.--thin {
		--radius: calc(100vw * 4 / 1920);
		width: calc(100vw * 18 / 1920);
		height: calc(100vw * 140 / 1920);
	}

	.particle.--big {
		width: calc(100vw * 56 / 1920);
		height: calc(100vw * 270 / 1920);
	}

	.particle.--right {
		border-radius: var(--radius) 0;
		transform: skewX(-32deg);
		transform-origin: right bottom;
	}

	.particle.--left {
		border-radius: 0 var(--radius);
		transform: skewX(32deg);
		transform-origin: left top;
	}

	.particle.--black {
		background-color: #404040;
	}

	.particle.--blue {
		background-color: #7264d0;
	}

	.particle.--pink {
		background-color: #ff6ea2;
	}

	.particle:nth-child(1){
		top: calc(100vw * 90 / 1920);
		left: calc(100vw * 704 / 1920);
	}

	.particle:nth-child(2){
		top: calc(40vw * 1114 / 1920);
		left: calc(100vw * 206 / 1920);
	}

	.particle:nth-child(3){
		top: calc(100vw * 936 / 1920);
		left: calc(100vw * 630 / 1920);
	}

	.particle:nth-child(4){
		top: calc(100vw * 122 / 1920);
		left: calc(100vw * 1788 / 1920);
	}

	.particle:nth-child(5){
		top: calc(80vw * 860 / 1920);
		left: calc(100vw * 16 / 1920);
	}

	.particle:nth-child(6){
		top: calc(100vw * 147 / 1920);
		left: calc(100vw * -59 / 1920);
	}

	.particle:nth-child(7){
		top: calc(75vw * 1100 / 1920);
		left: calc(100vw * 1064 / 1920);
	}

	.particle:nth-child(8){
		top: calc(50vw * 902 / 1920);
		left: calc(100vw * 1314 / 1920);
	}

	.particle:nth-child(9){
		top: calc(100vw * 52 / 1920);
		left: calc(100vw * 1087 / 1920);
	}

	.particle:nth-child(10){
		top: calc(100vw * 188 / 1920);
		left: calc(100vw * 460 / 1920);
	}

	.particle:nth-child(11){
		top: calc(100vw * 370 / 1920);
		left: calc(100vw * 1632 / 1920);
	}

	.particle:nth-child(12){
		top: calc(100vw * 138 / 1920);
		left: calc(100vw * 1363 / 1920);
	}

	/* ロゴ */
	.logo-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 50px 25px;
		flex-wrap: wrap;
		width: 100%;
		max-width: 650px;
		margin: auto;
		position: relative;
		z-index: 1000;
	}

	.logo-wrap img {
		display: inline-block;
		width: 100%;
		height: auto;
	}

	.logo-wrap .vspo {
		width: 100%;
		max-width: 300px;
	}

	.logo-wrap .cross {
		width: 100%;
		max-width: 50px;
	}

	.group{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 50px 25px;
		width: 100%;
		max-width: 205px;
	}

	.logo-wrap .live {
		width: 100%;
		max-width: 100px;
	}

	.logo-wrap .hive {
		width: 100%;
		max-width: 80px;
	}

	.logo-wrap .collaboration {
		width: 100%;
		max-width: 500px;
	}

	/*.logo-wrap + div {
		width: 100%;
		max-width: 1200px;
		margin: 80px auto 0;
		border: 1px solid #404040;
		border-radius: 60px;
		padding: 4rem 0;
		position: relative;
		z-index: 100;
		text-align: center;
	}

	.logo-wrap + div span {
		color: #404040;
		text-align: center;
		font-size: 40em;
		line-height: 1.35em;
		font-family: 'Oswald', 'Noto Sans JP', '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-weight: 900;
		letter-spacing: -0.02em;
		padding: 0 0.1em;
	}*/

	/* コピーライト */
	.vspo-copyright {
		display: block;
		width: 100%;
		max-width: 1200px;
		margin: 50px auto 0;
		font-size: 12px;
		font-weight: 500;
		color: #000000;
		text-align: right;
	}
}

/* SP
-------------------------------------------------- */
@media screen and (max-width:1199px){
	.teaser {
		background: url("../img/bg-dot.png") center top / cover repeat-y;
		padding: 6vh 20px;
		position: relative;
		overflow: hidden;
	}

	.particles {
		position: fixed;
		top: 80px;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.only-pc{display: none;}
	.only-sp{display: block;}

	.particle {
		--particle-duration: 0;
		--particle-delay: 0;
		position: absolute;
		clip-path: inset(0 0 0 0);
		transition: .8s cubic-bezier(0.87, 0, 0.13, 1);
		animation: particleAnime var(--particle-duration) cubic-bezier(0.87, 0, 0.13, 1) infinite both;
		animation-delay: var(--particle-delay);
	}

	.particle.--small {
		--radius: 3rem;
		width: 7rem;
		height: 33rem;
	}

	.particle.--thick {
		--radius: 5rem;
		width: 14rem;
		height: 50rem;
	}

	.particle.--thin {
		width: calc(100vw * 18 / 1920);
		height: calc(100vw * 140 / 1920);
	}

	.particle.--big {
		width: calc(100vw * 56 / 1920);
		height: calc(100vw * 270 / 1920);
	}

	.particle.--big-2 {
		--radius: 5rem;
		width: 17rem;
		height: 84rem;
	}

	.particle.--right {
		border-radius: var(--radius) 0;
		transform: skewX(-32deg);
		transform-origin: right bottom;
	}

	.particle.--left {
		border-radius: 0 var(--radius);
		transform: skewX(32deg);
		transform-origin: left top;
	}

	.particle.--black {
		background-color: #404040;
	}

	.particle.--blue {
		background-color: #7264d0;
	}

	.particle.--pink {
		background-color: #ff6ea2;
	}

	.particle:nth-child(1){
		top: 100rem;
		left: 87rem;
	}

	.particle:nth-child(2){
		top: 100rem;
		left: 330rem;
	}

	.particle:nth-child(3){
		top: 367rem;
		left: 400rem;
	}

	.particle:nth-child(4){
		top: 494rem;
		left: 265rem;
	}

	.particle:nth-child(5){
		top: 13rem;
		left: -24rem;
	}

	.particle:nth-child(6){
		top: 190rem;
		left: 350rem;
	}

	.particle:nth-child(7){
		top: 390rem;
		left: 10rem;
	}

	.particle:nth-child(8){
		top: -17rem;
		left: 172rem;
	}

	.particle:nth-child(9){
		top: 135rem;
		left: 11rem;
	}

	.particle:nth-child(10){
		top: 41rem;
		left: 380rem;
	}

	.logo-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 20px;
		flex-wrap: wrap;
		width: 100%;
		max-width: 650px;
		margin: auto;
	}

	.logo-wrap img {
		display: inline-block;
		width: 100%;
		height: auto;
	}

	.logo-wrap .vspo {
		width: 100%;
		max-width: 300px;
	}

	.logo-wrap .cross {
		width: 100%;
		max-width: 35px;
	}

	.group{
		display: flex;
		width: 100%;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		gap: 20px;
		margin-bottom: 30px;
	}

	.logo-wrap .live {
		width: 100%;
		max-width: 90px;
	}

	.logo-wrap .hive {
		width: 100%;
		max-width: 70px;
	}

	.logo-wrap .collaboration {
		width: 100%;
		max-width: 350px;
		margin-top: 30px;
	}

	/*.logo-wrap + div {
		width: 100%;
		max-width: 1200px;
		margin: 40px auto 0;
		border: 1px solid #404040;
		border-radius: 30px;
		padding: 15px 0;
		position: relative;
		z-index: 100;
	}

	.logo-wrap + div span {
		display: block;
		font-size: 56px;
		line-height: 1.2em;
		font-family: 'Oswald', 'Noto Sans JP', '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-weight: 900;
		color: #404040;
		text-align: center;
		letter-spacing: -0.02em;
	}*/

	.vspo-copyright {
		display: block;
		width: 100%;
		max-width: 1200px;
		margin: 50px auto 0;
		font-size: 12px;
		font-weight: 500;
		color: #000000;
		text-align: right;
	}
}

/* ---------- */

.glitch_wrap_vspo {
	display: inline-block;
	position: relative;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 300 / 69;
	overflow: hidden;
}

.glitch_wrap_cross {
	display: inline-block;
	position: relative;
	width: 100%;
	max-width: 50px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.glitch_wrap_live {
	display: inline-block;
	position: relative;
	width: 100%;
	max-width: 100px;
	aspect-ratio: 100 / 79;
	overflow: hidden;
}

.glitch_wrap_hive {
	display: inline-block;
	position: relative;
	width: 100%;
	max-width: 80px;
	aspect-ratio: 80 / 106;
	overflow: hidden;
}

.glitch_wrap_collaboration {
	display: inline-block;
	position: relative;
	width: 100%;
	max-width: 500px;
	aspect-ratio: 500 / 81;
	overflow: hidden;
}

.glitch_wrap_comingsoon {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1175px;
	aspect-ratio: 1175 / 360;
	overflow: hidden;
	margin: 80px auto 0;
}
@media screen and (max-width:1199px){
	.glitch_wrap_comingsoon {
		display: block;
		position: relative;
		width: 100%;
		aspect-ratio: 335 / 179;
		overflow: hidden;
		margin: 50px auto 0;
	}
}

.glitch {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.glitch_img {
	position: absolute;
	left: 0;
	top: 0;
	transform: translateZ(0);
	width: var(--glitch-width);
	animation-delay: 0.5s;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.glitch_img:first-child {
	animation: none;
}

.glitch_img:nth-child(2) {animation-name: glitch-anim-1;}
.glitch_img:nth-child(3) {animation-name: glitch-anim-2;}
.glitch_img:nth-child(4) {animation-name: glitch-anim-3;}
.glitch_img:nth-child(5) {animation-name: glitch-anim-flash; background-blend-mode: overlay;}
.glitch_img:not(:first-child) {opacity: 0;}

@keyframes particleAnime {
	0% {clip-path: inset(0 0 0 0);}
	15% {clip-path: inset(100% 0 0 0);}
	20% {clip-path: inset(0 0 100% 0);}
	35% {clip-path: inset(0 0 0 0);}
	100% {clip-path: inset(0 0 0 0);}
}

@keyframes glitch-anim-1 {
	0% {clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); opacity: 1; transform: translate3d(var(--gap-horizontal), 0, 0);}
	2% {clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%)}
	4% {clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);}
	6% {clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);}
	8% {clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);}
	10% {clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);}
	12% {clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);}
	14% {clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);}
	16% {clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);}
	18% {clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);}
	20% {clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);}
	21.9% {opacity: 1; transform: translate3d(var(--gap-horizontal), 0, 0);}
	22%,to {clip-path: polygon(0 0, 0 0, 0 0, 0 0); opacity: 0; transform: translateZ(0);}
}

@keyframes glitch-anim-2 {
	0% {clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); opacity: 1; transform: translate3d(calc(var(--gap-horizontal)*-1), 0, 0);}
	3% {clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);}
	5% {clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);}
	7% {clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);}
	9% {clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);}
	11% {clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);}
	13% {clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);}
	15% {clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);}
	17% {clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);}
	19% {clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);}
	20% {clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);}
	21.9% {	opacity: 1; transform: translate3d(calc(var(--gap-horizontal)*-1), 0, 0);}
	22%,to {clip-path: polygon(0 0, 0 0, 0 0, 0 0); opacity: 0; transform: translateZ(0);}
}

@keyframes glitch-anim-3 {
	0% {clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%); opacity: 1; transform: translate3d(0, calc(var(--gap-vertical)*-1), 0) scale3d(-1, -1, 1);}
	1.5% {clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);}
	2% {clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);}
	2.5% {clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);}
	3% {clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);}
	5% {clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);}
	5.5% {clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);}
	7% {clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);}
	8% {clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);}
	9% {clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);}
	10.5% {clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);}
	11% {clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);}
	13% {clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);}
	14% {clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);}
	14.5% {clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);}
	15% {clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);}
	16% {clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);}
	18% {clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);}
	20% {clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);}
	21.9% {	opacity: 1; transform: translate3d(0, calc(var(--gap-vertical)*-1), 0) scale3d(-1, -1, 1);}
	22%,to {clip-path: polygon(0 0, 0 0, 0 0, 0 0); opacity: 0; transform: translateZ(0);}
}

@keyframes glitch-anim-flash {
	0%,5% {opacity: .2; transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);}
	5.5%,to {opacity: 0;}
}