@charset "utf-8";

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

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

}

/*トップページのメニューブロック
---------------------------------------------------------------------------*/
/*トップページのメニュー１個あたりの設定*/
#menubar-top li a {
	text-decoration: none;
	display: block;
	border: 4px 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;	/*ボックスの影。右へ、左へ、広げる幅、色。*/
}
/*8個のメニュー共通*/
#menubar-top li#menu1,#menubar-top li#menu2,#menubar-top li#menu3,#menubar-top li#menu5, #menubar-top li#menu6, #menubar-top li#menu7, #menubar-top li#menu8, #menubar-top li#menu4, #menubar-top li#menu9 {
	animation-name: menu1;		/*上のアニメーションで指定しているkeyframesの名前（logo）*/
	animation-duration: 3S;		/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*メニュー5つ目（PROGRAM）*/
#menubar-top li#menu5 {
	position: absolute;
	right: 25%;	/*左から36%の場所に配置*/
	top: 5%;	/*上から4%の場所に配置*/
	animation-delay: 0.4s;	/*0.2秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*メニュー２つ目（MESSAGE）*/
#menubar-top li#menu2 {
	position: absolute;
	left: 5%;	/*左から8%の場所に配置*/
	top: 20%;	/*上から18%の場所に配置*/

}
/*メニュー1つ目（POSTER GUIDELINE）*/
#menubar-top li#menu1 {
	position: absolute;
	right: 5%;	/*左から36%の場所に配置*/
	bottom: 20%;	/*下から8%の場所に配置*/
	animation-delay: 0.8s;	/*0.4秒だけ遅れてアニメーションをスタートさせる設定*/
	font-size: 9px;
}
/*メニュー4つ目（ACCOMODATION）*/
#menubar-top li#menu4 {
	position: absolute;
    left: 50%;	/*左から36%の場所に配置*/
    bottom: 5%;	/*下から8%の場所に配置*/
    transform: translate(-50%, -50%);
	animation-delay: 1.0s;	/*0.4秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*メニュー3つ目（SCHEDULE）*/
#menubar-top li#menu3 {
	position: absolute;
	right: 5%;	/*右から15%の場所に配置*/
	top: 20%;	/*上から18%の場所に配置*/
	animation-delay: 0.6s;	/*0.8秒だけ遅れてアニメーションをスタートさせる設定*/
}

/*メニュー６つ目（REGISTRATION）*/
#menubar-top li#menu6 {
	position: absolute;
	right: 25%;	/*右から15%の場所に配置*/
	bottom: 5%;	/*上から18%の場所に配置*/
	animation-delay: 0.9s;	/*0.8秒だけ遅れてアニメーションをスタートさせる設定*/
}

/*メニュー7つ目（PROGRAM）*/
#menubar-top li#menu7 {
	position: absolute;
	left: 5%;	/*右から15%の場所に配置*/
	bottom: 20%;	/*上から18%の場所に配置*/
	animation-delay: 1.1s;	/*0.8秒だけ遅れてアニメーションをスタートさせる設定*/
}

/*メニュー8つ目（SPECIAL RECTURE）*/
#menubar-top li#menu8 {
	position: absolute;
	left: 25%;	/*右から15%の場所に配置*/
	top: 5%;	/*上から18%の場所に配置*/
	animation-delay: 0.2s;	/*0.8秒だけ遅れてアニメーションをスタートさせる設定*/
}

/*メニュー9つ目（EVENT REPORT）*/
#menubar-top li#menu9 {
	position: absolute;
	left: 25%;	/*右から15%の場所に配置*/
	bottom: 5%;	/*上から18%の場所に配置*/
	animation-delay: 1.1s;	/*0.8秒だけ遅れてアニメーションをスタートさせる設定*/
}

/*画面幅800px以下、または、画面の高さ800px以下の場合の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 800px), screen and (max-height:800px) {

/*トップページのメニューブロック
---------------------------------------------------------------------------*/
/*トップページのメニュー１個あたりの設定*/
#menubar-top li a {
	width: 120px;		/*メニューの幅*/
	line-height: 120px;	/*メニューの高さ*/
	font-size: 12px;
}

}



/*画面幅500px以下、または、画面の高さ500px以下の場合の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px), screen and (max-height:600px) {

/*トップページのメニューブロック
---------------------------------------------------------------------------*/
/*トップページのメニュー１個あたりの設定*/
#menubar-top li a {
	width: 90px;		/*メニューの幅*/
	line-height: 90px;	/*メニューの高さ*/
	font-size: 10px;
}

}