body {
  overflow: hidden;
}

body.loaded {
  overflow: visible;
}

.intro {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #000;
  background-image: url(../img/openingback01.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}

.intro.hide {
  -webkit-transition: opacity 2s ease .3s, z-index 0s linear 2.3s;
  transition: opacity 2s ease .3s, z-index 0s linear 2.3s;
  opacity: 0;
  z-index: -1;
}

.intro__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 62.5%;
}

.mask {
  fill: none;
  stroke: #000;
  stroke-width: 2.5vw;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
}

.dot {
  opacity: 0;
}

.intro__logo.show .mask {
  stroke-dashoffset: 2000;
}

.intro__logo .p_s {
  -webkit-transition: all .4s ease-in 0s;
  transition: all .4s ease-in 0s;
  stroke-dashoffset: 1645;
}

.intro__logo .p_t {
  -webkit-transition: all .25s ease-in .55s;
  transition: all .25s ease-in .55s;
  stroke-dashoffset: 1888;
}

.intro__logo .p_ana {
  -webkit-transition: all 1s linear .85s;
  transition: all 1s linear .85s;
  stroke-dashoffset: 1710;
}

.intro__logo .p_k_1 {
  -webkit-transition: all .3s linear 1.9s;
  transition: all .3s linear 1.9s;
  stroke-dashoffset: 1860;
}

.intro__logo .p_k_2 {
  -webkit-transition: all .1s linear 2.25s;
  transition: all .1s linear 2.25s;
  stroke-dashoffset: 1980;
}

.intro__logo .p_a {
  -webkit-transition: all .4s linear 2.4s;
  transition: all .4s linear 2.4s;
  stroke-dashoffset: 1908;
}

.intro__logo.show .dot {
  -webkit-transition: opacity 0s linear 3s;
  transition: opacity 0s linear 3s;
  opacity: 1;
}

@-webkit-keyframes stroke {
  0% {
    stroke-dashoffset: 1500;
  }
  100% {
    stroke-dashoffset: 2000;
  }
}

@keyframes stroke {
  0% {
    stroke-dashoffset: 1500;
  }
  100% {
    stroke-dashoffset: 2000;
  }
}

.homeBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.homeBg .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding: 177.5% 0 0;
  background-image: url(../img/openingimg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.stickyContents {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -webkit-transition: all 1.6s ease .2s;
  transition: all 1.6s ease .2s;
  opacity: 1;
}

.stickyContents.hide {
  -webkit-transform: translate(-30%, 0);
  transform: translate(-30%, 0);
  opacity: 0;
}

.stickyContents.static {
  -webkit-transition: none;
  transition: none;
  position: static;
  z-index: auto;
}

.stickyContents.relative {
  position: relative;
}

.mv {
  position: relative;
  background: #000;
  width: 100%;
  height: 0;
  padding: 177.5% 0 0;
  -webkit-transition: all 1.6s ease;
  transition: all 1.6s ease;
  opacity: 1;
}

.mv.hide {
  -webkit-transform: translate(-30%, 0);
  transform: translate(-30%, 0);
  opacity: 0;
}

.mv.show {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}

.mv canvas {
  position: absolute;
}

.dots {
  position: absolute;
  left: 50%;
  bottom: 25px;
  z-index: 1;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 0;
}

.dots li {
  width: 6px;
  height: 6px;
  margin: 0 5px;
}

.dots li button {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #c8c8c8;
  text-indent: -9999px;
}

.dots li.dots-active button {
  background: #323232;
}

.homeLogo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 1;
  -webkit-transition: translate 1.8s ease 2s, opacity 1.8s ease 2s, -webkit-filter .4s linear;
  transition: translate 1.8s ease 2s, opacity 1.8s ease 2s, -webkit-filter .4s linear;
  transition: translate 1.8s ease 2s, opacity 1.8s ease 2s, filter .4s linear;
  transition: translate 1.8s ease 2s, opacity 1.8s ease 2s, filter .4s linear, -webkit-filter .4s linear;
}

.homeLogo.hide {
  opacity: 0;
}

.homeLogo.show {
  -webkit-transition: none;
  transition: none;
  opacity: 1;
}

.homeLogo__inner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 64.0625%;
}

/*.pc { display: block !important; }
.sp { display: none !important; }*/

.fade{
  animation-name:fade-in1;
  animation-duration:8s!important;
  animation-timing-function: ease-out!important;
  animation-delay:3.5s!important;
  animation-iteration-count:1!important;
  animation-direction:normal!important;
  animation-fill-mode: forwards!important;
}
@keyframes fade-in1 {
  0% {opacity: 0}
  100% {opacity: 1}
}





@media screen and (min-width: 480px) {
  .intro__logo {
    width: 365px;
  }
  .mask {
    stroke-width: 10px;
  }
  .homeBg {
    min-width: 1100px;
  }
  .homeBg .inner {
    padding: 74.21875% 0 0;
  }
  .mv {
    min-width: 1100px;
    padding: 74.21875% 0 0;
  }
  .dots {
    bottom: 65px;
  }
  .dots li {
    width: 10px;
    height: 10px;
    margin: 0 7px;
  }
  .homeLogo {
    min-width: 1100px;
  }
  .homeLogo__inner {
    width: 410px;
  }
}

/*# sourceMappingURL=home.css.map */