body {

	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;

	font-size:125px;
	color:#FFFF;

	background-color:#000;

	position:relative;
}

h1 {
	display:none;
}

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



img {
	vertical-align:top;
}

#preloader {
	width:100%;
	height:100dvh;

	left:0;
	top:0;

	background-color:#000;

	position:absolute;
	z-index:100;
}

#square-spin {
	--size: 50px;
	--stroke-width: calc(var(--size) / 6);
	--color: #F9003B;
	--animation-timing-function: linear;
	--animation-duration: 2s;
	width: var(--size);
	height: var(--size);

	left:calc(50% - 25px);
	top:calc(50% - 25px);

	background-image:
		radial-gradient(circle at var(--stroke-width) var(--stroke-width), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%),
		radial-gradient(circle at calc(100% - var(--stroke-width)) var(--stroke-width), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%),
		radial-gradient(circle at calc(100% - var(--stroke-width)) calc(100% - var(--stroke-width)), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%),
		radial-gradient(circle at var(--stroke-width) calc(100% - var(--stroke-width)), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%);
	animation: var(--animation-timing-function) var(--animation-duration) infinite square-spin-2-animation;

	position:absolute;
	z-index:100;
}

@keyframes square-spin-2-animation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}





#mcont {
	width:100%;
	height:100dvh;

	position:relative;

	overflow:hidden;

}

#marquee-top {
	width:100%;
	height:40px;

	left:0;
	top:0;

	background-color:#000;

	position:absolute;
	z-index:110;

	overflow:hidden;
}

#marquee-top-in {
	width:100%;
	height:100%;

	left:0;
	top:0;

	position:absolute;
	z-index:100;

	overflow:hidden;
}

#marquee-bottom {
	width:100%;
	height:40px;

	left:0;
	bottom:0;

	background-color:#000;

	position:absolute;
	z-index:110;

	overflow:hidden;
}

#marquee-bottom-in {
	width:100%;
	height:100%;

	left:0;
	top:0;

	position:absolute;
	z-index:100;

	overflow:hidden;
}



#marea {
	width:100%;
	height:100%;

	position:relative;
}

.typef {
	width:90%;
	max-width:1200px;

	position:absolute;
	z-index:100;
}

#type1 {
	bottom:535px;
}
#type2 {
	bottom:390px;
}
#type3 {
	bottom:245px;
}
#type4 {
	bottom:100px;
}


#type1.cur::after {
	content: "|";
	color: #FFF;
	animation: blink 1s infinite;
}
#type1.cur2::after {
	content: "|";
	color: #F9003B;
	animation: blink 1s infinite;
}
#type2.cur::after {
	content: "|";
	color: #FFF;
	animation: blink 1s infinite;
}
#type2.cur2::after {
	content: "|";
	color: #F9003B;
	animation: blink 1s infinite;
}
#type3.cur::after {
	content: "|";
	color: #FFF;
	animation: blink 1s infinite;
}
#type3.cur2::after {
	content: "|";
	color: #F9003B;
	animation: blink 1s infinite;
}
#type4.cur::after {
	content: "|";
	color: #FFF;
	animation: blink 1s infinite;
}
#type4.cur2::after {
	content: "|";
	color: #F9003B;
	animation: blink 1s infinite;
}


@keyframes blink {
	0%,100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

.typef2 {
	width:80%;
	max-width:1000px;

	color:#000;

	position:absolute;
	z-index:99;
}

#type1-2 {
	bottom:531px;
}
#type2-2 {
	bottom:386px;
}
#type3-2 {
	bottom:241px;
}
#type4-2 {
	bottom:96px;
}


.btndef {
	width:60px;
	height:200px;

	right:0;
	top:150px;

	font-size:31px;
	color:#000;

	background-color:#F9003B;
	border-top:2px solid #F9003B;
	border-left:2px solid #F9003B;
	border-bottom:2px solid #F9003B;

	position:absolute;
	z-index:100;

	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;
}

.btndef:hover {
	color:#F9003B;
	background-color:#000;
}

.btndef p {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.btndef-cyan {
	top:380px;
	background-color:#00a1e9;
	border-top:2px solid #00a1e9;
	border-left:2px solid #00a1e9;
	border-bottom:2px solid #00a1e9;
}
.btndef-cyan:hover {
	color:#00a1e9;
}

.btndef-debug {
	height:60px;
	top:auto;
	bottom:50px;
	background-color:#000000;
	border-top:2px solid #000000;
	border-left:2px solid #000000;
	border-bottom:2px solid #000000;
}
.btndef-debug:hover {
	color:#000000;
}


#imgarea-ref {
	width:100%;
	height:100%;

	left:-100%;
	top:-100%;

	background-color:#FFFFFF;

	opacity:0;
	transform:rotate(-45deg);

	position:absolute;
	z-index:11;
}

#imgarea {
	width:100%;
	height:100%;

	left:0;
	top:0;

	position:absolute;
	z-index:10;
}

.imgin {
	width:100%;
	height:100%;

	left:0;
	top:0;

	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;

	overflow:hidden;

	position:absolute;
	z-index:10;
}



#imgin1 {
	background-image:url("/assets_t/img/mainimage_pc1.webp?r=1");
	z-index:4;
}
#imgin2 {
	background-image:url("/assets_t/img/mainimage_pc2.webp?r=1");
	z-index:3;
}
#imgin3 {
	background-image:url("/assets_t/img/mainimage_pc3.webp?r=1");
	z-index:2;
}
#imgin4 {
	background-image:url("/assets_t/img/mainimage_pc4.webp?r=1");
	z-index:1;
}


@keyframes shine {
	100% {
		left: 125%;
	}
}



@media screen and (max-width: 640px) {

	body {
		font-size:93px;
	}

	#main {
		max-height:1135px;
	}

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

	#imgarea-ref {
		transform:rotate(45deg);
	}


	.typef {
		width:95%;
	}

	#type1 {
		bottom:425px;
	}
	#type2 {
		bottom:305px;
	}
	#type3 {
		bottom:185px;
	}
	#type4 {
		bottom:65px;
	}

	#type1-2 {
		bottom:421px;
	}
	#type2-2 {
		bottom:301px;
	}
	#type3-2 {
		bottom:181px;
	}
	#type4-2 {
		bottom:61px;
	}


	#imgin1 {
		background-image:url("/assets_t/img/mainimage_sp1.webp?r=1");
	}
	#imgin2 {
		background-image:url("/assets_t/img/mainimage_sp2.webp?r=1");
	}
	#imgin3 {
		background-image:url("/assets_t/img/mainimage_sp3.webp?r=1");
	}
	#imgin4 {
		background-image:url("/assets_t/img/mainimage_sp4.webp?r=1");
	}
}

@media screen and (max-height: 800px) {

	body {
		font-size:80px;
	}

	#type1 {
		bottom:370px;
	}
	#type2 {
		bottom:265px;
	}
	#type3 {
		bottom:160px;
	}
	#type4 {
		bottom:65px;
	}

	#type1-2 {
		bottom:366px;
	}
	#type2-2 {
		bottom:261px;
	}
	#type3-2 {
		bottom:156px;
	}
	#type4-2 {
		bottom:61px;
	}
}


#cover {
	width:100%;
	height:0;

	bottom:0;
	left:0;

	background-color:#00a1e9;

	position:absolute;
	z-index:1000;
}


#btn_c {
	width:250px;
	height:250px;

	bottom:75px;
	right:0;

	border:0;

	cursor:pointer;

	position:absolute;
	z-index:1000;

	display:none;
}

#btn_c1,#btn_c2 {
	width:100%;
	height:100%;
	border:0;
}

#btn_c2 {
	display:none;
}