@charset "utf-8";



/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*メインメニュー
---------------------------------------------------------------------------*/
/*スマホ用メニューを表示させない*/
#menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*各メニューごとの設定（および、#menu1〜#menu5までのアニメーションの共通設定）*/
#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);	/*写真の影。0,0,0は黒の事で、0.3は色が30%ついた状態の事。*/
	position: absolute;
	background: #000;	/*背景色。下の「@keyframes photo」でのopacityの指定で出る背景色です。#000(黒)でなく#fff(白)にしておけば白っぽく薄く出ます。*/
	text-align: center;	/*文字をセンタリング*/
	transition: 0.2s;
}
/*マウスオン時に写真メニューを少しだけ大きくする*/
#menubar li:hover {
	width: 26%;	/*メニュー幅*/
}
/*マウスオン時に出てくるメニュー名　。※下のアニメーション設定にも同じ「#menubar a span」があります。*/
#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);	/*背景色。0,0,0は黒の事で0.6は60%色がついた状態の事。*/
}
/*マウスオン時に出てくるメニュー名（１行目への追加設定）*/
#menubar a span::first-line {
	font-size: 20px;	/*文字サイズを大きく*/
}

/*「photo」のアニメーション設定。写真が少しくらい状態から始まって、最後に明るくなるアニメーション。
---------------------------------------------------------------------------*/
#menubar li a {
	animation-name: photo;	/*アニメーションのキーフレームの名前（photo）*/
	animation-delay: 5.5s;	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	animation-duration: 1S;	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
}
/*アニメーション設定------------------------*/
@keyframes photo {
/*0コマ目*/
0% {
	opacity: 0.6;	/*60%写真に色がついた状態。ここでの背景色は上の「#menubar li」の「background: #000;」の黒となるので暗くなります。*/
}
/*100コマ目*/
100% {
	opacity: 1;		/*100%色がでた状態*/
}
}

/*「menu-title」のアニメーション設定。※上の一般のcss設定にも同じ「#menubar a span」があります。
---------------------------------------------------------------------------*/
/*マウスオン時に出てくるメニュー名*/
#menubar a span {
	animation-name: menu-title;	/*アニメーションのキーフレームの名前（menu-title）*/
	animation-delay: 6.5s;		/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	animation-duration: 0.5S;	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
}
/*アニメーション設定------------------------*/
@keyframes menu-title {
/*0コマ目*/
0% {
	opacity: 0;	/*0%色がついた状態。つまり全く見えない状態の事。*/
}
/*100コマ目*/
100% {
	opacity: 1;	/*100%色がでた状態*/
}
}

/*menu1
---------------------------------------------------------------------------*/
#menu1 {
	animation-name: menu1;	/*アニメーションのキーフレームの名前（menu1）*/
	animation-delay: 2s;	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 5;	/*重なりの順番。数字が大きい方が上に配置されます。*/
}
/*アニメーション設定------------------------*/
@keyframes menu1 {
/*0コマ目*/
0% {
	transform: rotate(130deg);	/*回転の角度*/
	left: 20%;	/*ウィンドウの左からの配置指定*/
	top: 23%;	/*ウィンドウの上からの配置指定*/
}
/*70コマ目*/
70% {
	transform: rotate(-30deg);	/*回転の角度*/
	left: 0%;	/*ウィンドウの左からの配置指定*/
	top: 3%;	/*ウィンドウの上からの配置指定*/
}
/*100コマ目*/
100% {
	transform: rotate(-20deg);	/*回転の角度*/
	left: 1%;	/*ウィンドウの左からの配置指定*/
	top: 4%;	/*ウィンドウの上からの配置指定*/
}
}

/*menu2
---------------------------------------------------------------------------*/
#menu2 {
	animation-name: menu2;	/*アニメーションのキーフレームの名前（menu2）*/
	animation-delay: 2.4s;	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 4;	/*重なりの順番。数字が大きい方が上に配置されます。*/
}
/*アニメーション設定------------------------*/
@keyframes menu2 {
/*0コマ目*/
0% {
	transform: rotate(170deg);	/*回転の角度*/
	left: 42%;	/*ウィンドウの左からの配置指定*/
	top: 24%;	/*ウィンドウの上からの配置指定*/
}
/*70コマ目*/
70% {
	transform: rotate(-20deg);	/*回転の角度*/
	left: 37%;	/*ウィンドウの左からの配置指定*/
	top: -3%;	/*ウィンドウの上からの配置指定*/
}
/*100コマ目*/
100% {
	transform: rotate(-10deg);	/*回転の角度*/
	left: 37%;	/*ウィンドウの左からの配置指定*/
	top: -2%;	/*ウィンドウの上からの配置指定*/
}
}

/*menu3
---------------------------------------------------------------------------*/
#menu3 {
	animation-name: menu3;	/*アニメーションのキーフレームの名前（menu3）*/
	animation-delay: 2.8s;	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 3;	/*重なりの順番。数字が大きい方が上に配置されます。*/
}
/*アニメーション設定------------------------*/
@keyframes menu3 {
/*0コマ目*/
0% {
	transform: rotate(-140deg);	/*回転の角度*/
	right: 18%;	/*ウィンドウの右からの配置指定*/
	top: 28%;	/*ウィンドウの上からの配置指定*/
}
/*70コマ目*/
70% {
	transform: rotate(30deg);	/*回転の角度*/
	right: 0%;	/*ウィンドウの右からの配置指定*/
	top: 6%;	/*ウィンドウの上からの配置指定*/
}
/*100コマ目*/
100% {
	transform: rotate(20deg);	/*回転の角度*/
	right: 1%;	/*ウィンドウの右からの配置指定*/
	top: 7%;	/*ウィンドウの上からの配置指定*/
}
}

/*menu4
---------------------------------------------------------------------------*/
#menu4 {
	animation-name: menu4;	/*アニメーションのキーフレームの名前（menu4）*/
	animation-delay: 3.2s;	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 2;	/*重なりの順番。数字が大きい方が上に配置されます。*/
}
/*アニメーション設定------------------------*/
@keyframes menu4 {
/*0コマ目*/
0% {
	transform: rotate(160deg);	/*回転の角度*/
	left: 25%;		/*ウィンドウの左からの配置指定*/
	bottom: 30%;	/*ウィンドウの下からの配置指定*/
}
/*70コマ目*/
70% {
	transform: rotate(10deg);	/*回転の角度*/
	left: 11%;		/*ウィンドウの左からの配置指定*/
	bottom: 11%;	/*ウィンドウの下からの配置指定*/
}
/*100コマ目*/
100% {
	transform: rotate(20deg);	/*回転の角度*/
	left: 10%;		/*ウィンドウの左からの配置指定*/
	bottom: 12%;	/*ウィンドウの下からの配置指定*/
}
}

/*menu5
---------------------------------------------------------------------------*/
#menu5 {
	animation-name: menu5;	/*アニメーションのキーフレームの名前（menu5）*/
	animation-delay: 3.6s;	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 1;	/*重なりの順番。数字が大きい方が上に配置されます。*/
}
/*アニメーション設定------------------------*/
@keyframes menu5 {
/*0コマ目*/
0% {
	transform: rotate(-150deg);	/*回転の角度*/
	right: 27%;		/*ウィンドウの右からの配置指定*/
	bottom: 22%;	/*ウィンドウの下からの配置指定*/
}
/*70コマ目*/
70% {
	transform: rotate(-10deg);	/*回転の角度*/
	right: 9%;	/*ウィンドウの右からの配置指定*/
	bottom: 14%;	/*ウィンドウの下からの配置指定*/
}
/*100コマ目*/
100% {
	transform: rotate(-20deg);	/*回転の角度*/
	right: 10%;	/*ウィンドウの右からの配置指定*/
	bottom: 13%;	/*ウィンドウの下からの配置指定*/
}
}



/*画面を「縦向き」にした場合
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait) {

/*menu1
---------------------------------------------------------------------------*/
@keyframes menu1 {
/*0コマ目*/
0% {
	transform: rotate(160deg);
	left: 6%;
	top: 38%;
}
/*70コマ目*/
70% {
	transform: rotate(-30deg);
	left: 0%;
	top: 3%;
}
/*100コマ目*/
100% {
	transform: rotate(-20deg);
	left: 1%;
	top: 4%;
}
}

/*menu2
---------------------------------------------------------------------------*/
@keyframes menu2 {
/*0コマ目*/
0% {
	transform: rotate(100deg);
	left: 35%;
	top: 36%;
}
/*70コマ目*/
70% {
	transform: rotate(-20deg);
	left: 37%;
	top: -3%;
}
/*100コマ目*/
100% {
	transform: rotate(-10deg);
	left: 37%;
	top: -2%;
}
}

/*menu3
---------------------------------------------------------------------------*/
@keyframes menu3 {
/*0コマ目*/
0% {
	transform: rotate(-160deg);
	right: 10%;
	top: 40%;
}
/*70コマ目*/
70% {
	transform: rotate(30deg);
	right: 0%;
	top: 6%;
}
/*100コマ目*/
100% {
	transform: rotate(20deg);
	right: 1%;
	top: 7%;
}
}

/*menu4
---------------------------------------------------------------------------*/
@keyframes menu4 {
/*0コマ目*/
0% {
	transform: rotate(160deg);
	left: 25%;
	bottom: 38%;
}
/*70コマ目*/
70% {
	transform: rotate(10deg);
	left: 11%;
	bottom: 11%;
}
/*100コマ目*/
100% {
	transform: rotate(20deg);
	left: 10%;
	bottom: 12%;
}
}

/*menu5
---------------------------------------------------------------------------*/
@keyframes menu5 {
/*0コマ目*/
0% {
	transform: rotate(-120deg);
	right: 27%;
	bottom: 38%;
}
/*70コマ目*/
70% {
	transform: rotate(-10deg);
	right: 9%;
	bottom: 7%;
}
/*100コマ目*/
100% {
	transform: rotate(-20deg);
	right: 10%;
	bottom: 8%;
}
}

}



/*画面を「縦向き」にした場合の「幅」が「420px以下」の場合の設定。主にスマホを縦向きで見た場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@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;
}

/*menu2
---------------------------------------------------------------------------*/
@keyframes menu2 {
/*0コマ目*/
0% {
	transform: rotate(100deg);
	left: 35%;
	top: 36%;
}
/*70コマ目*/
70% {
	transform: rotate(-20deg);
	left: 30%;
	top: 15%;
}
/*100コマ目*/
100% {
	transform: rotate(-10deg);
	left: 30%;
	top: 16%;
}
}

/*menu3
---------------------------------------------------------------------------*/
@keyframes menu3 {
/*0コマ目*/
0% {
	transform: rotate(-160deg);
	right: 10%;
	top: 40%;
}
/*70コマ目*/
70% {
	transform: rotate(30deg);
	right: 0%;
	top: 0%;
}
/*100コマ目*/
100% {
	transform: rotate(20deg);
	right: 1%;
	top: 1%;
}
}

/*menu4
---------------------------------------------------------------------------*/
@keyframes menu4 {
/*0コマ目*/
0% {
	transform: rotate(160deg);
	left: 25%;
	bottom: 38%;
}
/*70コマ目*/
70% {
	transform: rotate(10deg);
	left: 11%;
	bottom: 16%;
}
/*100コマ目*/
100% {
	transform: rotate(20deg);
	left: 10%;
	bottom: 17%;
}
}

/*menu5
---------------------------------------------------------------------------*/
@keyframes menu5 {
/*0コマ目*/
0% {
	transform: rotate(-120deg);
	right: 27%;
	bottom: 38%;
}
/*70コマ目*/
70% {
	transform: rotate(-10deg);
	right: 10%;
	bottom: 10%;
}
/*100コマ目*/
100% {
	transform: rotate(-20deg);
	right: 9%;
	bottom: 11%;
}
}

}



/*画面を「横向き」にした場合の「高さ」が「420px以下」の場合の設定。主にスマホを横向きで見た場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:420px){

/*メインメニュー
---------------------------------------------------------------------------*/
/*各メニューごとの設定*/
#menubar li {
	width: 20%;			/*メニュー幅*/
	border: 5px solid #fff;	/*写真の縁取り。縁取りの幅、線種、色*/
}

}