@charset "UTF-8";
/* CSS Document */
@keyframes fade-in{
	0%{
		opacity:0;
	}

	100%{
		opacity:1;
	}
}


*{
	font-family: capirera, sans-serif;
	font-weight: 400;
	font-style: normal;
}

h1,h2{
	font-family: vdl-megamaru, sans-serif;
	font-weight: 400;
	font-style: normal;
}

body{
	position:relative;
	z-index:-20;
	font-size:100%;
}

header{
	position:fixed;
	bottom:20px;
	right:0;
	z-index:1;
}

main{
	position:relative;
	z-index:-10;
}

.header{
	position:relative;
	z-index:2;
}

.cbt{
	position:relative;
	right:-120px;
	background-color:#F2F2F2;
	width:150px;
	height:60px;
	margin-bottom:10px;
	border-top-left-radius:30px;
	border-bottom-left-radius:30px;
	box-sizing:content-box;
	transition:0.5s;
	cursor:pointer;
}

.cbt:hover{
	right:-80px;
}

.cb{
	position:absolute;
	top:5px;
	left:5px;
	padding:0;
	content:"";
	width:50px;
	height:50px;
	border-radius:50%;
}

.sb{
	background-color:#B1E4EF;
}

.sm{
	background-color:#DAA4BB;
}

.ps{
	background-color:#B7BE8A;
}

.tz{
	background-color:#222D47;
}

.hz{
	background-color:#F460B5;
}

.bgcolor{
	transition:0.5s;
	background-color:#69AAB5;
}

.maincolor{
	transition:0.5s;
	background-color:#B1E4EF;
}

.textcolor{
	transition:0.5s;
	color:#0B2F35;
}

.top-info{
	padding:10px 0;
	display:flex;
	box-sizing:border-box;
	justify-content:space-between;
}

.top-info li{
	font-size:1.5rem;
	padding:5px;
}

.circle-name{
	padding:10px;
}

.dllink{
	padding:10px;
	border-radius:5px;
	opacity:1;
	transition:0.3s;
}

.dllink:hover{
	opacity:0.5;
}

.dllink a{
	display:block;
	width:100%;
}

.mainvisual{
	width:100%;
	position:relative;
	z-index:-2;
}

.cir-g{
	position:absolute;
	height:250px;
	width:250px;
	top:30%;
	left:20%;
	z-index:-1;
}

.cir{
	position:absolute;
	content:"";
	border-radius:50%;
	animation:fade-in 5s both; 
}

.cir:nth-child(1){
	height:40px;
	width:40px;
	top:30%;
	left:10%;
}

.cir:nth-child(2){
	height:80px;
	width:80px;
	bottom:15%;
	left:30%;
	animation-delay:3s;
}

.cir:nth-child(3){
	height:120px;
	width:120px;
	top:0;
	right:0;
	animation-delay:6s;
}

.maintitle{
	text-align:center;
	padding:30vh 0;
	font-size:5rem;
}

.main-menu{
	width:100%;
	padding:20px 0;
}

.main-menu ul{
	display:flex;
	box-sizing:border-box;
	justify-content:space-around;
}

.menu{
	width:20%;
	padding:20px 10px;
	text-align:center;
	font-size:1.5rem;
	border-radius:10px;
	cursor:pointer;
	opacity:1;
	transition:0.3s;
}

.menu:hover{
	opacity:0.5;
}

.info,.power,.color-theme,.link{
	width:90%;
	margin:0 auto;
	padding:5rem 0;
}

h2{
	font-size:2.5rem;
	text-align:center;
}

.border{
	content:"";
	width:100%;
	height:2px;
	margin-top:0.2rem;
	margin-bottom:2rem;
}

.info-s{
	width:80%;
	margin:0 auto;
}

.info-s h3{
	font-size:1.8rem;
	margin-top:2rem;
	margin-bottom:0.2rem;
}

.info-s p{
	font-size:1.2rem;
}

.color-theme .info-s p br{
	display:none;
}

.footerlink{
	width:30%;
	margin:0 auto;
}

.footerlink .dllink{
	padding:15px;
	border-radius:10px;
}

.footerlink .dllink a{
	text-align:center;
	font-size:2rem;
}

.footer{
	text-align:center;
	padding:80px 0;
}

@media(max-width:950px){
	header{
		bottom:-100px;
	}
	
	header ul{
		display:flex;
	}
	
	header ul li{
		margin:5px;
	}
	
	.cbt{
		width:60px;
		height:150px;
		right:0;
		border-top-left-radius:30px;
		border-top-right-radius:30px;
		border-bottom-left-radius:0;
		transition:0.5s;
	}
	
	.cbt:hover{
		right:0;
		bottom:30px;
	}
	
	.maintitle{
		font-size:3rem;
	}
	
	.color-theme .info-s p br{
		display:block;
	}
	
	.footerlink{
		width:80%;
		margin:0 auto;
	}
}