@charset "utf-8";

#menubar-s {display: none;}
#menubar_hdr {display: none;}
#menubar li {
	width: 25%;			
	max-width: 500px;	
	animation-duration: 1.5S;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	border: 10px solid #fff;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	
	position: absolute;
	background: #000;	
	text-align: center;	
	transition: 0.2s;
}

#menubar li:hover {
    width: 26%;	}

#menubar a span {
	position: absolute;
	bottom: 0px;	
	left: 0px;
	width: 100%;		
	font-size: 10px;	
	color: #fff;		
	background: #000;	
	background: rgba(0,0,0,0.6);	
}

#menubar a span::first-line {
	font-size: 20px;	
}

#menubar li a {
	animation-name: photo;	
	animation-delay: 5.5s;	
	animation-duration: 1S;	
	animation-fill-mode: both;	
}

@keyframes photo {
/*0コマ目*/
0% {
	opacity: 0.6;	
}

100% {
	opacity: 1;		
}
}

#menubar a span {
	animation-name: menu-title;
    animation-delay: 6.5s;		
	animation-duration: 0.5S;	
	animation-fill-mode: both;	
}

@keyframes menu-title {

0% {
	opacity: 0;	
}

100% {
	opacity: 1;	
}
}

#menu1 {
	animation-name: menu1;
	animation-delay: 2s;	
	z-index: 5;	
}

@keyframes menu1 {

0% {
	transform: rotate(130deg);	
	left: 20%;	
	top: 23%;	
}

70% {
	transform: rotate(-30deg);	left: 0%;	
	top: 3%;	
}

100% {
	transform: rotate(-20deg);
    left: 1%;	
	top: 4%;	
}
}

#menu2 {
	animation-name: menu2;
	animation-delay: 2.4s;	
	z-index: 4;	
}

@keyframes menu2 {

0% {
	transform: rotate(170deg);	
	left: 42%;	
	top: 24%;	
}

70% {
	transform: rotate(-20deg);
    left: 37%;	
	top: -3%;	
}

100% {
	transform: rotate(-10deg);	
	left: 37%;	
	top: -2%;	
}
}

#menu3 {
	animation-name: menu3;
	animation-delay: 2.8s;	
	z-index: 3;	
}

@keyframes menu3 {

0% {
	transform: rotate(-140deg);	right: 18%;	
	top: 28%;	
}

70% {
	transform: rotate(30deg);	right: 0%;	
	top: 6%;	
}

100% {
	transform: rotate(20deg);
	right: 1%;	
	top: 7%;	
}
}

#menu4 {
	animation-name: menu4;
	animation-delay: 3.2s;	
	z-index: 2;	
}

@keyframes menu4 {

0% {
	transform: rotate(160deg);
	left: 25%;	
	bottom: 30%;	
}

70% {
	transform: rotate(10deg);
	left: 11%;	
	bottom: 11%;	
}

100% {
	transform: rotate(20deg);
	left: 10%;		
	bottom: 12%;	
}
}

#menu5 {
	animation-name: menu5;
	animation-delay: 3.6s;
	z-index: 1;	
}

@keyframes menu5 {

0% {
	transform: rotate(-150deg);
	right: 27%;		
	bottom: 22%;	
}

70% {
	transform: rotate(-10deg);
	right: 9%;	
	bottom: 14%;	
}

100% {
	transform: rotate(-20deg);
	right: 10%;
	bottom: 13%;	
}
}


@media screen and (orientation: portrait) {

@keyframes menu1 {

0% {
	transform: rotate(160deg);
	left: 6%;
	top: 38%;
}

70% {
	transform: rotate(-30deg);
	left: 0%;
	top: 3%;
}

100% {
	transform: rotate(-20deg);
	left: 1%;
	top: 4%;
}
}

@keyframes menu2 {

0% {
	transform: rotate(100deg);
	left: 35%;
	top: 36%;
}

70% {
	transform: rotate(-20deg);
	left: 37%;
	top: -3%;
}

100% {
	transform: rotate(-10deg);
	left: 37%;
	top: -2%;
}
}

@keyframes menu3 {

0% {
	transform: rotate(-160deg);
	right: 10%;
	top: 40%;
}

70% {
	transform: rotate(30deg);
	right: 0%;
	top: 6%;
}

100% {
	transform: rotate(20deg);
	right: 1%;
	top: 7%;
}
}

@keyframes menu4 {

0% {
	transform: rotate(160deg);
	left: 25%;
	bottom: 38%;
}

70% {
	transform: rotate(10deg);
	left: 11%;
	bottom: 11%;
}

100% {
	transform: rotate(20deg);
	left: 10%;
	bottom: 12%;
}
}

@keyframes menu5 {

0% {
	transform: rotate(-120deg);
	right: 27%;
	bottom: 38%;
}

70% {
	transform: rotate(-10deg);
	right: 9%;
	bottom: 7%;
}

100% {
	transform: rotate(-20deg);
	right: 10%;
	bottom: 8%;
}
}

}


@media screen and (orientation: portrait) and (max-width:420px){


#menubar li {
	width: 35%;			
	border: 5px solid #fff;
}

#menubar a span::first-line {
	font-size: 14px;
}

@keyframes menu2 {

0% {
	transform: rotate(100deg);
	left: 35%;
	top: 36%;
}

70% {
	transform: rotate(-20deg);
	left: 30%;
	top: 15%;
}

100% {
	transform: rotate(-10deg);
	left: 30%;
	top: 16%;
}
}

@keyframes menu3 {
0% {
	transform: rotate(-160deg);
	right: 10%;
	top: 40%;
}

70% {
	transform: rotate(30deg);
	right: 0%;
	top: 0%;
}

100% {
	transform: rotate(20deg);
	right: 1%;
	top: 1%;
}
}

@keyframes menu4 {

0% {
	transform: rotate(160deg);
	left: 25%;
	bottom: 38%;
}
    
70% {
	transform: rotate(10deg);
	left: 11%;
	bottom: 16%;
}

100% {
	transform: rotate(20deg);
	left: 10%;
	bottom: 17%;
}
}

@keyframes menu5 {

0% {
	transform: rotate(-120deg);
	right: 27%;
	bottom: 38%;
}

70% {
	transform: rotate(-10deg);
	right: 10%;
	bottom: 10%;
}

100% {
	transform: rotate(-20deg);
	right: 9%;
	bottom: 11%;
}
}

}

@media screen and (orientation: landscape) and (max-height:420px){


#menubar li {
	width: 20%;			
	border: 5px solid #fff;	
}

}