@charset "UTF-8";





:root{
	--white: hsla(40, 22%, 92%, 1);
	--purewhite: hsla(0, 0%, 100%, 1);

	--black_base: 222, 22%;
	--deepblack: hsla(var(--black_base), 4%, 1);
	--black: hsla(var(--black_base), 8%, 1);

	--deepnavy: hsla(var(--black_base), 12%, 1);
	--navy: hsla(var(--black_base), 20%, 1);
	--lightnavy: hsla(var(--black_base), 28%, 1);
	--thinnavy: hsla(var(--black_base), 44%, 1);

	--gray_base: 222, 8%;
	--deepgray: hsla(var(--gray_base), 24%, 1);
	--gray: hsla(var(--gray_base), 40%, 1);
	--lightgray: hsla(var(--gray_base), 56%, 1);
	--thingray: hsla(var(--gray_base), 72%, 1);

	--blue_base: 216, 80%;
	--deepblue: hsla(var(--blue_base), 48%, 1);
	--blue: hsla(var(--blue_base), 56%, 1);
	--lightblue: hsla(var(--blue_base), 64%, 1);
	--thinblue: hsla(var(--blue_base), 80%, 1);

	--mint_base: 184, 80%;
	--deepmint: hsla(var(--mint_base), 48%, 1);
	--mint: hsla(var(--mint_base), 56%, 1);
	--lightmint: hsla(var(--mint_base), 64%, 1);
	--thinmint: hsla(var(--mint_base), 80%, 1);

	--pink_base: 344, 80%;
	--deeppink: hsla(var(--pink_base), 48%, 1);
	--pink: hsla(var(--pink_base), 56%, 1);
	--lightpink: hsla(var(--pink_base), 64%, 1);
	--thinpink: hsla(var(--pink_base), 80%, 1);

	--purple_base: 256, 32%;
	--deeppurple: hsla(var(--purple_base), 48%, 1);
	--purple: hsla(var(--purple_base), 56%, 1);
	--lightpurple: hsla(var(--purple_base), 64%, 1);
	--thinpurple: hsla(var(--purple_base), 80%, 1);

	--yellow_base: 64, 80%;
	--deepyellow: hsla(var(--yellow_base), 48%, 1);
	--yellow: hsla(var(--yellow_base), 56%, 1);
	--lightyellow: hsla(var(--yellow_base), 64%, 1);
	--thinyellow: hsla(var(--yellow_base), 80%, 1);

	--ls_regular: 0.04em;
	--ls_large: 0.08em;

	--landscape: 4 / 3;
	--wide: 16 / 9;
	--square: 1;

	--rem: 16px;
	--inner: 90vw;

	--card04: 4;
	--card03: 3;
}
@media screen and (min-width: 1920px){
	:root{
		--inner: 1728px;
	}
}
@media screen and (max-width: 1200px){
	:root{
		--card04: 2;
		--card03: 2;
	}
}
@media screen and (max-width: 768px){
	:root{
		--rem: 4.1vw;
		--card04: 1;
		--card03: 1;
	}
}





html{
	font-size: var(--rem);
	letter-spacing: var(--ls_regular);
	background: var(--deepblack);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body{
	margin: 0;
	font-optical-sizing: auto;
	color: var(--white);
	font-style: normal;
	line-height: 2;
	background: var(--deepblack);
}
body{
	/**
	 * 半角英数字の際にGoogle Sans、
	 * それ意外は基本的にはLINE Seed JPが優先され、
	 * もし上記で網羅できないものが出た際はNoto Sans JPとなる
	 */
	font-family: 'Google Sans', 'LINE Seed JP', 'Noto Sans JP', sans-serif;
	/* 400, 700 */
	font-weight: 400;
}





/**
 * font
 */
.noto{
	font-family: 'Noto Sans JP', sans-serif!important;
	/* 100, 200, 300, 400, 500, 600, 700, 800, 900 */
	font-weight: 400;
}
.line{
	font-family: 'LINE Seed JP', 'Noto Sans JP', sans-serif!important;
	/* 100, 400, 700, 800 */
	font-weight: 400;
}
.gs{
	font-family: 'Google Sans', 'Noto Sans JP', sans-serif!important;
	/* 400, 500, 600, 700 */
	font-weight: 400;
	font-variation-settings: 'GRAD' 0;
}
.roboto{
	font-family: 'Roboto', 'Noto Sans JP', sans-serif!important;
	/* 100, 200, 300, 400, 500, 600, 700, 800, 900 */
	font-weight: 400;
	font-variation-settings: 'wdth' 100;
}





/**
 * utility
 */
.nonei{
	display: none!important;
}
.flex{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.fwn{
	flex-wrap: nowrap;
}
.extendview{
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.jcsb{
	justify-content: space-between;
}
.jcc{
	justify-content: center;
}
.jce{
	justify-content: end;
}
.aifs{
	align-items: flex-start;
}
.aife{
	align-items: flex-end;
}
.ais{
	align-items: stretch;
}
.center{
	text-align: center;
}
.right{
	text-align: right;
}
.peni{
	pointer-events: none!important;
}
.vertical{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.text_ellipsis{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}
.text_ellipsis3{
	-webkit-line-clamp: 3;
}
.pr{
	position: relative;
}
.ofh{
	overflow: hidden;
}
.ofxh{
	overflow-x: hidden;
}
.ofya{
	overflow-y: auto;
}
.ofxa{
	overflow-x: auto;
}
.vh{
	visibility: hidden;
}
.wsn{
	white-space: nowrap;
}
.mbme{
	mix-blend-mode: exclusion;
}
.inner{
	width: var(--inner);
	margin: 0 auto;
}
.sp{
	display: none;
}
@media screen and (max-width: 768px){
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
}





/**
 * preparation
 */
section.preparation{
	width: 100%;
	height: 100vh;
	background: var(--deepblack);
}
section.preparation .about{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(900px * (1/4));
}
section.preparation .about svg{
	display: block;
	width: calc(900px * (1/4));
	height: calc((900px * (1/4)) * (225/900));
}
section.preparation .about svg path:not(.font){
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform, opacity;
}
section.preparation .about svg .font{
	fill: var(--purewhite);
}
section.preparation .about svg .pink{
	fill: var(--pink);
	animation: logoGlitchPink 2s steps(1, end) infinite;
}
section.preparation .about svg .yellow{
	fill: var(--yellow);
	animation: logoGlitchYellow 2s steps(1, end) infinite;
}
section.preparation .about svg .blue{
	fill: var(--blue);
	animation: logoGlitchBlue 2s steps(1, end) infinite;
}
section.preparation .about svg .purple{
	fill: var(--purple);
	animation: logoGlitchPurple 2s steps(1, end) infinite;
}
@media screen and (max-width: 768px){
	section.preparation .about{
		width: calc(261.54vw * (1/4));
	}
	section.preparation .about svg{
		width: calc(261.54vw * (1/4));
		height: calc((261.54vw * (1/4)) * (225/900));
	}
}
@keyframes logoGlitchPink{
	0%, 86%, 100%{
		transform: translate(0, 0);
		opacity: 1;
	}
	87%{
		transform: translate(4px, -2px);
		opacity: .96;
	}
	88%{
		transform: translate(-2px, 2px);
		opacity: .64;
	}
	89%{
		transform: translate(8px, 0);
		opacity: 1;
	}
	90%{
		transform: translate(0, 0);
		opacity: .8;
	}
}
@keyframes logoGlitchYellow{
	0%, 84%, 100%{
		transform: translate(0, 0);
		opacity: 1;
	}
	85%{
		transform: translate(-2px, 2px);
		opacity: .72;
	}
	86%{
		transform: translate(4px, -2px);
		opacity: 1;
	}
	87%{
		transform: translate(2px, 4px);
		opacity: .72;
	}
	88%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes logoGlitchBlue{
	0%, 88%, 100%{
		transform: translate(0, 0);
		opacity: 1;
	}
	89%{
		transform: translate(-4px, 2px);
		opacity: .8;
	}
	90%{
		transform: translate(2px, -2px);
		opacity: .64;
	}
	91%{
		transform: translate(-8px, 0);
		opacity: 1;
	}
	92%{
		transform: translate(0, 0);
		opacity: .96;
	}
}
@keyframes logoGlitchPurple{
	0%, 82%, 100%{
		transform: translate(0, 0);
		opacity: 1;
	}
	83%{
		transform: translate(-4px, 2px);
		opacity: .72;
	}
	84%{
		transform: translate(2px, -2px);
		opacity: 1;
	}
	85%{
		transform: translate(-2px, 4px);
		opacity: .64;
	}
	86%{
		transform: translate(0, 0);
		opacity: 1;
	}
}