@keyframes page-change-hide-anime {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(1, 1);
    }

    68% {
        transform: translate3d(-50%, -50%, 0) scale(0.5, 0.003);
    }

    92% {
        transform: translate3d(-50%, -50%, 0) scale(1, 0.003);
    }

    99% {
        transform: translate3d(-50%, -50%, 0) scale(1, 0.001);
    }

    100% {
        transform: translate3d(-50%, -50%, 0) scale(1, 0);
    }
}

@keyframes page-change-show-anime {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(1, 0);
    }

    1% {
        transform: translate3d(-50%, -50%, 0) scale(1, 0.001);
    }

    8% {
        transform: translate3d(-50%, -50%, 0) scale(1, 0.001);
    }

    32% {
        transform: translate3d(-50%, -50%, 0) scale(0.5, 0.003);
    }

    100% {
        transform: translate3d(-50%, -50%, 0) scale(1, 1);
    }
}

@keyframes footer-bg-anime {
    0% {
        transform: translate(0px, 0px);
    }

    45%,
  55% {
        transform: translate(0px, 30px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes footer-main-anime-01 {
    0% {
        transform: translate(0px, 0px);
    }

    45%,
  55% {
        transform: translate(0px, 50px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes footer-main-anime-02 {
    0% {
        transform: translate(0px, 0px);
    }

    45%,
  55% {
        transform: translate(0px, 80px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes footer-main-anime-03 {
    0% {
        transform: translate(0px, 0px);
    }

    45%,
  55% {
        transform: translate(0px, 60px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes footer-parts-anime {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -600px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes footer-bg-anime-sp {
    0% {
        transform: translate(0px, 0px);
    }

    45%,
  55% {
        transform: translate(0px, 10px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes footer-main-anime-sp-01 {
    0% {
        transform: translate(0px, 0px);
    }

    45%,
  55% {
        transform: translate(0px, 15px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes footer-main-anime-sp-02 {
    0% {
        transform: translate(0px, 0px);
    }

    45%,
  55% {
        transform: translate(0px, 30px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes footer-main-anime-sp-03 {
    0% {
        transform: translate(0px, 0px);
    }

    45%,
  55% {
        transform: translate(0px, 20px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes footer-parts-anime-sp {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -200px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes opening-logo-animation {
    0% {
        transform: translate(100vw, 0);
    }

    20% {
        transform: translate(0vw, 0);
    }

    37% {
        transform: translate(-100px, 0);
    }

    95%,
  100% {
        transform: translate(0, 0);
    }
}

@keyframes page-top-hover-animation {
    0% {
        transform: translate(100vw, 0);
    }

    20% {
        transform: translate(0vw, 0);
    }

    37% {
        transform: translate(-100px, 0);
    }

    95%,
  100% {
        transform: translate(0, 0);
    }
}

@keyframes main-video-keyboard-flash {
    0%,
  4% {
        opacity: 0;
    }

    5% {
        opacity: 0.5;
    }

    7% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes main-video-keyboard-hover {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.5;
    }
}

body {
    position: relative;
    background: #fff;
}

body.page-change-hide {
    position: absolute !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    pointer-events: none;
}

body.page-change-hide #wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1, 1);
    background: #fff;
    overflow: hidden;
    animation: page-change-hide-anime 220ms;
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body.page-change-hide.isIe11 #main-video {
    opacity: 0 !important;
}

body.page-change-hide.page-change-show {
    background: #000;
}

body.page-change-hide.page-change-show #wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation: page-change-show-anime 240ms !important;
    animation-fill-mode: forwards !important;
    animation-delay: 300ms !important;
}

body.page-change-hide.page-change-show.isFirefox #wrap {
    animation-duration: 300ms !important;
}

body.page-change-hide.page-change-show.isIe11 #main-video {
    opacity: 1 !important;
}

body.in-page-change-hide #wrap .contents {
    opacity: 0;
}

body .bg {
    pointer-events: none;
    transition: all 1800ms !important;
    opacity: 0;
}

body #loading {
    display: block;
}

body #loading.hide {
    transition: all 800ms;
    opacity: 0;
    pointer-events: none;
}

body #loading .load-item {
    opacity: 0;
}

body #loading .load-item .item-gauge .gauge {
    transition: transform 600ms;
    transform-origin: 50% 100%;
    transform: scale(1, 0);
}

body #loading.start .load-item {
    opacity: 1;
}

body#contact #loading {
    display: none;
}

body #top-popup-video {
    display: none;
    opacity: 0;
    pointer-events: none;
}

body #wrap {
    width: 100%;
    animation-fill-mode: forwards;
    animation-direction: reverse;
}

body #wrap header .header-bg_line {
    transform: translate(0, -110%);
}

body #wrap header #header.pc_block {
    transition: background-position 400ms;
    height: 576px;
    background-position: 0 -620px;
}

body #wrap header #header.pc_block .header-parts__01,
      body #wrap header #header.pc_block .header-parts__02,
      body #wrap header #header.pc_block .header-parts__03 {
    transform: translate(-100%, -200%);
}

body #wrap h1 {
    animation-fill-mode: forwards !important;
    transform: translate(100vw, 0);
}

body #wrap h2 .h2-layer span {
    opacity: 0 !important;
}

body #wrap h2 .h2-layer.h2-layer__01 span {
    transform: translate(-70px, 0);
}

body #wrap h2 .h2-layer.h2-layer__02 span {
    transform: translate(-70px, 0);
}

body #wrap #main {
    display: none;
}

body #wrap .works-list li {
    opacity: 0;
}

body #wrap .news-list li {
    opacity: 0;
}

body #wrap .contents {
    transition: opacity 400ms;
    transition-timing-function: ease-in-out;
}

body #wrap footer {
    transition: all 0ms;
}

body #wrap footer.hide {
    opacity: 0;
}

body #wrap footer .footer-parts {
    left: 50%;
    margin-left: -170px;
}

@media screen and (min-width: 768px) {
    body #wrap footer .footer-parts {
        margin-left: -750px;
    }
}

body #wrap footer.anime .footer-bg_main img {
    animation: footer-bg-anime-sp 600ms;
    animation-fill-mode: forwards;
}

body #wrap footer.anime .footer-bg_back.footer-bg__01 {
    animation: footer-main-anime-sp-01 600ms;
    animation-fill-mode: forwards;
}

body #wrap footer.anime .footer-bg_back.footer-bg__02 {
    animation: footer-main-anime-sp-02 600ms;
    animation-fill-mode: forwards;
}

body #wrap footer.anime .footer-bg_back.footer-bg__03 {
    animation: footer-main-anime-sp-03 600ms;
    animation-fill-mode: forwards;
}

body #wrap footer.anime .footer-parts__01 {
    animation: footer-parts-anime-sp 1000ms ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 300ms;
}

body #wrap footer.anime .footer-parts__01 img {
    transition: transform 1000ms;
    transition-delay: 300ms;
    transition-timing-function: linear;
    transform: translate(300px, 0) rotateZ(180deg) scale(0.5);
}

body #wrap footer.anime .footer-parts__02 {
    animation: footer-parts-anime-sp 1200ms ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 380ms;
}

body #wrap footer.anime .footer-parts__02 img {
    transition: transform 1200ms;
    transition-delay: 380ms;
    transition-timing-function: linear;
    transform: translate(400px, 0) rotateZ(180deg) scale(0.5);
}

@media screen and (min-width: 768px) {
    body #wrap footer.anime .footer-bg_main img {
        animation: footer-bg-anime 600ms;
        animation-fill-mode: forwards;
    }

    body #wrap footer.anime .footer-bg_back.footer-bg__01 {
        animation: footer-main-anime-01 600ms;
        animation-fill-mode: forwards;
    }

    body #wrap footer.anime .footer-bg_back.footer-bg__02 {
        animation: footer-main-anime-02 600ms;
        animation-fill-mode: forwards;
    }

    body #wrap footer.anime .footer-bg_back.footer-bg__03 {
        animation: footer-main-anime-03 600ms;
        animation-fill-mode: forwards;
    }

    body #wrap footer.anime .footer-parts__01 {
        animation: footer-parts-anime 1300ms ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 170ms;
    }

    body #wrap footer.anime .footer-parts__01 img {
        transition: transform 1300ms;
        transition-delay: 170ms;
        transition-timing-function: linear;
        transform: translate(1000px, 0) rotateZ(180deg) scale(0.5);
    }

    body #wrap footer.anime .footer-parts__02 {
        animation: footer-parts-anime 1500ms ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 250ms;
    }

    body #wrap footer.anime .footer-parts__02 img {
        transition: transform 1500ms;
        transition-delay: 250ms;
        transition-timing-function: linear;
        transform: translate(1500px, 0) rotateZ(180deg) scale(0.5);
    }
}

@media screen and (min-width: 768px) {
    body #wrap #global-navi {
        transform: translate(100%, 0);
    }

    body #wrap #global-navi .bg-current {
        margin-left: 650px;
    }

    body #wrap #global-navi ul li a.active {
        background: transparent;
    }

    body #wrap #global-navi ul li a span {
        opacity: 0;
    }

    body #wrap #sub-navi {
        transform: translate(100%, 0);
    }

    body #wrap #sub-navi span {
        opacity: 0;
    }

    body #wrap #sub-navi .bg-current {
        margin-left: 650px;
    }

    body #wrap #sub-navi ul li a.active {
        background: transparent !important;
    }

    body #wrap #sub-navi ul li a span {
        opacity: 0;
    }

    body #wrap #sub-navi .bg-navi,
      body #wrap #sub-navi .menu-list {
        margin-left: 100%;
    }

    body #wrap #sub-navi .menu-list {
        overflow: hidden;
    }

    body #wrap .works-list li {
        opacity: 0;
    }

    body #wrap .news-list li {
        opacity: 0;
    }

    body#top #wrap #global-navi {
        transform: translate(0, 0);
    }

    body#top #wrap #global-navi .bg-current {
        margin-left: 0;
        transition: all 200ms !important;
        transition-delay: 0ms !important;
    }

    body#top #wrap #global-navi .bg-current.moving {
        transition-timing-function: cubic-bezier(0.365, 0.005, 0.375, 1.615) !important;
    }

    body#top #wrap #global-navi ul li a.active {
        background: #55ff01;
    }

    body#top #wrap #global-navi ul li a span {
        opacity: 1;
    }

    body#top #wrap #sub-navi {
        transform: translate(0, 0);
        display: none;
    }

    body#top #wrap #sub-navi span {
        opacity: 1;
    }

    body#top #wrap #sub-navi .bg-current {
        margin-left: 0;
    }

    body#top #wrap #sub-navi .bg-navi,
      body#top #wrap #sub-navi .menu-list {
        margin-left: 0;
    }

    body#top footer {
        pointer-events: none;
    }
}

body #wrap #page-top {
    transform: rotateZ(-90deg);
    transform-origin: 0 100%;
}

body #wrap .btn-more {
    opacity: 0;
    pointer-events: none;
    transition: all 600ms;
    transition-delay: 1800ms;
}

body #wrap.opening-animation header .header-bg_line {
    transform: translate(0, 0);
    transition: all 500ms;
    transition-delay: 400ms;
    transition-timing-function: cubic-bezier(0.42, 0.275, 0.35, 1.285);
}

body #wrap.opening-animation header #header.pc_block {
    transition: all 400ms;
    height: 577px;
    background-position: 0px 0px !important;
    transform: translate(0, 0);
    transition-delay: 600ms;
}

body #wrap.opening-animation header #header.pc_block .header-parts__01 {
    transform: translate(0, 0);
    transition: all 500ms;
    transition-delay: 600ms;
}

body #wrap.opening-animation header #header.pc_block .header-parts__02 {
    transform: translate(0, 0);
    transition: all 600ms;
    transition-delay: 600ms;
}

body #wrap.opening-animation header #header.pc_block .header-parts__03 {
    transform: translate(0, 0);
    transition: all 500ms;
    transition-delay: 600ms;
}

body #wrap.opening-animation h1 {
    animation: opening-logo-animation 700ms;
    animation-delay: 900ms;
    animation-timing-function: cubic-bezier(0.21, 0.59, 0.185, 1);
}

body #wrap.opening-animation #global-navi {
    transition: all 300ms;
    transition-delay: 1100ms;
    transform: translate(0%, 0%);
}

body #wrap.opening-animation #global-navi .bg-current {
    margin-left: 0px;
    transition: left 700ms;
    transition-delay: 1300ms;
    transition-timing-function: cubic-bezier(0.655, 0.03, 0.36, 1.2);
}

body #wrap.opening-animation #global-navi ul li a.active {
    background: #55ff01;
    transition: all 0ms;
    transition-delay: 2100ms;
    color: #292929;
}

body #wrap.opening-animation #global-navi ul li a span {
    opacity: 1;
    transition: all 500ms;
    transition-delay: 2100ms;
}

body #wrap.opening-animation .h2-layer span {
    transition: all 900ms;
    transition-delay: 1400ms;
}

body #wrap.opening-animation .h2-layer span.show {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

body #wrap.opening-animation .h2-layer.h2-layer__02 span {
    transition-delay: 1520ms;
}

@media screen and (min-width: 768px) {
    body #wrap.opening-animation #sub-navi {
        transition: all 850ms;
        transition-timing-function: cubic-bezier(0.45, 0.275, 0.58, 1.365);
        transition-delay: 1700ms;
        transform: translate(0%, 0%);
    }

    body #wrap.opening-animation #sub-navi .bg-navi,
      body #wrap.opening-animation #sub-navi .menu-list {
        transition: all 1050ms;
        transition-timing-function: cubic-bezier(0.45, 0.275, 0.58, 1.365);
        transition-delay: 1600ms;
        margin-left: 0%;
    }

    body #wrap.opening-animation #sub-navi .bg-current {
        transition: all 400ms;
        transition-delay: 2780ms;
        margin-left: 0;
    }

    body #wrap.opening-animation #sub-navi span {
        opacity: 1;
        transition: all 350ms;
        transition-delay: 3280ms;
    }
}

body #wrap.opening-animation #page-top {
    transition: transform 500ms;
    transition-timing-function: cubic-bezier(0.45, 0.275, 0.44, 1.35);
}

@media screen and (min-width: 768px) {
    body #wrap.opening-animation #page-top {
        transform: rotateZ(0deg);
        transition-delay: 2780ms;
    }
}

body #wrap.opening-animation .works-list li {
    opacity: 1;
    transition: all 450ms;
    transition-timing-function: ease-in-out;
}

body #wrap.opening-animation .news-list li {
    transition: all 500ms;
    transition-timing-function: ease-in-out;
    opacity: 1;
}

body #wrap.opening-animation .btn-more {
    opacity: 1;
    pointer-events: auto;
}

body #wrap.opening-animation.opening-end header .header-bg_line {
    transition: all 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end header #header.pc_block {
    transition: all 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end header #header.pc_block .header-parts__01 {
    transition: all 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end header #header.pc_block .header-parts__02 {
    transition: all 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end header #header.pc_block .header-parts__03 {
    transition: all 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end h1 {
    transition: all 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end #global-navi,
  body #wrap.opening-animation.opening-end #sub-navi {
    transition: all 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end #global-navi .bg-current,
    body #wrap.opening-animation.opening-end #sub-navi .bg-current {
    transition: left 200ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end #global-navi .bg-current.moving,
      body #wrap.opening-animation.opening-end #sub-navi .bg-current.moving {
    transition-timing-function: cubic-bezier(0.365, 0.005, 0.375, 1.615) !important;
}

body #wrap.opening-animation.opening-end #global-navi ul li a.active,
    body #wrap.opening-animation.opening-end #sub-navi ul li a.active {
    background: #55ff01 !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end #global-navi ul li a span,
    body #wrap.opening-animation.opening-end #sub-navi ul li a span {
    opacity: 1;
    transition: all 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end #sub-navi {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end #sub-navi > div {
    transition-duration: 600ms;
    transition-delay: 0ms;
}

body #wrap.opening-animation.opening-end #sub-navi > div ul li {
    transition: all 400ms;
}

body #wrap.opening-animation.opening-end h1 {
    transform: translate(0, 0) !important;
    animation-name: none !important;
}

body #wrap.opening-animation.opening-end h2 .h2-layer span {
    opacity: 0 !important;
    transition: all 300ms;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end h2 .h2-layer span.show {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    transition-duration: 2000ms;
    transition-delay: 1000ms !important;
    transition-timing-function: cubic-bezier(0.11, 0.71, 0.205, 1);
}

body #wrap.opening-animation.opening-end h2 .h2-layer.h2-layer__01 span {
    transform: translate(-25px, 0);
}

body #wrap.opening-animation.opening-end h2 .h2-layer.h2-layer__02 span {
    transform: translate(25px, 0);
}

body #wrap.opening-animation.opening-end #page-top {
    transition-duration: 400ms !important;
    transition-delay: 0ms !important;
    transform: rotateZ(0deg);
}

body #wrap.opening-animation.opening-end #page-top.hide {
    transform: rotateZ(-90deg);
}

@media screen and (min-width: 768px) {
    body #wrap.opening-animation.opening-end #page-top.first-show.hide {
        transform: rotateZ(0deg);
    }

    body #wrap.opening-animation.opening-end #page-top:not(.first-show).hide {
        transform: rotateZ(-90deg);
        transition-timing-function: cubic-bezier(0.51, -0.48, 0.53, 0.985);
    }
}

body #wrap.opening-animation.opening-end .works-list li {
    opacity: 1;
    transition: all 400ms;
}

body #wrap.opening-animation.opening-end .works-list li a {
    background: transparent;
    transition-duration: 0ms;
    transition-delay: 0ms;
}

body #wrap.opening-animation.opening-end .works-list li a img {
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end .works-list.hide li {
    opacity: 0 !important;
    transition-timing-function: ease-in-out !important;
}

body #wrap.opening-animation.opening-end .works-list.hide li a {
    opacity: 1 !important;
    transition: all 0ms !important;
    transition-delay: 0ms !important;
}

body #wrap.opening-animation.opening-end .works-list.hide li a img {
    transition: all 0ms !important;
    opacity: 0.25 !important;
}

body #wrap.opening-animation.opening-end .works-list.hide li.current {
    opacity: 0 !important;
    transform: scale(0.01) !important;
    transition-duration: 370ms !important;
    transition-delay: 400ms !important;
    transition-timing-function: cubic-bezier(0.51, -0.48, 0.53, 0.985) !important;
}

body #wrap.opening-animation.opening-end .works-list.hide li.current a {
    opacity: 1 !important;
    background: transparent;
    transition: all 300ms;
}

body #wrap.opening-animation.opening-end .works-list.hide li.current a img {
    transition-duration: 0ms !important;
    opacity: 1 !important;
}

body #wrap.opening-animation.opening-end .news-list li a > div, body #wrap.opening-animation.opening-end .news-list li a > dl {
    opacity: 1;
    transition-delay: 0ms;
}

body #wrap.opening-animation.opening-end .news-list.hide li {
    opacity: 0 !important;
    transition: all 400ms;
    transition-timing-function: ease-in-out !important;
}

body #wrap.opening-animation.opening-end .news-list.hide li.current {
    opacity: 0 !important;
    transform: scale(0.01) !important;
    transition-duration: 450ms !important;
    transition-delay: 850ms !important;
    transition-timing-function: cubic-bezier(0.53, -0.525, 0.62, 0.99) !important;
}

body #wrap.opening-animation.opening-end .news-list.hide li.current a > div, body #wrap.opening-animation.opening-end .news-list.hide li.current a > dl {
    opacity: 1 !important;
}

body #wrap.opening-animation.opening-end .btn-more {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0ms;
}

body #wrap.opening-animation.opening-end .btn-more.hide {
    opacity: 0;
}

body#top {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body#top .glitch {
    position: absolute;
    overflow: hidden;
}

body#top .glitch_img:nth-child(2),
    body#top .glitch_img:nth-child(3),
    body#top .glitch_img:nth-child(4) {
    display: none;
}

body#top.isChrome .glitch_img, body#top.isSafari .glitch_img {
    display: block;
    position: absolute;
    top: calc(-1 * 5px);
    left: calc(-1 * 10px);
    width: calc(100% + 10px * 2);
    height: calc(100% + 5px * 2);
    background: url(../img/img1.jpg) no-repeat 50% 0;
    background-size: cover;
    transform: translate3d(0, 0, 0);
}

body#top.isChrome .glitch_img:nth-child(n+2), body#top.isSafari .glitch_img:nth-child(n+2) {
    opacity: 0;
}

body#top.isChrome .glitch_img:nth-child(n+2), body#top.isSafari .glitch_img:nth-child(n+2) {
    animation-duration: 4000ms;
    animation-delay: 2000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

body#top.isChrome .glitch_img:nth-child(2), body#top.isSafari .glitch_img:nth-child(2) {
    animation-name: glitch-animation01;
}

body#top.isChrome .glitch_img:nth-child(3), body#top.isSafari .glitch_img:nth-child(3) {
    animation-name: glitch-animation02;
}

body#top.isChrome .glitch_img:nth-child(4), body#top.isSafari .glitch_img:nth-child(4) {
    animation-name: glitch-animation03;
}

body#top .top-logo {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    font-size: 0;
    transform-origin: 100% 0%;
}

body#top .top-logo.glitch .glitch_img {
    position: absolute;
    width: 1154px;
    height: 720px;
    top: 0;
    left: 0;
    background-image: url("/assets/images/top/top_logo.png");
    background-size: cover;
}

body#top .top-logo #logo-canvas {
    width: 1154px;
    height: 720px;
}

body#top #top-popup-video {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    transform: translate3d(0, 0, 0);
    transition: opacity 400ms;
    display: block;
}

body#top #top-popup-video.show {
    opacity: 1;
    transition-duration: 2000ms;
    transition-delay: 600ms;
}

body#top.isSp .main-slide-area {
    width: 100vw !important;
    left: 0 !important;
}

body#top.isSp .main-slide-area .main-slide-area-container {
    background-size: cover;
}

body#top.isSp .main-slide-area .main-slide-area-container .main-slide-area-img {
    transition-duration: 0ms !important;
}

body#top.isFirefox .main-slide-area-video, body#top.isIe11 .main-slide-area-video, body#top.isEdge .main-slide-area-video {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body#top #wrap {
    position: absolute;
    height: 100%;
    overflow: hidden;
}

body#top #wrap .contents {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0 !important;
}

body#top #wrap #global-navi {
    transform: translate(0, 0);
}

body#top #wrap #barba-wrapper {
    position: static;
    transform: none;
}

body#top #wrap #main {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    display: block;
}

body#top #wrap #main .main-slide-area {
    position: relative;
    width: calc(100% + 400px);
    height: 100%;
    top: 50%;
    left: -200px;
    transform: translate(0%, -50%);
}

body#top #wrap #main .main-slide-area .main-slide-area-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    transform: translate(0, 0);
}

body#top #wrap #main .main-slide-area .main-slide-area-container .main-slide-area-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

body#top #wrap #main .main-slide-area .main-slide-area-container .resizing {
    transition-duration: 0ms !important;
}

body#top #sub-navi,
    body#top header {
    opacity: 0;
    pointer-events: none;
    transition-delay: 0ms;
    transition-duration: 0ms;
}

#contact #wrap .bg-current {
    margin-left: 0px !important;
}

#company #wrap .inner,
#contact #wrap .inner,
#recruit #wrap .inner,
.in #wrap .inner {
    opacity: 0;
}

#company #wrap.opening-animation .inner,
#contact #wrap.opening-animation .inner,
#recruit #wrap.opening-animation .inner,
.in #wrap.opening-animation .inner {
    opacity: 1;
    transition: opacity 800ms;
    transition-delay: 1900ms;
}

#company #wrap.opening-animation.opening-end .inner,
#contact #wrap.opening-animation.opening-end .inner,
#recruit #wrap.opening-animation.opening-end .inner,
.in #wrap.opening-animation.opening-end .inner {
    opacity: 1;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
}

#wrap #sub-navi > div {
    opacity: 1;
    transition-duration: 0ms;
}

#wrap #sub-navi > div ul {
    overflow: hidden;
}

#wrap #sub-navi > div ul li {
    position: relative;
    transition-timing-function: cubic-bezier(0.695, 0.17, 0.46, 0.915) !important;
    transition: all 200ms;
    transition-duration: 200ms !important;
    transform: translate3d(0, -101%, 0);
}

#wrap #sub-navi > div ul li .active {
    transition: all 200ms;
    opacity: 0;
    transition-delay: 0ms;
}

#wrap #sub-navi > div .bg-navi {
    opacity: 0;
}

#wrap #sub-navi .bg-current {
    transform: skew(-32deg) translate(0, 0);
}

#wrap.opening-animation.opening-end #sub-navi > div .bg-navi {
    transition-duration: 500ms;
    transition-delay: 100ms;
}

#wrap.opening-animation.opening-end #sub-navi .bg-current {
    opacity: 0;
    transition-delay: 0ms !important;
}

#news #wrap #sub-navi .snavi-news {
    z-index: 2;
}

#news #wrap #sub-navi .snavi-news ul li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(0) {
    transition-delay: 500ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(1) {
    transition-delay: 550ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(2) {
    transition-delay: 600ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(3) {
    transition-delay: 650ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(4) {
    transition-delay: 700ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(5) {
    transition-delay: 750ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(6) {
    transition-delay: 800ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(7) {
    transition-delay: 850ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(8) {
    transition-delay: 900ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(9) {
    transition-delay: 950ms;
}

#news #wrap #sub-navi .snavi-news ul li:nth-child(10) {
    transition-delay: 1000ms;
}

#news #wrap #sub-navi .snavi-news ul li .active {
    opacity: 1;
}

#news #wrap #sub-navi .snavi-news .bg-navi {
    opacity: 1;
}

#news #wrap #sub-navi .bg-current {
    transform: skew(-32deg) translate(0, 0%);
}

#news #wrap.opening-animation.opening-end #sub-navi .bg-navi {
    opacity: 1;
    transition-delay: 0ms !important;
}

#news #wrap.opening-animation.opening-end #sub-navi .bg-current {
    opacity: 1;
}

#works #wrap #sub-navi .snavi-works {
    z-index: 2;
}

#works #wrap #sub-navi .snavi-works ul li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(0) {
    transition-delay: 500ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(1) {
    transition-delay: 550ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(2) {
    transition-delay: 600ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(3) {
    transition-delay: 650ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(4) {
    transition-delay: 700ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(5) {
    transition-delay: 750ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(6) {
    transition-delay: 800ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(7) {
    transition-delay: 850ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(8) {
    transition-delay: 900ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(9) {
    transition-delay: 950ms;
}

#works #wrap #sub-navi .snavi-works ul li:nth-child(10) {
    transition-delay: 1000ms;
}

#works #wrap #sub-navi .snavi-works ul li .active {
    opacity: 1;
}

#works #wrap #sub-navi .snavi-works .bg-navi {
    opacity: 1;
}

#works #wrap #sub-navi .bg-current {
    opacity: 1;
    transform: skew(-32deg) translate(0, 0%);
}

#works #wrap.opening-animation.opening-end #sub-navi .bg-navi {
    opacity: 1;
    transition-delay: 0ms !important;
}

#works #wrap.opening-animation.opening-end #sub-navi .bg-current {
    opacity: 1;
}

@media screen and (min-width: 768px) {
    #wrap #sub-navi > div ul li {
        transform: translate3d(0px, 0, 0);
        top: -50px;
    }

    #news #wrap #sub-navi .snavi-news ul li {
        transform: translate3d(0, 0, 0);
        top: 0;
    }

    #works #wrap #sub-navi .snavi-works {
        z-index: 2;
    }

    #works #wrap #sub-navi .snavi-works ul li {
        transform: translate3d(0, 0, 0);
        top: 0;
    }
}