@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*============================================================
  motion
============================================================*/
.motion-in {
  opacity: 0;
}
.motion-in.active {
  animation: fadeIn 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

/*============================================================
  :hover
============================================================*/
@media (hover: hover) {
  .button-reservation {
    transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .button-next,
  .button-prev {
    transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .button-accordion {
    transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #charm-footer .division-charm-footer-1 .ul-menu > li > a {
    transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #charm-footer .division-charm-footer-1 .ul-sns > li > a {
    transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #charm-index .division-charm-index-2 .division-charm-index-2-2 .ul-menu > li > a {
    transition: border 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #charm-halls .division-charm-halls-2 .ul-menu > li > a {
    transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
/*============================================================
  header
============================================================*/
@keyframes header_in {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
#header.floating {
  animation: header_in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#charm-header .button-menu .icon-menu::before,
#charm-header .button-menu .icon-menu::after {
  transition: all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

#charm-header .input-menu .button-menu .icon-menu .bar {
  transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 768px) and (orientation: portrait) {
  #charm-header .division-charm-header-2 .nav-header {
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(-8%);
    opacity: 0;
  }
  #charm-header .division-charm-header-2 .input-menu:checked ~ .nav-header {
    transform: translateY(0);
    opacity: 1;
  }
}
/*============================================================
  INTRO MOVIE
============================================================*/
.introArea {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  transition: opacity 3s ease, visibility 3s ease;
}
.introArea video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.introArea.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/*============================================================
  KV AREA
============================================================*/
.kvArea {
  opacity: 0;
}
.kvArea.is-wait .kvSlider > li,
.kvArea.is-wait .kvSlider > li img {
  animation-play-state: paused;
}
.kvArea.is-active {
  opacity: 1;
}
.kvArea.is-active .kvSlider > li,
.kvArea.is-active .kvSlider > li img {
  animation-play-state: running;
}
.kvArea .kvSlider > li {
  animation: slideMask 30s ease infinite;
}
.kvArea .kvSlider > li img {
  animation: slideFade 30s ease infinite;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(1) {
  animation-delay: 0s;
  z-index: 6;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(1) img {
  animation-delay: 0s;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(2) {
  animation-delay: 5s;
  z-index: 5;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(2) img {
  animation-delay: 5s;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(3) {
  animation-delay: 10s;
  z-index: 4;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(3) img {
  animation-delay: 10s;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(4) {
  animation-delay: 15s;
  z-index: 3;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(4) img {
  animation-delay: 15s;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(5) {
  animation-delay: 20s;
  z-index: 2;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(5) img {
  animation-delay: 20s;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(6) {
  animation-delay: 25s;
  z-index: 1;
}
.kvArea .kvSlider:nth-child(1) > li:nth-child(6) img {
  animation-delay: 25s;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(1) {
  animation-delay: 0.15s;
  z-index: 6;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(1) img {
  animation-delay: 0.15s;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(2) {
  animation-delay: 5.15s;
  z-index: 5;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(2) img {
  animation-delay: 5.15s;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(3) {
  animation-delay: 10.15s;
  z-index: 4;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(3) img {
  animation-delay: 10.15s;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(4) {
  animation-delay: 15.15s;
  z-index: 3;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(4) img {
  animation-delay: 15.15s;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(5) {
  animation-delay: 20.15s;
  z-index: 2;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(5) img {
  animation-delay: 20.15s;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(6) {
  animation-delay: 25.15s;
  z-index: 1;
}
.kvArea .kvSlider:nth-child(2) > li:nth-child(6) img {
  animation-delay: 25.15s;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(1) {
  animation-delay: 0.3s;
  z-index: 6;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(1) img {
  animation-delay: 0.3s;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(2) {
  animation-delay: 5.3s;
  z-index: 5;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(2) img {
  animation-delay: 5.3s;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(3) {
  animation-delay: 10.3s;
  z-index: 4;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(3) img {
  animation-delay: 10.3s;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(4) {
  animation-delay: 15.3s;
  z-index: 3;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(4) img {
  animation-delay: 15.3s;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(5) {
  animation-delay: 20.3s;
  z-index: 2;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(5) img {
  animation-delay: 20.3s;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(6) {
  animation-delay: 25.3s;
  z-index: 1;
}
.kvArea .kvSlider:nth-child(3) > li:nth-child(6) img {
  animation-delay: 25.3s;
}

@keyframes slideMask {
  0% {
    clip-path: inset(0 0 0 0);
  }
  16.6666666667% {
    z-index: 7;
    clip-path: inset(0 0 0 0);
  }
  23.3333333333% {
    z-index: 7;
    clip-path: inset(0 0 100% 0);
  }
  31.6666666667% {
    z-index: 0;
  }
  100% {
    clip-path: inset(0 0 100% 0);
  }
}
@keyframes slideFade {
  0% {
    opacity: 1;
  }
  18.3333333333% {
    opacity: 1;
  }
  23.3333333333% {
    opacity: 0;
  }
  98.3333333333% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}