@charset "utf-8";

:root {
  --sp-header-height: calc(100dvw * 0.158);
}

body {
  padding-top: 100px;
}

#full {
  overflow: hidden;
}

#header {
  position: fixed;
  top: 0;
  z-index: 100;
  transition: top 0.5s;
}

#footetMenu {
  transition: opacity 0.5s;
  opacity: 0.0;
}

#play-cm {
  position: fixed;
  bottom: 10px;
  right: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 2000;
  opacity: 0.0;
  transition: opacity 0.5s;
}
  #play-cm a {
    display: block;
  }
    #play-cm a img {
      width: 120px;
    }

@media screen and (max-width: 1024px) {
  #play-cm {
    bottom: 0;
    right: 0;
    display: flex;
    height: calc(100dvh - var(--sp-header-height));
    margin-top: var(--sp-header-height);
    align-items: center;
  }
    #play-cm .frame {
      display: inline-flex;
      align-content: center;
      align-items: flex-end;
      width: 100%;
      height: fit-content;
      max-height: calc(100dvh - var(--sp-header-height));
      aspect-ratio: 960 / 1280;
      justify-content: center;
    }
    #play-cm a img {
      margin-bottom: 10px;
    }
}

#g-naviArea {
  visibility: hidden;
}
body.menu-open #play-cm {
  display: none;
}
body.menu-open #g-naviArea {
  visibility: visible;
}

section#movie {
  position: fixed;
  top: 0;
  width: 100%;
  height: calc(100dvh - 100px);
  opacity: 0.0;
  transition: opacity 0.5s;
}
  section#movie > div {
    overflow: hidden;
  }
    section#movie > div > video {
      margin-top: 100px;
      width: 100%;
      height: calc((100dvh - 100px) * 1);
      object-fit: cover;
      object-position: center;
    }

@media screen and (max-width: 1024px) {
  section#movie > .sp {
    background: #000;
    height: calc(100dvh - var(--sp-header-height));
    margin-top: var(--sp-header-height);
    display: flex !important;
    align-items: center;
  }
    section#movie > .sp > video {
      margin-top: 0;
      object-fit: initial;
      object-position: unset;
      width: 100%;
      height: initial;
    }
}
body.state-1 section#movie {
  opacity: 1.0;
}
body.state-1 #play-cm {
  opacity: 1.0;
  visibility: visible
}

section#message {
  height: 100vh;
  overflow: hidden;
  opacity: 0.0;
  transition: opacity 0.5s;
}
  section#message > div {
    width: 100%;
  }
    section#message > div > figure {
      width: 100%;
    }
      section#message > div > figure > img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: center;
      }

body.transer-on section#message {
  transition: opacity 0.5s;
  opacity: 1.0;
}

body.state-2 #header {
  position: fixed;
  top: -120px;
  transition: top .5s;
}

@media screen and (max-width: 1024px) {
  body.state-2 #header {
    top: -240px;
  }
}

body.state-2 section#movie {
  opacity: 0.0;
}
body.state-2 #play-cm {
  opacity: 0.0;
  visibility: hidden;
}
body.state-3 section#movie {
  opacity: 0.0;
}
body.state-3 #play-cm {
  opacity: 0.0;
  visibility: hidden;
}

body.state-3 #header {
  position: fixed !important;
  top: 0 !important;
  transition: top .5s !important;
}
body.state-3 #footetMenu {
  opacity: 1.0;
}

#transer {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  opacity: 0.5;
  transition: transform 0.6s;
  transform: skew(20deg) translateX(-150vw);
}
body.transer-on #transer {
  transform: skew(20deg) translateX(150vw);
}