body {
	background: #00000A;
	overflow-x: hidden;
}

.wf-sawarabimincho {
	font-family: "Sawarabi Mincho";
}

.hex-parent {
	display: inline-block;
	text-align: center;
}

.hex {
	width: 10rem;
	height: calc(10rem * 0.86602540378);
	clip-path: polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%);
	margin-bottom: 1.6rem;
	background-size: contain;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
}

.hex-down {
	transform: translateY(calc(5rem * 0.86602540378 + 0.8rem));
}

.hex-left-1 {
	transform: translateX(calc(10rem / 8));
}

.hex-right-1 {
	transform: translateX(calc(-10rem / 8));
}

.hex-left-2 {
	transform: translateX(calc(20rem / 8));
}

.hex-right-2 {
	transform: translateX(calc(-20rem / 8));
}

.god {
	width: 16rem;
	height: 16rem;
	background-image: url('img/cq.png');
	display: inline-block;
	
	background-position: center;
	background-size: contain;
}

.god-text {
	opacity: 0;
}
.ace-text {
	opacity: 0;
}
.race-text {
	opacity: 0;
}

.god-1 {
	transform: translateX(-55vw) rotate(180deg);
	box-shadow:0px 0px 5px 3px rgba(255, 127, 0, 0.25) ,0px 0px 5px 3px rgba(255, 127, 0, 0.25) inset;
	background-image: url('img/g1.png');
}
.god-2 {
	transform: translateX(55vw) rotate(-180deg);
	box-shadow:0px 0px 5px 3px rgba(0, 255, 255, 0.25) ,0px 0px 5px 3px rgba(0, 255, 255, 0.25) inset;
	background-image: url('img/g2.png');
}

.back-position-anim {
	animation: back-to-position 1s ease 0s 1 normal both running;
}
.back-position-hex-anim {
	animation: back-to-position-hex 1s ease 0s 1 normal both running;
}
.back-position-hex-anim-1 {
	animation: back-to-position-hex 1s ease 0.25s 1 normal both running;
}
.back-position-hex-anim-2 {
	animation: back-to-position-hex 1s ease 0.5s 1 normal both running;
}
.back-position-hex-anim-3 {
	animation: back-to-position-hex 1s ease 0.75s 1 normal both running;
}
.back-position-hex-anim-4 {
	animation: back-to-position-hex 1s ease 1s 1 normal both running;
}
.back-opacity-anim {
	animation: back-to-fade 1s ease 0s 1 normal both running;
}

@keyframes back-to-position {
	to {
		transform: translate(0, 0);
	}
}
@keyframes back-to-position-hex {
	from {
		opacity: 1;
	}
	to {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes back-to-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

a.hex-link:hover:not(:root) {
	transform: scale(1.1);
	transition-duration: 0.5s;
}

a.hex-link2:hover:not(:root) {
	animation: hex-link2-anim 0.5s ease 0s 1 normal both running;
}

@keyframes hex-link2-anim {
	from {
		clip-path: polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%);
	}
	to {
		clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
	}
}

.hex-c1 {
	background-image: url('img/c1.png');
	transform: translateY(-100vh);
	opacity: 0;
	/* �������� */
}
.hex-c1:hover{
	background-image: url('img/c1_2.png');
}
.hex-c2 {
	background-image: url('img/cq.png');
	opacity: 0;
	/* Primary */
}
.hex-c3 {
	background-image: url('img/c3.png');
	transform: translateY(100vh);
}
.hex-c4 {
	background-image: url('img/cq.png');
	transform: translateX(-100vw);
}
.hex-c5 {
	background-image: url('img/c5.png');
	transform: translate(-100vw, 57.735026919vw);
}
.hex-c6 {
	background-image: url('img/c6.png');
	transform: translate(-57.735026919vh, 100vh);
}
.hex-c6:hover{
	background-image: url('img/c6_2.png');
}
.hex-c7 {
	background-image: url('img/cq.png');
	transform: translate(57.735026919vh, 100vh);
}
.hex-c8 {
	background-image: url('img/c8.png');
	transform: translateX(100vw);
	
}
.hex-c9 {
	background-image: url('img/c9.png');
	transform: translate(100vw, 57.735026919vw);
}



.hex-t1 {
	background-image: url('Race/img/Phantom.png');
	transform: translateY(-100vh);
	opacity: 0;
}
.hex-t2 {
	background-image: url('Race/img/Fox.png');
	opacity: 0;
	/* Primary */
}
.hex-t3 {
	background-image: url('Race/img/Devil.png');
	transform: translateY(100vh);
}
.hex-t4 {
	background-image: url('Race/img/Machine.png');
	transform: translate(-100vw, -57.735026919vw);
}
.hex-t5 {
	background-image: url('Race/img/Magic.png');
	transform: translateX(-100vw);
}
.hex-t6 {
	background-image: url('Race/img/Shrine.png');
	transform: translate(-100vw, 57.735026919vw);
}
.hex-t7 {
	background-image: url('Race/img/Feather.png');
	transform: translate(100vw, 57.735026919vw);
}
.hex-t8 {
	background-image: url('Race/img/Fairy.png');
	transform: translateX(100vw);
}
.hex-t9 {
	background-image: url('Race/img/Dragon.png');
	transform: translate(100vw, -57.735026919vw);
}



a.link-block {
	display: block;
}

.h-dist {
	height: 100vh;
}

.h-r2 {
	height: 2rem;
}

.h-r4 {
	height: 4rem;
}
.h-r8 {
	height: 8rem;
}
.h-r12 {
	height: 12rem;
}
.h-r16 {
	height: 16rem;
}
.h-r32 {
	height: 32rem;
}

hr {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar {
	display: none;
}

.footer {
	position: fixed;
	bottom: 1rem;
	width: 100vw;
}

.btn-primary, .btn-primary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
	background-color: #000 !important;
	border: 1px solid #FFF;
	box-shadow: 0 0 0 0 rgba(0,0,0,0);
	border-radius: 0;
}