@charset "utf-8";

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


/*メインメニュー
---------------------------------------------------------------------------*/


/*スマホ用メニューを表示させない*/

#menubar-s {
    display: none;
}


/*３本バーアイコンを表示させない*/

#menubar_hdr {
    display: none;
}


/*各メニューごとの設定（および、#menu1〜#menu5までのアニメーションの共通設定）*/

#menubar li {
    width: 25%;
    /*メニュー幅*/
    max-width: 400px;
    /*最大のメニュー幅。これ以上大きくならない。*/
    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: 38%;
        /*ウィンドウの左からの配置指定*/
        top: 23%;
        /*ウィンドウの上からの配置指定*/
    }
    /*70コマ目*/
    70% {
        transform: rotate(-30deg);
        /*回転の角度*/
        left: 0%;
        /*ウィンドウの左からの配置指定*/
        top: 3%;
        /*ウィンドウの上からの配置指定*/
    }
    /*100コマ目*/
    100% {
        transform: rotate(-20deg);
        /*回転の角度*/
        left: 1%;
        /*ウィンドウの左からの配置指定*/
        top: 4%;
        /*ウィンドウの上からの配置指定*/
    }
}


/*menu3
---------------------------------------------------------------------------*/

#menu3 {
    animation-name: menu3;
    /*アニメーションのキーフレームの名前（menu3）*/
    animation-delay: 2.8s;
    /*アニメーションを遅れて実行する指定。「s」は秒の事。*/
    z-index: 3;
    /*重なりの順番。数字が大きい方が上に配置されます。*/
}


/*アニメーション設定------------------------*/

@keyframes menu3 {
    /*0コマ目*/
    0% {
        transform: rotate(-140deg);
        /*回転の角度*/
        right: 38%;
        /*ウィンドウの右からの配置指定*/
        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: 30%;
        /*ウィンドウの左からの配置指定*/
        bottom: 30%;
        /*ウィンドウの下からの配置指定*/
    }
    /*70コマ目*/
    70% {
        transform: rotate(10deg);
        /*回転の角度*/
        left: 3%;
        /*ウィンドウの左からの配置指定*/
        bottom: 11%;
        /*ウィンドウの下からの配置指定*/
    }
    /*100コマ目*/
    100% {
        transform: rotate(20deg);
        /*回転の角度*/
        left: 2%;
        /*ウィンドウの左からの配置指定*/
        bottom: 12%;
        /*ウィンドウの下からの配置指定*/
    }
}


/*menu2
---------------------------------------------------------------------------*/

#menu2 {
    animation-name: menu2;
    /*アニメーションのキーフレームの名前（menu2）*/
    animation-delay: 2.4s;
    /*アニメーションを遅れて実行する指定。「s」は秒の事。*/
    z-index: 4;
    /*重なりの順番。数字が大きい方が上に配置されます。*/
}


/*アニメーション設定------------------------*/

@keyframes menu2 {
    /*0コマ目*/
    0% {
        transform: rotate(170deg);
        /*回転の角度*/
        left: 35%;
        /*ウィンドウの左からの配置指定*/
        bottom: 38%;
        /*ウィンドウの上からの配置指定*/
    }
    /*70コマ目*/
    70% {
        transform: rotate(-20deg);
        /*回転の角度*/
        left: 37%;
        /*ウィンドウの左からの配置指定*/
        bottom: 9%;
        /*ウィンドウの上からの配置指定*/
    }
    /*100コマ目*/
    100% {
        transform: rotate(0deg);
        /*回転の角度*/
        left: 37%;
        /*ウィンドウの左からの配置指定*/
        bottom: 8%;
        /*ウィンドウの上からの配置指定*/
    }
}


/*menu5
---------------------------------------------------------------------------*/

#menu5 {
    animation-name: menu5;
    /*アニメーションのキーフレームの名前（menu5）*/
    animation-delay: 3.6s;
    /*アニメーションを遅れて実行する指定。「s」は秒の事。*/
    z-index: 1;
    /*重なりの順番。数字が大きい方が上に配置されます。*/
}


/*アニメーション設定------------------------*/

@keyframes menu5 {
    /*0コマ目*/
    0% {
        transform: rotate(-150deg);
        /*回転の角度*/
        right: 38%;
        /*ウィンドウの右からの配置指定*/
        bottom: 32%;
        /*ウィンドウの下からの配置指定*/
    }
    /*70コマ目*/
    70% {
        transform: rotate(-10deg);
        /*回転の角度*/
        right: 0%;
        /*ウィンドウの右からの配置指定*/
        bottom: 15%;
        /*ウィンドウの下からの配置指定*/
    }
    /*100コマ目*/
    100% {
        transform: rotate(-20deg);
        /*回転の角度*/
        right: 0%;
        /*ウィンドウの右からの配置指定*/
        bottom: 15%;
        /*ウィンドウの下からの配置指定*/
    }
}


/*画面を「縦向き」にした場合
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (orientation: portrait) {
    /*menu1
---------------------------------------------------------------------------*/
    @keyframes menu1 {
        /*0コマ目*/
        0% {
            transform: rotate(160deg);
            left: 30%;
            top: 38%;
        }
        /*70コマ目*/
        70% {
            transform: rotate(-30deg);
            left: 0%;
            top: 3%;
        }
        /*100コマ目*/
        100% {
            transform: rotate(-20deg);
            left: 1%;
            top: 4%;
        }
    }
    /*menu3
---------------------------------------------------------------------------*/
    @keyframes menu3 {
        /*0コマ目*/
        0% {
            transform: rotate(-160deg);
            right: 30%;
            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: 30%;
            bottom: 38%;
        }
        /*70コマ目*/
        70% {
            transform: rotate(10deg);
            left: 1%;
            bottom: 11%;
        }
        /*100コマ目*/
        100% {
            transform: rotate(20deg);
            left: 0%;
            bottom: 12%;
        }
    }
    /*menu2
---------------------------------------------------------------------------*/
    @keyframes menu2 {
        /*0コマ目*/
        0% {
            transform: rotate(-100deg);
            left: 35%;
            bottom: 38%;
        }
        /*70コマ目*/
        70% {
            transform: rotate(-20deg);
            left: 37%;
            bottom: 11%;
        }
        /*100コマ目*/
        100% {
            transform: rotate(0deg);
            left: 37%;
            bottom: 12%;
        }
    }
    /*menu5
---------------------------------------------------------------------------*/
    @keyframes menu5 {
        /*0コマ目*/
        0% {
            transform: rotate(-120deg);
            right: 30%;
            bottom: 38%;
        }
        /*70コマ目*/
        70% {
            transform: rotate(-10deg);
            right: 1%;
            bottom: 11%;
        }
        /*100コマ目*/
        100% {
            transform: rotate(-20deg);
            right: 0%;
            bottom: 12%;
        }
    }
}


/*画面を「縦向き」にした場合の「幅」が「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%;
            bottom: 38%;
        }
        /*70コマ目*/
        70% {
            transform: rotate(-20deg);
            left: 30%;
            bottom: 13%;
        }
        /*100コマ目*/
        100% {
            transform: rotate(-10deg);
            left: 30%;
            bottom: 14%;
        }
    }
    /*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: 1%;
            bottom: 6%;
        }
        /*100コマ目*/
        100% {
            transform: rotate(10deg);
            left: 1%;
            bottom: 17%;
        }
    }
    /*menu2
---------------------------------------------------------------------------*/
    @keyframes menu2 {
        /*0コマ目*/
        0% {
            transform: rotate(-100deg);
            left: 35%;
            bottom: 38%;
        }
        /*70コマ目*/
        70% {
            transform: rotate(-20deg);
            left: 33%;
            bottom: 11%;
        }
        /*100コマ目*/
        100% {
            transform: rotate(0deg);
            left: 30%;
            bottom: 12%;
        }
    }
    /*menu5
---------------------------------------------------------------------------*/
    @keyframes menu5 {
        /*0コマ目*/
        0% {
            transform: rotate(-120deg);
            right: 27%;
            bottom: 38%;
        }
        /*70コマ目*/
        70% {
            transform: rotate(-10deg);
            right: 2%;
            bottom: 5%;
        }
        /*100コマ目*/
        100% {
            transform: rotate(-20deg);
            right: 1%;
            bottom: 15%;
        }
    }
}


/*画面を「横向き」にした場合の「高さ」が「420px以下」の場合の設定。主にスマホを横向きで見た場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (orientation: landscape) and (max-height:420px) {
    /*メインメニュー
---------------------------------------------------------------------------*/
    /*各メニューごとの設定*/
    #menubar li {
        width: 20%;
        /*メニュー幅*/
        border: 5px solid #fff;
        /*写真の縁取り。縁取りの幅、線種、色*/
    }
}