@charset "utf-8";


/*出現のアニメーション設定。opacityは透明度の事です。*/


@keyframes menu1 {

0% {opacity: 0;}
100% {opacity: 1;}

}




#menubar-top li a {
	text-decoration: none;
display: block;
border: 3px solid #fff;	
border-radius: 50%;	width: 150px;	line-height: 150px;	
text-align: center;	color: #fff;		
}
#menubar-top li a:hover {
	color: #fff;box-shadow: 0px 0px 100px #fff;	

}


#menubar-top li#menu1,#menubar-top li#menu2,
#menubar-top li#menu3,#menubar-top li#menu4,
#menubar-top li#menu5,#menubar-top li#menu6 {
animation-name: menu1;	
animation-duration: 3S;animation-fill-mode: both;	

}



#menubar-top li#menu1 {
position: absolute;
	left: 3%;top: 14%;	}





#menubar-top li#menu2 {
	position: absolute;
	left: 35%;top: 14%;	
animation-delay: 0.2s;	

}


/*（SERVICE）*/


#menubar-top li#menu3 {
	position: absolute;
	right: 5%;bottom:14%;	
	animation-delay: 0.4s;	
}


/*（LINK）*/


#menubar-top li#menu4 {
	position: absolute;
	left: 35%;bottom:14% ;	

	animation-delay: 0.6s;	

}


/*（CONTACT）*/

#menubar-top li#menu5 {
	position: absolute;
	right: 5%;top: 14%;		

animation-delay: 0.8s;	


}


/*（SKIL）*/

#menubar-top li#menu6 {
	position: absolute;
	left: 3%;bottom: 14%;		

animation-delay: 0.9s;	


}

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


#menubar-top li a {
	width: 120px;		

/*メニューの幅*/
	

line-height: 120px;	
/*メニューの高さ*/
	
font-size: 16px;
}

}





/*画面幅500px以下、または、画面の高さ500px以下の場合の設定
---------*/


@media screen and (max-width: 500px), screen and (max-height:500px) {



/*トップページのメニューブロック
------*/


/*トップページのメニュー１個あたりの設定*/


#menubar-top li a {
	width: 85px;		
/*メニューの幅*/
	

line-height: 85px;	

/*メニューの高さ*/
	

font-size: 16px;
}

}