@charset "UTF-8";
/* CSS Document */
/* mainArea */
.fluidBox {
	animation-delay: 2.5s;
}
.fluid {
	width: 54vh;
	height: 54vh;
	background: #fff100;
	animation: fluidrotate 30s ease 0s infinite ;
	margin-left: 60%;
}

@keyframes fluidrotate {  
	0%, 100% {
		border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
	}
	14% {
		border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
	}
	28% {
		border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
	}
	42% {
		border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
	}
	56% {
		border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
	}
	70% {
		border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
	}
	84% {
	border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
	}
}

#particle {
	width:100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}
/* mainArea */
.mainArea .inner {
	padding: 30px 20px;
}
.mainArea .inner ul {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 50px;
}
.mainArea .inner ul li {
	margin: 0 1em;
}
.mainArea .inner ul li a {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 16px;
	position: relative;
	color: #ccc;
}
/*
.mainArea .inner ul li a:after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	transition: all 0.3s;
	transform: scaleX(0);
}
.mainArea .inner ul li a:hover:after {
	transform: scaleX(1);
}
*/
/*テキストリンクの装飾*/
.cp_link {
	display: inline-block;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	vertical-align: bottom;
	overflow: hidden;
}
.cp_link span {
	display: inline-block;
	position: relative;
	padding: 0.1em 0.3em;
	transition: .4s;
	transform-origin: 50% 0%;
	transform-style: preserve-3d;
}
.cp_link span:after {
	display: inline-block;
	position: absolute;
	padding: 0.1em 0.3em;
	left: 0;
	top: 0;
	content: attr(data-text);
	color: #fff;
	background-color: #000;
	transform-origin: 50% 0%;
	transform: translate3d(0, 105%, 0) rotateX(-90deg);
}
.cp_link:hover span {
	background-color: #666;
	transform: translate3d(0, 0, -30px) rotateX(90deg);
}
@media screen and (max-width: 1000px) {
.fluidBox {
    margin-top: 80px;
}
}

@media screen and (max-width: 767px) {
.fluid {
    width: 40vh;
    height: 40vh;
}
.mainArea .inner {
    padding: 160px 5vw 40px;
}
.mainArea .inner ul li {
	margin: 0 2% 15px;
	text-align: center;
}
}
@media screen and (max-width: 500px) {
.mainArea .inner ul {
    padding-top: 28vh;
}
.fluidBox {
    margin-top: 30vh;
}
.fluid {
    width: 24vh;
    height: 24vh;
}
.mainArea .inner {
    padding: 100px 3vw 20px;
}
.mainArea .inner ul li a {
    font-size: 12px;
}
}