@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;/*写真の縁取り。縁取りの幅、線種、色*/
}

}