/*キーフレーム*/

@keyframes RightToLeft {
0% { opacity: 0; transform: translateX(60px); }
100% { opacity: 1; transform: translateX(0); }
}

@keyframes FadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

/*レイアウト*/

#navi-head, #navi-head-home { position: absolute; z-index: 10000; top: 0; right: 0; padding-bottom: 15px; }

#navi-pc-menu { position: fixed; z-index: 100000; top: 0; right: 0; width: 60px; height: 100vh; }

#navi_list{ position: fixed; z-index: 1000; top:0; right:0; }

#main-image { position: absolute; z-index: 10; top: 0; right: 0; width: 55%; height: 100vh; }
#main-image .item { width: 100%; height: 100vh; overflow: hidden; }
#main-image .item img { width: 100%; height: 100vh; min-width: 100%; min-height: 100vh; object-fit: cover; font-family:'object-fit: cover;' }

#site-catch { position: absolute; z-index: 100; width: 65%; height: 100vh; top: 0; left: 0; display: table; }
#site-catch-inner { height: 100%; display: table-cell; vertical-align: middle; }

#page-catch h1 { margin: 0 0 60px 0; padding: 20px 90px 15px 0; text-align: right; }

@media screen and (max-width: 991px) {
#navi-head { position: fixed; z-index: 10000; top: 0; right: 0; }
#main-image { width: 100%; }
#site-catch { width: 100%; }
#page-catch h1 { margin: 80px 0 50px; padding: 0; text-align: center; }
}

/*アニメーション*/

#navi-pc-menu {
animation-name: RightToLeft;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

#site-catch, .page-sub-title, .copyright, .container, #main-image { animation-name: FadeIn; }

.page-sub-title { animation-duration: 4s; }
.copyright { animation-duration: 2s; }
.container { animation-duration: 2s; }
#site-catch { animation-duration: 4s; }
#main-image { animation-duration: 8s; }