#loader-sub {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  perspective: 6000px;
  background: #fff;
  overflow: hidden;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 16001;
}
#loader-sub #container {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -10px;
  text-align: center;
  font-family: "Marcellus", serif;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #loader-sub #container {
    top: 40%;
  }
}
#loader-sub #container span {
  display: block;
  background: #4ea4bb;
  width: 100px;
  height: 5px;
  margin-top: 5px;
  animation: load 2s infinite;
  border-radius: 5px;
}
#loader-sub #container span:nth-child(2) {
  animation-delay: 100ms;
}
#loader-sub #container span:nth-child(3) {
  animation-delay: 200ms;
}
@keyframes load {
  50% {
    width: 5px;
    margin-right: 95px;
    opacity: 0.1;
  }
}

#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  perspective: 6000px;
  background: #000;
  overflow: hidden;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1000;
}
#loader .ie {
  display: none;
}
@media all and (-ms-high-contrast: none) {
  #loader .ie {
    display: block;
    font-size: 32px;
    text-align: center;
    width: 100%;
    color: #fff;
    opacity: 1;
    position: absolute;
    top: 40%;
    left: 0px;
    font-family: "Marcellus", serif;
    letter-spacing: 0.2em;
  }
}
#loader #wrap #cube3 .front h2 .word .char:nth-of-type(1), #loader #wrap #cube3 .back h2 .word .char:nth-of-type(1) {
  left: calc((0) * 14.28%);
}
#loader #wrap #cube3 .front h2 .word .char:nth-of-type(2), #loader #wrap #cube3 .back h2 .word .char:nth-of-type(2) {
  left: calc((1) * 14.28%);
}
#loader #wrap #cube3 .front h2 .word .char:nth-of-type(3), #loader #wrap #cube3 .back h2 .word .char:nth-of-type(3) {
  left: calc((2) * 14.28%);
}
#loader #wrap #cube3 .front h2 .word .char:nth-of-type(4), #loader #wrap #cube3 .back h2 .word .char:nth-of-type(4) {
  left: calc((3) * 14.28%);
}
#loader #wrap #cube3 .front h2 .word .char:nth-of-type(5), #loader #wrap #cube3 .back h2 .word .char:nth-of-type(5) {
  left: calc((4) * 14.28%);
}
#loader #wrap #cube3 .front h2 .word .char:nth-of-type(6), #loader #wrap #cube3 .back h2 .word .char:nth-of-type(6) {
  left: calc((5) * 14.28%);
}
#loader #wrap #cube3 .front h2 .word .char:nth-of-type(7), #loader #wrap #cube3 .back h2 .word .char:nth-of-type(7) {
  left: calc((6) * 14.28%);
}
#loader #wrap #cube3 .left h2 .word .char:nth-of-type(1), #loader #wrap #cube3 .right h2 .word .char:nth-of-type(1) {
  left: calc((0) * 16%);
}
#loader #wrap #cube3 .left h2 .word .char:nth-of-type(2), #loader #wrap #cube3 .right h2 .word .char:nth-of-type(2) {
  left: calc((1) * 16%);
}
#loader #wrap #cube3 .left h2 .word .char:nth-of-type(3), #loader #wrap #cube3 .right h2 .word .char:nth-of-type(3) {
  left: calc((2) * 16%);
}
#loader #wrap #cube3 .left h2 .word .char:nth-of-type(4), #loader #wrap #cube3 .right h2 .word .char:nth-of-type(4) {
  left: calc((3) * 16%);
}
#loader #wrap #cube3 .left h2 .word .char:nth-of-type(5), #loader #wrap #cube3 .right h2 .word .char:nth-of-type(5) {
  left: calc((4) * 16%);
}
#loader #wrap #cube3 .left h2 .word .char:nth-of-type(6), #loader #wrap #cube3 .right h2 .word .char:nth-of-type(6) {
  left: calc((5) * 16%);
}
#loader #wrap {
  zoom: 0.9;
  width: 350px;
  height: 350px;
  position: relative;
  transform-style: preserve-3d;
  animation: updown 2s ease-in-out forwards;
  transform-origin: 50% 100%;
}
#loader #wrap:before {
  content: "";
  position: absolute;
  width: 400%;
  height: 400%;
  left: -150%;
  top: -150%;
  background: radial-gradient(ellipse at center, #000 0%, transparent 90%);
  backface-visibility: hidden;
  animation: fade 2s ease-in-out forwards;
  animation-delay: 0s;
  border-radius: 100%;
}
@keyframes fade {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  75% {
    transform: scale(0.25);
    opacity: 1;
  }
  97.5% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes updown {
  0% {
    transform: scale(0.75) translateY(-15%) rotateX(60deg) scaleY(1.75);
    transform-origin: 50% 75%;
  }
  10% {
    transform: scale(0.75) translateY(-15%) rotateX(60deg) scaleY(1.75);
    transform-origin: 50% 75%;
  }
  90% {
    transform: scale(0.75) rotateX(0deg) translateY(12.5%);
    transform-origin: 50% 0%;
  }
  100% {
    transform: scale(0.75) rotateX(0deg) translateY(12.5%);
    transform-origin: 50% 0%;
  }
}
#loader #wrap .cube {
  position: absolute;
  width: 100%;
  height: 33.3333%;
  left: 0;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(315deg);
  animation: spinback_sp 2s ease-in-out forwards;
  display: block;
}
@media screen and (min-width: 768px) {
  #loader #wrap .cube {
    animation: spinback 2s ease-in-out forwards;
  }
}
@media all and (-ms-high-contrast: none) {
  #loader #wrap .cube {
    display: none;
  }
}
#loader #wrap .cube:nth-child(1) {
  display: none;
}
@media screen and (min-width: 1000px) {
  #loader #wrap .cube:nth-child(1) {
    display: block;
  }
}
@media screen and (min-width: 1000px) and (-ms-high-contrast: none) {
  #loader #wrap .cube:nth-child(1) {
    display: none;
  }
}
#loader #wrap .cube:nth-child(3) {
  display: none;
}
@media screen and (min-width: 1000px) {
  #loader #wrap .cube:nth-child(3) {
    display: block;
  }
}
@media screen and (min-width: 1000px) and (-ms-high-contrast: none) {
  #loader #wrap .cube:nth-child(3) {
    display: none;
  }
}
#loader #wrap .cube:nth-of-type(even) {
  animation-direction: reverse;
}
#loader #wrap .cube:nth-of-type(even) * {
  animation-direction: reverse;
}
#loader #wrap .cube:nth-of-type(even) *:before {
  animation-direction: reverse !important;
}
#loader #wrap .cube:nth-of-type(1) {
  top: 25%;
}
@media screen and (min-width: 768px) {
  #loader #wrap .cube:nth-of-type(1) {
    top: 0%;
  }
}
#loader #wrap .cube:nth-of-type(even) {
  animation-direction: reverse;
}
#loader #wrap .cube:nth-of-type(even) * {
  animation-direction: reverse;
}
#loader #wrap .cube:nth-of-type(even) *:before {
  animation-direction: reverse !important;
}
#loader #wrap .cube:nth-of-type(2) {
  top: 25%;
}
@media screen and (min-width: 768px) {
  #loader #wrap .cube:nth-of-type(2) {
    top: 30%;
  }
}
#loader #wrap .cube:nth-of-type(even) {
  animation-direction: reverse;
}
#loader #wrap .cube:nth-of-type(even) * {
  animation-direction: reverse;
}
#loader #wrap .cube:nth-of-type(even) *:before {
  animation-direction: reverse !important;
}
#loader #wrap .cube:nth-of-type(3) {
  top: 25%;
}
@media screen and (min-width: 768px) {
  #loader #wrap .cube:nth-of-type(3) {
    top: 60%;
  }
}
@keyframes spinback {
  10% {
    transform: rotateX(0deg) rotateY(315deg);
  }
  90% {
    transform: rotateX(0deg) rotateY(-45deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(-45deg);
    top: 30%;
  }
}
@keyframes spinback_sp {
  10% {
    transform: rotateX(0deg) rotateY(315deg);
  }
  90% {
    transform: rotateX(0deg) rotateY(-45deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(-45deg);
  }
}
@keyframes spinback2 {
  10% {
    transform: rotateX(0deg) rotateY(-315deg);
  }
  90% {
    transform: rotateX(0deg) rotateY(45deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(45deg);
  }
}
#loader #wrap .cube div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}
#loader #wrap .cube div.back:before {
  transform: translateZ(-50px);
}
#loader #wrap .cube div * {
  transform-style: preserve-3d;
}
#loader #wrap .cube div h2 {
  color: #fff;
  width: calc(100% - 10px);
  left: 5px;
  position: relative;
  margin: 0;
  font-size: 40px;
  font-weight: bold;
  font-family: "Marcellus", serif;
  height: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}
#loader #wrap .cube div h2 .word {
  position: relative;
  width: 100%;
}
#loader #wrap .cube div h2 .word .char {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 25%;
  height: 100%;
  color: transparent;
  font-size: 40px;
}
#loader #wrap .cube div h2 .word .char:before {
  content: attr(data-char);
  color: #fff;
  font-weight: 900;
  -webkit-text-stroke: 5px #000;
  position: absolute;
  transform: rotateX(0deg) rotateY(-315deg);
  animation: spinback2 2s ease-in-out;
  text-shadow: 0 0 40px #000;
}
#loader #wrap .cube div h2 .word .char:nth-of-type(1) {
  left: calc((0) * 25%);
}
#loader #wrap .cube div h2 .word .char:nth-of-type(2) {
  left: calc((1) * 25%);
}
#loader #wrap .cube div h2 .word .char:nth-of-type(3) {
  left: calc((2) * 25%);
}
#loader #wrap .cube div h2 .word .char:nth-of-type(4) {
  left: calc((3) * 25%);
}
#loader #wrap .cube div.front {
  transform: translateZ(175px);
}
#loader #wrap .cube div.front h2 .word .char {
  color: #fff;
}
#loader #wrap .cube div.front h2 .word .char:nth-of-type(-n + 2) {
  color: #000;
  -webkit-text-stroke: 3px #fff;
}
@media all and (-ms-high-contrast: none) {
  #loader #wrap .cube div.front h2 .word .char:nth-of-type(-n + 2) {
    color: #fff;
  }
}
#loader #wrap .cube div.front h2 .word .char:nth-of-type(-n + 2):before {
  color: #000;
  -webkit-text-stroke: 3px #fff;
}
@media all and (-ms-high-contrast: none) {
  #loader #wrap .cube div.front h2 .word .char:nth-of-type(-n + 2):before {
    color: #fff;
  }
}
#loader #wrap .cube div.back {
  transform: translateZ(-175px) rotateY(0deg) rotateX(0deg);
}
#loader #wrap .cube div.back h2 .word .char {
  color: #fff;
  transform: rotateY(360deg);
}
#loader #wrap .cube div.back h2 .word .char:nth-of-type(n + 3) {
  color: #000;
  -webkit-text-stroke: 3px #fff;
}
#loader #wrap .cube div.back h2 .word .char:nth-of-type(n + 3):before {
  color: #000;
  -webkit-text-stroke: 3px #fff;
}
#loader #wrap .cube div.back h2 .word .char:before {
  animation: spinback3 2s ease-in-out;
  transform: rotateX(0deg) rotateY(-315deg);
}
@keyframes spinback3 {
  10% {
    transform: rotateX(0deg) rotateY(-315deg);
  }
  90% {
    transform: rotateX(0deg) rotateY(45deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(45deg);
  }
}
#loader #wrap .cube div.left {
  transform-origin: left;
  left: 100%;
  transform: translateZ(175px) rotateY(90deg);
}
#loader #wrap .cube div.left h2 .word .char {
  color: #fff;
  transform: rotateY(-90deg);
}
#loader #wrap .cube div.right {
  transform-origin: right;
  left: -100%;
  transform: translateZ(175px) rotateY(-90deg);
}
#loader #wrap .cube div.right h2 .word .char {
  color: #fff;
  transform: rotateY(90deg);
}
#loader #wrap .cube div.right h2 .word .char:before {
  animation: spinback2 2s ease-in-out;
}

/*
//@import './sass/topslider';
@import './sass/top';
//@import './sass/loading';


@import './sass/page';




@import './sass/faq';

@import './sass/taiken';

@import './sass/contact';

@import './sass/staff';

@import './sass/archive';

@import './sass/single';
*/